/*------------------------------------------------------------------
[Table of contents]

1. Container / .mail
2. Emails list / .mail > .emails
3. View and Manage content / .mail > .biew
-------------------------------------------------------------------*/
.mail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  height: 100%; }
  .mail > .emails {
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 400px;
    height: 100%;
    border-right: 1px solid #dee0e1; }
    .mail > .emails > .header {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      min-height: 56px;
      height: 56px;
      border-bottom: 1px solid #dee0e1;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 0 10px; }
      .mail > .emails > .header > .search {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1; }
      .mail > .emails > .header > .actions {
        margin-left: 10px; }
        .mail > .emails > .header > .actions > .btn, .mail > .emails > .header > .actions > .btn-group {
          margin-right: 8px; }
          .mail > .emails > .header > .actions > .btn:last-child, .mail > .emails > .header > .actions > .btn-group:last-child {
            margin-right: 0; }
        .mail > .emails > .header > .actions > .btn-group > .btn > .icon {
          font-size: 24px;
          line-height: 24px; }
    .mail > .emails > .body {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1; }
      .mail > .emails > .body ul {
        list-style: none;
        padding: 0;
        margin: 0; }
      .mail > .emails > .body .email {
        border-bottom: 1px solid #dee0e1; }
        .mail > .emails > .body .email.active {
          background: #ebeef5;
          color: #333333;
          position: relative; }
          .mail > .emails > .body .email.active::before {
            content: '';
            width: 4px;
            height: 100%;
            background: #d7dceb;
            display: block;
            position: absolute;
            top: 0;
            left: 0; }
        .mail > .emails > .body .email.new {
          background: rgba(247, 202, 24, 0.1); }
          .mail > .emails > .body .email.new > a {
            font-weight: 500; }
        .mail > .emails > .body .email.closed > a {
          opacity: 0.7; }
        .mail > .emails > .body .email > a {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          -js-display: flex;
          display: flex;
          padding: 15px 20px; }
          .mail > .emails > .body .email > a:hover {
            text-decoration: none; }
          .mail > .emails > .body .email > a > .avatar {
            margin-right: 12px; }
          .mail > .emails > .body .email > a > .body {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto; }
            .mail > .emails > .body .email > a > .body > .info {
              margin-bottom: 2px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              -js-display: flex;
              display: flex;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
                  -ms-flex-pack: justify;
                      justify-content: space-between; }
              .mail > .emails > .body .email > a > .body > .info > .name {
                color: #333333;
                font-size: 13px;
                font-weight: normal; }
                .mail > .emails > .body .email > a > .body > .info > .name > .favorite {
                  color: rgba(57, 81, 155, 0.6);
                  font-size: 15px;
                  font-weight: normal;
                  position: relative;
                  top: 1px;
                  display: inline-block;
                  margin-right: 5px; }
                  .mail > .emails > .body .email > a > .body > .info > .name > .favorite.active {
                    color: #ffb300; }
              .mail > .emails > .body .email > a > .body > .info > .time {
                color: #858585;
                font-size: 10px;
                text-transform: uppercase; }
            .mail > .emails > .body .email > a > .body > .subject {
              font-weight: 500;
              color: #333;
              margin-bottom: 4px; }
            .mail > .emails > .body .email > a > .body > .message {
              color: #333;
              font-size: 12px;
              font-weight: normal; }
            .mail > .emails > .body .email > a > .body > .status {
              margin-top: 5px;
              padding: 3px 5px; }
    .mail > .emails.compact {
      width: 1px;
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      border-right: none; }
      .mail > .emails.compact > .header {
        padding-left: 20px; }
        .mail > .emails.compact > .header > .check-all {
          width: 36px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          -js-display: flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center; }
          .mail > .emails.compact > .header > .check-all > .custom-checkbox {
            width: 16px;
            height: 16px;
            margin: 0;
            padding: 0; }
      .mail > .emails.compact > .body .table {
        width: 100%;
        border: none; }
        .mail > .emails.compact > .body .table .checkbox .custom-control-indicator:before {
          left: 0; }
        .mail > .emails.compact > .body .table tr.selected {
          background-color: rgba(247, 202, 24, 0.1); }
          .mail > .emails.compact > .body .table tr.selected > td {
            background-color: rgba(247, 202, 24, 0.1); }
            .mail > .emails.compact > .body .table tr.selected > td:hover {
              background-color: rgba(247, 202, 24, 0.1); }
        .mail > .emails.compact > .body .table tr.unread > td.message {
          color: #333; }
        .mail > .emails.compact > .body .table td {
          cursor: pointer;
          padding-top: 10px;
          padding-bottom: 9px;
          border-top: none;
          border-bottom: 1px solid #dee0e1;
          vertical-align: middle; }
          .mail > .emails.compact > .body .table td.sender {
            width: 180px;
            padding-left: 15px; }
            .mail > .emails.compact > .body .table td.sender > .favorite {
              color: rgba(57, 81, 155, 0.6);
              display: inline-block;
              margin-right: 10px;
              font-size: 16px;
              position: relative;
              top: 1px; }
              .mail > .emails.compact > .body .table td.sender > .favorite.active {
                color: #ffb300; }
            .mail > .emails.compact > .body .table td.sender > .amount {
              color: #858585; }
          .mail > .emails.compact > .body .table td.message {
            color: #858585; }
            .mail > .emails.compact > .body .table td.message > .badge {
              padding: 3px 5px;
              margin: 0;
              margin-right: 10px; }
            .mail > .emails.compact > .body .table td.message > .subject {
              color: #333;
              display: inline-block;
              margin-right: 20px; }
          .mail > .emails.compact > .body .table td.datetime {
            text-align: right;
            color: #858585;
            font-size: 10px;
            text-transform: uppercase; }
  .mail > .view {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    background: #fff; }
    .mail > .view.empty {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      background-color: #f5f6fa;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
      .mail > .view.empty .icon {
        font-size: 62px;
        color: rgba(57, 81, 155, 0.1);
        margin-bottom: 20px; }
      .mail > .view.empty .text {
        width: 230px;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.5;
        color: #858585;
        margin-bottom: 20px;
        text-align: center; }
    .mail > .view > .header {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      height: 56px;
      border-bottom: 1px solid #d7dceb;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
      padding-left: 20px;
      padding-right: 30px; }
      .mail > .view > .header > .mail-controls > .btn + .btn {
        margin-left: 10px; }
      .mail > .view > .header > .controls {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -js-display: flex;
        display: flex; }
        .mail > .view > .header > .controls > .btn {
          margin-left: 10px; }
    .mail > .view > .body {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1; }
      .mail > .view > .body .email-content {
        padding: 20px 30px 20px 20px; }
        .mail > .view > .body .email-content > .subject {
          font-size: 18px;
          font-weight: 500;
          margin-bottom: 8px; }
        .mail > .view > .body .email-content > .badges {
          margin-bottom: 16px; }
          .mail > .view > .body .email-content > .badges > .badge {
            padding: 3px 5px;
            margin-right: 5px; }
            .mail > .view > .body .email-content > .badges > .badge:last-child {
              margin-right: 0; }
        .mail > .view > .body .email-content > .sender {
          margin-bottom: 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          -js-display: flex;
          display: flex; }
          .mail > .view > .body .email-content > .sender > .avatar {
            margin-right: 12px; }
            .mail > .view > .body .email-content > .sender > .avatar > img {
              width: 36px;
              height: 36px; }
          .mail > .view > .body .email-content > .sender > .info {
            margin-right: 20px; }
            .mail > .view > .body .email-content > .sender > .info > .name, .mail > .view > .body .email-content > .sender > .info > .time {
              display: block; }
            .mail > .view > .body .email-content > .sender > .info > .name > .favorite {
              font-size: 16px;
              color: #8897c3;
              position: relative;
              top: 1px; }
              .mail > .view > .body .email-content > .sender > .info > .name > .favorite.active {
                color: #ffb300; }
              .mail > .view > .body .email-content > .sender > .info > .name > .favorite:hover {
                text-decoration: none; }
            .mail > .view > .body .email-content > .sender > .info > .time {
              color: #858585; }
          .mail > .view > .body .email-content > .sender > .data > .from, .mail > .view > .body .email-content > .sender > .data > .to {
            display: block;
            color: #858585; }
        .mail > .view > .body .email-content > .attachments {
          margin-top: 20px; }
          .mail > .view > .body .email-content > .attachments > ul {
            margin: 0;
            padding: 0; }
          .mail > .view > .body .email-content > .attachments .file-item {
            display: inline-block;
            cursor: pointer;
            margin-right: 10px;
            margin-top: 10px;
            position: relative; }
            .mail > .view > .body .email-content > .attachments .file-item:hover > .thumb {
              border: solid 1px #42a5f5; }
            .mail > .view > .body .email-content > .attachments .file-item > .thumb {
              width: 90px;
              height: 90px;
              -webkit-border-radius: 2px;
                      border-radius: 2px;
              background-color: #fff;
              border: solid 1px #dee0e1;
              margin-bottom: 5px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              -js-display: flex;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
                  -ms-flex-align: center;
                      align-items: center;
              text-align: center;
              font-size: 45px;
              color: #25628F; }
              .mail > .view > .body .email-content > .attachments .file-item > .thumb::before {
                width: 100%; }
            .mail > .view > .body .email-content > .attachments .file-item > img.thumb {
              border: none; }
            .mail > .view > .body .email-content > .attachments .file-item > .filename {
              display: block;
              font-size: 12px;
              font-weight: 400;
              color: #333; }
            .mail > .view > .body .email-content > .attachments .file-item > .size {
              position: relative;
              top: -2px;
              font-size: 10px;
              color: #858585; }
    .mail > .view.manage > .body {
      padding: 20px 30px 20px 20px; }

@media screen and (max-width: 1200px) {
  .btn.mail-navigation-block-toggle {
    position: static; }
  .mail > .navigation {
    position: fixed;
    top: 120px;
    bottom: 0;
    left: -250px;
    z-index: 3;
    height: 100%; }
    .mail > .navigation.open {
      left: 0;
      -webkit-transition: left .2s ease;
      transition: left .2s ease; } }

@media screen and (max-width: 880px) {
  .mail > .emails {
    width: 300px; } }

@media screen and (max-width: 780px) {
  .mail > .emails {
    width: 100%; }
  .mail > .view {
    position: fixed;
    z-index: 2;
    height: 100%;
    top: 120px;
    width: 100%;
    visibility: hidden;
    right: -1000px; }
    .mail > .view > .header > .mail-controls .btn {
      width: 38px;
      padding: 0; }
      .mail > .view > .header > .mail-controls .btn > .icon {
        margin: 0; }
      .mail > .view > .header > .mail-controls .btn > .text {
        display: none; }
    .mail > .view.open {
      visibility: visible;
      right: 0;
      -webkit-transition: right .2s ease;
      transition: right .2s ease; } }
