#filtersetslist td.name:before, #filterslist td.name:before, #identities-table td.mail:before, #message-header .header-links a:before, #message-header>.subject a.extwin:before, #responses-table td.name:before, .attachmentslist li a.cancelupload:before, .attachmentslist li a.delete:before, .attachmentslist li:before, .contactlist li a:before, .contactlist td.contact:before, .contactlist td.contactgroup:before, .floating-action-buttons a.button:before, .folderlist li a:before, .googie_list li .googie_add_to_dict:before, .googie_list li .googie_list_revert:before, .html-editor .editor-toolbar .mce-i-html:before, .input-group .icon:before, .keylist li:before, .listing td.action a:before, .listing.iconized li a:before, .listing.iconized li>i:before, .listing.iconized tr td:before, .listing.iconized.selectable li a:before, .menu a:before, .message-htmlpart blockquote span.blockquote-link:after, .message-part blockquote span.blockquote-link:after, .messagelist span.attachment span, .messagelist span.flagged:before, .messagelist td.subject span.msgicon.status.replied.forwarded:after, .messagelist td.subject span.msgicon.status:before, .messagelist tr.flaggedroot:not(:hover) span.unflagged:before, .messagelist tr.thread td.threads div:before, .messagelist tr:hover span.unflagged:before, .multi-input a.icon.reset:before, .pgpkeyimport div.key label.keyid+a:before, .pgpkeyimport li.uid:before, .popover .menu li a[aria-haspopup]:after, .propform td.rowbuttons a:before, .quota-widget:before, .searchbar a:before, .searchbar form:before, .table-widget table.options-table td:not(:first-child) span:before, .tagedit-list li.tagedit-listelement-old a:before, .ui-datepicker .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-prev:before, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options:before, .ui-dialog .ui-dialog-titlebar-close:before, .ui.alert>i.icon:before, a.button.icon:before, body.status-flagged #message-header>.subject:before, button.btn:before, div.tox .tox-dialog__footer .tox-button:before, div.tox .tox-dialog__header .tox-button:before, fieldset.advanced>legend:after, p.image-attachment .attachment-links a:before, table.table th.checkbox-cell:before, ul.treelist li div.treetoggle:before { font-size: 1.25em; display: block; float: left; margin: 0 .25rem 0 0; width: 1.18em; height: 1em; font-family: Icons; font-style: normal; font-weight: 900; text-decoration: inherit; text-align: center; speak: none; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased } @font-face { font-family: Icons; font-style: normal; font-weight: 900; src: url("../fonts/fa-solid-900.woff2") format('woff2'), url("../fonts/fa-solid-900.woff") format('woff') } @font-face { font-family: Icons; font-style: normal; font-weight: 400; src: url("../fonts/fa-regular-400.woff2") format('woff2'), url("../fonts/fa-regular-400.woff") format('woff') } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v29-regular.woff2') format('woff2'), url('../fonts/roboto-v29-regular.woff') format('woff') } @font-face { font-family: Roboto; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/roboto-v29-italic.woff2') format('woff2'), url('../fonts/roboto-v29-italic.woff') format('woff') } @font-face { font-family: Roboto; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-v29-regular-700.woff2') format('woff2'), url('../fonts/roboto-v29-regular-700.woff') format('woff') } @font-face { font-family: Roboto; font-style: italic; font-weight: 700; src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('../fonts/roboto-v29-italic-700.woff2') format('woff2'), url('../fonts/roboto-v29-italic-700.woff') format('woff') } .popover, body, button, input, optgroup, select, textarea { font-family: Roboto, sans-serif } button, input, select, textarea { line-height: initial } input { vertical-align: middle } a { color: #00acff } a:hover { color: #008acc } a.disabled { pointer-events: none } a.disabled:not(.btn) { opacity: .5 } html:not(.touch) ::-webkit-scrollbar { width: 6px } html { scrollbar-color: #c1c1c1 #f1f1f1 } html:not(.touch) ::-webkit-scrollbar-track { background-color: #f1f1f1 } html:not(.touch) ::-webkit-scrollbar-thumb { background-color: #c1c1c1 } html { height: 100%; font-size: 14px } body { min-width: 240px; height: 100%; color: #2c363a; overflow: hidden } html.iframe body { overflow: auto } #layout { overflow: hidden; display: flex; height: 100%; width: 100% } #layout>div>.scroller { flex: 1; position: relative } #layout>div>.footer, #layout>div>.header { font-size: 1rem; font-weight: 700; line-height: 58px; height: 58px; min-height: 58px; padding: 0 .25em; margin: 0; position: relative; overflow: hidden; white-space: nowrap; display: flex; justify-content: center } #layout>div>.header { border-bottom: 1px solid #d4dbde; color: #2c363a; background-color: #f4f4f4 } #layout>div>.header .header-title { overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; margin: 0 -20rem } #layout>div>.header a.button { color: #2c363a } #layout>div>.header a.toolbar-list-button, #layout>div>.header a.toolbar-menu-button { order: 99 } #layout>div>.footer { border-top: 1px solid #d4dbde; background-color: #fff } #layout>div>.footer.small { height: 35px; min-height: 35px; line-height: 35px } #layout>div>.footer:empty { display: none } #layout-sidebar { position: relative; display: flex; flex-direction: column; flex: 2; max-width: 30%; min-width: 220px; border-right: 1px solid #d4dbde; background-color: #fff } #layout-sidebar.sidebar-right { order: 2; border-right: 0; border-left: 1px solid #d4dbde; flex: 3 } #layout-list { position: relative; display: flex; flex-direction: column; flex: 3; max-width: 30%; min-width: 300px; border-right: 1px solid #d4dbde; background-color: #fff } #layout-content { display: flex; flex: 6; flex-direction: column; background-color: #fff; width: 100% } html.iframe #layout-content { height: 100% } #layout-content>.content, #layout-content>.formcontent { height: 100%; width: 100%; overflow: auto; flex: 1 } #layout-content .iframe-wrapper { width: 100%; flex: 1 } #layout-content .iframe-wrapper iframe { width: 100%; height: 100%; border: 0 } #layout-content.only>.scroller { overflow: auto } #layout-menu.popover { left: 0 !important } #layout-menu .popover-header { height: 58px; line-height: 58px; border: 0; border-radius: 0; text-align: center } #layout-menu .popover-header img { max-height: 58px; max-width: 78px; padding: .25rem } @media screen and (min-width:481px) and (max-width:1024px) { #layout-menu .popover-header img { max-width: 35.1px } } @media screen and (min-width:481px) { #layout-menu .popover-header { padding: 0 !important; background-color: #F4F4F4 !important } #layout-menu .popover-header a { display: none !important } } html.layout-phone #layout-menu .popover-header { display: flex !important; align-items: center; justify-content: center; padding: 0 .5rem } html.layout-phone #layout-menu .popover-header img { max-width: 222px } html.layout-phone #layout-menu .popover-header a { width: auto; flex: 1 } html.layout-phone #layout-menu .popover-header a:before { height: 58px; float: right } html.layout-phone #layout-menu .popover-header a .inner { display: none } .column-resizer { cursor: col-resize; z-index: 1; position: absolute; top: 0; right: -3px; width: 6px; height: 100% } .column-resizer.inverted { right: auto; left: -3px } .column-resizer.active { width: 10000px; right: -5000px } .column-resizer.active.inverted { right: auto; left: -5000px } @media screen and (max-width:1200px) { #layout-list, #layout-sidebar { min-width: 260px; flex: 3 } #layout-list>.header>a.button { padding: 0 .25rem; margin: 0 .25rem } } @media screen and (max-width:1024px) { .column-resizer { display: none } #layout-list, #layout-sidebar { width: auto !important; flex: 3 !important } } @media screen and (max-width:768px) { #layout-list, #layout-sidebar { max-width: none; border: 0 !important } #layout>div>.header { background-color: #f4f4f4 } #layout>div>.header a.button { margin: 0 .3rem !important; padding: 0 !important } #layout>div>.header a.button:before { font-size: 1.75rem; height: 58px; margin: 0 } #layout>div>.header a.button.filter:before { font-size: 1.6rem } #layout>div>.header a.button .inner { display: none } #layout>div>.footer { background-color: #f4f4f4 } a.toolbar-list-button { display: none } } @media screen and (max-width:320px) { #layout-list, #layout-sidebar { min-width: 240px } } @media screen and (min-width:481px) { a.task-menu-button { display: none } #layout-menu { background-color: #2f3a3f; width: 42px } } @media screen and (min-width:769px) { #layout-content>.header>.header-title, #layout>div>.header>.buttons, .floating-action-buttons, a.toolbar-menu-button { display: none } } @media screen and (min-width:1025px) { #layout-menu { width: 78px } } @media screen and (min-width:1201px) { #layout-list>.header>.header-title:not(.all-sizes), a.back-list-button, a.back-sidebar-button, a.toolbar-list-button { display: none } } html.layout-phone .hidden-phone { display: none !important } html.layout-phone .hidden-small, html.layout-small .hidden-small { display: none !important } html.layout-small .hidden-lbs { display: none !important } html.layout-large .hidden-big, html.layout-large .hidden-lbs, html.layout-normal .hidden-big, html.layout-normal .hidden-lbs { display: none !important } html.layout-large .hidden-large { display: none !important } .hidden, .rcmaddcontact, .voice { display: none !important } font.bold { font-weight: 700 } #rcmdraglayer { min-width: 260px; width: 260px; background-color: #2f3a3f; color: #fff; box-shadow: 3px 3px 5px #f1f3f4; border-radius: .3rem; z-index: 250; opacity: .92; padding: .5rem; white-space: nowrap } #rcmdraglayer div { line-height: 1.6em; overflow: hidden; text-overflow: ellipsis } .frame-content { padding: 1rem } .frame-content h2 { font-weight: 700; font-size: 1.5em } .frame-content h3 { font-weight: 700; font-size: 1.25em } .listbox .scroller { width: 100%; overflow-x: hidden; overflow-y: auto } .listbox .navlist { height: 0; flex: initial !important } .listbox .navlist .listing li:last-child, .listbox .navlist .listing tr:last-child td { border-bottom: 0 } .popup .listbox { height: 100%; display: flex; flex-direction: column } .popup .listbox .scroller { flex: 1 } .popup .listbox .footer { border-top: 1px solid #d4dbde; background-color: #fbfbfb } .contact-header { display: flex; margin-bottom: 1rem } .contact-header .contact-photo { min-width: 112px } .contact-header .contact-head { margin-left: 1rem; margin-top: 0 !important } .contact-header .contact-head legend { display: none } p.image-attachment { position: relative; border: 1px solid #ddd; border-radius: .3rem; background-color: rgba(55, 190, 255, .05); float: left; margin: .5rem; min-width: 47%; min-height: 250px; overflow: hidden; display: flex; justify-content: center } @media screen and (max-width:480px) { p.image-attachment { float: none; margin: .5rem 0 .5rem 0 } } p.image-attachment .image-link { align-self: center; text-align: center; margin: 1.6rem .5rem } p.image-attachment span { color: #737677; padding: 0 .5rem; font-size: 90%; white-space: nowrap; position: absolute; line-height: 1.5rem } p.image-attachment .image-filename { overflow: hidden; text-overflow: ellipsis; left: 0; top: 0; right: 0; padding-right: 4rem } p.image-attachment .image-filesize { right: 0; top: 0 } p.image-attachment .attachment-links { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center } p.image-attachment .attachment-links a { text-decoration: none; display: inline-block; padding: 0 .5rem; line-height: 1.5rem } p.image-attachment .attachment-links a:before { display: inline-block } p.image-attachment .attachment-links a.open:before { content: "\f360" } p.image-attachment .attachment-links a.download:before { content: "\f019" } fieldset.image-attachment { margin-top: .5rem } fieldset.image-attachment legend { color: #737677; font-size: .9rem; border-top: 1px solid #f5f5f5; margin: 0 } fieldset.image-attachment img { max-width: 100% } #folder-selector { overflow-y: auto } .noselect { user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-user-select: none } .iframe-loader { width: 100%; position: absolute; top: 0; bottom: 0; background-color: rgba(255, 255, 255, .95); display: flex; align-items: center; justify-content: center; z-index: 3 } .iframe-loader .spinner-border { width: 7rem; height: 7rem; color: #f1f3f4; border: 1rem solid; border-color: currentColor #737677 currentColor currentColor } .footer.toolbar+.iframe-loader { top: 58px; bottom: 58px } .ios-scroll { padding: 0; -webkit-overflow-scrolling: touch !important; overflow: scroll !important } .ios-scroll.iframe-wrapper { margin-top: 1px } .webkit-scroller::-webkit-scrollbar { -webkit-appearance: none } .webkit-scroller::-webkit-scrollbar:vertical { width: .5rem } .webkit-scroller::-webkit-scrollbar:horizontal { height: .5rem } .webkit-scroller::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .3); border-radius: .25rem; border: 2px solid #fff } .quota-widget { width: 100%; max-width: 15em; padding: .5rem 1rem; display: flex; align-items: center; color: #737677 } .quota-widget:before { content: "\f0a0"; line-height: 1 } .quota-widget .count { font-size: 80%; order: 2 } .quota-widget .bar { flex: 1; height: .5rem; margin: 0 1rem; background-color: #fff; border: 1px solid #d4dbde; border-radius: .25rem; overflow: hidden } .quota-widget .value { display: block; background-color: #37beff; height: 1rem; opacity: .75 } .quota-widget .value.warning { background-color: #ff5552 } .image-tools { position: absolute; top: 5rem; left: 0; height: 58px; overflow: hidden; transform: translateX(-87%); transition: transform .3s ease-in-out; background-color: rgba(55, 190, 255, .4); border-radius: 0 .3rem .3rem 0 } .image-tools .menu { float: left } .image-tools a.button.icon.tools { padding: 0 .25rem; display: inline-block; height: 58px } .image-tools a.button.icon.tools span.inner { display: none } .image-tools a.button.icon.tools:before { line-height: 58px; margin: 0 } .image-tools.open { transform: translateX(0) } .image-tools.open a.button.icon.tools:before { content: "\f053" } .image-tools a { color: #fff !important } .image-tools a:focus, .image-tools a:hover { background-color: rgba(55, 190, 255, .5) !important; outline: 0 } .quota-info { width: 100%; display: table !important } .quota-info td, .quota-info th { text-align: center; white-space: nowrap } .quota-info th { border-top: 0 } .quota-info .root { line-height: 1; font-style: italic; color: #737677; background-color: #f1f3f4 } .quota-info .name, .quota-info th:first-child { text-align: left } .nav-tabs { flex-wrap: nowrap } .nav-tabs .nav-item { white-space: nowrap; overflow: hidden } .nav-tabs .nav-link { overflow: hidden; text-overflow: ellipsis } .props-table td.title { width: 7em } .table-widget { display: flex; flex-direction: column; margin-bottom: .5rem; border: 1px solid #d4dbde } .table-widget>.content { overflow-x: auto; flex-grow: 1; height: 18.5em } .table-widget>.content table th { border-top: 0 } .table-widget>.footer { height: 3.5rem; border-top: 1px solid #d4dbde; text-align: left } .table-widget>.footer a { padding: .2rem .45rem !important; height: calc(3.5rem - 1px) !important } .table-widget table { margin: 0; max-height: 18.5em } .table-widget table.options-table td, .table-widget table.options-table th { text-align: center; vertical-align: middle } .table-widget table.options-table td:first-child, .table-widget table.options-table th:first-child { overflow: hidden; text-overflow: ellipsis; text-align: left } .table-widget table.options-table tr:last-child td { border-bottom: 1px solid #d4dbde } .table-widget table.options-table tr.selected td { background-color: #ebf9ff; color: #2c363a; outline: 0 } .table-widget table.options-table td:not(:first-child) span { display: inline-block; line-height: 1.25 } .table-widget table.options-table td.enabled span:before { content: "\f00c" } .table-widget table.options-table td.partial span:before { opacity: .3; content: "\f00c" } table.compact-table { margin: 0; width: 100% } table.compact-table :not(.invalid-feedback) { font-size: inherit } table.compact-table td { padding: .25rem; border: 0 } table.compact-table td:first-child { padding-left: 0 } table.compact-table td:last-child { padding-right: 0 } table.table .checkbox-cell { width: 3rem; white-space: nowrap; overflow: hidden; text-align: center; padding: .5rem } html.touch table.table .checkbox-cell { padding: .5rem .3rem } table.table th.checkbox-cell { padding: .75rem 0; max-width: 1rem } table.table th.checkbox-cell:before { cursor: pointer; margin: 0 1rem; line-height: 1 } table.table th.checkbox-cell.subscription:before { content: "\f143" } table.table th.checkbox-cell.alarm:before { content: "\f0f3"; font-weight: 400 } table.table th.checkbox-cell.read:before { content: "\f06e" } table.table th.checkbox-cell.write:before { content: "\f303" } table.table .buttons-cell { width: 1%; white-space: nowrap; text-align: center } table.table .buttons-cell a.button:before { line-height: 1; float: none; display: inline-block } @media screen and (min-width:480px) { table.table .buttons-cell a.button .inner { display: inline } } table.table label { margin: 0; display: inline } fieldset.tab-pane table.table thead th { border: 0 } table.table tr.deleted td { color: rgba(44, 54, 58, .5) !important } .table thead th { border-width: 1px; white-space: nowrap } .button.disabled { opacity: .5 } a.button { text-decoration: none !important } a.button.icon.sidebar-menu:before, a.button.icon.toolbar-list-button:before, a.button.icon.toolbar-menu-button:before, button.btn.sidebar-menu:before, button.btn.toolbar-list-button:before, button.btn.toolbar-menu-button:before { content: "\f142"; width: 1em } a.button.icon.task-menu-button:before, button.btn.task-menu-button:before { content: "\f0c9" } a.button.icon.back-content-button:before, a.button.icon.back-list-button:before, a.button.icon.back-sidebar-button:before, button.btn.back-content-button:before, button.btn.back-list-button:before, button.btn.back-sidebar-button:before { content: "\f053" } a.button.icon.refresh:before, button.btn.refresh:before { content: "\f021" } a.button.icon.continue:before, a.button.icon.generate:before, a.button.icon.save:before, a.button.icon.submit:before, a.button.icon.yes:before, button.btn.continue:before, button.btn.generate:before, button.btn.save:before, button.btn.submit:before, button.btn.yes:before { content: "\f00c" } a.button.icon.create:before, button.btn.create:before { content: "\f0fe" } a.button.icon.edit:before, button.btn.edit:before { content: "\f303" } a.button.icon.qrcode:before, button.btn.qrcode:before { content: "\f029" } a.button.icon.search:before, button.btn.search:before { content: "\f002" } a.button.icon.filter:before, button.btn.filter:before { content: "\f0b0"; font-size: 1.2em } a.button.icon.import:before, button.btn.import:before { content: "\f093" } a.button.icon.export:before, button.btn.export:before { content: "\f019" } a.button.icon.delete:before, a.button.icon.discard:before, button.btn.delete:before, button.btn.discard:before { content: "\f2ed"; font-weight: 400 } a.button.icon.next:before, button.btn.next:before { content: "\f061" } a.button.icon.restore:before, button.btn.restore:before { content: "\f0e2" } a.button.icon.bounce:before, a.button.icon.send:before, button.btn.bounce:before, button.btn.send:before { content: "\f1d8" } a.button.icon.attach:before, button.btn.attach:before { content: "\f0c6" } a.button.icon.attach.vcard:before, button.btn.attach.vcard:before { content: "\f007" } a.button.icon.cancel:before, a.button.icon.close:before, a.button.icon.no:before, button.btn.cancel:before, button.btn.close:before, button.btn.no:before { content: "\f00d" } a.button.icon.back:before, button.btn.back:before { content: "\f053" } a.button.icon.remove:before, button.btn.remove:before { content: "\f00d" } a.button.icon.unlock:before, button.btn.unlock:before { content: "\f09c" } a.button.icon.help:before, button.btn.help:before { content: "\f1cd"; font-weight: 400 } a.button.icon.folders:before, button.btn.folders:before { content: "\f07c" } a.button.icon.options:before, button.btn.options:before { content: "\f1de" } a.button.icon.settings:before, a.button.icon.tools:before, button.btn.settings:before, button.btn.tools:before { content: "\f013" } a.button.icon.properties:before, button.btn.properties:before { content: "\f05a" } a.button.icon.selection:before, button.btn.selection:before { content: "\f14a"; font-weight: 400 } a.button.icon.insert.recipient:before, button.btn.insert.recipient:before { content: "\f234" } a.button.icon.encrypt:before, button.btn.encrypt:before { content: "\f023" } a.button.icon.sign:before, button.btn.sign:before { content: "\f5b7" } a.button.icon.sso:before, button.btn.sso:before { content: "\f2f6" } a.button.icon.extwin:before, button.btn.extwin:before { content: "\f360" } a.btn:before, button.btn:before { display: inline !important; float: none !important; vertical-align: middle; margin-right: .4rem !important } a.btn.oauth.google:before, a.btn.oauth.outlook:before, button.btn.oauth.google:before, button.btn.oauth.outlook:before { content: " "; display: inline-block !important; height: 1.5rem; width: 1.5rem; margin-right: .8rem !important; background-size: 100% auto } a.btn.oauth.google:before, button.btn.oauth.google:before { background: url('../images/google-icon.svg') top left no-repeat } a.btn.oauth.outlook:before, button.btn.oauth.outlook:before { background: url('../images/microsoft-icon.svg') top left no-repeat } a.button.icon.dropdown:before { content: "\f0d7"; font-size: 1em } a.button.icon>span.inner { display: none } html.touch .btn:focus { box-shadow: none !important } .floating-action-buttons { position: absolute; right: 0; bottom: 0 } .footer:not(:empty)+.floating-action-buttons { bottom: 35px } .floating-action-buttons a.button { display: block; float: left; width: 4rem; height: 4rem; border-radius: 50%; background: #37beff; color: #fff; opacity: .95; box-shadow: 0 0 5px 5px #eaf8ff; margin: 0 1rem 1rem 0 } .floating-action-buttons a.button:before { content: "\f067"; width: 4rem; height: 4rem; line-height: 4rem } .floating-action-buttons a.button.compose:before { content: "\f304" } .floating-action-buttons a.button .inner { display: none } .btn:focus { box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .3) } .btn-link { color: #00acff } .btn-secondary { color: #fff; background: #8b9fa7; border-color: #8b9fa7 } .btn-secondary:focus { background: #7c939c; border-color: #778e98; box-shadow: 0 0 0 .2rem rgba(139, 159, 167, .5) } .btn-secondary:hover { background: #7c939c; border-color: #778e98 } .btn-secondary.disabled, .btn-secondary:disabled { background: #8b9fa7; border-color: #8b9fa7 } .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active { background: #6e8791; border-color: #6a828b } .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(139, 159, 167, .53) } .btn-primary { color: #fff; background: #37beff; border-color: #37beff } .btn-primary:focus { background: #1eb6ff; border-color: #13b2ff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .5) } .btn-primary:hover { background: #1eb6ff; border-color: #13b2ff } .btn-primary.disabled, .btn-primary:disabled { background: #37beff; border-color: #37beff } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active { background: #04adff; border-color: #00a8f9 } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .53) } .btn-danger { color: #fff; background: #ff5552; border-color: #ff5552 } .btn-danger:focus { background: #ff3c38; border-color: #ff322e; box-shadow: 0 0 0 .2rem rgba(255, 85, 82, .5) } .btn-danger:hover { background: #ff3c38; border-color: #ff322e } .btn-danger.disabled, .btn-danger:disabled { background: #ff5552; border-color: #ff5552 } .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active { background: #ff231f; border-color: #ff1915 } .btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(255, 85, 82, .53) } .ui-widget-overlay { background-color: rgba(44, 54, 58, .5); opacity: 1 !important } .ui-widget-overlay.datepicker { z-index: 119 } .ui-widget { border: 1px solid #d4dbde; box-shadow: 3px 3px 5px #f1f3f4; border-radius: .3rem } .ui-menu { overflow-y: auto; overflow-x: hidden; max-height: 400px; border-radius: .3rem; z-index: 240; position: absolute } .ui-menu .ui-state-active { border: 0 !important; background-color: #37beff !important } .ui-menu .ui-menu-item { white-space: nowrap; cursor: default } .ui-menu .ui-menu-item-wrapper { margin: 0 !important } .ui-dialog { border-radius: 0; box-shadow: none } .ui-dialog.no-titlebar .ui-dialog-titlebar { display: none } .ui-dialog .ui-dialog-titlebar { height: 58px; border-bottom: 1px solid #ddd } .ui-dialog .ui-dialog-titlebar button:before { margin: 0 } .ui-dialog .ui-dialog-title { line-height: 58px; font-size: 1.25rem; padding: 0 3rem 0 1rem; color: #2c363a } .ui-dialog .ui-dialog-titlebar-close { border: 0; color: #2c363a; background: 0 0; right: 0; top: 0; position: absolute; padding: .25rem .5rem; margin: 15px .5rem } .ui-dialog .ui-dialog-titlebar-close:before { content: "\f00d"; line-height: 1.5rem; margin: 0 !important } .ui-dialog .ui-dialog-content>.popupmenu { display: block !important } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; justify-content: flex-end } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { overflow: hidden; text-overflow: ellipsis; min-width: 5rem; margin: 9px 4px } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:last-child, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:last-child { margin-right: 0 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link { padding-right: 0; padding-left: 0; text-decoration: none; color: #2c363a } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus { background-color: rgba(55, 190, 255, .5) } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options { order: -1; padding: .375rem .25rem; margin-right: .3rem } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options:before { content: "\f013"; width: 100%; height: 1.25em } .ui-dialog .ui-dialog-content.iframe, .ui-dialog iframe { padding: 0; width: 100% !important; height: 100%; border: 0; overflow: hidden } .ui-dialog, .ui-dialog-content { box-sizing: initial } .ui-widget-content .ui-icon.ui-resizable-se { background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23888%22%20d%3D%22M6.7%2016L16%206.7V5.3L5.3%2016zM9.7%2016L16%209.7V8.3L8.3%2016zM12.7%2016l3.3-3.3v-1.4L11.3%2016zM15.7%2016l.3-.3v-1.4L14.3%2016z%22%2F%3E%0A%3C%2Fsvg%3E%0A") } @media screen and (max-width:480px) { .ui-dialog { width: 100% !important; height: 100% !important; display: flex; flex-direction: column; border: 0; top: 0 !important } .ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-resizable-handle { display: none !important } .ui-dialog .ui-dialog-titlebar { height: 58px; text-align: center; background-color: #f4f4f4 } .ui-dialog .ui-dialog-title { line-height: 58px; font-size: 1rem; padding: 0 1rem } .ui-dialog .ui-dialog-content { flex: 1 } .ui-dialog .ui-dialog-content:not(.iframe) { padding: 1rem } .ui-dialog .ui-dialog-buttonpane { padding: 0 !important; text-align: center !important; border-top: 1px solid #ddd; height: 58px !important; background-color: #f4f4f4 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { justify-content: space-around } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { margin: 0 !important; padding: .45rem; border: 0 !important; height: 58px; box-shadow: none; font-size: 90%; line-height: 1.5 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:before { display: block !important; float: none; width: auto; height: 1.75rem; line-height: 1.75; margin: 0 !important } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:active { box-shadow: none } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary { color: #2c363a; background: 0 0 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger { color: #ff5552; background: 0 0 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.disabled, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:disabled { opacity: .5 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel { order: 100 } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link { color: #2c363a; margin: 0; padding: .45rem; font-size: 90% } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options:before { display: block !important; height: 1.75rem; line-height: 1.75; margin: 0 } } .ui-slider { box-shadow: none } .ui-slider .ui-slider-range { border-radius: .3rem; background: #d0f0ff } .ui-slider .ui-slider-handle { border-radius: .3rem } .ui-slider .ui-slider-handle.ui-state-active { background: #37beff; border-color: #005984 } .ui-datepicker { margin: calc(50vh - 10em) calc(50vw - 10em) !important; top: 0 !important; left: 0 !important; box-shadow: none; user-select: none } .ui-datepicker:not(.ui-datepicker-inline) { z-index: 120 !important } .ui-datepicker .ui-datepicker-header, .ui-datepicker .ui-datepicker-title { line-height: 4rem; height: 4rem; padding: 0 } .ui-datepicker .ui-datepicker-header { border-bottom: 1px solid #ddd } .ui-datepicker .ui-datepicker-header a { height: 4rem } .ui-datepicker .ui-datepicker-header select { display: inline-block } .ui-datepicker .ui-icon { background-image: none !important; background-position: none !important } .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev { cursor: pointer; width: auto; color: #2c363a; text-decoration: none } .ui-datepicker .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-prev:before { content: "\f053"; margin: 0 .25em; height: auto; width: 1em } .ui-datepicker .ui-datepicker-prev:before { content: "\f053" } .ui-datepicker .ui-datepicker-next:before { content: "\f054" } .ui-datepicker td a { padding: 0; line-height: 1.8em; border-radius: .3rem } .ui-datepicker .ui-state-default, .ui-datepicker.ui-widget-content .ui-state-default { border: 0; background: 0 0; color: #2c363a } .ui-datepicker .ui-datepicker-days-cell-over a, .ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default, .ui-datepicker .ui-state-highlight, .ui-datepicker.ui-widget-content .ui-state-highlight { background: #d0f0ff; color: #37beff } .ui-datepicker a.ui-state-active { background: #37beff !important; color: #fff !important; font-weight: 700 } .ui-datepicker html.touch td a { font-size: 1.2em; line-height: 2.2em } .input-group>.form-control.hasDatepicker { position: initial } .minicolors-panel { border: 1px solid #d4dbde; box-shadow: 3px 3px 5px #f1f3f4; border-radius: .3rem; height: 152px; padding: 1px } .input-group .minicolors-input { width: 100%; min-width: 130px; border-left: 0; border-right: 0 } @media screen and (max-width:320px) { .ui-widget-content { border-radius: 0 } .ui-menu { border-radius: .3rem; left: 15px !important; right: 15px; width: auto } .ui-dialog .ui-dialog-content:not(.iframe) { padding: .65rem } } .popupmenu { display: none; padding: 0; min-width: 180px; height: 100% } .popupmenu li>a { width: 100% } .popupmenu.propform { overflow: hidden; padding: .25rem } .popupmenu.simplelist { min-width: 80px } .popup.justified { display: flex; justify-content: space-around } .popover-body { padding: 0; overflow-x: hidden } .popover-body>.popupmenu { display: block !important } .popover { box-shadow: 3px 3px 5px #f1f3f4; border-color: #d4dbde; padding: 0; z-index: 1300 } .popover .popover-header { display: none } @media screen and (min-width:769px) { .popover .listing li:first-child { border-radius: .25rem .25rem 0 0 } .popover .listing li:last-child { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem } .popover .listing ul.rounded-0>li { border-radius: 0 } } html.layout-phone .popover:not(.select-menu), html.layout-small .popover:not(.select-menu) { margin: 0 !important; padding: 0; right: 0; left: initial !important; bottom: 0; top: 0; width: 272px; transform: none !important; border-radius: 0; border: 0; display: flex; flex-direction: column; box-shadow: none } html.layout-phone .popover:not(.select-menu) div.arrow, html.layout-small .popover:not(.select-menu) div.arrow { display: none } html.layout-phone .popover:not(.select-menu) .listing li:last-child, html.layout-small .popover:not(.select-menu) .listing li:last-child { border-bottom: 1px solid #f1f3f4 } html.layout-phone .popover-overlay, html.layout-small .popover-overlay { z-index: 1299; background-color: rgba(44, 54, 58, .5); position: absolute; top: 0; bottom: 0; width: 100% } html.layout-phone .popover-header, html.layout-small .popover-header { display: block; border-radius: 0; border: 0; padding: 0 .5em; height: 58px; min-height: 58px; line-height: 58px; font-size: 16px; color: #fff; background-color: #005984 } html.layout-phone .popover-header:before, html.layout-small .popover-header:before { display: none } html.layout-phone .popover-header a, html.layout-small .popover-header a { display: inline-block; width: 100%; color: #fff } html.layout-phone .popover-body>*, html.layout-small .popover-body>* { max-height: 100% !important } html.touch .popover .listing li a { line-height: 47px; font-size: 16px; padding: 0 .5em } html.touch .popover .listing li a:before { float: left } .select-menu { max-width: initial; margin: 0; height: auto; z-index: 1301 } .select-menu .popover-header { border-radius: .25rem .25rem 0 0 !important } .select-menu .listing li a { padding-left: .25rem; outline: 0 } .select-menu .listing li:last-child { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem } .select-menu.inline .listing li { padding-right: .5rem } .select-menu.inline .listing li:first-child { border-top-left-radius: .25rem; border-top-right-radius: .25rem } .pgpkeyimport div.key { position: relative; padding: .5rem 0 } .pgpkeyimport div.key.disabled, .pgpkeyimport div.key.revoked { color: #737677 } .pgpkeyimport div.key label { display: inline-block; margin-right: .5em; margin-bottom: 0 } .pgpkeyimport div.key label:after { content: ":" } .pgpkeyimport div.key label.keyid { display: none } .pgpkeyimport div.key label+a, .pgpkeyimport div.key label+span { line-height: 2.6rem; margin-right: 1em; white-space: nowrap; text-decoration: none } .pgpkeyimport div.key label.keyid+a { font-weight: 700 } .pgpkeyimport div.key label.keyid+a:before { content: "\f084" } .pgpkeyimport ul.uids { margin: 0; padding: 0 } .pgpkeyimport li.uid { border: 0; padding: .25rem 0 0 1.5em; line-height: 1.5rem !important; list-style-type: none } .pgpkeyimport li.uid:before { content: "\f007"; opacity: .25; font-size: 1em; line-height: 1.25 } .pgpkeyimport button.importkey { position: absolute; top: .5rem; right: 0 } .pgpkeyimport button:disabled { display: none } .menu { margin: 0; text-align: center; white-space: nowrap } .menu a { overflow: hidden; text-overflow: ellipsis; text-decoration: none } .menu a:before { content: "\00a0" } .menu a:focus, .menu a:hover { outline: 0 } .menu a:not(.disabled):focus, .menu a:not(.disabled):hover { background-color: #ececec } .menu.toolbar li { display: inline-block; height: 58px } .menu.toolbar a { color: #2c363a; display: block; float: left; border: 0 !important; height: 58px; min-width: 3.2rem; max-width: 6rem; width: auto; padding: .45rem; line-height: 1.5; cursor: pointer; font-size: 1rem; text-align: center } .menu.toolbar a:before { height: 1.75rem !important; float: none !important; width: auto !important; margin: 0 !important } .menu.toolbar a.selected { color: #41b849 } .menu.toolbar>.spacer { width: 1em } .menu.toolbar .dropbutton:not(.disabled):hover { background-color: #ececec } .menu.toolbar .dropbutton a.dropdown { padding: 0 .3rem } .menu.toolbar .dropbutton a.dropdown:before { line-height: 58px } .menu.toolbar .dropbutton a.dropdown:hover { background-color: #e0e0e0 } .menu span.inner { font-size: 90%; font-weight: 400 } .menu .dropbutton { display: inline-block } .menu .dropbutton a.dropdown { font-size: 75%; min-width: 0 } html.ie11 .menu .dropbutton a.dropdown:before { font-size: 80% } .menu .dropbutton a.dropdown span.inner { display: none } .menu .dropbutton a:first-child { padding-right: 0 } .menu.pagenav { display: flex; justify-content: space-between; align-items: center; padding: 0 !important; font-size: 100% } .menu.pagenav a { flex-grow: 1; display: inline-block; min-width: 2rem !important; height: 35px; color: #2c363a } .menu.pagenav a:before { margin: 0; display: inline; float: none; line-height: 35px } .menu.pagenav .pagenav-text { overflow: hidden; text-overflow: ellipsis; color: #737677; flex-grow: 4; font-size: 80% } .menu.pagenav input { width: 3rem; max-width: 5rem; font-size: 90%; text-align: center; max-height: 1.6rem; margin: 0 .2rem } html.layout-phone .menu.pagenav input { display: none } .menu.pagenav span.inner { display: none } .menu.pagenav.pagenav-list { cursor: pointer; background-color: #fbfbfb; border-bottom: 1px solid #f1f3f4 } .menu.pagenav.pagenav-list a { flex-grow: unset } .menu.pagenav.pagenav-list .pagenav-text { text-align: left; font-size: 100% } .menu.pagenav.pagenav-list+.navlist { background-color: #fbfbfb } .menu.pagenav.pagenav-list.expanded+.navlist { border-bottom: 1px solid #d4dbde } .menu.content-frame-navigation.hide-nav-buttons a.next, .menu.content-frame-navigation.hide-nav-buttons a.prev { display: none } .menu .listselectors { max-width: 100%; display: flex; justify-content: space-around } .menu .buttons { display: block } .menu .buttons button { display: block; float: left; cursor: pointer; color: #2c363a; background-color: transparent; border: 0; padding: 0; height: 58px; line-height: 58px; width: 2.5em } .menu .buttons button:before { font-size: 1.75rem } .popover .menu li { display: block; height: auto; text-align: left } .popover .menu li.spacer { display: none } .popover .menu li:last-child { border: 0 } .popover .menu li.separator { line-height: 1.5rem !important; font-size: .75rem !important; padding: 0 .5rem; color: #737677; background-color: #f1f3f4 } .popover .menu li.separator label { margin: 0 } .popover .menu li a { height: unset; max-width: 100%; width: 100%; line-height: 35px; display: block; padding: 0 .5rem; text-align: left } .popover .menu li a:before { line-height: inherit; height: inherit !important; margin-right: .5rem !important; float: left !important; width: 1.18em !important; min-width: 1.18em } .popover .menu li a:not(.disabled):hover { color: #fff; background-color: #37beff } .popover .menu li a[aria-haspopup] { display: flex } .popover .menu li a[aria-haspopup]:after { color: #737677; font-size: .9em; margin: 0 0 0 .2em; min-width: 1.18em; content: "\f054" } html.layout-small .popover .menu li a[aria-haspopup]:after { margin: 0 .2em } .popover .menu li a[aria-haspopup].dropdown:after { color: #2c363a; margin: 0 .6em !important } .popover .menu li a[aria-haspopup]:hover:after { color: #fff } .popover .menu li a[aria-haspopup]>span { overflow: hidden; text-overflow: ellipsis; flex: 1 } .popover .menu li span.inner { font-size: 100% } .popover .menu .dropbutton { display: flex } .popover .menu .dropbutton a:first-child { overflow: hidden; text-overflow: ellipsis; flex: 1 } .popover .menu .dropbutton:not(.disabled):hover { background-color: #f6f6f6 } .popover .menu .dropbutton a.dropdown { width: 3.5rem; padding: 0 .5em; background-color: #f6f6f6 } .popover .menu .dropbutton a.dropdown:hover { background-color: #37beff } .popover .menu .dropbutton a.dropdown span.inner, .popover .menu .dropbutton a.dropdown:before { display: none } .popover .menu.no-icon a:before { display: none } @media screen and (min-width:769px) { .content-frame-navigation { display: none !important } .header a.button.icon:not(.disabled):focus, .header a.button.icon:not(.disabled):hover { background-color: #ececec; outline: 0 } .header a.button.icon:before { margin: 0 } } @media screen and (max-width:768px) { .menu.footer { justify-content: space-around !important } .menu.footer>* { flex-grow: 1 } .menu.footer .buttons { display: flex; justify-content: space-evenly } .menu.footer .listselectors>* { flex-grow: 1 } .menu.listing a { color: #2c363a } } a.toolbar-button { cursor: pointer } @media screen and (min-width:1201px) { a.toolbar-button { line-height: 1.5; padding: .45rem } a.toolbar-button:before { float: none !important; height: 1.75rem !important; line-height: 1.5; width: auto !important } a.toolbar-button span.inner { display: inline !important; font-weight: 400; font-size: 90% } } .menu a.mail:before { content: "\f0e0" } .menu a.contacts:before { content: "\f0c0" } .menu a.options:before { content: "\f1de" } .menu a.settings:before { content: "\f013" } .menu a.theme.light:before { content: "\f185" } .menu a.theme.dark:before { content: "\f186" } .menu a.help:before { content: "\f1cd" } .menu a.logout:before { content: "\f011" } .menu a.about:before { content: "\f128" } .menu a.refresh:before { content: "\f021" } .menu a.compose:before { content: "\f044" } .menu a.calendar:before { content: "\f073" } .menu a.tasklist:before { content: "\f0ae" } .menu a.files:before { content: "\f07b" } .menu a.notes:before { content: "\f249" } .menu a.chat:before { content: "\f086" } .menu a.actions:before { content: "\f013" } .menu a.addressbook:before { content: "\f007" } .menu a.archive:before { content: "\f187" } .menu a.assigngroup:before { content: "\f234" } .menu a.attach:before, .menu a.vcard:before { content: "\f0c6" } .menu a.next:before { content: "\f061" } .menu a.back:before, .menu a.prev:before { content: "\f060" } .menu a.check:before { content: "\00a0" } .menu a.check.selected:before { content: "\f00c" } .menu a.closewin:before { content: "\f410" } .menu a.collapse:before { content: "\f107" } .menu a.copy:before { content: "\f0c5" } .menu a.create:before { content: "\f0fe" } .menu a.delete:before { content: "\f2ed" } .menu a.download.eml:before, .menu a.download.maildir:before, .menu a.download.mbox:before, .menu a.download:before { content: "\f019" } .menu a.dropdown:before { content: "\f0d7" } .menu a.edit:before { content: "\f303" } .menu a.encrypt:before, .menu a.enigma:before { content: "\f023" } .menu a.encrypt.sign:before { content: "\f023" } .menu a.expand:before { content: "\f105" } .menu a.expand.all:before { content: "\f103" } .menu a.expand.none:before { content: "\f102" } .menu a.export.all:before, .menu a.export.selection:before, .menu a.export:before { content: "\f019" } .menu a.expunge:before { content: "\f78c" } .menu a.extwin:before { content: "\f360" } .menu a.filterlink:before { content: "\f0b0" } .menu a.firstpage:before { content: "\f100" } .menu a.nextpage:before { content: "\f105" } .menu a.prevpage:before { content: "\f104" } .menu a.lastpage:before { content: "\f101" } .menu a.flag:before, .menu a.select.flagged:before { content: "\f024"; font-weight: 900 } .menu a.unflag:before { content: "\f024"; font-weight: 400 } .menu a.undo:before { content: "\f01e" } .menu a.folders:before { content: "\f07b" } .menu a.forward.attachment:before, .menu a.forward.bounce:before, .menu a.forward.inline:before, .menu a.forward:before { content: "\f064" } .menu a.import:before, .menu a.upload:before { content: "\f093" } .menu a.insertresponse:before { content: "\f075" } .menu a.junk:before { content: "\f7e4" } .menu a.notjunk:before { content: "\f01c" } .menu a.markmessage:before { content: "\f02b" } .menu a.more:before { content: "\f141" } .menu a.move:before { content: "\f07c" } .menu a.print:before { content: "\f02f" } .menu a.properties:before { content: "\f15b" } .menu a.purge:before { content: "\f12d" } .menu a.qrcode:before { content: "\f029" } .menu a.read:before { content: "\f2b6"; font-weight: 400 } .menu a.expand.unread:before, .menu a.select.unread:before, .menu a.unread:before { content: "\f0e0"; font-weight: 900 } .menu a.recipient:before { content: "\f0e0"; font-weight: 400 } .menu a.refresh:before { content: "\f021" } .menu a.remove:before { content: "\f12d" } .menu a.removegroup:before { content: "\f235" } .menu a.rename:before { content: "\f303" } .menu a.reply:before { content: "\f3e5" } .menu a.reply-all:before, .menu a.reply.all:before, .menu a.reply.list:before { content: "\f122" } .menu a.responses:before { content: "\f075" } .menu a.rotate:before { content: "\f2f9" } .menu a.save:before { content: "\f0c7"; font-weight: 400 } .menu a.search:before { content: "\f002" } .menu a.search.delete:before { content: "\f2ed" } .menu a.select:before { content: "\f245" } .menu a.select.all:before { content: "\f069" } .menu a.select.invert:before { content: "\f14a" } .menu a.select.none:before { content: "\f00d"; font-weight: 900 } .menu a.select.page:before { content: "\f0c9"; font-weight: 900 } .menu a.selection:before { content: "\f14a" !important; font-weight: 400 !important } .menu a.send:before { content: "\f1d8" } .menu a.showurl:before { content: "\f0c1" } .menu a.signature:before { content: "\f5b7" } .menu a.source:before { content: "\f1c9" } .menu a.spellcheck:before { content: "\f891" } .menu a.status:before { content: "\f0eb"; font-weight: 400 } .menu a.submit:before { content: "\f00c" } .menu a.info:before { content: "\f05a" } .menu a.threads:before { content: "\f086" } .menu a.zoomin:before { content: "\f00e" } .menu a.zoomout:before { content: "\f010" } .searchbar { height: 36px; min-height: 36px; line-height: 36px; background-color: #fbfbfb; border-bottom: 1px solid #f1f3f4; display: flex; align-items: center; overflow: hidden; position: relative } .searchbar form { flex: 1; display: flex } .searchbar form:before { content: "\f002"; height: 36px; color: #737677; margin: 0 0 0 .75rem } .searchbar input { width: 100%; border: 0; background: 0 0; padding: .5rem; line-height: normal; outline: 0 } .searchbar input::-ms-clear { display: none } .searchbar a { color: #2c363a } .searchbar a:before { width: 2rem; height: 36px; margin: 0 } .searchbar a.options:before { content: "\f107" } .searchbar a.reset:before { content: "\f00d"; font-size: 1rem } .searchbar a.unread:before { content: "\f0e0"; font-weight: 900 } .searchbar a.reset, .searchbar a.search { display: none } .searchbar a.selected { color: #41b849 } .searchbar span.inner { display: none } .searchbar.active a.reset { display: inline } .searchbar.open a.options:before { content: "\f106" } .searchoptions button.search { width: 100% } .searchoptions ul.proplist+div { margin-top: 1rem } .searchoptions .input-group:not(:last-child) { margin-bottom: .5rem } .searchoptions .input-group .input-group-prepend { width: 30% } .searchoptions .input-group label { width: 100% } .searchoptions .formbuttons { display: block !important } #taskmenu a { display: block; float: none } @media screen and (max-width:480px) { #taskmenu { z-index: 30001; overflow-x: hidden } #taskmenu a { max-width: unset; padding: 0 .5em; margin-top: 1px; text-align: left; line-height: 47px; height: 47px; border-bottom: 1px solid #f1f3f4 !important; color: #2c363a; font-size: 1.2rem } #taskmenu a:before { float: left !important; width: 1.2em !important; margin-right: .5rem !important } #taskmenu span.inner { font-size: 100% } } @media screen and (min-width:481px) { #taskmenu a { color: #fff; padding: .45rem 0; min-width: unset } #taskmenu a.selected { color: #fff; background: #45555c } #taskmenu a.selected:hover { color: #fff; background: #45555c } #taskmenu a:hover { color: #fff; background: #45555c } #taskmenu .special-buttons { position: absolute; bottom: 0; left: 0; background-color: #2f3a3f } #taskmenu .action-buttons a { color: #37beff; background: 0 0 } #taskmenu .action-buttons a:hover { color: #37beff; background: #45555c } #taskmenu a.logout { color: #ff5552 !important } #taskmenu a.logout:hover { color: #ff5552 !important } } @media screen and (min-width:481px) and (max-width:1024px) { #taskmenu a { width: 42px; height: 42px; font-size: 1.2rem; padding: 0 } #taskmenu a:before { line-height: 42px } #taskmenu span.inner { display: none } } @media screen and (min-width:1025px) { #taskmenu a { width: 78px; font-size: 1rem } #taskmenu a:before { float: none } #taskmenu a:focus { background-color: #45555c } #taskmenu span.inner { padding: 0 .1em } } .ui.alert { margin: 0; margin-bottom: .2rem; opacity: .95; width: 100%; padding: .75em; color: #2c363a; border: 1px solid transparent; background-color: rgba(55, 190, 255, .05); display: flex; align-items: center } @media screen and (max-width:480px) { .ui.alert { border: 0 } } .ui.alert span { margin: auto 0 } .ui.alert>i.icon { line-height: 1; color: #4d5f66; margin: auto 0 } .ui.alert>i.icon:before { content: "\f05a"; margin-right: .6rem } .ui.alert .btn { margin-left: .5rem } .ui.alert.loading { color: #6b7275 } .ui.alert.loading>i.icon:before { content: "\f1ce"; -webkit-animation: spinner-border 1.5s infinite linear; animation: spinner-border 1.5s infinite linear; width: 1em } .ui.alert.alert-success>i.icon:before { content: "\f058"; color: #41b849 } .ui.alert.alert-warning>i.icon:before { content: "\f071"; color: #ffd452 } .ui.alert.alert-danger>i.icon:before { content: "\f06a"; color: #ff5552 } .ui.alert.vcardattachment>i.icon:before { content: "\f2bb" } .ui.alert.enigmaattachment>i.icon:before { content: "\f084" } .ui.alert.encrypted>i.icon:before, .ui.alert.signed>i.icon:before { content: "\f023" } .ui.alert.chat>i.icon:before { content: "\f075" } .ui.alert .boxbuttons { white-space: nowrap } .ui.alert .boxbuttons .btn { overflow: hidden; text-overflow: ellipsis; max-width: 220px } @media screen and (max-width:480px) { .ui.alert .boxbuttons { display: flex; flex-direction: column } .ui.alert .boxbuttons .btn { max-width: 160px } .ui.alert .boxbuttons .btn:not(:first-child) { margin-top: .25rem } } .ui.alert.aligned-buttons { display: flex } .ui.alert.aligned-buttons span { flex: 1 } .ui.alert a:not(.btn) { color: #37beff; font-weight: 400 } .ui.alert h3 { font-weight: 700; font-size: 1.2rem } .ui.alert p { margin: 1rem 0 } .ui.alert.boxconfirmation, .ui.alert.boxerror, .ui.alert.boxinformation, .ui.alert.boxwarning { padding: .5em; border-radius: 0 } .ui.alert.boxconfirmation i.icon, .ui.alert.boxerror i.icon, .ui.alert.boxinformation i.icon, .ui.alert.boxwarning i.icon { font-size: 1.5em !important } .ui.alert.boxerror { background-color: rgba(255, 85, 82, .2) } .ui.alert.boxinformation { background-color: rgba(55, 190, 255, .2) } .ui.alert.boxconfirmation { background-color: rgba(65, 184, 73, .2) } .ui.alert.boxwarning { background-color: rgba(255, 212, 82, .2) } .ui.alert+table { margin-top: 1em } #messagestack { position: absolute; bottom: .5em; right: .7em; z-index: 105; width: 320px; height: auto; max-height: 85% } @media screen and (max-width:480px) { #messagestack { left: 0; right: 0; bottom: 0; width: auto } } #messagestack div { background-color: #2c363a; color: #fff } @media screen and (max-width:480px) { #messagestack div { margin: 0; border-radius: 0; min-height: 4.2rem } } #messagestack div.voice { position: absolute; top: -1000px } #messagestack div i.icon { font-size: 1.5em !important } #messagestack div>i.icon:before { color: #fff } #messagestack div:last-child { margin-bottom: 0 } #messagestack .loading { background-color: #6b7275 } #messagestack .alert-info.information { background-color: #37beff } #messagestack .alert-success { background-color: #41b849 } #messagestack .alert-warning { background-color: #ffd452; color: #2c363a } #messagestack .alert-warning>i.icon:before { color: #2c363a } #messagestack .alert-danger { background-color: #ff5552 } #messagestack a { color: inherit !important; text-decoration: underline; cursor: pointer } .listing li, .listing tbody td { border-bottom: 1px solid #f1f3f4; cursor: default; font-weight: 400; line-height: 35px } .listing li a, .listing tbody td { padding: 0 .5rem; white-space: nowrap; vertical-align: middle; color: #2c363a } .listing tbody td { overflow: hidden; text-overflow: ellipsis; outline: 0 } .listing tbody td a { color: #2c363a } .listing li a { display: block; text-decoration: none; cursor: default; width: 100% } .listing li.selected, .listing tr.selected td { color: #2c363a; background-color: #ebf9ff } .listing td.selection { padding: 0 0 0 .5em; width: 2em; text-align: center } .listing td.selection>input { vertical-align: middle } .listing:not(.withselection) td.selection { display: none } .listing td.name { overflow: hidden; text-overflow: ellipsis } .listing td.action { padding: 0 .5em; width: 2em; text-align: center } .listing td.action:empty { width: 0 } .listing td.action a { display: block; overflow: hidden; text-decoration: none } .listing td.action a:before { margin: 0; font-size: 1rem } .listing td.action a.pushgroup:before { content: "\f054" } .listing li.droptarget>a, .listing tr.droptarget>td { background-color: #ffc } .listing li.disabled, .listing tr.disabled td { color: rgba(44, 54, 58, .5) } .listing li.virtual>a, .listing li>a.virtual { opacity: .4 } .listing span.secondary { color: #737677 } html:not(.touch) .listing li>a, html:not(.touch) .listing tbody tr>td:first-child, html:not(.touch) .listing:not(.withselection) tbody tr>td.selection+td { border-left: 2px solid transparent } html:not(.touch) .listing li>a:focus, html:not(.touch) .listing.focus tbody tr.focused>td:first-child, html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td { border-left: 2px solid #9ddfff; outline: 0 } table.listing { width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: unset } ul.listing { margin: 0; padding: 0 } ul.listing>ul { padding: 0 } ul.listing li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; list-style: none } ul.listing li ul { border-top: 1px solid #f1f3f4; padding-left: 1.5em } ul.listing li ul li:last-child { border-bottom: none } ul.listing li .custom-switch { position: absolute; padding: 0; top: 0; right: 0; height: 35px; vertical-align: middle } ul.listing li .custom-switch .custom-control-label:after, ul.listing li .custom-switch .custom-control-label:before { margin-top: .4rem } html.touch ul.listing li .custom-switch .custom-control-label:after, html.touch ul.listing li .custom-switch .custom-control-label:before { margin-top: .75rem } html.touch ul.listing li .custom-switch { height: 47px } ul.listing.simplelist li { padding: 0 .5rem } .listing-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center; font-weight: 700; color: #737677 } html.touch .listing tbody td, html.touch .listing:not(.toolbar) li { line-height: 47px; font-size: 1.2rem } html.touch li input[type=checkbox] { height: 47px } html.touch td.selection { padding: 0; width: 3em } @media screen and (max-width:1200px) { .listing.selection-large-only li.selected { color: #2c363a; background-color: transparent } } .listing.iconized li a:before { height: 2em; margin-right: .5rem } .listing.iconized li.preferences>a:before { content: "\f1de" } .listing.iconized li.folders>a:before { content: "\f07b" } .listing.iconized li.responses>a:before { content: "\f075" } .listing.iconized li.identities>a:before { content: "\f2c2" } .listing.iconized li.password>a:before { content: "\f023" } .listing.iconized li.addressbook a:before { content: "\f2b9"; font-weight: 400 } .listing.iconized li.contactgroup a:before { content: "\f0c0"; font-weight: 900 } .listing.iconized li.contactsearch a:before { content: "\f002" } .listing.iconized li.filter>a:before { content: "\f0b0" } .listing.iconized li.vacation>a:before { content: "\f017"; font-weight: 400 } .listing.iconized li.forward>a:before { content: "\f14d" } .listing.iconized li.enigma.keys>a:before { content: "\f084" } .listing.iconized li.info>a:before, .listing.iconized li.userinfo>a:before { content: "\f05a" } .listing.iconized li.twofactorauth>a:before { content: "\f2f6" } .listing.iconized li a.help:before { content: "\f1cd" } .listing.iconized li a.about:before { content: "\f059"; font-weight: 400 } .listing.iconized li a.license:before { content: "\f3ed" } .listing.iconized li>i:before { content: "\f007"; margin-left: .5rem } .listing.iconized li.group>i:before { content: "\f0c0" } html.ie11 .listing.iconized li a:before { font-size: 1.25rem } .listing.iconized tr td:before { margin-right: .5rem } .listing.iconized tr.contact.person td.name:before { content: "\f007" } .listing.iconized tr.contact.group td.name:before { content: "\f0c0" } .listing.iconized tr.general>td.section:before { content: "\f108" } .listing.iconized tr.mailbox>td.section:before { content: "\f0e0"; font-weight: 400 } .listing.iconized tr.mailview>td.section:before { content: "\f01c" } .listing.iconized tr.compose>td.section:before { content: "\f1d8" } .listing.iconized tr.addressbook>td.section:before { content: "\f0c0" } .listing.iconized tr.folders>td.section:before { content: "\f07b"; font-weight: 400 } .listing.iconized tr.server>td.section:before { content: "\f233" } .listing.iconized tr.encryption>td.section:before { content: "\f023" } .listing.iconized tr.calendar>td.section:before { content: "\f133" } .listing.iconized tr.chat>td.section:before { content: "\f086" } .listing.iconized.selectable li a:before { content: "" } .listing.iconized.selectable li a.selected:before { content: "\f00c" } .popupmenu .listing li>a { border-left: 0 } .popupmenu .listing li>a:not(.disabled):hover { color: #fff; background-color: #37beff } .popupmenu .listing li.selected { color: #fff; background-color: #37beff } .popupmenu .listing td { overflow: hidden; text-overflow: ellipsis } ul.treelist li div.treetoggle { position: absolute; top: 0; left: 0; width: 1.5em; cursor: pointer; background-color: transparent } ul.treelist li div.treetoggle:before { content: "\f105"; margin-left: .25em; font-size: 1em } ul.treelist li div.treetoggle.expanded:before { content: "\f107" } ul.treelist li>a { overflow: hidden; text-overflow: ellipsis; padding-left: 1.5em } ul.treelist li.selected { color: inherit; background-color: transparent } ul.treelist li.selected>a, ul.treelist li.selected>div>a { color: #2c363a; background-color: #ebf9ff } ul.treelist li ul { padding: 0 } ul.treelist li ul li { padding-left: 0 } ul.treelist li ul li a { padding-left: 3em } ul.treelist li ul li div.treetoggle { left: 1.5em } ul.treelist li ul li li a { padding-left: 4.5em } ul.treelist li ul li li div.treetoggle { left: 3em } ul.treelist li ul li li li a { padding-left: 6em } ul.treelist li ul li li li div.treetoggle { left: 4.5em } ul.treelist li ul li li li li a { padding-left: 7.5em } ul.treelist li ul li li li li div.treetoggle { left: 6em } ul.treelist li ul li li li li li a { padding-left: 9em } ul.treelist li ul li li li li li div.treetoggle { left: 7.5em } ul.treelist.notree div.treetoggle { display: none } ul.treelist.notree li>a { padding-left: .5em } .folderlist li.mailbox.unread>a { padding-right: 2.8em; font-weight: 700 } .folderlist li.mailbox .unreadcount { position: absolute; top: 0; right: 0; min-width: 2em; line-height: 1.4rem; margin: 7.7px; padding: 0 .3em; border-radius: .4em; background: #37beff; color: #fff; text-align: center; font-weight: 700 } html.touch .folderlist li.mailbox .unreadcount { line-height: 2rem; margin: 9.5px } .folderlist li.mailbox.recent>a { color: #008cd0 } .folderlist li.mailbox.recent>a>.unreadcount { background: #37beff; color: #fff } .folderlist li.mailbox.root { display: none !important } .folderlist li a:before { content: "\f07b"; font-weight: 400; margin-right: .5rem } .folderlist li.inbox>a:before { content: "\f01c"; font-weight: 900 } .folderlist li.trash a:before { content: "\f2ed"; font-weight: 900 } .folderlist li.trash.empty>a:before { content: "\f2ed"; font-weight: 400 } .folderlist li.drafts a:before { content: "\f303"; font-weight: 900 } .folderlist li.sent a:before { content: "\f1d8"; font-weight: 900 } .folderlist li.junk a:before { content: "\f7e4"; font-weight: 900 } .folderlist li.archive>a:before { content: "\f187"; font-weight: 900 } .folderlist li.ns-shared>a:before { content: "\f1e0"; font-weight: 900 } .folderlist li.ns-other>a:before { content: "\f500"; font-weight: 900 } .folderlist.menu a:before { margin-left: .5em } .messagelist .branch, .messagelist>thead, table.fixedcopy { display: none } .messagelist td { border-left: 0; width: 2em; vertical-align: top; font-size: 1rem !important } .messagelist td.subject { width: 100%; padding-right: 0; display: flex; flex-wrap: wrap } .messagelist td.subject a { text-decoration: none; cursor: default } .messagelist td.subject span { line-height: 2em } .messagelist td.subject span.date, .messagelist td.subject span.size { font-size: 90%; color: #737677 } .messagelist td.subject span.fromto { overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 90%; color: #737677; padding-left: 1.5em; padding-right: .5rem } .messagelist td.subject span.subject { overflow: hidden; text-overflow: ellipsis; width: 100%; user-select: none } .messagelist td.threads { padding: 0 0 0 .25rem; width: 1.5em } .messagelist td.flags { width: 2.5em } .messagelist td.flags>span { height: 1.7em; line-height: 1.7em; display: block } .messagelist td.flags>span.flag { cursor: pointer } .messagelist tr.flagged td, .messagelist tr.flagged td.subject span.date, .messagelist tr.flagged td.subject span.fromto, .messagelist tr.flagged td.subject span.subject a { color: #ff5552 } .messagelist tr.deleted td, .messagelist tr.deleted td.subject span.date, .messagelist tr.deleted td.subject span.fromto, .messagelist tr.deleted td.subject span.subject a { color: rgba(44, 54, 58, .5) } .messagelist tr.unread td.subject span.subject { font-weight: 700 } .messagelist tr.unroot td.subject a { text-decoration: underline } .messagelist tr.thread td.threads div:before { content: "\f105"; cursor: pointer; width: 1em } .messagelist tr.thread.expanded td.threads div:before { content: "\f107" } .messagelist td.subject span.msgicon.status:before { content: "\f111"; cursor: pointer; font-size: .4rem; width: 1.1rem; height: 2rem } .messagelist td.subject span.msgicon.status.unread:before { content: "\f111"; color: #ffd452; font-size: .5rem } .messagelist td.subject span.msgicon.status.unreadchildren:before { content: "\f111"; font-weight: 400; font-size: .5rem } .messagelist td.subject span.msgicon.status.replied:before { content: "\f3e5"; font-weight: 900; font-size: 1rem } .messagelist td.subject span.msgicon.status.forwarded:before { content: "\f064"; font-weight: 900; font-size: 1rem } .messagelist td.subject span.msgicon.status.replied.forwarded:before { content: "\f3e5"; font-weight: 900; font-size: 1rem } .messagelist td.subject span.msgicon.status.replied.forwarded:after { content: "\f064"; font-weight: 900; font-size: 1rem; opacity: .5; margin: 0 -.1em 0 -1.25em } .messagelist tr.deleted td.subject span.msgicon.status:before { content: "\f05e" !important; font-weight: 900 !important; font-size: 1rem } .messagelist tr.deleted td.subject span.msgicon.status:after { display: none !important } .messagelist span.attachment span { color: rgba(115, 118, 119, .75) } .messagelist span.attachment span:before { margin: 0; content: "\f0c6" } .messagelist span.attachment span.report:before { content: "\f15c"; font-weight: 400 } .messagelist span.attachment span.encrypted:before { content: "\f023" } .messagelist span.attachment span.vcard:before { content: "\f007"; font-weight: 400 } .messagelist span.flagged:before { content: "\f024" } .messagelist tr.flaggedroot:not(:hover) span.unflagged:before { content: "\f024"; color: rgba(115, 118, 119, .75) } .messagelist tr:hover span.unflagged:before { content: "\f024"; font-weight: 400 } .messagelist span.size { display: none } .messagelist tr:hover span.date { display: none } .messagelist tr:hover span.size { display: inline } .messagelist.sort-size span.date { display: none } .messagelist.sort-size span.size { display: inline } .messagelist.sort-size tr:hover span.date { display: inline } .messagelist.sort-size tr:hover span.size { display: none } html.layout-phone .messagelist tr, html.touch .messagelist tr { position: relative; display: flex } html.layout-phone .messagelist td.selection, html.layout-phone .messagelist td.threads, html.touch .messagelist td.selection, html.touch .messagelist td.threads { line-height: 3.8em } html.layout-phone .messagelist td.flags, html.touch .messagelist td.flags { position: absolute; top: .25rem; right: 0; bottom: 0; background-color: transparent } html.layout-phone .messagelist td.flags .flag, html.touch .messagelist td.flags .flag { visibility: hidden } html.layout-phone .messagelist td.subject, html.touch .messagelist td.subject { padding-right: .5em } html.layout-phone .messagelist td.subject .subject, html.touch .messagelist td.subject .subject { padding-right: 1.5rem } .contactlist .contact.readonly td { font-style: italic } .contactlist td.contact:before { content: "\f007" } .contactlist td.contactgroup:before { content: "\f0c0" } .contactlist span.email { display: inline; color: #737677; font-style: italic; margin-left: .5em } .contactlist li a:before { margin-right: .5rem } .contactlist li a.addressbook::before { content: "\f2b9"; font-weight: 400 } .contactlist li a.contactgroup::before { content: "\f0c0"; font-weight: 900 } .attachmentslist { padding: 0; margin: 0; background-color: #fcfcfc; border: 1px solid #f4f4f4 } .attachmentslist:empty { padding: 0; border: 0 } .attachmentslist li { list-style: none; display: inline-flex; white-space: nowrap; line-height: 2rem; padding: 0 .25em; max-width: 100% } .attachmentslist li:before { content: "\f15b"; font-weight: 400; height: 2rem; margin: 0 } .attachmentslist li.text:before, .attachmentslist li.txt:before { content: "\f15c"; font-weight: 400 } .attachmentslist li.pdf:before { content: "\f1c1"; font-weight: 400 } .attachmentslist li.doc:before, .attachmentslist li.docx:before, .attachmentslist li.msword:before, .attachmentslist li.odt:before { content: "\f1c2"; font-weight: 400 } .attachmentslist li.msexcel:before, .attachmentslist li.ods:before, .attachmentslist li.xls:before, .attachmentslist li.xlsx:before { content: "\f1c3"; font-weight: 400 } .attachmentslist li.gz:before, .attachmentslist li.rar:before, .attachmentslist li.zip:before { content: "\f1c6"; font-weight: 400 } .attachmentslist li.image:before, .attachmentslist li.jpeg:before, .attachmentslist li.jpg:before, .attachmentslist li.png:before { content: "\f1c5"; font-weight: 400 } .attachmentslist li.audio:before, .attachmentslist li.mp3:before { content: "\f1c7"; font-weight: 400 } .attachmentslist li.m4p:before, .attachmentslist li.video:before { content: "\f1c8"; font-weight: 400 } .attachmentslist li.vcard:before { content: "\f2bb"; font-weight: 400 } .attachmentslist li.html:before { content: "\f1c9"; font-weight: 400 } .attachmentslist li.odp:before, .attachmentslist li.otp:before, .attachmentslist li.ppsx:before, .attachmentslist li.ppt:before, .attachmentslist li.pptx:before, .attachmentslist li.vnd.mspowerpoint:before { content: "\f1c4"; font-weight: 400 } .attachmentslist li a { text-decoration: none; line-height: 2rem; height: 2rem } .attachmentslist li a.cancelupload:before, .attachmentslist li a.delete:before { content: "\f2ed"; line-height: 2rem; height: 2rem; margin: 0 } .attachmentslist li a.dropdown:before { margin: 0 } .attachmentslist li.uploading:before { -webkit-animation: spinner-border 1.5s infinite linear; animation: spinner-border 1.5s infinite linear; content: "\f1ce"; font-weight: 900 } .attachmentslist li a.filename { display: flex; overflow: hidden; padding: 0 .2em } .attachmentslist li .attachment-name { overflow: hidden; text-overflow: ellipsis; color: #2c363a } .attachmentslist li .attachment-size { color: #737677; padding-left: .25em } .keylist { padding: 0; list-style: none } .keylist li { line-height: 2 } .keylist li:before { content: "\f084"; line-height: 1.5 } #identities-table td.mail:before { content: "\f2c2" } #responses-table td.name:before { content: "\f075" } #filterslist td.name:before { content: "\f0b0" } #filtersetslist td.name:before { content: "\f15c" } #subscription-table li.mailbox a { padding-right: 2.5rem } #uploadform { display: none } form.smart-upload, input.smart-upload { visibility: hidden; width: 1px; height: 1px; opacity: 0 } .propform:not(.popupmenu) { width: 100% } .propform .form-check td:not(.title)>label { display: block; margin: 0; line-height: 2rem } .propform .form-check td:not(.title)>label label { margin-right: .5rem } .propform td.datetime { display: flex } .propform td.datetime input:first-child { margin-right: .5rem } .propform td.datetime input:last-child { width: 75% } .propform td.rowbuttons { width: 1%; white-space: nowrap; vertical-align: top } .propform td.rowbuttons span { display: none } .propform td.rowbuttons a { padding: 0; line-height: 2.3rem; height: 2.3rem; font-size: 1rem } .propform td.rowbuttons a:before { content: "\f067"; vertical-align: unset } @media screen and (min-width:577px) { .propform td.rowbuttons a:before { margin: 0 !important } } .propform td.rowbuttons a.delete:before { content: "\f2ed" } .propform td.rowbuttons a.advanced:before { content: "\f013" } .propform td.rowbuttons a:not(:last-child) { margin-right: .25rem } .propform td.rowactions { width: 1%; vertical-align: top } .propform td.rowactions .form-control { width: auto } .propform td.rowtargets { vertical-align: top } .propform td.rowtargets .composite .input-group, .propform td.rowtargets .composite .multi-input, .propform td.rowtargets .composite input, .propform td.rowtargets .composite select, .propform td.rowtargets .composite textarea { margin-bottom: .5rem } .propform td.rowtargets .composite .input-group .multi-input, .propform td.rowtargets .composite .input-group input, .propform td.rowtargets .composite .input-group select, .propform td.rowtargets .composite .input-group textarea { margin-bottom: 0 } .propform td.rowtargets .composite br { display: block } .propform td.rowtargets .input-group { margin-bottom: .25rem } .propform td.rowtargets .input-group :first-child.input-group-prepend { text-align: left; min-width: 7.5em } .propform td.rowtargets .input-group :first-child.input-group-prepend>* { width: 100% } .propform td.rowtargets>.advanced { margin-top: .25rem } .propform td.title { padding-top: 0; padding-bottom: 0 } .propform td>.flexbox { display: flex } .propform td>.flexbox>.multi-input { width: 100%; margin-left: .25rem } .propform.grouped.readonly legend { margin: 0 } .propform.grouped.readonly .row.input-group { margin-bottom: 0 !important } .propform.grouped.readonly label { min-width: 7rem; background-color: transparent; border: 0; border-radius: 0 } .propform.grouped .row.input-group { margin-bottom: .5rem; flex-wrap: nowrap } .propform.grouped .row.input-group>:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 8rem } .propform.grouped .row.input-group>:first-child:not(select) { padding: 0 } @media screen and (max-width:480px) { .propform.grouped .row.input-group>:first-child { min-width: 6rem; width: 6rem; flex-grow: unset } } .propform.grouped .row.input-group>:first-child label { width: 100% } .propform.grouped .row.input-group>:nth-child(2) { flex-grow: 30 } .propform.grouped .row.input-group:last-child { margin-bottom: 1rem } .propform.grouped .row.input-group select { text-align: left } .propform.grouped .row.input-group.composite select { height: auto } .propform.grouped .row.input-group .content { padding: 0; display: flex; flex-wrap: wrap; border-radius: 0; border-left-color: transparent } .propform.grouped .row.input-group .content input { border-radius: 0; border-color: transparent } .propform.grouped .row.input-group .content .ff_street { width: 100% } .propform.grouped .row.input-group .content .ff_locality { width: 75% } .propform.grouped .row.input-group .content .ff_zipcode { width: 25% } .propform.grouped .row.input-group .content .ff_country, .propform.grouped .row.input-group .content .ff_region { width: 50% } .propform.grouped .form-control-plaintext { flex-grow: 1; border: 0 } .propform .addfield { margin: 0 } .propform .addfield select { width: 8rem; margin-top: .5rem } .propform .form-text { font-size: 90%; color: #737677 } .propform.row.form-group { margin-left: 0; margin-right: 0 } .propform.row.form-group div, .propform.row.form-group label { padding-left: 0; padding-right: 0 } .propform select+.input-group, .propform select+select { padding-top: .5rem } .propform.text-only { margin-bottom: .25rem } .propform.text-only tr { margin: 0 } .propform.text-only label { padding-bottom: 0 !important } @media screen and (max-width:576px) { .propform.text-only tr { display: table-row } .propform.text-only td { width: auto } .propform.text-only td:first-child { width: 33% } .propform.text-only :not(tr).form-group.row .col-form-label { width: 33% } .propform.text-only :not(tr).form-group.row>:last-child { width: 67% } } @media screen and (max-width:576px) { .propform table.compact-table .flexbox>select, .propform table.compact-table .rowactions>select { width: 100% } .propform table.compact-table tr { display: flex; flex-direction: column } .propform table.compact-table tr td { width: 100%; padding: .25rem 0 0 0 } .propform table.compact-table tr td.rowbuttons { text-align: right; padding-top: 0 } .propform table.compact-table tr td.rowbuttons a { margin-left: .5rem } .propform table.compact-table tr td.rowbuttons a>span { display: inline } } .formcontent fieldset:not(.tab-pane):nth-of-type(n+2), .propform fieldset:not(.tab-pane):nth-of-type(n+2) { margin-top: 1em } .formcontent legend, .propform legend { font-weight: 700; font-size: 1.2em } .formcontent label, .propform label { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow: hidden; margin-bottom: 0 } fieldset.advanced>legend { width: auto; cursor: pointer } fieldset.advanced>legend:after { float: right; margin: 0 0 0 .25rem; line-height: inherit; font-size: inherit; content: "\f106" } fieldset.advanced>legend.closed:after { content: "\f107" } @media screen and (max-width:576px) { .formcontent .text-only .form-group:not(tr) { margin-bottom: .25rem } .formcontent .text-only .form-group:not(tr) .col-form-label { width: 33% } .formcontent .text-only .form-group:not(tr) .col-form-label+span { width: 67% } html.iframe .formcontent>.propform { padding: .25rem } } html.ms .propform .row:not(.form-check)>td { display: flex; flex-wrap: wrap } @media screen and (min-width:576px) { html.ms .propform .row.form-check>td { display: flex } } .formcontainer { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: hidden !important } .formcontainer .formcontent { overflow-x: hidden; overflow-y: auto } .formcontainer .formbuttons { padding: .5rem 1rem } .formcontainer .formbuttons button { margin-right: .5rem } html.iframe.ipad .formcontainer .formbuttons, html.iframe.webkit.tablet .formcontainer .formbuttons { min-height: 4rem } html.layout-phone .formcontainer, html.layout-small .formcontainer { display: initial; overflow-y: auto !important } html.layout-phone .formcontainer .formcontent, html.layout-small .formcontainer .formcontent { overflow: initial !important } html.layout-phone .formcontainer .formbuttons, html.layout-small .formcontainer .formbuttons { display: none } .formcontent:not(.popupmenu) { padding: 1rem } .formcontent .row { margin-right: 0; margin-left: 0 } .formcontent .row .col, .formcontent .row .col-10, .formcontent .row .col-12, .formcontent .row .col-2, .formcontent .row .col-4, .formcontent .row .col-6, .formcontent .row .col-8, .formcontent .row .col-sm, .formcontent .row .col-sm-10, .formcontent .row .col-sm-12, .formcontent .row .col-sm-2, .formcontent .row .col-sm-4, .formcontent .row .col-sm-6, .formcontent .row .col-sm-8 { padding: 0 } .formcontent .row .form-control-plaintext, .formcontent .row label.col-form-label { padding: 5px 5px 5px 0 } .formcontent .row .form-control-plaintext { padding-bottom: 0; border: 0 } @media screen and (max-width:576px) { .formcontent .row.form-group>td label { padding-bottom: 0 } } .formcontent .row.form-check { padding: 0; display: flex; flex-wrap: nowrap } @media screen and (max-width:576px) { .formcontent .row.form-check .col-6 { max-width: 100%; flex: auto } .formcontent .row.form-check>:last-child { width: 1%; min-width: 2.6rem } .formcontent .row.form-check.with-link>:last-child { min-width: 8rem } } .formcontent .row.form-check .form-check-input { margin: .5rem 0 } .formcontent .row.form-check .custom-switch+a { line-height: 2; vertical-align: bottom } .formcontent .row.form-check td>label { padding-bottom: 0 } .formcontent .nav-tabs { margin-bottom: 1rem } .formcontent .nav-tabs:empty { display: none } .formcontent .hint { font-style: italic; color: #737677 } .formcontent.raweditor { height: 100% } .formcontent.raweditor form { height: 100% } .formcontent.raweditor textarea { font-family: monospace; height: 100% } .formcontent.raweditor .CodeMirror { border: 1px solid #ced4da; border-radius: .3rem; height: 100%; color: #2c363a } .formcontent.raweditor .CodeMirror-focused { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } .formcontent.raweditor .CodeMirror-linebackground.line-error { background-color: #ff5552; opacity: .4 } .formcontent.raweditor .errorGutter { width: .8em } @media screen and (max-width:320px) { .formcontent .col-form-label { flex: auto; max-width: 100% } .formcontent .col-10, .formcontent .col-6, .formcontent .col-8 { flex: auto; max-width: 100% } } .input-group .icon { text-decoration: none; padding: 5px .5rem } .input-group .icon.input-group-text { min-width: 2.4rem } .input-group .icon:before { margin: 0 !important; line-height: 1; font-size: 1.1rem } .input-group .icon.user:before { content: "\f007" } .input-group .icon.pass:before { content: "\f023" } .input-group .icon.host:before { content: "\f015" } .input-group .icon.language:before { content: "\f0ac" } .input-group .icon.cancel:before { content: "\f00d" } .input-group .icon.delete:before { content: "\f2ed" } .input-group .icon.edit:before { content: "\f303" } .input-group .icon.add:before { content: "\f067" } .input-group .icon.add.recipient:before { content: "\f0c0" } .input-group .icon.search:before { content: "\f002" } .input-group .icon.filter:before { content: "\f0b0" } .input-group .icon.key:before { content: "\f084" } .input-group .icon .inner { display: none } .input-group a:focus { background-color: rgba(55, 190, 255, .25); outline: 0 } .proplist { margin-bottom: 0; padding: 0 } .proplist li { list-style-type: none; line-height: 2rem; margin-bottom: .25rem; display: flex; align-items: center } .proplist li:last-child { margin-bottom: 0 } .proplist li input[type=radio] { margin-right: .5em } .proplist li input[type=radio]:disabled+label { opacity: .5 } .proplist li label:not(.input-group-text) { margin: 0; line-height: 2rem } .proplist li select { width: auto; display: inline } .proplist li.with-sublist { flex-wrap: wrap; position: relative } .proplist li.with-sublist>:first-child { width: 100%; margin-right: 2em } .proplist li.with-sublist>.proplist { margin-left: 2.5rem } .proplist li.with-sublist>a.dropdown { position: absolute; right: 0; top: 0; height: 2em; color: #2c363a } .checklist>div { line-height: 2rem; display: block } .checklist .custom-control-label:after, .checklist .custom-control-label:before { margin: calc(2px * -1) 0 0 0 } .checklist>div+br { display: none } .popup form.propform { padding: .25rem; overflow-x: hidden } .popupmenu.form.nolist { padding: 0 .5rem } .popupmenu.form ul { list-style-type: none; padding: 0; margin: 0 } .popupmenu.form li:not(.separator) { padding: 0 1rem } .popupmenu.form li:not(.separator) label { margin: 0; line-height: 35px } .popupmenu.form li:not(.separator) label input { margin-right: .5rem } .popupmenu.form input { vertical-align: middle } .popupmenu.form select { margin: .5rem 0 } .popupmenu.form .buttons { text-align: center; padding: .5rem } .multi-input>.content { max-height: 11.65em; overflow: hidden; overflow-y: auto; border-radius: .25rem; border: 1px solid #ced4da } .multi-input>.content.focused { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } .multi-input a.icon.reset:before { content: "\f2ed" } .multi-input input.form-control { padding-left: .75rem; height: auto } .multi-input .input-group-text, .multi-input input, .multi-input input:focus { border-radius: 0; border: 0; border-bottom: 1px solid #ced4da; box-shadow: none } .multi-input .input-group-text { border-left: 1px solid #ced4da } .multi-input .input-group-append { margin-left: 0 } .multi-input .input-group { margin: 0 !important; flex-wrap: nowrap } .multi-input .input-group:last-child * { border-bottom: 0 } .multi-input+.btn { margin-top: .5rem } .multi-input.is-invalid>.content { border: 1px solid #ff5552 } .multi-input.is-invalid>.content.focused { border-color: #ff5552; box-shadow: 0 0 0 .2rem rgba(255, 85, 82, .25) } .multi-input.is-invalid>.invalid-feedback { display: inline-block; line-height: 1.5 } .file-upload { padding: 1rem 1rem 12rem; margin: 0 1rem .25rem 1rem; border-radius: .5rem; border: .2rem dashed #d4dbde } fieldset .file-upload { margin: 0 } .file-upload .upload-form { text-align: center; padding-bottom: 1em } .file-upload .upload-form a.btn, .file-upload .upload-form button { margin-bottom: .25rem } .file-upload .hint { margin-bottom: .5rem; color: #737677; text-align: center } .file-upload .attachmentslist { border: 0; background: 0 0 } .file-upload .attachmentslist li { position: relative; display: flex; padding-right: 1.5em; margin: .15em 0 } .file-upload .attachmentslist li a.filename { flex: 1 } .file-upload .attachmentslist li a.cancelupload, .file-upload .attachmentslist li a.delete { position: absolute; right: .25em; width: auto } .file-upload .attachmentslist li a.dropdown { margin-right: .5em } .file-upload .attachmentslist li .inner { display: none } .file-upload.droptarget { padding-bottom: .5rem !important } .file-upload.droptarget:after { content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20560%22%3E%0A%3Cpath%20fill%3D%22%23d4dbde%22%20d%3D%22M690%20245c0%209.2-3.5%2017.9-10.1%2024.9l-175%20175c-6.6%206.6-15.3%2010.1-24.9%2010.1-9.2%200-18.4-3.5-24.9-10.1l-175-175c-6.6-7-10.1-15.8-10.1-24.9%200-4.4.9-9.2%202.6-13.6C277.9%20218.3%20291%20210%20305%20210h87.5V35c0-19.2%2015.8-35%2035-35h105c19.2%200%2035%2015.8%2035%2035v175H655c14%200%2027.1%208.3%2032.4%2021.4%201.7%204.4%202.6%209.2%202.6%2013.6zm0%20245H270V350h-70v140c0%2038.5%2031.5%2070%2070%2070h420c38.5%200%2070-31.5%2070-70V350h-70v140z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); width: 10rem; margin: 5rem auto 0 auto; display: block } .file-upload.droptarget.active { border-color: #b9b9b9 } .file-upload.droptarget.hover { border-color: #b9b9b9; background-color: #ececec } .recipient-input { display: flex; flex-wrap: wrap; padding: 0 .75rem 4px .75rem; list-style-type: none; cursor: text; height: auto } .recipient-input.focus { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } .recipient-input li { max-width: 100% } .recipient-input li:not(.recipient) { user-select: text } .recipient-input li.input { flex: 1; min-width: 100px } .recipient-input input { width: 100%; background: 0 0 !important; border: 0 !important; margin-top: 4px; outline: 0; line-height: 1.5 } .recipient-input input::-ms-clear { display: none } .recipient-input li.recipient, body>li.recipient.ui-sortable-helper { display: flex; position: relative; max-width: calc(50% - 3px); border: 1px solid #ced4da; background-color: #f1f3f4; border-radius: .25rem; padding: 0 .25rem; margin-top: 4px; margin-right: .2em; white-space: nowrap; cursor: default } @media screen and (max-width:450px) { .recipient-input li.recipient, body>li.recipient.ui-sortable-helper { width: 100%; max-width: 100% } } .recipient-input li.recipient .name, body>li.recipient.ui-sortable-helper .name { overflow: hidden; text-overflow: ellipsis; flex-grow: 1; line-height: 1.1; padding: 3px; vertical-align: middle } .recipient-input li.recipient .email, body>li.recipient.ui-sortable-helper .email { text-indent: -5000rem; display: inline-block; width: 0 } .recipient-input li.recipient .quotes, body>li.recipient.ui-sortable-helper .quotes { position: absolute; width: 0; opacity: 0 } .recipient-input li.recipient a.button.icon, body>li.recipient.ui-sortable-helper a.button.icon { font-size: .75em; cursor: pointer; padding: 0; color: #2c363a } .recipient-input li.recipient a.button.icon:before, body>li.recipient.ui-sortable-helper a.button.icon:before { display: inline-block; width: 1em; line-height: 1.6 } .recipient-input li.recipient.ui-sortable-helper, body>li.recipient.ui-sortable-helper.ui-sortable-helper { padding: 0 0 0 .25rem !important } .tagedit-list { display: flex; flex-wrap: wrap; padding: 0 .75rem 4px .75rem; margin: 0; list-style-type: none; min-height: 2.3rem } .tagedit-list+.placeholder { display: none } .tagedit-list[tabindex="-1"] { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } .tagedit-list li.tagedit-listelement-new { margin-top: 4px } .tagedit-list li.tagedit-listelement-new input { width: 15px; background: 0 0 !important; border: 0; outline: 0; margin: 0; padding: 0; line-height: 1.5 } .tagedit-list li.tagedit-listelement-new input.tagedit-input-disabled { visibility: hidden } .tagedit-list li.tagedit-listelement-old { max-width: 50%; border: 1px solid #ced4da; background-color: #f1f3f4; border-radius: .25em; margin-top: 4px; margin-right: .2em; white-space: nowrap } .tagedit-list li.tagedit-listelement-old a { font-size: .8em; cursor: pointer; display: inline-block; width: 1.1em; overflow: hidden; vertical-align: middle; margin-right: .2rem; color: inherit; text-decoration: none } .tagedit-list li.tagedit-listelement-old a:before { content: "\f00d"; width: 1em; line-height: 1.2 } .tagedit-list li.tagedit-listelement-old span { overflow: hidden; text-overflow: ellipsis; flex-grow: 1; display: inline-block; line-height: 1.4; padding: 0 .25rem; vertical-align: middle } .skinselection { white-space: nowrap; display: table-row } .skinselection>span { display: table-cell; vertical-align: middle; padding: .1em .5em; white-space: normal } .skinselection>span:last-child { padding-right: 0 } .skinselection .skinitem input { width: auto } .skinselection .skinname { font-weight: 700 } .skinselection .skinlicense, .skinselection .skinlicense a { font-style: italic; text-decoration: none } .skinselection .skinlicense a:hover { text-decoration: underline } .skinselection .skinauthor, .skinselection .skinlicense { font-size: 90% } .skinselection .skinthumbnail { width: 64px; height: 64px; border: 1px solid #ced4da; background: #fff; border-radius: 4px } .input-percent-slider { display: flex; align-items: center } .input-percent-slider input { max-width: 4em } .input-percent-slider span.label { line-height: 2.4; padding: 0 .5rem 0 .25rem } .input-percent-slider div.ui-slider { flex: 1; margin: 0 .5em } .image-upload { position: relative; overflow: hidden; cursor: pointer; background-color: #f4f4f4 } .image-upload a.button { display: none; position: absolute; left: 0; top: 0; background-color: rgba(255, 255, 255, .85); border-radius: 5px; width: 2.5em; padding: .5em; margin: .5em; line-height: 1 } .image-upload.changed a.button { display: inline } .input-group-combo select:first-of-type.alone { border-radius: .25rem !important } .input-group-combo select:first-of-type:not(.alone) { flex: unset; width: auto } .input-group-combo .input-group { padding: 0 !important; flex: 2 } .input-group-combo .input-group :first-child, .input-group-combo select+select { border-top-left-radius: 0; border-bottom-left-radius: 0 } @-moz-document url-prefix() { select:-moz-focusring { color: transparent !important; text-shadow: 0 0 0 #2c363a !important } } .form-control { color: #2c363a } .form-control:focus { color: #2c363a; border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } .form-control.is-invalid { border-color: #ff5552; box-shadow: none } .form-control.is-invalid:focus { border-color: #ff5552; box-shadow: 0 0 0 .2rem rgba(255, 85, 82, .25) } .form-control::placeholder { color: #bbb } .form-control::-ms-input-placeholder, .form-control::-webkit-input-placeholder { color: #bbb } .invalid-feedback { color: #ff5552; font-size: 90% } .form-group { margin-bottom: .5rem } .input-group-append.input-group-prepend { display: inline } .input-group-text { color: #2c363a; background-color: #f1f3f4 } .input-group-text input:focus { z-index: 1; border-color: #37beff !important } .custom-switch { padding-left: 0; display: inline-block } .custom-switch .custom-control-input { left: 0; opacity: 0 !important } .custom-switch .custom-control-input:focus~.custom-control-label:before { box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } .custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before { border-color: #37beff } .custom-switch .custom-control-input:checked~.custom-control-label::before { border-color: #37beff; background-color: #37beff } .custom-switch .custom-control-input:checked:disabled~.custom-control-label::before { border-color: #84d7ff; background-color: #84d7ff } .custom-switch .custom-control-label { padding-left: 2.5rem; min-height: 2rem; line-height: 2; display: inline-block } html.touch .custom-switch .custom-control-label { padding-left: 3rem } .custom-switch .custom-control-label:after, .custom-switch .custom-control-label:before { border-radius: .6rem; margin: 2px 0 } html.touch .custom-switch .custom-control-label:after, html.touch .custom-switch .custom-control-label:before { border-radius: .8rem; margin: 0 } .custom-switch .custom-control-label:before { left: 2px; top: 4px; width: 26px; height: 16px } html.touch .custom-switch .custom-control-label:before { top: 2px; width: 35px; height: 22px } .custom-switch .custom-control-label:after { left: 4px; top: 6px; width: 12px; height: 12px } html.touch .custom-switch .custom-control-label:after { top: 4px; height: 18px; width: 18px } .custom-switch .custom-control-input:checked~.custom-control-label::after { transform: translateX(10px) } html.touch .custom-switch .custom-control-input:checked~.custom-control-label::after { transform: translateX(13px) } .custom-switch .custom-control-input:not(:disabled)~.custom-control-label:after, .custom-switch .custom-control-input:not(:disabled)~.custom-control-label:before { cursor: pointer } .custom-file { display: block } .custom-file .custom-file-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 100px } .custom-file+.hint { margin-top: 3px } .custom-file-input:focus~.custom-file-label { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } div.tox { font-size: 1rem } div.tox, div.tox :not(.svg) { font-family: Roboto, sans-serif } div.tox.tox-tinymce { border-radius: .25rem; border: 1px solid #ced4da } div.tox.focused { border-color: #37beff !important; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) !important } div.tox .tox-toolbar-overlord { z-index: 1 } div.tox .tox-toolbar-overlord>div { background: url("data:image/svg+xml;charset=utf8,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E"); background-color: #f1f3f4 } div.tox .tox-toolbar__primary { border-top: 0 } div.tox .tox-toolbar { background-color: #f1f3f4 } div.tox .tox-edit-area { border: 0 } div.tox .tox-dialog { border-radius: 0; border-color: #d4dbde; box-shadow: none; align-self: unset !important } div.tox .tox-dialog .tox-form__group { margin-top: 0; margin-bottom: .75rem } div.tox .tox-dialog .tox-dialog__body-nav-item--active { color: #00acff; border-color: transparent } div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover { color: #008acc } div.tox .tox-dialog__body-content { overflow: unset } div.tox .tox-dialog__content-js { overflow: auto } div.tox .tox-dialog-wrap__backdrop { background-color: rgba(44, 54, 58, .5) } div.tox .tox-dialog__header { height: 57px; border-bottom: 1px solid #ddd; justify-content: flex-end; padding: 0 } div.tox .tox-dialog__header .tox-button { color: #2c363a; right: 0; height: 57.3px; width: 2.25em; margin-right: .4rem } div.tox .tox-dialog__header .tox-button:hover { background: 0 0; border-color: transparent } div.tox .tox-dialog__header .tox-button .tox-icon { display: none } div.tox .tox-dialog__header .tox-button:before { content: "\f00d"; line-height: 1.5rem; margin: 0 !important } div.tox .tox-dialog__footer { height: 57px !important; border: 0; margin: 0; padding: 0 1rem } @media screen and (max-width:480px) { div.tox .tox-dialog__footer { border-top: 1px solid #ddd } } div.tox .tox-dialog__footer>div { white-space: nowrap; max-height: 57px } div.tox .tox-dialog__footer>div button:first-child { margin: 0 } div.tox .tox-dialog__footer .tox-button { color: #fff; background: #37beff; border-color: #37beff; font-weight: 400; padding: .5rem .75rem } div.tox .tox-dialog__footer .tox-button:focus { background: #1eb6ff; border-color: #13b2ff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .5) } div.tox .tox-dialog__footer .tox-button:hover { background: #1eb6ff; border-color: #13b2ff } div.tox .tox-dialog__footer .tox-button.disabled, div.tox .tox-dialog__footer .tox-button:disabled { background: #37beff; border-color: #37beff } div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active, div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active { background: #04adff; border-color: #00a8f9 } div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus, div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .53) } div.tox .tox-dialog__footer .tox-button:before { width: 1em; content: "\f00c"; line-height: 1 } div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background: #37beff; border-color: #37beff } div.tox .tox-dialog__footer .tox-button.tox-button--secondary { background: #8b9fa7; border-color: #8b9fa7; color: #fff } div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus { background: #7c939c; border-color: #778e98; box-shadow: 0 0 0 .2rem rgba(139, 159, 167, .5) } div.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover { background: #7c939c; border-color: #778e98 } div.tox .tox-dialog__footer .tox-button.tox-button--secondary.disabled, div.tox .tox-dialog__footer .tox-button.tox-button--secondary:disabled { background: #8b9fa7; border-color: #8b9fa7 } div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled).active, div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled):active { background: #6e8791; border-color: #6a828b } div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled).active:focus, div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(139, 159, 167, .53) } div.tox .tox-dialog__footer .tox-button.tox-button--secondary:before { content: "\f00d" } div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled) { background: #8b9fa7; border-color: #8b9fa7 } div.tox .tox-search-dialog .tox-form__group:not(:first-child) { flex: initial !important } div.tox .tox-search-dialog .tox-dialog__footer-start button { padding: .25rem } div.tox .tox-search-dialog .tox-dialog__footer-end button:before { content: "\f303" !important } div.tox .tox-search-dialog .tox-dialog__footer-end button:first-of-type:before { content: "\f002" !important } div.tox .tox-dialog__title { line-height: calc(58px - 1px); font-size: 1.25rem; font-weight: 700; padding: 0 0 0 1rem; width: 100%; color: #2c363a } div.tox .tox-tbtn { height: 28px } div.tox .tox-tbtn:not(.tox-tbtn--select, .tox-split-button__chevron) { width: 32px } div.tox .tox-button { line-height: 1.5 } div.tox .tox-label { color: #2c363a; padding-bottom: .25rem } div.tox .tox-color-input>input, div.tox .tox-listboxfield .tox-listbox--select, div.tox .tox-textarea, div.tox .tox-textfield { font-family: Roboto, sans-serif !important; font-size: 14px; line-height: 1.5; color: #2c363a; border-radius: .25rem; min-height: 0; padding: .375rem .75rem } div.tox .tox-color-input>input:focus, div.tox .tox-listboxfield .tox-listbox--select:focus, div.tox .tox-textarea:focus, div.tox .tox-textfield:focus { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25) } div.tox .tox-listbox__select-label { margin: 0 } div.tox .tox-color-input span { top: 5px } div.tox .custom-switch { position: relative; font-size: 1rem; margin-top: .15rem } div.tox .custom-switch .tox-checkbox__icons { display: none } div.tox .custom-switch .tox-checkbox__label { margin: 0 } div.tox .image-selector { font-size: 1rem } div.tox .image-selector button { color: #fff; background: #8b9fa7; border-color: #8b9fa7; padding: .5rem .75rem; line-height: 1.5 } div.tox .image-selector button:focus { background: #7c939c; border-color: #778e98; box-shadow: 0 0 0 .2rem rgba(139, 159, 167, .5) } div.tox .image-selector button:hover { background: #7c939c; border-color: #778e98 } div.tox .image-selector button.disabled, div.tox .image-selector button:disabled { background: #8b9fa7; border-color: #8b9fa7 } div.tox .image-selector button:not(:disabled):not(.disabled).active, div.tox .image-selector button:not(:disabled):not(.disabled):active { background: #6e8791; border-color: #6a828b } div.tox .image-selector button:not(:disabled):not(.disabled).active:focus, div.tox .image-selector button:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(139, 159, 167, .53) } div.tox .tox-form__controls-h-stack div:not(:last-child) { flex: 1 } div.tox .tox-collection__item-label { white-space: nowrap } @media screen and (max-width:480px) { div.tox .tox-dialog { margin: 0 !important; width: 100% !important; height: 100%; left: 0 !important; top: 0 !important; border-width: 0 !important } div.tox .tox-dialog__header { background-color: #f4f4f4 } div.tox .tox-dialog__header .tox-button { display: none } div.tox .tox-dialog__title { font-size: 1rem; text-align: center; padding: 0 1rem } div.tox .tox-dialog__footer { background-color: #f4f4f4 } div.tox .tox-dialog__footer .tox-button { color: #2c363a !important; background: 0 0 !important; padding: .45rem; margin: 0 !important; border: 0; font-size: 90% } div.tox .tox-dialog__footer .tox-button:before { display: block; float: none; width: 100%; margin: 0; line-height: 1.75; height: 1.75rem } div.tox .tox-dialog__footer .tox-button:active, div.tox .tox-dialog__footer .tox-button:focus, div.tox .tox-dialog__footer .tox-button:hover { background: 0 0; border: 0; box-shadow: none; color: #2c363a } div.tox .tox-dialog__footer>div { justify-content: space-evenly; display: flex; width: 100% } div.tox .tox-dialog__footer>div:empty { display: none } } .image-selector { padding: 1rem .5rem 10rem .5rem !important } .image-selector.droptarget { border: .2rem dashed #d4dbde } .image-selector.droptarget:after { margin-top: 2rem } .image-selector form { position: absolute; top: 0 } .image-selector .attachmentslist { margin: 0; overflow-x: hidden; overflow-y: auto; height: 19.1em; padding: 0 !important } .image-selector .attachmentslist li { padding: .25rem; cursor: pointer } .image-selector .attachmentslist li:before { display: none } .image-selector .attachmentslist li:focus, .image-selector .attachmentslist li:hover { background: #ebf9ff } .image-selector .attachmentslist li span.name { flex: 1; margin: auto; padding-left: 1rem; overflow: hidden; text-overflow: ellipsis } .image-selector .attachmentslist li span.img { height: 80px; width: 80px; display: flex; border: 1px solid #f1f3f4; background: #fff; border-radius: .75rem; overflow: hidden } .image-selector .attachmentslist li img { margin: auto } html.layout-phone .image-selector .attachmentslist { height: auto } .html-editor { position: relative; margin-bottom: .2rem } .html-editor .editor-toolbar { position: absolute; left: 1px; top: 1px; right: 1px; border-radius: .25rem .25rem 0 0; border-bottom: 1px solid #ced4da; background-color: #f1f3f4 } .html-editor .editor-toolbar .mce-i-html { display: block; margin: 2px 2px 2px 4px; width: 34px; height: 28px; border-radius: .25rem; color: #222f3e } .html-editor .editor-toolbar .mce-i-html:focus, .html-editor .editor-toolbar .mce-i-html:hover { text-decoration: none; border-color: #e2e4e7; background-color: #dee0e2 } .html-editor .editor-toolbar .mce-i-html:before { content: "\f03e"; margin: 0; width: 34px; line-height: 28px } .html-editor .editor-toolbar .mce-i-html[disabled] { opacity: .7; cursor: not-allowed } .html-editor .tox-tinymce+.editor-toolbar, .html-editor.mailvelope .editor-toolbar { display: none } .html-editor>.googie_edit_layer, .html-editor>textarea { font-family: monospace; font-size: 13px; width: 100% !important; padding-top: 40px; resize: none } .html-editor>iframe { border-radius: .3rem; border: 1px solid #ced4da; min-height: 30em } .googie_window { width: 16rem; height: auto } .googie_edit_layer { font-family: monospace; padding: .5rem .75rem; border: 1px solid #ced4da; border-radius: .3rem; line-height: 1.5 } .googie_link { color: #ff5552; text-decoration: underline; cursor: pointer } .googie_list li { min-width: 8rem; width: auto } .googie_list li.googie_list_onhover { color: #fff; background-color: #37beff } .googie_list li .googie_list_revert:before { content: "\f0e2" } .googie_list li .googie_add_to_dict:before { content: "\f0fe" } .googie_list input { display: inline-block; margin: .25rem .5rem } .task-login #layout-content { text-align: center; width: 100%; display: block } .task-login #logo { display: inline-block; position: relative; top: 16vh; max-height: 100px } /*#login-form { margin: 0 auto; top: 20vh; width: 95%; max-width: 320px; position: relative } #login-form table, #login-form tbody { display: block } #login-form .row { margin-right: 0; margin-left: 0 } #login-form .oauthlogin { margin-top: 1em; padding-top: 1em } #login-form .formbuttons+.oauthlogin { border-top: 1px solid #ccc }*/ #rcmloginsubmit:before { display: none !important } #login-footer { flex: 1; color: #737677 } #login-footer>div { margin-top: 1rem; padding: 1rem; background: #f1f3f4; border-radius: .3rem } #login-addon { position: absolute; bottom: 0; max-height: 30%; margin: 1rem !important; width: auto !important; overflow: auto } @media screen and (min-width:769px) { #login-addon { max-width: 768px; margin: auto !important; bottom: 1rem; left: 0; right: 0 } } body.task-error-login #layout #layout-content>.header, body.task-error-login #layout #layout-menu { display: none } #contactpic { width: 112px; height: 135px; border-radius: .5rem; overflow: hidden; display: table-cell; vertical-align: middle; text-align: center; background-color: #f4f4f4 } #contactpic img { max-width: 112px; max-height: 135px } #contacthead .names { margin-bottom: .5rem } #contacthead .names span.namefield { font-size: 1.5rem; font-weight: 700; line-height: 1.2 } #contacthead.readonly .source.row { color: #737677; font-size: 90%; margin-bottom: .25rem } #message-header { margin-bottom: 1rem } #message-header>.subject { font-size: 1.5rem; font-weight: 700 } body.status-flagged #message-header>.subject:before { display: inline; float: none; content: "\f024"; font-size: 1em; color: #ff5552 } #message-header>.subject a.extwin { text-decoration: none } #message-header>.subject a.extwin:before { float: none; display: inline-block; font-size: 75%; line-height: 1.5; margin: 0; content: "\f360" } #message-header>.subject span.inner { display: none } #message-header>.header { display: flex } #message-header>.header img.contactphoto { margin: 0 1rem 0 0; border-radius: 50%; width: 4rem; height: 4rem; object-fit: cover; background: #f4f4f4 } #message-header .header-content { min-height: 4rem; flex: 1 } #message-header .header-content.details-view .header-summary { display: none } #message-header .header-content.details-view .header-headers { display: initial } #message-header .header-summary { margin-top: .25rem } #message-header .header-summary>span { display: inline-block } #message-header .header-headers { display: none } #message-header .header-headers .header-title { white-space: nowrap; color: #737677; font-weight: 700; padding-right: 1rem; vertical-align: top } #message-header .header-links { margin-top: .25rem } #message-header .header-links a { font-size: 90%; margin-right: .5rem; text-decoration: none; white-space: nowrap; display: inline-block } #message-header .header-links a:before { height: 1.5rem; line-height: 1.3 } #message-header .header-links a.headers-details:before { content: "\f0e0" } #message-header .header-links a.headers-summary:before { content: "\f0e0"; font-weight: 400 } #message-header .header-links a.headers-all:before { content: "\f05a" } #message-header .header-links a.html:before { content: "\f03e" } #message-header .header-links a.plain:before { content: "\f039" } #message-header .header-links a.zipdownload:before { content: "\f019" } .message-partheaders { padding: .25rem .5rem; margin: .5rem 0 -.5rem 0; border-top: 1px solid #f4f4f4; background-color: #fcfcfc } .message-partheaders table.headers-table { font-size: 90%; color: #737677 } .message-partheaders table.headers-table .header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8em; font-weight: 700; padding-right: 1rem; vertical-align: top } .message-partheaders table.headers-table .subject { font-weight: 700 } .message-partheaders table.headers-table+.message-htmlpart, .message-partheaders table.headers-table+.message-part { border-top: 0; margin: 0 } #message-content .attachmentslist:not(:empty) { margin-bottom: 1rem } #messagebody.mailvelope iframe { min-height: 75vh } .message-htmlpart, .message-part { padding-top: .5rem; position: relative } .message-htmlpart:not(:first-child), .message-part:not(:first-child) { border-top: 1px solid #f4f4f4; margin-top: .5rem } .message-htmlpart:last-child, .message-part:last-child { margin-bottom: .5rem } .message-htmlpart div.rcmBody, .message-part div.rcmBody { margin: 0 auto !important; overflow: auto hidden } .message-htmlpart blockquote, .message-part blockquote { overflow: hidden; text-overflow: ellipsis; color: #006a9d; border-left: 2px solid #006a9d; border-right: 2px solid #006a9d; background-color: rgba(241, 243, 244, .5); margin: 2px 0; padding: 0 .4em } .message-htmlpart blockquote blockquote, .message-part blockquote blockquote { color: #205a24; border-left: 2px solid #205a24; border-right: 2px solid #205a24 } .message-htmlpart blockquote blockquote blockquote, .message-part blockquote blockquote blockquote { color: #eb0400; border-left: 2px solid #eb0400; border-right: 2px solid #eb0400 } .message-htmlpart blockquote span.blockquote-link, .message-part blockquote span.blockquote-link { top: 0; cursor: pointer; right: .5rem; min-width: 4rem; padding: .2rem .25rem .2rem .5rem; font-size: 90%; text-align: center; color: #737677; background: #f1f3f4; border: 1px solid #d4dbde; border-radius: .3rem; line-height: 1; font-family: Roboto, sans-serif } .message-htmlpart blockquote span.blockquote-link:after, .message-part blockquote span.blockquote-link:after { content: "\f107"; display: inline-block; float: none; margin: 0; font-size: 90% } .message-htmlpart blockquote span.blockquote-link.collapsed:after, .message-part blockquote span.blockquote-link.collapsed:after { content: "\f106" } .message-htmlpart blockquote.blockquote-header, .message-part blockquote.blockquote-header { text-overflow: ellipsis !important; padding-right: 5rem !important } .message-part span.sig { color: #737677 } .message-part div.pre { font-family: monospace; font-size: 13px } .message-part blockquote { display: inline-block; min-width: 100% } .message-part blockquote+br { display: block; margin-top: 1em } #compose-attachments { margin: 1rem 1rem 0 1rem } #composestatusbar { opacity: .3; right: 2.5rem } @media screen and (min-width:769px) { #composestatusbar { display: none } } #composestatusbar a.button { display: inline-block } #composestatusbar a.button:before { line-height: 58px; font-size: 1.25rem !important } .settings-default-icon li>a:before, .settings-default-icon tr>td.section::before { content: "\f013" } html.dark-mode { scrollbar-color: #007bb7 #4d6066 } html.dark-mode:not(.touch) ::-webkit-scrollbar-track { background-color: #4d6066 } html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color: #007bb7 } html.dark-mode body { color: #c5d1d3; background-color: #21292c } html.dark-mode #logo { opacity: .8 } html.dark-mode #layout-content, html.dark-mode #layout-list, html.dark-mode #layout-sidebar, html.dark-mode #layout>div>.footer, html.dark-mode #layout>div>.header, html.dark-mode .menu.pagenav.pagenav-list, html.dark-mode .menu.pagenav.pagenav-list+.navlist, html.dark-mode .menu.pagenav.pagenav-list.expanded+.navlist, html.dark-mode .popup .listbox .footer { background-color: transparent; border-color: #4d6066 } html.dark-mode #layout>div>.footer { font-weight: 400 } html.dark-mode #layout>div>.footer, html.dark-mode #layout>div>.header { color: unset } html.dark-mode #layout>div>.footer a.button, html.dark-mode #layout>div>.header a.button { color: #c5d1d3 } html.dark-mode #layout-menu { background: unset; border-right: 1px solid #4d6066 } html.dark-mode #layout-menu .popover-header, html.dark-mode #layout-menu .special-buttons { background: 0 0 !important } @media screen and (max-width:480px) { html.dark-mode #layout-menu { border-left: 0 } html.dark-mode #layout-menu .popover-header { border-bottom: 1px solid #4d6066 } } html.dark-mode #layout-menu .special-buttons a:not(:focus) { background: #21292c } html.dark-mode.layout-phone #layout-menu { background: #161b1d } html.dark-mode .searchbar { background-color: transparent; border-color: #4d6066 } html.dark-mode .searchbar a, html.dark-mode .searchbar form:before, html.dark-mode .searchbar input { color: unset } html.dark-mode .searchbar a.selected { color: #41b849 } html.dark-mode #messagestack div { color: #c5d1d3 } html.dark-mode #messagestack div i.icon:before { color: #c5d1d3 } html.dark-mode #messagestack .alert-info, html.dark-mode .ui.alert.boxinformation { background-color: #217299 } html.dark-mode #messagestack .alert-danger, html.dark-mode .ui.alert.boxerror { background-color: #993331 } html.dark-mode #messagestack .alert-warning, html.dark-mode .ui.alert.boxwarning { background-color: #997f31 } html.dark-mode #messagestack .alert-success, html.dark-mode .ui.alert.boxconfirmation { background-color: #276e2c } html.dark-mode #messagestack .loading { background-color: #374449 } html.dark-mode .ui.alert.boxconfirmation, html.dark-mode .ui.alert.boxerror, html.dark-mode .ui.alert.boxinformation, html.dark-mode .ui.alert.boxwarning { color: #c5d1d3 } html.dark-mode .ui.alert.boxconfirmation i.icon:before, html.dark-mode .ui.alert.boxerror i.icon:before, html.dark-mode .ui.alert.boxinformation i.icon:before, html.dark-mode .ui.alert.boxwarning i.icon:before { color: #c5d1d3 } html.dark-mode .ui.alert a:not(.btn) { color: #c5d1d3; text-decoration: underline } html.dark-mode .iframe-loader { background-color: rgba(33, 41, 44, .9) } html.dark-mode .iframe-loader .spinner-border { color: #7d989c; border-color: currentColor #425457 currentColor currentColor } html.dark-mode #taskmenu a, html.dark-mode .menu.toolbar a { color: #c5d1d3 } html.dark-mode #taskmenu a.selected, html.dark-mode .menu.toolbar a.selected { background-color: #374549 } html.dark-mode .menu.pagenav .pagenav-text, html.dark-mode .menu.pagenav a, html.dark-mode .popover .menu li a[aria-haspopup]::after, html.dark-mode pre { color: unset } html.dark-mode #taskmenu .action-buttons a { color: #37beff } @media screen and (max-width:480px) { html.dark-mode #taskmenu a { border-color: #2c373a !important } html.dark-mode #taskmenu a.selected { background: 0 0 } } @media screen and (min-width:481px) and (max-width:1024px) { html.dark-mode #taskmenu a { width: 41px } } @media screen and (min-width:1025px) { html.dark-mode #taskmenu a { width: 77px } } html.dark-mode.layout-phone .popover, html.dark-mode.layout-small .popover { border-left: 1px solid #4d6066 } html.dark-mode.layout-phone .popover .menu .dropbutton a.dropdown, html.dark-mode.layout-small .popover .menu .dropbutton a.dropdown { background: 0 0 } html.dark-mode.layout-phone .popover:not(.select-menu) .listing li:last-child, html.dark-mode.layout-small .popover:not(.select-menu) .listing li:last-child { border-color: #2c373a } html.dark-mode.layout-phone .popover-header, html.dark-mode.layout-small .popover-header { background: #161b1d; border-bottom: 1px solid #4d6066; color: unset } html.dark-mode.layout-phone .popover-overlay, html.dark-mode.layout-small .popover-overlay { background: rgba(0, 0, 0, .7) } html.dark-mode #taskmenu a:hover, html.dark-mode .header a.button.icon:not(.disabled):focus, html.dark-mode .header a.button.icon:not(.disabled):hover, html.dark-mode .menu a:not(.disabled):focus, html.dark-mode .menu a:not(.disabled):hover, html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover, html.dark-mode .popupmenu .listing li>a:not(.disabled):hover { background-color: #374549 } html.dark-mode .menu.toolbar a.selected { color: #41b849; background: 0 0 } html.dark-mode .menu.toolbar .dropbutton a.dropdown:hover { background-color: #425358 } html.dark-mode .listing li a, html.dark-mode .listing tbody td, html.dark-mode .listing tbody td a, html.dark-mode .proplist li.with-sublist>a.dropdown { color: #c5d1d3 } html.dark-mode .listing li, html.dark-mode .listing li ul, html.dark-mode .listing tbody td { border-color: #2c373a } html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td { color: #37beff; background-color: #374549 } html.dark-mode .listing li.selected ul { background-color: #21292c } html.dark-mode .listing li.selected ul div.treetoggle { color: #c5d1d3 } html.dark-mode .listing li.disabled, html.dark-mode .listing tr.disabled td { color: #637e82 } html.dark-mode .listing li.droptarget>a, html.dark-mode .listing tr.droptarget>td { background-color: #4d4d00 } html.dark-mode .messagelist { color: #c5d1d3 } html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date, html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto, html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size { color: #8ba3a7 } html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status { color: #c5d1d3 } html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before { color: #b88a00 } html.dark-mode .messagelist tr:not(.flagged):not(.deleted) span.flag { color: #c5d1d3 } html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a, html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status { color: #37beff } html.dark-mode .messagelist tr.flagged:not(.deleted) span.attachment span, html.dark-mode .messagelist tr.flagged:not(.deleted) td { color: #ff5552 } html.dark-mode .messagelist tr.deleted td span.attachment span, html.dark-mode .messagelist tr.deleted td span.flag, html.dark-mode .messagelist tr.deleted td.subject span.date, html.dark-mode .messagelist tr.deleted td.subject span.fromto, html.dark-mode .messagelist tr.deleted td.subject span.msgicon.status, html.dark-mode .messagelist tr.deleted td.subject span.msgicon.status.unread:before, html.dark-mode .messagelist tr.deleted td.subject span.subject a { color: #637e82 } html.dark-mode .messagelist span.attachment span { color: #8ba3a7 } html.dark-mode .folderlist li.mailbox .unreadcount { background-color: #4d6066; color: #e2e8e9; font-weight: 400 } html.dark-mode .attachmentslist { background-color: #374549; border: 0 } html.dark-mode .attachmentslist a { color: #c5d1d3 } html.dark-mode .attachmentslist li .attachment-name { color: #c5d1d3 } html.dark-mode .attachmentslist li .attachment-size { color: #8ba3a7 } html.dark-mode .btn { color: #c5d1d3 } html.dark-mode .btn:focus, html.dark-mode .btn:hover { color: #e2e8e9 } html.dark-mode .btn:disabled { opacity: .5 !important } html.dark-mode .btn-primary { background-color: #006a9d; color: #e2e8e9 } html.dark-mode .btn-primary:hover:not(:disabled) { background-color: #007bb7 } html.dark-mode .btn-secondary { background-color: #4d6066; color: #e2e8e9 } html.dark-mode .btn-secondary:hover:not(:disabled) { background-color: #586e75 } html.dark-mode .btn-danger { background-color: #993331; color: #e2e8e9 } html.dark-mode .btn-danger:hover:not(:disabled) { background-color: #ac3937 } html.dark-mode .floating-action-buttons a.button { box-shadow: none; background: #006a9d } html.dark-mode .custom-file-label, html.dark-mode .form-control { background-color: #21292c; color: #c5d1d3 } html.dark-mode .custom-file-label:not(.is-invalid), html.dark-mode .form-control:not(.is-invalid) { border-color: #7c949c } html.dark-mode .custom-file-label:focus, html.dark-mode .form-control:focus { background-color: #2c373b } html.dark-mode .custom-file-label:focus:not(.is-invalid), html.dark-mode .form-control:focus:not(.is-invalid) { color: #e2e7e9 !important; border-color: #37beff } html.dark-mode .custom-file-label::after { color: #c5d1d3; background-color: #374549 } html.dark-mode .custom-select { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c5d1d3' viewBox='0 0 4 5'%3e%3cpath d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px } html.dark-mode .custom-switch .custom-control-label::before { background-color: #4d6066 } html.dark-mode .custom-switch .custom-control-label::after { background-color: #c5d1d3 } html.dark-mode .custom-switch .custom-control-input:disabled~.custom-control-label { opacity: .4 } html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before { background-color: #006a9d } html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::after { background-color: #c5d1d3 } html.dark-mode input:disabled, html.dark-mode select:disabled { opacity: .5 } html.dark-mode .multi-input:not(.is-invalid)>.content { border-color: #7c949c } html.dark-mode .multi-input:not(.is-invalid)>.content.focused { border-color: #37beff } html.dark-mode .input-group-text { color: #c5d1d3; background-color: #374549; border-color: #7c949c } html.dark-mode .input-group a:focus { border-color: #37beff; box-shadow: 0 0 0 .2rem rgba(55, 190, 255, .25); z-index: 1 } html.dark-mode .form-control-plaintext { color: unset } html.dark-mode .recipient-input.focus { color: #e2e7e9; background-color: #2c373b; border-color: #37beff } html.dark-mode .recipient-input a.button.icon, html.dark-mode .recipient-input input { color: #c5d1d3 } html.dark-mode .recipient-input .recipient { background-color: #374549; border-color: #7c949c } html.dark-mode .file-upload { border-color: #4d6066 } html.dark-mode .file-upload:after { mix-blend-mode: soft-light } html.dark-mode .file-upload.droptarget.active { border-color: #c5d1d3 } html.dark-mode .file-upload.droptarget.hover { border-color: #c5d1d3; background-color: #374549 } html.dark-mode .file-upload .attachmentslist { background: 0 0 } html.dark-mode .image-upload { background-color: #374549 } html.dark-mode .image-upload a.button { background-color: rgba(33, 41, 44, .25) } html.dark-mode .formcontent.raweditor .CodeMirror { color: #c5d1d3; background-color: #21292c; border-color: #7c949c } html.dark-mode .formcontent.raweditor .CodeMirror-focused { background-color: #2c373b; border-color: #37beff } html.dark-mode .CodeMirror-line::selection, html.dark-mode .CodeMirror-line>span::selection, html.dark-mode .CodeMirror-line>span>span::selection, html.dark-mode .CodeMirror-selected { background: #374549 } html.dark-mode .CodeMirror-gutters { background-color: #212a2c; border: 0 } html.dark-mode .CodeMirror-activeline-background { background: #374549 } html.dark-mode .skinselection .skinthumbnail { border-color: #7c949c; background: 0 0 } html.dark-mode .html-editor .editor-toolbar { background-color: #374549; border-color: #7c949c } html.dark-mode .html-editor .editor-toolbar .mce-i-html { color: unset } html.dark-mode .html-editor .editor-toolbar .mce-i-html:focus, html.dark-mode .html-editor .editor-toolbar .mce-i-html:hover { background-color: #586e75; border-color: transparent } html.dark-mode .tox.tox-tinymce { border-color: #7c949c } html.dark-mode .tox .tox-toolbar { background-color: #374549; border-color: #7c949c } html.dark-mode .tox .tox-toolbar-overlord>div { background: url("data:image/svg+xml,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%237c949c'/%3E%3C/svg%3E") #374549 } html.dark-mode .tox .tox-pop.tox-pop--top:after, html.dark-mode .tox .tox-pop.tox-pop--top:before { border-bottom-color: #8b9fa7 } html.dark-mode .tox .tox-pop__dialog { box-shadow: none; border-color: #8b9fa7 } html.dark-mode .tox .tox-split-button, html.dark-mode .tox .tox-swatches__picker-btn, html.dark-mode .tox .tox-tbtn { color: #c5d1d3 } html.dark-mode .tox .tox-split-button svg, html.dark-mode .tox .tox-swatches__picker-btn svg, html.dark-mode .tox .tox-tbtn svg { fill: #c5d1d3 !important } html.dark-mode .tox .tox-split-button:focus, html.dark-mode .tox .tox-split-button:hover, html.dark-mode .tox .tox-swatches__picker-btn:focus, html.dark-mode .tox .tox-swatches__picker-btn:hover, html.dark-mode .tox .tox-tbtn:focus, html.dark-mode .tox .tox-tbtn:hover { color: #c5d1d3; background: #586e75; box-shadow: none } html.dark-mode .tox .tox-tbtn--enabled { background: #586e75 } html.dark-mode .tox .tox-button--naked.tox-button--icon:hover:not(:disabled), html.dark-mode .tox .tox-button--naked:focus:not(:disabled) { color: #d4ddde; background-color: #586e75; border-color: transparent } html.dark-mode .tox .tox-button--naked:disabled { background: 0 0; border: transparent } html.dark-mode .tox .tox-dialog__header .tox-button--naked:hover { background: 0 0 !important } html.dark-mode .tox .tox-selectfield select { background: 0 0; color: #c5d1d3 } html.dark-mode .tox .tox-selectfield svg { fill: #c5d1d3 } html.dark-mode .tox .tox-color-input span::before { background-color: #c5d1d3 } html.dark-mode .tox .tox-toolbar__group:not(:last-of-type) { border-color: #7c949c } html.dark-mode .tox .tox-dialog, html.dark-mode .tox .tox-dialog__body, html.dark-mode .tox .tox-dialog__footer, html.dark-mode .tox .tox-dialog__header, html.dark-mode .tox .tox-dialog__title { color: #c5d1d3; border-color: #4d6066; background-color: #21292c } html.dark-mode .tox .tox-button--naked, html.dark-mode .tox .tox-color-input>input, html.dark-mode .tox .tox-dialog__body-nav-item, html.dark-mode .tox .tox-dialog__header .tox-button, html.dark-mode .tox .tox-insert-table-picker__label, html.dark-mode .tox .tox-label, html.dark-mode .tox .tox-textfield { color: #c5d1d3 } html.dark-mode .tox .tox-dialog__footer .tox-button { background-color: #006a9d; color: #e2e8e9 } html.dark-mode .tox .tox-dialog__footer .tox-button:disabled { opacity: .5 } @media screen and (max-width:480px) { html.dark-mode .tox .tox-dialog__footer .tox-button { color: #c5d1d3 !important } } html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background-color: #006a9d } html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled) { background-color: #007bb7 } html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary { background-color: #4d6066; color: #e2e8e9 } html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled) { background-color: #4d6066 } html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary:hover:not(:disabled) { background-color: #586e75 } html.dark-mode .tox .tox-dialog__body-nav-item--active { color: #37beff } html.dark-mode .tox .tox-dialog-wrap__backdrop { background-color: rgba(0, 0, 0, .7) } html.dark-mode .tox .tox-menu { background-color: #161b1d; border-color: #8b9fa7; box-shadow: none } html.dark-mode .tox .tox-collection__item-caret svg { fill: #c5d1d3 } html.dark-mode .tox .tox-collection__item { color: #c5d1d3 } html.dark-mode .tox .tox-collection__item:not(:last-child) { border-bottom: 1px solid #2c373a } html.dark-mode .tox .tox-collection--grid .tox-collection__item { border: 0 } html.dark-mode .tox .tox-collection__item--active, html.dark-mode .tox .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #c5d1d3; background-color: #374549 } html.dark-mode .tox .tox-collection__item--enabled { color: #37beff; background-color: #374549 } html.dark-mode .message-part { border-color: #4d6066 } html.dark-mode .message-part blockquote { background-color: #21292c; border-color: #6acfff; color: #6acfff } html.dark-mode .message-part blockquote span.blockquote-link { color: currentColor; background: #21292c; border-color: currentColor } html.dark-mode .message-part blockquote blockquote { color: #64c86b; border-color: #64c86b } html.dark-mode .message-part blockquote blockquote blockquote { color: #ff8785; border-color: #ff8785 } html.dark-mode .message-part span.sig { color: #8ba3a7 } html.dark-mode .message-htmlpart { background-color: #fff; color: #2c363a; padding: 0; margin-top: .5rem } html.dark-mode #message-header .header-headers .header-title { color: #c5d1d3; font-weight: 400 } html.dark-mode .message-partheaders { background-color: #374549; border: 0 } html.dark-mode .message-partheaders table.headers-table { color: #c5d1d3 } html.dark-mode .message-partheaders table.headers-table * { font-weight: 400 } html.dark-mode p.image-attachment { border-color: #4d6066; background-color: #374549 } html.dark-mode p.image-attachment span { color: #8ba3a7 } html.dark-mode fieldset.image-attachment legend { color: #8ba3a7; border-color: #4d6066 } html.dark-mode #messagepartframe { background: #fff } html.dark-mode .ui-widget { border-color: #4d6066 } html.dark-mode .ui-widget-overlay { background-color: rgba(0, 0, 0, .7) } html.dark-mode .ui-widget-content, html.dark-mode .ui-widget-header { background-color: #21292c } html.dark-mode .ui-dialog .ui-dialog-titlebar { border-color: #4d6066 } html.dark-mode .ui-dialog .ui-dialog-title, html.dark-mode .ui-dialog .ui-dialog-titlebar-close { color: #c5d1d3; background: 0 0 } html.dark-mode .ui-dialog .ui-dialog-buttonpane { border-color: #4d6066 } html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link { color: #c5d1d3 } html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus { background: 0 0 } @media screen and (max-width:480px) { html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary:not(.btn-danger), html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary { color: #c5d1d3 } } html.dark-mode .ui-datepicker .ui-datepicker-header { border-color: #4d6066 } html.dark-mode .ui-datepicker th { color: #8ba3a7; font-size: 80%; font-weight: 400 } html.dark-mode .ui-datepicker .ui-datepicker-next, html.dark-mode .ui-datepicker .ui-datepicker-prev, html.dark-mode .ui-datepicker .ui-state-default, html.dark-mode .ui-datepicker.ui-widget-content .ui-state-default { color: #c5d1d3 } html.dark-mode .ui-datepicker .ui-state-highlight, html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight { color: #37beff; background-color: #374549 } html.dark-mode .ui-datepicker .ui-datepicker-days-cell-over a { background-color: #4d6066 } html.dark-mode .ui-menu { background-color: #161b1d; border-color: #8b9fa7; box-shadow: none } html.dark-mode .ui-menu .ui-menu-item { border-bottom: 1px solid #2c373a } html.dark-mode .ui-menu .ui-state-active { background-color: #374549 !important } html.dark-mode .minicolors-panel { box-shadow: none; border-color: #4d6066; background: #161b1d } html.dark-mode #contacthead.readonly .source.row, html.dark-mode #login-footer, html.dark-mode .contactlist span.email, html.dark-mode .file-upload .hint, html.dark-mode .formcontent .hint, html.dark-mode .listing span.secondary, html.dark-mode .listing-info, html.dark-mode ::-webkit-input-placeholder, html.dark-mode ::placeholder { font-weight: 400; color: #8ba3a7 } html.dark-mode .popover { background-color: #161b1d; border-color: #8b9fa7; box-shadow: none } html.dark-mode .popover .menu li.separator { background-color: transparent; color: #8ba3a7 } html.dark-mode .popover .menu ul+li.separator { border-top: 1px solid #2c373a } html.dark-mode .popover-body { color: #c5d1d3 } html.dark-mode .bs-popover-auto[x-placement^=right]>.arrow::after, html.dark-mode .bs-popover-right>.arrow::after { border-right-color: #8b9fa7 } html.dark-mode .bs-popover-auto[x-placement^=left]>.arrow::after, html.dark-mode .bs-popover-left>.arrow::after { border-left-color: #8b9fa7 } html.dark-mode .bs-popover-auto[x-placement^=top]>.arrow::after, html.dark-mode .bs-popover-top>.arrow::after { border-top-color: #8b9fa7 } html.dark-mode .bs-popover-auto[x-placement^=bottom]>.arrow::after, html.dark-mode .bs-popover-bottom>.arrow::after { border-bottom-color: #8b9fa7 } html.dark-mode .nav-tabs { border-color: #4d6066 } html.dark-mode .nav-tabs .nav-link { color: #c5d1d3; border-color: transparent; border-bottom-color: #4d6066 } html.dark-mode .nav-tabs .nav-link:hover { background: #21292c; border-color: #4d6066; color: #c5d1d3 } html.dark-mode .nav-tabs .nav-link.active { background: #21292c; border-color: #4d6066; border-bottom-color: transparent; color: #fff } html.dark-mode .table { color: #c5d1d3 } html.dark-mode .table td, html.dark-mode .table th, html.dark-mode .table thead th { border-color: #4d6066 } html.dark-mode .table-widget { border-color: #4d6066 } html.dark-mode .table-widget>.footer { border-color: #4d6066 } html.dark-mode .table-widget table.options-table tr:last-child td { border-color: #4d6066 } html.dark-mode .table-widget table.options-table tr.selected td { background-color: #374549; color: #c5d1d3 } html.dark-mode #rcmdraglayer { background-color: #161b1d; border: 1px solid #8b9fa7; box-shadow: none; color: #c5d1d3 } html.dark-mode .quota-widget { color: unset } html.dark-mode .quota-widget .bar { border-color: #4d6066; background-color: #4d6066 } html.dark-mode .quota-info .root { color: #8ba3a7; background-color: transparent } html.dark-mode #contactpic, html.dark-mode img.contactphoto { background-color: #374549 !important } html.dark-mode .pgpkeyimport div.key.disabled, html.dark-mode .pgpkeyimport div.key.revoked { color: #637e82 } html.dark-mode .pgpkeyimport li.uid::before { opacity: 1 } /* code new*/ #login-wrapper { min-height: 100vh; display: flex; flex-direction: column; background: #fff; margin: 0; padding: 0; width: 100% !important; max-width: none !important; overflow-x: hidden; } .login-header { flex-shrink: 0; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .main-banner { position: relative; width: 100% !important; max-width: none !important; } .banner-img { width: 100% !important; min-width: 100% !important; height: auto; display: block; min-height: 333px !important; } .login-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 80px 20px 100px; background: #FFFFFF; min-height: 360px; box-sizing: border-box; } @media (min-height: 900px) { .login-body { padding-top: 110px; padding-bottom: 130px; } } @media (min-height: 1100px) { .login-body { padding-top: 140px; padding-bottom: 160px; } } .login-form-wrapper { width: 100%; max-width: 420px; margin: 0 auto; } .system-title { color: #bf8e1f; font-size: 19px; font-weight: 700; text-align: center; margin-bottom: 38px; text-transform: uppercase; letter-spacing: 0.5px; } #login-form { width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #login-form table, #login-form tbody, #login-form tr, #login-form td { display: block !important; width: 100% !important; border: none !important; margin: 0 !important; padding: 0 !important; } .input-group-prepend, .input-group-text { display: none !important; } .propform label { display: block !important; font-size: 15px; font-weight: 600 !important; color: #444; margin-bottom: 8px; margin-left: 4px; } .propform input[type="text"], .propform input[type="password"] { width: 100% !important; height: 48px !important; padding: 0 16px !important; border: 1.5px solid #e0e0e0 !important; border-radius: 8px !important; font-size: 15px !important; background: #fff !important; box-sizing: border-box; } .propform input[type="text"]:focus, .propform input[type="password"]:focus { border-color: #bf8e1f !important; box-shadow: 0 0 0 3px rgba(191, 142, 31, 0.15) !important; outline: none; } .propform .row, .form-group.row { margin-bottom: 28px !important; } #login-form input[type="submit"], .propform input[type="submit"], button#mainaction, button.rcmloginsubmit, .btn.mainaction, .btn-primary, button[type="submit"] { width: 100% !important; height: 58px !important; margin-top: 35px !important; background: linear-gradient(135deg, #8a0307, #a40409) !important; color: white !important; border: none !important; border-radius: 10px !important; font-size: 17px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.6px; cursor: pointer; box-shadow: 0 5px 15px rgba(200, 16, 46, 0.35) !important; padding: 0 !important; } #login-form input[type="submit"]:hover, .propform input[type="submit"]:hover, .btn-primary:hover { background: linear-gradient(135deg, #a00c24, #c8102e) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(200, 16, 46, 0.45) !important; } .btn, .btn-primary, .btn-lg { margin-top: 48px !important; height: 58px !important; font-size: 17px !important; border-radius: 10px !important; } .login-footer { flex-shrink: 0; background: #1E3864; padding: 25px 0 15px !important; width: 100% !important; } .login-footer { flex-shrink: 0; background: #1E3864; padding: 0px 0 10px !important; width: 100% !important; max-width: none !important; margin: 0 !important; } .footer-content { max-width: 1380px; margin: 0 auto; padding: 0 20px; width: 100% !important; display: flex; justify-content: center; } .footer-links { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; } .footer-icon img { width: auto; max-width: 100%; display: block; transition: transform 0.25s ease; } .footer-icon:hover img { transform: scale(1.08); } @media screen and (-webkit-min-device-pixel-ratio: 0) { .login-header, .main-banner, .banner-img, .login-footer { width: 100vw !important; } .banner-img, .login-footer { min-width: 100vw !important; } } @media (max-width: 992px) { .login-body { padding-top: 50px !important; padding-bottom: 70px !important; } } @media (max-width: 640px) { .login-body { padding-top: 40px !important; padding-bottom: 60px !important; } .footer-links { gap: 14px; } .footer-icon .logo-vnat { height: clamp(68px, 6.5vw, 92px) !important; } .footer-icon .logo-group { height: clamp(58px, 5.6vw, 82px) !important; } } html, body { height: 100% !important; min-height: 100% !important; } #login-wrapper { min-height: 100vh !important; min-height: -webkit-fill-available !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden; } .main-banner, .banner-img { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 260px !important; } .login-body { flex: 1 1 auto !important; padding: 10px 15px 10px !important; min-height: auto !important; } .login-form-wrapper { max-width: 380px !important; padding: 0 10px; } .system-title { font-size: 16px !important; margin-bottom: 28px !important; } .propform input[type="text"], .propform input[type="password"] { height: 52px !important; font-size: 16px !important; } #login-form input[type="submit"], .propform input[type="submit"], .btn-primary { height: 56px !important; font-size: 16.5px !important; margin-top: 30px !important; } .login-footer { padding: 18px 0 12px !important; } .footer-content { padding: 0 15px; } .footer-links { gap: 16px !important; } @media screen and (max-width: 640px) { .banner-img { min-height: 230px !important; } .login-body { padding: 10px 12px 10px !important; } .system-title { font-size: 15px !important; } .footer-links { gap: 12px !important; } }