/*--------------------------------------------

    Template Name: srtdash - Bootstrap 4 Admin and Ui Kit
    Template URI: http://tf.itech-theme.com/srtdash-preview
    Description: This is Bootstrap 4 Admin Template and Ui Kit
    Author: cdibrandstudio
    Author https://themeforest.net/user/cdibrandstudio
    Version: 1.0

----------------------------------------------
    
    CSS INDEX
    ===================
  
    1. Core Css
    2. Dashboard One
        2.1 Sidebar Menu
            2.1.1 Horizontal Menu
        2.2 Header Area
        2.3 Page Title Area
        2.4 Fact Area
        2.5 Overview
        2.6 Letest Post
    3. Dashboard Two
    4. Dashboard Three
    5. Bar Chart
    6. Line Chart
    7. Pie Chart
    8. Accroding
    9. Alert
   10. Badge
   11. Button
   12. Cards
   13. Dropdown Button
   14. List Group
   15. Modal
   16. Pagination
   17. Form
   18. Icons
   19. Table Basic
   20. Datatable
   21. Map
   22. Invoice
   23. Login
   24. Pricing
   25. 404 Page
   26. Notifications Slider
   27. Messages Slider
   28. Customer Add Slider
   29. Setup Slider
   30. Grid Container
   31. New Customer
   32. Flow
   33. Invoice (Customer View) 


-----------------------------------------------------------------------------------*/


/*--------------------  1. Core Css -------------------*/

.page-container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-left: 320px;
  -webkit-transition: padding-left 0.3s ease 0s;
  transition: padding-left 0.3s ease 0s;
}

.sbar_collapsed.page-container {
  padding-left: 0;
}

.card {
  border: none;
  border-radius: 4px;
  background-color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
}


.card-body {
  padding: 25.6px;
  padding: 1.6rem;
}

.h-full {
  height: 100%;
}

.main-content {
  width: 100%;
  background: #F8f9fa;
}

.main-content-inner {
  padding: 0 30px 50px;
}

#goBack {
  cursor: pointer;
  float: right;
}

#add-center {
  margin: 0 auto;
}

.modal-title {
  text-align: center;
}

#select {
  height: 45px;
}

.text-tcs {
  font-size: 11px;
}

@media(max-width: 576px) {

  #hide-content {
      display: none;
  }

}



/*-------------------- END Core Css -------------------*/


/*-------------------- 2.1 Sidebar Menu -------------------*/

@media(max-width: 768px) {
  .sidebar-menu {
      width: 100%;
  }

}

.sidebar-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100vh;
  width: 320px;
  overflow: hidden;
  /* background-image: linear-gradient(to bottom, #2a3439, #2a3439, #595f64, #8b8e92, #bfc0c2); */
  background: #292b2c;
  box-shadow: 0 0 10px #000000;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.sbar_collapsed .sidebar-menu {
  left: -320px;
}

.main-menu {
  height: 100%;
  overflow: hidden;
  padding: 20px 10px 0 0;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.menu-inner {
  overflow-y: auto;
  height: 100vh;
}

.slimScrollBar {
  background: #fff!important;
  opacity: 0.1!important;
}

.sidebar-header {
  padding: 19px 32px 20px;
  background: #292b2c;
  color: #B0B0B0;
  text-align: center;

  /* border-bottom: 1px solid #343e50; */
}
.sidebar-menu .logo{
  text-align: center;
}
.logo a {
  display: inline-block;
  max-width: 120px;
}

.metismenu >li >a {
  padding-left: 32px!important;
}
.metismenu li a {
  position: relative;
  display: block;
  color: #B0B0B0;
  font-size: 15px;
  text-transform: capitalize;
  padding: 15px 15px;
  letter-spacing: 0;
  font-weight: 400;
  height: 100%;
}

.metismenu li a i {
  color: #B0B0B0;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.metismenu li a:after {
  position: absolute;
  content: '\f107';
  font-family: fontawesome;
  right: 15px;
  top: 12px;
  color: #B0B0B0;
  font-size: 20px;
}

.metismenu li.active>a:after {
  content: '\f106';
}

.metismenu li a:only-child:after {
  content: '';
}

.metismenu li a span {
  margin-left: 10px;
}

.metismenu li.active>a,
.metismenu li:hover>a {
  color: #fff;
}

.metismenu li li a {
  padding: 8px 20px;
}

.metismenu li ul {
  padding-left: 37px;
}

.metismenu >li:hover>a,
.metismenu >li.active>a {
  color: #fff;
  background: #343942;
}

.metismenu li:hover>a,
.metismenu li.active>a {
  color: #fff;
}

.metismenu li:hover>a i,
.metismenu li.active>a i {
  color: #fff;
}

.metismenu li li a:after {
  top: 6px;
}

#tool-tray {
display: inline-block;
margin: 0 auto;
height: 40px;
}

@media(max-width: 576px) {

  .sidebar-menu {

  }

  #tool-tray {
      height: 100%;
      margin-top: -35px;
  }

}



/*-------------------- END Sidebar Menu -------------------*/


/*-------------------- 2.1.1 Horizontal Menu -------------------*/

.body-bg {
  background: #F3F8FB;
}

.horizontal-main-wrapper {
  min-height: 100vh;
}

.horizontal-main-wrapper .container {
  max-width: 1440px;
}

.horizontal-main-wrapper .header-area,
.horizontal-main-wrapper .mainheader-area {
  padding-left: 0;
  padding-right: 0;
}

.horizontal-main-wrapper .main-content-inner {
  padding: 0 0 50px;
}

.mainheader-area .notification-area {
  -webkit-transform: translateY(-11px);
          transform: translateY(-11px);
}

.mainheader-area {
  background: #fff;
  border-bottom: 1px solid #f3f8fb;
  padding-left: 15px;
  position: fixed;
  z-index: 99;
}

.mainheader-area .logo a span {
  color: #843df9;
}

.horizontal-menu {
  position: fixed;
}

.horizontal-menu ul li {
  display: inline-block;
  position: relative;
}

.horizontal-menu ul li a {
  display: block;
  font-size: 13px;
  padding: 10px 20px;
  color: #000000;
  text-transform: capitalize;
}

.horizontal-menu ul li:hover>a,
.horizontal-menu ul li.active>a {
  color: #007BFF;
}

.horizontal-menu nav>ul>li:first-child>a {
  padding-left: 0;
}

.horizontal-menu ul li a i {
  margin-right: 5px;
}

.horizontal-menu .submenu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 99;
  width: 200px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  border-top: 4px solid #007BFF;
  border-radius: 3px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
}

.horizontal-menu .submenu li {
  display: block;
}

.horizontal-menu ul li:hover>.submenu {
  opacity: 1;
  visibility: visible;
}

.horizontal-menu .mega-menu {
  position: inherit;
}

.horizontal-menu .mega-menu .submenu {
  width: 100%;
  max-width: 900px;
}

.horizontal-menu .mega-menu .submenu li {
  display: inline-block;
  width: calc(100% * (1/3) - 5px);
}

.header-bottom .search-box input {
  max-width: 350px;
  width: 100%;
}

/* mobile menu */

.slicknav_menu {
  background: #8255f7;
  padding: 0;
  margin-top: 20px;
}

.slicknav_menu>a {
  display: block;
  width: 100%;
  padding: 15px;
  margin: 0;
  background: transparent;
}

.slicknav_menu .slicknav_icon {
  float: right;
}

.slicknav_menu .slicknav_icon-bar {
  box-shadow: none;
}

.slicknav_menu .slicknav_menutxt {
  font-weight: 500;
  text-shadow: none;
}

.slicknav_nav .slicknav_row,
.slicknav_nav a {
  text-transform: capitalize;
}

.slicknav_nav .slicknav_row:hover {
  border-radius: 0;
  background: #8e66f7;
}

.slicknav_nav li i {
  width: 26px;
  display: inline-block;
}

.slicknav_nav .slicknav_item .slicknav_arrow {
  float: right;
}

#h-heading {
  padding: 5px 0px 5px 0px;
  color: #B0B0B0;
}

#hide-nav {
  margin-bottom: 20px
}

@media screen and (min-width: 800px) {
  #hide-nav {
      display: none;
  }
}

#button-float-right {
  float: right; 
  margin-left: 10px;
}

#button-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body button {
  width: 175px;
}

/*-------------------- END Horizontal Menu -------------------*/


/*-------------------- 2.2 Header Area -------------------*/

.header-area {
  padding: 15px 30px;
  background: #fff;
  border-bottom: 1px solid #d8e3e7;
}

.nav-btn {
  margin-right: 30px;
  margin-top: 10px;
  cursor: pointer;
}

.nav-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #b3aaaa;
  margin: 4px 0;
  border-radius: 15px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  box-shadow: 0 0 0 4px rgba(99, 96, 96, 0.03);
}

.sbar_collapsed .nav-btn span:nth-child(2) {
  opacity: 0;
}

.sbar_collapsed .nav-btn span:first-child {
  -webkit-transform: rotate(45deg)translate(5px, 5px);
          transform: rotate(45deg)translate(5px, 5px);
}

.sbar_collapsed .nav-btn span:last-child {
  -webkit-transform: rotate(-45deg)translate(3px, -3px);
          transform: rotate(-45deg)translate(3px, -3px);
}

.search-box form {
  position: relative;
}

.search-box input {
  width: 350px;
  border-radius: 33px;
  border: none;
  height: 40px;
  padding-left: 20px;
  padding-right: 40px;
  letter-spacing: 0;
  background: #f3eeff;
}

.search-box input::-webkit-input-placeholder {
  color: #b1a7a7;
}

.search-box input::-moz-placeholder {
  color: #b1a7a7;
}

.search-box input:-ms-input-placeholder {
  color: #b1a7a7;
}

.search-box form i {
  position: absolute;
  right: 21px;
  top: 14px;
  font-size: 14px;
  color: #b1a7a7;
}


/* notification-area */

.notification-area {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  z-index: 1;
}

.notification-area li {
  display: inline-block;
  margin-left: 12px;
  margin-right: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.notification-area li.settings-btn.active i {
  color: #007BFF;
}

.notification-area li.message-btn.active i {
  color: #007BFF;
}

.notification-area li>i {
  font-size: 26px;
  color: #bdbcbc;
  vertical-align: middle;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
  -webkit-transition: color 0.3s ease 0s;
  transition: color 0.3s ease 0s;
}

.notification-area li:hover>i,
.dropdown.show>i {
  color: #fff;
  background: #343942;

}

.notification-area li i>span {
  position: absolute;
  right: -5px;
  top: -7px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  padding-left: 2px;
}

.notify-box {
  width: 350px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.notify-title {
  background: var(--primary-color);
  display: block;
  padding: 18px 30px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0;
  overflow: hidden;
}

.notify-title a {
  float: right;
  display: inline-block;
  color: #ffee1d;
  font-size: 13px;
  text-decoration: underline;
}

.nofity-list {
  padding: 30px 0;
}

.nofity-list a {
  padding: 0 30px;
  display: block;
  margin-bottom: 20px;
  border-bottom: 1px solid #f5f2f2;
  padding-bottom: 15px;
}

.nofity-list a:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.notify-thumb {
  float: left;
  margin-right: 20px;
}

.notify-thumb i {
  height: 50px;
  width: 50px;
  line-height: 50px;
  display: block;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 23px;
}

.notify-text {
  overflow: hidden;
}

.notify-text p {
  font-size: 14px;
  color: #4e4e4e;
  line-height: 22px;
  margin-bottom: 4px;
}

.notify-text span {
  letter-spacing: 0;
  color: #272626;
  font-size: 11px;
  font-weight: 300;
}

/* notify envelope */

.expanded .notification-area li#full-view-exit {
  display: inline-block;
}

.notification-area li#full-view-exit {
  display: none;
}

.expanded .notification-area li#full-view {
  display: none;
}

.notification-area li#full-view {
  display: inline-block;
}

.nt-enveloper-box .notify-text p {
  margin-bottom: 0;
}

.notify-text span.msg {
  display: block;
  font-size: 12px;
  color: #4e4e4e;
  line-height: 22px;
  margin-bottom: 4px;
  font-weight: 400;
}

.notify-thumb img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 4px;
}

/*-------------------- END Header Area -------------------*/

/*-------------------- 2.3 Page Title Area -------------------*/

.page-title-area {
  padding: 0 30px;
  background: #fff;
  position: relative;
}

.page-title-area:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 36px;
  background: var(--primary-color);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.page-title {
  font-size: 24px;
  font-weight: 300;
  color: #313b3d;
  letter-spacing: 0;
  margin-right: 30px;
}

ul.breadcrumbs {
  margin-top: 4px;
}

.breadcrumbs li {
  display: inline-block;
}

.breadcrumbs li a,
.breadcrumbs li span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #7801ff;
  letter-spacing: 0;
  margin-right: 16px;
  position: relative;
}

.breadcrumbs li a:before {
  content: '/';
  color: #768387;
  position: absolute;
  right: -13px;
  top: 0;
}

.breadcrumbs li span {
  margin-right: 0;
  color: #768387;
  text-transform: capitalize;
}

.user-profile img.avatar {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-name {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.user-name i {
  margin-left: 10px;
  font-size: 21px;
  vertical-align: middle;
  position: relative;
}

.notification-area .dropdown-toggle,
.user-name.dropdown-toggle {
  position: relative;
}

.notification-area .dropdown-toggle:after,
.user-name.dropdown-toggle:after {
  display: none;
}

.notification-area .dropdown-menu,
.user-profile .dropdown-menu {
  background: #fff;
  border: none;
  -webkit-transform: none!important;
          transform: none!important;
  top: 130%!important;
  right: 30px!important;
  left: auto!important;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: block!important;
  visibility: hidden;
  opacity: 0;
}

.notification-area .dropdown-menu.show,
.user-profile .dropdown-menu.show {
  top: 100%!important;
}

.notification-area .dropdown-menu.show,
.user-profile .dropdown-menu.show {
  top: 100%!important;
  visibility: visible;
  opacity: 1;
  box-shadow: 0 0 45px 0 rgba(131, 23, 254, 0.06);
}

.user-profile .dropdown-menu a {
  font-size: 14px;
  color: #8a8a8a;
  letter-spacing: 0;
  font-weight: 500;
  padding: 4px 120px;
  padding-left: 25px;
}

.user-profile .dropdown-menu a:hover {
  background: #f8f9fa;
  color: #2942fa;
}

/*-------------------- END Page Title Area -------------------*/


/*-------------------- 2.4 Fact Area ------------------- */

.single-report {
  background: #fff;
  overflow: hidden;
  position: relative;
}

.s-report-inner {
  padding-left: 85px;
}

.single-report .icon {
  font-size: 32px;
  color: #fff;
  background: var(--primary-color);
  height: 95px;
  width: 100px;
  text-align: right;
  padding-top: 40px;
  padding-right: 22px;
  border-radius: 50%;
  position: absolute;
  left: -39px;
  top: -30px;
}

.s-report-title {
  margin-bottom: 25px;
}

.header-title {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: #333;
  text-transform: capitalize;
  margin-bottom: 17px;
}

.single-report p {
  font-size: 12px;
  font-weight: 700;
  color: #565656;
  background: #ececec;
  letter-spacing: 0;
  padding: 0 9px;
  height: 20px;
  line-height: 20px;
}

.single-report h2 {
  font-size: 26px;
  color: #565656;
  font-weight: 500;
  letter-spacing: 0;
}

.single-report span {
  font-size: 15px;
  font-weight: 600;
  color: #565656;
  letter-spacing: 0;
}

.highcharts-exporting-group {
  display: none;
}

/*-------------------- END Fact Area ------------------- */


/*-------------------- 2.5 Overview ------------------- */

.custome-select {
  font-size: 13px;
  color: #565656;
  font-weight: 500;
  letter-spacing: 0;
}

.border-0 {
  border: none;
}

#verview-shart {
  height: 400px;
}

#verview-shart-license-text,
#coin_distribution-license-text {
  display: none;
}

#coin_distribution-wrapper {
  height: 400px!important;
  margin-top: -30px;
}

#coin_distribution-menu {
  display: none;
}


/*-------------------- END Overview ------------------- */

/*-------------------- 2.6 Letest Post ------------------- */

.single-post {
  margin-bottom: 34px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.lts-thumb {
  -ms-flex-preferred-size: calc(40% - 10px);
      flex-basis: calc(40% - 10px);
}

.lts-content {
  -ms-flex-preferred-size: calc(60% - 10px);
      flex-basis: calc(60% - 10px);
}

.lts-content span {
  font-size: 16px;
  font-weight: 600;
  color: #565656;
  letter-spacing: 0;
}

.lts-content h2 a {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #565656;
  letter-spacing: 0;
  margin-bottom: 16px;
}

.lts-content h2 a:hover {
  color: #6d65dc;
}

.lts-content p {
  font-size: 15px;
  font-weight: 400;
  color: #565656;
}

.input-form {
  position: relative;
}

.input-form input {
  height: 80px;
  width: 100%;
  padding-left: 50px;
  border: none;
  box-shadow: 0 0 41px rgba(67, 54, 251, 0.05);
}

.input-form span {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 125px;
  background: var(--primary-color);
  text-align: center;
  line-height: 80px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
  font-size: 19px;
}

.footer-area {
  text-align: center;
  padding: 0px 0 0px;
  background: #F8f9fa;
}

.footer-area p {
  color: #F8f9fa;
  margin-bottom: 0;
}



/*-------------------- END Letest Post ------------------- */


/*-------------------- 3. Dashboard Two ------------------- */

.sales-style-two .single-report {
  background: #fff;
  overflow: hidden;
  position: relative;
  padding: 10px 15px 10px;
}

#visitor_graph {
  height: 400px;
}



/* Todays Order List */

.dbkit-table .heading-td td {
  color: #444;
  font-weight: 500;
}

.pagination_area ul li {
  display: inline-block;
}

.pagination_area ul li a {
  display: block;
  height: 45px;
  line-height: 44px;
  width: 45px;
  border: 2px solid #f1ebeb;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #4d4d4d;
  margin-left: 3px;
}

.pagination_area ul li a:hover {
  background: #8553fa;
  color: #fff;
}

.pagination_area ul li a i {
  font-size: 14px;
}

/* team member area */

.team-search input {
  height: 40px;
  padding-left: 12px;
  border: 1px solid #e1e1e1;
  letter-spacing: 0;
  font-size: 13px;
  border-radius: 2px;
}

.team-search input::-webkit-input-placeholder {
  color: #e1e1e1;
}

.team-search input::-moz-placeholder {
  color: #e1e1e1;
}

.team-search input:-ms-input-placeholder {
  color: #e1e1e1;
}

.member-box .media-body {}

.member-box .media-body p {
  font-size: 18px;
  font-weight: 500;
  color: #4d4d4d;
}

.member-box .media-body span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #4d4d4d;
  letter-spacing: 0;
}

.tm-social a {
  display: inline-block;
  margin-left: 15px;
  font-size: 22px;
  color: #555;
}

.s-member {
  padding: 16px 15px 17px;
  background: #f9f9f9;
  margin: 15px 0;
}

/*-------------------- END Dashboard Two ------------------- */


/*-------------------- 4. Dashboard Three ------------------- */

.seo-fact {
  border-radius: 3px;
}

.sbg1 {
  background: -webkit-linear-gradient(291deg, rgb(77, 77, 253) 0%, rgb(108, 143, 234) 100%);
  background: linear-gradient(159deg, rgb(77, 77, 253) 0%, rgb(108, 143, 234) 100%);
}

.sbg2 {
  background: -webkit-linear-gradient(291deg, rgb(5, 176, 133) 0%, rgb(27, 212, 166) 59%);
  background: linear-gradient(159deg, rgb(5, 176, 133) 0%, rgb(27, 212, 166) 59%);
}

.sbg3 {
  background: -webkit-linear-gradient(298deg, rgb(216, 88, 79) 0%, rgb(243, 140, 140) 100%);
  background: linear-gradient(152deg, rgb(216, 88, 79) 0%, rgb(243, 140, 140) 100%);
}

.sbg4 {
  background: -webkit-linear-gradient(59deg, rgb(254, 208, 63) 0%, rgb(230, 190, 63) 110%);
  background: linear-gradient(31deg, rgb(254, 208, 63) 0%, rgb(230, 190, 63) 110%);
}

.seofct-icon {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.seofct-icon i {
  font-size: 52px;
  margin-right: 20px;
  vertical-align: middle;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  display: inline-block;
}

.seo-fact h2 {
  font-size: 27px;
  color: #fff;
  letter-spacing: 0;
}

.seo-fact #seolinechart3,
.seo-fact #seolinechart4 {
  max-width: 200px;
}

/* socialads */

.highcharts-credits {
  display: none;
}

/* user-statistics */

#user-statistics {
  height: 350px;
}

/* salesanalytic */

#salesanalytic {
  height: 500px;
}

/* timeline */

.timeline-area {
  padding-left: 52px;
  padding-top: 6px;
}

.timeline-task {
  position: relative;
  margin-bottom: 35px;
}

.timeline-task:before {
  content: '';
  position: absolute;
  left: -35px;
  top: 0;
  height: calc(100% + 33px);
  width: 1px;
  background: #e6cdff;
}

.timeline-task:last-child:before {
  height: 100%;
}

.timeline-task:last-child {
  margin-bottom: 0;
}

.timeline-task .icon {
  position: absolute;
  left: -52px;
  top: -6px;
  height: 35px;
  width: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

.bg1 {
  background: #2a3439;
}

.bg2 {
  background: #2a3439;
}

.bg3 {
  background: #2a3439;
}

.tm-title {
  margin-bottom: 6px;
}

.tm-title h4 {
  font-size: 15px;
  letter-spacing: 0;
  color: #333;
  margin-bottom: 2px;
}

.tm-title span.time {
  color: #8c8a8a;
  font-size: 13px;
}

.tm-title span.time i {
  margin-right: 5px;
  color: #2c3cb7;
  font-size: 11px;
}

.timeline-task p {
  color: #666;
  font-size: 14px;
  line-height: 25px;
  margin-bottom: -10px;
}

.timeline-task:last-child p {
  margin-bottom: 0;
}

#seomap {
  height: 300px;
  width: 100%;
}

.map-marker {
  /* adjusting for the marker dimensions
    so that it is centered on coordinates */
  margin-left: -8px;
  margin-top: -8px;
}

.map-marker.map-clickable {
  cursor: pointer;
}

.pulse {
  width: 10px;
  height: 10px;
  border: 5px solid #f7f14c;
  border-radius: 30px;
  background-color: #716f42;
  z-index: 10;
  position: absolute;
}

.map-marker .dot {
  border: 10px solid #fff601;
  background: transparent;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;
  opacity: 0;
}

@-webkit-keyframes "pulse" {
  0% {
      -webkit-transform: scale(0);
      opacity: 0.0;
  }
  25% {
      -webkit-transform: scale(0);
      opacity: 0.1;
  }
  50% {
      -webkit-transform: scale(0.1);
      opacity: 0.3;
  }
  75% {
      -webkit-transform: scale(0.5);
      opacity: 0.5;
  }
  100% {
      -webkit-transform: scale(1);
      opacity: 0.0;
  }
}

.testimonial-carousel {
  margin: 60px 0 28px;
}

.tstu-img {
  width: 70px;
  width: 70px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-right: 20px;
}

.tstu-content {
  overflow: hidden;
}

.tstu-name {
  font-size: 20px;
  color: #fff;
  letter-spacing: 0;
}

.profsn {
  display: block;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 15px;
}

.tst-item p {
  color: #fff;
}

.testimonial-carousel .owl-dots {
  text-align: center;
  margin-top: 60px;
}

.testimonial-carousel .owl-dots>div {
  height: 11px;
  width: 11px;
  background: #fff;
  display: inline-block;
  border-radius: 50%;
  margin: 0 4px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.testimonial-carousel .owl-dots .active {
  background: #f7cb3f;
}

/*-------------------- END Dashboard Three ------------------- */


/*-------------------- 5. Bar Chart ------------------- */

#ambarchart1,
#ambarchart2,
#ambarchart3,
#ambarchart4,
#ambarchart5,
#ambarchart6 {
  height: 400px;
}

.amcharts-chart-div>a {
  display: none!important;
}

/*-------------------- END Bar Chart ------------------- */


/*-------------------- 6. Line Chart ------------------- */

#amlinechart1,
#amlinechart2,
#amlinechart3,
#amlinechart4,
#amlinechart5 {
  height: 400px;
}



/*-------------------- END Line Chart ------------------- */


/*-------------------- 7. Pie Chart ------------------- */

#ampiechart1,
#ampiechart2,
#ampiechart3,
#highpiechart4,
#highpiechart5,
#highpiechart6 {
  height: 400px;
  width: 100%;
}

/*-------------------- END Pie Chart ------------------- */

/*-------------------- 8. Accroding ------------------- */

.according .card {
  margin-bottom: 20px;
}

.according .card:last-child {
  margin-bottom: 0;
}

.according .card-header {
  padding: 0;
  border: none;
}

.according .card-header a {
  display: block;
  background: #EFF3F6;
  padding: 16px 15px;
  border-radius: 3px;
  color: #444;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 500;
}

.according .card-body {
  padding: 10px;
  border: 1px solid #eff3f6;
  font-size: 14px;
  letter-spacing: 0;
  color: #444;
  line-height: 27px;
  font-weight: 400;
}

.according .card-header a {
  position: relative;
}

.accordion-s2 .card-header a.collapsed:before {
  content: "\f107";
}

.accordion-s2 .card-header a:before {
  content: "\f106";
  font-family: fontawesome;
  position: absolute;
  right: 13px;
  color: #444;
  font-size: 26px;
}



/* accordion-3 */

.accordion-s3 .card-header a.collapsed:before {
  content: "\e61a";
}

.accordion-s3 .card-header a:before {
  content: "\e622";
  font-family: 'themify';
  position: absolute;
  right: 13px;
  color: #444;
  font-size: 15px;
}

.gradiant-bg .card-header a {
  background-image: -webkit-linear-gradient(top left, #8914fe, #8160f6);
  background-image: linear-gradient(to bottom right, #8914fe, #8160f6);
  color: #fff;
}

.gradiant-bg .card-header a:before {
  color: #fff;
}

/*-------------------- END Accroding ------------------- */


/*-------------------- 9. Alert------------------- */

.alert {
  letter-spacing: 0;
  font-size: 13px;
  border: none;
  padding: 10px 16px;
}

.alert strong,
.alert-link {
  font-weight: 600;
}

.alert-items .alert-primary {
  color: #4796ea;
  background-color: #c8e1fb;
}

.alert-items .alert-primary .alert-link {
  color: #4796ea;
}

.alert-items .alert-success {
  color: #36b398;
  background-color: #cff1ea;
}

.alert-items .alert-success .alert-link {
  color: #36b398;
}

.alert-items .alert-danger {
  color: #f96776;
  background-color: #ffdde0;
}

.alert-items .alert-danger .alert-link {
  color: #f96776;
}

.alert-items .alert-warning {
  color: #d6a20c;
  background-color: #f9efd2;
}

.alert-items .alert-warning .alert-link {
  color: #d6a20c;
}

/* additional content */

.alert-heading {
  margin-bottom: 7px;
}

.alert-dismiss .alert {
  padding: 13px 15px;
}

.alert-dismiss .alert-dismissible .close {
  top: 4px;
  outline: none;
  font-size: 13px;
}

/*-------------------- END Alert------------------- */


/*-------------------- 10. Badge------------------- */

.btn {
  padding: 11px 17px;
  font-size: 13px;
  letter-spacing: 0;
}

.btn-xl {
  padding: 19px 24px;
}

.btn-lg {
  padding: 15px 22px;
}

.btn-md {
  padding: 12px 19px;
}

.btn-sm {
  padding: 9px 14px;
}

.btn-xs {
  padding: 5px 10px;
}

.nav-pills .nav-link {
  padding: 16px 48px;
  padding: 1rem 3rem;
  line-height: 19px;
}

/*-------------------- END Badge------------------- */


/*-------------------- 11. Button------------------- */

.btn-flat {
  border-radius: 0;
}

.btn-rounded {
  border-radius: 50px;
}

/*-------------------- END Button ------------------- */

/*-------------------- 12. Cards ------------------- */

.title {
  font-size: 18px;
  color: #444;
  margin-bottom: 10px;
}

.card-bordered {
  border: 1px solid rgba(0, 0, 0, .125);
}

p.card-text {
  margin-bottom: 23px;
}

/*-------------------- END Cards ------------------- */


/*-------------------- 13. Dropdown Button ------------------- */

.drop-buttons .btn {
  margin-bottom: 0em;
}

.dropdown-item {
  font-size: 14px;
}

/*-------------------- END Dropdown Button ------------------- */


/*-------------------- 14. List Group ------------------- */

.list-group-item {
  color: #444;
  font-size: 13px;
}

.media-body {
  font-size: 13px;
  line-height: 27px;
}


/*-------------------- END List Group ------------------- */


/*-------------------- 15. Modal ------------------- */

.child-media {
  padding-left: 100px;
}

.modal-dialog.modal-xl {
  max-width: 100%;
}

/*-------------------- END Modal ------------------- */


/*-------------------- 16. Pagination ------------------- */

.pg-color-border li a {
  border-color: #007BFF;
}

.pagination li a {
  font-family: 'lato', sans-serif;
}

/*-------------------- END Pagination ------------------- */


/*-------------------- 17. Form ------------------- */

.form-control,
.form-control:focus {
  outline: none;
  box-shadow: none;
}

.form-rounded {
  border-radius: 40px;
}

.form-control {
  font-size: 14px;
  border: 1px solid rgba(170, 170, 170, .3);
  padding: 10.72px 12.8px;
  padding: .67rem .8rem;
}

.form-control-sm,
.input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text {
  padding: 4px 8px;
  padding: .25rem .5rem;
}

.form-control-lg,
.input-group-lg>.form-control,
.input-group-lg>.input-group-append>.btn,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-prepend>.input-group-text {
  padding: 13.6px 16px;
  padding: .85rem 1rem;
}

label {
  font-weight: 500;
  color: #666;
  display: inline-block;
  margin-bottom: 8px;
  margin-bottom: .5rem;
}

.font-14 {
  font-size: 14px;
}

.input-rounded {
  border-radius: 50px;
}

.custom-file-label,
.custom-file-input,
.custom-file {
  height: calc(2.25rem + 7px);
  padding: 10.8px 12px;
  padding: .675rem .75rem;
}

.custom-file-label:after {
  height: calc(calc(2.25rem + 7px) - 1px * 2);
  padding: 10.8px 12px;
  padding: .675rem .75rem;
}

.grid-col {
  padding: 10px 15px;
  background: #f3f8fb;
  margin-bottom: 30px;
  color: #666;
  border: 1px solid #e3e6e8;
}

.custom-control-label {
  margin-top: 2px;
}

/*-------------------- END Form ------------------- */


/*-------------------- 18. Icons ------------------- */

.fw-icons {}

.fw-icons a {
  color: #444;
  margin: 9px 0;
  display: inline-block;
  font-family: 'lato', sans-serif;
}

.fw-icons a:hover {
  color: #007BFF;
}

.fw-icons a i {
  width: 30px;
  font-size: 14px;
}



/* icon-container */

.icon-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.icon-container {
  cursor: pointer;
  -ms-flex-preferred-size: calc(100% * (1/4));
      flex-basis: calc(100% * (1/4));
}

.icon-container [class^="ti-"] {
  width: 30px;
  font-size: 14px;
  display: inline-block;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.icon-container:hover [class^="ti-"] {
  -webkit-transform: scale(2);
          transform: scale(2);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.icon-container span.icon-name {
  color: #444;
  margin: 9px 0;
  display: inline-block;
  font-family: 'lato', sans-serif;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.icon-container:hover span.icon-name {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.icon-container:hover span {
  color: #007BFF;
}

/*-------------------- END Icons ------------------- */


/*-------------------- 19. Table Basic ------------------- */

.single-table .table {
  margin-bottom: 0;
}

table tr th {
  border-bottom: none;
}

table tr th,
table tr td {
  border-top: 1px solid rgba(120, 130, 140, 0.13) !important;
}

table tr td [class^="ti-"] {
  cursor: pointer;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid rgba(120, 130, 140, 0.13) !important;
}

.status-p {
  color: #fff;
  padding: 0px 20px 1px;
  border-radius: 20px;
  display: inline-block;
  text-transform: capitalize;
  vertical-align: middle;
}

/*-------------------- END Table Basic ------------------- */


/*-------------------- 20. Datatable ------------------- */

div.dataTables_wrapper div.dataTables_length select {
  width: 76px;
  margin: 0 10px;
}

/* datatable-primary */

.datatable-primary thead {
  background: #4336fb;
  color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border: none;
  background: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0;
  border: none;
  margin-top: 20px;
}

table.dataTable.no-footer {
  border-bottom: 1px solid rgba(120, 130, 140, 0.13) !important;
}

table.dataTable thead th,
table.dataTable thead td {
  border-bottom-color: transparent;
}

.datatable-primary .dataTables_paginate .page-item.active .page-link,
.datatable-primary .dataTables_paginate .page-item .page-link:hover {
  background-color: #4336fb;
  border-color: #4336fb;
  color: #fff;
}

.datatable-primary .dataTables_paginate .page-link {
  color: #4336fb;
  border: 1px solid #4336fb;
}

.datatable-primary .dataTables_paginate .paginate_button.disabled,
.datatable-primary .dataTables_paginate .paginate_button.disabled:hover,
.datatable-primary .dataTables_paginate .paginate_button.disabled:active {
  color: #4336fb!important;
  border: none;
}

.datatable-primary .dataTables_paginate .page-item.disabled .page-link {
  color: #9f98f7;
  background-color: #f9f9f9;
  border-color: #c9c6f5;
}



/* datatable-dark */

.datatable-dark thead {
  background: #444;
  color: #fff;
}

.datatable-dark .dataTables_paginate .page-item.active .page-link,
.datatable-dark .dataTables_paginate .page-item .page-link:hover {
  background-color: #444;
  border-color: #444;
  color: #fff;
}

.datatable-dark .dataTables_paginate .page-link {
  color: #444;
  border: 1px solid #444;
}

.datatable-dark .dataTables_paginate .paginate_button.disabled,
.datatable-dark .dataTables_paginate .paginate_button.disabled:hover,
.datatable-dark .dataTables_paginate .paginate_button.disabled:active {
  color: #444!important;
  border: none;
}

.datatable-dark .dataTables_paginate .page-item.disabled .page-link {
  color: #999;
  background-color: #f9f9f9;
  border-color: #999;
}

/*-------------------- END Datatable ------------------- */


/*-------------------- 21. Map Start ------------------- */

#mapamchart1,
#mapamchart2,
#mapamchart3,
#mapamchart4,
#mapamchart5,
#mapamchart6 {
  height: 400px;
}

#google_map {
  height: 600px;
}

/*-------------------- END Map Start ------------------- */

/*-------------------- 22. Invoice ------------------- */

.invoice-area {}

.invoice-head {
  margin-bottom: 30px;
  border-bottom: 1px solid #efebeb;
  padding-bottom: 20px;
}

.invoice-head .iv-left span {
  color: #444;
}

.invoice-head span {
  font-size: 21px;
  font-weight: 700;
  color: #777;
}

.invoice-address h3 {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.invoice-address h5 {
  font-size: 17px;
  margin-bottom: 10px;
}

.invoice-address p {
  font-size: 15px;
  color: #555;
}

.invoice-date li {
  font-size: 15px;
  color: #555;
  font-weight: 700;
  margin-bottom: 5px;
}

.invoice-table {}

.invoice-table .table-bordered td,
.invoice-table .table-bordered th {
  border: 1px solid rgba(120, 130, 140, 0.13) !important;
  border-left: none!important;
  border-right: none!important;
}

.invoice-table tr td {
  color: #666;
}

.invoice-table tfoot tr td {
  text-transform: uppercase;
  font-weight: 600;
  color: #444;
}

.invoice-buttons a {
  display: inline-block;
  font-size: 15px;
  color: #fff;
  background: #815ef6;
  padding: 12px 19px;
  border-radius: 3px;
  text-transform: capitalize;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-left: 6px;
}

.invoice-buttons a:hover {
  background: #574494;
}

/*-------------------- END Invoice ------------------- */


/*-------------------- 23. Login ------------------- */

.login-area {
  background: #F3F8FB;
}

.login-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
}

.login-box form {
  margin: auto;
  width: 450px;
  max-width: 100%;
  background: #fff;
  border-radius: 3px;
}

.login-form-head {
  text-align: center;
  background: #8655FC;
  padding: 50px;
}

.login-form-head h4 {
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 7px;
  color: #fff;
}

.login-form-head p {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
}

.login-form-body {
  padding: 68px 50px 50px 50px;
}

.form-gp {
  margin-bottom: 25px;
  position: relative;
}

.form-gp label {
  position: absolute;
  left: 0;
  top: 0;
  color: #b3b2b2;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.form-gp.focused label {
  top: -15px;
  color: #7e74ff;
}

.form-gp input {
  width: 100%;
  height: 30px;
  border: none;
  border-bottom: 1px solid #e6e6e6;
}

.form-gp input::-webkit-input-placeholder {
  color: #dad7d7;
}

.form-gp input::-moz-placeholder {
  color: #dad7d7;
}

.form-gp input:-ms-input-placeholder {
  color: #dad7d7;
}

.form-gp input:-moz-placeholder {
  color: #dad7d7;
}

.form-gp i {
  position: absolute;
  right: 5px;
  bottom: 15px;
  color: #7e74ff;
  font-size: 16px;
}

.rmber-area {
  font-size: 13px;
}

.submit-btn-area {
  text-align: center;
}

.submit-btn-area button {
  width: 100%;
  height: 50px;
  border: none;
  background: #fff;
  color: #585b5f;
  border-radius: 40px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.07);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-bottom: 5px!important;
}

.last {
  margin-bottom: 20px!important;
}

.submit-btn-area button:hover {
  background: #2c71da;
  color: #ffffff;
}

.submit-btn-area button i {
  margin-left: 15px;
  -webkit-transition: margin-left 0.3s ease 0s;
  transition: margin-left 0.3s ease 0s;
}

.submit-btn-area button:hover i {
  margin-left: 20px;
}

.login-other a {
  display: block;
  width: 100%;
  max-width: 250px;
  height: 43px;
  line-height: 43px;
  border-radius: 40px;
  text-transform: capitalize;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.07);
}

.login-other a i {
  margin-left: 5px;
}

.login-other a.fb-login {
  background: #8655FC;
  color: #fff;
}

.login-other a.fb-login:hover {
  box-shadow: 0 5px 15px rgba(44, 113, 218, 0.38);
}

.login-other a.google-login {
  background: #fb5757;
  color: #fff;
}

.login-other a.google-login:hover {
  box-shadow: 0 5px 15px rgba(251, 87, 87, 0.38);
}

.form-footer a {
  margin-left: 5px;
}

/*-------------------- END Login ------------------- */


/*-------------------- 25. 404 Page ------------------- */

.error-area {
  min-height: 100vh;
  background: #F3F8FB;
}

.error-content {
  background: #fff;
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 70px 30px;
}

.error-content h2 {
  font-size: 98px;
  font-weight: 800;
  color: #686cdc;
  margin-bottom: 28px;
  text-shadow: -3px -3px 0 #ffffff, 3px -3px 0 #ffffff, -3px 3px 0 #ffffff, 3px 3px 0 #ffffff, 4px 4px 0 #6569dc, 5px 5px 0 #6569dc, 6px 6px 0 #6569dc, 7px 7px 0 #6569dc;
  font-family: 'lato', sans-serif;
}

.error-content img {
  margin-bottom: 50px;
}

.error-content p {
  font-size: 17px;
  color: #787bd8;
  font-weight: 600;
}

.error-content a {
  display: inline-block;
  margin-top: 40px;
  background: #656aea;
  color: #fff;
  padding: 16px 26px;
  border-radius: 3px;
}

/*-------------------- END 404 Page ------------------- */


/*-------------------- 26. NOTIFICATIONS SLIDER ------------------- */

.offset-area {
  position: fixed;
  left: -320px;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #f9f9f9;
  z-index: 998;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
  -webkit-transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #D7E1E5;
}

.show_hide.offset-area {
  left: 0;
}

.offset-close {
  font-size: 19px;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.offset-close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.offset-menu-tab {
  padding: 30px 20px;
}

.offset-menu-tab li {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.offset-menu-tab li a {
  display: block;
  font-size: 16px;
  color: #444;
  font-weight: 600;
  font-family: 'lato', sans-serif;
  position: relative;
  padding-bottom: 15px;
}

.offset-menu-tab li a.active {
  color: #2a3439;
}

.offset-menu-tab li a:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #2a3439;
  border-radius: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
  transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
}

.offset-menu-tab li a.active:before {
  left: 0;
}

.offset-menu-tab li a:before {
  left: 100%;
}

.offset-menu-tab li:last-child a:before {
  display: none!important;
}

.offset-content {
  padding: 15px;
}

.recent-activity {
  padding-top: 7px;
  padding-left: 53px;
}

.offset-settings h4 {
  font-family: 'lato', sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
  color: #444;
  margin-bottom: 23px;
}

.s-swtich input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.s-swtich label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 23px;
  background: #1bd4a6;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: 0;
}

.s-swtich label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 90px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.s-swtich input:checked+label {
  background: #bada55;
}

.s-swtich input:checked+label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.s-swtich label:active:after {
  width: 40px;
}

.s-settings {
  margin-bottom: 30px;
}

.s-settings p {
  color: #888383;
  font-size: 14px;
}

.s-sw-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.s-sw-title h5 {
  font-size: 16px;
  color: #555;
}

/*-------------------- END NOTFICATIONS SLIDER ------------------- */


/*-------------------- 27. MESSAGES SLIDER ------------------- */

.messages-area {
  position: fixed;
  left: -320px;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #f9f9f9;
  z-index: 998;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
  -webkit-transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #D7E1E5;
}

.show_hide.messages-area {
  left: 0;
}

.messages-close {
  font-size: 19px;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.messages-close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.messages-menu-tab {
  padding: 30px 20px;
}

.messages-menu-tab li {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.messages-menu-tab li a {
  display: block;
  font-size: 16px;
  color: #444;
  font-weight: 600;
  font-family: 'lato', sans-serif;
  position: relative;
  padding-bottom: 15px;
}

.messages-menu-tab li a.active {
  color: #2a3439;
}

.messages-menu-tab li a:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #2a3439;
  border-radius: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
  transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
}

.messages-menu-tab li a.active:before {
  left: 0;
}

.messages-menu-tab li a:before {
  left: 100%;
}

.messages-menu-tab li:last-child a:before {
  display: none!important;
}

.messages-content {
  padding: 15px;
}

.messages-items {
  padding-top: 7px;
  padding-left: 53px;
}

.messages-settings h4 {
  font-family: 'lato', sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
  color: #444;
  margin-bottom: 23px;
}

.s-swtich input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.s-swtich label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 23px;
  background: #1bd4a6;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: 0;
}

.s-swtich label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 90px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.s-swtich input:checked+label {
  background: #bada55;
}

.s-swtich input:checked+label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.s-swtich label:active:after {
  width: 40px;
}

.s-settings {
  margin-bottom: 30px;
}

.s-settings p {
  color: #888383;
  font-size: 14px;
}

.s-sw-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.s-sw-title h5 {
  font-size: 16px;
  color: #555;
}

/*-------------------- END MESSAGES SLIDER  ------------------- */


/*-------------------- 28. CUSTOMER Slider ------------------- */

.customer-new-area {
  position: fixed;
  left: -320px;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #f9f9f9;
  z-index: 998;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
  -webkit-transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #D7E1E5;
}

.show_hide.customer-new-area {
  left: 0;
}

.customer-new-close {
  font-size: 19px;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.customer-new-close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.customer-new-menu-tab {
  padding: 30px 20px;
}

.customer-new-menu-tab li {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.customer-new-menu-tab li a {
  display: block;
  font-size: 16px;
  color: #444;
  font-weight: 600;
  font-family: 'lato', sans-serif;
  position: relative;
  padding-bottom: 15px;
}

.customer-new-menu-tab li a.active {
  color: #2a3439;
}

.customer-new-menu-tab li a:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #2a3439;
  border-radius: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
  transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
}

.customer-new-menu-tab li a.active:before {
  left: 0;
}

.customer-new-menu-tab li a:before {
  left: 100%;
}

.customer-new-menu-tab li:last-child a:before {
  display: none!important;
}

.customer-new-content {
  padding: 15px;
}

.customer-new-items {
  padding-top: 7px;
  padding-left: 53px;
}

.customer-new-settings h4 {
  font-family: 'lato', sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
  color: #444;
  margin-bottom: 23px;
}

.s-swtich input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.s-swtich label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 23px;
  background: #1bd4a6;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: 0;
}

.s-swtich label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 90px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.s-swtich input:checked+label {
  background: #bada55;
}

.s-swtich input:checked+label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.s-swtich label:active:after {
  width: 40px;
}

.s-settings {
  margin-bottom: 30px;
}

.s-settings p {
  color: #888383;
  font-size: 14px;
}

.s-sw-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.s-sw-title h5 {
  font-size: 16px;
  color: #555;
}

#slider-new {
  margin: 0 auto;
}

#slider-new, button {
  width: 150px;
  margin-bottom: 25px;
}

/*-------------------- END CUSTOMER NEW SLIDER  ------------------- */


/*-------------------- 28. SERVICES SLIDER ------------------- */

.service-new-area {
  position: fixed;
  left: -320px;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #f9f9f9;
  z-index: 998;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
  -webkit-transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #D7E1E5;
}

.show_hide.service-new-area {
  left: 0;
}

.service-new-close {
  font-size: 19px;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.service-new-close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.service-new-menu-tab {
  padding: 30px 20px;
}

.service-new-menu-tab li {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.service-new-menu-tab li a {
  display: block;
  font-size: 16px;
  color: #444;
  font-weight: 600;
  font-family: 'lato', sans-serif;
  position: relative;
  padding-bottom: 15px;
}

.service-new-menu-tab li a.active {
  color: #2a3439;
}

.service-new-menu-tab li a:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #2a3439;
  border-radius: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
  transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
}

.service-new-menu-tab li a.active:before {
  left: 0;
}

.service-new-menu-tab li a:before {
  left: 100%;
}

.service-new-menu-tab li:last-child a:before {
  display: none!important;
}

.service-new-content {
  padding: 15px;
}

.service-new-items {
  padding-top: 7px;
  padding-left: 53px;
}

.service-new-settings h4 {
  font-family: 'lato', sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
  color: #444;
  margin-bottom: 23px;
}

.s-swtich input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.s-swtich label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 23px;
  background: #1bd4a6;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: 0;
}

.s-swtich label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 90px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.s-swtich input:checked+label {
  background: #bada55;
}

.s-swtich input:checked+label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.s-swtich label:active:after {
  width: 40px;
}

.s-settings {
  margin-bottom: 30px;
}

.s-settings p {
  color: #888383;
  font-size: 14px;
}

.s-sw-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.s-sw-title h5 {
  font-size: 16px;
  color: #555;
}

/*-------------------- END PRODUCT SLIDER  ------------------- */

/*-------------------- 29. SETUP SLIDER ------------------- */

.slider-setup {
  position: fixed;
  left: -320px;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #f9f9f9;
  z-index: 998;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
  -webkit-transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  transition: left 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #D7E1E5;
}

.show_hide.slider-setup {
  left: 0;
}

.slider-setup-close {
  font-size: 19px;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.slider-setup-close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.slider-setup-menu-tab {
  padding: 30px 20px;
}

.slider-setup-menu-tab li {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.slider-setup-menu-tab li a {
  display: block;
  font-size: 16px;
  color: #444;
  font-weight: 600;
  font-family: 'lato', sans-serif;
  position: relative;
  padding-bottom: 15px;
}

.slider-setup-menu-tab li a.active {
  color: #2a3439;
}

.slider-setup-menu-tab li a:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #2a3439;
  border-radius: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
  transition: all 0.3s cubic-bezier(0.91, 0.31, 0.31, 0.92) 0s;
}

.slider-setup-menu-tab li a.active:before {
  left: 0;
}

.slider-setup-menu-tab li a:before {
  left: 100%;
}

.slider-setup-menu-tab li:last-child a:before {
  display: none!important;
}

.slider-setup-content {
  padding: 15px;
}

.slider-setup-items {
  padding-top: 7px;
  padding-left: 53px;
}

.slider-setup-settings h4 {
  font-family: 'lato', sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
  color: #444;
  margin-bottom: 23px;
}

.s-swtich input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.s-swtich label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 23px;
  background: #1bd4a6;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: 0;
}

.s-swtich label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 90px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.s-swtich input:checked+label {
  background: #bada55;
}

.s-swtich input:checked+label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.s-swtich label:active:after {
  width: 40px;
}

.s-settings {
  margin-bottom: 30px;
}

.s-settings p {
  color: #888383;
  font-size: 14px;
}

.s-sw-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.s-sw-title h5 {
  font-size: 16px;
  color: #555;
}

/*-------------------- END SETUP SLIDER  ------------------- */

/*-------------------- 30. GRID CONTAINER  ------------------- */

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #fff;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}

/*-------------------- END GRID CONTAINER  ------------------- */

/*-------------------- 31. NEW CUSTOMER  ------------------- */

.product-item{
  margin-bottom: 10px;
}

#onboard-card {
  margin: 0 auto;
}

#onboard-input {
  height: 50px
}

td {
  height: 65px
}

.onboard-heading {
  font-weight: bold; 
  font-size: 18px; 
  padding-bottom: 10px;
  text-align: center;
}

h3 {
  text-align: center;
}

/*-------------------- END NEW CUSTOMER  ------------------- */

/*-------------------- 32. FLOW  ------------------- */

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-top: 4px
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

/*-------------------- END FLOW  ------------------- */

/*-------------------- 33. INVOICE (Customer View)  ------------------- */

#card-customer-invoice {
  margin: 0 auto;
}

#modal-pay {
  width: 350px;
  margin: 0 auto;
}

@media(max-width: 576px) {

  table tr {
      margin-bottom: 15px;
      border: 1px solid rgb(200, 200, 200);
  }

  table td {
      text-align: right;
      padding-left: 50%;
      position: relative;
      height: 100%;
  }

  tfoot tr, tfoot td {
      width: 100%;
      border: none;
  }
}

/*-------------------- 33. INVOICE FORM TABLE  ------------------- */

@media(max-width: 576px) {

  #table-invoice thead {
      display: none;
  }

  #table-invoice table, #table-invoice tbody, #table-invoice tbody tr, #table-invoice tbody td {
      display: block;
      width: 100%;
  }

  #table-invoice tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-invoice tbody td:nth-child(1) { 
      text-align: center;
  }

  #table-invoice tbody td:nth-child(3):before { content: "Unit Amount"; }
  #table-invoice tbody td:nth-child(4):before { content: "Quantity"; }
  #table-invoice tbody td:nth-child(6):before { content: "Total Amount"; }

  #table-invoice tbody td:nth-child(5) {				
      display: none;
  }

  #table-invoice tbody td:nth-child(7) {				
      text-align: center;
  }

  tfoot tr, tfoot td {
      width: 100%;
      border: none;
  }

  #table-invoice tfoot td:nth-child(1) {
      display: none;        
  }

}

/*-------------------- 34. INVOICES TABLE  ------------------- */

@media(max-width: 576px) {

  #table-invoices thead {
      display: none;
  }

  #table-invoices table, #table-invoices tbody, #table-invoices tbody tr, #table-invoices tbody td {
      display: block;
      width: 100%;
  }

  #table-invoices tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-invoices tbody td:nth-child(1) { display: none; }
  #table-invoices tbody td:nth-child(2):before { content: "Invoice Reference"; }
  #table-invoices tbody td:nth-child(3):before { content: "Name"; }
  #table-invoices tbody td:nth-child(4):before { content: "Amount"; }
  #table-invoices tbody td:nth-child(5) { display: none; }
  #table-invoices tbody td:nth-child(6) { display: none; }
  #table-invoices tbody td:nth-child(7) { display: none; }
  #table-invoices tbody td:nth-child(8):before { content: "Status"; }

}

/*-------------------- 35. CONTACTS TABLE  ------------------- */

@media(max-width: 576px) {

  #table-contacts thead {
      display: none;
      }

  #table-contacts table, #table-contacts tbody, #table-contacts tbody tr, #table-contacts tbody td {
      display: block;
      width: 100%;
      }

  #table-contacts tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-contacts td {
      height: 45px;
  }

  #table-contacts tbody td:nth-child(1) {				
      display: none;
      }

  #table-contacts tbody td:nth-child(2):before { content: "Name"; }
  #table-contacts tbody td:nth-child(3):before { content: "Phone"; }
  #table-contacts tbody td:nth-child(4):before { content: "Email"; }
  #table-contacts tbody td:nth-child(5):before { content: "Type"; }

  #table-contacts tbody td:nth-child(6) {				
      display: none;
      }

  #table-contacts tbody td:nth-child(7) {				
      display: none;
      }

  tfoot tr, tfoot td {
      width: 100%;
      border: none;
      }

  #table-contacts tfoot td:nth-child(1) {
      display: none;  
      }

}

/*-------------------- 35. PROPOSALS TABLE  ------------------- */

@media(max-width: 576px) {

  #table-proposals thead {
      display: none;
      }

  #table-proposals table, #table-proposals tbody, #table-proposals tbody tr, #table-proposals tbody td {
      display: block;
      width: 100%;
      }

  #table-proposals tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-proposals tbody td:nth-child(1) { display: none; }
  #table-proposals tbody td:nth-child(2):before { content: "Proposal #"; }
  #table-proposals tbody td:nth-child(3):before { content: "Name"; }
  #table-proposals tbody td:nth-child(4):before { content: "Amount"; }
  #table-proposals tbody td:nth-child(5):before { content: "Proposal Date"; }
  #table-proposals tbody td:nth-child(6):before { content: "Expirary Date"; }
  #table-proposals tbody td:nth-child(7):before { content: "Status"; }

}

/*-------------------- 35. PRODUCTS TABLE  ------------------- */

@media(max-width: 576px) {

  #table-products thead {
      display: none;
      }

  #table-products table, #table-products tbody, #table-products tbody tr, #table-products tbody td {
      display: block;
      width: 100%;
      }

  #table-products tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-products tbody td:nth-child(1) { display: none; }
  #table-products tbody td:nth-child(2):before { content: "Name"; }
  #table-products tbody td:nth-child(3):before { content: "Amount"; }
  #table-products tbody td:nth-child(4):before { content: "Charge Type"; }
  #table-products tbody td:nth-child(5) { display: none; }
}

/*-------------------- 36. CUSTOMER INVOICE TABLE  ------------------- */

@media(max-width: 576px) {

  #table-customer-invoice thead {
      display: none;
  }

  #table-customer-invoice table, #table-customer-invoice tbody, #table-customer-invoice tbody tr, #table-customer-invoice tbody td {
      display: block;
  }

  #table-customer-invoice tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-customer-invoice tbody td:nth-child(1) { 
      text-align: center;
      font-size: 15px;
      font-weight: bold;
  }

  #table-customer-invoice tbody td:nth-child(2) { 
      text-align: center;
  }

  #table-customer-invoice tbody td:nth-child(3):before { content: "Quantity"; }
  #table-customer-invoice tbody td:nth-child(4):before { content: "Amount"; }
  #table-customer-invoice tbody td:nth-child(5):before { content: "Total Amount"; }


  #table-customer-invoice tfoot td:nth-child(1+1) {
      display: none;
      
  }
}

/*-------------------- 36. CUSTOMER PROPOSAL  ------------------- */

@media(max-width: 576px) {

  #table-proposal thead {
      display: none;
  }

  #table-proposal table, #table-proposal tbody, #table-proposal tbody tr, #table-proposal tbody td {
      display: block;
      width: 100%;
  }

  /* table td {
      text-align: right;
      padding-left: 50%;
      position: relative;
  } */

  #table-proposal tbody td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }

  #table-proposal tbody td:nth-child(1) { text-align: center; font-weight: bold;}
  #table-proposal tbody td:nth-child(2) { text-align: center; }
  #table-proposal tbody td:nth-child(3):before { content: "Unit Amount"; }
  #table-proposal tbody td:nth-child(4):before { content: "Quantity"; }
  #table-proposal tbody td:nth-child(5):before { content: "Total Amount"; }

  #table-proposal tfoot td::before { 
      position: absolute;
      left: 0;
      width: 50%;
      padding-left 30px;
      font-size: 15px;
      font-weight: bold;
      text-align: left;
      margin-left: 10px;
      }
}

@media only screen and (max-width: 667px) {
  /* .input-group-text {
    width: 25vw !important;
    font-size: 14px !important;
    margin-left: -15px !important;
  } */

  #inlineFormInputGroup {
    /* width: 45vw !important; */
    font-size: 14px !important;
    margin-right: -15px !important;
  }

  .desktop {
    display: none !important;
  }

  .table td {
    text-align: left;
  }

  #hide-mobile {
    display: none;
  }
}

@media only screen and (min-width: 667px) {
  .input-group-text {
    width: 110px !important;
    font-size: 14px !important;
  }

  #hide-desktop {
    display: none;
  }
}

#input-label-large {
  width: 125px !important;
}

#button-auto {
  width: auto !important;
}

#card-report {
  border: 1px !important;
  border-color: #ededed !important;
  border-style: solid !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

.card-title,
.card-text {
  margin-left: -5px !important;
}

.card-text {
  font-size: 14px !important;
}

.header-area {
  height: 65px !important;
}

.card-title,
.card-text {
  margin-left: -5px;
}

.list-group-item:hover {
  /* background-color: #d3d3d3; */
  /* color: #ededed; */
}

.card-text {
  font-size: 14px;
}

a {
  color: #292b2c;
  text-decoration: none;
}

.text-history {
  font-size: 12px;
}

#dropdown-date {
  height: 45px;
  width: 200px;
}

#text-number {
  text-align: right;
}

#row-report {
  padding-top: -15px;
  margin-top: -15px;
}

#row-report-sum {
  padding-top: -15px;
  margin-top: -15px;
  border-bottom: 1px solid black;
}

#row-report-total {
  padding-top: -15px;
  margin-top: -15px;
}

#row-report-gst {
  padding-top: -15px;
  margin-top: -15px;
}

#text-report-header {
  text-align: right;
  font-weight: bold;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #6c757d;
}

.table-editable td {
  padding: 0px 10px;

  vertical-align: middle;
}

.table-editable td {
  height: 40px;
}

.date .input-group-prepend {
  width: 70px;
}

@media only screen and (max-width: 990px) {
  .new-proposal-button {
    margin-left: 2px;
  }
}

@media only screen and (max-width: 1800px) {
  .date-picker-input {
    width: 100px !important;
    margin-left: 60px!important;
  }
}

@media only screen and (min-width: 667px) {
  .date-picker-input {
    width: 100px !important;
    margin-left: 66px!important;
  }
  .c-contact .react-autosuggest__container {
    width: 70%
  }
  .c-contact .input-group-prepend {
    margin-right: -1px;
    width: 30%;
  }
  .c-contact .input-group-text {
    width: 100% !important;
  }
}

@media only screen and (max-width: 3800px) {
  .date-picker-input {
    width: 96px !important;
    margin-top: 42px !important;
    margin-left: -3px !important;
  }
  .date .input-group-prepend {
    width: 50px;
  }
  .date-e .input-group-prepend {
    width: 60px;
  }
  .date-picker-input-reports {
    margin-left: 82px;
    margin-top: 7px;
    width: 120px;
  }


}

@media only screen and (max-width: 767px) {
  .date-picker-input {
    width: 112% !important;
    margin-top: 42px !important;
    margin-left: -3px !important;
  }

  .margin_top_date {
    margin-top: -41px !important;
  }

  .react-datepicker-wrapper {
    width: 74% !important;
  }

  .react-autosuggest__container {
    width: 73% !important;
  }

  .react-autosuggest__input {
    width: 115% !important;
  }
}

@media only screen and (max-width: 667px) {
  .date-picker-input {
    width: 106% !important;
    margin-top: 42px !important;
    margin-left: -3px !important;
  }

  .margin_top_date {
    margin-top: -41px !important;
  }

  .react-datepicker-wrapper {
    width: 74% !important;
  }

  .react-autosuggest__container {
    width: 73% !important;
  }

  .react-autosuggest__input {
    width: 107% !important;
  }
}

@media only screen and (max-width: 510px) {
  .date-picker-input {
    width: 107% !important;
    margin-top: 42px !important;
    margin-left: -3px !important;
  }

  .date-e .date-picker-input {
    width: 107% !important;
  }

  .react-autosuggest__input {
    width: 108% !important;
  }

  .date .input-group-prepend {
    width: 83px;
  }
  .date-e .input-group-prepend {
    width: 83px;
  }
}

@media only screen and (max-width: 479px) {
  .react-autosuggest__input {
    width: 109% !important;
  }
}

@media only screen and (max-width: 403px) {
  .date-picker-input {
    width: 109% !important;
    margin-top: 42px !important;
    margin-left: -3px !important;
  }

  /* .react-autosuggest__container {
    width: 108% !important;
  } */
}

.react-datepicker__input-container input {
  padding: 9px 9px !important;
}

@media only screen and (min-width: 767px) {
  .table .react-autosuggest__input {
    width: 110px !important;
  }
}

/* @media only screen and (max-width: 510px) {
  .react-autosuggest__input {
    width: 108px !important;
  }
} */

p a,
p a:visited {
  color: #007bff;
}

.draft-notes {
  height: 200px;
}

.notes-card {
  min-height: 828px;
}

@media only screen and (max-width: 767px) {
  .notes-card {
    height: 780px;
  }

  .modal_add_item {
    background: white !important;
  }
  
}


/* @media only screen and (min-device-width: 480px) and (max-device-width: 510px) {
  .input-group-text {
    width: 24vw !important;
    font-size: 14px !important;
    margin-left: -15px !important;
  }
} */



.date-picker-input {
  height: 44px!important;
}

.date-span {
  height: 44px!important;
}

.login-form-body .form-check-input {
  margin-top: .45rem!important;
}