@import url(https://fonts.googleapis.com/icon?family=DM+Sans:400,500,700&display=swap||Material+Icons);

@import url(material-design-iconic-font.min.css);

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body{

    font-family: 'Poppins', sans-serif !important;

    scroll-behavior: smooth;

}

ul,li{

    list-style: none;

}

a,a:hover{

    color: inherit;

    text-decoration: none;

}

.logo img {

    max-width: 150px;

}

.logo {

    margin: 20px 0px;

    text-align: center;

}



/*Position*/

.position-top-start,

.position-top-end,

.position-bottom-start,

.position-bottom-end,

.position-start-center,

.position-end-center,

.position-top-center,

.position-bottom-center,

.position-top-start-overflow,

.position-top-end-overflow,

.position-bottom-start-overflow,

.position-bottom-end-overflow,

.position-start-center-overflow,

.position-end-center-overflow,

.position-top-center-overflow,

.position-bottom-center-overflow {

  position: absolute !important;

  z-index: 2;

}

.position-top-end-overflow {

    top: 0 !important;

    right: 0 !important;

    -webkit-transform: translate(50%, -50%) !important;

    -moz-transform: translate(50%, -50%) !important;

    -ms-transform: translate(50%, -50%) !important;

    -o-transform: translate(50%, -50%) !important;

    transform: translate(50%, -50%) !important;

  }

/**Vertical Navigation**/

.hk-wrapper[data-layout="vertical"] .hk-pg-wrapper {

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-flow: column;

    position: fixed;

    top: 0;

    bottom: 0;

    width: 270px;

    margin-left: 0;

    z-index: 1032;

    border-right: 1px solid #eaeaea;

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

    /*Sidebar fixednav*/

    /*Horizontal Scrollbar*/

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu > .nicescroll-bar {

    overflow: auto;

    flex: 1 1 auto;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap {

    padding: 1.5rem;

    position: relative;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .nav-header {

    padding: 0 0 .5rem 0;

    font-size: 0.875rem;

    color: #9e9e9e;

    font-weight: 500;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: .5rem 1rem;

    margin: 0 -1rem;

    white-space: nowrap;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link > * {

    -webkit-transition: -webkit-transform 0.25s ease;

    -moz-transition: -moz-transform 0.25s ease;

    transition: transform 0.25s ease;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link .nav-icon-wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin-right: .875rem;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link .nav-icon-wrap > *:not(.badge) {

    font-size: 1.5rem;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    position: absolute;

    right: 1rem;

    z-index: -1;

    content: '\f2f9';

    font: normal normal normal 1.125rem/1 'Material-Design-Iconic-Font';

    text-rendering: auto;

    margin-left: auto;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {

    -webkit-transform: rotate(-180deg);

    -moz-transform: rotate(-180deg);

    -ms-transform: rotate(-180deg);

    -o-transform: rotate(-180deg);

    transform: rotate(-180deg);

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link:hover > * {

    -webkit-transform: translateX(5px);

    -moz-transform: translateX(5px);

    -ms-transform: translateX(5px);

    -o-transform: translateX(5px);

    transform: translateX(5px);

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item.active > .nav-link {

    color: #5b6acf !important;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item.active > .nav-link {

    background: #5b6acf;

    color: #fff !important;

    border-radius: 0.5rem;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul {

    position: relative;

    padding: 0.5rem 0;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    content: "";

    width: 1px;

    height: calc(100% - 20px);

    position: absolute;

    left: 10px;

    top: 0;

    bottom: 0;

    margin: auto;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .nav-children .nav-item .nav-link {

    font-size: 0.875rem;

    padding: 0.15rem 0 0.15rem 1.4rem;

    margin: 0 0 0 1rem;

    -webkit-transition: all 0.25s ease;

    -moz-transition: all 0.25s ease;

    transition: all 0.25s ease;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .nav-children .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    right: 0;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-group .nav-children .nav-children .nav-item .nav-link {

    padding: 0.15rem 0 0.15rem 2rem;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-content-wrap .menu-gap {

    height: 25px;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-header {

    /* padding: 0.5rem 1.1875rem; */

    padding: 20px 15px 5px 15px !important;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex: 0 0 auto;

    /* height: 65px; */

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    overflow: hidden;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-header .navbar-toggle {

    flex-shrink: 0;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-header > span {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-shrink: 0;

    align-items: center;

    flex-grow: 1;

    justify-content: space-between;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .menu-header > span .navbar-brand .brand-img:last-child {

    margin-left: 0.5rem;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .bottom-nav {

    flex: 0 0 auto;

    padding-bottom: .5rem;

  }

  .hk-wrapper[data-layout="vertical"] .hk-menu .simplebar-track.simplebar-horizontal {

    display: none;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-pg-wrapper {

    margin-left: 0;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-navbar {

    left: 0;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-menu {

    left: -270px;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu {

    left: 0;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .navbtn{

    display: none;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-menu .navbtn{

    display: block;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu-backdrop {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    z-index: 1031;

    -webkit-transition: all 0.25s ease;

    -moz-transition: all 0.25s ease;

    transition: all 0.25s ease;

    background: rgba(38, 42, 46, 0.5);

    opacity: 1;

    height: auto;

    width: auto;

    visibility: visible;

  }

  .hk-wrapper[data-layout="vertical"][data-menu="light"] .hk-menu {

    background: #fff;

  }

  .hk-wrapper[data-layout="vertical"][data-menu="light"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #262a2e;

  }

  .hk-wrapper[data-layout="vertical"][data-menu="light"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(38, 42, 46, 0.3);

  }

  .hk-wrapper[data-layout="vertical"][data-menu="light"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  .hk-wrapper[data-layout="vertical"][data-menu="dark"] .hk-menu {

    background: #262a2e;

  }

  .hk-wrapper[data-layout="vertical"][data-menu="dark"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #fff;

  }

  .hk-wrapper[data-layout="vertical"][data-menu="dark"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(255, 255, 255, 0.3);

  }

  .hk-wrapper[data-layout="vertical"][data-menu="dark"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  

  @media (min-width: 1200px) {

    .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-pg-wrapper {

      margin-left: 270px;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-navbar {

      left: 270px;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .hk-menu {

      left: 0;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-pg-wrapper {

      margin-left: 72px;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-navbar {

      left: 72px;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu {

      width: 72px;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-content-wrap > .callout {

      display: none;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-content-wrap .menu-group .nav-header {

      display: none;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > .nav-link > *:not(.nav-icon-wrap) {

      visibility: hidden;

      flex-shrink: 0;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"]::after {

      right: -1.5rem;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-content-wrap .menu-group .collapse.show {

      display: none;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-content-wrap .menu-gap {

      display: none;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .menu-header > span .navbar-brand .brand-img:last-child {

      display: none;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu .navbar-toggle {

      -webkit-transform: rotate(180deg);

      -moz-transform: rotate(180deg);

      -ms-transform: rotate(180deg);

      -o-transform: rotate(180deg);

      transform: rotate(180deg);

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover {

      width: 270px;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .navbtn {

        display: block;

      }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-content-wrap > .callout {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-content-wrap .menu-group .nav-header {

      display: block;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-content-wrap .menu-group .navbar-nav > .nav-item > .nav-link > *:not(.nav-icon-wrap) {

      visibility: visible;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-content-wrap .menu-group .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"]::after {

      right: 1rem;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-content-wrap .menu-group .collapse.show {

      display: -ms-flexbox;

      display: flex;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-content-wrap .menu-gap {

      display: block;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"][data-hover="active"] .hk-menu:hover .menu-header > span .navbar-brand .brand-img:last-child {

      display: inline;

    }

    .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .hk-menu-backdrop {

      opacity: 0;

      height: 0;

      width: 0;

      visibility: hidden;

    }

  }

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

  [Icon Menu]

  Project:	Jampack

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

  /**Vertical Icon Navigation**/

  .hk-wrapper[data-layout="twocolumn"] .hk-pg-wrapper {

    margin-left: 72px;

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-navbar {

    left: 72px;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-flow: column;

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;

    width: 72px;

    margin-left: 0;

    z-index: 1032;

    border-right: 1px solid #d8d8d8;

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

    /*Sidebar fixednav*/

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu > .nicescroll-bar {

    overflow: auto;

    flex: 1 1 auto;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-content-wrap {

    padding: 1.5rem;

    position: relative;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-content-wrap .navbar-nav .nav-item .nav-link {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: .5rem 1rem;

    margin: 0 -1rem;

    white-space: nowrap;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-content-wrap .navbar-nav .nav-item .nav-link .nav-icon-wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin-right: .875rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-content-wrap .navbar-nav .nav-item .nav-link .nav-icon-wrap > *:not(.badge) {

    font-size: 1.5rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-content-wrap .navbar-nav .nav-item.active > .nav-link {

    color: #007D88 !important;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-content-wrap .navbar-nav > .nav-item.active > .nav-link {

    background: rgba(0, 125, 136, 0.15);

    color: #007D88 !important;

    border-radius: 0.5rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-header {

    padding: 0.5rem 1.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    height: 65px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .menu-header .navbar-brand {

    margin: 0;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu .bottom-nav {

    flex: 0 0 auto;

    padding-bottom: .5rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-flow: column;

    position: fixed;

    top: 0;

    bottom: 0;

    left: 72px;

    width: 270px;

    margin-left: 0;

    z-index: 1031;

    overflow: hidden;

    border-right: 1px solid #d8d8d8;

    -webkit-transform: translate(-100%);

    -moz-transform: translate(-100%);

    -ms-transform: translate(-100%);

    -o-transform: translate(-100%);

    transform: translate(-100%);

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu > .nicescroll-bar {

    overflow: auto;

    flex: 1 1 auto;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap {

    padding: 1.5rem;

    position: relative;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .nav-header {

    padding: 0 0 .5rem 0;

    font-size: 0.875rem;

    color: #007D88;

    font-weight: 500;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: .5rem 1rem;

    margin: 0 -1rem;

    white-space: nowrap;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link > * {

    -webkit-transition: -webkit-transform 0.25s ease;

    -moz-transition: -moz-transform 0.25s ease;

    transition: transform 0.25s ease;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link .nav-icon-wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin-right: .875rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link .nav-icon-wrap > *:not(.badge) {

    font-size: 1.5rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    position: absolute;

    right: 1rem;

    z-index: -1;

    content: '\f2f9';

    font: normal normal normal 1.125rem/1 'Material-Design-Iconic-Font';

    text-rendering: auto;

    margin-left: auto;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-default="true"]::after {

    -webkit-transform: rotate(-180deg);

    -moz-transform: rotate(-180deg);

    -ms-transform: rotate(-180deg);

    -o-transform: rotate(-180deg);

    transform: rotate(-180deg);

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link:hover > * {

    -webkit-transform: translateX(5px);

    -moz-transform: translateX(5px);

    -ms-transform: translateX(5px);

    -o-transform: translateX(5px);

    transform: translateX(5px);

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item.active > .nav-link {

    color: #007D88 !important;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item.active > .nav-link {

    color: #007D88 !important;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul {

    position: relative;

    padding: 0.5rem 0;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    content: "";

    width: 1px;

    height: calc(100% - 20px);

    position: absolute;

    left: 10px;

    top: 0;

    bottom: 0;

    margin: auto;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .nav-children .nav-item .nav-link {

    font-size: 0.875rem;

    padding: 0.15rem 0 0.15rem 1.4rem;

    margin: 0 0 0 1rem;

    -webkit-transition: all 0.25s ease;

    -moz-transition: all 0.25s ease;

    transition: all 0.25s ease;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .nav-children .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    right: 0;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-group .nav-children .nav-children .nav-item .nav-link {

    padding: 0.15rem 0 0.15rem 2rem;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-content-wrap .menu-gap {

    height: 25px;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-header {

    padding: 0 1.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex: 0 0 auto;

    min-height: 65px;

    width: 269px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .menu-header .navbar-toggle {

    flex-shrink: 0;

  }

  .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu .subnav-list {

    display: none;

  }

  .hk-wrapper[data-layout="twocolumn"][data-submenu="active"] .hk-menu .sub-menu {

    -webkit-transform: translate(0);

    -moz-transform: translate(0);

    -ms-transform: translate(0);

    -o-transform: translate(0);

    transform: translate(0);

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .main-menu {

    background: #fff;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .main-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #262a2e;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .main-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(38, 42, 46, 0.3);

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .main-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .sub-menu {

    background: #fff;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #262a2e;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(38, 42, 46, 0.3);

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="light"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .main-menu {

    background: #262a2e;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .main-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #fff;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .main-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(255, 255, 255, 0.3);

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .main-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .sub-menu {

    background: #2F343A;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #fff;

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(255, 255, 255, 0.3);

  }

  .hk-wrapper[data-layout="twocolumn"][data-menu="dark"] .hk-menu .sub-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  

  @media (max-width: 1199px) {

    .hk-wrapper[data-layout="twocolumn"] .hk-pg-wrapper {

      margin-left: 0;

    }

    .hk-wrapper[data-layout="twocolumn"] .hk-navbar {

      left: 0;

    }

    .hk-wrapper[data-layout="twocolumn"] .hk-menu .main-menu {

      left: -72px;

    }

    .hk-wrapper[data-layout="twocolumn"] .hk-menu .sub-menu {

      left: 0;

    }

    .hk-wrapper[data-layout="twocolumn"][data-layout-style="offcanvas"] .hk-menu .main-menu {

      left: 0;

    }

    .hk-wrapper[data-layout="twocolumn"][data-layout-style="offcanvas"] .hk-menu .sub-menu {

      left: 72px;

    }

    .hk-wrapper[data-layout="twocolumn"][data-layout-style="offcanvas"] .hk-menu-backdrop {

      position: fixed;

      left: 0;

      right: 0;

      bottom: 0;

      top: 0;

      z-index: 1030;

      background: rgba(38, 42, 46, 0.5);

      height: auto;

      width: auto;

    }

  }

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

  [Navbar Menu]

  Project:	Jampack

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

  /**Navbar Navigation**/

  .hk-wrapper[data-layout="navbar"] .hk-pg-wrapper {

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-flow: column;

    position: fixed;

    top: 0;

    bottom: 0;

    width: 270px;

    margin-left: 0;

    z-index: 1032;

    border-right: 1px solid #eaeaea;

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu > .nicescroll-bar {

    overflow: auto;

    flex: 1 1 auto;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap {

    padding: 1.5rem;

    position: relative;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .nav-header {

    padding: 0 0 .5rem 0;

    font-size: 0.875rem;

    color: #007D88;

    font-weight: 500;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: .5rem 1rem;

    margin: 0 -1rem;

    white-space: nowrap;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link > * {

    -webkit-transition: -webkit-transform 0.25s ease;

    -moz-transition: -moz-transform 0.25s ease;

    transition: transform 0.25s ease;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link .nav-icon-wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin-right: .875rem;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link .nav-icon-wrap > *:not(.badge) {

    font-size: 1.5rem;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    position: absolute;

    right: 1rem;

    z-index: -1;

    content: '\f2f9';

    font: normal normal normal 1.125rem/1 'Material-Design-Iconic-Font';

    text-rendering: auto;

    margin-left: auto;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {

    -webkit-transform: rotate(-180deg);

    -moz-transform: rotate(-180deg);

    -ms-transform: rotate(-180deg);

    -o-transform: rotate(-180deg);

    transform: rotate(-180deg);

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link:hover > * {

    -webkit-transform: translateX(5px);

    -moz-transform: translateX(5px);

    -ms-transform: translateX(5px);

    -o-transform: translateX(5px);

    transform: translateX(5px);

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item.active > .nav-link {

    color: #007D88 !important;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item.more-nav-item > .nav-link[data-bs-toggle="collapse"]::after {

    display: none;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item.more-nav-item .nav-children .nav-item .nav-link .nav-icon-wrap {

    display: none;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item.active > .nav-link {

    color: #007D88 !important;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul {

    position: relative;

    padding: 0.5rem 0;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    content: "";

    width: 1px;

    height: calc(100% - 20px);

    position: absolute;

    left: 10px;

    top: 0;

    bottom: 0;

    margin: auto;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .nav-children .nav-item .nav-link {

    font-size: 0.875rem;

    padding: 0.15rem 0 0.15rem 1.4rem;

    margin: 0 0 0 1rem;

    -webkit-transition: all 0.25s ease;

    -moz-transition: all 0.25s ease;

    transition: all 0.25s ease;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .nav-children .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    right: 0;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-group .nav-children .nav-children .nav-item .nav-link {

    padding: 0.15rem 0 0.15rem 2rem;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-content-wrap .menu-gap {

    height: 25px;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-header {

    padding: 0.5rem 1.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex: 0 0 auto;

    height: 65px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    overflow: hidden;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-header .navbar-toggle {

    flex-shrink: 0;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-header > span {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-shrink: 0;

    align-items: center;

    flex-grow: 1;

    justify-content: space-between;

  }

  .hk-wrapper[data-layout="navbar"] .hk-menu .menu-header > span .navbar-brand .brand-img:last-child {

    margin-left: 0.5rem;

  }

  .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-pg-wrapper {

    margin-left: 0;

  }

  .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-navbar {

    left: 0;

  }

  .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu {

    left: -270px;

  }

  .hk-wrapper[data-layout="navbar"][data-layout-style="collapsed"] .hk-menu {

    left: 0;

  }

  .hk-wrapper[data-layout="navbar"][data-layout-style="collapsed"] .hk-menu-backdrop {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    z-index: 1031;

    -webkit-transition: all 0.25s ease;

    -moz-transition: all 0.25s ease;

    transition: all 0.25s ease;

    background: rgba(38, 42, 46, 0.5);

    opacity: 1;

    height: auto;

    width: auto;

    visibility: visible;

  }

  .hk-wrapper[data-layout="navbar"] .simplebar-track.simplebar-horizontal {

    display: none;

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-light .hk-menu {

    background: #fff;

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-light .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #262a2e;

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-light .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(38, 42, 46, 0.3);

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-light .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-dark .hk-menu {

    background: #262a2e;

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-dark .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

    color: #fff;

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-dark .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

    color: rgba(255, 255, 255, 0.3);

  }

  .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-dark .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

    background: #d8d8d8;

  }

  

  @media (max-width: 1199px) {

    .hk-wrapper[data-layout="navbar"] .hk-menu .container.menu-group {

      padding: 0;

    }

  }

  @media (min-width: 1200px) {

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu {

      background: inherit !important;

      width: 100%;

      position: static;

      -webkit-transform: translateY(0);

      -moz-transform: translateY(0);

      -ms-transform: translateY(0);

      -o-transform: translateY(0);

      transform: translateY(0);

      border: 0;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu > .nicescroll-bar {

      overflow: visible !important;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap {

      padding: 0;

      position: relative;

      min-height: auto;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group > .navbar-nav.flex-column {

      flex-direction: row !important;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > ul:after {

      display: none;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > .nav-link {

      min-height: 65px;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item > .nav-link:hover > * {

      -webkit-transform: translateX(0);

      -moz-transform: translateX(0);

      -ms-transform: translateX(0);

      -o-transform: translateX(0);

      transform: translateX(0);

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item {

      position: relative;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link {

      margin: 0;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"]::after {

      position: static;

      margin-left: 0.75rem;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item ul.nav-children {

      height: auto !important;

      min-width: 10rem;

      position: absolute;

      z-index: 1;

      border-radius: .25rem;

      border: 1px solid #eaeaea;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.nav-children {

      padding: 1rem 0;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.nav-children .nav-item .nav-link {

      padding: .25rem 1.5rem;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.nav-children .nav-item .nav-link[data-bs-toggle="collapse"]::after {

      margin-left: auto;

      -webkit-transform: rotate(-90deg);

      -moz-transform: rotate(-90deg);

      -ms-transform: rotate(-90deg);

      -o-transform: rotate(-90deg);

      transform: rotate(-90deg);

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.nav-children .nav-item ul.nav-children {

      padding: 0.5rem 0;

      left: 100%;

      top: 0;

      position: absolute;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.nav-children .nav-item ul.nav-children .nav-item .nav-link {

      padding: .25rem 1rem;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.nav-children .nav-item.edge ul.nav-children {

      left: auto !important;

      right: 100%;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.collapse, .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.collapse.show, .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item > ul.collapsing {

      display: block;

      clip: rect(1px, 1px, 1px, 1px);

      opacity: 0.1;

      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1);

      -moz-transition: -moz-transform 0.1s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1);

      transition: transform 0.1s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1);

      -webkit-transform: translateY(-10px) scaleY(0.5);

      -moz-transform: translateY(-10px) scaleY(0.5);

      -ms-transform: translateY(-10px) scaleY(0.5);

      -o-transform: translateY(-10px) scaleY(0.5);

      transform: translateY(-10px) scaleY(0.5);

      -webkit-transform-origin: top;

      transform-origin: top;

      box-shadow: 0 0.25rem 0.3125rem rgba(47, 52, 58, 0.1) !important;

      top: 100%;

      position: fixed;

    }

    .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item:hover > ul.collapse, .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item:hover > ul.collapse.show, .hk-wrapper[data-layout="navbar"][data-layout-style="default"] .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item:hover > ul.collapsing {

      clip: auto;

      opacity: 1;

      -webkit-transform: translateY(0) scaleY(1);

      -moz-transform: translateY(0) scaleY(1);

      -ms-transform: translateY(0) scaleY(1);

      -o-transform: translateY(0) scaleY(1);

      transform: translateY(0) scaleY(1);

    }

    .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-light .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item ul.nav-children {

      background: #fff;

    }

    .hk-wrapper[data-layout="navbar"] .hk-navbar.navbar.navbar-dark .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item ul.nav-children {

      background: #262a2e;

    }

  }

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

  [Drawer]

  Project:	Jampack

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

  /*Drawer*/

  .hk-wrapper .hk-drawer {

    position: fixed;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-flow: column;

    top: 0;

    right: -320px;

    width: 320px;

    bottom: 0;

    z-index: 1050;

    border: none;

    background: #fff;

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper .hk-drawer .drawer-header {

    padding: 0.75rem 1.25rem;

    border-bottom: 1px solid #d8d8d8;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    justify-content: space-between;

    -webkit-justify-content: space-between;

    -ms-flex-pack: space-between;

  }

  .hk-wrapper .hk-drawer .drawer-header .drawer-text {

    font-size: 1rem;

    color: #2F343A;

    font-weight: 500;

  }

  .hk-wrapper .hk-drawer .drawer-header .drawer-header-action {

    margin-left: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  }

  .hk-wrapper .hk-drawer .drawer-header.header-bold .drawer-text {

    font-size: 0.75rem;

    text-transform: uppercase;

    font-weight: 600;

  }

  .hk-wrapper .hk-drawer .drawer-header.header-wth-bg {

    background: #007D88;

    border-bottom: 0;

  }

  .hk-wrapper .hk-drawer .drawer-header.header-wth-bg .drawer-text {

    color: #fff;

  }

  .hk-wrapper .hk-drawer .drawer-header.header-wth-bg .drawer-close {

    color: #fff;

  }

  .hk-wrapper .hk-drawer .drawer-header.header-flush {

    border-bottom: 0;

  }

  .hk-wrapper .hk-drawer .drawer-body {

    overflow: auto;

    flex: 1 1 auto;

  }

  .hk-wrapper .hk-drawer .drawer-body .drawer-content-wrap {

    Padding: 1.25rem 1.25rem 7rem 1.25rem;

  }

  .hk-wrapper .hk-drawer .drawer-body .drawer-content-wrap .drawer-close {

    position: absolute;

    right: 14px;

    top: 10px;

    cursor: pointer;

  }

  .hk-wrapper .hk-drawer .drawer-footer {

    padding: 0.75rem 1.25rem;

    background: #fff;

    border-top: 1px solid #d8d8d8;

  }

  .hk-wrapper .hk-drawer.drawer-left {

    left: -320px;

    border-right: 1px solid #d8d8d8;

  }

  .hk-wrapper .hk-drawer.drawer-right {

    right: -320px;

    border-left: 1px solid #d8d8d8;

  }

  .hk-wrapper .hk-drawer.drawer-small {

    top: 65px;

  }

  .hk-wrapper .hk-drawer.drawer-toggle.hk-drawer.drawer-left {

    left: 0;

  }

  .hk-wrapper .hk-drawer.drawer-toggle.hk-drawer.drawer-right {

    right: 0;

  }

  .hk-wrapper.hk-drawer-push.hk-drawer-pushleft .hk-pg-wrapper {

    margin-left: 20rem;

  }

  .hk-wrapper.hk-drawer-push.hk-drawer-pushright .hk-pg-wrapper {

    margin-right: 20rem;

  }

  .hk-wrapper.hk-drawer-push.hk-drawer-wth-nav-push .hk-navbar {

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    transition: all 0.2s ease;

  }

  .hk-wrapper.hk-drawer-push.hk-drawer-wth-nav-push.hk-drawer-pushleft .hk-navbar {

    left: 320px;

  }

  .hk-wrapper.hk-drawer-push.hk-drawer-wth-nav-push.hk-drawer-pushright .hk-navbar {

    right: 320px;

  }

  .hk-wrapper .hk-drawer-backdrop {

    position: absolute;

    height: 100%;

    width: 100%;

    background: #262a2e;

    opacity: 0.25;

    z-index: 1033;

    top: 0;

    left: 0;

  }

  

  @media (max-width: 1199px) {

    .hk-wrapper.hk-drawer-push.hk-drawer-pushleft .hk-pg-wrapper {

      margin-left: 0;

    }

    .hk-wrapper.hk-drawer-push.hk-drawer-pushright .hk-pg-wrapper {

      margin-right: 0;

    }

    .hk-wrapper.hk-drawer-push.hk-drawer-wth-nav-push .hk-navbar {

      -webkit-transition: all 0.2s ease;

      -moz-transition: all 0.2s ease;

      transition: all 0.2s ease;

    }

    .hk-wrapper.hk-drawer-push.hk-drawer-wth-nav-push.hk-drawer-pushleft .hk-navbar {

      left: 0;

    }

    .hk-wrapper.hk-drawer-push.hk-drawer-wth-nav-push.hk-drawer-pushright .hk-navbar {

      right: 0;

    }

  }

  .btn > span:not(.badge):not(.sr-only):not(span[class^="spinner"]), div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .hopscotch-nav-button > span:not(.badge):not(.sr-only):not(span[class^="spinner"]) {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    height: 100%;

    width: 100%;

    position: relative;

  }

  .btn.btn-rounded .icon, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-rounded.hopscotch-nav-button .icon {

    border-radius: 50% !important;

  }

  .navbar.navbar-light {

    background: #fff;

  }

  .navbar.navbar-light .badge.badge-indicator {

    border-color: #fff;

  }

  .btn.btn-icon[class*="btn-flush-"], div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-icon[class*="btn-flush-"].hopscotch-nav-button {

    position: relative;

    border: none;

    background: transparent !important;

  }

  .btn.btn-rounded, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-rounded.hopscotch-nav-button {

    border-radius: 50rem !important;

  }

  .btn.btn-icon[class*="btn-flush-"].btn-flush-dark.flush-soft-hover:before, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-icon[class*="btn-flush-"].btn-flush-dark.flush-soft-hover.hopscotch-nav-button:before {

    background: #f7f7f7;

  }

  .btn.btn-icon[class*="btn-flush-"].btn-rounded::before, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-icon[class*="btn-flush-"].btn-rounded.hopscotch-nav-button::before {

    border-radius: 50%;

  }

  .btn.btn-icon[class*="btn-flush-"]::before, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-icon[class*="btn-flush-"].hopscotch-nav-button::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    height: 0;

    width: 0;

    background: #298DFF;

    border-radius: 0.5rem;

    -webkit-transition: all 200ms;

    -moz-transition: all 200ms;

    transition: all 200ms;

  }

  .svg-icon {

    line-height: 0 !important;

  }

  .badge {

    font-weight: 500;

    border-radius: 0.5rem;

    padding: .5rem .625rem;

    font-size: 70%;

    min-width: 25px;

    letter-spacing: 0.3px;

    vertical-align: middle;

    display: inline-block;

    text-align: center;

    text-transform: capitalize;

  }

  .badge.badge-primary {

    background: #38b474;

    color: #fff;

  }

  .badge.badge-pill {

    border-radius: 50rem;

  }

/*Top Nav*/

.hk-wrapper .hk-navbar {

    border-bottom: 1px solid #eaeaea;

    height: 85px;

    justify-content: space-between;

    -webkit-justify-content: space-between;

    -ms-flex-pack: space-between;



    padding: 10px;

    

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown .dropdown-menu, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown .apexcharts-toolbar .apexcharts-menu, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown .apexcharts-menu {

    position: absolute;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu {

    width: 21.875rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-header, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-header, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-header {

    color: #262a2e;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    justify-content: space-between;

    -webkit-justify-content: space-between;

    -ms-flex-pack: space-between;

    border-bottom: 1px solid #f7f7f7;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-body, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-body, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-body {

    height: 23.75rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-footer, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-footer, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-footer {

    border-top: 1px solid #f7f7f7;

    padding: 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    color: #007D88;

    font-size: 0.875rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-item, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-item, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-item {

    white-space: inherit;

    padding-top: .75rem;

    padding-bottom: .75rem;

    border-radius: .5rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-item .media .media-head, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-item .media .media-head, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-item .media .media-head {

    margin-right: 1rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-item .media .media-body > div .notifications-info, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-item .media .media-body > div .notifications-info, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-item .media .media-body > div .notifications-info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-top: .25rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-item .media .media-body > div .notifications-info > .badge, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-item .media .media-body > div .notifications-info > .badge, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-item .media .media-body > div .notifications-info > .badge {

    margin-right: .625rem;

  }

  .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .dropdown-menu .dropdown-item .media .media-body > div .notifications-info .notifications-time, .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-toolbar .apexcharts-menu .dropdown-item .media .media-body > div .notifications-info .notifications-time, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-nav .nav-item .dropdown.dropdown-notifications .apexcharts-menu .dropdown-item .media .media-body > div .notifications-info .notifications-time {

    font-size: 0.75rem;

    color: #6f6f6f;

  }

  .hk-wrapper .hk-navbar .navbar-search {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input > span.btn-input-clear, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle > span.btn-input-clear {

    display: none;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control + .input-suffix, .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select + .input-suffix, .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input + .input-suffix, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input + .input-suffix, .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle + .input-suffix,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control + .input-prefix,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select + .input-prefix,

  .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input + .input-prefix,

  .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input + .input-prefix,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle + .input-prefix {

    pointer-events: none;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control + .input-suffix > span.spinner-border, .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select + .input-suffix > span.spinner-border, .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input + .input-suffix > span.spinner-border, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input + .input-suffix > span.spinner-border, .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle + .input-suffix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control + .input-prefix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select + .input-prefix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input + .input-prefix > span.spinner-border,

  .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input + .input-prefix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle + .input-prefix > span.spinner-border {

    display: none;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control:focus + .input-suffix, .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select:focus + .input-suffix, .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input:focus + .input-suffix, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input:focus + .input-suffix, .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle:focus + .input-suffix,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control:focus + .input-prefix,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select:focus + .input-prefix,

  .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input:focus + .input-prefix,

  .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input:focus + .input-prefix,

  .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle:focus + .input-prefix {

    border: none;

    pointer-events: auto;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control:focus + .input-suffix > span:not(.btn-input-clear):not(.spinner-border), .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select:focus + .input-suffix > span:not(.btn-input-clear):not(.spinner-border), .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input:focus + .input-suffix > span:not(.btn-input-clear):not(.spinner-border), .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input:focus + .input-suffix > span:not(.btn-input-clear):not(.spinner-border), .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle:focus + .input-suffix > span:not(.btn-input-clear):not(.spinner-border),

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control:focus + .input-prefix > span:not(.btn-input-clear):not(.spinner-border),

  .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select:focus + .input-prefix > span:not(.btn-input-clear):not(.spinner-border),

  .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input:focus + .input-prefix > span:not(.btn-input-clear):not(.spinner-border),

  .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input:focus + .input-prefix > span:not(.btn-input-clear):not(.spinner-border),

  .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle:focus + .input-prefix > span:not(.btn-input-clear):not(.spinner-border) {

    display: none;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-control:focus + .input-suffix > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-select:focus + .input-suffix > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search.loading .wizard > .content > .body input:focus + .input-suffix > span.btn-input-clear, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search.loading input:focus + .input-suffix > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.dd-handle:focus + .input-suffix > span.btn-input-clear,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-control:focus + .input-prefix > span.btn-input-clear,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-select:focus + .input-prefix > span.btn-input-clear,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading .wizard > .content > .body input:focus + .input-prefix > span.btn-input-clear,

  .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search.loading input:focus + .input-prefix > span.btn-input-clear,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.dd-handle:focus + .input-prefix > span.btn-input-clear {

    display: none !important;

  }

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-control:focus + .input-suffix > span.spinner-border, .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-select:focus + .input-suffix > span.spinner-border, .hk-wrapper .hk-navbar .navbar-search .input-search.loading .wizard > .content > .body input:focus + .input-suffix > span.spinner-border, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search.loading input:focus + .input-suffix > span.spinner-border, .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.dd-handle:focus + .input-suffix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-control:focus + .input-prefix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.form-select:focus + .input-prefix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading .wizard > .content > .body input:focus + .input-prefix > span.spinner-border,

  .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search.loading input:focus + .input-prefix > span.spinner-border,

  .hk-wrapper .hk-navbar .navbar-search .input-search.loading input.dd-handle:focus + .input-prefix > span.spinner-border {

    display: inline;

  }

  .hk-wrapper .hk-navbar .navbar-search .dropdown-menu, .hk-wrapper .hk-navbar .navbar-search .apexcharts-toolbar .apexcharts-menu, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-search .apexcharts-menu {

    width: 18rem;

  }

  .hk-wrapper .hk-navbar .navbar-search .dropdown-menu .dropdown-body, .hk-wrapper .hk-navbar .navbar-search .apexcharts-toolbar .apexcharts-menu .dropdown-body, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-search .apexcharts-menu .dropdown-body {

    max-height: 19.75rem;

  }

  .hk-wrapper .hk-navbar .navbar-search .dropdown-menu .dropdown-footer, .hk-wrapper .hk-navbar .navbar-search .apexcharts-toolbar .apexcharts-menu .dropdown-footer, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-search .apexcharts-menu .dropdown-footer {

    border-top: 1px solid #f7f7f7;

    padding: 1rem;

    justify-content: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    color: #007D88;

    font-size: 0.875rem;

  }

  .hk-wrapper .hk-navbar .navbar-search .dropdown-menu .dropdown-item, .hk-wrapper .hk-navbar .navbar-search .apexcharts-toolbar .apexcharts-menu .dropdown-item, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-search .apexcharts-menu .dropdown-item {

    white-space: inherit;

  }

  .hk-wrapper .hk-navbar .nav-start-wrap,

  .hk-wrapper .hk-navbar .nav-end-wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  }

  .hk-wrapper .hk-navbar .nav-start-wrap > .navbar-nav,

  .hk-wrapper .hk-navbar .nav-end-wrap > .navbar-nav {

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  }

  .hk-wrapper .hk-navbar .navbar-brand .brand-img:last-child {

    margin-left: 0.5rem;

  }

  .hk-wrapper[data-navbar-style="collapsed"] .hk-navbar {

    -webkit-transform: translateY(-100%);

    -moz-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    -o-transform: translateY(-100%);

    transform: translateY(-100%);

    overflow: hidden;

  }

  .hk-wrapper[data-navbar-style="collapsed"] .hk-pg-wrapper {

    padding-top: 0;

  }

  

  @media (min-width: 992px) {

    .hk-wrapper .hk-navbar {

      -webkit-transition: 0.2s ease;

      -moz-transition: 0.2s ease;

      transition: 0.2s ease;

    }

  }

  @media (min-width: 1200px) {

    .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control, .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select, .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input, .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle {

      width: 18rem;

    }

    .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control:focus + .input-suffix > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select:focus + .input-suffix > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input:focus + .input-suffix > span.btn-input-clear, .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input:focus + .input-suffix > span.btn-input-clear, .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle:focus + .input-suffix > span.btn-input-clear,

    .hk-wrapper .hk-navbar .navbar-search .input-search input.form-control:focus + .input-prefix > span.btn-input-clear,

    .hk-wrapper .hk-navbar .navbar-search .input-search input.form-select:focus + .input-prefix > span.btn-input-clear,

    .hk-wrapper .hk-navbar .navbar-search .input-search .wizard > .content > .body input:focus + .input-prefix > span.btn-input-clear,

    .wizard > .content > .body .hk-wrapper .hk-navbar .navbar-search .input-search input:focus + .input-prefix > span.btn-input-clear,

    .hk-wrapper .hk-navbar .navbar-search .input-search input.dd-handle:focus + .input-prefix > span.btn-input-clear {

      display: inline !important;

    }

    .hk-wrapper .hk-navbar .nav-start-wrap,

    .hk-wrapper .hk-navbar .nav-end-wrap {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

    }

    .hk-wrapper .hk-navbar .nav-start-wrap > .navbar-nav,

    .hk-wrapper .hk-navbar .nav-end-wrap > .navbar-nav {

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center;

    }

    .hk-wrapper[data-navbar-style="collapsed"][data-layout="horizontal"] .hk-pg-wrapper {

      padding-top: 65px;

    }

    .hk-wrapper[data-navbar-style="collapsed"][data-layout="horizontal"][data-layout-style="default"] .hk-menu {

      top: 0;

    }

  }

  @media (max-width: 1199px) {

    .hk-wrapper .hk-navbar .navbar-search .mobile-search .input-search .input-suffix,

    .hk-wrapper .hk-navbar .navbar-search .mobile-search .input-search .input-prefix {

      pointer-events: auto !important;

    }

    .hk-wrapper .hk-navbar .navbar-search .mobile-search .input-search .input-suffix > span.btn-input-clear,

    .hk-wrapper .hk-navbar .navbar-search .mobile-search .input-search .input-prefix > span.btn-input-clear {

      display: inline !important;

    }

    .hk-wrapper .hk-navbar .navbar-search .dropdown-menu, .hk-wrapper .hk-navbar .navbar-search .apexcharts-toolbar .apexcharts-menu, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-search .apexcharts-menu {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

    }

    .hk-wrapper .hk-navbar .navbar-search .dropdown-menu .dropdown-body, .hk-wrapper .hk-navbar .navbar-search .apexcharts-toolbar .apexcharts-menu .dropdown-body, .apexcharts-toolbar .hk-wrapper .hk-navbar .navbar-search .apexcharts-menu .dropdown-body {

      max-height: calc(100% - 55px);

    }

  } 

  .feather-icon {

    line-height: 0 !important;

  }

  .feather-icon > svg, .svg-icon > svg {

    height: 1em;

    width: 1em;

}

  .btn.btn-icon, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .btn-icon.hopscotch-nav-button {

    height: 38px;

    width: 38px;

    padding: 0;

  }

  .badge.badge-soft-pink {

    background: #fdeef6;

    color: #E92990;

  }

  .badge.badge-soft-pink.badge-indicator-processing:after {

    border-color: #fdeef6;

  }

  .badge.badge-sm {

    font-size: 60%;

    padding: .25rem .5rem;

    min-width: 19px;

  }

  .badge.badge-sm > span .badge-dot {

    font-size: .375rem;

  }

  .badge.badge-sm > span .icon {

    font-size: 0.75rem;

  }

  .badge.badge-indicator:empty {

    display: inline-block;

  }

  .badge.badge-danger {

    background: #FF0000;

    color: #fff;

  }

  .badge.badge-indicator {

    width: 10px;

    height: 10px;

    min-width: initial;

    border: 2px solid #fff;

    border-radius: 50%;

    padding: 0;

    position: relative;

  }

  .btn-primary, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .hopscotch-nav-button.next {

    color: #fff;

    background-color: #5b6acf;

    border-color: #5b6acf;

  }

  .btn-primary:hover, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .hopscotch-nav-button.next:hover, .btn-primary:focus, div.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .hopscotch-nav-button.next:focus {

    color: #fff;

    background-color: #5b6acfc4;

    border-color: #5b6acf;

  }

/* new dashboard css  */

.navbar-brand img:first-child {

    max-width: 45px;

  }

  .navbar-brand img:last-child {

    max-width: 85px;

    object-fit: cover;

    object-position: center;

  }

  .navbar-brand{

    display: flex;

    align-items: flex-end;

  }

  .dashmainwrap {

    background: #efeef4;

    transition: all .3s ease-in-out;

    padding-bottom: 50px;

  }

  .dashmainwrap .container-fluid{

    padding: 0px 60px;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="default"] .dashmainwrap {

    margin-left: 270px;

  }

  .hk-wrapper[data-layout="vertical"][data-layout-style="collapsed"] .dashmainwrap {

    margin-left: 72px;

  }

.mainwrap {

    position: relative;

    background: #efeef4;

    transition: all 0.3s ease-in-out;

    padding: 100px 0 0px;

}

.sidebar::-webkit-scrollbar-track{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: transparent;

}

.sidebar::-webkit-scrollbar{

    width: 0px;

	background-color: transparent;

}

.sidebar::-webkit-scrollbar-thumb{

	background-color: #232b38;

}

.menubtn{

    color: #000;

    font-size: 30px;

}

.navbarbox p {

    color: #8b8e95;

    font-size: 13px;

    padding-left: 10px;

}

.navbarbox {

    padding-top: 10px;

}

.sideprofile {

    padding: 20px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    border: 1px solid #cccccc52;

    border-width: 1px 0px 1px 0px;

}

.sideprofile p {

    font-size: 14px;

    color: #ffffff9c;

}

.sideprofile img {

    border-radius: 50%;

    max-width: 70px;

    margin-bottom: 10px;

}

.sideprofile strong {

    font-weight: 500;

}

.sidebar .accordion-button:not(.collapsed) {

    color: #fff;

    background-color: transparent;

    box-shadow: none;

}

.sidebar .accordion-button:not(.collapsed) .arrow{

    transform: rotate(180deg);

}

.sidebar .accordion-button:focus {

    border-color: transparent;

    background: #232b38;

    box-shadow: none;

    border-radius: 20px !important;

}

.sidebar .accordion-item {

    background-color: transparent;

    border: 0;

}

.sidebar .accordion-item i {

    margin-right: 10px;

}

.sidebar .accordion-button {

    font-size: 14px;

    font-weight: 400;

    color: #fff;

    padding: 0.9rem 1.25rem;

    margin: 7px 0px;

    background-color: transparent;

}

.sidebar .accordion-body {

    padding: 10px 34px 0px 45px;

    color: #ffffffb5;

    font-size: 14px;

}

.sidebar .accordion-body li {

    margin-bottom: 15px;

    position: relative;

}

.sidebar .accordion-body li:hover{

    color: #fff;

}

.sidebar .accordion-body .point:before {

    content: "";

    position: absolute;

    background: #5469fd;

    top: 8px;

    right: 0px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

}

.nav-icon {

    color: #a5a8ad;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 15px 0px;

    border-top: 1px solid #cccccc52;

    border-bottom: 2px solid #fff;

}

.nav-icon i {

    background: #2f3641;

    width: 35px;

    height: 35px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    display: none;

}

/* .nav-icon i:hover {

    color: #fff;

} */

.prevbtn:hover {

    background: #5b6acfc7;

    color: #fff !important;

}

.prevbtn {

    background: #5b6acf;

    width: 100%;

    max-width: 180px;

    padding: 10px 10px;

    border-radius: 5px;

    margin-left: 20px;

    color: #fff !important;

    transition: all .3s ease-in-out;

}

.sidebar .accordion-button::after{

    display: none;

}

.sidebar .accordion-flush .accordion-item .accordion-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

/* main body content css start  */

.header {

    padding: 20px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    max-width: 100%;

}



.navbtn a {

    display: inline-block;

    background: #5b6acf;

    color: #fff !important;

    max-width: 100%;

    width: 100%;

    text-align: center;

    padding: 10px;

    border-radius: 7px;

    font-weight: 400;

    transition: all .3s ease-in-out;

}

.navbtn a:hover {

    background: #5b6acfd4;

}



.search-toggle, .search-cancel {

    display: block;

    cursor: pointer;

    font-size: 1.45rem;

    line-height: inherit;

    color: #828282;

    display: none;

  }

  .search-block {

    position: fixed;

    top: 0;

    right: -100%;

    width: 100%;

    height: auto;

    z-index: 10;

    overflow: hidden;

    background-color: #fff;

    transition: all 0.35s ease-in-out;

    display: none;

  }

  .search-block.is-active {

    top: 0;

    right: 0;

  }

  .search-form {

    display: flex;

    align-items: center;

    column-gap: 0.75rem;

    padding: 0.75rem 1rem;

  }

  .search-input {

    display: block;

    font-family: inherit;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    width: 100%;

    height: auto;

    padding: 0.65rem 1.25rem;

    border: none;

    outline: none;

    border-radius: 0.25rem;

    color: #000;

    background-color: #fff;

  }

  .search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button {

    display: none;

    visibility: hidden;

  }



.admininfo img {

    max-width: 46px;

    border-radius: 6px;

}

.admininfo {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    max-width: 350px;

}

.admincontent h4 {

    margin-bottom: 2px;

    font-size: 17px;

    color: #000;

    font-weight: 600;

}



.admincontent p {

    font-size: 12px;

    color: #a99e9e;

}

.admincontent strong {

    font-size: 11px;

}

.mainsearch input {

    border-radius: 25px;

    font-size: 15px;

    color: #000;

    padding: 10px 50px 10px 15px;

    overflow: hidden;

    border: 1px solid #ccc;

}

.mainsearch .form-control:focus {

    color: #000;

    background-color: #fff;

    border-color: #ccc;

    box-shadow: none;

}

.mainsearch .form-control::placeholder{

    color: #bbb;

}

.mainsearch button {

    position: absolute;

    top: 4px;

    right: 5px;

    background: transparent;

    border: 0;

    border-radius: 13px;

    width: 40px;

    height: 36px;

    opacity: 0.5;

}

.mainsearch button:focus-visible {

    outline: 0;

}

.mainsearch button:hover{

    opacity: 1;

}

.mainsearch {

    position: relative;

    width: 100%;

    max-width: 430px;

    overflow: hidden;

    margin: 0px 10px;

}

.headericons i {

    font-size: 22px;

    color: #828282;

    position: relative;

}

.headericons {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 30px;

}

.headericons i span {

    font-size: 10px;

    width: 26px;

    display: flex;

    height: 26px;

    align-items: center;

    justify-content: center;

    font-style: initial;

    border: 2px solid #fff;

}

.icon1 span{

    background-color: #41b2b8;

}

.icon2 span{

    background-color: #f3694c;

}

.icon3 span{

    background-color: #5a69cd;

}

.leadbox {

    background: #fff;

    padding: 15px 20px;

    border-radius: 8px;

    margin-bottom: 20px;

    min-height: 180px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.leadbox p {

    font-size: 13px;

}



.leadbox a {

    color: blue !important;

}



.leadbox small {

    font-size: 15px;

    font-weight: 700;

}



.leadcnt {

    display: flex;

    align-items: center;

    margin: 12px 0px;

    gap: 10px;

}

.leadcnt i {

    font-size: 25px;

    width: 50px;

    height: 50px;

    color: #fff;

    display: flex;

    border-radius: 7px;

    align-items: center;

    justify-content: center;

}

.leadcnt .leadicon1{

    background: #41b2b8;

    box-shadow: 0px 0px 7px 0px #41b2b8;

}

.leadcnt h6 {

    font-size: 25px;

    font-weight: 700;

    margin: 0 !important;

}

.leadicon2{

    background-color: #f4694c;

    box-shadow: 0px 0px 7px 0px #f4694c;

}

.leadicon3{

    background-color: #5a69ce;

    box-shadow: 0px 0px 7px 0px #5a69ce;



}

.leadicon4{

    background-color: #ffa31a;

    box-shadow: 0px 0px 7px 0px #ffa31a;



}

.leadsec {

    padding: 20px 0px;

}

.chartinfo {

    display: flex;

    align-items: center;

    justify-content: center;

    /* max-width: 940px; */

    background: #fff;

    border-radius: 8px;

}

.yearlead span {

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    font-weight: 500;

}

.yearlead span select {

    background: transparent;

    border: 0;

    max-width: 60px;

    -webkit-appearance: listbox;

    padding: 0px 0px;

    display: flex;

    align-items: center;

    color: #5b6acf;

    font-weight: 700;

    font-size: 14px;

}

.yearlead span .form-select:focus {

    border-color: transparent;

    outline: 0;

    box-shadow: none;

}

.clicklead {

    text-align: center;

    padding: 15px 30px;

    border-left: 1px solid #ccc;

}

.clickleadheading h5 {

    font-size: 22px;

    font-weight: 700;

}



.clickleadheading {margin: 20px 0px;}



.clickleadheading p {

    color: #333;

    font-size: 14px;

    font-weight: 500;

}

.leadimg {

    width: 110px;

    margin: 0 auto;

}

.clickleadbtm {

    color: #fff;

    background: #5b6acf;

    cursor: pointer;

    font-weight: 400;

    transition: all .3s ease-in-out;

    border-radius: 6px;

    padding: 8px;

    width: 140px;

    text-align: center;

    margin-top: 32px;

}

.chartsec .row {

    align-items: center;

}

#columnChart {

    height: 250px !important;

    width: 92% !important;

    margin-left: 20px;

}

.chartt h3 {

    font-size: 24px;

    margin-left: 17px;

    margin-top: 10px;

    font-weight: 600;

}

.clickleadbtm:hover {

    box-shadow: 0px 0px 7px 0px #5b6acfb8;

}

.leadcircle .circleshape {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 13px solid #5b6acf;

    transition: all .3s ease-in-out;

    animation: circle .5s ease-in-out;

}

.chartright {

    display: flex;

    justify-content: space-between;

    padding: 15px;

    align-items: center;

}

.customchartbox{

    background: #fff;

    border-radius: 8px;

    cursor: pointer;

    overflow: hidden;

    min-height: 140px;

}

.chartright small {

    font-size: 13px;

    font-weight: 600;

    color: #000;

}

.newleadbox h6 {

    font-size: 25px;

    margin: 5px 0px;

    font-weight: 700;

}

.newleadbox a i {

    display: block;

    font-size: 10px;

    margin-bottom: -5px;

}

.newleadbox a {

    font-size: 12px;

    line-height: 0;

    color: #5b6acf !important;

    font-weight: 600;

}

.chartright:hover .circleshape {

    border-color: #5b6acfcf;

}

.barbox {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.barbox .progress {

    background-color: #fce9e3;

    width: 110px;

    border-radius: 0.2rem;

}

.barbox .progress-bar {

    background-color: #f4694c;

}

.chartbox2 h6 {

    margin: 0;

}

.chartbox2 {

    justify-content: center;

}

.lboxhead {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

}

.chartbox3{

    padding: 10px 15px;

    align-items: inherit;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.chartbox3 h6 {

    font-size: 22px;

    font-weight: 700;

    margin: 0;

}

.chartbox3 span {

    font-size: 12px;

    color: #606060;

}

.chartbox3 a {

    font-size: 12px;

    color: #5b6acf !important;

    font-weight: 600;

}

.loss{

    color: red !important;

}

.lboxhead small {

    color: #000;

    font-size: 13px;

}

.lboxhead img {

    max-width: 70px;

}

@keyframes circle {

    0%{

        border: 1px solid #5b6acf;

    }

    25%{

        border: 3px solid #5b6acf;

    }

    50%{

        border: 6px solid #5b6acf;

    }

    75%{

        border: 8px solid #5b6acf;

    }

    100%{

        border: 13px solid #5b6acf;

    }

}



   /* Define CSS classes for category colors */

   .category-meeting { background-color: #ff9f89; }

   .category-event { background-color: #85b9f0; }

   .category-conference { background-color: #aad8b0; }

   /* Add more categories and colors as needed */



   /* Additional styling for event content */

   .fc-event-title {

     font-size: 12px;

     font-weight: bold;

   }

   .fc-event-time {

     font-size: 10px; /* Smaller font size for event time */

   }

   .fc-event-desc {

     font-size: 10px;

     margin-top: 2px;

   }

   .fc-day-grid-event {

    background-color: inherit; /* Inherit the background color from the event category class */

  }

   .fc-daygrid-dot-event.fc-event-mirror, .fc-daygrid-dot-event:hover {

    background: #ff9f89;

}

.fc-daygrid-dot-event.fc-event-mirror, .fc-daygrid-dot-event {

    border: 0;

}.fc-event {

    border: 0;

    padding: 3px;

}

.fc-daygrid-body.fc-daygrid-body-unbalanced {

    width: 100% !important;

}

table.fc-scrollgrid-sync-table {

    width: 100% !important;

    max-width: 100%;

}

table.fc-col-header {

    width: 100% !important;

    max-width: 100%;

}

#calendar {

    min-height: 528px;

    max-width: 100% !important;

    /* margin: 0 auto; */

}

.fc-event-tooltip {

    position: absolute;

    z-index: 9999;

    background-color: rgba(0, 0, 0, 0.8);

    color: #fff;

    padding: 8px;

    border-radius: 4px;

    font-size: 12px;

    white-space: nowrap;

    }

    .fc .fc-button-primary {

        background-color: transparent;

        border-color: #5b6acf;

        color: #5b6acf;

    }

    .fc .fc-button {

        border-radius: 1.15em;

        font-size: 0.8em;

        line-height: 1.3;

        padding: 0.4em 0.45em;

    }

    .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus {

        box-shadow: none;

    }

    .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {

        background-color: #5b6acf;

        border-color: #5b6acf;

    }

    .fc .fc-button-primary:hover {

        background-color: #5b6acf;

        border-color: #5b6acf;

    }
    .fc .fc-toolbar-title {

        font-size: 1em;

    }

    .fc .fc-toolbar.fc-header-toolbar {

        margin-bottom: 1em;

    }

    .fc-scroller-liquid-absolute::-webkit-scrollbar-track{

        -webkit-box-shadow: inset 0 0 6px transparent;

        background-color: transparent;

    }

    .fc-scroller-liquid-absolute::-webkit-scrollbar{

        width: 0px;

        background-color: transparent;

    }

    .fc-scroller-liquid-absolute::-webkit-scrollbar-thumb{

        background-color: transparent;

    }

    .calenderwrap {

        background: #fff;

        border-radius: 8px;

        padding: 30px 20px;

        max-width: 100% !important;

    }

    .donutchart {

        font-family: 'Poppins';

        background: #fff;

        border-radius: 8px;

        padding: 20px;

        overflow: hidden;

        max-width: 850px;

        margin: 0 auto;

    }

    .doughnutwrap {

        width: 100%;

        height: 250px;

        margin: 0 auto;

        margin-top: 10px;

      transition: all .3s ease-in-out;

      }

    .donuthead {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .donuthead h3 {

        font-size: 20px;

        color: #4f4f4f;

        margin-bottom: 2px;

        font-weight: 700;

    }

    .donuthead p {

        font-size: 13px;

        color: #bbb;

    }

    .donuthead i{

        color: #000;

        cursor: pointer;

    }

    .donuthead i:hover{

        opacity: .7;

    }

    #chartdiv {

        width: 100%;

        height: 500px;

      }

    .eventsec {

        margin: 25px 0px;

    }

    .eventsec .row {

        align-items: center;

    }

    .mapbox {

        background: #fff;

        border-radius: 6px;

        padding: 20px 25px;

        max-width: 850px;

        margin: 0 auto;

        margin-top: 12px;

    }

    .mapbox #chartdiv {

        height: 240px;

        margin-top: 30px;

    }

    .mapcontent {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    .mapcontent p {

        font-size: 14px;

        font-weight: 500;

        color: #bbb;

    }

    .mapcontent a {

        background: #5b6acf;

        border-radius: 25px;

        width: 160px;

        font-weight: 500;

        font-size: 14px;

        padding: 8px;

        text-align: center;

        color: #fff !important;

        transition: all .3s ease;

    }

    .mapcontent a:hover {

        background: #5569fee0;

    }

    .tasksec {

        font-family: 'Poppins', sans-serif;

        background: #fff;

        border-radius: 10px;

        padding: 40px 30px;

    }

    .taskhead {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    

    .taskhead i {

        font-size: 25px;

        border-radius: 8px;

        padding: 3px;

        cursor: pointer;

        transition: all .2s ease-in-out;

    }

    .taskhead i:active {

        background: #ccc;

    }

    .theadpara h3 {

        font-size: 25px;

        margin-bottom: 3px;

        font-weight: 600;

    }

    .theadpara p {

        font-size: 14px;

        color: #8d8b8b;

    }

    .taskbox {

        border: 1px solid #ccccccc2;

        border-radius: 10px;

        padding: 20px;

        min-height: 310px;

        transition: all .3s ease-in-out;

    }

    

    .taskboxhead {

        display: flex;

        gap: 20px;

        align-items: center;

        position: relative;

    }

    

    .taskboxhead i {

        position: absolute;

        top: 0;

        color: #9d9d9d;

        right: 0;

        font-size: 23px;

    }

    .taskboxhead i:hover {

        color: #5569fe;

    }

    

    .taskboxhead img {

        max-width: 66px;

    }

    

    .taskheading h6 {

        color: #000;

        font-size: 18px;

        font-weight: 700;

        font-family: poppins;

    }

    .taskheading p {

        font-size: 14px;

        font-weight: 400;

        color: #41464b8a;

    }

    .taskbox h2 {

        font-size: 19px;

        color: #000;

        font-weight: 600;

        margin: 20px 0px;

    }

    .taskcatag {

        display: flex;

        justify-content: flex-start;

        align-items: center;

        gap: 10px;

        margin-top: 20px;

    }

    .taskcatag p {

        border-radius: 20px;

        padding: 5px 10px;

        font-size: 14px;

        font-weight: 500;

        cursor: pointer;

    }

    .t1 {

        background: #e0f2f1;

        color: #59bbc0;

    }

    .t2 {

        background: #fdefe5;

        color: #f68f77;

    }

    .t3 {

        background: #e6e9f8;

        color: #6472d1;

    }

    .progress1{

        background-color: #e6e9f8 !important;

    }

    .progress-bar1{

        background-color: #5b6acf !important;

    }

    .progress2{

        background-color: #e3f4f4 !important;

    }

    .progress-bar2{

        background-color: #26ba73 !important;

    }

    .progress3{

        background-color: #fdf0e4 !important;

    }

    .progress-bar3{

        background-color: #f3994a !important;

    }

    .progress4{

        background-color: #dfdfe7 !important;

    }

    .progress-bar4{

        background-color: #29305c!important;

    }

    .taskbox .progress-bar {

        border-radius: 20px;

    }

    .taskbox .progress {

        height: 12px;

        margin: 20px 0px;

        border-radius: 20px;

    }

    .taskbody {

        padding-top: 35px;

    }

    .taskdonebox {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    .taskdonebox p {

        font-size: 14px;

        font-weight: 500;

    }

    .taskdonebox p:last-child {color: #6c757dab;}

    .taskdonebox strong {

        margin-right: 10px;

    }

    .taskbox:hover {

        cursor: pointer;

        transform: translateY(-5px);

        box-shadow: 0px 5px 27px 0px #ccc;

    }

    .recentsec {

        background: #fff;

        max-width: 50%;

        margin: 40px 0px;

        border-radius: 20px;

        padding: 30px 30px 15px 30px;

        font-family: 'Poppins', sans-serif;

    }

    

    .recenthead {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    

    .recenthead a {

        display: inline-block;

        background: #5b6acf;

        color: #fff !important;

        border-radius: 12px;

        font-size: 15px;

        padding: 13px;

        width: 170px;

        text-align: center;

        font-weight: 500;

        transition: all .3s ease-in-out;

    }

    .messagebox {

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 35px;

    }

    .userimg span{

        position: relative;

    }

    .userimg span:before {

        content: "";

        position: absolute;

        bottom: -109%;

        right: -2px;

        width: 25px;

        height: 25px;

        background: #53d868;

        border: 4px solid #fff;

        border-radius: 50%;

    }

    .messageinner {

        display: flex;

        justify-content: flex-start;

        gap: 30px;

    }

    .messagebody {margin: 50px 0px 0px;}



.messageheading h3 {

    font-size: 19px;

    font-weight: 600;

    margin: 0;

}



.messageheading p {

    font-size: 16px;

    font-weight: 500;

    padding: 10px 0px;

    color: #000;

    line-height: 1.3;

}



.messageheading {

    max-width: 530px;

}



.messageheading small {

    font-size: 15px;

}



.messagebox a {

    color: #2853e7 !important;

    font-size: 14px;

    font-weight: 700;

    margin-right: 15px;

}



.userimg {

    max-width: 70px;

    height: 70px;

    overflow: hidden;

}

.recenthead a:hover, .usertablehead a:hover {

    background: #5569fee0;

}

.messagebox a:hover {

    color: #5569fee0 !important;

}

.usertable {

    background: #fff;

    margin: 20px 0px;

    border-radius: 15px;

    padding: 30px;

    font-family: 'Poppins', sans-serif;

}

.usertablehead {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    margin-top: 60px;

    padding: 0px 10px;

}

.usertablehead a {

    display: inline-block;

    background: #5b6acf;

    color: #fff !important;

    border-radius: 10px;

    font-size: 16px;

    padding: 10px;

    width: 150px;

    text-align: center;

    font-weight: 500;

    transition: all .3s ease-in-out;

}

.userheadings h3 {

    font-size: 27px;

    font-weight: 700;

}

.recenthead h4 {

    margin: 0;

    font-weight: 600;

}

  .filter-button {

    margin: 5px;

    padding: 5px 10px;

    background-color: transparent;

    color: #000;

    border: none;

    font-size: 15px;

    border-radius: 5px;

    cursor: pointer;

    font-weight: 500;

}

.filteractive{

    background-color: #5b6acf !important;

    box-shadow: 0px 0px 5px 0px #2853e7 !important;

    color: #fff;

  }

  .filterbtn {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0px 10px;

}

.usertablewrap {

    position: relative;

  }

  .usertablewrap #myTable_length {

    position: absolute;

    bottom: 4px;

    right: 200px;

  }

  /* CSS to make font size small for DataTables elements */

  .usertablewrap .dataTables_length select, .usertablewrap .dataTables_length label,/* "Show X entries" dropdown */

  .usertablewrap .dataTables_info, /* Showing X to Y of Z entries info */

  .usertablewrap .dataTables_paginate .pagination /* Pagination links */

{

  font-size: 13px !important;

  font-weight: 600;



}

.usertablewrap .dataTables_length select{

    border: none;

    padding-right: 25px;

}

.usertablewrap .dataTables_length select:focus{

    box-shadow: none;

    border: 0;

}

.usertablewrap .page-item.active .page-link {

    z-index: 3;

    color: #fff !important;

    background-color: #5b6acf;

    border-color: transparent;

}

.gridview {

    background: #fff;

    text-align: center;

    border-radius: 9px;

    width: 75px;

    min-height: 30px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    line-height: 1.6;

    display: none;

}

#myTable_wrapper .row .col-md-6:nth-child(2) {

    width: 100% !important;

}

#myTable_filter {

    max-width: 100% !important;

    text-align: left;

    margin-bottom: 10px;

}#myTable_filter input {

    width: 100%;

    max-width: 94%;

    min-height: 40px;

    border-radius: 6px;

}

#myTable_filter label {

    width: 100%;

    font-size: 13px;

    font-weight: 600 !important;

}

#myTable_filter input:focus {

    box-shadow: none !important;

    border-color: #5b6acf !important;

}

.filterbtn, .gridview, .usertable{

    font-family: "poppins";

}

.tableuserbox img {

    max-width: 45px;

    border-radius: 50%;

}

.tableuserbox{

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 20px;

}

#myTable_wrapper thead th {

    font-size: 14px;

    color: #606a80;

    padding-bottom: 25px;

}

#myTable_wrapper tbody td i {

    font-size: 18px;

    color: #2853e7;

    margin: 0px 5px;

}

.tablerow td:nth-child(2) {

    color: #000;

    font-size: 15px;

    font-weight: 500;

}

.tableusercnt p {

    font-size: 14px;

}

.tableusercnt h6 {

    color: #5b6acf;

    font-weight: 600;

    margin-bottom: 2px;

    font-size: 16px;

}

.tablerow td:nth-child(6) {

    font-size: 14px;

}

.tablerow td:nth-child(5) {

    font-size: 14px;

    font-weight: 600;

}

.tablerow td:nth-child(4) {

    font-size: 14px;

}

.administrator{

    color: #ff3458;

    background-color: #fee9ee;

}

.customer{

    color: #3fc4fe;

    background-color: #ecf9fe;

}

.subscriber{

    color: #ffc87a;

    background-color: #fdf5e8;

}

.tablerow td small {

    border-radius: 15px;

    padding: 6px 11px;

    font-weight: 500;

}

th, td {

    padding:20px 10px;

    transition: all .3s ease-in-out;

    cursor: pointer;

  }

  table.dataTable>tbody>tr.selected>* {

    box-shadow: inset 0 0 0 9999px #29aae3a3 !important;

}

table.dataTable>tbody>tr.selected>* i{

    color: #fff !important;

}

/* Login page  */

.formlogowrap {

    max-width: 130px;

}

.formhead h1 {

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 10px;

}

.formhead p {

    font-size: 16px;

    color: #838792;

}



.formhead img {

    margin-bottom: 30px;

}

.glogin i {

    color: #EB1E10;

    margin-right: 3px;

}



.flogin i {

    color: #246bee;

    margin-right: 3px;

}



.socialloginbtn {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

}



.socialloginbtn {

    color: #000;

    font-size: 17px;

    font-weight: 400;

    border-bottom: 1px solid #cccccc80;

    padding: 20px 0px;

}

.login_formwrap {

    max-width: 450px;

    margin: 0 auto;

    margin-top: 15%;

}



.sociallogin a:nth-child(2) {display: block;font-size: 13px;font-weight: 500;color: #96A3B7 !important;text-align: center;margin-top: 20px;}

.sociallogin a:nth-child(2):hover {

    color: #2C2A5D !important;

}

.emailbox, .passbox {

    position: relative;

}



.mailicon, .plock {

    position: absolute;

    top: 8px;

    left: 10px;

    font-size: 20px;

    color: #96A3B7;

    cursor: pointer;

}

.emailbox input, .passbox input {

    height: 45px;

    padding: 0px 10px 0px 40px;

    border-color: transparent;

    transition: all .3s ease-in-out;

    border-bottom: 1px solid #ccc;

    border-top: 1px solid transparent;

    border-right: 1px solid transparent;

    border-left: 1px solid transparent;

    border-radius: 0;

}

.emailbox input:focus,.passbox input:focus ,.emailbox input:hover, .passbox input:hover{

    box-shadow: none !important;

    border-color: #942080 !important;

    border-radius: 4px;

    border-width: 1px 1px;

}

.passbox i {

    position: absolute;

    top: 8px;

    right: 10px;

    outline: 0;

    border: 0;

    background: transparent;

    color: #96A3B7;

    font-size: 20px;

    width: 20px;

}

.passbox input {

    padding: 0px 35px 0px 40px;

}

.inputinfo {

    display: flex !important;

    justify-content: space-between;

}

.forgotlink a {

    font-size: 14px;

    font-weight: 500;

    color: #92207f !important;

}

.inputinfo label {

    font-size: 14px;

    font-weight: 500;

    color: #96A3B7;

    margin-left: 3px;

}

.inputinfo .form-check-input:checked {

    background-color: #4e2568;

    border-color: #90207f;

}

.inputinfo .form-check-input:focus {

    border-color: transparent;

    box-shadow: none;

}

.newacc a {

    color: #92207f !important;

    font-weight: 600;

}

.newacc {

    text-align: center;

    font-size: 13px;

    color: #96A3B7;

    margin-top: 30px;

    display: none;

}

.loginbtn {

    width: 100%;

    background: #942080 !important;

    border: transparent !important;

    padding: 13px 0px !important;

    border-radius: 8px !important;

    transition: all .3s ease-in-out;

}

.loginbtn:hover {

    background: #942080db !important;

    border: transparent !important;

    

}

.loginbtn:focus {

    box-shadow: 3px 4px 11px 0px #94208061 !important;

    border: transparent !important;

}

.sociallogin {

    margin: 40px 0px 30px 0px;

    display: none;



}

.formcontent {

    margin-top: 50px;

}

.glogin, .flogin {

    width: 180px;

    text-align: center;

    padding: 9px 0px;

    border-radius: 5px;

    transition: all .3s ease-in-out;

    box-shadow: 0px 0px 8px 0px #ccc;

}

.glogin:hover, .flogin:hover{

    box-shadow: 0px 0px 0px 0px #ccc;

}

.loginwrap {

    overflow: hidden;

}

.loginright img {

    height: 100vh;

    width: 100%;

    object-fit: cover;

    object-position: bottom;

}

.gicon, .fbicon {

    max-width: 18px !important;

    margin-right: 8px !important;

}

.loginright {

    position: relative !important;

    overflow: hidden;

}



.sliderwrap {

    position: absolute;

    bottom: 13%;

    text-align: center;

}



.sliderwrap .owlinner {

    color: #fff;

}



.owlinner h4 {

    font-size: 22px;

    color: #fff !important;

}



.owlinner p {

    font-size: 15px;

}

.sliderwrap .owl-dots {

    font-size: 20px;

    color: #fff;

    position: absolute;

    width: 15%;

    bottom: -50px;

}

.sliderwrap .owl-dots .owl-dot.active {

    transform: scale(1.4) !important;

    color: #fff !important;

}

.sliderwrap .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {

    background: #fff !important;

}



#chart1 {

    width: 128px;

}

.chartbox2 {

    justify-content: space-between;

    height: 140px !important;

    align-items: center;

}

.chartbox2 li {

    font-size: 12px;

    margin: 10px 0px;

    font-weight: 500;

}

.chartbox2 ul {

    padding: 0;

}

.usertable .btn-secondary:hover {

    background-color: #4654af !important;

    border-color: #4654af !important;

}

.usertable .btn-secondary {

    background-color: #5b6acf !important;

    border-color: #5b6acf !important;

    transition: all .3s ease-in-out;

}

.usertable .dt-button, a.dt-button, input.dt-button {

    border: 1px solid #5362c3 !important;

    background: transparent !important;

}

.usertable .dt-buttons {

    position: relative;

    float: left;

    margin-bottom: 20px;

}

/* table btn  */

.funcbtns {border: 1px solid #5b6acf;border-radius: 0px 0px 10px 10px;border-width: 0px 1px 1px 1px;display: flex;

    justify-content: center;}



.actionbtns {

    display: flex;

    flex-direction: column;

    text-align: center;

    max-width: 195px;

}

.edit-button {

    border: 1px solid #38b474;

    border-radius: 10px 10px 0px 0px;

    transition: all .3s ease-in-out;

    padding: 2px 0px

}

.edit-button:hover{

    background-color: #38b474;

}

.edit-button small{

    color: #38b474 !important;

}

.edit-button:hover small{

    color: #fff !important;

}

.call-button {

    border-right: 1px solid #5b6acf;

    border-radius: 0px 0px 0px 10px;

    transition: all .3s ease-in-out;

}

.call-button:hover i {

    color: #fff !important;

}

.call-button:hover {

    background: #5b6acf;

}



.chat-button {border-right: 1px solid #5b6acf;

    transition: all .3s ease-in-out;}

.chat-button:hover{

    background-color: #38b474 !important;

    border-color: #38b474;

}

.chat-button:hover i{

    color: #fff !important;

}

.email-button {

    transition: all .3s ease-in-out;

    border-right: 1px solid #5b6acf;

}

.email-button:hover{

    background-color: #38b474 !important;

    border-color: #38b474;

}

.email-button:hover i{

    color: #fff !important;

}

.funcbtns a {

    padding: 3px 10px;

}

.track-button:hover i {

    color: #fff !important;

}

.track-button:hover {

    background: #dc3545;

}

.track-button {

    transition: all .3s ease-in-out;

    border-radius: 0px 0px 8px 0px;

}
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:nth-child(n+3), .btn-group>:not(.btn-check)+.btn {
  background: #5b6acf !important;
}