.buttons .button {
  text-shadow: none !important;
  border: 0 !important;
}
.buttons .button.contour_button {
  border: 1px solid #d0d2d9 !important;
  color: #9196a6 !important;
}
.tabsbar {
  box-shadow: 0px 1px 2px rgba(145, 150, 166, 0.4);
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.tabsbar .item {
  padding: 2px 10px;
}
.tabsbar .item.current {
  font-weight: bold !important;
}
.tabsbar .item .link {
  transition: all 0.2s ease;
}
.tabsbar .item .link:hover {
  color: #00AEEF;
}
.tabsbar .item .unseen.one {
  right: -15px !important;
  top: -10px;
  background: #FF3D33 !important;
  color: #FEE5D6;
  padding: 2px !important;
  font-size: 8pt !important;
}
.tabsbar .settings,
.tabsbar .logout {
  font-size: 10pt !important;
}
.panel {
  border-radius: 0 !important;
}
.panel.left_panel {
  background-color: #0566C6;
}
.panel.left_panel .count.unseen,
.panel.left_panel .count.total {
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
}
.panel.center_panel {
  background-color: #eff0f2;
}
.panel.center_panel .panel_top {
  display: flex !important;
  align-items: center !important;
}
.panel.center_panel .panel_top .custom_checkbox {
  margin-top: unset !important;
}
.panel.center_panel .items_list .item {
  background: #eff0f2;
}
.panel.center_panel .items_list .item.selected {
  background: #FFFFFF;
}
.panel.center_panel .items_list .item.selected .date {
  color: #9196a6;
}
.panel.center_panel .items_list .item .item_content {
  border-color: rgba(208, 210, 217, 0.7);
}
.panel.center_panel .items_list .item .from {
  font-size: 12px !important;
  color: #72788d !important;
}
.panel.center_panel .items_list .item .subject {
  color: #3f434e !important;
  font-size: 14px !important;
}
.panel.center_panel .items_list .item.unseen {
  position: relative;
}
.panel.center_panel .items_list .item.unseen::after {
  position: absolute;
  content: "new";
  top: 0;
  right: 0;
  font-size: 9px;
  padding: 0 5px;
  line-height: 1.5;
  background: #33cc82;
  color: #FFFFFF;
  border-bottom-left-radius: 5px;
}
.panel.center_panel .items_list .item.unseen .subject {
  color: #26282f !important;
}
.panel.center_panel .custom_checkbox.checked .icon {
  background: #28a166 !important;
  color: #FFFFFF !important;
  border-color: #28a166 !important;
}
.panel.center_panel .custom_checkbox.checked .icon::before {
  transform: translateY(1px);
}
.items_list .item.account > .title {
  color: #595d6e !important;
}
.items_list .item > .title {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.items_list .item > .title .name {
  display: flex !important;
  align-items: center;
}
.items_list .item > .title .text {
  vertical-align: middle !important;
}
.items_list .item > .title .icon {
  margin-right: 10px !important;
  height: 24px !important;
  width: 24px !important;
}
.items_list .item > .title .icon:before {
  font-size: 24px !important;
}
.items_list .item.canSelect > .title {
  color: #FFFFFF !important;
  text-shadow: none !important;
}
.items_list .item.canSelect > .title.virtualEmpty .title,
.items_list .item.canSelect > .title.virtualEmpty .title:hover {
  color: #aaaaaa;
}
.items_list .item.canSelect > .title.ui-state-disabled {
  cursor: pointer !important;
}
.items_list .item.selected > .title {
  background: rgba(255, 255, 255, 0.2) !important;
}
.folders .items_list .item.canSelect > .title {
  color: #595d6e !important;
  text-shadow: none !important;
}
.search_block > .input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px !important;
}
html.non-adjustable .panels {
  height: 100% !important;
}
html.non-adjustable .panels.settings .panel.data {
  background: #FFFFFF !important;
}
html.non-adjustable .panels.settings .fieldset {
  background: #eff0f2 !important;
  background-image: none !important;
}
.quick_reply .row.focused textarea {
  background: #FFFFFF;
  color: #3f434e;
}
.quick_reply .row textarea {
  background: #eff0f2;
  border: 1px solid rgba(208, 210, 217, 0.7) !important;
  padding: 10px !important;
  font-size: 14px !important;
}
.message_viewer .message_header .contact {
  background: rgba(0, 174, 239, 0.1);
}
.message_viewer .message_header .contact.from {
  background: #eff0f2 !important;
}
.message_viewer .message_header .subject {
  font-size: 16pt !important;
}
.LoginLayout {
  background: #eff0f2 !important;
}
.LoginLayout .login_panel {
  background: #FFFFFF;
  box-shadow: 0px 2px 5px rgba(13, 13, 16, 0.15);
  border-radius: 10px;
  padding: 40px;
  width: auto;
}
.LoginLayout .login_panel .fields .row {
  border-radius: 5px !important;
  border-color: rgba(208, 210, 217, 0.7) !important;
  margin-bottom: 15px !important;
  box-shadow: unset !important;
}
.LoginLayout .login_panel .fields .row .placeholder,
.LoginLayout .login_panel .fields .row.filled .placeholder,
.LoginLayout .login_panel .fields .row.focused .placeholder {
  margin-right: 5px !important;
}
.LoginLayout .login_panel .fields .row .placeholder::before,
.LoginLayout .login_panel .fields .row.filled .placeholder::before,
.LoginLayout .login_panel .fields .row.focused .placeholder::before {
  color: #9196a6 !important;
}
.popup_panel .text {
  font-size: 16px !important;
}
.list_notification,
.message_viewer .message_body_info {
  color: #b1b4c0 !important;
}
.login_panel .header .icon {
  width: 200px !important;
  height: 120px !important;
}
.login_panel .header .icon:before {
  width: 100% !important;
  height: 100% !important;
  content: "" !important;
  background-image: url(images/logo.svg) !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*=== Common css part ===*/
@font-face {
  font-family: 'afterlogic';
  src: url('../../fonts/afterlogic.eot');
  src: url('../../fonts/afterlogic.eot?#iefix') format('embedded-opentype'), url('../../fonts/afterlogic.svg#afterlogic') format('svg'), url('../../fonts/afterlogic.woff') format('woff'), url('../../fonts/afterlogic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.not-exist:before,
.icon-font:before {
  font-family: 'afterlogic';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*=== Library part ===*/
.clearfix {
  clear: both;
}
.clearfix:after {
  /*Opera*/
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html > body .clearfix {
  width: 100%;
  display: block;
}
* html .clearfix {
  /* IE 6 */
  height: 1%;
}
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectable {
  -webkit-touch-callout: all;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
input,
select,
textarea {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
@keyframes cycle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes cycle {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes cycle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes highlight {
  0% {
    background: #ffffc4;
  }
  60% {
    background: #ffffc4;
  }
  100% {
    background: rgba(255, 255, 196, 0);
  }
}
@-moz-keyframes highlight {
  0% {
    background: #ffffc4;
  }
  60% {
    background: #ffffc4;
  }
  100% {
    background: rgba(255, 255, 196, 0);
  }
}
@-webkit-keyframes highlight {
  0% {
    background: #ffffc4;
  }
  60% {
    background: #ffffc4;
  }
  100% {
    background: rgba(255, 255, 196, 0);
  }
}
@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -moz-transform: scale(0);
  }
  40% {
    -moz-transform: scale(1);
  }
}
@keyframes flipIn {
  0% {
    transform: rotateY(0);
    max-height: 500px;
    top: 0px;
  }
  99% {
    transform: rotateY(90deg);
    max-height: 500px;
    top: 0px;
  }
  100% {
    transform: rotateY(90deg);
    max-height: 0px;
    top: -20000px;
  }
}
@-moz-keyframes flipIn {
  0% {
    -moz-transform: rotateY(0);
    max-height: 500px;
    top: 0px;
  }
  99% {
    -moz-transform: rotateY(90deg);
    max-height: 500px;
    top: 0px;
  }
  100% {
    -moz-transform: rotateY(90deg);
    max-height: 0px;
    top: -20000px;
  }
}
@-webkit-keyframes flipIn {
  0% {
    -webkit-transform: rotateY(0);
    max-height: 500px;
    top: 0px;
  }
  99% {
    -webkit-transform: rotateY(90deg);
    max-height: 500px;
    top: 0px;
  }
  100% {
    -webkit-transform: rotateY(90deg);
    max-height: 0px;
    top: -20000px;
  }
}
@keyframes flipOut {
  0% {
    transform: rotateY(270deg);
    max-height: 0px;
    top: -20000px;
  }
  49% {
    transform: rotateY(270deg);
    max-height: 0px;
    top: -20000px;
  }
  50% {
    transform: rotateY(270deg);
    max-height: 0px;
    top: 0px;
  }
  100% {
    transform: rotateY(360deg);
    max-height: 500px;
    top: 0px;
  }
}
@-moz-keyframes flipOut {
  0% {
    -moz-transform: rotateY(270deg);
    max-height: 0px;
    top: -20000px;
  }
  49% {
    -moz-transform: rotateY(270deg);
    max-height: 0px;
    top: -20000px;
  }
  50% {
    -moz-transform: rotateY(270deg);
    max-height: 500px;
    top: 0px;
  }
  100% {
    -moz-transform: rotateY(360deg);
    max-height: 500px;
    top: 0px;
  }
}
@-webkit-keyframes flipOut {
  0% {
    -webkit-transform: rotateY(270deg);
    max-height: 0px;
    top: -20000px;
  }
  49% {
    -webkit-transform: rotateY(270deg);
    max-height: 0px;
    top: -20000px;
  }
  50% {
    -webkit-transform: rotateY(270deg);
    max-height: 500px;
    top: 0px;
  }
  100% {
    -webkit-transform: rotateY(360deg);
    max-height: 500px;
    top: 0px;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.7);
  }
  80% {
    transform: scale(1.7);
  }
  100% {
    transform: scale(1.3);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }
  70% {
    -moz-transform: scale(1.7);
  }
  80% {
    -moz-transform: scale(1.7);
  }
  100% {
    -moz-transform: scale(1.3);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  70% {
    -webkit-transform: scale(1.7);
  }
  80% {
    -webkit-transform: scale(1.7);
  }
  100% {
    -webkit-transform: scale(1.3);
  }
}
@keyframes shake {
  0% {
    transform: translate(0px);
  }
  15% {
    transform: translate(-15px);
  }
  30% {
    transform: translate(15px);
  }
  45% {
    transform: translate(-10px);
  }
  60% {
    transform: translate(10px);
  }
  75% {
    transform: translate(-5px);
  }
  90% {
    transform: translate(5px);
  }
  100% {
    transform: translate(0px);
  }
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(0px);
  }
  15% {
    -webkit-transform: translate(-15px);
  }
  30% {
    -webkit-transform: translate(15px);
  }
  45% {
    -webkit-transform: translate(-10px);
  }
  60% {
    -webkit-transform: translate(10px);
  }
  75% {
    -webkit-transform: translate(-5px);
  }
  90% {
    -webkit-transform: translate(5px);
  }
  100% {
    -webkit-transform: translate(0px);
  }
}
@-moz-keyframes shake {
  0% {
    -moz-transform: translate(0px);
  }
  15% {
    -moz-transform: translate(-15px);
  }
  30% {
    -moz-transform: translate(15px);
  }
  45% {
    -moz-transform: translate(-10px);
  }
  60% {
    -moz-transform: translate(10px);
  }
  75% {
    -moz-transform: translate(-5px);
  }
  90% {
    -moz-transform: translate(5px);
  }
  100% {
    -moz-transform: translate(0px);
  }
}
.panels,
.panel_helper {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
html.non-adjustable .panels {
  height: auto;
}
html.non-adjustable .panels .panel {
  flex-grow: 0 !important;
}
.panel {
  border-radius: 5px;
  font-size: 9pt;
  height: 100%;
  position: relative;
  white-space: normal;
  flex-basis: auto;
  flex-grow: 1;
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.panel.center_panel,
.panel.item_viewer,
.panel.data {
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.11);
}
.rtl .panel {
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.11);
}
.panel .panel_content {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.panel .panel_content .resizer {
  background: transparent;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.panel .middle_bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
}
html.non-adjustable .panel .middle_bar {
  overflow: visible;
}
.panel.center_panel .panel_top {
  background: #d0d2d9;
}
.panel.center_panel .panel_bottom {
  background: #FFFFFF;
}
.panel .panel_top {
  border-bottom: 1px solid #e2e2e2;
  color: #555566;
  padding: 6px 10px 6px 34px;
  white-space: nowrap;
}
html.rtl .panel .panel_top {
  padding-left: 10px;
  padding-right: 34px;
}
.panel .panel_top .custom_checkbox {
  margin-top: 6px;
  margin-left: -20px;
  margin-right: 8px;
  vertical-align: top;
}
html.rtl .panel .panel_top .custom_checkbox {
  margin-left: 8px;
  margin-right: -20px;
}
.panel .panel_center {
  height: 100%;
}
.panel .panel_bottom {
  border-radius: 0 0 4px 4px;
  border-top: 1px solid #E2E2E2;
  line-height: 26px;
  padding: 10px 20px;
}
.panel.item_viewer {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}
.panel.item_viewer {
  background: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  z-index: 1;
}
.screens > .panel.item_viewer {
  width: 100%;
}
html.rtl .panel.item_viewer {
  margin-left: 0px;
  margin-right: -1px;
  padding-left: 0;
  padding-right: 2px;
}
.panel.item_viewer .notification {
  color: #cccccc;
  display: block;
  font-size: 18px;
  padding: 26px 20px;
  text-align: center;
}
.panel.item_viewer .attachments {
  color: #3d3d3d;
  padding: 20px;
}
.panel.item_viewer .attachments .download_menu {
  margin-bottom: 10px;
}
.panel.item_viewer .attachments .download_menu .content {
  margin-left: 24px;
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: max-height 500ms ease 500ms;
  -moz-transition: max-height 500ms ease 500ms;
  -o-transition: max-height 500ms ease 500ms;
  transition: max-height 500ms ease 500ms;
}
.panel.item_viewer .attachments .download_menu .content .link {
  margin-top: 10px;
}
.panel.item_viewer .attachments .download_menu:hover .content {
  max-height: 200px;
  -webkit-transition: max-height 500ms ease 0s;
  -moz-transition: max-height 500ms ease 0s;
  -o-transition: max-height 500ms ease 0s;
  transition: max-height 500ms ease 0s;
}
.panel.item_viewer .attachments .download_menu .link {
  display: inline-block;
}
.panel.item_viewer .attachments .download_menu .link.hover {
  color: #333333 !important;
  text-decoration: none !important;
}
.panel.item_viewer .attachments .download_menu .link .icon {
  color: #00AEEF;
  display: none;
}
.panel.item_viewer .attachments .download_menu .link .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.item_viewer .attachments .download_menu .link .icon:before {
  display: inline-block;
  font-size: 20px;
  height: 100%;
  margin: -6px -3px 0px;
  vertical-align: middle;
  width: 100%;
}
.panel.item_viewer .attachments .download_menu .link.hover .icon {
  display: inline-block;
  float: left;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  width: 16px;
}
.panel.item_viewer .attachments .download_menu .link.hover .icon:before {
  content: "\e642";
}
.panel.item_viewer .attachments .download_menu .link .text {
  overflow: hidden;
}
.items_list .section_title {
  color: #ffffff;
  cursor: default;
  display: block;
  font-weight: bold;
  padding: 10px 17px 10px 17px;
  text-shadow: none;
  text-transform: uppercase;
  white-space: nowrap;
}
html.rtl .items_list .section_title {
  padding-left: 0px;
  padding-right: 12px;
}
.items_list .section_title .control {
  float: right;
}
.items_list .use_threads .threaded {
  background: #f9f8f6;
  border-left: 5px solid #afabab;
  max-height: 0px;
}
html.rtl .items_list .use_threads .threaded {
  border-left: 0px;
  border-right: 5px solid #afabab;
}
.items_list .use_threads .threaded.show {
  max-height: 80px;
  -webkit-transition: max-height 200ms ease-out;
  -moz-transition: max-height 200ms ease-out;
  -o-transition: max-height 200ms ease-out;
  transition: max-height 200ms ease-out;
}
.items_list .use_threads .threaded .link {
  color: #4477bb;
}
.items_list .use_threads .threaded .link:hover {
  color: #c74747;
}
.items_list .not_use_threads .item .from .other_senders,
.items_list .not_use_threads .item .from .plus_more_senders {
  display: none;
}
.items_list .use_threads .item .from .other_senders {
  margin-left: -5px;
}
.items_list .use_threads .item .from .plus_more_senders {
  opacity: 0.5;
}
.items_list .item {
  background: #ffffff;
  color: #3d3d3d;
  cursor: default;
  font-weight: normal;
  line-height: 140%;
  max-height: 80px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.items_list .item .from,
.items_list .item .subject {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .items_list .item .from,
html.rtl .items_list .item .subject {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.items_list .item.unseen {
  background: #eff0f2;
  font-weight: bold;
}
.items_list .item.unseen .from,
.items_list .item.unseen .subject {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .items_list .item.unseen .from,
html.rtl .items_list .item.unseen .subject {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.items_list .item.deleted {
  -webkit-transition: max-height 250ms ease;
  -moz-transition: max-height 250ms ease;
  -o-transition: max-height 250ms ease;
  transition: max-height 250ms ease;
  max-height: 0px !important;
  overflow: hidden;
}
.items_list .item.checked {
  background: #ebf7cb;
}
.items_list .item.checked .from,
.items_list .item.checked .subject {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .items_list .item.checked .from,
html.rtl .items_list .item.checked .subject {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.items_list .item.checked .custom_checkbox .icon {
  border-color: #a5ad8e;
  box-shadow: 0 1px 0 #ffffff;
}
.items_list .item.selected {
  background-color: #78b8f0;
  color: #ffffff;
}
.items_list .item.selected .from,
.items_list .item.selected .subject {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .items_list .item.selected .from,
html.rtl .items_list .item.selected .subject {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.items_list .item.selected .custom_checkbox .icon {
  border-color: #5481a8;
  box-shadow: 0 1px 0 #bddcf8;
}
.items_list .item .item_content {
  border-bottom: 1px solid #e8e8e8;
  padding: 14px 16px 14px 14px;
}
html.rtl .items_list .item .item_content {
  padding-left: 16px;
  padding-right: 14px;
}
.items_list .item .controls {
  display: inline-block;
  float: left;
  margin-right: 8px;
}
html.rtl .items_list .item .controls {
  float: right;
  margin-left: 8px;
  margin-right: 0px;
}
.items_list .item .data {
  display: block;
  overflow: hidden;
}
.items_list .item .data.table {
  display: flex;
}
.items_list .item .data.table > span {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px 10px;
}
.items_list .item .data.table > span.fixed {
  flex-grow: 0;
}
.items_list .item .group,
.items_list .item .size,
.items_list .item .date,
.items_list .item .attachments {
  color: #999999;
  display: inline-block;
  float: right;
  font-size: 8pt;
  margin-left: 4px;
}
html.rtl .items_list .item .group,
html.rtl .items_list .item .size,
html.rtl .items_list .item .date,
html.rtl .items_list .item .attachments {
  float: left;
  margin-left: 0px;
  margin-right: 4px;
}
.items_list .item .size,
.items_list .item .date {
  margin-top: 1px;
}
.items_list .item .attachments {
  margin-top: -2px;
}
.items_list .item .attachments.has_ical_attachment {
  margin-top: -1px;
}
.items_list .item.selected .size,
.items_list .item.selected .date {
  color: #ffffff;
}
.items_list .item .title {
  display: block;
  margin-bottom: 10px;
}
.items_list .item .separator {
  clear: both;
}
.items_list .uploader_mask {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity 250ms ease 0s;
  -moz-transition: opacity 250ms ease 0s;
  -o-transition: opacity 250ms ease 0s;
  transition: opacity 250ms ease 0s;
  background: #fffdd6;
  color: #d3b910;
  font-size: 18pt;
  height: 100%;
  left: 0px;
  opacity: 0;
  padding: 11px;
  position: absolute;
  text-align: center;
  top: 0px;
  visibility: hidden;
  width: 100%;
}
.items_list .uploader_mask.active {
  visibility: visible;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.items_list .uploader_mask .inner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px dashed #e2da36;
  border-radius: 5px;
  height: 100%;
}
/* For draggable items in lists */
.draggable {
  height: 0px;
  /* don't change */
  width: 0px;
  /* don't change */
}
.draggable .content {
  cursor: move;
  height: 200px;
  margin: -100px 0px 0px -100px;
  width: 200px;
}
.draggable .content .count-text {
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000');
  border-radius: 2px;
  color: #ffffff;
  display: inline-block;
  line-height: 100%;
  margin: 100px 0px 0px 100px;
  min-width: 30px;
  padding: 6px 10px;
  white-space: nowrap;
  z-index: 10002;
}
/* IE9 do not support flex-wrap and flex-direction */
.no-flexwrap .panel {
  float: left;
}
.list_notification {
  color: #cccccc;
  display: block;
  font-size: 18px;
  padding: 6px 14px 26px;
  text-align: center;
}
.list_notification.search_results {
  background: #fcfcfc;
  border-bottom: 1px solid #e5e5e5;
}
.list_notification .link {
  float: right;
  font-size: 9pt;
  margin-left: 10px;
}
html.rtl .list_notification .link {
  float: left;
  margin-left: 0px;
  margin-right: 10px;
}
.list_notification .description {
  display: block;
  padding-top: 20px;
}
.list_notification .description .part {
  color: #777777;
}
.toolbar .content {
  display: block;
  font-size: 0.1px;
  padding: 11px;
}
.toolbar .content > .item,
.toolbar .content .group > .item {
  cursor: pointer;
  display: inline-block;
  font-size: 10pt;
  height: 30px;
  line-height: 30px;
  margin-right: 8px;
  padding: 1px 7px;
  position: relative;
  vertical-align: middle;
}
.toolbar .content > .item:last-child,
.toolbar .content .group > .item:last-child {
  margin-right: 0px;
}
html.rtl .toolbar .content > .item:last-child,
html.rtl .toolbar .content .group > .item:last-child {
  margin-left: 0px;
}
html.rtl .toolbar .content > .item,
html.rtl .toolbar .content .group > .item {
  margin-left: 8px;
  margin-right: 0px;
}
html.mobile .toolbar .content > .item,
html.mobile .toolbar .content .group > .item {
  position: static;
}
.toolbar .content > .item > .icon,
.toolbar .content .group > .item > .icon {
  display: inline-block;
  font-size: 32px;
  height: 32px;
  width: 32px;
  text-align: center;
  vertical-align: middle;
}
.toolbar .content > .item > .icon:before,
.toolbar .content .group > .item > .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.toolbar .content > .item > .icon:after,
.toolbar .content .group > .item > .icon:after {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.toolbar .content > .item > .icon:before,
.toolbar .content .group > .item > .icon:before {
  display: inline-block;
  vertical-align: baseline;
}
.toolbar .content > .item > .text_icon,
.toolbar .content .group > .item > .text_icon {
  color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-size: 20px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  width: 30px;
}
.toolbar .content > .item.checkstate,
.toolbar .content .group > .item.checkstate {
  float: right;
  margin-right: 0px;
}
html.rtl .toolbar .content > .item.checkstate,
html.rtl .toolbar .content .group > .item.checkstate {
  float: left;
  margin-left: 0px;
}
.toolbar .content > .item .arrow,
.toolbar .content .group > .item .arrow {
  height: 14px !important;
  width: 14px !important;
}
.toolbar .content > .item .arrow:before,
.toolbar .content .group > .item .arrow:before {
  content: "\e66d" !important;
  font-size: 16px;
  vertical-align: top;
}
.toolbar .content > .item > .text,
.toolbar .content .group > .item > .text,
.toolbar .content > .item .button .text,
.toolbar .content .group > .item .button .text {
  font-size: 13pt;
  font-weight: normal;
}
.toolbar .content > .item > .text,
.toolbar .content .group > .item > .text {
  color: #9196a6;
  display: none;
  vertical-align: middle;
}
.toolbar .content > .item .hint,
.toolbar .content .group > .item .hint {
  border-radius: 6px;
  display: inline-block;
  line-height: 22px;
  padding: 0 5px;
  vertical-align: middle;
}
.toolbar .content .group {
  display: inline-block;
  margin-right: 8px;
  position: relative;
  vertical-align: middle;
}
html.rtl .toolbar .content .group {
  margin-left: 8px;
  margin-right: 0px;
}
html.mobile .toolbar .content .group {
  position: static;
}
.toolbar .content .group > .item {
  border-radius: 0px;
  border-left-width: 0px;
  border-right-width: 1px;
  margin-left: 0px;
  margin-right: 0px;
}
html.rtl .toolbar .content .group > .item {
  border-radius: 0px;
  border-left-width: 1px;
  border-right-width: 0px;
}
.toolbar .content .group > .item:first-child {
  border-radius: 4px 0px 0px 4px;
  border-left-width: 1px;
}
html.rtl .toolbar .content .group > .item:first-child {
  border-radius: 0px 4px 4px 0px;
  border-right-width: 1px;
}
.toolbar .content .group > .item.control,
.toolbar .content .group > .item:last-child {
  border-radius: 0px 4px 4px 0px;
}
html.rtl .toolbar .content .group > .item.control,
html.rtl .toolbar .content .group > .item:last-child {
  border-radius: 4px 0px 0px 4px;
}
.toolbar .disabled .item,
.toolbar .item.disabled {
  opacity: 0.3;
  filter: alpha(opacity=30);
  color: #888888;
  cursor: default;
}
.toolbar .group.checkstate .icon:before,
.toolbar .item.checkstate .icon:before {
  content: "\e607";
  height: 100%;
  width: 100%;
}
.toolbar .group.checkstate .icon .cssanimations,
.toolbar .item.checkstate .icon .cssanimations {
  -webkit-transform-origin: 50% 48%;
  -moz-transform-origin: 50% 48%;
  -ms-transform-origin: 50% 48%;
  -o-transform-origin: 50% 48%;
  transform-origin: 50% 48%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.toolbar .group.checkstate.process .icon,
.toolbar .item.checkstate.process .icon {
  text-shadow: none;
}
.toolbar .group.checkstate.process .icon:before,
.toolbar .item.checkstate.process .icon:before {
  text-shadow: none;
}
.toolbar .group.mark .icon:before,
.toolbar .item.mark .icon:before {
  content: "\e603";
}
.toolbar .group.move .icon:before,
.toolbar .item.move .icon:before {
  content: "\e604";
}
.toolbar .group.delete .icon:before,
.toolbar .item.delete .icon:before {
  content: "\e606";
}
.toolbar .group.restore .icon:before,
.toolbar .item.restore .icon:before {
  content: "\e650";
}
.toolbar .group.watcher .icon,
.toolbar .item.watcher .icon {
  background-position: -840px -240px;
}
.toolbar .group.spam .icon:before,
.toolbar .item.spam .icon:before {
  content: "\e605";
}
.toolbar .group.notspam .icon:before,
.toolbar .item.notspam .icon:before {
  content: "\e608";
}
.toolbar .group.empty_spam .icon:before,
.toolbar .item.empty_spam .icon:before {
  content: "\e676";
}
.toolbar .group.empty_trash .icon:before,
.toolbar .item.empty_trash .icon:before {
  content: "\e676";
}
.toolbar .group.download .icon:before,
.toolbar .item.download .icon:before {
  content: "\e610";
}
.toolbar .group.share .icon:before,
.toolbar .item.share .icon:before {
  content: "\e62a";
}
.toolbar .group.unshare .icon:before,
.toolbar .item.unshare .icon:before {
  content: "\e62b";
}
.toolbar .group.share-all .icon:before,
.toolbar .item.share-all .icon:before {
  content: "\e632";
}
.toolbar .group.unshare-all .icon:before,
.toolbar .item.unshare-all .icon:before {
  content: "\e633";
}
.toolbar .group.publish .icon:before,
.toolbar .item.publish .icon:before {
  content: "\e62c";
}
.toolbar .group.edit .icon:before,
.toolbar .item.edit .icon:before {
  content: "\e62d";
}
.toolbar .group.resolve .icon:before,
.toolbar .item.resolve .icon:before {
  content: "\e62f";
}
.toolbar .group.resolved .icon,
.toolbar .item.resolved .icon {
  margin-right: 8px;
}
.toolbar .group.resolved .icon:before,
.toolbar .item.resolved .icon:before {
  content: "\e673";
}
.toolbar .group.resolved .icon:after,
.toolbar .item.resolved .icon:after {
  color: #79ee0a;
  content: "\e674";
  margin-left: -27px;
}
.toolbar .group.wait_client .icon:before,
.toolbar .item.wait_client .icon:before {
  content: "\e631";
}
.toolbar .group.new_request_button .icon:before,
.toolbar .item.new_request_button .icon:before {
  content: "\e630";
}
.toolbar .group.new_folder .icon:before,
.toolbar .item.new_folder .icon:before {
  content: "\e62e";
}
.toolbar .group.forward .icon:before,
.toolbar .item.forward .icon:before {
  content: "\e60e";
}
.toolbar .group.reply .icon:before,
.toolbar .item.reply .icon:before {
  content: "\e60c";
}
.toolbar .group.replyall .icon:before,
.toolbar .item.replyall .icon:before {
  content: "\e60d";
}
.toolbar .group.resend .icon:before,
.toolbar .item.resend .icon:before {
  content: "\e650";
}
.toolbar .group.save .icon:before,
.toolbar .item.save .icon:before {
  content: "\e610";
}
.toolbar .group.print .icon:before,
.toolbar .item.print .icon:before {
  content: "\e60f";
}
.toolbar .group.new_window .icon:before,
.toolbar .item.new_window .icon:before {
  content: "\e611";
}
.toolbar .group.save_and_close .icon:before,
.toolbar .item.save_and_close .icon:before {
  content: "\e66b";
}
.toolbar .group.minimize .icon:before,
.toolbar .item.minimize .icon:before {
  content: "\e669";
}
.toolbar .group.maximize .icon:before,
.toolbar .item.maximize .icon:before {
  content: "\e66a";
}
.toolbar .group.back .icon:before,
.toolbar .item.back .icon:before {
  content: "\e60b";
}
.toolbar .group.new_contact .icon:before,
.toolbar .item.new_contact .icon:before {
  content: "\e601";
}
.toolbar .group.new_group .icon:before,
.toolbar .item.new_group .icon:before {
  content: "\e609";
}
.toolbar .group.add_to .icon:before,
.toolbar .item.add_to .icon:before {
  content: "\e604";
}
.toolbar .group.remove_from .icon:before,
.toolbar .item.remove_from .icon:before {
  content: "\e64a";
}
.toolbar .group.export-csv .icon:before,
.toolbar .item.export-csv .icon:before {
  content: "\e900";
}
.toolbar .group.export-vcf .icon:before,
.toolbar .item.export-vcf .icon:before {
  content: "\e901";
}
.toolbar .group.import-contacts .icon:before,
.toolbar .item.import-contacts .icon:before {
  content: "\e902";
}
.toolbar .group.new_message .icon:before,
.toolbar .item.new_message .icon:before {
  content: "\e600";
}
.toolbar .group.send_files .icon:before,
.toolbar .item.send_files .icon:before {
  content: "\e61a";
}
.toolbar .group.close .icon:before,
.toolbar .item.close .icon:before {
  content: "\e60b";
}
.toolbar .group.add_new_item .icon:before,
.toolbar .item.add_new_item .icon:before {
  content: "\e90c";
}
.toolbar .group.prev .icon:before,
.toolbar .item.prev .icon:before {
  content: "\e671";
}
html.rtl .toolbar .group.prev .icon:before,
html.rtl .toolbar .item.prev .icon:before {
  content: "\e670";
}
.toolbar .group.next .icon:before,
.toolbar .item.next .icon:before {
  content: "\e670";
}
html.rtl .toolbar .group.next .icon:before,
html.rtl .toolbar .item.next .icon:before {
  content: "\e671";
}
.toolbar .group.more > .icon:before,
.toolbar .item.more > .icon:before {
  content: "\e651";
}
.toolbar .group.headers > .icon:before,
.toolbar .item.headers > .icon:before {
  content: "\e653";
}
.toolbar .group.pgp > .icon:before,
.toolbar .item.pgp > .icon:before {
  content: "\e659";
}
.toolbar .group.new_link > .icon:before,
.toolbar .item.new_link > .icon:before {
  content: "\e65a";
}
.toolbar .group.pdf > .icon:before,
.toolbar .item.pdf > .icon:before {
  content: "\e664";
}
.toolbar .group.copy > .icon:before,
.toolbar .item.copy > .icon:before {
  content: "\e905";
}
.toolbar .group.paste > .icon:before,
.toolbar .item.paste > .icon:before {
  content: "\e908";
}
.toolbar .group.cut > .icon:before,
.toolbar .item.cut > .icon:before {
  content: "\e906";
}
.toolbar .group.share > .icon:before,
.toolbar .item.share > .icon:before {
  content: "\e912";
}
.toolbar .group.secure-share > .icon:before,
.toolbar .item.secure-share > .icon:before {
  content: "\e914";
}
.cssanimations .toolbar .item.process .icon:before {
  -webkit-animation: cycle 0.8s linear infinite;
  -moz-animation: cycle 0.8s linear infinite;
  animation: cycle 0.8s linear infinite;
}
.fields .fieldset .subtitle {
  margin-top: 0px;
  font-size: 13.5pt;
}
.fields .fieldset .disabled {
  opacity: 0.8;
  filter: alpha(opacity=80);
  color: #888888;
  cursor: default;
}
.fields .fieldgroup {
  padding-bottom: 20px;
}
.fields .fieldgroup:last-child {
  padding-bottom: 0px;
}
.fields .hint {
  color: #929292;
  margin: 0 0 10px;
  padding: 0 0 10px;
  padding: 0px;
  text-shadow: 0 1px 0 #ffffff;
}
.fields .hint p {
  margin: 0px;
}
.cssanimations .fields .hint.highlight {
  -webkit-animation: highlight 500ms linear;
  -moz-animation: highlight 500ms linear;
  animation: highlight 500ms linear;
}
.fields .row {
  margin: 0px 0px 6px;
  font-size: 0px;
  clear: both;
}
.fields .row:after {
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html > body .fields .row {
  width: 100%;
  display: block;
}
* html .fields .row {
  height: 1%;
}
.fields .row.dates {
  display: inline-block;
}
.fields .row.dates.editable {
  color: #4477bb;
  cursor: pointer;
  display: inline-block;
}
.fields .row.dates.editable:hover {
  color: #c74747;
  text-decoration: underline;
}
.fields .row.description value {
  -ms-word-break: break-all;
  word-break: break-word;
}
.fields .row > * {
  font-size: 9pt;
}
.fields .row.flex {
  display: flex;
  flex-direction: row;
}
.fields .row.flex .value {
  flex-grow: 1;
}
.fields .row.flex .value .input {
  width: 100%;
}
.fields .row .placeholder {
  color: #bbbbbb;
  cursor: text;
  display: inline-block;
  float: left;
  height: 0;
  position: relative;
  text-indent: 5px;
  vertical-align: middle;
  white-space: nowrap;
  width: 0px;
  word-break: normal;
  word-wrap: normal;
}
html.rtl .fields .row .placeholder {
  float: right;
}
.fields .row .placeholder .title {
  color: #bbbbbb;
}
.fields .row.filled .placeholder,
.fields .row.focused .placeholder {
  overflow: hidden;
}
.fields .row_weeks {
  display: block;
  margin-top: 6px;
}
.fields .label {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  padding-right: 10px;
  word-wrap: normal;
}
html.rtl .fields .label {
  padding-left: 10px;
  padding-right: 0px;
}
.fields .label.required:before {
  color: red;
  content: "*";
  display: inline-block;
  margin-left: -0.6em;
  width: 0.6em;
}
.fields td.label {
  display: table-cell;
}
.fields .value {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.fields .input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 16px;
  padding: 4px 6px;
  width: 300px;
}
.fields .input.disabled {
  color: #aaa;
}
html.rtl .fields .input {
  margin-left: 16px;
  margin-right: 0px;
}
.fields .input:last-child {
  margin-right: 0px;
}
html.rtl .fields .input:last-child {
  margin-left: 0px;
}
.fields .input[maxlength="2"] {
  width: 3em;
}
.fields .input[maxlength="3"] {
  width: 3.5em;
}
.fields .input[maxlength="4"] {
  width: 4em;
}
.fields .input[maxlength="5"] {
  width: 4.5em;
}
.fields .input[type="checkbox"] {
  width: auto;
}
/* Controls */
.buttons {
  margin-top: 15px;
  text-align: right;
}
html.rtl .buttons {
  text-align: left;
}
.buttons .button {
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font: bold 10pt Helvetica, Tahoma, Arial, sans-serif;
  padding: 5px 12px;
  text-align: center;
  -webkit-transition: background 200ms ease 0s;
  -moz-transition: background 200ms ease 0s;
  -o-transition: background 200ms ease 0s;
  transition: background 200ms ease 0s;
  background: #2db774;
  border: 1px solid #238e5a;
  color: #ffffff;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.buttons .button.disabled {
  cursor: default;
  text-shadow: none !important;
}
.buttons .button:hover {
  text-decoration: none;
}
.buttons .button:hover {
  background: #28a367;
}
.buttons .button.disabled {
  color: #96dbba;
}
.buttons .button.disabled:hover {
  background: #2db774;
}
.buttons .button.secondary_button {
  background: #b1b4c0;
  border: 1px solid #9599a9;
  color: #ffffff;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.buttons .button.secondary_button:hover {
  background: #a3a6b5;
}
.buttons .button.secondary_button.disabled {
  color: #d8dae0;
}
.buttons .button.secondary_button.disabled:hover {
  background: #b1b4c0;
}
.buttons.big_single_button {
  margin: 0;
  text-align: center;
  padding: 10px 16px;
}
.buttons.big_single_button .button {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 5px 0;
}
.buttons.big_single_button.disabled {
  opacity: 0.7;
}
.buttons.big_single_button.disabled .button label {
  cursor: default !important;
}
.buttons.big_single_button .button {
  border-radius: 5px;
  font-size: 13pt;
  font-weight: normal;
}
.buttons > .dropdown > .dropdown_helper > .dropdown_content,
.buttons > .button > .dropdown > .dropdown_helper > .dropdown_content {
  background: #2db774;
  border: 1px solid #238e5a;
  color: #ffffff;
}
.buttons > .dropdown > .dropdown_helper > .dropdown_content .item,
.buttons > .button > .dropdown > .dropdown_helper > .dropdown_content .item {
  text-align: left;
  color: inherit;
  font-size: 16px;
  opacity: 1;
}
.buttons > .dropdown > .dropdown_helper > .dropdown_content .item:hover,
.buttons > .button > .dropdown > .dropdown_helper > .dropdown_content .item:hover {
  background: #28a367;
  color: inherit;
}
.buttons > .dropdown > .dropdown_helper > .dropdown_content .item.disabled,
.buttons > .button > .dropdown > .dropdown_helper > .dropdown_content .item.disabled {
  color: #96dbba;
}
.buttons > .dropdown > .dropdown_helper > .dropdown_content .item.disabled:hover,
.buttons > .button > .dropdown > .dropdown_helper > .dropdown_content .item.disabled:hover {
  background: #2db774;
}
.custom_radio,
.custom_checkbox {
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  line-height: 1;
  margin-right: 4px;
  overflow: hidden;
  vertical-align: text-bottom;
}
html.rtl .custom_radio,
html.rtl .custom_checkbox {
  margin-left: 4px;
  margin-right: 0px;
}
.toolbar .custom_radio,
.toolbar .custom_checkbox {
  vertical-align: middle !important;
}
.custom_radio.disabled,
.custom_checkbox.disabled,
.custom_radio.disabled,
.custom_checkbox.disabled {
  cursor: default;
}
.custom_radio input,
.custom_checkbox input {
  opacity: 0;
  filter: alpha(opacity=0);
  float: left;
  margin-right: -13px;
  margin-top: -30px;
}
html.rtl .custom_radio input,
html.rtl .custom_checkbox input {
  float: right;
}
.custom_radio .icon,
.custom_checkbox .icon {
  background: #ffffff;
  border: 1px solid #b4b5b6;
  border-radius: 2px;
  color: #5a6269;
  display: inline-block;
  height: 13px !important;
  line-height: 13px !important;
  text-align: center;
  vertical-align: top;
  width: 13px !important;
}
.custom_radio .icon:before,
.custom_checkbox .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.custom_radio .icon:before,
.custom_checkbox .icon:before {
  display: inline-block;
  font-size: 10px;
  line-height: inherit;
  vertical-align: baseline;
}
.toolbar .custom_radio .icon:before,
.toolbar .custom_checkbox .icon:before {
  font-size: 12px !important;
  height: 12px !important;
  width: 12px !important;
}
.disabled.custom_radio .icon,
.disabled.custom_checkbox .icon {
  color: #cccccc;
  border: 1px solid #cccccc !important;
  background: #f5f5f5;
}
.custom_checkbox.checked .icon:before {
  content: "\e61c";
}
.custom_radio .icon {
  border-radius: 50%;
}
.custom_radio .icon:before {
  margin: 0 0 0 -1px;
}
.custom_radio.checked .icon:before {
  content: "\e61b";
}
.custom_switcher {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  display: inline-block;
  font-size: 0px;
}
.custom_switcher .text {
  border-right: 1px solid #cccccc;
  display: inline-block !important;
  font-size: 9pt;
  padding: 5px 5px;
}
.custom_switcher label.checked {
  background: #6fa8de;
  color: #ffffff;
  display: inline-block;
}
.custom_switcher label:first-child .text {
  padding-left: 7px;
}
html.rtl .custom_switcher label:first-child .text {
  border: 0px;
  padding-right: 7px;
}
.custom_switcher label:last-child .text {
  border: 0px;
  padding-right: 7px;
}
html.rtl .custom_switcher label:last-child .text {
  border-right: 1px solid #cccccc;
  padding-right: 5px;
}
.custom_switcher input {
  display: none;
}
.input {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0px 4px 3px -3px #e5e5e5 inset;
}
.input.focus,
.input:focus {
  border: 1px solid #ffffff;
  box-shadow: 0px 4px 3px -3px #e5e5e5 inset, 0 0 2px 0 #1d67cd;
}
.scroll-wrap {
  display: block;
  height: 100%;
  max-height: none;
  overflow: hidden;
  position: relative;
}
.scroll-wrap .scroll-inner {
  overflow: hidden;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.scroll-inner::-webkit-scrollbar {
  width: 0px;
}
.scroll-inner {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  height: 100%;
  max-height: inherit;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  top: 0px;
  width: auto !important;
}
.customscroll-scrollbar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  visibility: hidden;
  z-index: 10;
}
.csstransitions .customscroll-scrollbar {
  -webkit-transition: opacity 300ms linear, visibility 0ms linear 300ms;
  -moz-transition: opacity 300ms linear, visibility 0ms linear 300ms;
  -o-transition: opacity 300ms linear, visibility 0ms linear 300ms;
  transition: opacity 300ms linear, visibility 0ms linear 300ms;
}
.customscroll-scrollbar div {
  background: #474c50;
  border-radius: 7px;
  height: 100%;
}
.customscroll-scrollbar-shown {
  opacity: 0.3;
  filter: alpha(opacity=30);
  visibility: visible;
}
.csstransitions .customscroll-scrollbar-shown {
  -webkit-transition: opacity 300ms linear, visibility 0ms linear 0ms;
  -moz-transition: opacity 300ms linear, visibility 0ms linear 0ms;
  -o-transition: opacity 300ms linear, visibility 0ms linear 0ms;
  transition: opacity 300ms linear, visibility 0ms linear 0ms;
}
.customscroll-scrollbar-shown:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.customscroll-scrollbar-horizontal {
  bottom: 4px;
  height: 8px;
  left: 0;
  margin-left: 2px;
}
.customscroll-scrollbar-horizontal div {
  height: 4px;
  margin: 0px;
}
.csstransitions .customscroll-scrollbar-horizontal div {
  -webkit-transition: height 300ms ease 0ms, margin 300ms ease 0ms;
  -moz-transition: height 300ms ease 0ms, margin 300ms ease 0ms;
  -o-transition: height 300ms ease 0ms, margin 300ms ease 0ms;
  transition: height 300ms ease 0ms, margin 300ms ease 0ms;
}
.customscroll-scrollbar-horizontal.customscroll-scrollbar-shown div {
  height: 8px;
  margin: 0px;
}
.csstransitions .customscroll-scrollbar-horizontal.customscroll-scrollbar-shown div {
  -webkit-transition: height 300ms ease 0ms, margin 300ms ease 0ms;
  -moz-transition: height 300ms ease 0ms, margin 300ms ease 0ms;
  -o-transition: height 300ms ease 0ms, margin 300ms ease 0ms;
  transition: height 300ms ease 0ms, margin 300ms ease 0ms;
}
.customscroll-scrollbar.customscroll-scrollbar-vertical {
  margin-right: 0px;
  margin-top: 2px;
  padding: 6px 0px;
  right: 2px;
  text-align: center;
  top: 0;
  width: 12px;
}
html.rtl .customscroll-scrollbar.customscroll-scrollbar-vertical {
  left: 2px;
  right: auto;
}
.customscroll-scrollbar.customscroll-scrollbar-vertical div {
  display: inline-block !important;
  width: 4px;
}
.csstransitions .customscroll-scrollbar.customscroll-scrollbar-vertical div {
  -webkit-transition: width 300ms ease 0ms;
  -moz-transition: width 300ms ease 0ms;
  -o-transition: width 300ms ease 0ms;
  transition: width 300ms ease 0ms;
}
html.rtl .customscroll-scrollbar.customscroll-scrollbar-vertical div {
  margin-left: 2px;
  margin-right: 6px;
}
.customscroll-scrollbar.customscroll-scrollbar-vertical.customscroll-scrollbar-shown div {
  width: 8px;
}
.csstransitions .customscroll-scrollbar.customscroll-scrollbar-vertical.customscroll-scrollbar-shown div {
  -webkit-transition: width 300ms ease 0ms;
  -moz-transition: width 300ms ease 0ms;
  -o-transition: width 300ms ease 0ms;
  transition: width 300ms ease 0ms;
}
.pagination {
  cursor: default;
  display: block;
  text-align: right;
}
html.rtl .pagination {
  text-align: left;
}
.pagination .pages {
  display: inline-block;
  vertical-align: middle;
}
.pagination .item {
  color: #aaaaaa;
  cursor: pointer;
  display: inline-block;
  font-size: 12pt;
  vertical-align: middle;
}
.csstransitions .pagination .item {
  -webkit-transition: color 200ms ease 0s;
  -moz-transition: color 200ms ease 0s;
  -o-transition: color 200ms ease 0s;
  transition: color 200ms ease 0s;
}
.pagination .item:hover {
  color: #777777;
}
.pagination .item.current {
  color: #000000;
  cursor: default;
}
.pagination .item.first,
.pagination .item.last,
.pagination .item.prev,
.pagination .item.next {
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}
.pagination .item.first:before,
.pagination .item.last:before,
.pagination .item.prev:before,
.pagination .item.next:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pagination .item.first:before,
.pagination .item.last:before,
.pagination .item.prev:before,
.pagination .item.next:before {
  display: inline-block;
  font-size: 18px;
  vertical-align: middle;
}
.pagination .item.first:before {
  content: "\e64e";
}
html.rtl .pagination .item.first:before {
  content: "\e64d";
}
.pagination .item.last:before {
  content: "\e64d";
}
html.rtl .pagination .item.last:before {
  content: "\e64e";
}
.pagination .item.prev:before {
  content: "\e64b";
}
html.rtl .pagination .item.prev:before {
  content: "\e64c";
}
.pagination .item.next:before {
  content: "\e64c";
}
html.rtl .pagination .item.next:before {
  content: "\e64b";
}
.pagination .pages .item {
  padding: 0px 2px;
}
.dropdown {
  -webkit-transition: opacity 300ms linear;
  -moz-transition: opacity 300ms linear;
  -o-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
  opacity: 0;
  filter: alpha(opacity=0);
  bottom: 0px;
  cursor: default;
  display: none;
  font-size: 9pt;
  left: -10000px;
  position: absolute;
  position: static\0/;
  z-index: 3002 !important;
  width: 100%;
}
.expand .dropdown {
  opacity: 1;
  filter: alpha(opacity=100);
  display: block;
  left: 0px;
}
html.rtl .expand .dropdown {
  left: auto;
  right: 0px;
}
.dropdown .dropdown_helper {
  left: 0px\0/;
  position: absolute;
  top: 2em\0/;
  z-index: 3002;
}
.dropdown .dropdown_content {
  background: #ffffff;
  border: 1px solid #cbc8c0;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  display: block;
  max-height: 350px;
  min-width: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}
.dropdown .dropdown_content .dropdown_container {
  max-height: 268px;
}
.dropdown .dropdown_content.scroll-wrap {
  overflow: hidden;
}
.dropdown .dropdown_content .item {
  background: none;
  border: 0px;
  border-radius: 0px;
  box-shadow: none;
  color: #626262;
  cursor: pointer;
  display: block;
  height: auto;
  margin: 0px;
  padding: 8px 12px;
  white-space: nowrap;
}
.dropdown .dropdown_content .item:hover {
  background: #f7f7f7;
  color: #626262;
}
.dropdown .dropdown_content .item.disabled {
  color: #aaaaaa;
  cursor: default;
}
.dropdown .dropdown_content .item.disabled:hover {
  background: none;
}
.dropdown .dropdown_content .item.selected {
  color: #333;
  background: #f0f0f0;
}
.dropdown .dropdown_content .item .icon {
  color: inherit;
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.dropdown .dropdown_content .item .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dropdown .dropdown_arrow {
  border-bottom: 6px solid #cbc8c0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: block;
  font-size: 0;
  height: 0px;
  margin: 0px 0px 0px 7px;
  position: relative;
  width: 0px;
  z-index: 1;
}
html.rtl .dropdown .dropdown_arrow {
  margin-left: 0px;
  margin-right: 7px;
  float: left;
}
.dropdown .dropdown_arrow span {
  border-bottom: 5px solid #ffffff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  display: block;
  height: 0px;
  margin-left: -5px;
  position: relative;
  top: 2px;
  width: 0px;
}
html.rtl .dropdown .dropdown_arrow span {
  margin-left: 0px;
  margin-right: -5px;
}
.dropdown .dropdown_arrow.bottom_arrow {
  border-top: 6px solid #cbc8c0;
  border-bottom: 0;
}
.dropdown .dropdown_arrow.bottom_arrow span {
  border-top: 5px solid #ffffff;
  border-bottom: 0;
  margin-top: -9px;
}
.dropdown .folders .item,
.dropdown .folders .item:hover {
  background: none !important;
  color: initial !important;
  padding: 0px;
}
.dropdown .folders .item:first-child,
.dropdown .folders .item:hover:first-child {
  margin-top: 5px;
}
.dropdown .folders .item:last-child,
.dropdown .folders .item:hover:last-child {
  margin-bottom: 5px;
}
.dropdown .folders .folder {
  cursor: pointer;
  display: block;
  padding: 8px 12px 8px 0px;
}
.dropdown .folders .folder:hover {
  background: #f7f7f7;
  color: #626262;
}
.dropdown .folders .folder .title {
  cursor: inherit;
  font-weight: normal;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 12px;
}
.dropdown .folders .folder.disabled,
.dropdown .folders .folder.unselectable {
  background: none;
  cursor: default;
}
.dropdown .folders .folder.disabled .title,
.dropdown .folders .folder.unselectable .title {
  color: #aaaaaa;
}
.custom_selector {
  display: inline-block;
  position: relative;
}
.custom_selector .name {
  display: inline-block;
}
.input.custom_selector .name {
  width: 100%;
}
.custom_selector .control {
  cursor: pointer;
  display: inline-block;
  height: 1em;
  width: 1em;
}
html.rtl .custom_selector .control {
  float: left;
}
.input.custom_selector .control {
  margin-left: -1.5em;
}
.custom_selector .control .icon {
  margin: 0px;
}
.custom_selector .control .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.custom_selector .control .icon:before {
  content: "\e671";
  display: inline-block;
  font-size: 16px;
  margin-top: -0.4ex;
  vertical-align: middle;
}
.custom_selector.expand .control .icon:before {
  content: "\e66e";
}
.custom_selector .dropdown {
  bottom: 0px;
  left: -10000px;
  min-width: 100%;
  position: absolute;
  visibility: hidden;
  z-index: 500;
}
.expand.custom_selector .dropdown {
  left: 0px;
  visibility: visible;
}
.custom_selector .dropdown .dropdown_arrow {
  border-bottom: 6px solid #cbc8c0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: block;
  font-size: 0;
  height: 0px;
  margin: 0px 0px -1px 10px;
  position: relative;
  width: 0px;
}
.right.custom_selector .dropdown .dropdown_arrow {
  float: right;
  margin-left: 0px;
  margin-right: 10px;
}
html.rtl .right.custom_selector .dropdown .dropdown_arrow {
  float: left;
  margin-left: 10px;
  margin-right: 0px;
}
.custom_selector .dropdown .dropdown_arrow span {
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: block;
  height: 0px;
  margin-left: -6px;
  position: relative;
  top: 2px;
  width: 0px;
}
.custom_selector .dropdown_helper {
  position: absolute;
  left: 0px;
  top: 0px;
}
.right.custom_selector .dropdown_helper {
  left: auto;
  right: 0px;
}
html.rtl .right.custom_selector .dropdown_helper {
  right: auto;
  left: 0px;
}
.custom_selector .dropdown_content {
  background: #ffffff;
  border: 1px solid #cbc8c0;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  display: inline-block;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  text-align: left;
}
html.rtl .custom_selector .dropdown_content {
  text-align: right;
}
.ui-autocomplete {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: auto;
}
.ui-autocomplete li {
  position: relative;
}
.ui-autocomplete.ui-front {
  z-index: 2001;
}
.ui-autocomplete.ui-menu .ui-menu-item {
  display: block;
}
.ui-autocomplete.ui-menu .ui-menu-item a {
  overflow: hidden;
  white-space: nowrap;
}
.ui-autocomplete.ui-menu .ui-menu-item a .menu-item-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.user_group,
.ui-autocomplete.ui-menu .ui-menu-item a span.all_users_group,
.ui-autocomplete.ui-menu .ui-menu-item a span.contact_group {
  color: #8d8d8d;
  font-size: 18px;
  line-height: 16px;
  margin-right: 3px;
  text-shadow: 0 1px 0 #ffffff, 0 0 0 #c8c8c8;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.user_group:before,
.ui-autocomplete.ui-menu .ui-menu-item a span.all_users_group:before,
.ui-autocomplete.ui-menu .ui-menu-item a span.contact_group:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.user_group:before {
  content: "\e667";
}
.ui-autocomplete.ui-menu .ui-menu-item a span.all_users_group:before {
  content: "\e619";
}
.ui-autocomplete.ui-menu .ui-menu-item a span.contact_group:before {
  content: "\e64f";
}
.ui-autocomplete.ui-menu .ui-menu-item a span.del {
  color: #d8d8d8;
  position: absolute;
  right: 3px;
  text-shadow: 0 1px 0 #ffffff, 0 0 0 #c8c8c8;
  top: 6px;
  visibility: hidden;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.del:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.del:before {
  content: "\e63e";
}
.ui-autocomplete.ui-menu .ui-menu-item a span.key {
  position: absolute;
  text-shadow: 0 1px 0 #ffffff, 0 0 0 #c8c8c8;
  top: 6px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.key:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ui-autocomplete.ui-menu .ui-menu-item a span.key:before {
  content: "\e658";
}
.ui-autocomplete.ui-menu .ui-menu-item.menu-item-group a .menu-item-label {
  max-width: calc(100% - 22px);
}
.ui-autocomplete.ui-menu .ui-menu-item.menu-item-has-key a .menu-item-label {
  max-width: calc(100% - 12px);
}
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active span.del {
  visibility: visible;
}
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active span.del:hover {
  box-shadow: none;
  color: #676767;
}
.ui-autocomplete.ui-menu .ui-menu-item.disabled a {
  color: #8f8d8d;
}
.ui-autocomplete.ui-menu .ui-menu-item.disabled a.ui-state-active {
  background: white;
  border: none;
  cursor: default;
}
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active span.key {
  top: 7px;
}
.ui-autocomplete .ui-state-active {
  background: #f1f1f1;
  border-color: #f1f1f1;
}
.ui-datepicker .ui-widget-header {
  background: none;
  border: none;
}
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
  background: none;
  border: none;
}
.ui-datepicker .ui-datepicker-today {
  background: #fff4cf;
}
.ui-widget-content a:hover {
  color: inherit;
}
.items_list.simple_list {
  background: #fafafa none repeat scroll 0 0;
  border: 1px solid #d5d9dc;
  border-radius: 4px;
  margin: 0 20px 20px;
  overflow: hidden;
  clear: both;
}
.items_list.simple_list:after {
  /*Opera*/
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html > body .items_list.simple_list {
  width: 100%;
  display: block;
}
* html .items_list.simple_list {
  /* IE 6 */
  height: 1%;
}
.items_list.simple_list .item {
  border-bottom: 1px solid #d5d9dc;
  color: #626262;
  cursor: pointer;
  padding: 6px 10px;
}
.items_list.simple_list .item:hover {
  background: #f3f3f3;
}
.items_list.simple_list .item:last-child {
  border-bottom: 0px;
}
.items_list.simple_list .item .title {
  margin: 0;
}
.items_list.simple_list .item.selected,
.items_list.simple_list .item.heading {
  background: #f1f1f1 none repeat scroll 0 0;
  color: #4d4d4d;
  font-weight: bold;
}
.items_list.simple_list .item .button {
  background: none repeat scroll 0 0 #6fa8de;
  border: 1px solid #5d97cd;
  border-radius: 4px 4px 4px 4px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 9pt !important;
  padding: 1px 5px;
  text-shadow: 0 1px 0 #4d759b;
}
.items_list.simple_list .button {
  float: right;
}
.items_list.simple_list .title {
  display: inline-block;
  font-size: 9pt;
  padding: 0px;
}
.items_list.simple_list .buttons {
  margin: 15px 0px;
}
.items_list.simple_list .buttons .button {
  font-size: 10pt;
}
.attachments .children {
  background: #e4e4e4;
  border-radius: 1px;
  box-shadow: 0 0 0 8px #e4e4e4;
  margin: 10px 0px 5px;
}
.attachments .children .children {
  background: #cbcbcb;
  box-shadow: 0 0 0 8px #cbcbcb;
}
.attachments .children .children .children {
  background: #b1b1b1;
  box-shadow: 0 0 0 8px #b1b1b1;
}
.attachments .children .children .children .size {
  color: #777777;
}
.attachments .children .children .children .children {
  background: #989898;
  box-shadow: 0 0 0 8px #989898;
}
.attachments .children .children .children .children .title {
  color: #000000;
}
.attachments .children .children .children .children .size {
  color: #555555;
}
.attachments .expanded {
  background: #e4e4e4;
  box-shadow: 0 0 0 8px #e4e4e4;
}
.attachments .expanded .expanded {
  box-shadow: 0 0 0 8px #c2c2c2;
  background: #c2c2c2;
}
.attachments .item {
  background: inherit;
  border-radius: 1px;
  display: block;
  margin: 0 16px 20px 0;
  max-height: inherit;
  overflow: visible;
  vertical-align: top;
  width: 136px;
}
.attachments .item:last-child {
  margin-bottom: 0px;
}
.attachments .item.fail {
  opacity: 0.3;
}
.csstransitions .attachments .item.fail {
  -webkit-transition: opacity 1000ms ease 1s;
  -moz-transition: opacity 1000ms ease 1s;
  -o-transition: opacity 1000ms ease 1s;
  transition: opacity 1000ms ease 1s;
}
.attachments .item .item_content {
  background: #ffffff;
  border: 0px;
  border-radius: 3px;
  box-shadow: 0 2px 6px #ccc;
  display: block;
  margin-bottom: 6px;
  padding: 9px 9px 7px;
}
.attachments .item .cancel {
  display: none;
}
.upload.attachments .item .cancel,
.attachments .item.incomplete .cancel {
  background: #e84d49;
  color: #ffffff;
  cursor: pointer;
  display: block;
  float: right;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  margin-left: -18px;
  overflow: hidden;
  position: relative;
  right: -18px;
  text-align: center;
  top: -18px;
  width: 18px;
  z-index: 10;
}
.upload.attachments .item .cancel:before,
.attachments .item.incomplete .cancel:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.upload.attachments .item .cancel:before,
.attachments .item.incomplete .cancel:before {
  content: "\e63e";
  display: inline-block;
  height: 100%;
  line-height: inherit;
  width: 100%;
}
.upload.attachments .item .cancel {
  background: #e84d49;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: block;
  float: right;
  font-size: 12px;
  height: 14px;
  margin-left: -14px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 10;
}
.attachments .item.incomplete .cancel {
  border-radius: 3px;
  right: 2px;
  top: 2px;
}
.upload.attachments .item .cancel:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.upload.attachments .item .cancel:before {
  content: "\e63e";
}
.attachments .item .footer {
  min-height: 22px;
}
.attachments .item .progress {
  display: block;
  height: 3px;
  padding: 8px 0px;
  width: 100%;
}
.attachments .item .progress span {
  display: block;
  height: 3px;
  background: #ef4a4a;
}
.attachments .item .progress .progress-percent {
  display: block;
  background: none;
  text-align: center;
  font-size: 8pt;
  color: #000000 !important;
}
.attachments .item .image {
  border-bottom: 1px solid #dedede;
  display: block;
  min-height: 100px;
  overflow: hidden;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
.attachments .item .image:after {
  content: "";
  display: inline-block;
  min-height: inherit;
  vertical-align: middle;
}
.attachments .item .image img {
  background: #ffffff;
  left: 50%;
  max-height: 100px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}
.attachments .item.has_child > .item_content > .image {
  display: none;
}
.attachments .item .text {
  color: #c7c7c7;
  display: inline-block;
  font-size: 18pt;
  margin: 36px 0px 0px;
  text-transform: uppercase;
}
.attachments .item .icon {
  margin: 15px 0px 0px !important;
  vertical-align: top;
}
.attachments .item .has_action {
  cursor: pointer;
}
.attachments .item .title {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-weight: bold;
  max-height: 2.5em;
  overflow: hidden;
  padding: 0px 43px 0px 8px;
  white-space: normal;
  width: 100%;
  word-wrap: break-word;
}
.attachments .item .title.entire_line {
  padding: 0px 8px 0px 8px;
}
.attachments .item .title .name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.attachments .item .ext {
  display: inline-block;
}
.attachments .item .size {
  color: #929292;
  float: right;
  margin: 0px 8px -5em 0px;
}
.attachments .item .status_text {
  display: block;
  margin: 0;
  padding: 6px 0px 0px;
  white-space: normal;
}
.attachments .item.fail .status_text {
  color: #ff0000;
}
.attachments .item.success .status_text {
  color: #308F00;
}
.attachments .item .buttons {
  clear: both;
  display: block;
  margin: 0;
  padding: 6px 0px 0px;
  text-align: left;
}
.attachments .item .buttons:after {
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html > body .attachments .item .buttons {
  width: 100%;
  display: block;
}
* html .attachments .item .buttons {
  height: 1%;
}
.attachments .item .buttons .button {
  background: none;
  border: 0px;
  color: #4477bb;
  font-size: 9pt;
  font-weight: normal;
  padding: 0px;
  text-shadow: none;
  float: left;
  text-align: left;
}
html.rtl .attachments .item .buttons .button {
  float: right;
  text-align: right;
}
.attachments .item .buttons .button.open,
.attachments .item .buttons .button.download {
  float: right;
  text-align: right;
}
html.rtl .attachments .item .buttons .button.open,
html.rtl .attachments .item .buttons .button.download {
  float: left;
  text-align: left;
}
.report_panel {
  height: 0px;
  overflow: visible;
  position: fixed;
  text-align: center;
  top: 0px;
  visibility: visible;
  width: 100%;
  z-index: 3000;
}
.report_panel a {
  text-shadow: none;
  white-space: nowrap;
}
.report_panel.error {
  z-index: 2999;
}
.report_panel.hide {
  visibility: hidden;
}
.csstransitions .report_panel {
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-transition: visibility 0ms linear 0ms;
  -moz-transition: visibility 0ms linear 0ms;
  -o-transition: visibility 0ms linear 0ms;
  transition: visibility 0ms linear 0ms;
}
.csstransitions .report_panel.hide {
  -webkit-transition: visibility 0ms linear 500ms;
  -moz-transition: visibility 0ms linear 500ms;
  -o-transition: visibility 0ms linear 500ms;
  transition: visibility 0ms linear 500ms;
}
.report_panel .content {
  background: #f9f9f9;
  border: 1px solid #c3c3c3;
  border-top: 0px;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 1px 2px 0px #bbb;
  display: inline-block;
  font-weight: bold;
  max-width: 20%;
  padding: 15px 30px 10px;
  text-align: left;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 1;
  filter: alpha(opacity=100);
}
@media screen and (max-width: 768px) {
  .report_panel .content {
    max-width: 80%;
  }
}
.csstransitions .report_panel .content {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -webkit-transition: all 200ms ease 0s;
  -moz-transition: all 200ms ease 0s;
  -o-transition: all 200ms ease 0s;
  transition: all 200ms ease 0s;
}
.hide.report_panel .content {
  opacity: 0;
  filter: alpha(opacity=0);
}
.csstransitions .hide.report_panel .content {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transition: all 200ms ease 0s;
  -moz-transition: all 200ms ease 0s;
  -o-transition: all 200ms ease 0s;
  transition: all 200ms ease 0s;
}
.loading.report_panel .content {
  color: #ffffff;
  background: #dac073;
  border-color: #c5ac60;
}
.loading.report_panel .content a {
  color: #332808;
}
.report.report_panel .content {
  color: #ffffff;
  background: #96c671;
  border-color: #82b35d;
}
.error.report_panel .content {
  color: #ffffff;
  background: #f47474;
  border-color: #e26464;
}
.report.report_panel .content .close,
.error.report_panel .content .close {
  cursor: pointer;
  height: 16px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 16px;
}
.report.report_panel .content .close:before,
.error.report_panel .content .close:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.report.report_panel .content .close:before,
.error.report_panel .content .close:before {
  content: "\e63e";
  display: inline-block;
  font-size: 16px;
}
.gray.report_panel .content {
  background: #cccccc;
  border-color: #a9a9a9;
}
.report_panel .content .icon {
  display: none;
  float: left;
  height: 17px;
  margin-left: -23px;
  width: 16px;
}
.popup {
  display: none;
  height: 100%;
  left: 0px;
  position: fixed;
  text-align: center;
  top: 0px;
  width: 100%;
  z-index: 2000;
  white-space: nowrap;
}
.popup.visible {
  display: block;
}
.popup.visible .mask {
  opacity: 0.2;
}
.popup .mask {
  background: #000000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  -webkit-transition: opacity 200ms linear;
  -moz-transition: opacity 200ms linear;
  -o-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.popup .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}
.popup_panel {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
  display: inline-block;
  max-width: 50%;
  min-width: 270px;
  max-height: 100%;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
html.rtl .popup_panel {
  text-align: right;
}
.popup_panel .close {
  cursor: pointer;
  display: none;
  float: right;
  height: 30px;
  margin: -30px -30px 0 0;
  width: 30px;
}
html.rtl .popup_panel .close {
  float: left;
}
.popup_panel .popup_heading {
  display: block;
  font-weight: bold;
  font-size: 12pt;
  margin-bottom: 20px;
}
.popup_panel .text {
  display: block;
}
.popup_panel .label {
  width: 150px;
}
.popup.player_popup.visible .mask {
  opacity: 0.8;
}
.popup.player_popup .popup_panel {
  background: none;
  border-radius: 0;
  box-shadow: none;
  max-width: inherit;
  min-width: inherit;
  padding: 0;
}
/*=== Files CSS ===*/
.file {
  position: relative;
}
.file .icon {
  background-image: url("../../images/sprites.png");
  background-repeat: no-repeat;
  background-position: 0px -360px;
  display: inline-block;
  height: 32px;
  width: 32px;
}
.large .file .icon {
  background-position: 0px -400px;
  height: 64px;
  width: 64px;
}
.file .icon.xls,
.file .icon.xlsx {
  background-position: -80px -360px;
}
.large .file .icon.xls,
.large .file .icon.xlsx {
  background-position: -160px -400px;
}
.file .icon.pdf {
  background-position: -200px -360px;
}
.large .file .icon.pdf {
  background-position: -400px -400px;
}
.file .icon.htm,
.file .icon.html {
  background-position: -360px -360px;
}
.large .file .icon.htm,
.large .file .icon.html {
  background-position: -720px -400px;
}
.file .icon.doc,
.file .icon.docx {
  background-position: -40px -360px;
}
.large .file .icon.doc,
.large .file .icon.docx {
  background-position: -80px -400px;
}
.file .icon.rtf,
.file .icon.txt {
  background-position: -120px -360px;
}
.large .file .icon.rtf,
.large .file .icon.txt {
  background-position: -240px -400px;
}
.file .icon.ppt,
.file .icon.pptx,
.file .icon.pps {
  background-position: -400px -360px;
}
.large .file .icon.ppt,
.large .file .icon.pptx,
.large .file .icon.pps {
  background-position: -800px -400px;
}
.file .icon.png,
.file .icon.gif,
.file .icon.bmp,
.file .icon.tiff,
.file .icon.jpg,
.file .icon.jpeg {
  background-position: -320px -360px;
}
.large .file .icon.png,
.large .file .icon.gif,
.large .file .icon.bmp,
.large .file .icon.tiff,
.large .file .icon.jpg,
.large .file .icon.jpeg {
  background-position: -640px -400px;
}
.file .icon.zip,
.file .icon.\37 z,
.file .icon.cab,
.file .icon.tar,
.file .icon.tgz,
.file .icon.gz,
.file .icon.rar {
  background-position: -480px -360px;
}
.large .file .icon.zip,
.large .file .icon.\37 z,
.large .file .icon.cab,
.large .file .icon.tar,
.large .file .icon.tgz,
.large .file .icon.gz,
.large .file .icon.rar {
  background-position: -960px -400px;
}
.file .icon.psd {
  background-position: -520px -360px;
}
.large .file .icon.psd {
  background-position: -1040px -400px;
}
.file .icon.ics {
  background-position: -560px -360px;
}
.large .file .icon.ics {
  background-position: -1120px -400px;
}
.file .icon.vcf,
.file .icon.vcard {
  background-position: -600px -360px;
}
.large .file .icon.vcf,
.large .file .icon.vcard {
  background-position: -1200px -400px;
}
.file .icon.eml,
.file .icon.msg {
  background-position: -640px -360px;
}
.large .file .icon.eml,
.large .file .icon.msg {
  background-position: -1280px -400px;
}
.file .icon.mp3,
.file .icon.amr,
.file .icon.aac,
.file .icon.aif,
.file .icon.aifc,
.file .icon.aiff,
.file .icon.ogg,
.file .icon.wma,
.file .icon.flac,
.file .icon.ape,
.file .icon.wax,
.file .icon.midi,
.file .icon.mp4a,
.file .icon.weba,
.file .icon.ra,
.file .icon.ram,
.file .icon.rmp,
.file .icon.m3u,
.file .icon.wav,
.file .icon.soundcloud {
  background-position: -240px -360px;
}
.large .file .icon.mp3,
.large .file .icon.amr,
.large .file .icon.aac,
.large .file .icon.aif,
.large .file .icon.aifc,
.large .file .icon.aiff,
.large .file .icon.ogg,
.large .file .icon.wma,
.large .file .icon.flac,
.large .file .icon.ape,
.large .file .icon.wax,
.large .file .icon.midi,
.large .file .icon.mp4a,
.large .file .icon.weba,
.large .file .icon.ra,
.large .file .icon.ram,
.large .file .icon.rmp,
.large .file .icon.m3u,
.large .file .icon.wav,
.large .file .icon.soundcloud {
  background-position: -480px -400px;
}
.file .icon.avi,
.file .icon.mp4,
.file .icon.mkv,
.file .icon.wmv,
.file .icon.vimeo,
.file .icon.youtube {
  background-position: -680px -360px;
}
.large .file .icon.avi,
.large .file .icon.mp4,
.large .file .icon.mkv,
.large .file .icon.wmv,
.large .file .icon.vimeo,
.large .file .icon.youtube {
  background-position: -1360px -400px;
}
.file .icon.url {
  background-position: -720px -360px;
}
.large .file .icon.url {
  background-position: -1440px -400px;
}
.file .icon.play {
  background: none;
  border-radius: 31px;
  color: #ffffff !important;
  cursor: pointer;
  font-size: 50px;
  height: 50px;
  left: 50%;
  opacity: 0.9;
  position: absolute;
  top: 37%;
  transform: translate(-50%, -50%);
  width: 50px;
}
.file .icon.play:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.file .icon.play:hover {
  opacity: 1;
}
.file .icon.play:before {
  border-radius: 31px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
  content: "\e677";
  display: block;
  overflow: hidden;
}
.inline_popup {
  background-color: #f7f7f7;
  border: solid 1px #cccccc;
  border-radius: 2px;
  padding: 4px 8px;
  position: absolute;
}
.inline_popup.image_tooltip {
  opacity: 0.7;
  filter: alpha(opacity=70);
  border: solid 1px #eeeeee;
  margin: 10px 0px 0px 10px;
}
.inline_popup .button {
  border-right: 1px solid #cccccc;
  color: #4477bb;
  cursor: pointer;
  margin: 0px 8px;
  padding-right: 8px;
  text-decoration: underline;
}
.inline_popup .button:last-child {
  border-right: 0px;
  margin: 0px;
  padding-right: 0px;
}
.inline_popup .button:hover {
  text-decoration: none;
}
.inline_popup input {
  width: 300px;
}
/*=== Common blocks part ===*/
.search_block {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 0px;
  height: 100%;
  padding-right: 20px;
  vertical-align: middle;
  width: 100%;
}
html.rtl .search_block {
  padding-left: 20px;
  padding-right: 0px;
}
.search_block > .input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: none;
  display: inline-block;
  height: 100%;
  min-height: 26px;
  outline: none;
  overflow: hidden;
  padding-left: 30px;
  padding-top: 3px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}
html.rtl .search_block > .input {
  padding-left: 0px;
  padding-right: 30px;
}
.search_block > .input.focus {
  border: 1px solid #93b5e3;
  box-shadow: 0 0 2px 0 #1d67cd;
}
.search_block > .input .row {
  border: 0px;
  display: inline-block;
  font-size: 11pt;
  line-height: 160%;
  overflow: hidden;
  padding: 0px;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}
.search_block > .input .field {
  border: 0px;
  display: inline-block;
  font-size: 11pt;
  height: 20px;
  opacity: 1;
  overflow: hidden;
  padding: 0px;
  vertical-align: middle;
  visibility: visible;
  white-space: nowrap;
  width: 100%;
  -webkit-transition: opacity 500ms ease 0ms, visibility 500ms linear 10ms;
  -moz-transition: opacity 500ms ease 0ms, visibility 500ms linear 10ms;
  -o-transition: opacity 500ms ease 0ms, visibility 500ms linear 10ms;
  transition: opacity 500ms ease 0ms, visibility 500ms linear 10ms;
}
.search_block > .input .field.hide {
  display: block;
  position: absolute;
  top: -200px;
}
.search_block > .input .icon.search {
  display: inline-block;
  font-size: 11pt;
  height: 24px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  vertical-align: top;
  width: 30px;
}
html.rtl .search_block > .input .icon.search {
  left: initial;
  right: 0;
}
.search_block > .input .icon.search:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.search_block > .input .icon.search:before {
  color: #cccccc;
  content: "\e628";
  display: block;
  font-size: 32px;
  height: 20px;
  margin: 0px 0px 5px 0px;
  width: 20px;
}
html.rtl .search_block > .input .icon.search:before {
  margin: 3px 5px 0px 0px;
}
.search_block .expand .field {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 500ms ease 0ms, visibility 10ms linear 500ms;
  -moz-transition: opacity 500ms ease 0ms, visibility 10ms linear 500ms;
  -o-transition: opacity 500ms ease 0ms, visibility 10ms linear 500ms;
  transition: opacity 500ms ease 0ms, visibility 10ms linear 500ms;
}
.search_block .control .icon {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  margin-top: -6px;
  vertical-align: top;
  width: 20px;
}
.search_block .control .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.search_block .control .icon:before {
  color: #cccccc;
  content: "\e66d";
  display: inline-block;
  font-size: 18px;
  height: 20px;
  margin: 10px 2px 0px;
  width: 20px;
}
.search_block .control .icon.expand:before {
  content: "\e66e";
}
.search_block .search_highlight {
  color: #cccccc;
}
.search_block .expand .extended {
  opacity: 1;
  max-height: 200px;
  visibility: visible;
  -webkit-transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 0s linear 0s;
  -moz-transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 0s linear 0s;
  -o-transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 0s linear 0s;
  transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 0s linear 0s;
}
.search_block .extended {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 10ms  linear 2s;
  -moz-transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 10ms  linear 2s;
  -o-transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 10ms  linear 2s;
  transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s, visibility 10ms  linear 2s;
  max-height: 0px;
  display: block;
  margin-top: -24px;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  width: 100%;
}
.search_block .extended .search_fieldset {
  display: block;
  white-space: normal;
}
.search_block .extended .search_fieldset .section {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  padding-right: 20px;
  vertical-align: top;
  width: 50%;
}
html.rtl .search_block .extended .search_fieldset .section {
  padding-left: 20px;
  padding-right: 0px;
}
.search_block .extended .search_fieldset .section .row {
  display: block;
  height: 28px;
  line-height: 230%;
  overflow: visible;
  padding-right: 2px;
}
html.rtl .search_block .extended .search_fieldset .section .row {
  padding-left: 2px;
  padding-right: 0px;
}
.search_block .extended .search_fieldset .section .row.text {
  border-bottom: 1px dashed #c5c7c8;
}
.search_block .extended .search_fieldset .section .row.attachments .custom_checkbox {
  line-height: 1;
  margin: 0;
  margin-bottom: 1px;
  vertical-align: middle;
}
.search_block .extended .search_fieldset .section .row.attachments .attachment_name {
  display: inline-block;
}
.search_block .extended .search_fieldset .section .row .date {
  display: inline-block;
  margin-left: 0px;
  padding: 0;
}
html.rtl .search_block .extended .search_fieldset .section .row .label {
  text-align: right;
}
.search_block .extended .search_fieldset .section .row .input {
  border: none;
  border-radius: 0px;
  box-shadow: none;
  color: #555566;
  font: normal 11pt Helvetica, Tahoma, Arial, sans-serif;
  padding: 0;
  width: 100%;
}
.search_block .extended .search_fieldset .section.attachments {
  display: block;
  width: 100%;
}
.search_block .extended .search_fieldset .buttons {
  border-top: 1px solid #eae7e7;
  display: block;
  margin: 0px 18px 0px 0px;
  padding: 10px 0px;
  width: auto;
}
html.rtl .search_block .extended .search_fieldset .buttons {
  margin: 0px 0px 0px 18px;
  padding-left: 0px;
}
.search_block .extended .search_fieldset .button {
  display: inline-block;
}
.quick_reply {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffffff;
  bottom: 0px;
  max-height: 190px;
  padding: 0px 23px 0px 17px;
}
html.rtl .quick_reply {
  padding: 0px 17px 0px 23px;
}
.no-csstransitions .quick_reply {
  margin-bottom: -2px;
  max-height: 86px;
}
.csstransitions .quick_reply {
  -webkit-transition: max-height 500ms ease 50ms;
  -moz-transition: max-height 500ms ease 50ms;
  -o-transition: max-height 500ms ease 50ms;
  transition: max-height 500ms ease 50ms;
}
.csstransitions .quick_reply.saving {
  max-height: 0 !important;
}
.csstransitions .quick_reply.sending {
  max-height: 30px !important;
}
.csstransitions .quick_reply.sending .status {
  max-height: 30px;
  opacity: 1;
}
.quick_reply .status {
  background: #dac073;
  margin-left: -17px;
  margin-bottom: -6px;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  padding: 5px 17px;
  width: 101%;
}
.csstransitions .quick_reply .status {
  -webkit-transition: max-height 300ms ease 50ms, opacity 300ms ease 50ms;
  -moz-transition: max-height 300ms ease 50ms, opacity 300ms ease 50ms;
  -o-transition: max-height 300ms ease 50ms, opacity 300ms ease 50ms;
  transition: max-height 300ms ease 50ms, opacity 300ms ease 50ms;
}
.quick_reply .status .text {
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.quick_reply .row {
  margin-top: 20px;
  white-space: nowrap;
}
.quick_reply .row .placeholder {
  font-size: 11pt;
  padding-top: 6px;
  text-indent: 9px;
}
.quick_reply .row textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
  color: #000000;
  font-size: 11pt;
  height: 50px;
  outline: none;
  padding: 6px 8px;
  resize: none;
  width: 100%;
}
.csstransitions .quick_reply .row textarea {
  -webkit-transition: height 300ms ease;
  -moz-transition: height 300ms ease;
  -o-transition: height 300ms ease;
  transition: height 300ms ease;
}
.active.quick_reply .row textarea {
  font-family: Tahoma, sans-serif;
  font-size: 16px;
  height: 101px;
}
.quick_reply .buttons {
  margin-bottom: 0px;
  margin-top: 15px;
  padding-bottom: 20px;
  text-align: left;
}
html.rtl .quick_reply .buttons {
  text-align: right;
}
.quick_reply .buttons .button {
  margin-right: 6px;
}
html.rtl .quick_reply .buttons .button {
  margin-left: 6px;
  margin-right: 0px;
}
.quick_reply .buttons .full_form {
  float: right;
  height: 0px;
  margin-top: 6px;
}
html.rtl .quick_reply .buttons .full_form {
  float: left;
}
.csstransitions .quick_reply .buttons {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0px;
  /* important: 50ms delay fix click on buttons*/
  -webkit-transition: all 300ms ease 50ms;
  -moz-transition: all 300ms ease 50ms;
  -o-transition: all 300ms ease 50ms;
  transition: all 300ms ease 50ms;
}
.csstransitions .quick_reply.active .buttons {
  margin-bottom: 20px;
  max-height: 25px;
  opacity: 1;
  overflow: visible;
}
.csstransitions .quick_reply.sending .buttons {
  margin-top: 0px;
  margin-bottom: 0px;
  max-height: 0px;
  opacity: 0;
}
.csstransitions .quick_reply.sending .row {
  margin-top: 0px;
  margin-bottom: 0px;
  max-height: 0px;
  opacity: 0;
}
/*=== Tabsbar CSS ===*/
.tabsbar {
  height: 70px;
  padding: 0px 5px;
  position: relative;
  z-index: 1000;
}
.tabsbar > .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.tabsbar .item {
  color: #503d68;
  display: inline-block;
  font-size: 10.6pt;
  line-height: 120%;
  position: relative;
  text-shadow: none;
  vertical-align: middle;
}
.cssanimations .tabsbar .item.recivedAnim {
  border-radius: 4px;
  -webkit-animation: highlight 0.5s linear;
  -moz-animation: highlight 0.5s linear;
  animation: highlight 0.5s linear;
}
.tabsbar .item.logo {
  display: none;
  outline: none;
}
.tabsbar .item.emails {
  cursor: default;
}
.tabsbar .item.emails.has_control .helper {
  padding-right: 24px;
}
.tabsbar .item.emails .icon {
  display: none;
}
.tabsbar .item .link {
  color: inherit;
  display: inline-block;
  outline: none;
  position: relative;
  text-decoration: none;
  vertical-align: middle;
}
.tabsbar .item.expand a,
.tabsbar .item .control {
  z-index: 3003;
}
.tabsbar .item .helper {
  font-weight: bold;
  display: block;
  height: 0;
  overflow: hidden;
  position: relative;
  top: -40px;
  visibility: hidden;
}
.tabsbar .item .unseen {
  border-radius: 7px;
  font-size: 6.4pt;
  height: 11px;
  line-height: 12px;
  position: absolute;
  text-align: center;
  text-shadow: none;
}
.tabsbar .item .unseen.one {
  right: -10px;
  width: 11px;
}
.tabsbar .item .unseen.two {
  right: -15px;
  width: 16px;
}
.tabsbar .item .unseen.three {
  width: 21px;
  right: -20px;
}
.tabsbar .control {
  cursor: pointer;
  display: inline-block;
  height: 16px;
  padding: 0px;
  position: relative;
  vertical-align: middle;
  width: 14px;
}
.tabsbar .control:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tabsbar .control:before {
  content: "\e66d";
  font-size: 18px;
}
.tabsbar .expand .control:before {
  content: "\e66e";
}
.tabsbar .spacer {
  padding: 10px;
  flex-grow: 1;
}
.tabsbar .mobile,
.tabsbar .settings,
.tabsbar .logout {
  font-size: 8pt;
  order: 100;
}
.tabsbar .logout span {
  cursor: pointer;
}
.tabsbar .specified-logo {
  outline: none;
}
.tabsbar .specified-logo img {
  max-height: 62px;
}
.tabsbar .dropdown_helper {
  min-width: 100%;
}
.tabsbar .dropdown_arrow {
  display: none;
}
.tabsbar .dropdown_content {
  background: #ffffff;
  border: 1px solid #cccccc;
  color: #555555;
  display: block;
  margin: -30px 0px 0px -2px;
  min-width: 100%;
  padding: 30px 0px 0px 0px;
}
.tabsbar .dropdown_content .item {
  color: inherit;
  display: block;
  margin: 0px;
  padding: 6px 10px;
  font-weight: normal;
}
.tabsbar .dropdown_content .item:hover {
  background: #eeeeee;
}
/* IE9 do not support flex-wrap and flex-direction */
.no-flexwrap .tabsbar .item {
  margin-top: 24px;
}
.no-flexwrap .tabsbar .spacer {
  display: none;
}
.no-flexwrap .tabsbar .item.mobile,
.no-flexwrap .tabsbar .item.settings,
.no-flexwrap .tabsbar .item.logout {
  float: right;
}
.volumer {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  margin-top: 6px;
  padding: 0px 40px;
  text-align: center;
  width: 100%;
  color: #3ba7b6;
}
.volumer .volumer_container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #2D476E;
  border-radius: 3px;
  display: block;
  padding: 2px;
}

.volumer .used {
  background: #668eb8;
  display: block;
  height: 3px;
}
.custom_tooltip {
  height: auto;
  margin: 0 6px;
  opacity: 0.9;
  position: fixed;
  width: auto;
  z-index: 5000;
}
.custom_tooltip .custom_tooltip_arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: block;
  font-size: 0;
  height: 0;
  margin: 0 0 0 16px;
  position: relative;
  width: 0;
}
.custom_tooltip .custom_tooltip_arrow.top {
  border-bottom: 6px solid #424e54;
}
.custom_tooltip .custom_tooltip_arrow.bottom_arrow {
  border-top: 6px solid #424e54;
}
.custom_tooltip .custom_tooltip_text {
  background: #424e54;
  border: 1px solid #424e54;
  border-radius: 4px;
  color: white;
  display: block;
  font-size: 12px;
  font-family: Verdana;
  padding: 6px;
  white-space: nowrap;
}
span.address_capsule,
li.address_capsule {
  cursor: pointer;
  box-shadow: none;
  border-radius: 11px;
  margin: 2px 4px 0 0;
  overflow: hidden;
  padding: 3px 28px 3px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
span.address_capsule .ficon,
li.address_capsule .ficon {
  font-size: 16px;
  margin: 0px 12px 0px 0px;
  outline: none;
  padding: 1px;
  position: absolute;
  right: 0;
  text-decoration: none;
}
span.address_capsule span.address_capsule_key,
li.address_capsule span.address_capsule_key {
  margin: -1px;
}
span.address_capsule span.address_capsule_key:after,
li.address_capsule span.address_capsule_key:after {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
span.address_capsule span.address_capsule_key:after,
li.address_capsule span.address_capsule_key:after {
  color: green;
  vertical-align: middle;
  text-shadow: 0 0 1px grey;
}
span.address_capsule span.address_capsule_key.address_capsule_key_unset:after,
li.address_capsule span.address_capsule_key.address_capsule_key_unset:after {
  content: "\e658";
}
span.address_capsule span.address_capsule_key.address_capsule_key_encrypt:after,
li.address_capsule span.address_capsule_key.address_capsule_key_encrypt:after {
  content: "\e91b";
}
span.address_capsule span.address_capsule_key.address_capsule_key_not_encrypt:after,
li.address_capsule span.address_capsule_key.address_capsule_key_not_encrypt:after {
  color: orange;
  content: "\e91a";
}
span.address_capsule span.address_capsule_key.address_capsule_key_sign:after,
li.address_capsule span.address_capsule_key.address_capsule_key_sign:after {
  content: "\e91c";
}
span.address_capsule .ficon,
li.address_capsule .ficon {
  color: #5b9bcd;
}
span.address_capsule.inputosaurus-selected,
li.address_capsule.inputosaurus-selected {
  background: #5b9bcd;
  color: #ffffff;
}
span.address_capsule.inputosaurus-selected .ficon,
li.address_capsule.inputosaurus-selected .ficon {
  color: #ffffff;
}
span.address_capsule {
  display: inline-block;
  font-size: 11pt;
  line-height: 20px;
  margin: 0px 0px 4px;
  position: relative;
  vertical-align: middle;
}
span.address_capsule:not(.found_contact) {
  cursor: default;
}
span.address_capsule.found_contact {
  padding-right: 12px;
}
span.address_capsule .add_contact {
  bottom: 5px;
  position: absolute;
  right: 8px;
}
/*=== Screen overrides part ===*/
html {
  height: 100%;
  min-width: 800px;
  min-height: 600px;
}
body {
  font: normal 9pt Helvetica, Tahoma, Arial, sans-serif;
  height: 100%;
  color: #595d6e;
}
.auroraMain {
  height: 100%;
  overflow: hidden;
}
#auroraContent {
  height: 100%;
}
textarea {
  resize: vertical;
}
label {
  cursor: pointer;
}
a,
.link,
a:link,
.link:link,
a:visited,
.link:visited {
  color: #00AEEF;
  cursor: pointer;
  text-decoration: none;
}
a:hover,
.link:hover {
  color: #0089bc;
  text-decoration: underline;
}
*[contenteditable="true"],
input:focus {
  outline: none;
}
.panel.left_panel .items_list .item {
  background: none;
  max-height: inherit;
}
.panel.left_panel .items_list .item > .title {
  color: #aaaaaa;
  cursor: default;
  display: block;
  font-size: 11pt;
  font-weight: normal;
  line-height: normal;
  margin-bottom: 0px;
  outline: none;
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.panel.left_panel .items_list .item > .title .name {
  display: block;
  margin-right: 10px;
  overflow: hidden;
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panel.left_panel .items_list .item > .title .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
html.rtl .panel.left_panel .items_list .item > .title .name {
  margin-left: 10px;
  margin-right: 0px;
}
.panel.left_panel .items_list .item > .title.droppableHover .name {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panel.left_panel .items_list .item > .title.droppableHover .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.panel.left_panel .items_list .item > .title .text {
  display: inline-block;
  vertical-align: bottom;
}
.panel.left_panel .items_list .item > .title .icon {
  display: inline-block;
  height: 20px;
  vertical-align: bottom;
  width: 20px;
}
.panel.left_panel .items_list .item > .title .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.left_panel .items_list .item > .title .icon:before {
  display: inline-block;
  height: 100%;
  font-size: 20px;
  width: 100%;
}
.panel.left_panel .items_list .item > .title.ui-droppable-hover {
  border-radius: 8px;
  background-color: rgba(255, 238, 199, 0.3) !important;
}
.panel.left_panel .items_list .item.canSelect > .title {
  color: #777777;
  cursor: pointer;
  text-shadow: 0px 1px 0px #ffffff;
}
.panel.left_panel .items_list .item.canSelect > .title:hover {
  color: #444444;
}
.panel.left_panel .items_list .item.canSelect > .title:hover .icon {
  color: inherit;
}
.panel.left_panel .items_list .item.canSelect > .title.virtualEmpty .title,
.panel.left_panel .items_list .item.canSelect > .title.virtualEmpty .title:hover {
  color: #aaaaaa;
}
.panel.left_panel .items_list .item.canSelect > .title.ui-state-disabled {
  cursor: pointer !important;
}
.panel.left_panel .items_list .item.selected > .title {
  background: #287B8B;
  color: #ffffff !important;
}
.panel.left_panel .items_list .item .count {
  display: inline-block;
  float: right;
  margin-right: 0px;
  margin-top: 0px;
  padding: 2px 10px 1px;
  line-height: 1.3;
}
html.rtl .panel.left_panel .items_list .item .count {
  float: left;
  margin-left: 10px;
  margin-right: 0px;
}
.panel.left_panel .items_list .item .count.total {
  color: #ececec;
}
.panel.left_panel .items_list .item .count:first-child {
  margin-right: 10px;
}
.panel.left_panel .items_list .item .count.unseen:hover {
  border-radius: 11px/10px;
}
.panel.left_panel .items_list .item.selected > .title .count.unseen {
  border-radius: 11px/10px;
}
.panel.left_panel .items_list.collapsible .item.accordion .collapse_handler {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
}
.panel.left_panel .items_list.collapsible .item.accordion .collapse_handler:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.left_panel .items_list.collapsible .item.accordion .collapse_handler:before {
  display: inline-block;
  font-size: 16px;
  height: 100%;
  vertical-align: middle;
  width: 100%;
}
.panel.left_panel .items_list.collapsible .item.accordion .collapse_handler.expanded:before {
  content: "\e66e";
}
.panel.left_panel .items_list.collapsible .item.accordion .collapse_handler.collapsed:before {
  content: "\e66d";
}
.panel.left_panel .items_list.collapsible .item.accordion.canNotSelect .collapse_handler {
  color: #777777;
  cursor: pointer;
  text-shadow: 0px 1px 0px #ffffff;
}
.panel.left_panel .items_list.collapsible .item.accordion.canNotSelect .collapse_handler:hover {
  color: #444444;
}
.panel.left_panel .items_list.collapsible .item.accordion.canNotSelect .collapse_handler:hover .icon {
  color: inherit;
}
.panel.left_panel .items_list.collapsible .item.accordion .children .title {
  max-height: 29px;
  -webkit-transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
  -moz-transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
  -o-transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
  transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
}
.panel.left_panel .items_list.collapsible .item.accordion.collapsed .children .title {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0px;
  padding-top: 0px;
}
.cssanimations .panel.left_panel .item .title.recivedAnim {
  -webkit-animation: highlight 0.5s linear;
  -moz-animation: highlight 0.5s linear;
  animation: highlight 0.5s linear;
}
.panel.left_panel .item .title.droppableHover {
  background: #dfdcd4 !important;
  color: #626262 !important;
  text-shadow: 0px 1px 0px #ffffff !important;
}
.panel.left_panel .item.selected > .title.droppableHover {
  background: #2a6470 !important;
  color: #ffffff !important;
  text-shadow: 0px 1px 0px #678197 !important;
}
.panel.left_panel .items_list .item .title .name {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panel.left_panel .items_list .item .title .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
/*=== retina displays ===*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-moz-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 125dpi) {
  .spritesX2 {
    background-image: url("../../images/sprites2x.png");
    background-size: 1440px 560px;
  }
}
.gutter {
  position: relative;
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
}
.gutter div {
  position: absolute;
  z-index: 1;
}
.gutter.gutter-horizontal {
  cursor: ew-resize;
}
.gutter.gutter-horizontal div {
  height: 100%;
  width: 10px;
  left: -5px;
}
.gutter.gutter-vertical {
  cursor: ns-resize;
}
.gutter.gutter-vertical div {
  height: 10px;
  width: 100%;
  top: -5px;
}
.split.split-horizontal,
.gutter.gutter-horizontal {
  height: 100%;
  float: left;
}
.not-display {
  display: none;
}
.autocomplete-simple {
  max-height: 50%;
}
body {
  overflow: auto;
  position: relative;
}
html.non-adjustable .auroraMain {
  overflow: visible;
  min-height: inherit;
  min-width: inherit;
}
html.non-adjustable-valign .auroraMain {
  overflow: visible;
}
.screens {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}
.screens .screen {
  height: calc(100vh - 70px);
}
.screens .screen.AdminPanelLayout {
  height: 100%;
}
.AdminPanelLayout .panels {
  overflow: auto;
}
.AdminPanelLayout .panel.left_panel {
  flex-grow: 0;
  width: 250px;
}
.AdminPanelLayout .panel.data {
  min-width: 380px;
  width: 750px;
}
.AdminPanelLayout .panel.data.modules {
  min-width: 200px;
  width: 250px;
  overflow: hidden;
  flex-grow: 0;
}
.AdminPanelLayout .panel.data .panel_top {
  border: 0px;
  padding: 0px;
}
.AdminPanelLayout .panel.data .buttons {
  margin: 0px 20px 15px;
}
.AdminPanelLayout .panel.data .buttons .button.left_button {
  float: left;
}
.AdminPanelLayout .panel.data .fieldset .buttons {
  margin: 0px 0px 15px 0px;
}
.AdminPanelLayout .settings_heading {
  color: #4d4d4d;
  margin: 0px;
  padding: 35px 20px 15px;
}
.AdminPanelLayout .fieldset {
  background: #f1f1f1;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNo0iIEJACAAwlT8/1GPMAsaKGNMYpskAOPRdq9tWbrifpaOAAMAMvEO3ANCJPYAAAAASUVORK5CYII=');
  background-position: 0 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 0px 20px 20px;
  padding: 20px;
}
.AdminPanelLayout .fieldblock {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #d0d0da;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 14px;
  padding: 14px;
}
.AdminPanelLayout .fields .row {
  margin-bottom: 14px;
}
.AdminPanelLayout .fields .row.keys_label {
  margin-bottom: 6px !important;
}
.AdminPanelLayout .fields .row:last-child {
  margin-bottom: 0px;
}
.AdminPanelLayout .fields .row .label {
  color: #626262;
  width: 150px;
  word-wrap: break-word;
}
.AdminPanelLayout .fields .row label {
  color: #626262;
}
.AdminPanelLayout .fields .row.smtp_authentication .input {
  width: 150px;
  margin-left: 16px;
  margin-right: 0;
}
.AdminPanelLayout .fields .row .input {
  font-size: 10pt;
  padding: 7px 9px 6px;
}
.AdminPanelLayout .fields .row .value.offset {
  display: inline-block;
  padding-left: 150px;
}
.AdminPanelLayout .fields .row .value.text {
  font-weight: bold;
  display: inline-block;
  padding: 7px 9px 6px;
  width: 300px;
}
.AdminPanelLayout .fields .row .value.text.port {
  width: auto;
}
.AdminPanelLayout .fields .row .custom_radio {
  margin-left: 16px;
}
.AdminPanelLayout .fields .row .custom_radio:first-child {
  margin-left: 0px;
}
.AdminPanelLayout .fields .fieldblock .label {
  width: 135px;
}
.AdminPanelLayout .fields .fields .hint {
  padding: 4px 6px;
  margin: -12px -6px 12px;
}
.AdminPanelLayout .fields .tabs {
  margin-bottom: 16px;
  margin-top: 20px;
}
.AdminPanelLayout .fields .tabs .tabs-links {
  height: 0;
  opacity: 0;
  overflow: hidden;
  width: 0;
}
.AdminPanelLayout .fields .tabs .shortcuts {
  font-size: 0pt;
  margin: 0px 20px;
  padding: 0px 0px 0px 20px;
}
.AdminPanelLayout .fields .tabs .shortcuts .item {
  display: inline-block;
  font-size: 9pt;
  vertical-align: bottom;
}
.AdminPanelLayout .fields .tabs .shortcuts .item a {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-bottom: 0px;
  border-radius: 4px 4px 0px 0px;
  color: #828282;
  display: inline-block;
  font-weight: bold;
  margin-right: 4px;
  outline: none;
  padding: 6px 12px 6px;
  text-decoration: none;
}
.AdminPanelLayout .fields .tabs .shortcuts .item.selected a {
  background: #f1f1f1;
  color: #3d3d3d;
  margin-bottom: -1px;
  padding-bottom: 7px;
}
.AdminPanelLayout .mail-servers .panel_top .buttons {
  float: right;
  margin: 30px 20px 15px;
}
.AdminPanelLayout .input.enlarged {
  width: 360px;
}
.show-header .AdminPanelLayout.screen .tabsbar {
  border-top: solid 1px #d4d4d4;
}
.AdminPanelLayout.screen {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.AdminPanelLayout .tabsbar .item .tenants_dropdown {
  display: inline-block;
  padding-right: 8px;
  position: relative;
}
.AdminPanelLayout .tabsbar .item .tenants_dropdown .link {
  z-index: 3003;
}
.AdminPanelLayout .toolbar .item.create_user .icon:before {
  content: "\e601";
}
.AdminPanelLayout .toolbar .item.filter {
  float: right;
}
.AdminPanelLayout .toolbar .item.filter select {
  border-radius: 4px;
  font-size: 11pt;
  padding: 4px;
}
.AdminPanelLayout .items_list .item {
  cursor: pointer;
}
.AdminPanelLayout .items_list .item .title {
  margin-bottom: 0px;
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .AdminPanelLayout .items_list .item .title {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.AdminPanelLayout .items_list .item .me {
  background: #f1f1f1;
  border-radius: 10px 10px 10px 10px;
  color: #6d6d6d;
  float: right;
  padding: 2px 8px;
  margin-top: -16px;
}
.AdminPanelLayout .users_list_panel .panel_top {
  background: #f1f1f1;
}
.AdminPanelLayout .users_list_panel .panel_top .search_block {
  padding-right: 4px;
}
.panel.groups_panel {
  min-width: 200px;
}
.panel.groups_panel .ui-droppable-disabled {
  opacity: 1 !important;
}
.panel.contacts_panel {
  min-width: 200px;
}
.panel.contacts_panel .panel_content {
  margin-right: 0px;
}
.panel.contacts_panel .panel_top .search_block {
  padding-right: 4px;
}
html.rtl .panel.contacts_panel .panel_top .search_block {
  padding-left: 30px;
  padding-right: 0px;
}
.panel.contacts_panel .item .me {
  background: #f1f1f1;
  border-radius: 10px 10px 10px 10px;
  color: #6d6d6d;
  float: right;
  padding: 2px 8px;
}
.panel.contacts_panel .item.selected .me {
  color: #519ce2;
}
.panel.contacts_panel .item .key {
  background: #f1f1f1;
  border-radius: 10px 10px 10px 10px;
  color: #6d6d6d;
  float: right;
  padding: 2px 8px;
}
.panel.contacts_panel .item .key:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.contacts_panel .item .key:before {
  display: inline-block;
  font-size: 20px;
  height: 26px;
  content: "\e658";
  line-height: 1;
}
.panel.contacts_panel .item .data {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.panel.contacts_panel .item .data .group {
  display: inline-block;
  height: 20px;
  margin-top: -1px;
  vertical-align: bottom;
  width: 20px;
}
.panel.contacts_panel .item .data .group:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.contacts_panel .item .data .group:before {
  opacity: 0.7;
  filter: alpha(opacity=70);
  font-size: 20px;
}
.panel.contacts_panel .item .data .group.personal:before {
  content: "\e618";
}
.panel.contacts_panel .item .data .group.shared:before {
  content: "\e629";
}
.panel.contacts_panel .item .data .group.team:before {
  content: "\e619";
}
.panel.contacts_panel .item .data .name {
  display: block;
  font-size: 12pt;
  margin-bottom: 10px;
}
.panel.contacts_panel .item .data .email {
  color: #519ce2;
}
.panel.contacts_panel .item.selected .data .email {
  color: #ffffff;
}
.panel.contacts_panel .item.noname .data .name,
.panel.contacts_panel .item.noemail .data .email {
  color: #888888;
  font-weight: normal;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.panel.contacts_panel .item.selected.noname .data .name,
.panel.contacts_panel .item.selected.noemail .data .email {
  color: #ffffff;
}
.panel.contacts_panel .search_form {
  float: right;
  margin-top: -25px;
}
.panel.contact_viewer {
  min-width: 300px;
}
.panel.contact_viewer .panel_content {
  background: url("../../images/contacts-bg.png") repeat 0 0;
}
.panel.contact_viewer .panel_center {
  overflow: hidden;
}
.panel.contact_viewer .panel_top {
  border-bottom: 0px;
  margin: 0px 20px;
  min-height: 50px;
  overflow: auto;
  padding: 23px 0px;
}
.panel.contact_viewer .panel_bottom {
  background: none;
  border: 0px;
  border-radius: 0px;
  height: auto;
  padding: 0px;
}
.panel.contact_viewer .contact_content {
  height: 100%;
}
.panel.contact_viewer .contact_content .fields_switcher {
  margin: 10px 20px;
  text-align: right;
}
.panel.contact_viewer .contacts_heading {
  font-size: 18pt;
  font-weight: normal;
  margin: 0 0 6px;
  white-space: normal;
}
.panel.contact_viewer .mailto_link {
  color: #3983c8;
  font-size: 10.5pt;
  font-weight: bold;
  text-decoration: none;
}
.panel.contact_viewer .decor {
  border: 1px solid #d9d9d9;
  border-bottom: 0px;
  border-radius: 4px 4px 0px 0px;
  margin: 0px 20px;
  padding-top: 3px;
}
.contact_data_groups {
  color: #626262;
  border: 1px solid #d9d9d9;
  border-radius: 0px 0px 4px 4px;
  border-top: 0px;
  margin: 0px 20px;
  min-height: 100px;
}
.contact_data_groups .fields {
  padding: 12px 20px 1px;
}
.contact_data_groups .subheading,
.contact_data_groups .row {
  margin-top: 0px;
  margin-bottom: 22px;
  padding: 0px;
  overflow: hidden;
}
.contact_data_groups .subheading {
  font-size: 10.5pt;
}
.contact_data_groups.edit .label {
  width: 25%;
}
.contact_data_groups.edit .value {
  width: 75%;
}
.contact_data_groups .address {
  margin-bottom: 12px;
}
.contact_data_groups .address .row {
  clear: none;
  margin-bottom: 5px;
}
.contact_data_groups .address .row:after {
  display: none;
}
.contact_data_groups .address .label {
  height: 0px;
  overflow: hidden;
  text-indent: 20px;
  width: 20px;
}
.contact_data_groups .address .label.address {
  float: left;
  height: 20px;
  margin-right: -20px;
  overflow: hidden;
  text-indent: 0px;
  vertical-align: middle;
  width: 20px;
  word-wrap: normal;
}
.contact_data_groups .address .label.address:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.contact_data_groups .address .label.address:before {
  content: "\e662";
  font-size: 20px;
  margin-right: 20px;
}
.contact_data_groups .address .label.address:before html.rtl {
  margin-left: 20px;
  margin-right: 0px;
}
.contact_data_groups .mobile .label,
.contact_data_groups .phone .label,
.contact_data_groups .fax .label {
  height: 20px;
  overflow: hidden;
  text-indent: 0px;
  vertical-align: middle;
  width: 20px;
}
.contact_data_groups .mobile .label:before,
.contact_data_groups .phone .label:before,
.contact_data_groups .fax .label:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.contact_data_groups .mobile .label:before,
.contact_data_groups .phone .label:before,
.contact_data_groups .fax .label:before {
  content: "\e663";
  font-size: 20px;
  margin-right: 20px;
}
.contact_data_groups .mobile .label:before html.rtl,
.contact_data_groups .phone .label:before html.rtl,
.contact_data_groups .fax .label:before html.rtl {
  margin-left: 20px;
  margin-right: 0px;
}
.contact_data_groups .mobile .label .text,
.contact_data_groups .phone .label .text,
.contact_data_groups .fax .label .text {
  display: none;
}
.contact_data_groups .link.call {
  margin-left: 10px;
}
html.rtl .contact_data_groups .link.call {
  margin-left: 0px;
  margin-right: 10px;
}
.popup.contact_create_popup {
  color: #626262;
}
.popup.contact_create_popup .fields .row {
  margin-bottom: 10px;
  margin-top: 0px;
  padding: 0px;
}
.popup.contact_create_popup .link {
  text-align: right;
  display: block;
}
.groups_panel .title .icon:before {
  content: "\e667";
}
.groups_panel .title .icon.type1:before {
  content: "\e618";
}
.groups_panel .title .icon.type2:before {
  content: "\e619";
}
.groups_panel .title .icon.type3:before {
  content: "\e629";
}
.groups_panel .title .icon.type4:before {
  content: "\e64f";
}
.contact_card .dropdown_content {
  background: #ffffff;
  border: 0px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: block;
  margin: -4px 0px 0px -10px;
  min-width: 360px;
  padding: 16px 18px;
}
.contact_card .dropdown_content_mail {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  padding: 16px 0 16px 18px;
}
.contact_card .dropdown_content_mail .scroll-inner {
  padding-right: 18px;
}
.contact_card .dropdown_content_mail .buttons {
  margin: 0px 0 0px -18px;
}
.contact_card .dropdown_arrow {
  display: none;
}
.contact_card .buttons {
  border-top: 1px solid #eee;
  float: none;
  margin: 0px -18px;
  padding: 10px 18px 0px 18px;
  text-align: right;
}
.contact_card .buttons_position {
  padding-top: 16px;
}
.contact_card .buttons .link {
  display: inline-block;
  font-size: 9pt;
  margin-right: 10px;
}
.contact_card .buttons .link:first-child {
  float: left;
}
.contact_card .buttons .link:last-child {
  margin-right: 0px;
}
.contact_card .fields {
  margin: 0px;
}
.contact_card .fields .fieldset {
  margin: 0 0 16px;
}
.contact_card .fields .row {
  margin: 0 0 8px;
  clear: both;
}
.contact_card .fields .row:after {
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html > body .contact_card .fields .row {
  width: 100%;
  display: block;
}
* html .contact_card .fields .row {
  height: 1%;
}
.contact_card .fields .label {
  float: left;
  padding: 0 10px 0 0;
  white-space: normal;
  width: 120px;
}
html.rtl .contact_card .fields .label {
  float: right;
}
.contact_card .fields .label:after {
  content: ":";
}
.contact_card .fields .value {
  display: block;
  overflow: hidden;
}
.contact_card .fields h2 {
  font-size: 10pt;
}
.contact_card .link.call {
  margin-left: 4px;
}
.contact_card .groups .row {
  font-size: 9pt;
}
.ContactsLayout .panel_top .buttons {
  float: right;
  margin: 0;
}
.ContactsLayout .panel_top .buttons .button {
  margin-right: 5px;
}
.ContactsLayout .panel_top .buttons .button:last-child {
  margin-right: 0;
}
.ContactsLayout .panel_top .buttons .button.clear_button {
  background: transparent;
  border: none;
  color: #9196a6;
  text-shadow: none;
  padding: 5px 7px;
}
.ContactsLayout .panel_center .buttons {
  margin: 0px;
  position: relative;
  z-index: 1;
}
.ContactsLayout .panel_center .buttons .button {
  margin: 20px 40px 0px 0px;
  position: absolute;
  right: 0px;
  top: 0px;
}
html.rtl .ContactsLayout .panel_center .buttons .button {
  left: 0px;
  margin-right: 0px;
  margin-left: 40px;
  right: auto;
}
.ContactsLayout .panel_bottom .buttons {
  border-top: 1px solid #d9d9d9;
  margin: 0px 20px;
  padding: 20px 0px;
  text-align: right;
}
html.rtl .ContactsLayout .panel_bottom .buttons {
  text-align: left;
}
.ContactsLayout .import .contact_data_groups .buttons {
  margin-top: 0px;
  text-align: left;
}
.login_panel .social div.dropbox {
  background-color: #1087dd;
  background-image: url("../../images/modules/DropboxAuthWebclient/icon.png");
  background-position: 10px;
  border: 1px solid #0367b2;
}
.login_panel .social div.dropbox:hover {
  background-color: #087cd1;
}
.login_panel .social div.dropbox .border {
  background-color: #0367b2;
}
.panels.settings .panel.navigation_panel .item.dropbox .icon:before {
  content: "\e917";
}
.login_panel .social div.facebook {
  background-color: #466099;
  background-image: url("../../images/modules/FacebookAuthWebclient/icon.png");
  background-position: 14px;
  border: 1px solid #2c3b5c;
}
.login_panel .social div.facebook:hover {
  background-color: #334b7f;
}
.login_panel .social div.facebook .border {
  background-color: #2c3b5c;
}
.panels.settings .panel.navigation_panel .item.facebook .icon:before {
  content: "\e919";
}
.login_panel .social div.google {
  background-color: #e0523a;
  background-image: url("../../images/modules/GoogleAuthWebclient/icon.png");
  background-position: 6px;
  background-size: 28px;
  border: 1px solid #89241c;
}
.login_panel .social div.google:hover {
  background-color: #cf3f27;
}
.login_panel .social div.google .border {
  background-color: #89241c;
}
.plugin_external_services.popup.google {
  z-index: 1000;
}
.panels.settings .panel.navigation_panel .item.google .icon:before {
  content: "\e918";
}
.import_export .popup_panel {
  background: #f1f1f1 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNo0iIEJACAAwlT8/1GPMAsaKGNMYpskAOPRdq9tWbrifpaOAAMAMvEO3ANCJPYAAAAASUVORK5CYII=") repeat 0 0;
}
.import_export .popup_panel .buttons .button {
  vertical-align: middle;
}
.LoginLayout {
  height: auto !important;
  min-height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html.mobile .LoginLayout {
  color: #595d6e;
}
.LoginLayout .vhelper {
  display: inline-block;
  display: none;
  height: 100%;
  vertical-align: middle;
  width: 0px;
}
.LoginLayout.with_bottom_text {
  position: relative;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.LoginLayout.with_bottom_text .bottom_description {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
.LoginLayout.with_bottom_text .bottom_description a {
  color: inherit;
  text-decoration: underline;
}
.login_panel {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  color: #929292;
  display: inline-block;
  font-size: 9pt;
  padding: 20px;
  vertical-align: middle;
  width: 280px;
}
.login_panel .description {
  color: #fff !important;
}
.login_panel .welcome {
  color: #68483d !important;
}
.login_panel .description {
  color: #fff !important;
}
.login_panel .welcome {
  color: #68483d !important;
}
.login_panel a,
.login_panel .link,
.login_panel a:link,
.login_panel .link:link,
.login_panel a:visited,
.login_panel .link:visited {
  color: white;
}
.login_panel a:hover,
.login_panel .link:hover {
  color: rgba(255, 255, 255, 0.8);
}
.login_panel .header {
  height: 95px;
  margin-bottom: 30px;
}
.login_panel .header.custom_logo {
  background: none;
  height: auto;
}
.login_panel .header .icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.login_panel .header .text {
  display: none;
}
.login_panel .header .icon {
  height: 95px;
  width: 130px;
}
.login_panel .header .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login_panel .header .icon:before {
  color: #25AEB8;
  text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #1c868e, -1px -1px #219aa3;
  content: "\e63c";
  display: inline-block;
  font-size: 140px;
  height: 100%;
  margin-top: -20px;
  vertical-align: middle;
  width: 100%;
}
.login_panel .header .icon {
  height: 95px;
  width: 130px;
}
.login_panel .header .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login_panel .header .icon:before {
  color: #25AEB8;
  text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #1c868e, -1px -1px #219aa3;
  content: "\e63c";
  display: inline-block;
  font-size: 140px;
  height: 100%;
  margin-top: -20px;
  vertical-align: middle;
  width: 100%;
}
.login_panel .welcome {
  margin-bottom: 20px;
  font-size: 14px;
}
.login_panel .welcome .name {
  font-style: italic;
  font-size: 17px;
  color: #6d5454;
}
.login_panel .login_panel_content {
  -webkit-perspective: 4000px;
  -moz-perspective: 4000px;
  -o-perspective: 4000px;
  perspective: 4000px;
  position: relative;
}
.login_panel .login_panel_content .col {
  -webkit-perspective: 4000px;
  -moz-perspective: 4000px;
  -o-perspective: 4000px;
  perspective: 4000px;
}
.login_panel .login_panel_content .col.left {
  margin-right: 276px;
  padding-right: 20px;
  text-align: center;
}
.login_panel .login_panel_content .col.right {
  position: absolute;
  right: 0px;
  width: 276px;
}
.login_panel .login_panel_content .content {
  box-shadow: 0px 0px 0px #ffffff;
  float: left;
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
  width: 100%;
  -webkit-transition: -webkit-transform 600ms ease-in-out, opacity 120ms linear 240ms, visibility 1ms linear 300ms, margin-top 0ms linear 300ms;
  -moz-transition: -moz-transform 600ms ease-in-out, opacity 120ms linear 240ms, visibility 1ms linear 300ms, margin-top 0ms linear 300ms;
  transition: transform 600ms ease-in-out, opacity 120ms linear 240ms, visibility 1ms linear 300ms, margin-top 0ms linear 290ms;
}
.login_panel .login_panel_content .content.register,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.social_register {
  left: 50%;
  margin-left: -130px;
  position: relative;
  width: 260px;
}
.login_panel .login_panel_content .content.send_question {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.login_panel .login_panel_content .content.send_question .question {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  box-shadow: 0 1px 1px #dddddd inset;
  color: #000000;
  font-size: 11pt;
  height: 214px;
  padding: 6px 8px;
  resize: none;
  width: 100%;
}
.login_panel .login_panel_content .content.forgot .row {
  border-radius: 4px !important;
}
.login_panel .login_panel_content .content.register,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.social_register {
  text-align: center;
}
.login_panel .login_panel_content .content.social_register .question_title,
.login_panel .login_panel_content .content.send_question .question_title {
  color: #929292;
  display: block;
  font-size: 11pt;
}
.login_panel .login_panel_content .content.forgot,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.register,
.login_panel .login_panel_content .content.signin,
.login_panel .login_panel_content .content.activation,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.social_register {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  margin-top: -100000px;
  opacity: 0;
  visibility: hidden;
}
.login_panel .login_panel_content .content.activation {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  font-size: 12pt;
  text-shadow: 0px 1px 0px #f3f3f3;
  white-space: normal;
  width: 240px;
}
.login_panel.flipForgot .content.login,
.login_panel.flipChangepass .content.send_question,
.login_panel.flipRegister .content.login,
.login_panel.flipRegister .content.send_question,
.login_panel.flipRegister.flipForgot .content.forgot,
.login_panel.flipSignin .content.login,
.login_panel.flipSocialRegister .content.login,
.login_panel.flipSocialRegister .content.send_question,
.login_panel.flipActivation .content.login,
.login_panel.flipChangepass .content.login {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  margin-top: -100000px;
  opacity: 0;
  visibility: hidden;
}
.login_panel.flipForgot .content.forgot,
.login_panel.flipChangepass .content.changepass,
.login_panel.flipRegister .content.register,
.login_panel.flipSignin .content.signin,
.login_panel.flipSocialRegister .content.social_register {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
}
.login_panel.flipActivation .content.activation {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
}
.login_panel .description {
  color: #929292;
  margin-top: 20px;
}
.login_panel .social_description {
  background: #d7dcdf;
  border: 1px solid #c7cccf;
  border-radius: 4px;
  color: #464646;
  margin: 20px;
  margin-left: -85px;
  padding: 10px;
  width: 400px;
}
.login_panel .row {
  background: #ffffff;
  border: 1px solid #cac7c7;
  margin: -1px 0px 0px;
  padding: 10px;
  padding-left: 30px;
  text-align: right;
  white-space: nowrap;
}
html.rtl .login_panel .row {
  padding-left: 10px;
  padding-right: 30px;
}
html.rtl .login_panel .row.buttons {
  padding-left: 0px;
  padding-right: 0px;
}
.login_panel .row.focused {
  background: #fff3ce;
  border-color: #cfbf8e;
  position: relative;
}
.login_panel .row.shake {
  -webkit-animation: shake 0.8s linear;
  -moz-animation: shake 0.8s linear;
  animation: shake 0.8s linear;
}
.login_panel .row:first-child {
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0 1px 1px #dddddd inset;
}
.login_panel .row:last-child {
  border-radius: 0px 0px 4px 4px;
  border-width: 1px;
}
.login_panel .row .value {
  vertical-align: middle;
}
.login_panel .row .value.suffix {
  margin-left: 16px;
}
.login_panel .row .value.suffix .text {
  color: #777777;
  font: 12pt Helvetica, Tahoma, Arial, sans-serif;
}
.login_panel .row .placeholder {
  display: inline-block;
  cursor: text;
  float: none;
  font-size: 12pt;
  height: 20px;
  margin-left: -20px;
  position: relative;
  text-indent: 0px;
  vertical-align: middle;
  width: 20px;
  zoom: 1;
}
html.rtl .login_panel .row .placeholder {
  margin-left: 0px;
  margin-right: -20px;
}
.login_panel .row .placeholder:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login_panel .row .placeholder:before {
  color: #d5d4d2;
  display: inline-block;
  font-size: 22px;
  height: 20px;
  margin-right: 4px;
  margin-top: -6px;
  vertical-align: middle;
  width: 20px;
}
html.rtl .login_panel .row .placeholder:before {
  margin-left: 4px;
  margin-right: 0px;
}
.login_panel .row.filled .placeholder:before,
.login_panel .row.focused .placeholder:before {
  color: #cbc9c6;
}
.login_panel .row.email > .placeholder:before {
  content: "\e627";
}
.login_panel .row.password > .placeholder:before {
  content: "\e625";
}
.login_panel .row.name > .placeholder:before,
.login_panel .row.login > .placeholder:before {
  content: "\e626";
}
.login_panel .row.question,
.login_panel .row.answer {
  padding-left: 10px;
}
.login_panel .row.question html.rtl,
.login_panel .row.answer html.rtl {
  padding-right: 10px;
}
.login_panel .row.question .placeholder,
.login_panel .row.answer .placeholder {
  width: 0px;
}
.login_panel .row .input {
  background: transparent;
  border: 0px !important;
  border-radius: 0px;
  box-shadow: none;
  color: #444;
  display: inline-block;
  font: 12pt Helvetica, Tahoma, Arial, sans-serif;
  outline: none;
  padding: 1px 0px;
  text-align: left;
  text-indent: 3px;
  width: 100%;
}
html.rtl .login_panel .row .input {
  text-align: right;
}
.login_panel .row .input:focus {
  box-shadow: none;
}
.login_panel .row .input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
.login_panel .row .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff3ce inset !important;
}
.login_panel .custom_checkbox.focus {
  box-shadow: 0px 4px 3px -3px #e5e5e5 inset, 0 0 2px 0 #1d67cd;
}
.login_panel .custom_checkbox.focus .icon {
  border: 1px solid #ffffff;
}
.login_panel .signme,
.login_panel .links {
  background: none;
  border: 0px;
  border-radius: 0px;
  font-size: 9pt;
  margin-bottom: 14px;
  padding: 0px;
  text-align: left;
}
html.rtl .login_panel .signme,
html.rtl .login_panel .links {
  text-align: right;
}
.login_panel .signme .signme_label {
  cursor: pointer;
  font-size: 9pt;
  height: auto;
  text-indent: 0px;
  width: auto;
}
.login_panel .signme input {
  vertical-align: middle;
}
.login_panel .links .forgot {
  float: right;
  margin-left: 16px;
}
.login_panel.login .row.login {
  border-radius: 4px 4px 0px 0px;
}
.login_panel.login.email .row.login {
  border-radius: 0px;
}
.LoginLayout .languages {
  border-radius: 5px;
  padding: 10px 16px;
  position: fixed;
  right: 20px;
  top: 20px;
}
html.rtl .LoginLayout .languages {
  left: 20px;
  right: auto;
}
.LoginLayout .languages .custom_selector .control .icon {
  color: #000;
}
.LoginLayout .languages .custom_selector .control .icon:before {
  font-size: 18px;
}
.register .LoginLayout .languages .custom_selector .name {
  display: inline-block;
  height: 15px;
}
.LoginLayout .languages .custom_selector .dropdown_arrow {
  float: right;
  margin-right: 22px;
}
.LoginLayout .languages .custom_selector .dropdown_content {
  padding: 0px;
  width: 105%;
}
.register .LoginLayout .languages .custom_selector .dropdown_content {
  position: relative;
}
.LoginLayout .languages .custom_selector .item {
  border-bottom: 1px solid #CBC8C0;
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
}
.LoginLayout .languages .custom_selector .item.selected {
  background: #f0f0f0;
}
.LoginLayout .languages .custom_selector .item:hover {
  background: #fafafa;
}
.LoginLayout .languages .name .text {
  display: none;
}
.LoginLayout .languages .icon {
  background: url("../../images/sprites.png") no-repeat 40px -400px;
  display: inline-block;
  height: 11px;
  margin-right: 4px;
  vertical-align: middle;
  width: 16px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-moz-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 125dpi) {
  .LoginLayout .languages .icon {
    background-image: url("../../images/sprites2x.png");
    background-size: 1440px 560px;
  }
}
html.rtl .LoginLayout .languages .icon {
  margin-left: 4px;
  margin-right: 0px;
}
.LoginLayout .languages .English .icon {
  background-position: 0px -480px;
}
.LoginLayout .languages .Arabic .icon {
  background-position: -80px -520px;
}
.LoginLayout .languages .Bulgarian .icon {
  background-position: -40px -480px;
}
.LoginLayout .languages .Chinese-Simplified .icon {
  background-position: -80px -480px;
}
.LoginLayout .languages .Chinese-Traditional .icon {
  background-position: -80px -480px;
}
.LoginLayout .languages .Czech .icon {
  background-position: -120px -480px;
}
.LoginLayout .languages .Danish .icon {
  background-position: -160px -480px;
}
.LoginLayout .languages .Dutch .icon {
  background-position: -640px -480px;
}
.LoginLayout .languages .Estonian .icon {
  background-position: -200px -480px;
}
.LoginLayout .languages .Finnish .icon {
  background-position: -240px -480px;
}
.LoginLayout .languages .French .icon {
  background-position: -280px -480px;
}
.LoginLayout .languages .German .icon {
  background-position: -320px -480px;
}
.LoginLayout .languages .Greek .icon {
  background-position: -360px -480px;
}
.LoginLayout .languages .Hebrew .icon {
  background-position: -440px -480px;
}
.LoginLayout .languages .Hungarian .icon {
  background-position: -400px -480px;
}
.LoginLayout .languages .Italian .icon {
  background-position: -480px -480px;
}
.LoginLayout .languages .Japanese .icon {
  background-position: -520px -480px;
}
.LoginLayout .languages .Korean .icon {
  background-position: -120px -520px;
}
.LoginLayout .languages .Latvian .icon {
  background-position: -560px -480px;
}
.LoginLayout .languages .Lithuanian .icon {
  background-position: -600px -480px;
}
.LoginLayout .languages .Norwegian .icon {
  background-position: -680px -480px;
}
.LoginLayout .languages .Persian .icon {
  background-position: -360px -520px;
}
.LoginLayout .languages .Polish .icon {
  background-position: -720px -480px;
}
.LoginLayout .languages .Portuguese-Brazil .icon {
  background-position: -760px -480px;
}
.LoginLayout .languages .Romanian .icon {
  background-position: 0px -520px;
}
.LoginLayout .languages .Russian .icon {
  background-position: -40px -520px;
}
.LoginLayout .languages .Spanish .icon {
  background-position: -160px -520px;
}
.LoginLayout .languages .Swedish .icon {
  background-position: -200px -520px;
}
.LoginLayout .languages .Thai .icon {
  background-position: -240px -520px;
}
.LoginLayout .languages .Turkish .icon {
  background-position: -280px -520px;
}
.LoginLayout .languages .Ukrainian .icon {
  background-position: -320px -520px;
}
.LoginLayout .languages .Serbian .icon {
  background-position: -400px -520px;
}
.LoginLayout .languages .Portuguese-Portuguese .icon {
  background-position: -800px -480px;
}
.LoginLayout .languages .Vietnamese .icon {
  background-position: -440px -520px;
}
.LoginLayout .languages .Slovenian .icon {
  background-position: -480px -520px;
}
.LoginLayout .languages .Slovak .icon {
  background-position: -520px -520px;
}
.LoginLayout .languages.demo {
  border: 1px solid #C7CCCF;
  border-radius: 4px;
  clear: both;
  left: auto;
  margin-left: -172px;
  margin-top: 20px;
  padding: 10px 14px;
  position: relative !important;
  right: auto;
  text-align: left;
  top: 20px;
  width: 590px;
  background: #9EE6D4;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #C1CDB8), color-stop(1, #9EE6D4));
  background: -webkit-linear-gradient(bottom, #C1CDB8 0%, #9EE6D4 100%);
  background: -ms-linear-gradient(bottom, #C1CDB8, #9EE6D4);
  background: -moz-linear-gradient(center bottom, #C1CDB8 0%, #9EE6D4 100%);
  background: -o-linear-gradient(#9EE6D4, #C1CDB8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9EE6D4', endColorstr='#C1CDB8', GradientType=0);
}
html.rtl .LoginLayout .languages.demo {
  margin-left: 0;
  margin-right: -172px;
  text-align: right;
}
.LoginLayout .languages.demo .langs_heading {
  color: #464646;
  font-size: 12pt;
  margin-bottom: 10px;
  text-align: center;
}
.LoginLayout .languages.demo .item {
  color: #555555;
  display: inline-block;
  width: 24%;
}
.LoginLayout .languages.demo .item .item_content {
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  padding: 3px 6px;
  white-space: nowrap;
}
.LoginLayout .languages.demo .item .item_content:hover {
  background-color: #67C0B7;
  color: #333333;
}
.LoginLayout .languages.demo .item .item_content .text {
  display: inline-block;
  vertical-align: middle;
}
.LoginLayout .languages.demo .item.selected .item_content {
  background: #2993A2;
  color: #fff;
}
.LoginLayout .buttons {
  background: none;
  border: 0px;
  margin: 20px 0 14px;
  padding: 0px;
}
.LoginLayout .buttons .button {
  display: block;
  font-size: 12pt;
  padding: 10px;
  width: 100%;
}
.LoginLayout .buttons .button:focus {
  border: 1px solid #eee;
}
.LoginLayout .row.login {
  position: relative;
}
.LoginLayout .domain-select {
  color: white;
  margin-left: 15px;
  font-size: 16pt!important;
  vertical-align: middle;
  height: 20px;
  display: inline-block;
  margin-top: -8px;
}
.LoginLayout .domain-select select.value.input {
  background: white;
  border: 1px solid #cac7c7 !important;
  border-radius: 4px;
  margin-top: -6px;
  padding: 10px 4px;
}
.MailNotesPlugin {
  /* Notes icon should be changed only for level 1 */
}
.MailNotesPlugin .message_viewer .notes_container.panel_center {
  font-size: 16px;
}
.MailNotesPlugin .message_viewer .notes_container.panel_bottom {
  padding: 20px;
}
.MailNotesPlugin .message_viewer .notes_container.panel_bottom .buttons {
  margin: 0px;
  text-align: left;
}
html.rtl .MailNotesPlugin .message_viewer .notes_container.panel_bottom .buttons {
  text-align: right;
}
.MailNotesPlugin .message_viewer .notes_container.panel_bottom .buttons .button {
  margin-right: 6px;
}
.MailNotesPlugin .message_viewer .notes_container.panel_bottom .buttons .hint {
  color: #929292;
}
.MailNotesPlugin .message_viewer .notes_container .note_edit {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 20px;
  box-sizing: border-box;
  /* Firefox 19+ */
  /* Firefox 18- */
}
.MailNotesPlugin .message_viewer .notes_container .note_edit::-webkit-input-placeholder {
  color: #bbbbbb;
}
.MailNotesPlugin .message_viewer .notes_container .note_edit::-moz-placeholder {
  color: #bbbbbb;
}
.MailNotesPlugin .message_viewer .notes_container .note_edit:-moz-placeholder {
  color: #bbbbbb;
}
.MailNotesPlugin .message_viewer .notes_container .note_edit:-ms-input-placeholder {
  color: #bbbbbb;
}
.MailNotesPlugin .folders .item .icon.type10.Notes:before {
  content: "\e909" !important;
}
.MailNotesPlugin .folders .children .item .icon.type10.Notes:before {
  content: "\e66c" !important;
}
.html_editor {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  position: relative;
}
.html_editor .disable_mask {
  background: #cccccc;
  cursor: default;
  height: 100%;
  opacity: 0.2;
  position: absolute;
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0;
}
.html_editor .html_source_container {
  border: 0;
  height: 100%;
  width: 100%;
  background: white;
}
.html_editor .html_source_container .cm-editor {
  height: 100%;
}
.html_editor .workarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  height: 100%;
  width: 100%;
}
.html_editor .workarea .scroll-inner {
  background: #ffffff;
}
.html_editor .workarea .crea-content-editable {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  cursor: text;
  height: 100% !important;
  outline: 0px;
  padding: 20px 24px;
  width: 100% !important;
  word-wrap: break-word;
}
.inactive.html_editor .workarea .crea-content-editable {
  opacity: 0.2;
}
.html_editor .workarea .crea-content-editable a {
  cursor: text;
}
.html_editor .workarea .crea-content-editable p {
  margin: 0;
}
.html_editor .workarea .crea-content-editable img {
  cursor: pointer;
}
.html_editor .workarea li {
  margin-bottom: 0.6em;
}
.html_editor .uploader_mask {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background: #fffdd6;
  color: #d3b910;
  font-size: 18pt;
  height: 100%;
  left: 0px;
  opacity: 0;
  padding: 11px;
  position: absolute;
  text-align: center;
  top: 0px;
  visibility: hidden;
  width: 100%;
  -webkit-transition: ease 250ms opacity 0s;
  -moz-transition: ease 250ms opacity 0s;
  -o-transition: ease 250ms opacity 0s;
  transition: ease 250ms opacity 0s;
}
.html_editor .uploader_mask .inner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px dashed #e2da36;
  border-radius: 5px;
  height: 100%;
}
.html_editor .uploader_mask.active,
.html_editor .uploader_mask.editorDragOver {
  opacity: 0.5;
  visibility: visible;
}
.html_editor .inline_popup {
  background-color: #f7f7f7;
  border: solid 1px #cccccc;
  border-radius: 2px;
  padding: 4px 8px;
  position: absolute;
}
.html_editor .inline_popup.image_tooltip {
  opacity: 0.7;
  filter: alpha(opacity=70);
  border: solid 1px #eeeeee;
  margin: 10px 0px 0px 10px;
}
.html_editor .inline_popup .button {
  border-right: 1px solid #cccccc;
  color: #4477bb;
  cursor: pointer;
  margin: 0px 8px;
  padding-right: 8px;
  text-decoration: underline;
}
.html_editor .inline_popup .button:last-child {
  border-right: 0px;
  margin: 0px;
  padding-right: 0px;
}
.html_editor .inline_popup .button:hover {
  text-decoration: none;
}
.html_editor .inline_popup input {
  width: 300px;
}
.html_editor .toolbar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fdfdfd;
  border: none;
  cursor: default;
  padding: 0px 4px;
}
.html_editor .toolbar .content {
  padding: 0px;
}
.html_editor .toolbar .content .separator {
  border-left: 1px solid #dddddd;
  border-right: 1px solid #ffffff;
  display: inline-block;
  height: 32px;
  margin: 0px 4px;
  vertical-align: middle;
}
.inactive.html_editor .toolbar .content .separator,
.inactive.html_editor .toolbar .content .separator:hover,
.plaintext_mode.html_editor .toolbar .content .separator,
.plaintext_mode.html_editor .toolbar .content .separator:hover,
.edit_source_mode.html_editor .toolbar .content .separator,
.edit_source_mode.html_editor .toolbar .content .separator:hover {
  opacity: 0.4;
}
.html_editor .toolbar .content .button {
  background: #dddddd;
  border: 1px solid #cccccc;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  font-size: 11pt;
  padding: 4px 6px;
}
.html_editor .toolbar .content .button:hover {
  background: #e3e3e3;
}
.html_editor .toolbar .content .item {
  background: none;
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  line-height: 16px;
  margin: 4px 1px !important;
  outline: 0px;
  padding: 4px;
  vertical-align: middle;
}
.html_editor .toolbar .content .item .item:hover {
  background: #eeeeee;
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 3px #eeeeee, inset 1px 1px 0px #ffffff;
}
.inactive.html_editor .toolbar .content .item,
.inactive.html_editor .toolbar .content .item:hover {
  background: none;
  cursor: default;
  opacity: 0.2;
}
.plaintext_mode.html_editor .toolbar .content .item,
.plaintext_mode.html_editor .toolbar .content .item:hover,
.edit_source_mode.html_editor .toolbar .content .item,
.edit_source_mode.html_editor .toolbar .content .item:hover {
  background: none;
  cursor: default;
  opacity: 0.2;
  pointer-events: none;
}
.html_editor .toolbar .content .item.select {
  padding: 0px 0px;
}
.html_editor .toolbar .content .item.select:hover {
  background: none;
}
.html_editor .toolbar .content .item.select .input {
  font-size: 10pt;
  margin-top: -2px;
  max-width: 200px;
  padding: 0px !important;
  width: auto;
}
.html_editor .toolbar .content .item .icon {
  background-image: url("../../images/sprites.png");
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  vertical-align: middle;
  width: 16px;
}
.html_editor .toolbar .content .item.blockquote .icon:before {
  content: '\e938';
}
.html_editor .toolbar .content .item.link .icon {
  background-position: 0px -320px;
}
.html_editor .toolbar .content .item.unlink .icon {
  background-position: -40px -320px;
}
.html_editor .toolbar .content .item.image .icon {
  background-position: -440px -320px;
}
.html_editor .toolbar .content .item.slist .icon {
  background-position: -40px -320px;
}
.html_editor .toolbar .content .item.uslist .icon {
  background-position: -80px -320px;
}
.html_editor .toolbar .content .item.hline .icon {
  background-position: -640px -320px;
  width: 18px;
}
.html_editor .toolbar .content .item.bold .icon {
  background-position: -200px -320px;
}
.html_editor .toolbar .content .item.italic .icon {
  background-position: -120px -320px;
}
.html_editor .toolbar .content .item.underline .icon {
  background-position: -160px -320px;
}
.html_editor .toolbar .content .item.aleft .icon {
  background-position: -320px -320px;
}
.html_editor .toolbar .content .item.acenter .icon {
  background-position: -360px -320px;
}
.html_editor .toolbar .content .item.aright .icon {
  background-position: -400px -320px;
}
.html_editor .toolbar .content .item.ajustify .icon {
  background-position: -440px -320px;
}
.html_editor .toolbar .content .item.color .icon {
  background-position: -400px -320px;
}
.html_editor .toolbar .content .item.background .icon {
  background-position: -40px -320px;
}
.html_editor .toolbar .content .item.clear .icon {
  background-position: -480px -320px;
}
.html_editor .toolbar .content .item.strike_through .icon {
  background-position: -520px -320px;
}
.html_editor .toolbar .content .item.undo .icon {
  background-position: -560px -320px;
}
.html_editor .toolbar .content .item.redo .icon {
  background-position: -600px -320px;
}
.html_editor .toolbar .content .item.template .icon {
  background-image: none;
}
.html_editor .toolbar .content .item.template .icon:before {
  content: "\e90e";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 0.5;
  font-family: 'afterlogic';
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  color: #595959;
}
.html_editor .toolbar .content .item.template .dropdown_content {
  padding: 0px;
  min-width: fit-content;
}
.html_editor .toolbar .content .item.template .dropdown_content .scroll-inner {
  width: max-content !important;
}
.html_editor .toolbar .content .item.template .dropdown_content .scroll-inner div {
  border-top: 1px solid #cbc8c0;
  padding: 10px;
}
.html_editor .toolbar .content .item.template .dropdown_content .scroll-inner div:hover {
  background: #e0e0e0;
}
.edit_source_mode.html_editor .toolbar .content .item.source_code {
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}
.html_editor .toolbar .content .dropdown {
  color: #000000;
  bottom: -4px;
}
.inactive.html_editor .toolbar .content .dropdown {
  left: -10000px;
}
.html_editor .toolbar .content .dropdown.color {
  white-space: nowrap;
}
.html_editor .toolbar .content .dropdown .dropdown_content {
  background: #eeeeee;
  border: 1px solid #cccccc;
  border-top: 1px solid #fafafa;
  border-radius: 0px 0px 3px 3px;
  padding: 4px;
}
.html_editor .toolbar .content .dropdown .dropdown_content .input {
  font-size: 11pt;
  margin: 0px;
  padding: 3px 5px 2px;
  vertical-align: top;
  width: auto;
}
.html_editor .toolbar .content .color_table {
  display: inline-block;
  margin-right: 6px;
  vertical-align: bottom;
}
.html_editor .toolbar .content .color_table:last-child {
  margin-right: 0px;
}
.html_editor .toolbar .content .color_table .title {
  display: inline-block;
  margin: 2px 0px 4px;
  padding: 0px;
}
.html_editor .toolbar .content .color_table .row {
  display: block;
  font-size: 0px;
  margin: 0px !important;
  white-space: nowrap;
}
.html_editor .toolbar .content .color_table .color-item {
  cursor: pointer;
  display: inline-block;
  height: 16px;
  margin: 2px;
  vertical-align: bottom;
  width: 16px;
}
.html_editor .toolbar .content .color_table .color-item:hover {
  box-shadow: 0px 0px 2px #aaaaaa;
  height: 18px;
  margin: 1px;
  width: 18px;
}
.folders .folder-level1 .title {
  padding-left: 16px !important;
}
html.rtl .folders .folder-level1 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level2 .title {
  padding-left: 32px !important;
}
html.rtl .folders .folder-level2 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level3 .title {
  padding-left: 48px !important;
}
html.rtl .folders .folder-level3 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level4 .title {
  padding-left: 64px !important;
}
html.rtl .folders .folder-level4 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level5 .title {
  padding-left: 80px !important;
}
html.rtl .folders .folder-level5 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level6 .title {
  padding-left: 96px !important;
}
html.rtl .folders .folder-level6 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level7 .title {
  padding-left: 112px !important;
}
html.rtl .folders .folder-level7 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level8 .title {
  padding-left: 128px !important;
}
html.rtl .folders .folder-level8 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level9 .title {
  padding-left: 144px !important;
}
html.rtl .folders .folder-level9 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level10 .title {
  padding-left: 160px !important;
}
html.rtl .folders .folder-level10 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level11 .title {
  padding-left: 176px !important;
}
html.rtl .folders .folder-level11 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level12 .title {
  padding-left: 192px !important;
}
html.rtl .folders .folder-level12 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level13 .title {
  padding-left: 208px !important;
}
html.rtl .folders .folder-level13 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level14 .title {
  padding-left: 224px !important;
}
html.rtl .folders .folder-level14 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level15 .title {
  padding-left: 240px !important;
}
html.rtl .folders .folder-level15 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level16 .title {
  padding-left: 256px !important;
}
html.rtl .folders .folder-level16 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level17 .title {
  padding-left: 272px !important;
}
html.rtl .folders .folder-level17 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level18 .title {
  padding-left: 288px !important;
}
html.rtl .folders .folder-level18 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .folder-level19 .title {
  padding-left: 304px !important;
}
html.rtl .folders .folder-level19 .title {
  padding-left: 0px !important;
  padding-right: 16px !important;
}
.folders .ui-droppable-disabled {
  opacity: 1 !important;
}
.folders .title .icon.type11:before {
  content: "\e920";
}
.folders .title .icon.type1:before {
  content: "\e616";
}
.folders .title .icon.type2:before {
  content: "\e615";
}
.folders .title .icon.type3:before {
  content: "\e617";
}
.folders .title .icon.type4:before {
  content: "\e614";
}
.folders .title .icon.type5:before {
  content: "\e612";
}
.folders .item .icon.type10:before {
  content: "\e66c";
}
.folders .title .icon.type7:before,
.folders .selected .title .icon.type7:before {
  content: "\e613";
  margin-top: -0.1ex;
}
.folders .item:not(.virtualEmpty) .title .icon.type7 {
  text-shadow: none;
  color: #ffb736 !important;
}
.folders .virtualEmpty.selected .title .icon.type7 {
  color: #ffffff;
}
.buttons.big_single_button .button.add_new_folder {
  margin-top: 8px;
}
.panel.folders_panel {
  width: 15%;
}
.panel.folders_panel .panel_bottom {
  background: none;
  border: 0px;
  border-radius: 0px;
  height: 30px;
  padding: 0px;
}
.panel.folders_panel .quota_visible .panel_bottom {
  height: 42px;
}
.panel.folders_panel .quota_visible.quota_has_text_below .panel_bottom {
  height: 60px;
}
.panel.folders_panel .manage_folders {
  font-size: 8pt;
  line-height: 16px;
  text-align: center;
}
.SettingsLayout .items_list .item .unified_marker {
  border-radius: 10px;
  background: #959595;
  display: inline-block;
  color: white;
  font-size: 8pt;
  font-weight: normal;
  padding: 1px 6px;
}
.messages_panel .items_list .item .flag {
  color: #cccccc;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  margin-top: 5px;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  width: 16px;
}
.messages_panel .items_list .item .flag:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.messages_panel .items_list .item .flag:after {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.messages_panel .items_list .item .flag:before {
  content: "\e652";
  display: block;
  font-size: 20px;
  margin-left: -2px;
}
.messages_panel .items_list .item .flag:after {
  color: #ffb736;
  content: "\e61f";
  display: block;
  font-size: 24px;
  height: 100%;
  margin: -22px 0 0 -4px;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  -webkit-transform-origin: 13px 13px;
  -moz-transform-origin: 13px 13px;
  -ms-transform-origin: 13px 13px;
  -o-transform-origin: 13px 13px;
  transform-origin: 13px 13px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
  -moz-transition: -moz-transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
  -o-transition: -o-transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
  transition: transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, opacity 100ms linear 100ms, visibility 0ms linear 300ms;
}
.messages_panel .items_list .item.checked .flag:not(.partial):before {
  color: #bed18b;
}
.messages_panel .items_list .item.selected .flag:not(.partial):before {
  color: #549fe1;
}
.messages_panel .items_list .use_threads .item .partial {
  color: #ffb736;
}
.messages_panel .items_list .item .flagged:after {
  opacity: 1;
  visibility: visible;
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, visibility 0ms linear 0s;
  -moz-transition: -moz-transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, visibility 0ms linear 0s;
  -o-transition: -o-transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, visibility 0ms linear 0s;
  transition: transform 200ms cubic-bezier(0.4, 0.4, 0.6, 4) 0s, visibility 0ms linear 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.messages_panel .items_list .item .controls .separator,
.messages_panel .items_list .item .data .separator {
  display: block;
}
.messages_panel .items_list .item .unified_marker,
.messages_panel .items_list .item .search_folder_marker {
  display: none;
}
.messages_panel .items_list .item .custom_marker,
.unified_messages_panel.messages_panel .items_list .item .unified_marker,
.search_multi_folders.messages_panel .items_list .item .search_folder_marker {
  background: #959595;
  border-radius: 10px;
  color: white;
  display: block;
  float: right;
  font-size: 8pt;
  font-weight: normal;
  margin-top: 1px;
  padding: 0px 6px 1px;
}
.search_multi_folders.messages_panel .items_list .item .search_folder_marker {
  background: inherit;
  color: #a1a3ab;
  border: solid 1px #a1a3ab;
  padding: 0px 6px;
  margin-left: 4px;
}
.search_multi_folders.messages_panel .items_list .item.selected .search_folder_marker {
  color: #fff;
  border: solid 1px #fff;
}
.messages_panel .items_list .item .size {
  display: none;
  text-align: right;
  width: 40px;
}
.messages_panel .items_list .item .subject,
.messages_panel .items_list .item .from {
  display: block;
  overflow: hidden;
}
.messages_panel .items_list .item .subject {
  color: #6d6d6d;
  font-size: 13pt;
  line-height: 130%;
}
.messages_panel .items_list .item.selected .subject {
  color: #ffffff;
}
.messages_panel .items_list .item.nosubject .subject {
  color: #888888;
}
.messages_panel .items_list .item.nosubject .subject::before {
  opacity: 1 !important;
}
.messages_panel .items_list .item.nosubject .subject [data-bind="text: subjectForDisplay()"] {
  opacity: 0.3;
}
.messages_panel .items_list .item.selected.nosubject .subject {
  color: #ffffff;
}
.messages_panel .items_list .item .from {
  font-size: 10.5pt;
  margin-bottom: 10px;
  min-height: 16px;
}
.messages_panel .items_list .item .text {
  color: #b6b6b6;
  display: block;
  white-space: normal;
}
.messages_panel .items_list .item.selected .text {
  color: #b4d4f0;
}
.messages_panel .items_list .item > .separator {
  clear: both;
}
.messages_panel .items_list .item .marker {
  background: url('../../images/sprites.png') no-repeat 0px -200px;
  display: none;
  height: 20px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 20px;
}
.messages_panel .items_list .item.answered .marker {
  background-position: 0px -200px;
  display: inline-block;
}
.messages_panel .items_list .item.forwarded .marker {
  background-position: -40px -200px;
  display: inline-block;
}
.messages_panel .items_list .item.answered.forwarded .marker {
  background-position: -80px -200px;
  display: inline-block;
}
.messages_panel .items_list .item .importance {
  border: 1px solid;
  border-radius: 50%;
  display: inline-block;
  height: 14px;
  line-height: 1;
  margin-top: -3px;
  text-align: center;
  vertical-align: middle;
  width: 14px;
}
.messages_panel .items_list .item .importance:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.messages_panel .items_list .item .importance:before {
  content: "\e620";
  display: inline-block;
  font-size: 13px;
  vertical-align: top;
  width: 7px;
}
.messages_panel .items_list .item.selected .importance {
  color: #ffffff;
  border-color: #ffffff;
}
.messages_panel .items_list .item .attachments {
  display: inline-block;
  height: 20px;
  vertical-align: bottom;
  width: 20px;
}
.messages_panel .items_list .item .attachments.has_attachments:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.messages_panel .items_list .item .attachments.has_attachments:before {
  opacity: 0.7;
  filter: alpha(opacity=70);
  content: "\e622";
  font-size: 20px;
}
.messages_panel .items_list .item .attachments.has_vcard_attachment:before {
  content: "\e621";
}
.messages_panel .items_list .item .attachments.has_ical_attachment:before {
  content: "\e623";
}
.messages_panel .items_list .item.selected .attachments.has_attachments:before {
  color: #ffffff;
}
.messages_panel .items_list .item.checked .thread-pin {
  background: #ebf7cb;
}
.messages_panel .items_list .item.checked .thread-pin:hover {
  background-color: #e3f4b5;
}
.messages_panel .items_list .item .thread-pin {
  background: #FFFFFF;
  border: 1px solid #b1b4c0;
  border-radius: 9px;
  color: #b1b4c0;
  cursor: pointer;
  float: right;
  font-weight: bold;
  line-height: 100%;
  margin: -4px 0px 0px 6px;
  padding: 4px 8px 3px;
}
html.rtl .messages_panel .items_list .item .thread-pin {
  float: left;
}
.messages_panel .items_list .item .thread-pin.loading {
  background-color: #abaaa3;
  cursor: default;
}
.messages_panel .items_list .item .thread-pin:hover {
  -webkit-transition: background-color 200ms ease;
  -moz-transition: background-color 200ms ease;
  -o-transition: background-color 200ms ease;
  transition: background-color 200ms ease;
  background-color: #f2f2f2;
}
.messages_panel .items_list .item .thread-pin.unread {
  background-color: #b1b4c0;
  border: 1px solid #b1b4c0;
  color: #FFFFFF;
}
.messages_panel .items_list .item .thread-pin.unread:hover {
  background-color: #a3a6b5;
}
.messages_panel .items_list .item.selected .thread-pin {
  background: #78b8f0;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.messages_panel .items_list .item.selected .thread-pin:hover {
  background-color: #61aced;
}
.messages_panel .items_list .item.selected .thread-pin.unread {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #78b8f0;
}
.messages_panel .items_list .item.selected .thread-pin.unread:hover {
  background-color: #f2f2f2;
}
.messages_panel .items_list .item .from {
  margin-bottom: 6px !important;
}
.messages_panel .items_list .item .thread-pin {
  margin-top: 2px !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-moz-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 125dpi) {
  .file .icon,
  .messages_panel .items_list .item .marker,
  .panel.files .items_list .folder .icon,
  .html_editor .toolbar .item .icon {
    background-image: url("../../images/sprites2x.png");
    background-size: 1440px 560px;
  }
}
.messages_panel .items_list .not_use_threads .item .thread_loading,
.messages_panel .items_list .not_use_threads .item.thread_more_messages,
.messages_panel .items_list .not_use_threads .item .thread-pin {
  display: none;
}
.message_viewer .panel_top,
.message_viewer .panel_bottom {
  padding: 0px;
}
.message_viewer .panel_center {
  overflow: auto;
}
.newtab .message_viewer {
  height: 100%;
  width: 100%;
}
.message_viewer .panel_content {
  margin: 0px !important;
  padding: 0px !important;
}
.message_viewer .message_body {
  font-size: 11pt;
  padding: 20px;
}
.message_viewer .message_body li {
  margin-bottom: 0.6em;
}
.message_viewer .message_body_info {
  color: #cccccc;
  font: normal 18px Tahoma;
  margin: 30px;
  text-align: center;
}
.message_viewer .message_body_info .message_body_secondary_info {
  font-size: 14px;
  margin-top: 10px;
}
.message_viewer .message_header {
  background: #FFFFFF;
  color: #4d4d4d;
  padding-bottom: 6px;
  position: relative;
  white-space: normal;
}
.message_viewer .message_header .nosubject .subject {
  color: #888888;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.message_viewer .message_header .resizer {
  height: 85px;
}
.message_viewer .message_header .resizer.large {
  height: 130px;
}
.message_viewer .message_header .header_row {
  clear: both;
}
.message_viewer .message_header .header_row:last-child {
  margin-top: 12px;
}
.message_viewer .message_header .toolbar {
  background: none;
  border: 0px;
  filter: none;
  float: right;
  margin-bottom: 0px;
  max-width: 100%;
  overflow: visible;
  padding: 0px;
  position: relative;
  top: -4px;
  width: auto;
  z-index: 1;
}
html.rtl .message_viewer .message_header .toolbar {
  float: left;
}
.message_viewer .message_header .toolbar .content {
  padding: 0px;
}
.message_viewer .message_header .toolbar .content > .item {
  background: none !important;
  border: 0px;
  box-shadow: none !important;
  margin-right: 16px;
  padding: 0px;
}
.message_viewer .message_header .toolbar .content > .item:last-child {
  margin-right: 0px;
}
.message_viewer .message_header .toolbar .content > .item .icon.arrow:before {
  font-size: 20px;
}
.message_viewer .message_header .toolbar .content > .item .dropdown .item .icon {
  margin-right: 5px;
}
.message_viewer .message_header .header_content {
  padding: 18px 18px 8px;
}
.message_viewer .message_header .message_info {
  font-size: 10pt;
  padding-top: 1px;
  /* fix nested element negative margin */
  position: relative;
}
html.rtl .message_viewer .message_header .message_info {
  margin-right: 14px;
}
.message_viewer .message_header .message_info .message_info_line {
  margin: 0;
  overflow: hidden;
  position: relative;
  top: -4px;
  white-space: nowrap;
}
.message_viewer .message_header .message_info .message_info_line .to_arrow {
  display: inline-block;
  height: 1em;
  line-height: 1;
  margin: 0 0 4px;
  vertical-align: middle;
}
.message_viewer .message_header .message_info.message_detail_info .message_info_line:last-child {
  margin-top: 8px;
}
.message_viewer .message_header .message_info.message_detail_info .message_info_line {
  max-height: 72px;
  overflow-y: auto !important;
  white-space: normal;
}
.message_viewer .message_header .details_show,
.message_viewer .message_header .details_hide {
  color: #727272;
  display: inline-block;
  float: left;
  height: 16px;
  overflow: hidden;
  position: absolute;
  vertical-align: bottom;
  width: 16px;
}
html.rtl .message_viewer .message_header .details_show,
html.rtl .message_viewer .message_header .details_hide {
  margin-left: 6px;
  margin-right: 0px;
}
.message_viewer .message_header .details_show:before,
.message_viewer .message_header .details_hide:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.message_viewer .message_header .details_show:before,
.message_viewer .message_header .details_hide:before {
  content: "\e66d";
  display: inline-block;
  font-size: 18px;
}
.message_viewer .message_header .details_hide:before {
  content: "\e66e";
}
.message_viewer .message_header .title {
  color: #777777;
}
.message_viewer .message_header .subject {
  color: #4d4d4d;
  display: inline-block;
  font-size: 18pt;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}
.message_viewer .message_header .icon {
  margin: 0px;
  padding: 0px;
}
.message_viewer .message_header .icon .attachments {
  background: url("../../images/sprites.png") no-repeat -120px -120px;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 16px;
  margin-right: 8px;
  width: 16px;
}
html.rtl .message_viewer .message_header .icon .attachments {
  float: right;
  margin-left: 8px;
  margin-right: 0px;
}
.message_viewer .message_header .date {
  float: right;
  font-size: 8.5pt;
  margin-top: 6px;
}
html.rtl .message_viewer .message_header .date {
  float: left;
}
.message_viewer .message_header .from {
  font-weight: bold;
}
html.rtl .message_viewer .message_header .from {
  padding-right: 7px;
}
.message_viewer .notice {
  background: #FDE199;
  border-bottom: 1px solid #eae7ca;
  color: #b5ad94;
  font-size: 8pt;
  padding: 4px 6px;
}
.message_viewer .notice .item {
  display: block;
}
.message_viewer .notice .link {
  color: #1CCDF7;
}
.message_viewer .message {
  height: 100%;
}
.message_viewer .message .message_content {
  height: 100%;
  overflow: auto;
  white-space: normal;
}
.message_viewer .message .message_content .bodyparts_separator {
  background-color: #e2e2e2;
  display: none;
  height: 1px;
  margin: 0px 20px;
}
.message_viewer .message.has_bodytext.has_attachments .bodyparts_separator {
  display: block;
}
.message_viewer .appointment {
  background: #b4ecd1;
  border-bottom: 1px solid #8be2b8;
  padding: 15px;
}
.message_viewer .appointment .row.fluid {
  padding-left: 100px;
}
.message_viewer .appointment .label {
  vertical-align: top;
  width: 100px;
}
.message_viewer .appointment .row.fluid .label {
  margin-left: -100px;
}
.message_viewer .appointment .value {
  display: inline-block;
  -ms-word-break: break-all;
  word-wrap: break-word;
}
.message_viewer .appointment .row.fluid .value {
  width: 99%;
}
.message_viewer .appointment .event_state {
  color: #929292;
  padding-left: 5px;
}
.message_viewer .appointment .buttons {
  display: inline-block;
  margin-top: 7px;
}
.message_viewer .appointment .buttons .button {
  margin-right: 5px;
}
.message_viewer .appointment .buttons .button.selected_button {
  background: #ffffff;
  border: 1px solid #6fa8de;
  color: #4f88be;
  cursor: default;
  text-shadow: none;
}
.message_viewer .appointment .buttons .button.selected_button.disabled {
  color: #808080;
}
.message_viewer .appointment .buttons .button.selected_button.disabled:hover {
  background: #ffffff;
}
.message_viewer .appointment .buttons.animation .button {
  -webkit-transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
  -moz-transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
  -o-transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
  transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
}
.message_viewer .appointment .buttons.touched .button {
  opacity: 0.4;
}
.message_viewer .appointment .buttons.touched .button:hover,
.message_viewer .appointment .buttons.touched .button.selected_button {
  opacity: 1;
}
.message_viewer .panels.has_attachments {
  padding-right: 170px;
}
.message_viewer .panels.has_attachments .message_panel {
  border-right: 1px solid #e2e2e2;
}
.message_viewer .message_panel {
  border-radius: 0px;
  box-shadow: none;
  width: 100%;
}
.message_viewer .attachments_panel {
  box-shadow: none;
  float: right;
  margin-right: -170px;
  width: 170px;
}
.panel.thread_viewer .panel_top .expand .owner.found,
.message_viewer .message_header .expand .from.found {
  background: #ffffff;
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin: -3px -7px 0px 0px;
  padding: 3px 7px 0px;
  position: relative;
  z-index: 1001;
}
.item_viewer .add_contact {
  color: #00AEEF;
  cursor: pointer;
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  width: auto;
}
.item_viewer .add_contact:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.item_viewer .add_contact:before {
  content: "\e641";
  display: inline-block;
  font-size: 15px;
  height: auto;
  margin: 0;
  vertical-align: bottom;
  width: auto;
}
.toolbar .sort .icon:before {
  content: "\e913";
}
.toolbar .sort .dropdown_content .item.selected {
  background: #f9f9f9 !important;
}
.toolbar .sort-order-icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  -webkit-font-smoothing: antialiased;
  content: "\e66d";
  display: inline-block;
  font-size: 16px;
  vertical-align: text-bottom;
}
.toolbar .sort-order-desc-icon:before {
  content: "\e66e";
}
.MailComposeLayout .panels,
.compose_popup .panels {
  background: #ffffff;
  height: 100% !important;
}
.MailComposeLayout .panels .panel,
.compose_popup .panels .panel {
  flex-grow: 1 !important;
}
.panel.compose {
  background: #f9f9f9;
  box-shadow: -1px 0 4px rgba(0, 0, 0, 0.23);
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
.panel.compose .message_panel {
  box-shadow: 3px 0 2px #f1f1f1;
  width: 80%;
  z-index: 2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.panel.compose .message_panel .panel_top {
  border: 0px;
  margin-bottom: 6px;
  padding: 6px 11px 0px;
  position: relative;
}
.panel.compose .message_panel .panel_center {
  overflow: hidden;
}
.panel.compose .message_panel .panel_bottom {
  background: none;
  border: 0px;
  border-radius: 0px;
  height: auto;
  overflow: hidden;
  padding: 8px 12px 0 12px;
  white-space: nowrap;
  word-wrap: normal;
}
.panel.compose .message_panel .panel_bottom .hint {
  display: inline-block;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}
.panel.compose .message_panel .panel_bottom .hotkey_value {
  color: #5a6373;
  margin: 0 4px 0 0;
  text-shadow: 0 1px 0 #ffffff;
}
.panel.compose .message_panel .panel_bottom .hotkey_action {
  color: #222222;
  margin: 0 12px 0 0;
  text-shadow: 0 1px 0 #dddddd;
}
.panel.compose .message_panel .panel_bottom .more_hints {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
}
.panel.compose .message_panel .panel_bottom .more_hints .icon {
  font-size: 16pt;
  cursor: pointer;
  overflow: hidden;
}
.panel.compose .message_panel .panel_bottom .more_hints .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.compose .message_panel .panel_bottom .more_hints .icon:before {
  content: "\e651";
}
.panel.compose .message_panel .panel_bottom .more_hints .dropdown .item {
  cursor: auto !important;
}
.panel.compose .message_panel .panel_bottom .more_hints .dropdown .item:hover {
  background: none;
}
.panel.compose .attachments_panel {
  background: #fafafa;
  border-radius: 0px;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  width: 20%;
}
.panel.compose .attachments_panel .middle_bar .panel_top {
  border: none;
  line-height: 180%;
  padding: 35px 10px 6px;
  text-align: center;
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button {
  color: #aaaaaa;
  cursor: pointer;
  display: inline;
  margin-right: 21px;
  vertical-align: middle;
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button:hover {
  color: #888888;
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button .icon {
  display: inline-block;
  font-size: 28px;
  height: 24px;
  vertical-align: middle;
  width: 24px;
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button.google .icon:before {
  content: "\e654";
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button.dropbox .icon:before {
  content: "\e655";
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button.files .icon:before {
  content: "\e656";
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button.desktop .icon:before {
  content: "\e622";
}
.panel.compose .attachments_panel .middle_bar .panel_top .uploader_button .text {
  display: none;
}
.panel.compose .attachments_panel .middle_bar .panel_center {
  background-color: inherit;
}
.panel.compose .html_editor {
  padding: 0px 11px 21px 11px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.panel.compose .html_editor .disable_mask {
  height: calc(100% - 22px);
  width: calc(100% - 22px);
}
.panel.compose .html_editor .plaintext_switcher {
  bottom: 0;
  position: absolute;
  margin: 6px;
  right: 0;
  outline: none;
}
.panel.compose .html_editor .plaintext {
  height: 100%;
}
.panel.compose .html_editor .plaintext textarea {
  background: white;
  /* For Dark themes */
  color: black !important;
  /* For Dark themes */
  border: 0;
  height: 98%;
  outline: none;
  padding: 1%;
  resize: none;
  width: 98%;
}
.panel.compose .input.inputosaurus {
  position: relative;
}
.panel.compose .disable_mask {
  background: #cccccc;
  cursor: default;
  height: 100%;
  opacity: 0.2;
  position: absolute;
  width: 100%;
  z-index: 100;
}
.panel.compose .panel_content > .toolbar {
  background: #f7f7f7;
  filter: none;
}
.panel.compose .panel_content > .toolbar .content > .item,
.panel.compose .panel_content > .toolbar .content > .item:hover {
  background: none;
  border: none;
}
.panel.compose .panel_content > .toolbar .text {
  display: inline-block;
}
.panel.compose .panel_content > .toolbar .back .text {
  display: none;
}
.panel.compose .panel_content > .toolbar .icon {
  display: none;
}
.panel.compose .panel_content > .toolbar .back .icon,
.panel.compose .panel_content > .toolbar .new_window .icon,
.panel.compose .panel_content > .toolbar .save_and_close .icon,
.panel.compose .panel_content > .toolbar .minimize .icon,
.panel.compose .panel_content > .toolbar .maximize .icon,
.panel.compose .panel_content > .toolbar .confirmation .icon,
.panel.compose .panel_content > .toolbar .pgp .icon {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
}
.panel.compose .panel_content > .toolbar .new_window,
.panel.compose .panel_content > .toolbar .minimize,
.panel.compose .panel_content > .toolbar .maximize,
.panel.compose .panel_content > .toolbar .save_and_close {
  background: transparent;
  border: 0px;
  box-shadow: none;
  float: right;
}
html.rtl .panel.compose .panel_content > .toolbar .new_window,
html.rtl .panel.compose .panel_content > .toolbar .minimize,
html.rtl .panel.compose .panel_content > .toolbar .maximize,
html.rtl .panel.compose .panel_content > .toolbar .save_and_close {
  float: left;
}
.panel.compose .notice {
  background: #ffffc5;
  border-bottom: 1px solid #f5edd4;
  color: #b5ad94;
  padding: 8px 25px;
  margin: -6px -10px 0;
}
.panel.compose .notice.notice-auto-encrypt {
  background: inherit;
  border-color: #e2e2e2;
  color: inherit;
  font-size: 16px;
}
.panel.compose .notice.notice-auto-encrypt .custom_checkbox {
  margin: 0;
  vertical-align: unset;
}
.panel.compose .notice.notice-auto-encrypt .notice-auto-encrypt-info {
  font-size: 14px;
  padding-top: 9px;
}
.panel.compose .notice.notice-auto-encrypt .notice-auto-encrypt-icon {
  float: left;
  font-size: 35px;
  margin-left: -23px;
}
.panel.compose .notice.notice-auto-encrypt .notice-auto-encrypt-icon:after {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panel.compose .notice.notice-auto-encrypt .notice-auto-encrypt-icon:after {
  content: "\e658";
  vertical-align: middle;
  text-shadow: 0 0 1px grey;
}
.panel.compose .address_capsule_key_encrypt,
.panel.compose .address_capsule_key_not_encrypt,
.panel.compose .address_capsule_key_sign {
  display: none;
}
.panel.compose .address_capsule_key_unset {
  display: unset;
}
.panel.compose.compose-auto-encrypt .address_capsule_key_encrypt,
.panel.compose.compose-auto-encrypt .address_capsule_key_not_encrypt,
.panel.compose.compose-auto-encrypt .address_capsule_key_sign {
  display: unset;
}
.panel.compose.compose-auto-encrypt .address_capsule_key_unset {
  display: none;
}
.panel.compose.compose-auto-encrypt .notice-auto-encrypt {
  background: #96c671;
  border-color: #82b35d;
  color: white;
}
.panel.compose table.fields {
  width: 100%;
}
.panel.compose table.fields > tbody > tr {
  border-bottom: 1px solid #e2e2e2;
}
.panel.compose table.fields table {
  width: 100%;
}
.panel.compose table.fields td {
  padding: 0px 0px 10px;
}
.panel.compose table.fields td td {
  padding: 0px;
}
.panel.compose table.fields .label {
  color: #bababa;
  font-size: 13pt;
  padding: 4px 10px 4px 0px;
  text-align: right;
  width: 90px;
}
html.rtl .panel.compose table.fields .label {
  text-align: left;
}
.panel.compose table.fields .value {
  padding: 4px 0px;
}
.panel.compose table.fields .value .not_editable {
  font-size: 13pt;
  padding: 10px;
}
.panel.compose table.fields .input {
  border: none;
  box-shadow: none;
  min-width: 100%;
  padding: 8px 10px;
}
.panel.compose table.fields .input,
.panel.compose table.fields .inputosaurus input {
  color: #444444;
  font-size: 13pt;
}
.panel.compose table.fields textarea.input {
  width: 100%;
  height: 300px;
}
.panel.compose table.fields .link {
  text-decoration: underline;
  cursor: pointer;
}
.panel.compose table.fields .link:hover {
  color: #2b5877;
  text-decoration: none;
}
.panel.compose table.fields .auto-encrypt-sign-message,
.panel.compose table.fields .from,
.panel.compose table.fields .to,
.panel.compose table.fields .cc,
.panel.compose table.fields .bcc,
.panel.compose table.fields .subject {
  font-size: 11pt;
}
.panel.compose table.fields .to .link {
  color: #00AEEF;
  display: inline-block;
  font-size: 11pt;
}
.panel.compose table.fields .to .link:hover {
  color: #009EED;
}
.panel.compose table.fields .show_bcc,
.panel.compose table.fields .show_cc {
  margin-left: 10px;
}
.panel.compose table.fields .cc .inputosaurus,
.panel.compose table.fields .bcc .inputosaurus,
.panel.compose table.fields .to .inputosaurus {
  padding: 0px;
}
.panel.compose table.fields .cc .inputosaurus .scroll-inner,
.panel.compose table.fields .bcc .inputosaurus .scroll-inner,
.panel.compose table.fields .to .inputosaurus .scroll-inner {
  max-height: 100px;
}
.panel.compose table.fields .auto-encrypt-sign-message .custom_checkbox {
  vertical-align: unset;
}
.panel.compose .attachments {
  z-index: 1;
}
.panel.compose .attachments .uploader_mask {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity 250ms ease 0s;
  -moz-transition: opacity 250ms ease 0s;
  -o-transition: opacity 250ms ease 0s;
  transition: opacity 250ms ease 0s;
  background: #fffdd6;
  color: #d3b910;
  font-size: 18pt;
  height: 100%;
  left: 0px;
  opacity: 0;
  padding: 11px;
  position: absolute;
  text-align: center;
  top: 0px;
  visibility: hidden;
  width: 100%;
}
.panel.compose .attachments .uploader_mask.active {
  visibility: visible;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.panel.compose .attachments .uploader_mask .inner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px dashed #e2da36;
  border-radius: 5px;
  height: 100%;
}
.panel.compose .attachments .items_list {
  height: 100%;
}
.panel.compose .attachments .items_list .list_notification {
  padding-top: 24px;
}
.panel.compose .attachments .attachments_container {
  padding: 20px;
}
.panel.compose .attachments .notice {
  margin: -34px -9px 11px;
  padding: 8px 11px;
  white-space: normal;
}
.compose_popup {
  z-index: 1000;
}
.compose_popup:not(.minimized) {
  position: absolute;
}
.compose_popup.minimized {
  bottom: 0;
  height: auto;
  left: auto;
  right: 0;
  top: auto;
  width: auto;
  background: #2db774;
}
.compose_popup.minimized .toolbar {
  background: none;
  border: 0px;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}
.compose_popup.minimized .toolbar .item.minimized_title {
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compose_popup.minimized .toolbar .item.minimized_title,
.compose_popup.minimized .toolbar .item.minimized_title:hover,
.compose_popup.minimized .toolbar .item.maximize,
.compose_popup.minimized .toolbar .item.save_and_close {
  background: transparent;
  border: none;
  box-shadow: none;
  float: none;
}
.compose_popup.minimized .toolbar .item.minimized_title .text,
.compose_popup.minimized .toolbar .item.minimized_title:hover .text,
.compose_popup.minimized .toolbar .item.maximize .text,
.compose_popup.minimized .toolbar .item.save_and_close .text {
  display: inline;
  color: #fff;
}
.compose_popup.minimized .toolbar .item.minimized_title .icon,
.compose_popup.minimized .toolbar .item.minimized_title:hover .icon,
.compose_popup.minimized .toolbar .item.maximize .icon,
.compose_popup.minimized .toolbar .item.save_and_close .icon {
  color: #fff;
}
.compose_popup.minimized .toolbar .item.minimized_title:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.compose_popup .popup_panel {
  height: 90%;
  max-width: 90%;
  padding: 0;
  width: 90%;
}
blockquote {
  /*while editing see also print message*/
  border-left: solid 2px #000000;
  margin: 4px 2px;
  padding-left: 6px;
}
.blockquote_before_toggle {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.blockquote_before_toggle.collapsed .blockquote_content {
  height: 100%;
  overflow: hidden;
}
.blockquote_before_toggle.collapsed::before {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffffff',GradientType=0);
  content: "";
  display: block;
  bottom: 0;
  height: 100%;
  margin-left: -8px;
  padding: 0px 4px;
  position: absolute;
  width: 100%;
}
.blockquote_toggle {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  border-radius: 4px 4px 4px 4px;
  color: grey;
  cursor: pointer;
  display: inline-block;
  font: 12px/120% Arial, sans-serif;
  padding: 2px 6px;
}
.add_account .popup_panel,
.add_fetcher .popup_panel,
.add_folder .popup_panel,
.folders_setup .popup_panel {
  background: #f1f1f1 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNo0iIEJACAAwlT8/1GPMAsaKGNMYpskAOPRdq9tWbrifpaOAAMAMvEO3ANCJPYAAAAASUVORK5CYII=") repeat 0 0;
}
.add_fetcher .row.hint {
  margin-bottom: 16px;
}
.panels.settings .tabs_container .fieldset.fieldset_external_access_servers .fieldgroup .row {
  display: flex;
}
.panels.settings .tabs_container .fieldset.fieldset_external_access_servers .fieldgroup .row > .value:nth-of-type(2) {
  flex-basis: 200px;
}
.fields .row.filter {
  font-size: 9pt;
  line-height: 1.4;
}
.fields .row.filter .value {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.fields .row.filter .value .filter_content {
  flex: 1 1 auto;
  min-width: 0;
}
.fields .row.filter .value .filter_remove {
  flex: 0 0 auto;
  margin: 0 0 0 16px;
  padding: 0;
  text-align: right;
  margin-top: 0 !important;
}
.fields .row.filter .value .filter_remove .button {
  margin: 0;
}
html.rtl .fields .row.filter .value .filter_remove {
  margin: 0 16px 0 0;
  text-align: left;
}
.fields .row.filter .value .filter_content_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  column-gap: 0;
  width: auto;
}
html:not(.rtl) .fields .row.filter .value .filter_content_inner {
  padding-left: 17px;
}
html.rtl .fields .row.filter .value .filter_content_inner {
  padding-right: 17px;
}
.fields .row.filter .value .custom_checkbox {
  flex-shrink: 0;
  align-self: center;
}
html:not(.rtl) .fields .row.filter .value .custom_checkbox {
  margin-left: -17px;
}
html.rtl .fields .row.filter .value .custom_checkbox {
  margin-right: -17px;
}
.fields .row.filter .value .filter_group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  align-self: center;
}
.fields .row.filter .value .filter_group .part,
.fields .row.filter .value .filter_group .field,
.fields .row.filter .value .filter_group .input,
.fields .row.filter .value .filter_group .link {
  vertical-align: middle;
  align-self: center;
  line-height: 1;
}
.fields .row.filter .value .filter_group input.part.input {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 0;
}
.fields .row.filter .value .filter_if_group {
  flex: 0 1 auto;
  min-width: 0;
}
.fields .row.filter .value .filter_then_group {
  flex: 0 1 auto;
  min-width: 0;
}
.fields .row.filter .value .part {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 9pt;
}
html:not(.rtl) .fields .row.filter .value .part {
  margin-right: 4px;
}
html.rtl .fields .row.filter .value .part {
  margin-left: 4px;
}
html:not(.rtl) .fields .row.filter .value .part:last-child {
  margin-right: 0;
}
html.rtl .fields .row.filter .value .part:last-child {
  margin-left: 0;
}
.fields .row.filter .value .part.input {
  white-space: normal;
  width: auto;
  min-width: 120px;
}
html:not(.rtl) .fields .row.filter .value .part.input {
  margin-right: 4px;
}
html.rtl .fields .row.filter .value .part.input {
  margin-left: 4px;
}
.fields .row.filter .value .part.field .field,
.fields .row.filter .value .part.field .link {
  display: inline-block;
}
.panels.settings .fieldset.fieldset_external_access_servers {
  border-color: #d8d7d7;
  margin: 0;
  padding: 0 20px;
}
.items_list.simple_list .item.fetcher .icon {
  display: inline-block;
  font-size: 20px;
  height: 18px;
  vertical-align: bottom;
  width: 18px;
}
.items_list.simple_list .item.fetcher .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.items_list.simple_list .item.fetcher .icon.fetcher:before {
  content: "\e65b";
}
.items_list.simple_list .item.fetcher .icon.default-identity {
  font-family: monospace;
  font-size: 19px;
  height: 17px;
  margin-left: 10px;
}
.items_list.simple_list .item.fetcher .label {
  color: #929292;
}
.items_list.simple_list .item.fetcher .title {
  font-weight: bold;
}
.items_list.simple_list .item.fetcher .info {
  float: right;
}
.items_list.simple_list .item .link.fetcher {
  float: right;
  font-weight: normal;
  margin-left: 12px;
}
.items_list.simple_list .icon_oauth {
  border-radius: 20px;
  max-height: 36px;
  vertical-align: middle;
}
.items_list.simple_list .title_oauth {
  font-size: 10pt;
  font-weight: bold;
  line-height: 36px;
  margin-left: 6px;
  vertical-align: middle;
}
.AdminPanelLayout .items_list.simple_list {
  margin: 0px 20px 30px;
}
.AdminPanelLayout .items_list.simple_list .item .title {
  mask: none;
  -webkit-mask: none;
  -o-mask: none;
  -ms-mask: none;
}
.buttons {
  margin-left: 7px;
}
.buttons .add_account_button {
  background: #00AEEF;
  border: 1px solid #0089bc;
  color: #ffffff;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.buttons .add_account_button:hover {
  background: #009bd6;
}
.buttons .add_account_button.disabled {
  color: #80d7f7;
}
.buttons .add_account_button.disabled:hover {
  background: #00AEEF;
}
.buttons .contour_button {
  color: #2db774;
}
.buttons .contour_button,
.buttons .contour_button:hover {
  background: white !important;
  text-shadow: none !important;
}
.toolbar .buttons {
  margin: 0;
  padding: 0;
}
.toolbar .buttons .button {
  padding: 5px 20px 4px;
  text-shadow: none;
}
.compose .buttons.group .item,
.compose .buttons.group .item:hover {
  background: none;
  border: 0px;
}
.buttons .item.buttons_send_arrow {
  padding-left: 0 !important;
  margin-left: -11px !important;
}
.buttons .item.buttons_send_arrow .button {
  height: 100%;
  padding: 0 7px;
  vertical-align: middle;
}
.buttons .item.buttons_send_arrow .arrow {
  margin-top: 7px;
  font-family: 'afterlogic';
}
.table-compressor {
  bottom: 0;
  color: #cccccc;
  cursor: pointer;
  height: 16px;
  left: 0%;
  margin-bottom: -8px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.table-compressor:hover {
  color: #999999;
}
.table-compressor.compressed .arrow {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.table-compressor .arrow {
  position: absolute;
  top: -2px;
  -webkit-transition: transform 0.4s;
  -moz-transition: transform 0.4s;
  -o-transition: transform 0.4s;
  transition: transform 0.4s;
}
.table-compressor .arrow:after {
  background: white;
  content: "\e66e";
  font-family: 'afterlogic';
  font-size: 18px;
  line-height: 15px;
  position: relative;
  display: inline-block;
  border-radius: 4px;
}
.layout-horiz-split.csstransitions .quick_reply {
  margin: 0 10px;
}
.layout-horiz-split.csstransitions .quick_reply .buttons {
  margin: 0;
}
.layout-horiz-split.csstransitions .quick_reply.active .buttons {
  margin: 10px 0;
}

.layout-horiz-split .message_viewer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.layout-horiz-split .message_viewer .panel_content {
  border-top: 1px solid #f1f1f1;
}
.layout-horiz-split .message_viewer .notice .item {
  display: inline-block;
}
.layout-horiz-split .message_viewer .message_header .header_content {
  padding: 8px 12px 4px;
}
.layout-horiz-split .message_viewer .message_header .header_row:last-child {
  margin-top: 0;
}
.layout-horiz-split .message_viewer .message_header .subject {
  font-size: 16pt;
}
.layout-horiz-split .list_notification {
  padding: 6px 14px 12px;
}
.layout-horiz-split .list_notification .description {
  padding-top: 8px;
}
.layout-horiz-split .horiz_split_panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.layout-horiz-split .messages_panel {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.layout-horiz-split .messages_panel .panel_content {
  border-bottom: 1px solid #f1f1f1;
}
.layout-horiz-split .messages_panel .toolbar .content {
  padding: 4px;
}
.layout-horiz-split .messages_panel .toolbar .item {
  /*				.icon {
					display: none;
					&.arrow {
						display: inline-block;
					}
				}*/
}
.layout-horiz-split .messages_panel .toolbar .item.checkstate {
  float: left;
}
.layout-horiz-split .messages_panel .toolbar .item .text {
  display: inline-block;
  font-size: 11pt;
}
.layout-horiz-split .messages_panel .panel_top .search_block {
  width: 60%;
}
.layout-horiz-split .messages_panel .panel_center {
  border-radius: 0 0 4px 4px;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content {
  padding: 6px 16px 6px 14px;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .controls {
  display: inline-flex;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .controls .custom_checkbox {
  margin-right: 10px;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .controls .flag {
  margin-top: -3px;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .date,
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .attachments,
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .from,
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .separator,
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .thread-pin,
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .subject {
  display: inline-block;
  margin-top: 0 !important;
  margin-bottom: 0;
  vertical-align: middle;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .from {
  width: 30%;
  margin: 0 !important;
  min-height: unset;
  font-size: 11pt;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .subject {
  width: 50%;
  font-size: 11pt;
  line-height: normal;
}
.layout-horiz-split .messages_panel .panel_center .message_list .item_content .data .thread-pin {
  font-size: 8pt;
  padding: 2px 8px 2px;
  margin-right: 4px;
}
.layout-horiz-split .messages_panel .middle_bar {
  position: relative;
}
.layout-horiz-split .messages_panel .middle_bar .panel_bottom {
  position: absolute;
  right: 0;
  background: none;
  padding: 5px;
  top: 0;
}
.settings .folders .controls .button.template:before {
  content: "\e90f";
}
.settings .folders .controls .button.template.turned-on:before {
  content: "\e90e";
}
.settings .folders .controls .button.always-refresh:before {
  content: "\e911";
}
.settings .folders .controls .button.always-refresh.turned-on:before {
  content: "\e910";
}
.folders .item .icon.type8:before {
  content: "\e90e";
}
.mail-servers-pagination {
  margin: -20px 25px 90px;
}
.mail-servers-pagination .pagination {
  float: left;
  margin-top: 5px;
}
.mail-servers-pagination .search_block {
  float: left;
  width: 300px;
}
.search_block .input.expand .folder_select .dropdown {
  opacity: 0;
}
.search_block .input.expand .folder_select.expand .dropdown {
  opacity: 1;
}
.search_block .folders_search {
  color: #bbbbbb;
  font-size: 12pt;
  float: left;
  margin-left: 32px;
  margin-top: -34px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: max-height 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.1s;
  -moz-transition: max-height 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.1s;
  -o-transition: max-height 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.1s;
  transition: max-height 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.1s;
}
.search_block .folders_search.folders_search_expand {
  opacity: 1;
  visibility: visible;
  -webkit-transition: max-height 0.9s ease 0s, opacity 0.9s ease 0s, visibility 0.9s;
  -moz-transition: max-height 0.9s ease 0s, opacity 0.9s ease 0s, visibility 0.9s;
  -o-transition: max-height 0.9s ease 0s, opacity 0.9s ease 0s, visibility 0.9s;
  transition: max-height 0.9s ease 0s, opacity 0.9s ease 0s, visibility 0.9s;
}
.search_block .folders_search .folders_search_label {
  position: relative;
}
.search_block .folders_search .folders_search_select {
  display: inline-block;
  margin-right: 8px;
  position: relative;
}
.search_block .folders_search .link,
.search_block .folders_search .link:hover {
  border-bottom: 1px dashed #4477bb;
  color: #4477bb;
  text-decoration: none;
}
.login_panel .social {
  margin-bottom: 10px;
  text-align: left;
}
.login_panel .social .info {
  color: #929292;
  font-size: 14px;
  margin: 14px 2px 10px;
  text-align: center;
}
.login_panel .social .button {
  background-repeat: no-repeat;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  height: 18px;
  margin-bottom: 14px;
  padding: 10px 15px 10px 54px;
  position: relative;
  text-align: left;
}
.login_panel .social .button .border {
  width: 1px;
  height: 38px;
  position: absolute;
  left: 38px;
  top: 0;
}
.login_panel .social .button .text {
  font-size: 10.5pt;
  font-weight: normal;
}
.login_panel .social .info {
  color: #fff;
}
.popup_panel .label.pgp_password {
  text-align: right;
}
.popup_panel .import_pgp_key_area {
  height: 300px;
  width: 530px;
}
.popup_panel .import_pgp_key_area .headline {
  margin: 30px 0 10px;
  font-size: 16px;
}
.popup_panel .import_pgp_key_area .key_item {
  margin: 0 0 10px 0;
}
.popup_panel .import_pgp_key_area .key_item.disabled {
  color: #929292;
  padding-left: 24px;
}
.popup_panel .import_pgp_key_area .key_item .key_email {
  font-weight: bold;
}
.popup_panel .view_pgp_key_area {
  height: 400px;
  width: 530px;
}
.recaptcha-place-cover {
  margin-left: -30px;
}
.panels.settings .folders .items_list .item {
  background: none;
  max-height: inherit;
}
.panels.settings .folders .items_list .item > .title {
  color: #aaaaaa;
  cursor: default;
  display: block;
  font-size: 11pt;
  font-weight: normal;
  line-height: normal;
  margin-bottom: 0px;
  outline: none;
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.panels.settings .folders .items_list .item > .title .name {
  display: block;
  margin-right: 10px;
  overflow: hidden;
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panels.settings .folders .items_list .item > .title .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
html.rtl .panels.settings .folders .items_list .item > .title .name {
  margin-left: 10px;
  margin-right: 0px;
}
.panels.settings .folders .items_list .item > .title.droppableHover .name {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panels.settings .folders .items_list .item > .title.droppableHover .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.panels.settings .folders .items_list .item > .title .text {
  display: inline-block;
  vertical-align: bottom;
}
.panels.settings .folders .items_list .item > .title .icon {
  display: inline-block;
  height: 20px;
  vertical-align: bottom;
  width: 20px;
}
.panels.settings .folders .items_list .item > .title .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panels.settings .folders .items_list .item > .title .icon:before {
  display: inline-block;
  height: 100%;
  font-size: 20px;
  width: 100%;
}
.panels.settings .folders .items_list .item > .title.ui-droppable-hover {
  border-radius: 8px;
  background-color: rgba(255, 238, 199, 0.3) !important;
}
.panels.settings .folders .items_list .item.canSelect > .title {
  color: #777777;
  cursor: pointer;
  text-shadow: 0px 1px 0px #ffffff;
}
.panels.settings .folders .items_list .item.canSelect > .title:hover {
  color: #444444;
}
.panels.settings .folders .items_list .item.canSelect > .title:hover .icon {
  color: inherit;
}
.panels.settings .folders .items_list .item.canSelect > .title.virtualEmpty .title,
.panels.settings .folders .items_list .item.canSelect > .title.virtualEmpty .title:hover {
  color: #aaaaaa;
}
.panels.settings .folders .items_list .item.canSelect > .title.ui-state-disabled {
  cursor: pointer !important;
}
.panels.settings .folders .items_list .item.selected > .title {
  background: #287B8B;
  color: #ffffff !important;
}
.panels.settings .folders .items_list .item .count {
  display: inline-block;
  float: right;
  margin-right: 0px;
  margin-top: 0px;
  padding: 2px 10px 1px;
  line-height: 1.3;
}
html.rtl .panels.settings .folders .items_list .item .count {
  float: left;
  margin-left: 10px;
  margin-right: 0px;
}
.panels.settings .folders .items_list .item .count.total {
  color: #ececec;
}
.panels.settings .folders .items_list .item .count:first-child {
  margin-right: 10px;
}
.panels.settings .folders .items_list .item .count.unseen:hover {
  border-radius: 11px/10px;
}
.panels.settings .folders .items_list .item.selected > .title .count.unseen {
  border-radius: 11px/10px;
}
.panels.settings .folders .items_list.collapsible .item.accordion .collapse_handler {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
}
.panels.settings .folders .items_list.collapsible .item.accordion .collapse_handler:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panels.settings .folders .items_list.collapsible .item.accordion .collapse_handler:before {
  display: inline-block;
  font-size: 16px;
  height: 100%;
  vertical-align: middle;
  width: 100%;
}
.panels.settings .folders .items_list.collapsible .item.accordion .collapse_handler.expanded:before {
  content: "\e66e";
}
.panels.settings .folders .items_list.collapsible .item.accordion .collapse_handler.collapsed:before {
  content: "\e66d";
}
.panels.settings .folders .items_list.collapsible .item.accordion.canNotSelect .collapse_handler {
  color: #777777;
  cursor: pointer;
  text-shadow: 0px 1px 0px #ffffff;
}
.panels.settings .folders .items_list.collapsible .item.accordion.canNotSelect .collapse_handler:hover {
  color: #444444;
}
.panels.settings .folders .items_list.collapsible .item.accordion.canNotSelect .collapse_handler:hover .icon {
  color: inherit;
}
.panels.settings .folders .items_list.collapsible .item.accordion .children .title {
  max-height: 29px;
  -webkit-transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
  -moz-transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
  -o-transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
  transition: max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms;
}
.panels.settings .folders .items_list.collapsible .item.accordion.collapsed .children .title {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0px;
  padding-top: 0px;
}
.cssanimations .panels.settings .folders .item .title.recivedAnim {
  -webkit-animation: highlight 0.5s linear;
  -moz-animation: highlight 0.5s linear;
  animation: highlight 0.5s linear;
}
.panels.settings .folders .item .title.droppableHover {
  background: #dfdcd4 !important;
  color: #626262 !important;
  text-shadow: 0px 1px 0px #ffffff !important;
}
.panels.settings .folders .item.selected > .title.droppableHover {
  background: #2a6470 !important;
  color: #ffffff !important;
  text-shadow: 0px 1px 0px #678197 !important;
}
.panels.settings .folders .items_list .item .count {
  background: none;
}
.panels.settings .folders .items_list .item .title .name {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panels.settings .folders .items_list .item .title .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.panels.settings .folders .items_list .item.canDrag .title:hover .name {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panels.settings .folders .items_list .item.canDrag .title:hover .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
html.non-adjustable .panels.settings .panel {
  margin-bottom: 4px;
}
.panels.settings .panel.data {
  width: 850px;
  background: #f9f9f9;
}
.panels.settings .panel.data.modules {
  overflow: hidden;
}
.panels.settings .panel.navigation_panel {
  width: 15%;
}
.panels.settings .panel.navigation_panel .middle_bar {
  margin-top: 0px;
  padding-top: 22px;
}
.panels.settings .panel.navigation_panel .item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.panels.settings .panel.navigation_panel .item .name {
  mask: url(../../images/filters.svg#masking);
  -webkit-mask: url(../../images/mask.png) repeat-y top right;
  -o-mask: url(../../images/mask.png?) repeat-y top right;
  -ms-mask: url(../../images/mask.png) repeat-y top right;
}
html.rtl .panels.settings .panel.navigation_panel .item .name {
  mask: url(../../images/filters.svg#masking_rtl);
  -webkit-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -o-mask: url(../../images/mask_rtl.png) repeat-y top left;
  -ms-mask: url(../../images/mask_rtl.png) repeat-y top left;
}
.panels.settings .panel.navigation_panel .item .icon {
  display: inline-block;
  height: 19px;
  margin-right: 4px;
  vertical-align: middle;
  width: 18px;
}
.panels.settings .panel.navigation_panel .item .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panels.settings .panel.navigation_panel .item .icon:before {
  display: inline-block;
  font-size: 20px;
  height: 100%;
  width: 100%;
}
.panels.settings .panel.navigation_panel .item.common .icon:before {
  content: "\e639";
}
.panels.settings .panel.navigation_panel .item.mail .icon:before,
.panels.settings .panel.navigation_panel .item.mail-accounts .icon:before {
  content: "\e638";
}
.panels.settings .panel.navigation_panel .item.calendar .icon:before {
  content: "\e63a";
}
.panels.settings .panel.navigation_panel .item.contacts .icon:before {
  content: "\e903";
}
.panels.settings .panel.navigation_panel .item.services .icon:before {
  content: "\e672";
}
.panels.settings .panel.navigation_panel .item.files .icon:before {
  content: "\e656";
}
.panels.settings .panel.navigation_panel .item.mobilesync .icon:before {
  content: "\e636";
}
.panels.settings .panel.navigation_panel .item.outlooksync .icon:before {
  content: "\e635";
}
.panels.settings .panel.navigation_panel .item.helpdesk .icon:before {
  content: "\e637";
}
.panels.settings .panel.navigation_panel .item.openpgp .icon:before {
  content: "\e658";
}
.panels.settings .navigation_panel .panel_content {
  margin-right: 0px;
}
.panels.settings .panel_top {
  border: 0px;
  padding: 0px;
}
.panels.settings .panel_center {
  background: none;
}
.panels.settings .settings_heading {
  color: #4d4d4d;
  margin: 0px;
  padding: 35px 20px 15px;
}
.panels.settings .fieldset {
  background: #f1f1f1;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNo0iIEJACAAwlT8/1GPMAsaKGNMYpskAOPRdq9tWbrifpaOAAMAMvEO3ANCJPYAAAAASUVORK5CYII=');
  background-position: 0 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 0px 20px 20px;
  padding: 20px;
}
.panels.settings .fieldblock {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #d0d0da;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 14px;
  padding: 14px;
}
.panels.settings .fields .row {
  margin-bottom: 14px;
  display: flex;
}
.panels.settings .fields .row:last-child {
  margin-bottom: 0px;
}
.panels.settings .fields .row .label {
  color: #626262;
  width: 150px;
  word-wrap: break-word;
}
.panels.settings .fields .row label {
  color: #626262;
}
.panels.settings .fields .row .input {
  font-size: 10pt;
  padding: 7px 9px 6px;
}
.panels.settings .fields .row .value.offset {
  display: inline-block;
  padding-left: 150px;
}
.panels.settings .fields .row .value.text {
  font-weight: bold;
  display: inline-block;
  padding: 7px 9px 6px;
  width: 300px;
}
.panels.settings .fields .row .value.text.port {
  width: auto;
}
.panels.settings .fields .row .custom_radio {
  margin-left: 16px;
}
.panels.settings .fields .row .custom_radio:first-child {
  margin-left: 0px;
}
.panels.settings .fields .fieldblock .label {
  width: 135px;
}
.panels.settings .pgp .fields .row .value.offset {
  padding-left: 0;
}
.panels.settings .fields .hint {
  padding: 4px 6px;
  margin: -12px -6px 12px;
}
.panels.settings .signature .fields .hint {
  margin: -12px -6px 12px 14px;
}
.panels.settings .mobile_sync .fields .label {
  float: left;
}
.panels.settings .mobile_sync .fields .value {
  display: block;
  overflow: hidden;
  word-wrap: break-word;
  -ms-word-break: break-all;
}
.panels.settings .workday .input.start,
.panels.settings .workday .input.end {
  width: 125px;
}
.panels.settings .ios_profile a {
  text-decoration: none;
  -webkit-transition: color 300ms ease 0s;
  -moz-transition: color 300ms ease 0s;
  -o-transition: color 300ms ease 0s;
  transition: color 300ms ease 0s;
}
.panels.settings .ios_profile a .icon {
  color: #91908e;
  display: inline-block;
  font-size: 26px;
  height: 31px;
  margin-top: 0;
  vertical-align: middle;
  width: 28px;
  -webkit-transition: opacity 300ms ease 0s;
  -moz-transition: opacity 300ms ease 0s;
  -o-transition: opacity 300ms ease 0s;
  transition: opacity 300ms ease 0s;
}
.panels.settings .ios_profile a .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panels.settings .ios_profile a .icon:before {
  content: "\e63d";
}
.panels.settings .ios_profile a:hover .icon {
  opacity: 0.8;
}
.panels.settings .panel.data .panel_center .buttons {
  margin: 0px 20px 15px;
}
.panels.settings .panel.data .panel_center .fieldset .buttons {
  margin: 0px 0px 15px 0px;
}
.panels.settings .panel.data .panel_center .fieldset .buttons:last-child {
  margin-bottom: 0;
}
.settings .tabs {
  margin-bottom: 16px;
  margin-top: 20px;
}
.settings .tabs .tabs-links {
  height: 0;
  opacity: 0;
  overflow: hidden;
  width: 0;
}
.settings .tabs .shortcuts {
  font-size: 0pt;
  margin: 0px 20px;
  padding: 0px 0px 0px 20px;
}
.settings .tabs .shortcuts .item {
  display: inline-block;
  font-size: 9pt;
  vertical-align: bottom;
}
.settings .tabs .shortcuts .item a {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-bottom: 0px;
  border-radius: 4px 4px 0px 0px;
  color: #828282;
  display: inline-block;
  font-weight: bold;
  margin-right: 4px;
  outline: none;
  padding: 6px 12px 6px;
  text-decoration: none;
}
.settings .tabs .shortcuts .item.selected a {
  background: #f1f1f1;
  color: #3d3d3d;
  margin-bottom: -1px;
  padding-bottom: 7px;
}
.settings .mail-accounts .panel_top .buttons {
  float: right;
  margin: 30px 20px 15px;
}
.row.keys_label {
  margin-bottom: 6px !important;
}
.settings .folders.items_list {
  margin-bottom: 10px;
}
.settings .folders.items_list .first_sortable_container {
  position: relative;
}
.settings .folders.items_list .item {
  background: none;
  border-top: 1px solid #cccccc;
  max-height: inherit;
  overflow: visible;
  position: static;
}
.settings .folders.items_list .item.ui-sortable-helper {
  background-color: rgba(240, 240, 240, 0.8);
  box-shadow: inset 0px 0px 1px #ddd;
}
.settings .folders.items_list .item.ui-sortable-helper .title {
  background-color: rgba(240, 240, 240, 0.8);
}
.settings .folders.items_list > .item:first-child {
  border-top: 0px;
}
.settings .folders.items_list .title {
  padding-bottom: 7px;
  padding-right: 0px;
  padding-top: 4px;
  position: relative;
}
.settings .folders.items_list .title:hover {
  background: rgba(0, 0, 0, 0.03);
}
.settings .folders.items_list .canDrag .title:hover:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.settings .folders.items_list .canDrag .title:hover:before {
  content: "\e65d";
  display: inline-block;
  font-size: 20px;
  height: 20px;
  left: 0px;
  position: absolute;
  top: 4px;
  width: 20px;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.settings .folders.items_list .title .input {
  width: 200px;
}
.settings .folders.items_list .controls {
  float: right;
}
htm.rtl .settings .folders.items_list .controls {
  float: left;
}
.settings .folders.items_list .controls .button {
  cursor: pointer;
  display: inline-block;
  height: 20px;
  width: 20px;
  font-size: 20px;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.settings .folders.items_list .controls .button:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.settings .folders.items_list .controls .button:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.settings .folders.items_list .controls .button.disabled {
  opacity: 0.3;
  filter: alpha(opacity=30);
  cursor: default !important;
}
.settings .folders.items_list .controls .button.delete:before {
  content: "\e65f";
}
.settings .folders.items_list .controls .button.subscribe:before {
  content: "\e660";
}
.settings .folders.items_list .controls .button.subscribe.subscribed:before {
  content: "\e65e";
}
.settings .folders.items_list .controls .button.up {
  background-position: -680px -120px;
}
.settings .folders.items_list .controls .button.up:hover {
  background-position: -680px -140px;
}
.settings .folders.items_list .controls .button.down {
  background-position: -700px -120px;
}
.settings .folders.items_list .controls .button.down:hover {
  background-position: -700px -140px;
}
.settings .folders.items_list .total .count {
  margin-right: 62px !important;
}
html.rtl .settings .folders.items_list .total .count {
  margin-right: 0px;
  margin-left: 62px !important;
}
.settings .fields .filter .value {
  word-spacing: 0.7ex;
}
.settings .fields .filter .value .part {
  display: inline-block;
  word-spacing: normal;
}
.settings .fields .filter .input {
  margin: 0px;
  padding: 2px;
  width: 75px;
}
.settings .fields .filter .buttons {
  float: right;
  margin: 0px;
}
.settings .fields .filter .field {
  display: inline-block;
  position: relative;
}
.settings .fields .filter .link,
.settings .fields .filter .link:hover {
  border-bottom: 1px dashed #4477bb;
  color: #4477bb;
  text-decoration: none;
}
.settings .helpdesk .input,
.settings .allow-block-lists .message .input,
.settings .autoresponder .input {
  width: 520px;
}
.settings .helpdesk .signature .input,
.settings .allow-block-lists .message .input,
.settings .autoresponder .message .input {
  height: 145px;
}
.settings .signature .editor_row .custom_radio {
  float: left;
  margin-right: 4px;
}
html.rtl .settings .signature .editor_row .custom_radio {
  float: right;
  margin-right: 0px;
  margin-left: 4px;
}
.settings .signature .editor_row .editor {
  height: 200px;
  margin-left: 18px;
  padding-top: 1px;
}
html.rtl .settings .signature .editor_row .editor {
  margin-left: 0px;
  margin-right: 18px;
}
.settings .signature .editor_row .editor .html_editor {
  pointer-events: none;
}
.settings .signature .editor_row .editor .html_editor > * {
  pointer-events: auto;
}
.panels.settings .ip-allow-list .folders .items_list .item:last-child,
.panels.settings .security .folders .items_list .item:last-child,
.panels.settings .two-factor-auth .folders .items_list .item:last-child {
  border-bottom: 1px solid #cccccc;
}
.panels.settings .ip-allow-list .folders .items_list .item .title,
.panels.settings .security .folders .items_list .item .title,
.panels.settings .two-factor-auth .folders .items_list .item .title {
  cursor: default;
}
.panels.settings .ip-allow-list .folders .items_list .item .title .name,
.panels.settings .security .folders .items_list .item .title .name,
.panels.settings .two-factor-auth .folders .items_list .item .title .name {
  line-height: 1.4;
}
.panels.settings .ip-allow-list .folders .items_list .item .title .name .name_empty,
.panels.settings .security .folders .items_list .item .title .name .name_empty,
.panels.settings .two-factor-auth .folders .items_list .item .title .name .name_empty {
  color: #c1bfbf;
}
.panels.settings .ip-allow-list .folders .items_list .item .title .name .text_hint,
.panels.settings .security .folders .items_list .item .title .name .text_hint,
.panels.settings .two-factor-auth .folders .items_list .item .title .name .text_hint {
  color: #929292;
  font-size: smaller;
}
.panels.settings .ip-allow-list .folders.items_list .controls .button.rename,
.panels.settings .security .folders.items_list .controls .button.rename,
.panels.settings .two-factor-auth .folders.items_list .controls .button.rename {
  font-size: 26px;
  margin-top: -2px;
  margin-right: 6px;
}
.panels.settings .ip-allow-list .folders.items_list .controls .button.rename:before,
.panels.settings .security .folders.items_list .controls .button.rename:before,
.panels.settings .two-factor-auth .folders.items_list .controls .button.rename:before {
  content: "\e62d";
}
.panels.settings .ip-allow-list .folders.items_list .controls .button.delete,
.panels.settings .security .folders.items_list .controls .button.delete,
.panels.settings .two-factor-auth .folders.items_list .controls .button.delete {
  vertical-align: top;
}
.panels.settings .ip-allow-list .device-active-icon,
.panels.settings .security .device-active-icon,
.panels.settings .two-factor-auth .device-active-icon {
  color: #96c671;
  font-size: 10pt;
}
.panels.settings .ip-allow-list .device-active-icon:before,
.panels.settings .security .device-active-icon:before,
.panels.settings .two-factor-auth .device-active-icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panels.settings .ip-allow-list .device-active-icon:before,
.panels.settings .security .device-active-icon:before,
.panels.settings .two-factor-auth .device-active-icon:before {
  content: "\e649";
}
.LoginLayout {
  height: auto !important;
  min-height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html.mobile .LoginLayout {
  color: #595d6e;
}
.LoginLayout .vhelper {
  display: inline-block;
  display: none;
  height: 100%;
  vertical-align: middle;
  width: 0px;
}
.LoginLayout.with_bottom_text {
  position: relative;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.LoginLayout.with_bottom_text .bottom_description {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
.LoginLayout.with_bottom_text .bottom_description a {
  color: inherit;
  text-decoration: underline;
}
.login_panel {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  color: #929292;
  display: inline-block;
  font-size: 9pt;
  padding: 20px;
  vertical-align: middle;
  width: 280px;
}
.login_panel .description {
  color: #fff !important;
}
.login_panel .welcome {
  color: #68483d !important;
}
.login_panel .description {
  color: #fff !important;
}
.login_panel .welcome {
  color: #68483d !important;
}
.login_panel a,
.login_panel .link,
.login_panel a:link,
.login_panel .link:link,
.login_panel a:visited,
.login_panel .link:visited {
  color: white;
}
.login_panel a:hover,
.login_panel .link:hover {
  color: rgba(255, 255, 255, 0.8);
}
.login_panel .header {
  height: 95px;
  margin-bottom: 30px;
}
.login_panel .header.custom_logo {
  background: none;
  height: auto;
}
.login_panel .header .icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.login_panel .header .text {
  display: none;
}
.login_panel .header .icon {
  height: 95px;
  width: 130px;
}
.login_panel .header .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login_panel .header .icon:before {
  color: #25AEB8;
  text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #1c868e, -1px -1px #219aa3;
  content: "\e63c";
  display: inline-block;
  font-size: 140px;
  height: 100%;
  margin-top: -20px;
  vertical-align: middle;
  width: 100%;
}
.login_panel .header .icon {
  height: 95px;
  width: 130px;
}
.login_panel .header .icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login_panel .header .icon:before {
  color: #25AEB8;
  text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #1c868e, -1px -1px #219aa3;
  content: "\e63c";
  display: inline-block;
  font-size: 140px;
  height: 100%;
  margin-top: -20px;
  vertical-align: middle;
  width: 100%;
}
.login_panel .welcome {
  margin-bottom: 20px;
  font-size: 14px;
}
.login_panel .welcome .name {
  font-style: italic;
  font-size: 17px;
  color: #6d5454;
}
.login_panel .login_panel_content {
  -webkit-perspective: 4000px;
  -moz-perspective: 4000px;
  -o-perspective: 4000px;
  perspective: 4000px;
  position: relative;
}
.login_panel .login_panel_content .col {
  -webkit-perspective: 4000px;
  -moz-perspective: 4000px;
  -o-perspective: 4000px;
  perspective: 4000px;
}
.login_panel .login_panel_content .col.left {
  margin-right: 276px;
  padding-right: 20px;
  text-align: center;
}
.login_panel .login_panel_content .col.right {
  position: absolute;
  right: 0px;
  width: 276px;
}
.login_panel .login_panel_content .content {
  box-shadow: 0px 0px 0px #ffffff;
  float: left;
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
  width: 100%;
  -webkit-transition: -webkit-transform 600ms ease-in-out, opacity 120ms linear 240ms, visibility 1ms linear 300ms, margin-top 0ms linear 300ms;
  -moz-transition: -moz-transform 600ms ease-in-out, opacity 120ms linear 240ms, visibility 1ms linear 300ms, margin-top 0ms linear 300ms;
  transition: transform 600ms ease-in-out, opacity 120ms linear 240ms, visibility 1ms linear 300ms, margin-top 0ms linear 290ms;
}
.login_panel .login_panel_content .content.register,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.social_register {
  left: 50%;
  margin-left: -130px;
  position: relative;
  width: 260px;
}
.login_panel .login_panel_content .content.send_question {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.login_panel .login_panel_content .content.send_question .question {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  box-shadow: 0 1px 1px #dddddd inset;
  color: #000000;
  font-size: 11pt;
  height: 214px;
  padding: 6px 8px;
  resize: none;
  width: 100%;
}
.login_panel .login_panel_content .content.forgot .row {
  border-radius: 4px !important;
}
.login_panel .login_panel_content .content.register,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.social_register {
  text-align: center;
}
.login_panel .login_panel_content .content.social_register .question_title,
.login_panel .login_panel_content .content.send_question .question_title {
  color: #929292;
  display: block;
  font-size: 11pt;
}
.login_panel .login_panel_content .content.forgot,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.register,
.login_panel .login_panel_content .content.signin,
.login_panel .login_panel_content .content.activation,
.login_panel .login_panel_content .content.changepass,
.login_panel .login_panel_content .content.social_register {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  margin-top: -100000px;
  opacity: 0;
  visibility: hidden;
}
.login_panel .login_panel_content .content.activation {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  font-size: 12pt;
  text-shadow: 0px 1px 0px #f3f3f3;
  white-space: normal;
  width: 240px;
}
.login_panel.flipForgot .content.login,
.login_panel.flipChangepass .content.send_question,
.login_panel.flipRegister .content.login,
.login_panel.flipRegister .content.send_question,
.login_panel.flipRegister.flipForgot .content.forgot,
.login_panel.flipSignin .content.login,
.login_panel.flipSocialRegister .content.login,
.login_panel.flipSocialRegister .content.send_question,
.login_panel.flipActivation .content.login,
.login_panel.flipChangepass .content.login {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  margin-top: -100000px;
  opacity: 0;
  visibility: hidden;
}
.login_panel.flipForgot .content.forgot,
.login_panel.flipChangepass .content.changepass,
.login_panel.flipRegister .content.register,
.login_panel.flipSignin .content.signin,
.login_panel.flipSocialRegister .content.social_register {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
}
.login_panel.flipActivation .content.activation {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
}
.login_panel .description {
  color: #929292;
  margin-top: 20px;
}
.login_panel .social_description {
  background: #d7dcdf;
  border: 1px solid #c7cccf;
  border-radius: 4px;
  color: #464646;
  margin: 20px;
  margin-left: -85px;
  padding: 10px;
  width: 400px;
}
.login_panel .row {
  background: #ffffff;
  border: 1px solid #cac7c7;
  margin: -1px 0px 0px;
  padding: 10px;
  padding-left: 30px;
  text-align: right;
  white-space: nowrap;
}
html.rtl .login_panel .row {
  padding-left: 10px;
  padding-right: 30px;
}
html.rtl .login_panel .row.buttons {
  padding-left: 0px;
  padding-right: 0px;
}
.login_panel .row.focused {
  background: #fff3ce;
  border-color: #cfbf8e;
  position: relative;
}
.login_panel .row.shake {
  -webkit-animation: shake 0.8s linear;
  -moz-animation: shake 0.8s linear;
  animation: shake 0.8s linear;
}
.login_panel .row:first-child {
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0 1px 1px #dddddd inset;
}
.login_panel .row:last-child {
  border-radius: 0px 0px 4px 4px;
  border-width: 1px;
}
.login_panel .row .value {
  vertical-align: middle;
}
.login_panel .row .value.suffix {
  margin-left: 16px;
}
.login_panel .row .value.suffix .text {
  color: #777777;
  font: 12pt Helvetica, Tahoma, Arial, sans-serif;
}
.login_panel .row .placeholder {
  display: inline-block;
  cursor: text;
  float: none;
  font-size: 12pt;
  height: 20px;
  margin-left: -20px;
  position: relative;
  text-indent: 0px;
  vertical-align: middle;
  width: 20px;
  zoom: 1;
}
html.rtl .login_panel .row .placeholder {
  margin-left: 0px;
  margin-right: -20px;
}
.login_panel .row .placeholder:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login_panel .row .placeholder:before {
  color: #d5d4d2;
  display: inline-block;
  font-size: 22px;
  height: 20px;
  margin-right: 4px;
  margin-top: -6px;
  vertical-align: middle;
  width: 20px;
}
html.rtl .login_panel .row .placeholder:before {
  margin-left: 4px;
  margin-right: 0px;
}
.login_panel .row.filled .placeholder:before,
.login_panel .row.focused .placeholder:before {
  color: #cbc9c6;
}
.login_panel .row.email > .placeholder:before {
  content: "\e627";
}
.login_panel .row.password > .placeholder:before {
  content: "\e625";
}
.login_panel .row.name > .placeholder:before,
.login_panel .row.login > .placeholder:before {
  content: "\e626";
}
.login_panel .row.question,
.login_panel .row.answer {
  padding-left: 10px;
}
.login_panel .row.question html.rtl,
.login_panel .row.answer html.rtl {
  padding-right: 10px;
}
.login_panel .row.question .placeholder,
.login_panel .row.answer .placeholder {
  width: 0px;
}
.login_panel .row .input {
  background: transparent;
  border: 0px !important;
  border-radius: 0px;
  box-shadow: none;
  color: #444;
  display: inline-block;
  font: 12pt Helvetica, Tahoma, Arial, sans-serif;
  outline: none;
  padding: 1px 0px;
  text-align: left;
  text-indent: 3px;
  width: 100%;
}
html.rtl .login_panel .row .input {
  text-align: right;
}
.login_panel .row .input:focus {
  box-shadow: none;
}
.login_panel .row .input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
.login_panel .row .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff3ce inset !important;
}
.login_panel .custom_checkbox.focus {
  box-shadow: 0px 4px 3px -3px #e5e5e5 inset, 0 0 2px 0 #1d67cd;
}
.login_panel .custom_checkbox.focus .icon {
  border: 1px solid #ffffff;
}
.login_panel .signme,
.login_panel .links {
  background: none;
  border: 0px;
  border-radius: 0px;
  font-size: 9pt;
  margin-bottom: 14px;
  padding: 0px;
  text-align: left;
}
html.rtl .login_panel .signme,
html.rtl .login_panel .links {
  text-align: right;
}
.login_panel .signme .signme_label {
  cursor: pointer;
  font-size: 9pt;
  height: auto;
  text-indent: 0px;
  width: auto;
}
.login_panel .signme input {
  vertical-align: middle;
}
.login_panel .links .forgot {
  float: right;
  margin-left: 16px;
}
.login_panel.login .row.login {
  border-radius: 4px 4px 0px 0px;
}
.login_panel.login.email .row.login {
  border-radius: 0px;
}
.LoginLayout .languages {
  border-radius: 5px;
  padding: 10px 16px;
  position: fixed;
  right: 20px;
  top: 20px;
}
html.rtl .LoginLayout .languages {
  left: 20px;
  right: auto;
}
.LoginLayout .languages .custom_selector .control .icon {
  color: #000;
}
.LoginLayout .languages .custom_selector .control .icon:before {
  font-size: 18px;
}
.register .LoginLayout .languages .custom_selector .name {
  display: inline-block;
  height: 15px;
}
.LoginLayout .languages .custom_selector .dropdown_arrow {
  float: right;
  margin-right: 22px;
}
.LoginLayout .languages .custom_selector .dropdown_content {
  padding: 0px;
  width: 105%;
}
.register .LoginLayout .languages .custom_selector .dropdown_content {
  position: relative;
}
.LoginLayout .languages .custom_selector .item {
  border-bottom: 1px solid #CBC8C0;
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
}
.LoginLayout .languages .custom_selector .item.selected {
  background: #f0f0f0;
}
.LoginLayout .languages .custom_selector .item:hover {
  background: #fafafa;
}
.LoginLayout .languages .name .text {
  display: none;
}
.LoginLayout .languages .icon {
  background: url("../../images/sprites.png") no-repeat 40px -400px;
  display: inline-block;
  height: 11px;
  margin-right: 4px;
  vertical-align: middle;
  width: 16px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-moz-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 125dpi) {
  .LoginLayout .languages .icon {
    background-image: url("../../images/sprites2x.png");
    background-size: 1440px 560px;
  }
}
html.rtl .LoginLayout .languages .icon {
  margin-left: 4px;
  margin-right: 0px;
}
.LoginLayout .languages .English .icon {
  background-position: 0px -480px;
}
.LoginLayout .languages .Arabic .icon {
  background-position: -80px -520px;
}
.LoginLayout .languages .Bulgarian .icon {
  background-position: -40px -480px;
}
.LoginLayout .languages .Chinese-Simplified .icon {
  background-position: -80px -480px;
}
.LoginLayout .languages .Chinese-Traditional .icon {
  background-position: -80px -480px;
}
.LoginLayout .languages .Czech .icon {
  background-position: -120px -480px;
}
.LoginLayout .languages .Danish .icon {
  background-position: -160px -480px;
}
.LoginLayout .languages .Dutch .icon {
  background-position: -640px -480px;
}
.LoginLayout .languages .Estonian .icon {
  background-position: -200px -480px;
}
.LoginLayout .languages .Finnish .icon {
  background-position: -240px -480px;
}
.LoginLayout .languages .French .icon {
  background-position: -280px -480px;
}
.LoginLayout .languages .German .icon {
  background-position: -320px -480px;
}
.LoginLayout .languages .Greek .icon {
  background-position: -360px -480px;
}
.LoginLayout .languages .Hebrew .icon {
  background-position: -440px -480px;
}
.LoginLayout .languages .Hungarian .icon {
  background-position: -400px -480px;
}
.LoginLayout .languages .Italian .icon {
  background-position: -480px -480px;
}
.LoginLayout .languages .Japanese .icon {
  background-position: -520px -480px;
}
.LoginLayout .languages .Korean .icon {
  background-position: -120px -520px;
}
.LoginLayout .languages .Latvian .icon {
  background-position: -560px -480px;
}
.LoginLayout .languages .Lithuanian .icon {
  background-position: -600px -480px;
}
.LoginLayout .languages .Norwegian .icon {
  background-position: -680px -480px;
}
.LoginLayout .languages .Persian .icon {
  background-position: -360px -520px;
}
.LoginLayout .languages .Polish .icon {
  background-position: -720px -480px;
}
.LoginLayout .languages .Portuguese-Brazil .icon {
  background-position: -760px -480px;
}
.LoginLayout .languages .Romanian .icon {
  background-position: 0px -520px;
}
.LoginLayout .languages .Russian .icon {
  background-position: -40px -520px;
}
.LoginLayout .languages .Spanish .icon {
  background-position: -160px -520px;
}
.LoginLayout .languages .Swedish .icon {
  background-position: -200px -520px;
}
.LoginLayout .languages .Thai .icon {
  background-position: -240px -520px;
}
.LoginLayout .languages .Turkish .icon {
  background-position: -280px -520px;
}
.LoginLayout .languages .Ukrainian .icon {
  background-position: -320px -520px;
}
.LoginLayout .languages .Serbian .icon {
  background-position: -400px -520px;
}
.LoginLayout .languages .Portuguese-Portuguese .icon {
  background-position: -800px -480px;
}
.LoginLayout .languages .Vietnamese .icon {
  background-position: -440px -520px;
}
.LoginLayout .languages .Slovenian .icon {
  background-position: -480px -520px;
}
.LoginLayout .languages .Slovak .icon {
  background-position: -520px -520px;
}
.LoginLayout .languages.demo {
  border: 1px solid #C7CCCF;
  border-radius: 4px;
  clear: both;
  left: auto;
  margin-left: -172px;
  margin-top: 20px;
  padding: 10px 14px;
  position: relative !important;
  right: auto;
  text-align: left;
  top: 20px;
  width: 590px;
  background: #9EE6D4;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #C1CDB8), color-stop(1, #9EE6D4));
  background: -webkit-linear-gradient(bottom, #C1CDB8 0%, #9EE6D4 100%);
  background: -ms-linear-gradient(bottom, #C1CDB8, #9EE6D4);
  background: -moz-linear-gradient(center bottom, #C1CDB8 0%, #9EE6D4 100%);
  background: -o-linear-gradient(#9EE6D4, #C1CDB8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9EE6D4', endColorstr='#C1CDB8', GradientType=0);
}
html.rtl .LoginLayout .languages.demo {
  margin-left: 0;
  margin-right: -172px;
  text-align: right;
}
.LoginLayout .languages.demo .langs_heading {
  color: #464646;
  font-size: 12pt;
  margin-bottom: 10px;
  text-align: center;
}
.LoginLayout .languages.demo .item {
  color: #555555;
  display: inline-block;
  width: 24%;
}
.LoginLayout .languages.demo .item .item_content {
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  padding: 3px 6px;
  white-space: nowrap;
}
.LoginLayout .languages.demo .item .item_content:hover {
  background-color: #67C0B7;
  color: #333333;
}
.LoginLayout .languages.demo .item .item_content .text {
  display: inline-block;
  vertical-align: middle;
}
.LoginLayout .languages.demo .item.selected .item_content {
  background: #2993A2;
  color: #fff;
}
.LoginLayout .buttons {
  background: none;
  border: 0px;
  margin: 20px 0 14px;
  padding: 0px;
}
.LoginLayout .buttons .button {
  display: block;
  font-size: 12pt;
  padding: 10px;
  width: 100%;
}
.LoginLayout .buttons .button:focus {
  border: 1px solid #eee;
}
.block_security_key_inprogress {
  background: url("../../images/wait.gif") no-repeat center;
  height: 20px;
  text-align: center;
}
.popup.mandatory_configuration .popup_panel {
  padding: 0px;
}
.popup.mandatory_configuration .panels.settings .fieldset {
  margin: 0px;
}
.popup_panel.popup_verify_second_factor {
  max-width: 610px;
}
.popup_panel.popup_verify_second_factor .link_other_options {
  text-align: right;
  margin-top: 15px;
}
.popup_panel.popup_verify_second_factor .button_other_option {
  display: block;
}
.popup_panel.popup_configure_authenticator_app {
  max-width: 610px;
}
.popup_panel.popup_configure_authenticator_app .authenticator_app_qr_code {
  display: inline-block;
  height: 200px;
}
.popup_panel.popup_configure_authenticator_app .authenticator_app_qr_code .authenticator_app_qr_code_inprogress {
  background: url("../../images/wait.gif") no-repeat center;
  height: 200px;
  position: absolute;
  width: 200px;
}
.popup_panel.popup_configure_authenticator_app .authenticator_app_secret {
  height: 14px;
}
.popup_panel.popup_show_backup_codes .hint {
  min-height: 14px;
}
.popup_panel.popup_show_backup_codes .big_single_button {
  text-align: center;
}
.panels.settings .panel.navigation_panel .item.two-factor-auth .icon:before {
  content: "\e915";
}
.backup-codes-container {
  height: 170px;
  margin: 10px;
  width: 300px;
}
.backup-codes-container div {
  display: inline-block;
  font-family: Consolas;
  padding: 10px 0;
  width: 49%;
}
.panels.settings .security .panel_security_two_factor .row.hint:first-child,
.panels.settings .two-factor-auth .row.hint:first-child {
  margin: 0 -6px 12px;
}
.panels.settings .security .panel_security_two_factor .row.hint:last-child,
.panels.settings .two-factor-auth .row.hint:last-child {
  margin-bottom: 0 !important;
}
.panels.settings .security .panel_security_two_factor .buttons,
.panels.settings .two-factor-auth .buttons {
  text-align: left;
  margin: 0 !important;
}
.panels.settings .security .panel_security_two_factor .buttons .button,
.panels.settings .two-factor-auth .buttons .button {
  margin-right: 10px;
}
.panels.settings .security .panel_security_two_factor h3:first-child,
.panels.settings .two-factor-auth h3:first-child {
  margin-top: 0;
}
.panels.settings .security .panel_security_two_factor h3:last-child,
.panels.settings .two-factor-auth h3:last-child {
  margin-bottom: 0;
}
.panels.settings .security .panel_security_two_factor .back-to-security-icon,
.panels.settings .two-factor-auth .back-to-security-icon {
  cursor: pointer;
  display: block;
  float: left;
  font-size: 1.5em;
  margin-top: -4px;
}
.panels.settings .security .panel_security_two_factor .back-to-security-icon:before,
.panels.settings .two-factor-auth .back-to-security-icon:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-family: 'afterlogic';
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.panels.settings .security .panel_security_two_factor .back-to-security-icon:before,
.panels.settings .two-factor-auth .back-to-security-icon:before {
  content: "\e671";
}
.panels.settings .security .panel_security_two_factor .custom_checkbox.round,
.panels.settings .two-factor-auth .custom_checkbox.round {
  border-radius: 50%;
  margin-left: 2px;
  padding: 3px;
  vertical-align: middle;
}
.panels.settings .security .panel_security_two_factor .custom_checkbox.round .icon,
.panels.settings .two-factor-auth .custom_checkbox.round .icon {
  background: #96c671;
  border-radius: 50%;
  color: white;
  margin-left: -1px;
  margin-top: -1px;
}
.panels.settings .security .panel_security_two_factor .custom_checkbox.round .icon:before,
.panels.settings .two-factor-auth .custom_checkbox.round .icon:before {
  font-size: 7pt;
  margin-top: 1px;
}
.settings .folders .controls .button.logout:before {
  content: "\e91f";
}
.settings .folders .controls .button.delete_device:before {
  content: "\e606";
}

/* ---------------------------------------------------------------------------
 * Mailspace split login
 *
 * Appended to upstream's compiled theme, not merged into it. The theme ships as
 * built output with no .less source of ours, so anything written above here is
 * regenerated wholesale by a redesign upstream; this block is meant to be
 * lifted out and re-applied when that happens.
 *
 * No template is edited. The layout hangs off two things Afterlogic already
 * provides: .bottom_description is a sibling of .login_panel inside
 * .screen.LoginLayout, and it renders BottomInfoHtmlText as real HTML. The
 * container gains .with_bottom_text whenever that setting is non-empty, so the
 * split turns itself on when the copy exists and the stock centred card comes
 * back when it does not.
 *
 * The gradient is deeper than the brand blue on purpose. White on #249EED
 * measures 2.92:1 and fails even the 3:1 large-text floor; #0C6FB8 and #0E7D5E
 * measure 5.27:1 and 5.10:1, so the copy is readable across the whole sweep.
 * ------------------------------------------------------------------------- */

.screen.LoginLayout.with_bottom_text {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

/* Upstream centres the card with this spacer; the two columns do it now. */
.screen.LoginLayout.with_bottom_text .vhelper { display: none; }

.screen.LoginLayout.with_bottom_text .bottom_description {
  order: -1;
  flex: 1 1 50%;
  min-width: 0;
  /* Upstream absolutely positions this to float a strip under the card. Left
     alone it covers the whole layout and the form disappears behind it -- the
     one override in this block that is load-bearing rather than cosmetic. */
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
  padding: 56px 48px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(140deg, #0C6FB8 0%, #0E7D5E 100%);
}

.screen.LoginLayout.with_bottom_text .login_panel.login {
  flex: 1 1 50%;
  min-width: 0;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.screen.LoginLayout.with_bottom_text .login_panel.login .login_panel_content {
  width: 100%;
  max-width: 380px;
}

/* Written by the Softaculous filter into BottomInfoHtmlText. */
.ms_welcome {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 460px;
}

.ms_welcome_copy { margin: auto 0; }
.ms_kicker { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.ms_title  { margin: 0 0 20px; font-size: 34px; line-height: 1.2; font-weight: 700; }
.ms_sub    { margin: 0; font-size: 16px; line-height: 1.65; }

.ms_welcome_mark img {
  display: block;
  width: 168px;
  /* The theme ships one logo, in brand blue. Inverting it to white here beats
     carrying a second asset that can drift out of step with the first. */
  filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
 * Palette
 *
 * Four values, and each one earns its place. Written here rather than as
 * custom properties because this file is appended to compiled output that
 * upstream regenerates, and a variable declared in a block that gets lifted
 * out takes every rule referencing it with it.
 *
 *   #0C6FB8  primary   fills, the folder rail, anything a label sits on.
 *                      5.27:1 under white, so text on it is safe.
 *   #0A5F9E  hover     one step down from primary.
 *   #249EED  identity  the brand blue. Marks and icons only -- 2.92:1 under
 *                      white means no text may ever sit on it.
 *   #0E7D5E  accent    the far end of the login gradient. Nowhere else.
 *
 * Before this, the rail was #0566C6 and the header items #503D68, neither
 * related to anything else on screen. Three blues and a stray purple.
 * ------------------------------------------------------------------------- */

/* The rail was its own blue, a shade off the buttons sitting on it and the
   login panel it follows from. One blue now runs rail, buttons and gradient
   start. White labels on it measure 5.27:1. */
.panel.left_panel { background-color: #0C6FB8; }

/* The header carried a purple that appears nowhere else in the product. A
   neutral ink rather than the primary blue on purpose: these are navigation,
   and colouring them like the primary action would have them compete with it.
   12.9:1 on white. */
.tabsbar .item { color: #10344F; }

/* Settings listed Mail and Email Account under the same envelope, so the two
   rows were distinguishable only by their labels. \e626 is the person glyph
   the icon font already carries -- the one the login field stopped using when
   it took the envelope, so nothing new is introduced. */
.panels.settings .panel.navigation_panel .item.mail-accounts .icon::before {
  content: "\e626";
}

/* ---------------------------------------------------------------------------
 * Primary buttons across the application.
 *
 * Upstream's green had no relationship to anything else on screen. These are
 * the same #0C6FB8 the login button and the brand panel use, so one blue runs
 * through the product.
 *
 * The five selectors below are upstream's own, matched rather than guessed:
 * the button, its disabled hover, the dropdown panel that hangs off a split
 * button, the minimised compose bar, and the outline button that carries the
 * colour as text rather than fill.
 * ------------------------------------------------------------------------- */

.buttons .button { background-color: #0C6FB8; }
.buttons .button:hover { background-color: #0A5F9E; }

.buttons .button.disabled,
.buttons .button.disabled:hover {
  background-color: #7FB4D8;
  color: #EAF3FA;
}

.buttons > .dropdown > .dropdown_helper > .dropdown_content,
.buttons > .button > .dropdown > .dropdown_helper > .dropdown_content {
  background-color: #0C6FB8;
}

.compose_popup.minimized { background-color: #0C6FB8; }

.buttons .contour_button { color: #0C6FB8; }

/* Compose and Create are rows on the rail, not pills on it.
 *
 * Upstream's own treatment is a white fill with a blue label -- which was the
 * only way to keep it visible once the rail turned blue, since #0C6FB8 on
 * #0566C6 measures 1.07:1 and the shape simply vanishes. It was legible and it
 * looked wrong: a white block, a 15px glyph and a bold blue label, sitting on
 * top of six 24px white glyphs with 11pt white labels.
 *
 * So it takes the rows' own treatment instead -- transparent, white, the same
 * 24px glyph, the same 16px and 50px columns, the same 48px height, the same
 * darkening hover. All measured off `.item > .title` rather than guessed: 16px
 * of left padding, a 24px glyph box with 10px after it, and 12px above and below
 * a 24px line.
 *
 * Bold, and a divider under it, because it is still the one action in a list of
 * places. White on the rail is 5.27:1 at the blue end where this row sits, the
 * same as every label under it.
 */
.panel.left_panel .buttons.big_single_button {
  padding: 0;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* text-align on the button itself, not on the wrapper: upstream centres this
   one directly and the wrapper's value never reaches it. */
.panel.left_panel .buttons.big_single_button .button {
  display: block;
  height: 24px;
  line-height: 24px;
  padding: 12px 0 12px 16px;
  background-color: transparent;
  color: #FFFFFF;
  font-size: 11pt;
  font-weight: 700;
  text-align: left;
  border-radius: 0;
}

.panel.left_panel .buttons.big_single_button .button:hover {
  background-color: rgba(0, 0, 0, 0.10);
  color: #FFFFFF;
}

/* `.buttons .button.disabled` paints a #7FB4D8 fill, which on a row rather than
   a pill would put a pale blue block back on the rail -- Contacts disables this
   button on a read-only address book, so it does happen. Muted the way the rail
   mutes an unselectable folder instead. Disabled controls are outside WCAG 2.2
   1.4.3, and making this one legible would make it look available. */
.panel.left_panel .buttons.big_single_button .button.disabled,
.panel.left_panel .buttons.big_single_button .button.disabled:hover {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.45);
}

/* Two carriers for one glyph, because the two buttons are built differently.
 *
 * Mail renders `<span class="icon">` inside its button for the theme to fill --
 * upstream does this for every button and leaves the glyph to the theme.
 * Contacts' button has no such span: its label is an i18n binding straight on
 * the button, which would overwrite any child. A pseudo-element is not a child,
 * so that one hangs off the button itself.
 *
 * \e600 and \e601 are the toolbar's own new-message and new-contact glyphs, so
 * the rail and the toolbar read as one action rather than two.
 */
.panel.left_panel.folders_panel .buttons.big_single_button .button > .icon:before,
.panel.left_panel.groups_panel .buttons.big_single_button .button:before {
  font-family: 'afterlogic';
  font-weight: normal;
  font-size: 24px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The folder rows' own glyph box, values and all. 16px of button padding, then
   24 + 10, is their 50px label column.

   vertical-align: top, where the rows themselves use bottom. The rows get away
   with bottom because their `.title` runs at line-height: normal, so the 24px
   glyph is what sets the line box height and aligning to its bottom centres it.
   This button pins line-height to 24px to fix the row at 48, which puts the
   line box bottom below the glyph box by the strut's descender -- bottom there
   dropped the glyph 5px while its own label stayed centred. Measured: top puts
   the glyph centre on the row centre to the pixel and the label within 0.2px,
   which is the folder rows' own arrangement. */
.panel.left_panel.folders_panel .buttons.big_single_button .button > .icon,
.panel.left_panel.groups_panel .buttons.big_single_button .button:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  vertical-align: top;
}

.panel.left_panel.folders_panel .buttons.big_single_button .button > .icon:before {
  content: "\e600";
}

.panel.left_panel.groups_panel .buttons.big_single_button .button:before {
  content: "\e601";
}

/* Mail's markup has a newline between the icon span and the label span, and an
 * inline formatting context renders that as a space -- 4px, enough to put
 * Compose off the folder labels' column. Zeroed on the button and restored on
 * its spans, which is the only handle on a text node nothing else can address.
 *
 * Folder-rail only: Contacts' label is a bare text node on the button, so
 * font-size: 0 there would hide it outright.
 */
.panel.left_panel.folders_panel .buttons.big_single_button .button {
  font-size: 0;
}

.panel.left_panel.folders_panel .buttons.big_single_button .button > span {
  font-size: 11pt;
}

/* The rail is 20% of the window, which is splitterFlex's default and reads as
 * 256px at 1280 and 384px at 1920 -- a folder list that grows because the
 * screen did, taking the width away from the message it is next to. Clamped to
 * 176px, which fits the longest label the rail ships ("Manage Folders", 87px at
 * 12px, centred) with room left over, and floored at 160px.
 *
 * The splitter still works, inside those two bounds. Deliberately not a fixed
 * flex-basis, which would have overridden the inline width and killed the drag
 * outright.
 *
 * The narrow drawer keeps its own width: its rule carries five classes to this
 * one's four, so its 82vw max-width wins there.
 *
 * Contacts' groups rail is the same rail on a different screen, and 20% of the
 * window there too. Both, so switching screens does not move the boundary.
 */
.panels > .panel.left_panel.folders_panel,
.panels > .panel.left_panel.groups_panel {
  min-width: 160px;
  max-width: 176px;
}

/* And the pane next to it has to take what the clamp gave up, or the width
   comes off the rail and turns into a dead strip down the right edge instead --
   which is what it did: the rail's inline width is a percentage of the window,
   not of what is left, so 176 + 80% of 1280 is 1200 in a 1280 window.
   `flex-grow: 0` is Split.js's own default for that wrapper.

   The panels in Contacts already grow, so this is only Mail's unclassed
   wrapper. Named by exclusion, the way the narrow drawer's sibling rule names
   it -- and that rule still wins on the narrow layout, flex shorthand and
   !important both. */
.panels > div:not(.panel):not(.gutter):not(.ms_scrim) {
  flex-grow: 1;
}

/* Cancel, and every other secondary button, was white on #b1b4c0 -- 2.07:1.
 * The label is bold 10pt, so 13.3px, which is not large text: WCAG 2.2 1.4.3
 * asks 4.5:1 and this was under half of it, on the button that discards a
 * half-written contact.
 *
 * Same cool grey taken down until white clears it with room to spare (4.94:1).
 * Only the fill moves -- shape, size and position are untouched, so the
 * hierarchy against the blue Save reads exactly as before.
 *
 * The disabled state keeps the pale label on purpose: an inactive control is
 * outside 1.4.3, and making it legible would make it look available.
 */
.buttons .button.secondary_button {
  background: #6E7077;
  border-color: #5F6169;
}

.buttons .button.secondary_button:hover {
  background: #5F6169;
}

.buttons .button.secondary_button.disabled,
.buttons .button.secondary_button.disabled:hover {
  background: #6E7077;
}

/* Right column: form only.
 *
 * The wordmark already sits in the panel on the left, so the header repeats it
 * a second time on the same screen. Hidden rather than removed -- it is part of
 * an upstream template, and this theme changes no templates.
 */
.screen.LoginLayout.with_bottom_text .login_panel .header { display: none; }

/* The login field takes an address, not a username -- UseFullEmailAddressAsLogin
 * is set on every install, so the person glyph was describing the wrong thing.
 * \e627 is the envelope the font already carries for .row.email; \e625 is the
 * lock, left as it is.
 */
.screen.LoginLayout .login_panel .row.login > .placeholder::before { content: "\e627"; }

/* !important because upstream sets this colour with !important across three
   selectors, so nothing without it can win however specific it is. */
.screen.LoginLayout.with_bottom_text .login_panel .fields .row .placeholder::before,
.screen.LoginLayout.with_bottom_text .login_panel .fields .row.filled .placeholder::before,
.screen.LoginLayout.with_bottom_text .login_panel .fields .row.focused .placeholder::before {
  color: #249EED !important;
}

/* Filled fields rather than outlined. A hairline box reads as static text at
 * rest; a filled one reads as something to type in before it is touched.
 *
 * The box is .row, not .input -- upstream draws the border and padding there
 * and leaves the input itself transparent. Styling the input instead puts a
 * second box inside the first, which is what the first attempt at this did.
 */
/* .row.buttons is a row too, and it wraps the submit button -- filling it puts
   the button inside a second grey box. Named rows only. */
.screen.LoginLayout.with_bottom_text .login_panel .row.login,
.screen.LoginLayout.with_bottom_text .login_panel .row.password {
  background: #F1F3F6;
  border: 1px solid transparent;
  border-radius: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.screen.LoginLayout.with_bottom_text .login_panel .row.login .input,
.screen.LoginLayout.with_bottom_text .login_panel .row.password .input {
  background: transparent;
}

/* Upstream tints the focused row; a border carries focus more clearly than a
   fill, and keeps the field distinguishable for anyone who cannot see the
   colour change. */
.screen.LoginLayout.with_bottom_text .login_panel .row.login.focused,
.screen.LoginLayout.with_bottom_text .login_panel .row.password.focused {
  background: #fff;
  border-color: #0C6FB8;
}

/* The sign-in button, in the brand's blue rather than upstream's green.
 *
 * #249EED itself is not usable here: white on it measures 2.92:1, and a button
 * label is text, so it needs 4.5:1. #0C6FB8 measures 5.27:1 and is the same
 * blue the panel beside it starts from, so the two read as one screen.
 *
 * Scoped to the login screen on purpose. The green comes from `.buttons
 * .button`, which is every primary button in the application -- recolouring
 * that globally is a larger decision than this one.
 */
.screen.LoginLayout .buttons .button,
.screen.LoginLayout .buttons .button:hover,
.screen.LoginLayout .buttons .button.disabled,
.screen.LoginLayout .buttons .button.disabled:hover {
  color: #fff;
  border: 0;
}

.screen.LoginLayout .buttons .button {
  background: #0C6FB8;
  /* Larger than upstream's: it is the only action on the screen, and the
     reference sets it as the weight the eye lands on after the two fields. */
  padding: 16px 10px;
  font-size: 13pt;
  font-weight: 700;
  border-radius: 10px;
}
.screen.LoginLayout .buttons .button:hover { background: #0A5F9E; }

.screen.LoginLayout .buttons .button:focus-visible {
  outline: 2px solid #0A5F9E;
  outline-offset: 2px;
}

/* Disabled controls are exempt from the contrast floor, so this only has to
   read as unavailable rather than clear 4.5:1. */
.screen.LoginLayout .buttons .button.disabled,
.screen.LoginLayout .buttons .button.disabled:hover {
  background: #7FB4D8;
  color: #EAF3FA;
  cursor: default;
}

/* Below this the two columns each become too narrow to read, so the split
   becomes a stack: the brand band keeps the top of the screen, the form takes
   the rest.

   It used to hide .bottom_description outright, which cost more than it looked
   like. The wordmark lives inside it, and .login_panel .header is hidden a few
   rules up, so a phone got a white page with two inputs and a button on it and
   nothing naming what it was a login to. Keeping the band puts the mark and the
   gradient back on the one screen a customer reaches without a session.

   The welcome copy goes instead. It is the part that needs the width, and on a
   phone it would push the form below the fold to say something the customer has
   already decided by the time they are typing a password. */
@media (max-width: 900px) {
  .screen.LoginLayout.with_bottom_text { flex-direction: column; }

  .screen.LoginLayout.with_bottom_text .bottom_description {
    flex: 0 0 auto;
    padding: 28px 24px;
    align-items: center;
  }
  .screen.LoginLayout.with_bottom_text .ms_welcome { gap: 0; }
  .screen.LoginLayout.with_bottom_text .ms_welcome_copy { display: none; }
  .screen.LoginLayout.with_bottom_text .ms_welcome_mark img { width: 132px; }

  .screen.LoginLayout.with_bottom_text .login_panel.login {
    flex: 1 1 auto;
    align-items: flex-start;
    padding: 32px 24px;
  }
  .screen.LoginLayout.with_bottom_text .login_panel.login .login_panel_content {
    width: 100%;
    max-width: 380px;
  }
}

/* Upstream pins html { min-width: 800px }, so every page is a fixed-width
   desktop layout and a phone scrolls sideways to reach anything on it. The mail
   UI has a claim on that width -- three panels abreast -- and taking it on is a
   different job. The login screen has no such claim, and it is the page every
   customer meets first and the only one they can reach without a session.

   Scoped with :has() because the floor sits on html, which nothing below it can
   reach. Safe to key on the login screen because Aurora reloads the document on
   a successful login -- StandardLoginFormWebclient calls
   clearAndReloadLocation -- so the login screen and the mail UI never share one,
   and this cannot leak into the layout that does need 800px. A browser without
   :has() keeps today's sideways scroll rather than getting something worse. */
@media (max-width: 799px) {
  html:has(.screen.LoginLayout) { min-width: 0; }
}

/* ---------------------------------------------------------------------------
 * Mail screen on a phone.
 *
 * The three-panel layout puts the reading pane at x 400 on a 390px screen, so
 * tapping a message renders it off the right edge and reads as nothing
 * happening. Afterlogic already ships the answer: MailWebclient has a
 * `separated` layout mode that shows one pane at a time, hides the viewer until
 * a message is opened (modules/MailWebclient/styles/styles.less), and renders a
 * Back button when it is (templates/Message/ToolbarView.html). It is simply
 * never selected -- AllowChangeLayout is false and LayoutByDefault is vertical.
 *
 * static/js/mailspace-ui.js picks it at boot below 800px and puts
 * .ms-narrow on <html>. Everything here is scoped to that class AND to
 * .panels.separate_layout_mode, so a desktop window dragged narrow -- where the
 * layout template was already chosen and cannot change without a reload -- gets
 * none of it rather than half of it.
 *
 * .layout-separated is the app's own class, written to <html> by CMailView from
 * the layout mode it booted with. Pairing it with .ms-narrow is what keeps the
 * two halves honest: .ms-narrow follows the window and flips on resize, the
 * layout cannot, and a rule that reads only the first will fire against panes
 * that were never built for it.
 *
 * That is not hypothetical -- it is the bug this pairing was added to fix. On
 * its own, .ms-narrow dropped the 800px floor for a desktop window dragged
 * narrow, crushing the three vertical panes into 100/150/250px. The reading
 * pane has no Back button outside the separated layout, so there was no way out
 * of a message except the toolbar's "open in new window", which is what a
 * reader trying to go back actually hit.
 *
 * html.ms-narrow.layout-separated beats the html { min-width: 800px } floor on
 * specificity alone. The :has() rule above stays as well: it is the login
 * screen's fallback for the case where this script does not load at all.
 * ------------------------------------------------------------------------- */

html.ms-narrow.layout-separated { min-width: 0; }

/* Backported from upstream's Default theme, styles.css:8399-8408, compiled from
   modules/MailWebclient/styles/styles.less. These three rules are what actually
   make the separated layout separate -- without them both panes render at once,
   the viewer lands below the fold, and opening a message looks like nothing
   happened for the second time.

   They are missing here because these themes were compiled from an older
   upstream than the one the package now pins, so they carry that build's rules
   and none added since. That is a standing gap, not a one-off: worth a pass
   diffing the whole file against Default rather than only the part this needed.

   Not scoped to .ms-narrow. They belong to the layout mode, and anyone who
   reaches separated on a desktop wants them just as much. */
.separate_layout_mode:not(.separate_message_opened) .message_viewer {
  display: none;
}

.separate_layout_mode.separate_message_opened .messages_panel {
  height: 0;
  overflow: hidden;
}

.separate_layout_mode.separate_message_opened .messages_panel .middle_bar .panel_top .custom_checkbox {
  display: none;
}

/* Anchors the drawer and its scrim. Absolute inside the panels rather than
   fixed to the viewport, so neither has to hard-code the height of the tabs bar
   above them. */
html.ms-narrow .panels.separate_layout_mode { position: relative; }

/* The splitter handle between the folder column and the rest. There is nothing
   left to drag once the column is off-canvas. */
html.ms-narrow .panels.separate_layout_mode > .gutter { display: none; }

/* The list and the viewer share a wrapper, and splitterFlex gives that wrapper
   the 80% left over from the folder column. With the column out of flow the
   remaining 20% is dead space, and the widths are inline, hence !important.

   The wrapper is the only child of .panels with no class of its own, so it is
   named by exclusion. :last-child would be shorter and was wrong: the scrim is
   appended after it. */
html.ms-narrow .panels.separate_layout_mode > div:not(.panel):not(.gutter):not(.ms_scrim) {
  width: 100% !important;
  flex: 1 1 100% !important;
}

html.ms-narrow .panels.separate_layout_mode > .panel.left_panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  /* Inline width from splitterFlex again. 82vw so the edge of what is behind
     stays visible -- the drawer should look like it is covering the screen, not
     like it has become the screen. */
  width: 260px !important;
  max-width: 82vw;
  transform: translateX(-100%);
  transition: transform 180ms ease;
}

html.ms-narrow.ms-folders-open .panels.separate_layout_mode > .panel.left_panel {
  transform: none;
  box-shadow: 0 0 24px rgba(16, 52, 79, 0.35);
}

html.ms-narrow .panels.separate_layout_mode > .ms_scrim {
  display: none;
}

html.ms-narrow.ms-folders-open .panels.separate_layout_mode > .ms_scrim {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  background: rgba(16, 52, 79, 0.45);
}

/* Built by mailspace-ui.js and only ever wanted here: on a wide screen the
   folder column is permanently visible and a control to reveal it is noise. */
/* .toolbar .content > .ms_folders_toggle, not .ms_folders_toggle alone: the
   theme's `.toolbar .content > .item { display: inline-block }` is three
   classes to one and won, so on a window dragged from narrow back to wide --
   where the buttons are already built but ms-narrow is gone -- both toggles
   sat in the toolbar as empty 50x30 boxes. Equal specificity now, and later in
   the file. */
.toolbar .content > .ms_folders_toggle { display: none; }

html.ms-narrow .panels.separate_layout_mode .toolbar .content > .ms_folders_toggle {
  display: inline-block;
  /* It carries .item so it inherits the toolbar's spacing and states; these
     four undo what the browser gives a <button> and nothing else. <button>
     rather than a <span> so it is focusable and announced without a hand-built
     role, tabindex and key handler. */
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

html.ms-narrow .ms_folders_toggle .icon {
  position: relative;
}

/* Drawn rather than set from the icon font: upstream's glyph set has no
   hamburger, and picking an unused codepoint would break silently the first
   time that font is regenerated. */
html.ms-narrow .ms_folders_toggle .icon::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 9px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
  html.ms-narrow .panels.separate_layout_mode > .panel.left_panel {
    transition: none;
  }
}

/* Compose keeps a column beside the editor whose whole job is to say files can
   be dragged into it. On a phone it was taking 70px of a 351px window to
   describe a gesture that does not exist there, wrapping its own text one word
   per line to do it. The paperclip in the toolbar above is the way in on touch
   and it stays.

   Not scoped to the separated layout: compose is a popup and has no layout
   mode, so .ms-narrow is the whole condition. */
html.ms-narrow .panel.compose .attachments_panel.upload.large {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Header and search, narrow.
 *
 * Two changes, one goal: get the 163px of chrome above the first message down
 * without removing an action.
 *
 * The search row goes first. MessagesView.html opens with .middle_bar >
 * .panel_top, a permanent row carrying the select-all checkbox and the search
 * box. Select-all is already in the toolbar above it (`item checkstate`), so
 * hiding the row costs only the search box, and mailspace-ui.js puts that
 * back as a toolbar button. One tap instead of zero, for a control that is not
 * the reason anyone opened their mail.
 *
 * Then the header. Contacts, Settings and Logout fold into one account control
 * at every width, not just below the breakpoint -- so the bar is a logo, the
 * screen tabs that remain, and one control, and it is the same shape on a phone
 * and on a desktop. Only the width cap on the control differs.
 *
 * The address itself moved out of the Mail tab in patches/apply.py
 * (ShowEmailAsTabName). It is identity, not navigation, and it was the longest
 * string in the bar.
 *
 * Nothing here is scoped to .layout-separated. These rules are about the header,
 * which is the same element on the Mail, Contacts and Settings screens -- and
 * the mail layout mode has no bearing on it. The search rules below are scoped,
 * because those are about panes.
 * ------------------------------------------------------------------------- */

/* The account control is the initials disc and a caret, at every width. No
   address text beside it: the menu it opens carries the address on its first
   line, and the button carries it on title and aria-label.

   9px top and bottom takes the 26px disc to a 44px control, the touch target
   floor -- the disc itself is under it, and this is the only way into Contacts,
   Settings and Logout now. */
.ms_account {
  display: inline-block;
  position: relative;
}
.ms_account_button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 9px 12px;
  white-space: nowrap;
  vertical-align: middle;
}
.ms_account_button::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
}
.ms_account_menu {
  display: none;
}
html.ms-account-open .ms_account_menu {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  min-width: 12em;
  max-width: 88vw;
  padding: 6px 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(16, 52, 79, 0.28);
}
.ms_account_menu .ms_account_who {
  display: block;
  padding: 8px 16px 10px;
  border-bottom: 1px solid rgba(16, 52, 79, 0.12);
  color: #10344F;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms_account_menu .ms_account_item {
  display: block;
  width: 100%;
  /* 44px, the touch target floor. These are the only way to reach Settings and
     Logout at any width now, so they are not the place to save space. */
  padding: 12px 16px;
  min-height: 44px;
  box-sizing: border-box;
  background: none;
  border: 0;
  font: inherit;
  color: #10344F;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ms_account_menu .ms_account_item:hover,
.ms_account_menu .ms_account_item:focus {
  background: rgba(12, 111, 184, 0.08);
}

/* Narrow: the tabs and Logout fold away and the disc becomes the control that
   opens them. */
.tabsbar .content > .item.contacts,
.tabsbar .content > .item.settings,
.tabsbar .content > .item.logout {
  display: none;
}


/* nowrap, because the bar is a flex row that wraps by default and a wrapped
   control doubles the header height. Kept now that the button is a fixed-width
   disc: the tabs to its left still grow with their labels and their counts. */
.tabsbar .content {
  flex-wrap: nowrap;
}
.ms_account {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * The header is brand blue, not white.
 *
 * The same #0C6FB8 as the folder rail, the login button and the brand panel, so
 * the bar and the rail beneath it read as one surface instead of a white strip
 * balanced on a blue one. White on it is 5.27:1, past the 4.5:1 WCAG 2.2 1.4.3
 * asks for.
 *
 * The logo has to follow. Its wordmark is #939598 and its envelope #009EED --
 * on this blue those are 1.6:1 and 1.9:1, which is why the mark looked washed
 * out the moment the bar stopped being white. images/logo-white.svg is the same
 * artwork with both taken to white and the envelope's fold left at the header
 * blue so the shape still reads.
 * ------------------------------------------------------------------------- */
.tabsbar {
  background-color: #0C6FB8;
}
/* Beats `.tabsbar .item { color: #10344F }` above, which was picked for a white
   bar. Everything in the bar inherits from here -- .ms_account_button takes
   `color: inherit` and draws its caret with currentColor. */
.tabsbar .item,
.tabsbar .item .link,
.tabsbar .item .link:hover,
.ms_account_button {
  color: #fff;
}

/* The account's own disc, which is the whole of the control in the bar.

   Reversed out of the palette on purpose: those ten colours are chosen to carry
   white text on a white page, and two of them are blues that would vanish on
   this bar. White with the header blue on it is legible at any size and reads
   as "you" rather than as an eleventh correspondent. */
/* Two classes, not one. `.ms_avatar { color: #fff }` in the Sender initials
   block below is the same specificity and comes later in the file, so a
   single-class selector here lost the cascade and the initials rendered white
   on the white disc -- invisible, and only on a built stylesheet where the
   order is what it is. */
.ms_avatar.ms_account_avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0;
  background: #fff;
  color: #0C6FB8;
  font-size: 11px;
  line-height: 26px;
  vertical-align: middle;
}

/* The Mail tab renders the wordmark instead of the word.
 *
 * The tab, not the header's own .item.logo slot: that slot is hidden by this
 * theme (line ~3800) and its href is "#", which is not the mail route. The tab
 * already carries the routing, the `current` state and the unseen-count badge,
 * so putting the mark on it makes the logo the way back to Mail -- which is
 * what a reader coming from Contacts or Settings will try first anyway.
 *
 * Both files already ship: overlay.map copies themes/Mailspace wholesale, so
 * images/ is beside this stylesheet and the relative URLs resolve.
 */
.tabsbar .item.emails .helper {
  /* The helper is upstream's width reserver -- a hidden bold copy of the label
     that stops the tab resizing as the text changes. With an image label there
     is nothing to reserve, and leaving it would size the tab to the words. */
  display: none;
}
.tabsbar .item.emails .link .text {
  /* Clipped, not display:none. This tab is the only route back to Mail and an
     image-only link with no text is an unnamed link to a screen reader. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Beats `.tabsbar .item.emails .icon { display: none }` above on specificity --
   four classes to three -- rather than by being later in the file. */
.tabsbar .item.emails .link .icon {
  display: inline-block;
  /* 40px tall against a 70px bar. 28px was the first try and the wordmark was
     unreadable at it -- the envelope carries most of the artwork's height, so
     the word sits small. The theme already allows a 62px logo
     (.tabsbar .specified-logo img), so 40 is comfortably inside what the bar
     was built for. Width follows the artwork: logo.svg is viewBox
     595.28x199.11, so 40 * 2.99 = 120. */
  width: 120px;
  height: 40px;
  background: url("images/logo-white.svg") no-repeat center center;
  background-size: contain;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * Sender initials.
 *
 * A coloured disc, built by mailspace-ui.js, in two places: every row of the
 * message list, and the sender line of the opened message. Same initials and
 * the same colour in both -- the eye lands on what it just clicked.
 *
 * What makes it a disc is shared. The two sites differ only in size and in how
 * they sit in their line, so those metrics stay with each.
 *
 * At both widths deliberately. This is not a small-screen affordance; a column
 * of same-weight text is as hard to scan on a desktop.
 * ------------------------------------------------------------------------- */
.ms_avatar {
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  /* Two characters is the contract, but a name that defeats initialsFor should
     clip rather than push the sender's name sideways. */
  overflow: hidden;
  user-select: none;
}

/* In the list it floats between upstream's .controls (checkbox and flag,
   float:left) and .data (overflow:hidden), which is a float-clearing media
   object -- so the text reflows around it with no padding or margin changes,
   and the row keeps its 70px. */
.item_content > .ms_avatar {
  float: left;
  width: 36px;
  height: 36px;
  /* 1px down to sit level with the sender line rather than the row box, which
     runs a little taller than the two lines of text inside it. */
  margin: 1px 10px 0 0;
  font-size: 13px;
  line-height: 36px;
}

/* In the opened message it is one item in a single line of address capsules,
   so it takes the capsule's 26px rather than the list's 36. At list size it
   would set the line height by itself and push the subject down. */
.message_info_line > .ms_avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 8px 0 0;
  font-size: 11px;
  line-height: 26px;
  vertical-align: middle;
}

/* On a phone the sender line and the message toolbar share one row --
   div.toolbar floats right and .message_info flows behind it -- which left the
   line 192px of clientWidth against 207px of content: the recipient capsule
   was cut off mid-word, and the Back control sat wedged against it as the
   first of six identical glyphs.
   
   Unfloated, so the toolbar takes a row of its own and the sender line takes
   the one under it. Back lands at the left edge of the pane, where a reader
   looking for the way out looks first, and the line gets the full 464px, which
   is room for the disc as well. Costs 30px of header height on a screen where
   the header was already the smallest part of the page.

   Narrow only. At desktop width the row is 1000px wide and the float is what
   keeps the toolbar and the sender on one line, which is where they belong. */
html.ms-narrow .message_header .header_row > .toolbar {
  float: none;
  display: block;
}

/* Narrow: the envelope alone. The wordmark is 84px of a 500px bar and most of a
   320px one, and it sits next to an account control that also wants room.
   icon.svg is the same mark lifted out of logo.svg -- viewBox 128x123, so at
   28px tall it is 29 wide and costs a third of what the wordmark did. */
html.ms-narrow .tabsbar .item.emails .link .icon {
  /* viewBox 128x123, so 35 tall is 36 wide -- a third of the wordmark's 120,
     which is what buys the address room to be readable beside it. */
  width: 36px;
  height: 35px;
  background-image: url("images/icon-white.svg");
}


/* Search: the row is gone until the toolbar button asks for it. Scoped to the
   separated layout for the same reason everything else here is -- a desktop
   window dragged narrow keeps its own search row, which still fits. */
.toolbar .content > .ms_search_toggle {
  display: none;
}
html.ms-narrow.layout-separated .panels.separate_layout_mode .toolbar .content > .ms_search_toggle {
  display: inline-block;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
html.ms-narrow.layout-separated .ms_search_toggle .icon {
  position: relative;
}
/* Drawn rather than taken from the icon font, same reasoning as the folders
   toggle: the glyph set is upstream's and inventing a codepoint breaks the
   first time that font is regenerated. Circle plus handle. */
html.ms-narrow.layout-separated .ms_search_toggle .icon::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
html.ms-narrow.layout-separated .ms_search_toggle .icon::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 19px;
  width: 7px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* !important, and :not() rather than a second rule re-stating display. The row
   is force-shown by this theme's own override near the top of the file --
   `.panel.center_panel .panel_top { display: flex !important }`, which sets the
   flex alignment the checkbox and search box depend on. Hiding it needs equal
   weight; restoring it by naming a display value again would drop that
   alignment, so the open state simply stops matching and lets the original
   rule stand.

   .panel.center_panel is load-bearing. The opened message's header is also a
   .middle_bar > .panel_top -- div.panel_top.message_header inside
   .panel.item_viewer.message_viewer -- so without it this took the sender line,
   the reply and delete toolbar and the Back control with it, and a message
   opened on a phone had no way out but the browser's own back. */
html.ms-narrow.layout-separated:not(.ms-search-open) .panels.separate_layout_mode .panel.center_panel .middle_bar > .panel_top {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Tooltips.
 *
 * The toolbar glyphs already have names: every one carries a customTooltip
 * binding, and CoreWebclient/js/CustomTooltip.js builds a span.custom_tooltip
 * on the first hover. Nothing to add -- only two values to bring in line.
 *
 * Upstream paints it #424e54, a slate grey that appears nowhere else here, and
 * sets font-family: Verdana while the rest of the app runs on the Helvetica
 * stack. Both are folded into the palette: #10344F is the ink used for headings
 * and the tabs bar, and the font is inherited rather than named.
 * ------------------------------------------------------------------------- */

.custom_tooltip .custom_tooltip_text {
  background: #10344F;
  border-color: #10344F;
  font-family: inherit;
}

.custom_tooltip .custom_tooltip_arrow.top { border-bottom-color: #10344F; }
.custom_tooltip .custom_tooltip_arrow.bottom_arrow { border-top-color: #10344F; }

/* ---------------------------------------------------------------------------
 * Unread badge.
 *
 * Upstream marks an unread row with a "new" tag at #33cc82 -- a fifth colour,
 * and 9px white on it measures 2.08:1, which is unreadable at any size and not
 * close at this one. #0C6FB8 is the primary already used for anything a label
 * sits on, and takes it to 5.27:1.
 *
 * The badge is not the only signal -- the row also carries a bold subject at
 * #26282f -- so this is a legibility fix, not the thing standing between a
 * reader and knowing what is unread.
 * ------------------------------------------------------------------------- */

.panel.center_panel .items_list .item.unseen::after {
  background: #0C6FB8;
}

/* ---------------------------------------------------------------------------
 * The toast, which is every error the product has.
 *
 * One panel per kind, dropped from the top of the window: the failed sign-in,
 * "Message sent", "Loading...", and anything the API returns. Measured as
 * shipped, white bold 12px on each fill:
 *
 *   error    #F47474   2.76:1
 *   success  #96C671   1.98:1
 *   loading  #DAC073   1.78:1
 *   gray     #CCCCCC   4.07:1   (its ink is #595D6E, not white)
 *
 * 12px bold is not large text -- WCAG 2.2 1.4.3 wants 4.5:1 and the worst of
 * these is under half. The one telling a reader their password was wrong is at
 * 2.76:1, on a surface that hides itself after ten seconds.
 *
 * Three palette colours instead, each dark enough to carry white: the primary
 * for loading, the rail gradient's own green for success, and a red picked to
 * clear the threshold rather than to look alarming. The gray variant keeps its
 * fill and takes the heading ink.
 *
 * The text shadow goes too. It was there to lift white off the pale fills and
 * on these it only softens the edges of the type.
 * ------------------------------------------------------------------------- */

.error.report_panel .content {
  background: #C0392B;
  border-color: #A93226;
}

.report.report_panel .content {
  background: #0E7D5E;
  border-color: #0B6B50;
}

.loading.report_panel .content {
  background: #0C6FB8;
  border-color: #0A5F9E;
}

/* Was #332808, a brown for the mustard fill -- 2.75:1 on the blue. */
.loading.report_panel .content a {
  color: #FFFFFF;
  text-decoration: underline;
}

/* The same fix, for the fills that never got one.
 *
 * Only .loading had a link colour, because upstream renders every linked
 * notice through Screens.showLoading -- so the moment the two-factor prompt
 * moved to showReport its link fell back to the global link blue on a dark
 * green field. Unreadable, and it was the only thing in the notice worth
 * clicking.
 *
 *   .report  #FFFFFF on #0E7D5E  5.10:1
 *   .error   #FFFFFF on #C0392B  5.53:1  -- ERROR_TOKEN_PROBLEM_HTML links here
 *
 * All the dark fills now carry one, so the next notice to move between them
 * cannot repeat this.
 */
.report.report_panel .content a,
.error.report_panel .content a {
  color: #FFFFFF;
  text-decoration: underline;
}

/* .gray is a muted state the panel can take on top of any of the three, and
   upstream's own grey rule sits after their fills for exactly that reason.
   Restated here, after the three above, or a green fill declared later would
   take the mute away. */
.gray.report_panel .content {
  background: #CCCCCC;
  border-color: #A9A9A9;
  color: #10344F;
}

/* And its link, for the same reason the fill is restated here: .gray sits on
   top of one of the three, so a muted error would otherwise take the white
   link colour above and put it on the pale fill at 1.7:1. Same ink as the text
   beside it, 8.21:1. Declared after the white rule so it wins on order. */
.gray.report_panel .content a {
  color: #10344F;
  text-decoration: underline;
}

/* The shadow was there to lift white off the pale fills; on these it only
   softens the type.

   Padding was 15px top and 10px bottom -- the text sat above centre in its own
   box. Even, and enough on the right for the close target below. */
.report_panel .content {
  text-shadow: none;
  padding: 12px 44px 12px 20px;
}

/* The dismiss control was a 16x16 box, under the 24x24 WCAG 2.2 2.5.8 floor and
   a poor target on a phone, which is where a toast is hardest to read around.
   32x32 with the glyph still 16px and centred in it -- the target grows, the
   cross does not. */
.report.report_panel .content .close,
.error.report_panel .content .close {
  width: 32px;
  height: 32px;
  right: 0;
  top: 0;
  line-height: 32px;
  text-align: center;
}

/* Upstream caps the toast at 20% of the window, which is 256px on a 1280 screen
   -- "The username or password you entered is incorrect." wraps to two lines in
   it. Inside a min-width query so the 80% the theme gives small screens further
   up still applies there; a plain rule here would override it, media queries
   carrying no specificity of their own. */
@media screen and (min-width: 769px) {
  .report_panel .content {
    max-width: 480px;
  }
}
/* ---------------------------------------------------------------------------
 * Left rail on blue.
 *
 * Upstream styles this rail for a light background -- grey labels, a grey
 * hover, a translucent white pill. Painting it #0C6FB8 kept the geometry and
 * broke every one of those, all in the same direction. Measured on the running
 * page against the rail blue:
 *
 *   folder label on hover   #444444          1.85:1   darker than resting
 *   unread count            #fff on 50% #fff 2.14:1
 *   Manage Folders          #00AEEF at 11px  2.08:1
 *   unselectable folder     #AAAAAA          2.27:1
 *
 * The hover is the one to notice: .item.canSelect > .title:hover repaints the
 * label #444, so pointing at a folder makes its name harder to read than
 * leaving it alone. Nothing else on the rail moves, so there is no other signal
 * that the row is live.
 *
 * The gradient is the login screen's, turned upright: same two stops, so the
 * rail and the sign-in page are one surface rather than two blues that nearly
 * match. White is 5.27:1 at the blue end and 5.10:1 at the green, so no label
 * loses anything on the way down.
 * ------------------------------------------------------------------------- */

.panel.left_panel {
  background-image: linear-gradient(180deg, #0C6FB8 0%, #0E7D5E 100%);
}

/* Hover and selection darken the row rather than lighten it. Upstream washes
   white over the background, which was survivable on one flat blue and is not
   on a sweep -- white-on-white-wash at the green end measures 3.54:1. Darkening
   moves white text the other way wherever the row happens to sit. */
.panel.left_panel .items_list .item.canSelect > .title:hover {
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.10);
}

.panel.left_panel .items_list .item.canSelect > .title:hover .icon {
  color: inherit;
}

.panel.left_panel .items_list .item.selected > .title,
.panel.left_panel .items_list .item.selected > .title:hover {
  background-color: rgba(0, 0, 0, 0.20);
}

/* The unread count is the one number on this rail worth reading. Solid white
   with the primary as ink, 5.27:1, instead of white on a half-white pill.
   !important because upstream's own declaration carries it -- specificity
   alone loses no matter how the selector is written. */
.panel.left_panel .items_list .item > .title .count.unseen,
.panel.left_panel .items_list .item > .title .count.total {
  background-color: #FFFFFF !important;
  color: #0C6FB8;
}

/* Manage Folders is the only route to folder management and was inheriting the
   global link colour, which is a sixth blue and lands at 2.08:1 here. */
.panel.left_panel .manage_folders a,
.panel.left_panel .manage_folders a:link,
.panel.left_panel .manage_folders a:visited {
  color: #FFFFFF;
  font-size: 12px;
}

.panel.left_panel .manage_folders a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* A folder the server marks \Noselect really is inert -- cursor: default, no
   handler -- so muting it is right and WCAG exempts it. #AAA is not muting
   though, it is a foreign grey that reads as damage. Same idea in the rail's
   own terms. */
.panel.left_panel .items_list .item.canNotSelect > .title,
.panel.left_panel .items_list .item.canSelect > .title.virtualEmpty .title {
  color: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
 * Text that is too pale to read.
 *
 * Three values upstream uses for de-emphasis, measured on white:
 *
 *   #00AEEF  links                   2.53:1   Show CC, Show BCC
 *   #9196A6  toolbar text controls   2.95:1   Save, Importance, Sensitivity,
 *                                             Reading confirmation
 *   #B1B4C0  hints and empty states  2.07:1   the only instruction telling a
 *                                             reader how to attach a file
 *
 * None of these is a disabled control -- every one is live and clickable, so
 * the exemption does not apply. De-emphasis was the intent and is kept; these
 * are still the quietest things on the page, just legible now.
 *
 * The link blue becomes the palette primary at 5.27:1 rather than a sixth blue.
 * The two greys become #5A6373, 6.06:1, which upstream already uses for the
 * keyboard-shortcut hints at the foot of the compose window -- so this borrows
 * a value rather than adding one.
 * ------------------------------------------------------------------------- */

a,
.link,
a:link,
.link:link,
a:visited,
.link:visited {
  color: #0C6FB8;
}

.toolbar .content > .item > .text,
.toolbar .content .group > .item > .text {
  color: #5A6373;
}

.list_notification,
.message_viewer .message_body_info {
  color: #5A6373 !important;
}

/* Compose and message-viewer override the link colour with their own copies of
   #00AEEF, at specificities the base rule cannot reach. Same value, same
   reason, listed rather than fought with !important. */
.panel.compose table.fields .to .link,
.item_viewer .add_contact,
.panel.item_viewer .attachments .download_menu .link .icon {
  color: #0C6FB8;
}

/* ---------------------------------------------------------------------------
 * Manage Folders: "Junkused as Spam".
 *
 * The row is two adjacent <span class="text"> -- the folder name, then
 * usedAs() -- so every special folder on this screen reads as one run-together
 * word. Upstream problem, but a space is all it needs and a space is something
 * a stylesheet can add.
 *
 * The two spans are not adjacent: the inline-rename <input> sits between them,
 * display:none but still a sibling, so + never matches and ~ is required.
 * ------------------------------------------------------------------------- */

.folders.items_list .item .name .text ~ .text {
  margin-left: 0.35em;
}

/* ---------------------------------------------------------------------------
 * Message list: the two fields you scan.
 *
 * Measured on the running list, whose rows are #EFF0F2:
 *
 *   .date, .size  #999999 at 10.7px  2.50:1
 *   .from         #72788D at 12px    3.85:1
 *
 * The subject is fine either way -- #3F434E read, #26282F unread, 8.67:1 and
 * better -- so this is only the sender and the timestamp, which is most of what
 * a reader actually scans a list for.
 *
 * Both take #5A6373, 5.31:1 here, the same ink already used for the compose
 * shortcut hints and the empty-state text. The hierarchy survives: subject
 * stays darkest, sender a step back, and nothing gets promoted to look like
 * something it is not.
 *
 * .from needs !important because upstream's declaration carries it.
 * ------------------------------------------------------------------------- */

.items_list .item .date,
.items_list .item .size {
  color: #5A6373;
}

.panel.center_panel .items_list .item .from {
  color: #5A6373 !important;
}

/* ---------------------------------------------------------------------------
 * Reading pane: the quick-reply box and attachment sizes.
 *
 * Audited on a throwaway mailbox rather than a real one. Measured on white:
 *
 *   .fields .row .placeholder  #BBBBBB at 14.7px  1.92:1  "Quick reply to all"
 *   .fields .hint              #929292 at 12px    3.11:1  "Ctrl+Enter to send"
 *   .attachments .item .size   #929292 at 12px    3.11:1  file sizes
 *
 * The placeholder is the worst of it and the least excusable: the quick-reply
 * box has no label of its own, so that string is the only thing saying what
 * the box is for. A placeholder standing in for a label has to be readable.
 *
 * Everything else in the pane already passes -- the header is #4D4D4D at
 * 8.45:1, links are the palette primary at 5.27:1, and the message body is the
 * sender's own markup, which is not ours to repaint.
 *
 * All three take #5A6373, 6.06:1, the same ink as the message list and the
 * compose hints.
 * ------------------------------------------------------------------------- */

.fields .row .placeholder {
  color: #5A6373;
}

.fields .hint,
.attachments .item .size {
  color: #5A6373;
}

/* ---------------------------------------------------------------------------
 * Settings navigation: long labels wrap.
 *
 * The column is 205px and upstream fades a label out with a mask over a
 * nowrap line, so "Two Factor Verification" read as "Two Factor Verificatio"
 * and longer translations lose more. The label wraps onto a second line
 * instead, next to its icon, at every language.
 * ------------------------------------------------------------------------- */
.panels.settings .panel.navigation_panel .item .name {
  display: flex;
  align-items: center;
  white-space: normal;
  mask: none;
  -webkit-mask: none;
}
.panels.settings .panel.navigation_panel .item .name .icon {
  flex: 0 0 auto;
}
.panels.settings .panel.navigation_panel .item .name .text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

/* ---------------------------------------------------------------------------
 * Notices on a phone sit at the bottom.
 *
 * .report_panel is fixed to the top of the window, which on a phone puts it
 * over the header: the folder button, search and the account menu are all
 * under it for the ten seconds the two-factor nudge stays up. At the bottom it
 * covers the end of the list instead, which scrolls. The panel is as wide as
 * the window, so it lets taps through and only the notice itself takes them.
 * ------------------------------------------------------------------------- */
html.ms-narrow .report_panel {
  top: auto;
  bottom: 0;
  height: auto;
  padding: 0 8px env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
  pointer-events: none;
}
html.ms-narrow .report_panel .content {
  pointer-events: auto;
  /* Width and style only: the colour stays the one each notice kind sets */
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  transform-origin: 0 100%;
}
html.ms-narrow.csstransitions .hide.report_panel .content {
  transform: rotateX(90deg);
}

/* ---------------------------------------------------------------------------
 * Unread badge in the header.
 *
 * #FEE5D6 on #FF3D33 measures 2.91:1, under the 4.5:1 the count needs at
 * 8pt. White on #D93025 is 4.77:1 and still reads as the same red.
 * ------------------------------------------------------------------------- */
.tabsbar .item .unseen.one {
  background: #D93025 !important;
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
 * Light theme contrast, measured on white by the same audit as the rest.
 *
 *   .panel.compose table.fields .label   #BABABA  1.94:1  "To", "Subject"
 *   .buttons .button.contour_button      #9196A6  2.95:1  "No, Thanks", quick-reply "Save"
 *   selected row .date                   #9196A6  2.95:1
 *
 * The outline button already had a brand-blue rule further down (#0C6FB8,
 * 5.27:1) that never applied: the 2023 rule at the top of this file sets its
 * grey with !important. The labels and the date take #5A6373 (6.06:1), the
 * ink the message list and compose hints use.
 * ------------------------------------------------------------------------- */
.panel.compose table.fields .label {
  color: #5A6373;
}
.buttons .button.contour_button {
  color: #0C6FB8 !important;
}
.panel.center_panel .items_list .item.selected .date {
  color: #5A6373;
}
/* ---------------------------------------------------------------------------
 * Attachment names in the reading pane: two lines.
 *
 * The tile title kept 43px of right padding and a single nowrap line, so
 * "invoice-september-2026-final-version.pdf" showed as "invoice-s...". Upstream
 * 9.8.6 moved to two lines for the same reason. Scoped to the reading pane:
 * compose upload tiles keep their padding for the cancel control.
 * ------------------------------------------------------------------------- */
.message_viewer .attachments .item .title {
  padding-right: 8px;
}
.message_viewer .attachments .item .title .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-all;
  line-height: 1.2;
}
/* ---------------------------------------------------------------------------
 * Compose: quote button and recipient chips.
 *
 * The editor icons here are the sprite set from the 2023 theme. Upstream 9.8.6
 * added a Quote button drawn from the icon font instead, and without the 16px
 * box upstream gives its font icons it came out at the toolbar default of 32px,
 * hanging below the bar.
 *
 * Recipient chips were #5B9BCD on #E5EFF7, 2.6:1. #0A5F9E is 5.7:1 on the same
 * fill, the darker step of the brand blue the notices already use.
 * ------------------------------------------------------------------------- */
.html_editor .toolbar .content .item.blockquote .icon {
  background-image: none;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}
.html_editor .toolbar .content .item.blockquote .icon:before {
  color: #595959;
  vertical-align: top;
}
.inputosaurus-container li {
  color: #0A5F9E;
}
/* The remove button on a chip takes the chip's own text colour */
.inputosaurus-container li a,
.inputosaurus-moving-container li a {
  color: inherit;
}

/* Contact list: the address under a name was #519CE2, 2.6:1 on the list grey. */
.panel.contacts_panel .item .data .email,
.panel.contacts_panel .item.selected .me {
  color: #0A5F9E;
}

/* ---------------------------------------------------------------------------
 * Settings > Calendars & Contacts, built by mailspace-ui.js (section 3d).
 *
 * Its pane sits beside upstream's current settings pane, so while it is open
 * (html.ms-dav-open) upstream's is hidden. Rows reuse the settings .row /
 * .label / .input look; the URLs need more room than upstream's 300px field.
 * ------------------------------------------------------------------------- */
html.ms-dav-open .panels.settings .panel.data > .panel_content > .middle_bar:not(.ms_dav_pane) {
  display: none !important;
}
.panels.settings .panel.data > .panel_content > .ms_dav_pane > .panel_center {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 30px;
}
.ms_dav_pane .fields {
  max-width: 820px;
  padding: 0 20px;
}
.ms_dav_pane .ms_dav_intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
}
.ms_dav_pane .row {
  align-items: center;
  gap: 8px;
}
.ms_dav_pane .row .value.input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 520px;
}
.ms_dav_pane .row .ms_dav_note {
  font-size: 13px;
}
.ms_dav_pane .ms_dav_copy_wrap {
  flex: 0 0 auto;
}
.ms_dav_pane .ms_dav_copy_wrap .button {
  min-width: 64px;
}
.ms_dav_pane .ms_dav_steps h3 {
  margin: 22px 0 6px;
  font-size: 14px;
}
.ms_dav_pane .ms_dav_steps ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}
.ms-narrow .ms_dav_pane .row {
  flex-wrap: wrap;
}
.ms-narrow .ms_dav_pane .row .label {
  flex: 0 0 100%;
}