.email-application {
  position: relative;
  border-radius: 0.35rem;
  height: calc(var(--vh, 1vh)*50 - 7.55rem); }
  .horizontal-layout .email-application {
    margin-top: 1rem; }
    .horizontal-layout .email-application,
    .horizontal-layout .email-application .email-app-sidebar {
      height: calc(var(--vh, 1vh)*100 - 12rem); }
    .horizontal-layout .email-application .email-app-list-mails,
    .horizontal-layout .email-application .email-app-mail-content,
    .horizontal-layout .email-application .email-app-mail-content-detail {
      height: calc(var(--vh, 1vh)*100 - 14.4rem); }
    .horizontal-layout .email-application .email-app-list-mails .email-app-list {
      height: calc(var(--vh, 1vh) * 100 - 18rem); }
  .email-application .ps__rail-x {
    display: none !important; }
  .email-application .wrapper {
    height: calc(var(--vh, 1vh) * 100 - 8rem); }
  .email-application.navbar-sticky .wrapper {
    height: calc(var(--vh, 1vh) * 100); }
  .email-application.horizontal-layout .wrapper {
    height: calc(var(--vh, 1vh) * 100 - 4rem); }
  .email-application.horizontal-layout.navbar-sticky .footer {
    margin-top: 0; }
  .email-application .app-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100% !important;
    width: 100%;
    border-radius: 0.35rem;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: -1;
    visibility: visible; }
    .email-application .app-content-overlay.show {
      opacity: 1;
      z-index: 3; }
  .email-application .email-app-sidebar {
    z-index: 2;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 16rem;
    height: calc(var(--vh, 1vh)*100 - 7.55rem);
    border-right: 1px solid #E0E0E0; }
    .email-application .email-app-sidebar .sidebar-close-icon {
      position: absolute;
      right: 0.5rem;
      top: 0.25rem;
      cursor: pointer;
      font-size: 1.25rem;
      z-index: 1; }
    .email-application .email-app-sidebar .email-app-sidebar-content {
      position: relative;
      height: 100%;
      padding: 20px; }
      .email-application .email-app-sidebar .email-app-sidebar-content .list-group-messages a {
        padding: 0.5rem 1rem;
        margin-bottom: 0.3rem;
        font-size: 1.1rem; }
        .email-application .email-app-sidebar .email-app-sidebar-content .list-group-messages a.list-group-item {
          border-radius: 0.35rem; }
          .email-application .email-app-sidebar .email-app-sidebar-content .list-group-messages a.list-group-item.active {
            background-color: #975AFF !important;
            color: #fff !important; }
  .email-application .compose-new-mail-sidebar {
    height: calc(100vh - 7.5rem);
    width: 23rem;
    border-radius: 0;
    background-color: #fff;
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out; }
    .email-application .compose-new-mail-sidebar.show {
      transform: translateX(0); }
    .email-application .compose-new-mail-sidebar .compose-sidebar-close-icon {
      position: absolute;
      right: 1rem;
      top: 0.6rem;
      cursor: pointer;
      font-size: 1.25rem;
      z-index: 1; }
    .email-application .compose-new-mail-sidebar .ql-editor {
      min-height: 5rem; }
    .email-application .compose-new-mail-sidebar [class*='ql'] {
      border: 0; }
    @media (max-width: 575.98px) {
      .email-application .compose-new-mail-sidebar {
        width: 18rem; } }
  .email-application .email-app-content {
    padding-right: 1rem;
    height: 100%; }
    .email-application .email-app-content .email-search-box {
      background-color: #fff; }
  .email-application .email-app-list-mails {
    position: relative;
    padding: 0px;
    width: 100%;
    overflow-y: hidden;
    background-color: #fff;
    height: calc(var(--vh, 1vh)*100 - 13.5rem); }
    .email-application .email-app-list-mails .email-app-list {
      position: relative;
      height: 100%; }
      .email-application .email-app-list-mails .email-app-list p {
        margin-bottom: 0.2rem; }
      .email-application .email-app-list-mails .email-app-list .ps__rail-x,
      .email-application .email-app-list-mails .email-app-list .ps__rail-y {
        z-index: 2; }
  .email-application .email-app-mail-content {
    float: left;
    z-index: 1;
    /*width: calc(100% - 320px);*/
    width:100%;
    position: relative;
    padding: 0px;
    background-color: #fff;
    height: calc(var(--vh, 1vh)*100 - 13.5rem);
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out; }
  .email-application .email-app-mail-content-detail {
    position: relative;
    height: calc(var(--vh, 1vh)*55 - 13.5rem);
    overflow-y: auto; }
    .email-application .email-app-mail-content-detail .opened-email {
      background: #F7F7F8; }
  .email-application .email-app-content-wrapper {
    overflow-y: scroll;
    height: calc(100% - 30px); }
    .email-application .email-app-content-wrapper .email-app-options,
    .email-application .email-app-content-wrapper .email-app-title {
      border-bottom: 1px solid #E0E0E0; }
  .email-application .users-list-padding .list-group-item-text .float-right i.ft-star {
    color: #bdbdbd; }
  .email-application .users-list-padding .email-list-text {
    color: #616161; }
  .email-application .users-list-padding .selected-email {
    background-color: #eee;
    border: none;
    border-right: 3px solid #975AFF !important; }
    .email-application .users-list-padding .selected-email:first-child, .email-application .users-list-padding .selected-email:last-child {
      border-radius: 0; }

@media (max-width: 1199.98px) {
  .horizontal-layout .email-application,
  .horizontal-layout .email-application .email-app-sidebar,
  .horizontal-layout .email-application .compose-new-mail-sidebar {
    height: calc(var(--vh, 1vh)*100 - 8.5rem); }
  .email-app-sidebar {
    transform: translateX(-110%);
    transition: transform 0.4s; }
    .email-app-sidebar.show {
      transform: translateX(0%);
      z-index: 3; }
  .email-app-content {
    padding-left: 1rem; } }

@media (min-width: 768px) {
  .email-application .email-app-sidebar {
    left: 0; }
  .email-application .email-app-list-mails {
    width: 319px;
    border-right: 1px solid #E0E0E0;
    float: left; } }

@media (min-width: 1200px) {
  .email-application .email-app-content {
    margin-left: 16rem; }
  .horizontal-layout .email-application .email-app-sidebar,
  .horizontal-layout .email-application .compose-new-mail-sidebar {
    height: calc(var(--vh, 1vh)*100 - 11.98rem); }
  .horizontal-layout .email-application .email-app-list-mails,
  .horizontal-layout .email-application .email-app-mail-content,
  .horizontal-layout .email-application .email-app-mail-content-detail {
    height: calc(var(--vh, 1vh)*100 - 13.5rem) !important; }
  .email-application.horizontal-layout.navbar-sticky .wrapper {
    height: calc(var(--vh, 1vh) * 100); }
  .email-application.horizontal-layout.navbar-static .wrapper {
    height: calc(var(--vh, 1vh) * 100 - 4rem); } }

@media (max-width: 767.98px) {
  .email-application .email-app-mail-content {
    position: absolute !important;
    top: 0 !important;
    left: 110% !important;
    width: 100% !important;
    height: calc((var(--vh, 1vh) * 100) - 7.5rem) !important;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out; }
    .email-application .email-app-mail-content .email-app-mail-content-detail {
      height: calc(var(--vh, 1vh)*100 - 7.5rem) !important; }
  .email-application .show-email-content {
    left: 0 !important; }
  .horizontal-layout .email-application .email-app-mail-content,
  .horizontal-layout .email-application .email-app-mail-content-detail {
    height: calc(var(--vh, 1vh)*100 - 8.5rem) !important; } }