:root {
  --ffm-blue: #0061f2;
  --ffm-indigo: #5800e8;
  --ffm-purple: #6900c7; 
  --ffm-cyan: #00cfd5;
  --ffm-white: #fff;
  --ffm-gray: #69707a;
  --ffm-font-sans-serif: "Metropolis", -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";
  --ffm-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
  --ffm-gradient: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0)
  );
  --ffm-body-font-family: Metropolis, -apple-system, BlinkMacSystemFont,
      Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji,
      Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --ffm-body-font-size: 14px;
  --ffm-body-font-weight: 400;
  --ffm-body-line-height: 1.5;
  --ffm-body-color: #69707a;
  --ffm-body-bg: #f2f6fc;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
      scroll-behavior: smooth;
  }
}
.input-group-append {
  min-height: 30px;
}
body {
  margin: 0;
  // font-family: var(--ffm-body-font-family);
  // font-size: var(--ffm-body-font-size);
  // font-weight: var(--ffm-body-font-weight);
  line-height: var(--ffm-body-line-height);
  color: var(--ffm-body-color);
  // text-align: var(--ffm-body-text-align);
  background-color: var(--ffm-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 14px;
}
hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}
hr:not([size]) {
  height: 1px;
}
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: #363d47;
}
h1,
.h1 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h1,
  .h1 {
      font-size: 1.5rem;
  }
}
h2,
.h2 {
  font-size: calc(1.265rem + 0.18vw);
}
@media (min-width: 1200px) {
  h2,
  .h2 {
      font-size: 1.4rem;
  }
}
h3,
.h3 {
  font-size: calc(1.255rem + 0.06vw);
}
@media (min-width: 1200px) {
  h3,
  .h3 {
      font-size: 1.3rem;
  }
}
h4,
.h4 {
  font-size: 1.2rem;
}
h5,
.h5 {
  font-size: 1.1rem;
}
h6,
.h6 {
  font-size: 14px;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
.show {
  display: block!important;
  opacity: 1;
}
.modal-header {
  border-bottom-color: #f4f4f4;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
  order: 1; 
  font-weight: 500;
  font-size: 1.25em;
  line-height: 1.2;
} 
.close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
}
.close:focus, .close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
  order: 2;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
  cursor: pointer;
}
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
}
 
table.dataTable tbody tr {
  background-color: #ffffff;
}
table.dataTable.no-footer {
  border-bottom: 1px solid #111;
}
table.dataTable, table.dataTable th, table.dataTable td {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}
.table-bordered {
  border: 1px solid #f4f4f4;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  background-repeat: no-repeat;
  background-position: center right;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}
abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
ol,
ul {
  padding-left: 2rem;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 500;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: bolder;
}
small,
.small {
  font-size: 0.875em;
}
mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: #0061f2;
  text-decoration: none;
}
a:hover {
  color: #004ec2;
  text-decoration: underline;
}
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
} 
figure {
  margin: 0 0 1rem;
}
img,
svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #a7aeb8;
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input,
button,
select, 
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
select {
  text-transform: none;
}
[role="button"] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}
[list]::-webkit-calendar-picker-indicator {
  display: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
      font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}  
iframe {
  border: 0;
}
summary {
  display: list-item;
  cursor: pointer;
}
progress {
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}
.lead {
  font-size: 1.1rem;
  font-weight: 400;
}
.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
      font-size: 5rem;
  }
}
.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
      font-size: 4.5rem;
  }
}
.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
      font-size: 4rem;
  }
}
.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
      font-size: 3.5rem;
  }
}
.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
      font-size: 3rem;
  }
}
.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
      font-size: 2.5rem;
  }
}
::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, #7d93c3));
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
  background-color: #F5F5F5;
  border-radius: 10px;
}

#dept_details > tbody > tr > td:last-of-type {
  display: -ms-flexbox!important;
  display: flex!important;
  -ms-flex-wrap: wrap!important;
  flex-wrap: wrap!important;
  -ms-flex-pack: justify!important;
  justify-content: space-between!important;

}

td {
    padding: 4px !important;
  }

 

.spacing-table{ border-spacing: 0 5px!important;    border: 0px!important;  }
.spacing-table td {    background: #fff;cursor: pointer;
  
  padding: 5px;
  border-radius: 5px;

 background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 5px rgb(51, 51, 51);
  box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
    
  border: 1px solid #2673a3 !important;
      border-bottom-color: #C14646 !important;
  }
  .table-hover>tbody>tr:hover td {
     background-color: #edf6fb;
  }
  .fromspan{color: #5e819d;
      font-size: 13px;}

  .greenspan{color: #007f00;
      font-size: 13px;}

  .redspan{color: #EA1F09;
      font-size: 13px;}


 

.brand-link{min-height: 50px;
  background-color: #605ca8;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  -webkit-transition: margin-left .3s ease-in-out;
  -o-transition: margin-left .3s ease-in-out;
  transition: margin-left .3s ease-in-out;
  border: none !important;
  min-height: 50px;
  border-radius: 0;
}
.main-header.navbar{
  padding: 0;
  background-color: #605ca8; 
  -webkit-transition: margin-left .3s ease-in-out;
  -o-transition: margin-left .3s ease-in-out;
  transition: margin-left .3s ease-in-out;
  margin-bottom: 0; 
  border: none !important;
  min-height: 50px;
  border-radius: 0;
  display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-align: stretch!important;
    align-items: stretch!important;
}
 
span.brand-text.font-weight-light {
  color: white;
  font-weight: 600 !important;
}
.nav-sidebar .nav-item > a.nav-link { 
  font-size: 1.4rem !important;
  vertical-align: middle;
  color: #5c7ea8; 
  font-weight: 600;
}
[class*='sidebar-light-'] .nav-treeview > .nav-item > .nav-link{
  padding: 5px 5px 5px 15px;
  font-weight: 400;
}
.nav-sidebar .nav-item > a.nav-link i{
  width: 30px;
  font-size: 18px;
  vertical-align: middle;
  color: #5c7ea8;
  text-align: center;
}
.nav-sidebar .nav-item > .nav-link { 
  padding: 10px 5px;
}
 
.box.box-primary {
  border-top-color: #3c8dbc;
}
 
.box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
h3.box-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
}
.compose {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #89ba2c;
  color: #ffffff;
  border-radius: 20em;
  -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%), 0 0 5px rgb(0 0 0 / 10%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%), 0 0 5px rgb(0 0 0 / 10%);
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.content-header {
  padding: 7px 0.5rem;
}
.margin-bottom {
  margin-bottom: 20px;
}
.mail-sidebox h3.box-title {
  color: white;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  line-height: 1;
}
.mail-sidebox .box {
  background: transparent;
}
.mail-sidebox ul {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.mail-sidebox .box .nav-stacked>li {
  border-bottom: 1px solid transparent;
  margin: 0;
}
.box-header.with-border {
  border-bottom: 1px solid #224473; 
}
.mail-sidebox h3.box-title {
  color: white;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  line-height: 1;
}
.nav-stacked>li.active>a, .nav-stacked>li.active>a:hover { 
  border-top: 0;
  border-left-color: #3c8dbc;
}
.mail-sidebox .nav>li>a:hover, .mail-sidebox .nav>li>a:active, .mail-sidebox .nav>li>a:focus {
  color: #FFF;
  background: #5c7da8;
} 
.nav-stacked>li.active>a, .nav-stacked>li.active>a:hover {
  background: transparent;
  color: #444;
  border-top: 0;
  border-left-color: #3c8dbc;
}
.mail-sidebox .nav>li>a:hover, .mail-sidebox .nav>li>a:active, .mail-sidebox .nav>li>a:focus {
  color: #FFF;
  background: #5c7da8;
}
 
.box-header{
  border-bottom: 1px solid #224473;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-top-left-radius: 0.17rem;
  border-top-right-radius: 0.17rem;
  color: #222b45;
  font-family: Open Sans,sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 1rem 1.5rem;
}
.box-tools {
  float: inherit !important;
  display: flex;
  width: auto;
  margin-top: 0.5rem;
}
.box-tools button {
  border-radius: 0.375rem;
  height: 100%;
  line-height: 1;
  color: #8994a3;
  padding: 0.5rem 1rem;
  margin-left: 0.625rem;
  cursor: pointer;
}
// .box-header>.box-tools .btn {
//   border: 0;
//   box-shadow: none;
// }

.box .nav-stacked>li {
  border-bottom: 1px solid #f4f4f4;
  margin: 0;
}
.nav-stacked>li {
  float: none;
}
.mail-sidebox .nav>li>a {
  position: relative;
  display: block;
  padding: 7px 5px;
}
.mail-sidebox .nav-stacked>li>a {
  border-radius: 0;
  border-top: 0;
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.8) ;
}
.nav>li {
  position: relative;
  display: block;
}
 .mail-sidebox .panel.panel-default,.mail-sidebox.panel-heading,.mail-sidebox .panel-body{
 background:transparent !important;
 }

 .mail-sidebox a.accordion-toggle[aria-expanded="true"] i.fa.fa-plus:before {
    content: "\f068"!important;
}

 .mail-sidebox .panel-default>.panel-heading {
    color: #FFF;
    background-color: transparent !important;;
    border-color: #ddd;
}

.nav-pills>li>a>.fa, .nav-pills>li>a>.glyphicon, .nav-pills>li>a>.ion {
  margin-right: 5px;
}
 
 
.nav-pills>li.active>a {
  font-weight: 600;
}

.tapalmail i.fa {
  color: #398cbf;
}
.bg-light-blue, .label-primary, .modal-primary .modal-body {
  background-color: #3c8dbc !important;
}
.label { 
  vertical-align: baseline;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    text-transform: uppercase!important;
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25em;
    background-color: #9ca5c4 ;
    border: 1px solid #818caf;
}
.treeview-menu>li>a>.fa, .treeview-menu>li>a>.glyphicon, .treeview-menu>li>a>.ion{
  width: 20px;
}
[class*='sidebar-light-'] .nav-treeview > .nav-item > .nav-link>.fa{ width: 20px;
  font-size: 12px;
  color: #17a2b8!important;
  padding: 0 !important;
}
  .treeview-menu>li>a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 14px;
}

.sidebar-menu li>a {
    position: relative;
}
.box.box-solid {
  border-top: 0;
} 
.min70 {
  min-height: 69vh;
}
.no-padding {
  padding: 0 !important;
}
.dataTables_wrapper {
  position: relative;
  clear: both;
  *zoom: 1;
  zoom: 1;
}

.dataTables_wrapper .dataTables_length {
  float: left;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}
.dataTables_wrapper .dataTables_length {
  float: left;
}
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}
label {
  font-weight: 600;
}
 
.btn-xs {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 85%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.15rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  
}
.margin-r-5 {
  margin-right: 5px;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
  border-top: 1px solid #f4f4f4;
}
.round {
  line-height: 25px;
  color: #ffffff;
  width: 25px;
  height: 25px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  border-radius: 100%;
  background: #1e88e5;
  float:left;
  font-size: 12.6px;
}
.search_list {
  margin-left: 30px;
}
.mail-forwarded .date_generated {
  color: #198672;
}

.date_generated, .date_created {
  font-size: 12px;
  color: #808caf;
  font-weight: 400;
}
a:hover, a:active, a:focus {
  outline: none;
  text-decoration: none;
  color: #72afd2;
}
/* mail search page */

.content-wrapper.mailsearch {
   
  background-color: #20334d; 
}
.mailbox-attachment i.fa.fa-paperclip {
  color: #5c7da8;
  font-weight: 400;
  font-size: 1.2em;
}
.pad_0{
 
padding: 2px;

}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
}
.box-footer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top: 1px solid #f4f4f4;
  padding: 10px;
  background-color: #fff;
}
.cd-panel__container .box-footer.box-comments {
  max-height: 120px;
  overflow-y: scroll;
}

.box-comments {
  background: #f7f7f7;
} 
// .dropdown-menu {
//   position: absolute;
//   top: 100%;
//   left: 0;
//   z-index: 1000;
//   display: none;
//   float: left;
//   min-width: 160px;
//   padding: 5px 0;
//   margin: 2px 0 0;
//   font-size: 14px;
//   text-align: left;
//   list-style: none;
//   background-color: #fff;
//   -webkit-background-clip: padding-box;
//   background-clip: padding-box;
//   border: 1px solid #ccc;
//   border: 1px solid rgba(0,0,0,.15);
//   border-radius: 4px;
//   -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
//   box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
// }
// .dropdown-menu {
//   box-shadow: none;
//   border-color: #eee;
// }
.tapalmail {
    background: #1f334e;
    margin-top: -14px;
    margin-right: -12.5px;
    margin-left: -12.5px;
    font-size: .9em;
    min-height: calc(100vh - 66px);
    }

    
.mail-sidebox .box{
background: transparent;
 
}
.mail-sidebox .nav-stacked>li>a {
  border-radius: 0;
  border-top: 0;
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.8);
}
.mail-sidebox .box .nav-stacked>li {
  border-bottom: 1px solid transparent;
  margin: 0;
}
.mail-sidebox .box-header.with-border {
  border-bottom: 1px solid #224473;
}
.mail-sidebox h3.box-title {
  color: white;
font-size:15px;
}
.mail-sidebox .nav>li>a {
  position: relative;
  display: block;
  padding: 7px 5px;
}

.mail-search .user-block .username, .mail-search .user-block .description, .mail-search .user-block .comment {
  margin-left: 0px;
}
.mail-sidebox .nav>li>a:hover,  .mail-sidebox .nav>li>a:active,  .mail-sidebox .nav>li>a:focus {
  color: #FFF;
  background: #5c7da8;
}
.mailbox-date a {

 color:#30b099;
  
}
a.search-item {
  color: #a13764;
}
a.mail-creater {
  color: #7c9098;
clear: both;
}
.fa-star.text-yellow {
  color: #d2a34e !important;
}
.tapalmail i.fa {
  color: #398cbf;
}
 
.label-tags{
  background-color: #9ca5c4 !important;
  border: 1px solid #818caf;
}	
.date_generated,.date_created{font-size: 12px;
  color: #808caf;
  font-weight: 400;}
.mail-forwarded .date_generated {
  color: #198672;
}

.round {
  line-height:25px;
  color: #ffffff;
  width: 25px;
  height: 25px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  border-radius: 100%;
  background: #1e88e5;
  float:left;
  font-size: 12.6px;
}
 
.search_list{ margin-left:30px}	

.search-item{font-size: 13px;
  font-weight: 600;}
.search-item, .search-description
{display:block} 
.mail-forwarded, .mail-creater {
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.btn-group-sm>.btn, .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
 
.mailbox-read-info {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}
.min70{min-height: 69vh;}
.mb-0{margin-bottom:0px !important;}
/* -------------------------------- 

Slide In Panel - by CodyHouse.co

-------------------------------- */
.cd-main-content {
  text-align: center;
}

.cd-main-content h1 {
  font-size: 2rem;
  color: #64788c;
  padding: 4em 0;
}

.cd-btn {
  position: relative;
  display: inline-block;
  padding: 1em 2em;
  background-color: #89ba2c;
  color: #ffffff;
  border-radius: 50em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

.cd-btn:hover {
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 1170px) {
  .cd-main-content h1 {
    font-size: 3.2rem;
  }
}

.cd-panel {
  position: fixed;
    top: 50px;
    left: 0;
    height: 93%;
    width: 100%;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
}

.cd-panel::after {
  /* overlay layer */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}

.cd-panel.cd-panel--is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}

.cd-panel__header {
  position: fixed;
  width: 90%;
  /* height: 50px; */
  /* line-height: 50px; */
  background: rgba(255, 255, 255, 0.96);
  z-index: 2;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  -webkit-transition: -webkit-transform 0.3s 0s;
  transition: -webkit-transform 0.3s 0s;
  transition: transform 0.3s 0s;
  transition: transform 0.3s 0s, -webkit-transform 0.3s 0s;
  -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
          transform: translateY(-50px);
}

.cd-panel__header h3 {
  color: #89ba2c; 
  padding-left: 1rem;
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}

@media only screen and (min-width: 768px) {
  .cd-panel__header {
    width: 70%;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-panel__header {
    width: 50%;
  }
  .cd-panel__container .mailbox-attachments li {
width: 31%;}
}

.cd-panel__close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.cd-panel__close::before, .cd-panel__close::after {
  /* close icon created in CSS */
  content: '';
  position: absolute;
  top: 22px;
  left: 20px;
  height: 3px;
  width: 20px;
  background-color: #424f5c;
  /* this fixes a bug where pseudo elements are slighty off position */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.cd-panel__close::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cd-panel__close::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cd-panel__close:hover {
  background-color: #424f5c;
}

.cd-panel__close:hover::before, .cd-panel__close:hover::after {
  background-color: #ffffff;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.cd-panel__close:hover::before {
  -webkit-transform: rotate(220deg);
      -ms-transform: rotate(220deg);
          transform: rotate(220deg);
}

.cd-panel__close:hover::after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

.cd-panel--is-visible .cd-panel__close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
          animation: cd-close-1 0.6s 0.3s;
}

.cd-panel--is-visible .cd-panel__close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
          animation: cd-close-2 0.6s 0.3s;
}

@-webkit-keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}

@keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}

@-webkit-keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}

@keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}

.cd-panel__container {
  position: fixed;
  font-size:13px;
  width: 90%;
  height: 100%;
  top: 0;
  background: #dbe2e9;
  z-index: 1;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}
.cd-panel__container .mailbox-read-time {
   font-size: 12px;
    color: #808caf;
    font-weight: 400;
}
.cd-panel__container .box-footer.box-comments {
    max-height: 120px;
    overflow-y: scroll;
    background: #f7f7f7;
}
.cd-panel--from-right .cd-panel__container {
  right: 0;
  top: 40px;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
    top: 40px;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.tapal_details .description-header {
    font-size: 13px !important;
} 

td.dt-body-center.sorting_1 {
       min-width: 3em;
    width: 2% !important;
}

td.sorting_2 {
    min-width: 3em;
    width: 5% !important;
}

@media only screen and (min-width: 768px) {
  .cd-panel__container {
    width: 70%;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-panel__container {
    width: 50%;
  }
}

.cd-panel__content {
 position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 83%;
    padding:1%;
    overflow: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
.cd-panel__content .mailbox-attachment-info {
    padding: 0px 2px 5px;
    background: #f4f4f4;
}
.cd-panel__content .mailbox-controls.with-border {
    max-height: 120px;
    overflow-y: scroll;
}
.cd-panel__content p {
  font-size: 1.4rem;
  color: #424f5c;
  line-height: 1.4;
  margin: 2em 0;
}

.cd-panel__content p:first-of-type {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .cd-panel__content p {
    font-size: 1.6rem;
    line-height: 1.6;
  }
}

@media only screen and (max-width: 600px) {
   
.sm-hide{ display:none;}
.panel.tapalpanel {
    margin: 0 -15px;
}
.panel-body {
    padding: 10px 5px;
}

.nav-tabs-custom>.tab-content {
padding: 5px;}
/* for maile search button */
.mail_btns .btn {
    min-width: 60px;
    margin: 3px 0px;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 4px;}

.cd-panel {
top: 100px;}
.cd-panel__container,.cd-panel__header {	
width: 98%;}
.cd-panel__content {
top: 110px;
    height: 77%;
}

}
.sidewhite{
    margin-right: -13px !important;}
    .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
      height: 30px !important;
      padding: 5px 10px;
      font-size: 14px;
      line-height: 1.5;
      border-radius: 3px;
  }
//   .form-control {
//     line-height: 1.5;
//     font-size: 14px;
//     color: #495057;
//     background-clip: padding-box;
//     border: 1px solid #dee1e8;
//     border-radius: 0.25rem;
//     min-height: 30px;
// }
.form-control {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin-bottom: 0;
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
  height: 30px !important;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn {font-size: 14px;}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
}
.input-group-btn {
  margin-right: -1px;
  display: -ms-flexbox;
  display: flex;
  width: auto;
} 
// .dropdown-menu {
//   box-shadow: none;
//   border-color: #eee;
// }
// .open>.dropdown-menu {
//   display: block;
// }
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}
.form-group {
  margin-bottom: 5px;
}
.panel-body {
  padding: 15px;
}
.box-footer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top: 1px solid #f4f4f4;
  padding: 10px;
  background-color: #fff;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.bginbox {
	background: #1f334e !important;
}
.btn-default {
 background-color: #ECEFF1;
    color: #455A64;
    border-color: #CFD8DC;
}
.link-black {
    color: #197dcb;
}
  .sidebar-menu>li>a>.fa, .sidebar-menu>li>a>.glyphicon, .sidebar-menu>li>a>.ion {
    width: 20px;
    font-size: 18px;
    vertical-align: middle;
    color: #60606d;
	 color:#5c7ea8
}
.dashboard.content-wrapper:before {
    content: '';
    display: block;
    height: 200px;
    width: 100%;
    position: absolute;
  background-color: #df9875;
  background: url(../img/bg.jpg) no-repeat right top fixed;
  background-size: 700px 250px;
   background-color: #605ca8;
    z-index: 0;
}
.dashboard.content-wrapper h1{ color:#FFF}
.dashboard.content-wrapper h1 small {
    color: #e2b128;
}
.dashboard .breadcrumb>li>a,.dashboard .breadcrumb>.active {
    color: rgba(255, 255, 255, 0.8);
}
.direct-chat-messages,.direct-chat-contacts {    min-height: 75vh;}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.nav-tabs-custom>.nav-tabs>li>a {
    /* color: #5c7da8; */
	color: #009688;
    font-weight: 600;
}
.nav-tabs-custom {
    border-bottom: 1px solid #eaeff2;
    background-color: #f8f9fa;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.activities .product-info{margin-left: 35px;}
.activities .product-description {
 
    color: #999;
    font-size: .85em;
}
.control-sidebar-bg, .control-sidebar {
    top: 0px;
    right: -300px;
width: 300px;
}
.box-comments .box-comment:first-of-type {
  padding-top: 0;
}

.box-comments .box-comment:last-of-type {
  border-bottom: 0;
}
.box-comments .box-comment {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.box-comments .box-comment:before, .box-comments .box-comment:after {
  content: " ";
  display: table;
}
.img-sm, .box-comments .box-comment img, .user-block.user-block-sm img {
  width: 30px !important;
  height: 30px !important;
}
.img-sm, .img-md, .img-lg, .box-comments .box-comment img, .user-block.user-block-sm img {
  float: left;
}
.box-comments .comment-text {
  margin-left: 40px;
  color: #555;
}
.mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size {
  display: block;
}
.mailbox-attachment-size {
  color: #999;
  font-size: 12px;
}

.mailbox-attachment-info {
  padding: 10px;
  background: #f4f4f4;
}
.cd-panel__content .mailbox-attachment-info {
  padding: 0px 2px 5px;
  background: #f4f4f4;
}
.img-sm, .box-comments .box-comment img, .user-block.user-block-sm img {
  width: 30px !important;
  height: 30px !important;
}
.img-sm, .img-md, .img-lg, .box-comments .box-comment img, .user-block.user-block-sm img {
  float: left;
}

.box-comments .box-comment img {
  float: left;
}
.img-circle {
  border-radius: 50%;
}
img {
  vertical-align: middle;
}
img {
  border: 0;
}
.box-comments .box-comment {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.box-comments .box-comment:last-of-type {
  border-bottom: 0;
}

.box-comments .box-comment:first-of-type {
  padding-top: 0;
}
.box-comments .box-comment:before, .box-comments .box-comment:after {
  content: " ";
  display: table;
}
.box-comments .comment-text {
  margin-left: 40px;
  color: #555;
}
.box-comments .username {
  color: #444;
  display: block;
  font-weight: 600;
}
.box-comments .box-comment:after {
  clear: both;
}
.box-comments .box-comment:before, .box-comments .box-comment:after {
  content: " ";
  display: table;
}
img.img-circle.img-sm {
  border-radius: 50%;
  height: 3.25rem;
  width: 3.25rem;
  position: relative;
  flex-shrink: 0;
  background-color: #dbe2e9;
  border: 1px solid #edf1f7;
  overflow: hidden;
} 
.mailbox-controls {
  padding: 5px;
}
.mailbox-controls.with-border {
  border-bottom: 1px solid #f4f4f4;
}
.cd-panel__content .mailbox-controls.with-border {
  max-height: 120px;
  overflow-y: scroll;
}
.form-control:not(select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}