@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
[data-theme="default"] {
  --bg-: #ffffff;
  --bgsec-: #f6f9fa;
  --bgdark-: #455a64;
  --bglight-: #fefefe;
  --bgcard-: #fff;
  --textcard-:#455a64;
  --textbglight-:#67757c;
  --textbgdark-:#fff;
  --textbgsec-:#455a64;
  --linelight-: rgba(240,240,240,0.7);
  --linedark-: #eee;
  --text-: #67757c;
  --textsub-: #bcc3d3;
  --link-: #20aee3;
  --wh-: #ffffff;
  --pr- : #6772e5;
  --da-: #ff5c6c;
  --wa-: #ff9041;
  --su-: #24d2b5;
  --in-: #20aee3;
  --inv-: #2f3d4a;
  --textin-:#fff;
  --textwa-:#fff;
  --textinv-:#fff;
 }

* {
  outline: none; }
body {
  background: var(--bg-);
  font-family: "Montserrat", sans-serif;
  margin: 0;
  overflow-x: hidden;
  color: var(--text-);
  font-size: 14px;
   }
span.color{
  display: inline-block;
  height: 30px;
  width: 30px;
  margin: 0;
  padding: 0;
}

html {
  position: relative;
  min-height: 100%;
  background: var(--bg-);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.jumbotron{
  background: var(--bglight-);
  color: var(--textbglight-);  
}
a {
  color: var(--link-); 
}
a.disabled {
    pointer-events: none;
    color: var(--bgdark-); 
}
a:hover,
a:focus {
  text-decoration: none; }

a.link {
  color: var(--link-); }
  a.link:hover, a.link:focus {
    opacity: 0.8;
  }

.img-responsive {
  width: 100%;
  height: auto;
  display: inline-block; }

.img-rounded {
  border-radius: 4px; }

html body .mdi:before,
html body .mdi-set {
  line-height: initial; }

/*******************
Headings
*******************/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
 }

h2 {
  line-height: 36px;
  font-size: 24px; }

h3 {
  line-height: 30px;
  font-size: 21px; }

h4 {
  line-height: 22px;
  font-size: 18px; }

h5 {
  line-height: 18px;
  font-size: 16px; }

h6 {
  line-height: 16px;
  font-size: 14px; }

.box {
  border-radius: 4px;
  padding: 10px; }

html body .dl {
  display: inline-block; }

html body .db {
  display: block; }

.no-wrap td,
.no-wrap th {
  white-space: nowrap; }

.hide {
  display: none; }

.img-circle {
  border-radius: 100%; }

.radius {
  border-radius: 4px; }

/*******************
Text Colors
*******************/
.text-white {
  color: var(--wh-) !important; }

.text-danger {
  color: var(--da-) !important; }
.text-warning {
  color: var(--wa-) !important; }

.text-success {
  color: var(--su-) !important; }

.text-info {
  color: var(--in-) !important; }

.text-inverse {
  color: var(--inv-) !important; }

html body .text-primary {
  color: var(--pr-) !important; }

/*******************
Background Colors
*******************/
.bg-primary {
  background-color: var(--pr-) !important; }

.bg-success {
  background-color: var(--su-) !important; }

.bg-info {
  background-color: var(--in-) !important; }

.bg-warning {
  background-color: var(--wa-) !important; }

.bg-danger {
  background-color: var(--da-) !important; }

html body .bg-megna {
  background-color: #56c0d8; }

html body .bg-theme {
  background-color: var(--in-); }

html body .bg-inverse {
  background-color: var(--inv-); }

html body .bg-light {
  background-color: #e9edf2; }

html body .bg-white {
  background-color: #ffffff; }

.top_left{
  display: block;
  width: 100%;
  text-align: center;
  padding: 25px 0;
  background: var(--bgdark-);
  color: var(--textbgdark-) !important; 
}
.border-primary{
  border: 1px solid var(--pr-) !important;
  border-radius: .30rem !important;
}
.border-main{
  border: 1px solid var(--bgdark-) !important;
  border-radius: .30rem !important;
}
.notif-card {
  padding: 0px !important;
  height: 400px !important;
  overflow-y: scroll !important;
}

.inbox-card {
  padding: 0px !important;
  height: 400px !important;
  overflow-y: scroll !important;
  overflow-x: hide !important;
  border-bottom: 1px solid var(--bgdark-);
}

.notif {
  display: block;
  padding: 11px 15px;
  background: var(--bglight-);
  color: var(--textbglight-);
  border-bottom: 1px solid var(--linelight-);
}

.notif:hover {
  background: var(--bgdark-);
  color: var(--textbgdark-);
  border-bottom: 1px solid var(--linedark-);
}

.inbox_card {
  padding: 0px !important;
  height: 500px !important;
  overflow-y: hidden !important;
}

.inbox_people{
  float: left;
  width: 30%;
  display: block;
  overflow-y: scroll;
  height: 500px;
}
.mesgs{
  float: right;
  width: 70%;
  display: block;
  height: 500px;  
}
.msg_history{
  display: block;
  height: 420px;  
  padding: 10px 15px;
  overflow-y: scroll;
}

.type_msg {
  border-top: 1px solid var(--bgdark-);

  height: 80px;
  padding: 10px 8px;
}
.type_msg input{
    background: var(--bgcard-);
  color: var(--textcard-);
}
.chat_ib h5{
  font-size: 20px !important;
  font-weight: 600 !important;
}
.chat_ib p{
  font-size: 16px !important;
  font-style: italic;
}

.chat_people{ overflow:hidden; clear:both;}
.chat_list {
  border-bottom: 1px solid  var(--in-);
  margin: 0;
  padding: 18px 8px 10px;
  background:  var(--bglight-);
  color:var(--textbglight-);
}
.chat_list:hover{
  background:  var(--in-);
  color:var(--textin-);
}

.active_chat,.active_chat:hover{ 
  background:var(--in-);
  color:var(--textin-);
}

.received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  width: 92%;
 }
 .received_withd_msg p {
  background: var(--bgsec-) none repeat scroll 0 0;
  border-radius: 3px;
  color: var(--textbgsec-);
  font-size: 14px;
  margin: 0;
  padding: 5px 10px 5px 12px;
  width: 100%;
}
.time_date {
  color: var(--textcard-);
  display: block;
  font-size: 12px;
  margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}

 .sent_msg p {
  background: var(--in-) none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 14px;
  margin: 0; 
  color:var(--textin-);
  padding: 5px 10px 5px 12px;
  width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
  float: right;
  width: 46%;
}
.write_msg {
  border: none;
  border-bottom: 1px solid var(--linedark-);
  color: var(--text-);
  font-size: 15px;
  min-height: 48px;
  width: 100%;
  display: inline-block;
  width: 75%
}
.msg_send_btn {
  margin-left: 10px;
  display: inline-block;
  width: 20%
}

/*******************
Labels
*******************/
label span{
  font-weight: 800 !important;
}


/*******************
Main sidebar
******************/
.left-sidebar {
  position: absolute;
  width: 260px;
  height: 100%;
  top: 0px;
  z-index: 20;
  background: var(--bglight-);
  color: var(--textbglight-);
  border-right: 1px solid var(--linelight-); }

/*******************
use profile section
******************/
.sidebar-nav .user-profile > a img {
  width: 30px;
  border-radius: 100%;
  margin-right: 10px; }

.sidebar-nav .user-profile > ul {
  padding-left: 40px; }

/*******************
sidebar navigation
******************/
.scroll-sidebar {
  height: 100%; }
  .scroll-sidebar.ps .ps__scrollbar-y-rail {
    left: 2px;
    right: auto;
    background: none;
    width: 6px;
    /* If using `left`, there shouldn't be a `right`. */ }

.collapse.in {
  display: block; }

.sidebar-nav {
  background: var(--bglight-);
  padding: 15px 0 0 0px; }
  .sidebar-nav ul {
    margin: 0px;
    padding: 0px; }
    .sidebar-nav ul li {
      list-style: none; }
      .sidebar-nav ul li a {
        color: var(--textbglight-);
        padding: 10px 35px 10px 15px;
        display: block;
        font-size: 15px;
        font-weight: 400; }
        .sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
          color: var(--in-); }
          .sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {
            color: var(--in-); }
        .sidebar-nav ul li a.active {
          font-weight: 500;
          color: var(--textbglight-); }
      .sidebar-nav ul li ul {
        padding-left: 40px; }
        .sidebar-nav ul li ul li a {
          padding: 7px 35px 7px 15px; }
        .sidebar-nav ul li ul ul {
          padding-left: 15px; }
      .sidebar-nav ul li.nav-devider {
        height: 1px;
        background: var(--linedark-);
        display: block;
        margin: 15px 0; }
  .sidebar-nav > ul > li > a {
    border-left: 3px solid transparent; }
    .sidebar-nav > ul > li > a i {
      width: 38px;
      font-size: 24px;
      display: inline-block;
      vertical-align: middle;
      color: var(--textbglight-); }
    .sidebar-nav > ul > li > a .label {
      float: right;
      margin-top: 2px; }
    .sidebar-nav > ul > li > a.active {
      font-weight: 400;
      color: var(--pr-);
      border-left: 3px solid var(--in-); }
  .sidebar-nav > ul > li {
    margin-bottom: 8px;
    margin-top: 8px; }
    .sidebar-nav > ul > li.active > a {
      color: var(--in-);
      font-weight: 500; }
      .sidebar-nav > ul > li.active > a i {
        color: var(--in-); }
  .sidebar-nav .waves-effect {
    transition: none;
    -webkit-transition: none;
    -o-transition: none; }
/*============================================================== 
 For all pages 
 ============================================================== */
#main-wrapper {
  width: 100%;
  overflow: scroll; 
  min-height: 100vh;
  background: var(--bgsec-);
  color: var(--textbgsec-); 
}
.page-wrapper {
  background: var(--bgsec-);
  color: var(--textbgsec-); 
  padding-bottom: 60px;
  position: relative; }

.container-fluid {
  padding: 25px 25px; }

.card {
  margin-bottom: 30px; 
  background: var(--bgcard-);
  color: var(--textcard-);
}
  .card .card-subtitle {
    font-weight: 300;
    margin-bottom: 15px;
    color: var(--textsub-); }
  .card .card-title {
    position: relative;
    font-weight: 500; }


.page-titles {
  background: var(--bgsec-);
  color: var(--textbgsec-); 
  margin-bottom: 20px;
  padding: 0px; }
  .page-titles h3 {
    margin-bottom: 0px;
    margin-top: 0px; }
  .page-titles .breadcrumb {
    padding: 0px;
    margin-bottom: 0px;
    background: transparent;
    font-size: 12px; }
    .page-titles .breadcrumb li {
      margin-top: 5px;
      margin-bottom: 5px; }
      .page-titles .breadcrumb li a {
        color: var(--textbgsec-); }
    .page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
      content: "\f054";
      font-family: FontAwesome;
      color: var(--textbgsec-);
      font-size: 11px; }
    .page-titles .breadcrumb .breadcrumb-item.active {
      color: var(--textbgsec-);
      font-weight: 500; }

/*******************
Buttons
******************/
.btn-thin {
  padding: 0px !important;
  cursor: pointer; }
.btn {
  padding: 7px 12px;
  cursor: pointer; }
  .btn:hover {
    opacity: 0.8; }
  .btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none; }

.btn-group label {
  margin-bottom: 0px; }

.btn-lg {
  padding: .75rem 1.5rem;
  font-size: 1.25rem; }


.btn-primary {
  background: var(--pr-);
  border: 1px solid var(--pr-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-primary.disabled {
  background: var(--inv-);
  border: 1px solid var(--inv-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover{
  opacity: 0.7;
 }



.btn-success {
  background: var(--su-);
  border: 1px solid var(--su-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-success.disabled {
  background: var(--inv-);
  border: 1px solid var(--inv-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover{
  opacity: 0.7;
 }



.btn-info {
  background: var(--in-);
  border: 1px solid var(--in-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-info.disabled {
  background: var(--inv-);
  border: 1px solid var(--inv-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover{
  opacity: 0.7;
 }


.btn-warning{
  background: var(--wa-);
  color: var(--textwa-);
  /*box-shadow: $warning-shadow;*/
  border: 1px solid var(--wa-);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; }
.btn-warning.disabled {
  background: var(--inv-);
  color: var(--textinv-);
  border: 1px solid var(--inv-);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover{
  opacity: 0.7;
 }

.btn-danger {
  background: var(--da-);
  border: 1px solid var(--da-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-danger.disabled {
  background: var(--inv-);
  border: 1px solid var(--inv-);
  /*box-shadow: $danger-shadow;*/
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; 
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover{
  opacity: 0.7;
 }

form label {
  font-weight: 400; }

.form-group {
  margin-bottom: 25px; }

.form-material .form-group {
  overflow: hidden; }

.form-material .form-control {
  background-color: transparent;
  background-position: center bottom, center calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 1px;
  padding: 0;
  -webkit-transition: background 0s ease-out 0s;
  -o-transition: background 0s ease-out 0s;
  transition: background 0s ease-out 0s; }

.form-material .form-control{
  border: 0 none;
  border-bottom: 1px solid var(--linedark-);
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  float: none; 
}
.form-material .form-control.focus,
.form-material .form-control:focus {
  border: 0 none;
  border-bottom: 1px solid var(--in-);
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  float: none; }

.form-material .form-control.focus,
.form-material .form-control:focus {
  background-size: 100% 2px, 100% 1px;
  outline: 0 none;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s; }


form p {
  margin-bottom: 10px;
  text-align: left; }


@media (min-width: 1024px) {
  .page-wrapper {
    margin-left: 260px; } }
