/* ============
TABLES OF CSS
---------------

01. General
02. Bootstrap-custom
03. Helper
04. Waves Effect
05. Menu
06. Buttons
07. Cards
08. Email
09. Summernote
10. Alerts
11. Demo Only
12. Pagination
13. Progress
14. Popover - Tooltips
15. Sweet Alerts
16. Tabs
17. Form-elements
18. Form-validation
19. Form-advanced
20. Form-editors
21. Form-upload
22. Calendar
23. Tables
24. Maps
25. Range-slider
26. Session-timeout
27. Charts
28. Widgets
29. TImeline
30. Directory
31. Extra Pages
32. gallery
33. Invoice
34. Account Pages
35. Responsive
36. custom-design
37. dashboard
38. preloader
39. according
40. forms


*/
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500|Sarabun:400,600,700");
/*=================== fonts ====================*/
@import url("https://fonts.googleapis.com/css?family=Karla:400,400i,700");
/*font Variables*/
.ic-main-color {
  color: #28aaa9; }

/* ======
01. General
   ====== */
/* ==============
  General
===================*/
body {
  background-repeat: repeat;
  background: #f8f8fa;
  font-family: "Roboto", sans-serif;
  background: #f9fbfd;
  font-size: 16px; }

html {
  overflow-x: hidden;
  position: relative;
  min-height: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: "Sarabun", sans-serif;
  font-weight: 600; }

p {
  line-height: 1.7; }

svg {
  max-width: 100%; }

a {
  color: #6c757d; }
  a:hover {
    outline: 0;
    text-decoration: none;
    color: #28aaa9; }
  a:active {
    outline: 0;
    text-decoration: none;
    color: #28aaa9; }
  a:focus {
    outline: 0;
    text-decoration: none; }

b,
strong {
  font-weight: 500; }

.container-alt {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px; }

#wrapper {
  height: 100%;
  overflow: hidden;
  width: 100%; }

.slimScrollDiv {
  height: auto !important; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #28aaa9; }

/* Social */
.social-links li a {
  border-radius: 50%;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center; }

.list {
  list-style: none;
  margin: 0px;
  padding: 0px; }

a {
  text-decoration: none;
  transition: all 0.3s ease-in-out; }
  a:hover, a:focus {
    text-decoration: none;
    outline: none; }

.row.m0 {
  margin: 0px; }

i:before {
  margin-left: 0px !important; }

button:focus {
  outline: none;
  box-shadow: none; }

.m0 {
  margin: 0px; }

.p0 {
  padding-left: 0px;
  padding-right: 0px; }

.p_100 {
  padding-top: 100px;
  padding-bottom: 100px; }

.pad_top {
  padding-top: 100px; }

.pad_btm {
  padding-bottom: 100px; }

.bg_gray {
  background: #f4f0ef; }

.body_color {
  background: #eeeff1; }

@media (min-width: 1200px) {
  .container {
    max-width: 1200px; } }

/* ======
02. Bootstrap-custom
   ====== */
/* ==============
  Bootstrap-custom
===================*/
.dropdown-menu {
  padding: 4px 0;
  font-size: 16px;
  box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
  background-color: #ffffff;
  border-color: #e9ecef;
  animation: fade 400ms ease forwards; }

.dropdown-item {
  background-color: #ffffff;
  padding: .55rem 1.5rem; }
  .dropdown-item:active, .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #2a3142; }

.dropdown-item.active,
.dropdown-item:active {
  background-color: #f8f9fa;
  color: #2a3142; }

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #9ca8b3;
  content: "\f105" !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

.blockquote {
  padding: 10px 20px;
  margin-bottom: 20px;
  border-left: 4px solid #e9ecef; }

.blockquote-reverse {
  border-left: 0;
  border-right: 4px solid #e9ecef;
  text-align: right; }

.bg-primary {
  background-color: #28aaa9 !important; }

.bg-success {
  background-color: #42ca7f !important; }

.bg-info {
  background-color: #38a4f8 !important; }

.bg-warning {
  background-color: #f8b425 !important; }

.bg-danger {
  background-color: #ec4561 !important; }

.bg-muted {
  background-color: #9ca8b3 !important; }

.bg-white {
  background-color: #ffffff !important; }

.text-white {
  color: #ffffff !important; }

.text-danger {
  color: #ec4561 !important; }

.text-muted {
  color: #9ca8b3 !important; }

.text-primary {
  color: #28aaa9 !important; }

.text-warning {
  color: #f8b425 !important; }

.text-success {
  color: #42ca7f !important; }

.text-info {
  color: #38a4f8 !important; }

.text-dark {
  color: #2a3142 !important; }

.badge {
  font-weight: 500; }

.badge-primary {
  background-color: #28aaa9; }

.badge-success {
  background-color: #42ca7f; }

.badge-info {
  background-color: #38a4f8; }

.badge-warning {
  background-color: #f8b425;
  color: #ffffff; }

.badge-danger {
  background-color: #ec4561; }

.badge-dark {
  background-color: #2a3142; }

dt {
  font-weight: 500; }

.spinner-border,
.spinner-grow {
  margin-right: 10px;
  margin-top: 10px; }

.custom-control-input:checked ~ .custom-control-label:before {
  border-color: #28aaa9;
  background-color: #28aaa9; }

/* ======
03. Helper
   ====== */
/* ==============
  Helper Classes
===================*/
.p-0 {
  padding: 0; }

.p-t-10 {
  padding-top: 10px; }

.p-b-10 {
  padding-bottom: 10px; }

.m-0 {
  margin: 0; }

.m-r-5 {
  margin-right: 5px; }

.m-r-10 {
  margin-right: 10px; }

.m-r-15 {
  margin-right: 15px; }

.m-l-10 {
  margin-left: 10px; }

.m-l-15 {
  margin-left: 15px; }

.m-t-5 {
  margin-top: 5px; }

.m-t-10 {
  margin-top: 10px; }

.m-t-15 {
  margin-top: 15px; }

.m-t-20 {
  margin-top: 20px; }

.m-t-30 {
  margin-top: 30px; }

.m-t-40 {
  margin-top: 40px; }

.m-t-48 {
  margin-top: 48px; }

.m-b-5 {
  margin-bottom: 5px; }

.m-b-10 {
  margin-bottom: 10px; }

.m-b-15 {
  margin-bottom: 15px; }

.m-b-20 {
  margin-bottom: 20px; }

.m-b-30 {
  margin-bottom: 30px; }

.m-b-48 {
  margin-bottom: 48px; }

.w-30 {
  max-width: 30px; }

.w-xs {
  min-width: 80px; }

.w-sm {
  min-width: 95px; }

.w-md {
  min-width: 110px; }

.w-lg {
  min-width: 140px; }

.l-h-23 {
  line-height: 23px; }

.l-h-34 {
  line-height: 34px; }

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

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

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

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

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

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

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

.thumb-sm {
  height: 32px;
  width: 32px; }

.thumb-md {
  height: 48px;
  width: 48px; }

.thumb-lg {
  height: 88px;
  width: 88px; }

.font-500 {
  font-weight: 500; }

.font-600 {
  font-weight: 600; }

.header-title {
  font-size: 20px;
  padding-bottom: 20px;
  margin: 0; }

.ic-expance-heading {
  font-size: 20px;
  line-height: 20px;
  margin: 0; }
  @media screen and (min-width: 1200px) and (max-width: 1440px) {
    .ic-expance-heading {
      font-size: 16px; } }

.ic-earning-heading {
  font-size: 28px;
  line-height: 30px;
  color: #28aaa9;
  margin: 0; }
  @media screen and (min-width: 1200px) and (max-width: 1440px) {
    .ic-earning-heading {
      font-size: 20px; } }

/* ======
04. Waves Effect
   ====== */
/* ==============
  Waves Effect
===================*/
/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves
 *
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translate(0, 0);
  -moz-transform: scale(0) translate(0, 0);
  -ms-transform: scale(0) translate(0, 0);
  -o-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none; }

.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%); }

.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2); }

.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4); }

.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }

.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1; }

.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em; }

.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em; }

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom; }

.waves-input-wrapper.waves-button {
  padding: 0; }

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1; }

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%; }

.waves-float {
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms; }

.waves-float:active {
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3); }

.waves-block {
  display: block; }

/* ======
05. Menu
   ====== */
/* Metis Menu css */
.ic-layout2-body .ic-logo-height {
  margin-left: 0; }

.ic-logo-height {
  margin-left: 12px;
  max-width: 120px; }

@media (max-width: 767px) {
  .ic-logo-small {
    margin-left: 8px;
    width: 100%; } }

.metismenu {
  padding: 0;
  background-color: #fff; }
  .metismenu ul {
    padding: 0; }
    .metismenu ul li {
      list-style: none; }

.submenu li a {
  padding: 8px 20px 8px 10px;
  color: #555582;
  display: block;
  transition: all 0.5s; }
  .submenu li a:focus {
    background-color: #f5f2ff; }
  .submenu li a:hover {
    background-color: #f5f2ff;
    color: #28aaa9; }

.submenu > li > a {
  padding-left: 50px; }
  .submenu > li > a:hover {
    padding-left: 60px; }

.submenu li.mm-active > a {
  color: #28aaa9; }

.topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999; }
  .topbar .topbar-left {
    background: #fff;
    float: left;
    text-align: left;
    height: 70px;
    position: relative;
    width: 240px;
    z-index: 1;
    transition: .3s; }
    .topbar .topbar-left .logo {
      line-height: 70px; }
      .topbar .topbar-left .logo i {
        display: none; }

.navbar-custom {
  background-color: #fff;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0 24px 0 0;
  margin-left: 240px;
  height: 70px;
  -webkit-box-shadow: 0px 5px 13px -8px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 13px -8px rgba(0, 0, 0, 0.05); }
  .navbar-custom .nav-link {
    padding: 0 4px; }
  .navbar-custom .navbar-right .dropdown-toggle:after {
    content: initial; }
  .navbar-custom .ic-left-content {
    padding-left: 24px; }

.logo {
  color: #2a3142 !important;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px; }
  .logo span span {
    color: #28aaa9; }

.side-menu {
  width: 240px;
  z-index: 10;
  background: #fff;
  bottom: 0;
  margin-top: 0;
  padding-bottom: 30px;
  position: fixed;
  top: 70px;
  transition: .3s;
  -webkit-box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.05); }
  .side-menu .waves-effect .waves-ripple {
    background-color: rgba(255, 255, 255, 0.4); }

.enlarged .side-menu {
  position: absolute; }

.content-page {
  margin-left: 240px;
  overflow: hidden; }
  .content-page .content {
    padding: 0 15px 10px 15px;
    margin-top: 70px;
    margin-bottom: 60px; }

.button-menu-mobile {
  border: none;
  color: #525f80;
  display: inline-block;
  height: 69px;
  width: 60px;
  background-color: #fff;
  font-size: 24px;
  padding: 0 10px; }
  .button-menu-mobile .ic-medi-menu {
    margin: 0 auto; }
    .button-menu-mobile .ic-medi-menu .ic-bar {
      width: 30px;
      height: 3px;
      border-radius: 5px;
      background-color: #2b2d5d; }
      .button-menu-mobile .ic-medi-menu .ic-bar:nth-child(2) {
        width: 20px;
        transition: .3s; }
      .button-menu-mobile .ic-medi-menu .ic-bar:not(:last-child) {
        margin-bottom: 8px; }
    .button-menu-mobile .ic-medi-menu:hover .ic-bar:nth-child(2) {
      width: 30px; }

#sidebar-menu > ul > li > a {
  color: #555582;
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  position: relative;
  transition: all 0.5s;
  font-family: "Sarabun", sans-serif;
  position: relative;
  z-index: 1; }
  #sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a:active {
    color: #28aaa9;
    text-decoration: none; }

#sidebar-menu > ul > li > a > span {
  vertical-align: middle;
  margin-left: 7px; }
  #sidebar-menu > ul > li > a > span svg {
    width: 16px;
    transition: .3s; }

#sidebar-menu {
  padding-top: 10px; }
  #sidebar-menu .badge {
    margin-top: 7px; }
  #sidebar-menu li.mm-active .menu-arrow .iq-arrow-right {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: .3s; }
  #sidebar-menu li.mm-active > a {
    background-color: #28aaa9;
    color: #fff; }
    #sidebar-menu li.mm-active > a:hover {
      color: #fff; }
  #sidebar-menu li.mm-active .mm-show li.mm-active a {
    color: #28aaa9;
    background-color: transparent; }
  #sidebar-menu ul li a i {
    vertical-align: middle;
    font-size: 20.7px;
    width: 25px;
    display: inline-block; }

.menu-title {
  padding: 12px 20px !important;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: #7b7ba9; }

.enlarged .slimScrollDiv {
  overflow: inherit !important; }
.enlarged .slimScrollBar {
  visibility: hidden; }

.ic-larged-deviced {
  display: none; }
  @media (max-width: 767px) {
    .ic-larged-deviced {
      display: block; }
      .ic-larged-deviced .button-menu-mobile .ic-humbarger-bar {
        display: none; } }

.enlarged #wrapper .navbar-custom {
  margin-left: 70px; }
  .enlarged #wrapper .navbar-custom .ic-arrow-right {
    display: block;
    color: #2b2d5d; }
  .enlarged #wrapper .navbar-custom .ic-larged-deviced {
    display: block; }
    .enlarged #wrapper .navbar-custom .ic-larged-deviced .button-menu-mobile .ic-mobile-arrow {
      display: block; }
      @media (max-width: 767px) {
        .enlarged #wrapper .navbar-custom .ic-larged-deviced .button-menu-mobile .ic-mobile-arrow {
          display: none; } }
    .enlarged #wrapper .navbar-custom .ic-larged-deviced .button-menu-mobile .ic-humbarger-bar {
      display: none; }
      @media (max-width: 767px) {
        .enlarged #wrapper .navbar-custom .ic-larged-deviced .button-menu-mobile .ic-humbarger-bar {
          display: block; } }
.enlarged #wrapper .ic-collapsed-btn {
  display: none; }
.enlarged #wrapper #sidebar-menu .menu-title,
.enlarged #wrapper #sidebar-menu .menu-arrow,
.enlarged #wrapper #sidebar-menu .badge {
  display: none !important; }
.enlarged #wrapper #sidebar-menu .mm-collapse.mm-show {
  display: none; }
.enlarged #wrapper #sidebar-menu .nav.mm-collapse {
  height: inherit !important; }
.enlarged #wrapper #sidebar-menu ul ul {
  padding-bottom: 5px;
  padding-top: 5px;
  z-index: 9999;
  background-color: #fff; }
.enlarged #wrapper .left.side-menu {
  width: 70px;
  z-index: 5; }
  .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a {
    padding: 15px 20px;
    min-height: 56px; }
    .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:hover, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:active, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:focus {
      color: #ffffff !important;
      background-color: #f9f9f9; }
    .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a i {
      font-size: 18px;
      margin-left: 5px;
      margin-right: 20px !important; }
  .enlarged #wrapper .left.side-menu #sidebar-menu ul > li {
    position: relative;
    white-space: nowrap; }
    .enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > a {
      position: relative;
      width: 260px;
      color: #28aaa9 !important;
      background-color: #f9f9f9; }
    .enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > ul {
      display: block;
      left: 70px;
      position: absolute;
      width: 190px;
      height: auto !important; }
      .enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > ul a {
        box-shadow: none;
        padding: 8px 20px;
        position: relative;
        width: 190px;
        z-index: 6; }
        .enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > ul a:hover {
          color: #ffffff; }
    .enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover a span {
      display: inline; }
  .enlarged #wrapper .left.side-menu #sidebar-menu ul ul li:hover > ul {
    display: block;
    left: 190px;
    margin-top: -36px;
    position: absolute;
    width: 190px; }
  .enlarged #wrapper .left.side-menu #sidebar-menu ul ul li > a span.float-right {
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    position: absolute;
    right: 20px;
    top: 12px;
    transform: rotate(270deg); }
  .enlarged #wrapper .left.side-menu #sidebar-menu ul ul li.mm-active a {
    color: #ffffff; }
  .enlarged #wrapper .left.side-menu #sidebar-menu ul > li > a span {
    display: none;
    padding-left: 10px; }
  .enlarged #wrapper .left.side-menu .user-details {
    display: none; }
.enlarged #wrapper .content-page {
  margin-left: 70px; }
.enlarged #wrapper .footer {
  left: 70px; }
.enlarged #wrapper .topbar .topbar-left {
  width: 70px !important; }
  .enlarged #wrapper .topbar .topbar-left .logo span {
    display: none;
    opacity: 0; }
  .enlarged #wrapper .topbar .topbar-left .logo i {
    display: block;
    line-height: 70px;
    color: #28aaa9 !important; }
  .enlarged #wrapper .topbar .topbar-left .ic-logo-small {
    width: 60px; }
    @media (max-width: 767px) {
      .enlarged #wrapper .topbar .topbar-left .ic-logo-small {
        margin-left: 8px;
        width: 100%; } }
    @media (max-width: 575px) {
      .enlarged #wrapper .topbar .topbar-left .ic-logo-small {
        margin-left: 8px;
        width: 100%; } }
.enlarged #wrapper #sidebar-menu > ul > li:hover > a.open :after {
  display: none; }
.enlarged #wrapper #sidebar-menu > ul > li:hover > a.mm-active :after {
  display: none; }

/* Footer */
.footer {
  bottom: 0;
  text-align: center !important;
  padding: 19px 30px 20px;
  position: absolute;
  background-color: #e9e9ef;
  right: 0;
  left: 240px;
  font-family: "Sarabun", sans-serif;
  color: #2b2d5d; }

/* Notification */
.notification-item-list {
  max-height: 230px; }

.notification-list.list-inline-item:not(:last-child) {
  margin-right: 0; }
.notification-list .noti-icon {
  font-size: 24px;
  vertical-align: middle;
  color: #525f80; }
.notification-list .noti-icon-badge {
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 8px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background-color: #ec4561;
  color: #fff;
  padding: 0; }
.notification-list .notify-item {
  padding: 10px 20px; }
  .notification-list .notify-item .notify-icon {
    float: left;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%; }
    .notification-list .notify-item .notify-icon.success {
      background-color: rgba(68, 202, 128, 0.192); }
      .notification-list .notify-item .notify-icon.success i {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        line-height: 32px;
        margin-top: 2px;
        color: #42CA7F; }
    .notification-list .notify-item .notify-icon.warning {
      background-color: rgba(248, 181, 37, 0.192); }
      .notification-list .notify-item .notify-icon.warning i {
        color: #F8B425; }
    .notification-list .notify-item .notify-icon.info {
      background-color: rgba(56, 165, 248, 0.192); }
      .notification-list .notify-item .notify-icon.info i {
        color: #38A4F8; }
    .notification-list .notify-item .notify-icon.primary {
      background-color: rgba(40, 170, 170, 0.192);
      color: #28aaa9; }
    .notification-list .notify-item .notify-icon.danger {
      background-color: rgba(236, 69, 97, 0.192);
      color: #ec4561; }
  .notification-list .notify-item .notify-details {
    margin-bottom: 0;
    overflow: hidden;
    margin-left: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-family: "Sarabun", sans-serif; }
    .notification-list .notify-item .notify-details span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      font-size: 12px;
      font-weight: normal;
      font-family: "Roboto", sans-serif; }
.notification-list .language-switch a img {
  float: right; }
.notification-list .profile-dropdown .notify-item {
  padding: 4px 20px; }
.notification-list .nav-link {
  padding: 0 15px;
  line-height: 70px;
  color: #525f80;
  display: block; }
  @media (max-width: 1366px) {
    .notification-list .nav-link {
      padding: 0 10px; } }
  .notification-list .nav-link.nav-user {
    border-right: 1px solid #e9e9ef;
    border-left: 1px solid #e9e9ef; }
  .notification-list .nav-link svg {
    -webkit-animation: tada 1.5s ease infinite;
    animation: tada 1.5s ease infinite; }
  .notification-list .nav-link .fa-chevron-down {
    font-size: 10px; }
.notification-list.show .nav-link {
  background-color: rgba(42, 49, 66, 0.05); }

.notification {
  position: relative; }
  .notification svg {
    width: 18px;
    height: 24px; }
  .notification--bell {
    animation: bell 2.2s linear infinite;
    transform-origin: 50% 0%; }
  .notification--bellClapper {
    animation: bellClapper 2.2s 0.1s linear infinite; }

@keyframes bell {
  0%,
    25%,
    75%,
    100% {
    transform: rotate(0deg); }
  40% {
    transform: rotate(10deg); }
  45% {
    transform: rotate(-10deg); }
  55% {
    transform: rotate(8deg); }
  60% {
    transform: rotate(-8deg); } }
@keyframes bellClapper {
  0%,
    25%,
    75%,
    100% {
    transform: translateX(0); }
  40% {
    transform: translateX(-0.15em); }
  45% {
    transform: translateX(0.15em); }
  55% {
    transform: translateX(-0.1em); }
  60% {
    transform: translateX(0.1em); } }
@keyframes notification {
  0%,
    25%,
    75%,
    100% {
    opacity: 1; }
  30%,
    70% {
    opacity: 0; } }
.profile-dropdown {
  width: 170px; }
  .profile-dropdown i {
    font-size: 17px;
    vertical-align: middle;
    margin-right: 5px;
    color: #6c757d; }
  .profile-dropdown span {
    margin-top: 3px; }

.nav-user img {
  height: 36px;
  width: 36px;
  padding: 2px;
  border: 1px solid #9c9797; }

.arrow-none:after {
  border: none;
  margin: 0;
  display: none; }

.dropdown-menu-lg {
  width: 300px; }

.nav-user img {
  margin-top: -3px; }

.page-title-box {
  padding: 15px 0px; }
  .page-title-box .page-title {
    font-size: 24px;
    margin: 0;
    line-height: 30px;
    font-weight: 700;
    color: #28aaa9; }
  .page-title-box .page-sub-title {
    font-size: 20px;
    margin: 0;
    line-height: 30px;
    font-weight: 700;
    color: #2b2d5d; }
  .page-title-box .breadcrumb {
    padding: 4px 0;
    background-color: transparent;
    margin-bottom: 0; }
    .page-title-box .breadcrumb a {
      color: #2a3142; }
      .page-title-box .breadcrumb a:hover {
        color: rgba(42, 49, 66, 0.9); }
    .page-title-box .breadcrumb .active {
      color: rgba(42, 49, 66, 0.7); }

@media (max-width: 767px) {
  .mobile-device-arrow {
    display: none; } }

/* ======
06. Buttons
   ====== */
/* ==============
  Buttons
===================*/
.badge {
  padding: 8px 10px; }

.dataTables_wrapper .dt-buttons span i {
  margin-right: 8px; }
.dataTables_wrapper .dt-buttons .dt-button {
  box-shadow: none; }
  .dataTables_wrapper .dt-buttons .dt-button.buttons-csv {
    background-color: #42ca7f; }
    .dataTables_wrapper .dt-buttons .dt-button.buttons-csv:hover {
      box-shadow: none;
      background-color: #42ca7f; }
  .dataTables_wrapper .dt-buttons .dt-button.buttons-excel {
    background-color: #236C45; }
  .dataTables_wrapper .dt-buttons .dt-button.buttons-pdf {
    background-color: #AD0B00; }
  .dataTables_wrapper .dt-buttons .dt-button.buttons-print {
    background-color: #f8b425; }
  .dataTables_wrapper .dt-buttons .dt-button.buttons-reload {
    background-color: #9ca8b3; }

.btn-pdf {
  background-color: #AD0B00;
  color: #fff; }

.btn-excel {
  background-color: #236C45;
  color: #fff; }

.btn.focus,
.btn:focus {
  outline: 0;
  box-shadow: none; }

.btn {
  border-radius: 3px;
  font-size: 16px; }
  .btn span {
    padding-left: 6px; }

button:focus {
  box-shadow: none;
  outline: 0; }

.btn-sm {
  font-size: 13.3333333333px; }

.btn-lg {
  font-size: 19.2px; }

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-pink,
.btn-purple,
.btn-indigo,
.btn-teal,
.btn-lime,
.btn-orange,
.btn-brown,
.btn-blue-grey {
  color: #ffffff; }

.btn-primary {
  background-color: #28aaa9;
  border: 1px solid #28aaa9; }

.btn-muted {
  background-color: #F4F5FA;
  border: 1px solid #F4F5FA; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary,
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-primary:hover,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn-outline-primary:not([disabled]):not(.disabled).active,
.btn-outline-primary:not([disabled]):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: #239594;
  border: 1px solid #239594; }

.btn-primary.focus,
.btn-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(40, 170, 169, 0.3);
  box-shadow: 0 0 0 2px rgba(40, 170, 169, 0.3); }

.btn-secondary.focus,
.btn-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: none; }

.btn-secondary {
  background-color: #2b2d5d;
  border: 1px solid #2b2d5d; }
  .btn-secondary:hover {
    background: #6063a5;
    border: 1px solid #6063a5; }

.btn-secondary2 {
  background-color: #6063a5;
  border: 1px solid #6063a5;
  color: #fff; }
  .btn-secondary2:hover {
    background: #2b2d5d;
    border: 1px solid #2b2d5d;
    color: #fff; }

.btn-success {
  background-color: #42ca7f;
  border: 1px solid #42ca7f; }

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.focus,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.open > .dropdown-toggle.btn-success,
.btn-outline-success.active,
.btn-outline-success:active,
.show > .btn-outline-success.dropdown-toggle,
.btn-outline-success:hover,
.btn-success.active,
.btn-success:active,
.show > .btn-success.dropdown-toggle,
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-success.dropdown-toggle:focus,
.btn-outline-success:not([disabled]):not(.disabled).active,
.btn-outline-success:not([disabled]):not(.disabled):active,
.show > .btn-outline-success.dropdown-toggle {
  background-color: #35bd72;
  border: 1px solid #35bd72; }

.btn-success.focus,
.btn-success:focus,
.btn-outline-success.focus,
.btn-outline-success:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-success.dropdown-toggle:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(66, 202, 127, 0.3);
  box-shadow: 0 0 0 2px rgba(66, 202, 127, 0.3); }

.btn-info {
  background-color: #38a4f8;
  border: 1px solid #38a4f8; }

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open > .dropdown-toggle.btn-info,
.btn-outline-info.active,
.btn-outline-info:active,
.show > .btn-outline-info.dropdown-toggle,
.btn-outline-info:hover,
.btn-info.active,
.btn-info:active,
.show > .btn-info.dropdown-toggle,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle,
.btn-outline-info:not([disabled]):not(.disabled).active,
.btn-outline-info:not([disabled]):not(.disabled):active,
.show > .btn-outline-info.dropdown-toggle {
  background-color: #1f99f7;
  border: 1px solid #1f99f7; }

.btn-info.focus,
.btn-info:focus,
.btn-outline-info.focus,
.btn-outline-info:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-info.dropdown-toggle:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(56, 164, 248, 0.3);
  box-shadow: 0 0 0 2px rgba(56, 164, 248, 0.3); }

.btn-warning {
  background-color: #f8b425;
  border: 1px solid #f8b425; }

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.focus,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.open > .dropdown-toggle.btn-warning,
.btn-outline-warning.active,
.btn-outline-warning:active,
.show > .btn-outline-warning.dropdown-toggle,
.btn-outline-warning:hover,
.btn-warning.active,
.btn-warning:active,
.show > .btn-warning.dropdown-toggle,
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle,
.btn-outline-warning:not([disabled]):not(.disabled).active,
.btn-outline-warning:not([disabled]):not(.disabled):active,
.show > .btn-outline-warning.dropdown-toggle {
  background-color: #f7ac0c;
  border: 1px solid #f7ac0c;
  color: #ffffff; }

.btn-warning.focus,
.btn-warning:focus,
.btn-outline-warning.focus,
.btn-outline-warning:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.show > .btn-warning.dropdown-toggle:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(248, 180, 37, 0.3);
  box-shadow: 0 0 0 2px rgba(248, 180, 37, 0.3); }

.btn-danger {
  background-color: #ec4561;
  border: 1px solid #ec4561; }

.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.btn-danger.active,
.btn-danger.focus,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.open > .dropdown-toggle.btn-danger,
.btn-outline-danger.active,
.btn-outline-danger:active,
.show > .btn-outline-danger.dropdown-toggle,
.btn-outline-danger:hover,
.btn-danger.active,
.btn-danger:active,
.show > .btn-danger.dropdown-toggle,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle,
.btn-outline-danger:not([disabled]):not(.disabled).active,
.btn-outline-danger:not([disabled]):not(.disabled):active,
.show > .btn-outline-danger.dropdown-toggle {
  background-color: #ea2e4d;
  border: 1px solid #ea2e4d; }

.btn-danger.focus,
.btn-danger:focus,
.btn-outline-danger.focus,
.btn-outline-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-danger.dropdown-toggle:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(236, 69, 97, 0.3);
  box-shadow: 0 0 0 2px rgba(236, 69, 97, 0.3); }

.btn-dark {
  background-color: #2a3142;
  border: 1px solid #2a3142;
  color: #ffffff; }

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.btn-dark.focus,
.btn-dark:active,
.btn-dark:focus,
.btn-dark:hover,
.open > .dropdown-toggle.btn-dark,
.btn-outline-dark.active,
.btn-outline-dark:active,
.show > .btn-outline-dark.dropdown-toggle,
.btn-outline-dark:hover,
.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active,
.show > .btn-dark.dropdown-toggle,
.btn-outline-dark:not([disabled]):not(.disabled).active,
.btn-outline-dark:not([disabled]):not(.disabled):active,
.show > .btn-outline-dark.dropdown-toggle {
  background-color: #202532;
  border: 1px solid #202532;
  color: #ffffff; }

.btn-dark.focus,
.btn-dark:focus,
.btn-outline-dark.focus,
.btn-outline-dark:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus,
.show > .btn-dark.dropdown-toggle:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(42, 49, 66, 0.3);
  box-shadow: 0 0 0 2px rgba(42, 49, 66, 0.3); }

.btn-link {
  color: #2a3142; }
  .btn-link:hover {
    color: #28aaa9; }

/* button Outline */
.btn-outline-primary {
  color: #28aaa9;
  border-color: #28aaa9; }

.btn-outline-success {
  color: #42ca7f;
  border-color: #42ca7f; }

.btn-outline-info {
  color: #38a4f8;
  border-color: #38a4f8; }

.btn-outline-warning {
  color: #f8b425;
  border-color: #f8b425; }

.btn-outline-danger {
  color: #ec4561;
  border-color: #ec4561; }

.btn-outline-dark {
  color: #2a3142;
  background-image: none;
  background-color: transparent;
  border-color: #2a3142; }

/* ======
07. Cards
   ====== */
/* ==============
  Card
===================*/
.card {
  border: none;
  box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
  margin-bottom: 24px; }
  .card .card-body {
    padding: 24px; }

.ic-card-height-same {
  height: calc(100% - 24px); }

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px; } }
.card-columns .card {
  margin-bottom: 24px; }

.ic-card-head {
  padding: 30px;
  background: #FFFFFF;
  box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px; }
  @media (max-width: 1366px) {
    .ic-card-head {
      padding: 20px; } }
  @media (max-width: 1199px) {
    .ic-card-head {
      margin-bottom: 24px; } }
  .ic-card-head .ic-card-icon {
    font-size: 35px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
    transition: .4s;
    color: #fff;
    background: #28aaa9;
    display: inline-block; }
    @media (max-width: 1500px) {
      .ic-card-head .ic-card-icon {
        font-size: 25px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        line-height: 70px; } }
  @media (max-width: 1500px) {
    .ic-card-head h3 {
      font-size: 24px; } }
  @media (max-width: 1366px) {
    .ic-card-head h3 {
      font-size: 18px; } }
  @media (max-width: 575px) {
    .ic-card-head h3 {
      margin-bottom: 2px; } }
  .ic-card-head p {
    color: #adb5bd;
    margin-bottom: 0; }
    @media (max-width: 1500px) {
      .ic-card-head p {
        font-size: 12px; } }
  .ic-card-head .big-icon {
    font-size: 100px;
    color: rgba(36, 105, 92, 0.03);
    position: absolute;
    left: -12px;
    top: -12px; }
  .ic-card-head a {
    color: #28aaa9;
    font-weight: 600; }
  .ic-card-head.secondary .ic-card-icon {
    background: #2b2d5d; }
  .ic-card-head.secondary a {
    color: #2b2d5d; }
  .ic-card-head.warning .ic-card-icon {
    background: #f8b425; }
  .ic-card-head.warning a {
    color: #f8b425; }
  .ic-card-head.danger .ic-card-icon {
    background: #ec4561; }
  .ic-card-head.danger a {
    color: #ec4561; }
  .ic-card-head.success .ic-card-icon {
    background: #42ca7f; }
  .ic-card-head.success a {
    color: #42ca7f; }
  .ic-card-head.info .ic-card-icon {
    background: #38a4f8; }
  .ic-card-head.info a {
    color: #38a4f8; }

/* ======
08. Email
   ====== */
/* ==============
  Email
===================*/
.email-leftbar {
  width: 230px;
  float: left;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px; }

.email-rightbar {
  margin-left: 260px; }

.chat-user-box p.user-title {
  font-size: 16px;
  color: #2a3142;
  font-weight: 500; }
.chat-user-box p {
  font-size: 12px; }

@media (max-width: 767px) {
  .email-leftbar {
    float: none;
    width: 100%; }

  .email-rightbar {
    margin: 0; } }
.mail-list a {
  display: block;
  color: #343d52;
  font-size: 16px;
  line-height: 24px;
  padding: 5px; }
.mail-list a.active {
  color: #ec4561;
  font-weight: 500; }

.message-list {
  display: block;
  padding-left: 0; }
  .message-list li {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    cursor: default;
    transition-duration: .3s; }
    .message-list li a {
      color: #6c757d; }
    .message-list li:hover {
      background: rgba(108, 117, 125, 0.08);
      transition-duration: .05s; }
    .message-list li .col-mail {
      float: left;
      position: relative; }
    .message-list li .col-mail-1 {
      width: 320px; }
      .message-list li .col-mail-1 .star-toggle,
      .message-list li .col-mail-1 .checkbox-wrapper-mail,
      .message-list li .col-mail-1 .dot {
        display: block;
        float: left; }
      .message-list li .col-mail-1 .dot {
        border: 4px solid transparent;
        border-radius: 100px;
        margin: 22px 26px 0;
        height: 0;
        width: 0;
        line-height: 0;
        font-size: 0; }
      .message-list li .col-mail-1 .checkbox-wrapper-mail {
        margin: 15px 10px 0 20px; }
      .message-list li .col-mail-1 .star-toggle {
        margin-top: 18px;
        font-size: 16px;
        margin-left: 5px; }
      .message-list li .col-mail-1 .title {
        position: absolute;
        top: 0;
        left: 110px;
        right: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 0; }
    .message-list li .col-mail-2 {
      position: absolute;
      top: 0;
      left: 320px;
      right: 0;
      bottom: 0; }
      .message-list li .col-mail-2 .subject,
      .message-list li .col-mail-2 .date {
        position: absolute;
        top: 0; }
      .message-list li .col-mail-2 .subject {
        left: 0;
        right: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; }
      .message-list li .col-mail-2 .date {
        right: 0;
        width: 170px;
        padding-left: 80px; }
  .message-list li.active,
  .message-list li.active:hover {
    box-shadow: inset 3px 0 0 #28aaa9; }
  .message-list li.unread {
    background-color: #f7f7f7;
    font-weight: 500;
    color: #202532; }
    .message-list li.unread a {
      color: #202532;
      font-weight: 500; }
  .message-list .checkbox-wrapper-mail {
    cursor: pointer;
    height: 20px;
    width: 20px;
    position: relative;
    display: inline-block;
    box-shadow: inset 0 0 0 1px #dee2e6;
    border-radius: 1px; }
    .message-list .checkbox-wrapper-mail input {
      opacity: 0;
      cursor: pointer; }
    .message-list .checkbox-wrapper-mail input:checked ~ label {
      opacity: 1; }
    .message-list .checkbox-wrapper-mail label {
      position: absolute;
      height: 20px;
      width: 20px;
      left: 0;
      cursor: pointer;
      opacity: 0;
      margin-bottom: 0;
      transition-duration: .05s;
      top: 0; }
      .message-list .checkbox-wrapper-mail label:before {
        content: "\F12C";
        font-family: "Material Design Icons";
        top: 0;
        height: 20px;
        color: #202532;
        width: 20px;
        position: absolute;
        margin-top: -16px;
        left: 4px;
        font-size: 13px; }

/* ======
09. Summernote
   ====== */
/* ==============
  Summernote
===================*/
.note-btn-group .dropdown-menu > li > a {
  display: block;
  padding: 5px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap; }
  .note-btn-group .dropdown-menu > li > a:hover {
    background-color: #e4e7ea; }

.note-image-popover, .note-air-popover, .note-link-popover {
  display: none; }
  .note-image-popover .dropdown-toggle::after, .note-air-popover .dropdown-toggle::after, .note-link-popover .dropdown-toggle::after {
    margin-left: 0; }

.note-icon-caret {
  display: none; }

.note-editor {
  position: relative; }
  .note-editor .btn-light {
    background-color: transparent;
    border-color: transparent; }
  .note-editor .btn-group-sm > .btn, .note-editor .btn-sm {
    padding: 8px 12px; }
  .note-editor .note-toolbar {
    background: #edeff1;
    border-bottom: 1px solid #e9ecef;
    margin: 0; }
  .note-editor .note-statusbar {
    background-color: #ffffff; }
    .note-editor .note-statusbar .note-resizebar {
      border-top: none;
      height: 15px;
      padding-top: 3px; }

.note-editor.note-frame {
  border: 1px solid #e9ecef;
  box-shadow: none;
  margin-bottom: 0px; }

.note-popover .popover .popover-content {
  padding: 5px 0 10px 5px; }
.note-popover .btn-default {
  background-color: transparent;
  border-color: transparent; }
.note-popover .btn-group-sm > .btn, .note-popover .btn-sm {
  padding: 8px 12px; }

.note-toolbar {
  padding: 5px 0 10px 5px; }

/* ======
10. Alerts
   ====== */
/* =============
   Alerts
============= */
.alert {
  position: relative;
  border: 0; }
  .alert .alert-link {
    font-weight: 500; }

.alert-success {
  color: #42ca7f;
  background-color: white; }
  .alert-success .alert-link {
    color: #30a966; }
  .alert-success hr {
    border-top-color: #30a966; }

.alert-info {
  color: #38a4f8;
  background-color: #e4f3fe; }
  .alert-info .alert-link {
    color: #098df4; }
  .alert-info hr {
    border-top-color: #098df4; }

.alert-warning {
  color: #f8b425;
  background-color: #fdeac3; }
  .alert-warning .alert-link {
    color: #e39c07; }
  .alert-warning hr {
    border-top-color: #e39c07; }

.alert-danger {
  color: #ec4561;
  background-color: #fad0d7; }
  .alert-danger .alert-link {
    color: #e6183a; }
  .alert-danger hr {
    border-top-color: #e6183a; }

/* ======
11. Demo Only
   ====== */
/* ==============
 Demo Only css
===================*/
.button-items {
  margin-bottom: -8px; }
  .button-items .btn {
    margin-top: 8px;
    margin-right: 5px; }

.bs-example-modal {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  display: block; }

.icon-demo-content {
  text-align: center;
  color: #9ca8b3; }
  .icon-demo-content i {
    display: block;
    font-size: 24px;
    margin-bottom: 16px;
    color: #424d67;
    transition: all 0.4s; }
  .icon-demo-content .col-md-4 {
    margin-bottom: 30px; }
    .icon-demo-content .col-md-4:hover i {
      color: #28aaa9;
      transform: scale(1.5); }

/*********** colors ************/
.color-box {
  color: #ffffff;
  padding: 40px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  border-radius: 4px; }

/*********** rating ************/
.rating-symbol-background, .rating-symbol-foreground {
  font-size: 28px; }

.rating-symbol-foreground {
  top: 0px; }

/* ======
12. Pagination
   ====== */
/* ==============
  Pagination
===================*/
.pagination .page-link {
  color: #28aaa9; }
  .pagination .page-link:focus, .pagination .page-link:hover {
    box-shadow: none;
    color: #2a3142;
    background-color: #e9ecef; }
.pagination .page-item.active .page-link {
  background-color: #28aaa9;
  border-color: #28aaa9; }

/* ======
13. Progress
   ====== */
.progress {
  height: 10px; }

.progress-bar {
  background-color: #28aaa9; }

/* ======
14. Popover - Tooltips
   ====== */
/* ==============
  Popover & Tooltips
===================*/
.popover-header {
  margin-top: 0; }

.tooltip .tooltip-inner {
  padding: 4px 10px; }

/* ======
15. Sweet Alerts
   ====== */
/* =========== */
/* Sweet Alert */
/* =========== */
.swal2-container {
  font-family: inherit; }
  .swal2-container .swal2-title {
    font-size: 24px; }

.swal2-icon.swal2-question {
  border-color: #28aaa9 !important;
  color: #28aaa9 !important; }

.swal2-popup .swal2-content {
  font-size: 16px !important; }
.swal2-popup .swal2-styled:focus {
  box-shadow: none !important; }

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: #42ca7f !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] {
  background: #42ca7f !important; }

/* ======
16. Tabs
   ====== */
/* =============
   Tabs & Accordions
============= */
.nav-tabs .nav-link, .nav-pills .nav-link {
  color: #2a3142;
  font-weight: 500; }

.nav-tabs-custom {
  border-bottom: 2px solid #DDD; }
  .nav-tabs-custom .nav-item {
    position: relative; }
    .nav-tabs-custom .nav-item .nav-link {
      border: none !important;
      font-weight: 500; }

.nav-tabs-custom > li > a {
  color: #2a3142; }

.nav-tabs-custom > li > a::after {
  content: "";
  background: #28aaa9;
  height: 2px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -1px;
  transition: all 250ms ease 0s;
  transform: scale(0); }

.nav-tabs-custom > li > a.active::after, .nav-tabs-custom > li:hover > a::after {
  transform: scale(1); }

.nav-tabs-custom > li > a.active {
  color: #28aaa9 !important; }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: #28aaa9; }

#accordion .card {
  box-shadow: none !important;
  border: 1px solid #e9ecef; }
  #accordion .card .card-header {
    border-bottom: 1px solid #e9ecef; }

/* ======
17. Form-elements
   ====== */
/* ==============
  Form-elements
===================*/
label {
  font-weight: 500; }

input[type=radio]:focus {
  box-shadow: none; }

.form-control {
  font-size: 14px;
  height: 40px;
  border-radius: 0;
  padding: 0.375rem 1rem; }
  .form-control:focus {
    border-color: #28aaa9;
    box-shadow: none; }

.form-control-sm {
  font-size: .875rem; }

.custom-select-sm {
  font-size: 75%; }

.custom-control-input:checked ~ .custom-control-indicator {
  background-color: #28aaa9; }

.custom-control-input:focus ~ .custom-control-indicator {
  -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #28aaa9;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #28aaa9; }

.has-success .form-control {
  border-color: #42ca7f;
  box-shadow: none; }

.has-warning .form-control {
  border-color: #f8b425;
  box-shadow: none; }

.has-error .form-control {
  border-color: #ec4561;
  box-shadow: none; }

.input-group-text {
  font-size: 14px; }

/* ======
18. Form-validation
   ====== */
/* ==============
  Form-Validation
===================*/
.error {
  color: #ff0000; }

.parsley-error {
  border-color: #ec4561; }

.parsley-errors-list {
  display: none;
  margin: 0;
  padding: 0; }

.parsley-errors-list.filled {
  display: block; }

.parsley-errors-list > li {
  font-size: 12px;
  list-style: none;
  color: #ec4561;
  margin-top: 5px; }

/* ======
19. Form-advanced
   ====== */
/* ==============
  Form-Advanced
===================*/
/* Datepicker */
.datepicker {
  border: 1px solid #f8f9fa;
  padding: 8px; }

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover {
  background-color: #28aaa9 !important;
  background-image: none;
  box-shadow: none;
  color: #ffffff; }

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td {
  padding: 3px;
  font-size: 14px; }
  @media (max-width: 1366px) {
    .table-condensed > thead > tr > th,
    .table-condensed > tbody > tr > td {
      font-size: 12px; } }

/* Bootstrap-touchSpin */
.bootstrap-touchspin .input-group-btn-vertical .btn {
  padding: 9px 12px; }

.bootstrap-touchspin .input-group-btn-vertical i {
  top: 4px;
  left: 8px; }

/* Color Picker */
.colorpicker-visible {
  visibility: visible;
  opacity: 1;
  display: block;
  margin-top: 0; }

.datepicker-dropdown.dropdown-menu {
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  z-index: 9999; }

.colorpicker-selectors i {
  margin-top: 5px;
  margin-left: 5px; }

.colorpicker-element .btn-light {
  background: #e9ecef;
  border: 1px solid #ced4da; }

.colorpicker-2x .colorpicker-saturation {
  width: 200px;
  height: 200px; }

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
  width: 30px;
  height: 200px; }

.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
  height: 30px; }

/* Select 2 */
.select2-container {
  width: 100% !important; }
  .select2-container .select2-selection--single {
    border: 1px solid #E3E3E3;
    height: 38px; }
    .select2-container .select2-selection--single:focus {
      outline: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      line-height: 36px;
      padding-left: 12px; }
    .select2-container .select2-selection--single .select2-selection__arrow {
      height: 34px;
      width: 34px;
      right: 3px; }
      .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: #999 transparent transparent transparent;
        border-width: 6px 6px 0 6px; }

.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #999 transparent;
  border-width: 0 6px 6px 6px !important; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #28aaa9 !important; }

.select2-results__option {
  padding: 6px 12px; }

.select2-dropdown {
  border: 1px solid #e3e3e3;
  padding-top: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); }

.select2-search input {
  border: 1px solid #e3e3e3; }

.select2-container .select2-selection--multiple {
  min-height: 38px;
  border: 1px solid #e3e3e3; }
  .select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 2px 10px; }
  .select2-container .select2-selection--multiple .select2-search__field {
    margin-top: 7px;
    border: 0; }
  .select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 1px;
    padding: 0 7px; }

/*...............SELECT 2...............*/
#wrapper .select2-container--default .select2-selection--single {
  height: 40px;
  border-radius: 0;
  border: 1px solid #ced4da; }
  #wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    font-size: 14px;
    padding-left: 16px; }
  #wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 9px; }
#wrapper .select2-container--default .select2-results__option--highlighted {
  background: #28aaa9 !important; }
#wrapper .select2-container--default .select2-results__option[aria-selected=true] {
  background: #2b2d5d; }

[type=search]:focus {
  outline: 0; }

/*...............END SELECT 2...............*/
/* CSS Switch */
input[switch] {
  display: none; }

input[switch] + label {
  font-size: 1em;
  line-height: 1;
  width: 56px;
  height: 24px;
  background-color: #dee2e6;
  background-image: none;
  border-radius: 2rem;
  padding: 0.16667rem;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  font-weight: 500;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out; }

input[switch] + label:before {
  color: #2a3142;
  content: attr(data-off-label);
  display: block;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  position: absolute;
  right: 1px;
  margin: 3px;
  top: -2px;
  text-align: center;
  min-width: 1.66667rem;
  overflow: hidden;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out; }

input[switch] + label:after {
  content: '';
  position: absolute;
  left: 3px;
  background-color: #e9ecef;
  box-shadow: none;
  border-radius: 2rem;
  height: 20px;
  width: 20px;
  top: 2px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out; }

input[switch]:checked + label {
  background-color: #28aaa9; }

input[switch]:checked + label:before {
  color: #ffffff;
  content: attr(data-on-label);
  right: auto;
  left: 3px; }

input[switch]:checked + label:after {
  left: 33px;
  background-color: #e9ecef; }

input[switch="bool"] + label {
  background-color: #ec4561; }

input[switch="bool"] + label:before,
input[switch="bool"]:checked + label:before,
input[switch="default"]:checked + label:before {
  color: #ffffff; }

input[switch="bool"]:checked + label {
  background-color: #42ca7f; }

input[switch="default"]:checked + label {
  background-color: #a2a2a2; }

input[switch="primary"]:checked + label {
  background-color: #28aaa9; }

input[switch="success"]:checked + label {
  background-color: #42ca7f; }

input[switch="info"]:checked + label {
  background-color: #38a4f8; }

input[switch="warning"]:checked + label {
  background-color: #f8b425; }

input[switch="danger"]:checked + label {
  background-color: #ec4561; }

input[switch="dark"]:checked + label {
  background-color: #2a3142; }

/* Bootstrap filestyle */
.icon-span-filestyle {
  padding-right: 5px; }

.bootstrap-filestyle label {
  margin-bottom: 0; }

.group-span-filestyle .badge {
  background-color: #2a3142; }

/* Prism editor */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #f8f9fa; }

.payment-method .radio-image {
  text-align: right;
  border: 1px solid #eee;
  padding: 8px 12px;
  background: rgba(238, 238, 238, 0.26);
  cursor: pointer;
  position: relative;
  width: 100%; }
  .payment-method .radio-image img {
    max-width: 80px;
    height: 20px; }
  .payment-method .radio-image span {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #a2a2a2;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s; }
  @media (max-width: 1366px) {
    .payment-method .radio-image .ic-paypal {
      max-width: 50px; } }
  @media (max-width: 991px) {
    .payment-method .radio-image .ic-paypal {
      max-width: 100px; } }
  @media (max-width: 575px) {
    .payment-method .radio-image .ic-paypal {
      max-width: 50px; } }
.payment-method input[type="radio"] {
  opacity: 0;
  z-index: -1;
  position: absolute; }
  .payment-method input[type="radio"]:checked ~ label span {
    background: #28aaa9; }

[type="file"] {
  /* Style the color of the message that says 'No file chosen' */
  color: #878787;
  padding: 0;
  border: none;
  height: auto; }

[type="file"]::-webkit-file-upload-button {
  background: #2b2d5d;
  border: 2px solid #2b2d5d;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  outline: none;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: all 1s ease; }

[type="file"]::-webkit-file-upload-button:hover {
  background: #28aaa9;
  border: 2px solid #28aaa9;
  color: #fff; }

@media (max-width: 1600px) {
  .iti__country-list {
    width: 300px; } }
@media (max-width: 1280px) {
  .iti__country-list {
    width: 290px; } }
.iti__country-list .iti__country-name {
  font-size: 14px; }

.ic_div-show {
  display: none; }

/* ======
20. Form-editors
   ====== */
/* ==============
  Form Editor
===================*/
.mce-panel {
  border-color: #cfd5db !important;
  background-color: #f8f9fa !important; }

.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
  background-color: #28aaa9 !important; }

.mce-menu {
  background-color: #ffffff !important; }

/* ======
21. Form-upload
   ====== */
/* ==============
  Form-Upload
===================*/
.dropzone {
  min-height: 230px;
  border: 1px solid #ced4da;
  background: #ffffff;
  border-radius: 6px; }
  .dropzone .dz-message {
    font-size: 30px; }

.form-group {
  position: relative; }

.fileUpload {
  position: relative;
  overflow: hidden; }
  .fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0); }
  .fileUpload.btn--browse {
    border-left: 0;
    border-radius: 0 2px 2px 0;
    background-color: #2b2d5d;
    color: #fff;
    height: 40px;
    padding: 6px 14px;
    position: absolute;
    right: 0;
    top: 0; }
    .fileUpload.btn--browse:hover {
      color: #fff; }

/* ======
22. Form-Wizard
   ====== */
/* ==============
  Form Wizard
===================*/
.form-wizard-wrapper label {
  font-size: 14px;
  text-align: right; }

.wizard > .steps a,
.wizard > .steps a:active,
.wizard > .steps a:hover {
  margin: 3px;
  padding: 15px; }

.wizard > .steps .current a,
.wizard > .steps .current a:active,
.wizard > .steps .current a:hover {
  background-color: #28aaa9;
  color: #ffffff; }

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:active,
.wizard > .steps .disabled a:hover,
.wizard > .steps .done a,
.wizard > .steps .done a:active,
.wizard > .steps .done a:hover {
  background-color: #88e3e2;
  color: #28aaa9; }

.wizard > .steps .current a .number,
.wizard > .steps .current a:active .number,
.wizard > .steps .current a:hover .number {
  border: 2px solid #FFF; }

.wizard > .steps .disabled a .number,
.wizard > .steps .disabled a:active .number,
.wizard > .steps .disabled a:hover .number,
.wizard > .steps .done a .number,
.wizard > .steps .done a:active .number,
.wizard > .steps .done a:hover .number {
  border-color: #28aaa9; }

.wizard > .content {
  background-color: transparent;
  margin: 0 5px;
  border-radius: 0;
  min-height: 150px; }

.wizard > .content > .body {
  width: 100%;
  height: 100%;
  padding: 30px 0 0;
  position: static; }

.wizard > .steps .number {
  font-size: 16px;
  padding: 5px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  width: 38px;
  display: inline-block;
  font-weight: 500;
  text-align: center;
  margin-right: 10px;
  background-color: rgba(40, 170, 169, 0.25); }

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:active,
.wizard > .actions .disabled a:hover {
  opacity: .65;
  background-color: #28aaa9;
  color: #ffffff;
  cursor: not-allowed; }

.wizard > .actions a,
.wizard > .actions a:active,
.wizard > .actions a:hover {
  background-color: #28aaa9;
  border-radius: 4px;
  padding: 8px 15px; }

@media (max-width: 768px) {
  .wizard > .steps > ul > li {
    width: 50%; }

  .form-wizard-wrapper label {
    text-align: left; } }
@media (max-width: 520px) {
  .wizard > .steps > ul > li {
    width: 100%; } }
/* ======
22. Calendar
   ====== */
/* ==============
  Calendar
===================*/
.calendar {
  float: left;
  margin-bottom: 0; }

.none-border .modal-footer {
  border-top: none; }

.fc-toolbar {
  margin-bottom: 5px; }
  .fc-toolbar h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    text-transform: uppercase; }

.fc-day {
  background: #ffffff; }

.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
.fc-toolbar button:focus, .fc-toolbar button:hover,
.fc-toolbar .ui-state-hover {
  z-index: 0; }

.fc-widget-header {
  border: 1px solid #d5d5d5;
  background-color: #f8f9fa; }

.fc-widget-content {
  border: 1px solid #d5d5d5; }

.fc th.fc-widget-header {
  font-size: 14px;
  line-height: 20px;
  padding: 10px 0;
  font-weight: 500;
  text-transform: uppercase; }

.fc-button {
  background: #ffffff;
  border: 1px solid #d5d5d5;
  color: #555555;
  text-transform: capitalize;
  outline: none; }

.fc-state-active, .fc-state-down {
  box-shadow: none;
  background-color: #28aaa9;
  border-color: #28aaa9;
  color: #ffffff; }

.fc-text-arrow {
  font-family: arial;
  font-size: 16px; }

.fc-state-hover {
  background: #e9ecef; }

.fc-state-highlight {
  background: #f0f0f0; }

.fc-cell-overlay {
  background: #f0f0f0; }

.fc-unthemed .fc-today {
  background: #ffffff; }

.fc-event {
  border-radius: 2px;
  border: none;
  cursor: move;
  font-size: 13px;
  margin: 5px 0;
  padding: 5px 5px;
  text-align: center;
  background-color: #28aaa9;
  color: #ffffff !important; }
  .fc-event .fc-time {
    font-weight: 500; }

.external-event {
  color: #ffffff;
  cursor: move;
  margin: 10px 0;
  padding: 6px 10px; }

.fc-basic-view td.fc-week-number span {
  padding-right: 5px; }
.fc-basic-view td.fc-day-number {
  padding-right: 5px; }

/* ======
23. Tables
   ====== */
/* ==============
  Tables
===================*/
th {
  font-weight: 500; }

.table > tbody > tr > td,
.table > tfoot > tr > td,
.table > thead > tr > td {
  padding: 15px 11px;
  white-space: nowrap;
  font-size: 14px; }

.table-responsive::-webkit-scrollbar {
  height: 6px; }
.table-responsive::-webkit-scrollbar-track {
  background-color: rgba(243, 243, 243, 0.52); }
.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(184, 184, 184, 0.753); }

table tr td {
  white-space: nowrap;
  padding: 4px; }
  @media (max-width: 991px) {
    table tr td {
      font-size: 14px; } }

.table > thead > tr > th {
  padding: 10px 11px !important;
  white-space: nowrap; }

.table-hover tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd),
.thead-default th {
  background-color: #f8f9fa; }

.table td,
.table th {
  vertical-align: middle; }

.table-vertical td {
  vertical-align: middle; }

.table-sm th,
.table-sm td {
  padding: .3rem !important; }

div.dataTables_wrapper .dataTables_info {
  padding-top: 7px !important; }
div.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 7px 10px;
  transition: .3s;
  border-radius: .25rem;
  border: none !important;
  line-height: 16px; }
  div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #2b2d5d; }
  div.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2b2d5d;
    color: #fff !important;
    border: none; }
    div.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
      background: #28aaa9;
      color: #fff;
      border: none; }
@media (max-width: 767px) {
  div.dataTables_wrapper .dataTables_paginate ul.pagination {
    justify-content: center !important; } }

.dataTables_wrapper .dataTables_length {
  margin-top: 7px;
  padding-top: 0; }

.dataTables_wrapper input[type="search"] {
  height: 40px !important;
  border: 1px solid #ddd !important;
  padding: 6px !important; }

.table-border-less tr td {
  border-top: 0;
  padding: 0;
  vertical-align: top;
  padding-bottom: 8px; }
  .table-border-less tr td .ic-select-checkbox {
    padding: 0 20px; }

.ic-table-responsive-heading .form-control {
  height: auto;
  border: none;
  padding: 2px; }
@media (min-width: 1441px) and (max-width: 1920px) {
  .ic-table-responsive-heading .table thead > tr th {
    font-size: 14px;
    padding: 5px !important; }
  .ic-table-responsive-heading .table td {
    font-size: 14px; } }
@media (min-width: 992px) and (max-width: 1440px) {
  .ic-table-responsive-heading .table thead > tr th {
    font-size: 12px;
    padding: 5px !important; }
  .ic-table-responsive-heading .table td {
    font-size: 12px; } }

/* == Responsive Table ==*/
table.focus-on tbody tr.focused th {
  background-color: #28aaa9;
  color: #ffffff; }
table.focus-on tbody tr.focused td {
  background-color: #28aaa9;
  color: #ffffff; }

.table-rep-plugin .btn-toolbar {
  display: block; }
.table-rep-plugin .table-responsive {
  border: none !important; }
.table-rep-plugin .btn-group.float-right .dropdown-menu {
  right: 0;
  transform: none !important;
  top: 100% !important; }
.table-rep-plugin tbody th {
  font-size: 14px;
  font-weight: normal; }
.table-rep-plugin .checkbox-row {
  padding-left: 40px; }
  .table-rep-plugin .checkbox-row label {
    display: inline-block;
    padding-left: 5px;
    position: relative; }
    .table-rep-plugin .checkbox-row label::before {
      -o-transition: 0.3s ease-in-out;
      -webkit-transition: 0.3s ease-in-out;
      background-color: #ffffff;
      border-radius: 3px;
      border: 1px solid #dee2e6;
      content: "";
      display: inline-block;
      height: 17px;
      left: 0;
      margin-left: -20px;
      position: absolute;
      transition: 0.3s ease-in-out;
      width: 17px;
      outline: none !important; }
    .table-rep-plugin .checkbox-row label::after {
      color: #e9ecef;
      display: inline-block;
      font-size: 11px;
      height: 16px;
      left: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      position: absolute;
      top: -1px;
      width: 16px; }
  .table-rep-plugin .checkbox-row input[type="checkbox"] {
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    outline: none !important; }
    .table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
  .table-rep-plugin .checkbox-row input[type="checkbox"]:focus + label::before {
    outline-offset: -2px;
    outline: none; }
  .table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; }
  .table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label::before {
    background-color: #f8f9fa;
    cursor: not-allowed; }
  .table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::before {
    background-color: #28aaa9;
    border-color: #28aaa9; }
  .table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
    color: #ffffff; }
.table-rep-plugin .fixed-solution .sticky-table-header {
  top: 70px !important; }

.ic-table-return .form-control {
  width: 200px; }

.ic-table-mobile-device {
  margin: 20px -12px; }
  @media (max-width: 991px) {
    .ic-table-mobile-device .col-sm-6 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%; } }
  .ic-table-mobile-device .ic-purchase-print tr td {
    padding: 4px 0;
    font-size: 14px; }

.ic-invoice-addess P {
  font-size: 14px; }

@media (max-width: 1600px) {
  .ic-purchase-print tr td:first-child {
    width: 50%; } }
/******** table editable **********/
.table-editable .editable-input .form-control {
  height: 2rem; }
.table-editable .editable-buttons .btn.btn-sm {
  font-size: 12px; }
.table-editable tbody td.focus {
  box-shadow: inset 0 0 1px 1px #28aaa9 !important; }

/* ======
24. Maps
   ====== */
/* ==============
  Maps
===================*/
.gmaps, .gmaps-panaroma {
  height: 300px;
  background: #f8f9fa;
  border-radius: 3px; }

.gmaps-overlay {
  display: block;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 40px;
  background: #28aaa9;
  border-radius: 4px;
  padding: 10px 20px; }

.gmaps-overlay_arrow {
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  position: absolute; }

.gmaps-overlay_arrow.above {
  bottom: -15px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid #28aaa9; }

.gmaps-overlay_arrow.below {
  top: -15px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #28aaa9; }

.vector-map-height {
  height: 400px; }

.jvectormap-zoomin, .jvectormap-zoomout {
  display: none; }

/* ======
25. Range-slider
   ====== */
/* ==============
  Range slider
===================*/
/* Ion Range slider */
.irs--modern .irs-bar, .irs--modern .irs-to, .irs--modern .irs-from, .irs--modern .irs-single {
  background: #28aaa9 !important; }
.irs--modern .irs-to:before, .irs--modern .irs-from:before, .irs--modern .irs-single:before {
  border-top-color: #28aaa9; }
.irs--modern .irs-grid-text {
  font-size: 11px; }
.irs--modern .irs-min, .irs--modern .irs-max {
  color: #6c757d; }
.irs--modern .irs-handle > i:nth-child(1) {
  width: 8px;
  height: 8px; }

/* ======
26. Session-timeout
   ====== */
/* ==============
  Session Timeout
===================*/
#session-timeout-dialog .modal-title {
  margin-top: 0; }
#session-timeout-dialog .close {
  display: none; }
#session-timeout-dialog .btn-default {
  background-color: #ffffff;
  color: #ec4561; }
#session-timeout-dialog .countdown-holder {
  color: #ec4561;
  font-weight: 500; }

/* ======
27. Charts
   ====== */
/* ==============
  Charts
===================*/
.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center; }
  .chart canvas {
    position: absolute;
    top: 0;
    left: 0; }

.chart.chart-widget-pie {
  margin-top: 5px;
  margin-bottom: 5px; }

.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2; }
  .percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em; }

/* Morris chart */
.morris-charts text {
  font-family: "Sarabun", sans-serif !important; }

.morris-chart-height {
  height: 300px; }

.morris-hover.morris-default-style {
  border-radius: 5px;
  padding: 10px 12px;
  background: #ffffff;
  border: none;
  box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.14); }
  .morris-hover.morris-default-style .morris-hover-point {
    font-weight: 500;
    font-size: 16px;
    color: #2a3142 !important;
    font-family: "Roboto", sans-serif; }
  .morris-hover.morris-default-style .morris-hover-row-label {
    background-color: #2a3142;
    color: #ffffff;
    padding: 4px;
    border-radius: 5px 5px 0 0;
    margin: -10px -12px 10px;
    font-family: "Roboto", sans-serif; }

/* Flot chart */
.flot-chart-height {
  height: 320px; }

#flotTip {
  padding: 8px 12px;
  background-color: #ffffff;
  z-index: 100;
  color: #2a3142;
  box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.14);
  border-radius: 1px; }

/* Chartist chart */
.ct-golden-section:before {
  float: none; }

.ct-chart {
  height: 300px; }

.ct-grid {
  stroke: rgba(0, 0, 0, 0.09);
  stroke-width: 2px;
  stroke-dasharray: 3px; }

.ct-chart .ct-label {
  fill: #9ca8b3;
  color: #9ca8b3;
  font-size: 14px;
  line-height: 1; }

.ct-chart.simple-pie-chart-chartist .ct-label {
  color: #ffffff;
  fill: #ffffff;
  font-size: 16px; }

.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point,
.ct-chart .ct-series.ct-series-a .ct-slice-donut {
  stroke: #28aaa9; }

.ct-chart .ct-series.ct-series-b .ct-bar,
.ct-chart .ct-series.ct-series-b .ct-line,
.ct-chart .ct-series.ct-series-b .ct-point,
.ct-chart .ct-series.ct-series-b .ct-slice-donut {
  stroke: #42ca7f; }

.ct-chart .ct-series.ct-series-c .ct-bar,
.ct-chart .ct-series.ct-series-c .ct-line,
.ct-chart .ct-series.ct-series-c .ct-point,
.ct-chart .ct-series.ct-series-c .ct-slice-donut {
  stroke: #f8b425; }

.ct-chart .ct-series.ct-series-d .ct-bar,
.ct-chart .ct-series.ct-series-d .ct-line,
.ct-chart .ct-series.ct-series-d .ct-point,
.ct-chart .ct-series.ct-series-d .ct-slice-donut {
  stroke: #2a3142; }

.ct-chart .ct-series.ct-series-e .ct-bar,
.ct-chart .ct-series.ct-series-e .ct-line,
.ct-chart .ct-series.ct-series-e .ct-point,
.ct-chart .ct-series.ct-series-e .ct-slice-donut {
  stroke: #38a4f8; }

.ct-chart .ct-series.ct-series-f .ct-bar,
.ct-chart .ct-series.ct-series-f .ct-line,
.ct-chart .ct-series.ct-series-f .ct-point,
.ct-chart .ct-series.ct-series-f .ct-slice-donut {
  stroke: #ec4561; }

.ct-chart .ct-series.ct-series-g .ct-bar,
.ct-chart .ct-series.ct-series-g .ct-line,
.ct-chart .ct-series.ct-series-g .ct-point,
.ct-chart .ct-series.ct-series-g .ct-slice-donut {
  stroke: #f8f9fa; }

.ct-series-a .ct-area,
.ct-series-a .ct-slice-pie {
  fill: #28aaa9; }

.ct-series-b .ct-area,
.ct-series-b .ct-slice-pie {
  fill: #f8b425; }

.ct-series-c .ct-area,
.ct-series-c .ct-slice-pie {
  fill: #2a3142; }

.chartist-tooltip {
  position: absolute;
  display: inline-block;
  opacity: 0;
  min-width: 10px;
  padding: 2px 10px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  background-clip: padding-box;
  background: #2a3142;
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  -webkit-transition: opacity .2s linear;
  -moz-transition: opacity .2s linear;
  -o-transition: opacity .2s linear;
  transition: opacity .2s linear; }

.chartist-tooltip.tooltip-show {
  opacity: 1; }

/* C3 chart */
.c3 svg {
  max-width: 100%; }

.c3-tooltip td > span {
  background: #2a3142; }

.c3-tooltip td {
  border-left: none; }

.c3-tooltip {
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
  opacity: 1; }

.c3-chart-arcs-title {
  font-size: 18px;
  font-weight: 600; }

.c3-tooltip tr {
  border: none !important; }

.c3-tooltip th {
  background-color: #2a3142; }

.c3-tooltip .value {
  font-weight: 600; }

.c3-line {
  stroke-width: 2px; }

.c3-legend-item {
  font-size: 13px; }

/**** E chart *****/
.e-chart {
  height: 350px; }

/* Sparkline chart */
.jqstooltip {
  box-sizing: content-box;
  background-color: #2a3142 !important;
  padding: 5px 10px !important;
  border-radius: 3px;
  border-color: #2a3142 !important;
  box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44); }

.jqsfield {
  font-size: 12px !important;
  line-height: 18px !important;
  color: #ffffff !important; }

/* ======
28. Widgets
   ====== */
/* ==============
  Widgets
===================*/
.widget-chart li {
  width: 31.5%;
  display: inline-block;
  padding: 0; }
  .widget-chart li i {
    font-size: 22px; }

.mini-stat .mini-stat-img {
  width: 58px;
  height: 58px;
  line-height: 58px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  text-align: center; }
  .mini-stat .mini-stat-img img {
    max-width: 32px; }
.mini-stat .mini-stat-label {
  position: absolute;
  right: 0;
  top: 18px;
  padding: 2px 10px 2px 32px;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 24% 50%, 6% 0); }

.wid-peity {
  border-bottom: 1px solid #e9ecef; }

.ct-chart.earning {
  height: 284px; }
  .ct-chart.earning .ct-grid {
    stroke-width: 1px; }
.ct-chart.wid {
  height: 220px; }
  .ct-chart.wid .ct-slice-donut {
    stroke-width: 14px !important; }

/* Activity */
.activity-feed {
  padding: 15px 15px 0 15px;
  list-style: none; }
  .activity-feed .feed-item {
    position: relative;
    padding-bottom: 29px;
    padding-left: 30px;
    border-left: 2px solid #e9ecef; }
    .activity-feed .feed-item:last-child {
      border-color: transparent; }
    .activity-feed .feed-item::after {
      content: "";
      display: block;
      position: absolute;
      top: -4px;
      left: -9px;
      width: 16px;
      height: 16px;
      border-radius: 30px;
      background: #42ca7f; }
    .activity-feed .feed-item .date {
      display: block;
      position: relative;
      top: -5px;
      color: #8c96a3;
      text-transform: uppercase;
      font-size: 13px; }
    .activity-feed .feed-item .activity-text {
      position: relative;
      top: -3px; }

/************* Chat **********/
.conversation-list {
  list-style: none;
  padding: 0px 10px;
  max-height: 350px; }
  .conversation-list li {
    margin-bottom: 24px; }
  .conversation-list .chat-avatar {
    width: 40px;
    display: inline-block;
    text-align: center;
    float: left; }
    .conversation-list .chat-avatar img {
      width: 100%;
      border-radius: 100%; }
    .conversation-list .chat-avatar .time {
      font-size: 12px;
      font-style: normal; }
  .conversation-list .ctext-wrap .user-name {
    display: block;
    font-weight: bold;
    position: relative;
    font-size: 12px;
    color: #1a7070; }
  .conversation-list .ctext-wrap p {
    color: #17605f; }
  .conversation-list .conversation-text {
    display: inline-block;
    font-size: 12px;
    float: left;
    margin-left: 12px;
    width: 70%; }
  .conversation-list .ctext-wrap {
    padding: 10px 18px;
    background: #90e5e4;
    border-radius: 0px 7px 7px 7px;
    position: relative;
    display: inline-block; }
    .conversation-list .ctext-wrap:after {
      content: " ";
      position: absolute;
      right: 100%;
      top: 0;
      border: solid transparent;
      border-right-color: #90e5e4;
      border-top-color: #90e5e4;
      border-width: 5px; }
    .conversation-list .ctext-wrap p {
      margin: 0px;
      padding-top: 3px; }
  .conversation-list .odd .chat-avatar {
    float: right !important; }
  .conversation-list .odd .conversation-text {
    width: 70% !important;
    margin-right: 12px;
    text-align: right;
    float: right !important; }
  .conversation-list .odd .ctext-wrap {
    background: #eff1f3 !important;
    border-radius: 7px 0px 7px 7px; }
    .conversation-list .odd .ctext-wrap p {
      color: #6c757d; }
    .conversation-list .odd .ctext-wrap:after {
      left: 100% !important;
      top: 0 !important;
      border-color: rgba(238, 238, 242, 0) !important;
      border-left-color: #eff1f3 !important;
      border-top-color: #eff1f3 !important; }

.chat-input {
  height: 2.25rem; }

/* ======
29. TImeline
   ====== */
/* ==============
  Timeline
===================*/
.timeline {
  padding-left: 60px;
  padding-right: 60px; }
  .timeline .timeline-list {
    position: relative;
    padding: 60px;
    border-left: 3px dashed #e9ecef;
    border-bottom: 3px dashed #e9ecef; }
    .timeline .timeline-list .cd-timeline-content {
      border-radius: 7px; }
      .timeline .timeline-list .cd-timeline-content .date {
        position: absolute;
        top: 60px;
        left: -39px;
        padding: 24px;
        color: #ffffff;
        border-radius: 7px; }
    .timeline .timeline-list.right {
      border-left: 0;
      border-right: 3px dashed #e9ecef;
      border-bottom: 3px dashed #e9ecef; }
      .timeline .timeline-list.right .cd-timeline-content {
        float: right;
        text-align: right; }
        .timeline .timeline-list.right .cd-timeline-content .date {
          right: -39px;
          left: inherit !important; }
      .timeline .timeline-list.right:last-child {
        border-bottom: 0; }

@media only screen and (min-width: 1025px) {
  #cd-timeline {
    margin-bottom: 3em;
    margin-top: 3em; }

  .cd-timeline-content {
    width: 56%; } }
@media (max-width: 768px) {
  .timeline {
    padding-left: 15px;
    padding-right: 15px; }
    .timeline .timeline-list {
      padding: 15px; }
      .timeline .timeline-list .date {
        top: 18px !important;
        left: -30px !important;
        padding: 14px !important; }
      .timeline .timeline-list.right .date {
        right: -30px !important; } }
/* ======
30. Directory
   ====== */
/* ==============
  directory
===================*/
.directory-card .social-links li a {
  margin-bottom: 6px; }

/* ======
31. Extra Pages
   ====== */
/* ==============
  Extra pages
===================*/
/************** Pricing **************/
.pricing-box .pricing-icon i {
  font-size: 30px;
  padding: 14px; }
.pricing-box .pricing-features {
  padding: 0px 12px; }

/***************** Faqs *******************/
.faq {
  position: relative; }
  .faq .card-header {
    border: none;
    background: transparent;
    padding: 22px 20px; }

.accordion .card {
  border-bottom: 1px solid #e9ecef !important;
  border-radius: 4px !important;
  box-shadow: none; }

a.faq[data-toggle=collapse].collapsed:before {
  content: '\F419'; }

a.faq[data-toggle=collapse]:before {
  content: '\F377';
  display: block;
  font-family: 'Material Design Icons';
  font-size: 20px;
  color: #9ca8b3;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%); }

/**************** maintenance *******************/
.maintenance-img img {
  max-width: 320px; }

.maintenance-box i {
  font-size: 28px; }

/**************** coming soon *******************/
.coming-watch div {
  display: inline-block; }
  .coming-watch div .card {
    margin: 0px 15px 15px 15px; }
    .coming-watch div .card .countdown-num {
      font-weight: 500;
      color: #28aaa9; }
  .coming-watch div span {
    width: 150px;
    display: block; }
    .coming-watch div span:first-child {
      height: 60px;
      font-weight: 300;
      font-size: 3em;
      line-height: 48px; }
    .coming-watch div span:last-child {
      padding-top: 14px;
      font-size: 0.9em; }

/*------------ Subscriber --------------*/
.coming-soon-search-form input {
  padding: 15px 20px;
  width: 100%;
  color: #343a40;
  border: 2px solid #e9ecef;
  outline: none !important;
  padding-right: 180px;
  padding-left: 30px;
  border-radius: 30px; }
.coming-soon-search-form button {
  position: absolute;
  top: 7px;
  right: 8px;
  outline: none !important;
  border-radius: 30px;
  padding: 9px 30px; }
.coming-soon-search-form form {
  position: relative;
  max-width: 600px;
  margin: 0px auto; }

/**************** pages 404/500 *******************/
.content-center {
  display: table;
  width: 100%;
  height: 100%; }

.content-desc-center {
  display: table-cell;
  vertical-align: middle; }

.ex-pages {
  position: relative;
  height: 100vh; }

/* ======
32. gallery
   ====== */
/* =============
   Gallery
============= */
.overlay-container {
  position: relative; }

.project-item {
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 30px; }
  .project-item img.gallery-thumb-img {
    display: block;
    width: 100%;
    height: auto; }

.project-item-overlay {
  background: none repeat scroll 0 0 #2a3142;
  position: absolute;
  transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  visibility: hidden;
  overflow: hidden;
  transform: translateX(-100%); }
  .project-item-overlay h4 {
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    color: #ffffff;
    position: absolute;
    top: 7%;
    left: 7%;
    margin: 0;
    text-overflow: ellipsis; }
  .project-item-overlay p {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    color: #ffffff;
    position: absolute;
    overflow: hidden;
    bottom: 7%;
    left: 7%;
    text-overflow: ellipsis;
    margin: 0; }

.overlay-container:hover .project-item-overlay {
  transform: translateX(0%);
  visibility: visible; }

/* ======
33. Invoice
   ====== */
/* ==== =====
Invoice
============= */
.table > thead > tr > .no-line {
  border-bottom: none; }

.table > tbody > tr > .no-line {
  border-top: none; }

.table > tbody > tr > .thick-line {
  border-top: 2px solid #f8f9fa; }

.ic-total-product {
  padding-top: 24px; }

.ic-product-head {
  padding-top: 15px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 8px; }
  @media (max-width: 1770px) {
    .ic-product-head {
      grid-template-columns: repeat(5, 1fr); } }
  @media (max-width: 1500px) {
    .ic-product-head {
      grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 1366px) {
    .ic-product-head {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 1280px) {
    .ic-product-head {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 1100px) {
    .ic-product-head {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 991px) {
    .ic-product-head {
      grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 767px) {
    .ic-product-head {
      grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 575px) {
    .ic-product-head {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 480px) {
    .ic-product-head {
      grid-template-columns: repeat(2, 1fr); } }
  .ic-product-head .product-items {
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.09); }
    .ic-product-head .product-items .ic-images-out-of-stock {
      position: relative; }
      .ic-product-head .product-items .ic-images-out-of-stock .ic-stock-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .ic-product-head .product-items .ic-images-out-of-stock .ic-stock-overlay p {
          padding: 3px;
          margin-bottom: 0;
          background: #28aaa9;
          font-size: 11px;
          text-align: center;
          display: inline-block;
          border-radius: 4px;
          position: absolute;
          white-space: nowrap;
          right: 8px;
          top: 8px;
          color: #fff;
          background-color: #ec4561; }
    .ic-product-head .product-items .product-item-body label,
    .ic-product-head .product-items .product-item-body p {
      font-size: 12px; }

.ic-payment-method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24px; }
  @media (max-width: 1440px) {
    .ic-payment-method {
      grid-column-gap: 12px; } }
  @media (max-width: 480px) {
    .ic-payment-method {
      grid-template-columns: repeat(1, 1fr); } }

.ic-payment-method-online {
  margin-top: 30px; }
  @media (max-width: 575px) {
    .ic-payment-method-online {
      margin-top: 14px; } }

.ic-print-header {
  text-align: right; }
  @media (max-width: 575px) {
    .ic-print-header {
      text-align: left; }
      .ic-print-header a {
        display: block;
        margin-top: 14px; } }

.paypal-button-container {
  display: grid;
  grid-column-gap: 8px; }

.ic-copy-url {
  position: relative; }
  .ic-copy-url .copy-url-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; }

.ic-layout2-body .ic-product-head {
  grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1200px) {
    .ic-layout2-body .ic-product-head {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 991px) {
    .ic-layout2-body .ic-product-head {
      grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 767px) {
    .ic-layout2-body .ic-product-head {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 575px) {
    .ic-layout2-body .ic-product-head {
      grid-template-columns: repeat(2, 1fr); } }

/* ==============
  Print css
===================*/
@media print {
  .topbar,
  .left,
  .page-title-box,
  .footer {
    display: none; }

  .wrapper {
    padding: 0; }

  .content {
    margin-top: 0;
    padding-top: 0; }

  .content-page {
    margin-left: 0;
    margin-top: 0; }

  .container-fluid {
    width: 100%; } }
.ic-stripe-logo {
  max-width: 50px; }

.ic-responsive-invoice table tr td {
  white-space: nowrap;
  padding: 4px; }

.ic-right-content {
  text-align: right; }
  @media (max-width: 991px) {
    .ic-right-content {
      text-align: left; } }

/* ======
34. Account Pages
   ====== */
/* ==============
  Account Pages
===================*/
.home-btn {
  position: absolute;
  top: 15px;
  right: 25px;
  z-index: 9; }

.wrapper-page {
  margin: 5.5% auto;
  max-width: 492px;
  position: relative; }
  .wrapper-page .logo-admin {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    margin: 0px auto;
    width: 74px;
    height: 74px;
    line-height: 74px;
    background: #ffffff;
    border-radius: 50%;
    border-bottom: 2px solid #42ca7f; }

.account-card .account-card-content {
  padding: 40px; }

.user-thumb {
  position: relative;
  z-index: 999; }
  .user-thumb img {
    height: 88px;
    margin: 0 auto;
    width: 88px; }

.ex-page-content h1 {
  font-size: 98px;
  font-weight: 500;
  line-height: 150px; }

.accountbg {
  background: url("../images/bg.jpg");
  position: absolute;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  top: 0; }

.account-page-full {
  left: 0;
  position: absolute;
  height: 100%;
  margin: 0;
  width: 420px;
  background-color: #ffffff; }
  .account-page-full .logo {
    line-height: 70px; }
  .account-page-full .card {
    box-shadow: none; }

/* ======
35. Responsive
   ====== */
/* ==============
  Responsive
===================*/
@media (max-width: 620px) {
  .mo-mb-2 {
    margin-bottom: 10px; }

  .mo-mt-2 {
    margin-top: 10px !important; }

  .ex-pages {
    padding: 24px 0px; } }
@media (min-width: 768px) and (max-width: 991px) {
  body {
    overflow-x: hidden; } }
@media (max-width: 768px) {
  body {
    overflow-x: hidden; }

  .topbar-left {
    width: 70px !important; }
    .topbar-left span {
      display: none !important; }
    .topbar-left i {
      display: block !important;
      line-height: 70px !important; }

  .navbar-custom {
    margin-left: 70px !important;
    padding: 0 12px 0 0; }

  .topbar .topbar-left {
    height: 70px; }

  .content-page {
    margin-left: 0 !important; }

  .content-page .content {
    padding: 0px; }

  .enlarged .left.side-menu {
    margin-left: -70px; }

  .footer {
    left: 0 !important; } }
@media (max-width: 480px) {
  .side-menu {
    z-index: 10 !important; }

  .navbar-custom {
    margin-left: 0 !important; }

  .account-page-full.wrapper-page {
    width: 100%;
    position: relative; } }
@media (max-width: 419px) {
  .topbar-left {
    width: 70px !important; }

  .content-page {
    margin-left: 70px; }

  .enlarged .side-menu.left {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important; } }
@media (min-width: 768px) {
  .enlarged .slimscroll-menu {
    overflow: inherit !important; } }
/* ======
36. custom-design
   ====== */
.dataTable {
  margin: 13px 0; }

table.dataTable tbody th,
table.dataTable tbody td {
  border: 1px solid #eee; }
table.dataTable thead th,
table.dataTable thead td {
  border: 1px solid #eee; }

.ic-products-img-td img {
  max-width: 60px;
  margin-right: 20px; }

.iti {
  width: 100% !important; }

/* ======
37. dashboard-design
   ====== */
@media (max-width: 575px) {
  .footer {
    font-size: 12px; } }

.ic-sales-position {
  position: absolute;
  left: 24px; }

.ic-card-sales {
  padding: 20px 24px 3px 11px; }

.large-deviced {
  display: none; }

.ic-top-products-heading {
  padding-bottom: 14px; }

.ic-products-card {
  border-radius: 5px; }

.product-slider-heads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-column-gap: 24px;
  grid-row-gap: 24px; }
  @media (max-width: 1700px) {
    .product-slider-heads {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
  @media (max-width: 1366px) {
    .product-slider-heads {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
  @media (max-width: 1240px) {
    .product-slider-heads {
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } }
  @media (max-width: 1199px) {
    .product-slider-heads {
      grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 800px) {
    .product-slider-heads {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 500px) {
    .product-slider-heads {
      grid-template-columns: repeat(2, 1fr); } }
  .product-slider-heads .ic-products-card {
    padding: 5px; }
    .product-slider-heads .ic-products-card img {
      max-height: 150px;
      width: 100%;
      object-fit: cover; }
    .product-slider-heads .ic-products-card .ic-product-content h6 {
      margin: 3px 0; }
      @media (max-width: 1700px) {
        .product-slider-heads .ic-products-card .ic-product-content h6 {
          font-size: 12px; } }
    @media (max-width: 1700px) {
      .product-slider-heads .ic-products-card .ic-product-content p {
        font-size: 10px; } }

.ic-best-products-items .slick-list.draggable {
  max-height: 446px !important; }
  @media (max-width: 1400px) {
    .ic-best-products-items .slick-list.draggable {
      max-height: 400px !important; } }
  @media (max-width: 1300px) {
    .ic-best-products-items .slick-list.draggable {
      max-height: 350px !important; } }
.ic-best-products-items .media {
  padding: 5px;
  border: 1px solid #f3f4f5;
  margin-top: 6px;
  margin-right: 2px; }
  .ic-best-products-items .media img {
    max-width: 150px;
    margin-right: 10px; }
    @media (max-width: 1400px) {
      .ic-best-products-items .media img {
        max-width: 129px; } }
    @media (max-width: 1300px) {
      .ic-best-products-items .media img {
        max-width: 110px; } }
    @media (max-width: 1199px) {
      .ic-best-products-items .media img {
        max-width: 92px; } }
  .ic-best-products-items .media h6 {
    margin-bottom: 5px;
    margin-top: 3px; }
  .ic-best-products-items .media p {
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 18px; }
    @media (max-width: 1199px) {
      .ic-best-products-items .media p {
        font-size: 11px;
        line-height: 14px; } }
    .ic-best-products-items .media p span {
      font-weight: 500; }

@media (min-width: 767px) {
  .ic-menu-larged-deviced {
    display: none; } }
@media (max-width: 767px) {
  .ic-menu-larged-deviced {
    display: block; } }

@media (max-width: 1199px) {
  .ic-income-chart h5 {
    font-size: 14px; } }

.layout-chart-1 {
  position: relative; }
  .layout-chart-1::before {
    content: "";
    height: 20px;
    width: 20px;
    border: 5px solid #39cdcc;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 31px;
    right: 0;
    z-index: 9; }
    @media (max-width: 1580px) {
      .layout-chart-1::before {
        top: 24px; } }
    @media (max-width: 900px) {
      .layout-chart-1::before {
        top: 18px; } }
    @media (max-width: 575px) {
      .layout-chart-1::before {
        top: 36px; } }
    @media (max-width: 480px) {
      .layout-chart-1::before {
        top: 28px; } }
    @media (max-width: 366px) {
      .layout-chart-1::before {
        top: 21px; } }

.layout-chart-2 {
  position: relative; }
  .layout-chart-2::before {
    content: "";
    height: 20px;
    width: 20px;
    border: 5px solid #767adf;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 31px;
    right: 0;
    z-index: 9; }
    @media (max-width: 1580px) {
      .layout-chart-2::before {
        top: 24px; } }
    @media (max-width: 900px) {
      .layout-chart-2::before {
        top: 18px; } }
    @media (max-width: 575px) {
      .layout-chart-2::before {
        top: 36px; } }
    @media (max-width: 480px) {
      .layout-chart-2::before {
        top: 28px; } }
    @media (max-width: 366px) {
      .layout-chart-2::before {
        top: 21px; } }

.apexcharts-legend-series {
  margin: 3px 5px !important; }

.ic-card-toolbar {
  margin-bottom: 5px; }
  .ic-card-toolbar h4 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400; }

.table-condensed .prev {
  border: 1px solid #28aaa9; }
.table-condensed .next {
  border: 1px solid #28aaa9; }

.barcode-image {
  height: 40px; }

.ic-expance-part {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.ic-max-height-same {
  height: calc(100% - 24px); }

@media (min-width: 1441px) {
  .ic-layout2-body .ic-piechart-part ul {
    padding-top: 58px; } }
@media (max-width: 1440px) {
  .ic-layout2-body .ic-piechart-part ul {
    padding-top: 85px;
    display: block; } }

.ic-piechart-part #pieChart {
  margin: 0 auto; }
  @media (max-width: 1500px) {
    .ic-piechart-part #pieChart {
      width: 250px;
      height: 250px; } }
.ic-piechart-part ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding-top: 50px;
  padding-left: 0; }
  @media (min-width: 1551px) and (max-width: 1600px) {
    .ic-piechart-part ul {
      padding-top: 17px; } }
  @media (max-width: 1550px) {
    .ic-piechart-part ul {
      padding-top: 17px;
      display: block; } }
  @media (max-width: 1440px) {
    .ic-piechart-part ul {
      padding-top: 50px;
      display: block; } }
  .ic-piechart-part ul li {
    list-style: none; }
    .ic-piechart-part ul li span {
      display: flex;
      align-items: center; }
      .ic-piechart-part ul li span span {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px; }
    .ic-piechart-part ul li .this-mounth {
      color: #E36F6F; }
      .ic-piechart-part ul li .this-mounth .circle-this {
        background: #E36F6F; }
    .ic-piechart-part ul li .last-mounth {
      color: #6FE388; }
      .ic-piechart-part ul li .last-mounth .circle-last {
        background: #6FE388; }

@media screen and (max-width: 1200px) {
  .ic-expance-text-heading-part {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; } }
@media screen and (min-width: 1200px) and (max-width: 1440px) {
  .ic-expance-text-heading-part {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; } }

@media screen and (max-width: 1158px) {
  .ic-expance-form-heads {
    max-width: 70%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%; } }
@media screen and (max-width: 991px) {
  .ic-expance-form-heads {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; } }
@media screen and (min-width: 1159px) and (max-width: 1440px) {
  .ic-expance-form-heads {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; } }

@media screen and (max-width: 1158px) {
  .ic-expance-form-chart {
    max-width: 30%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%; } }
@media screen and (max-width: 991px) {
  .ic-expance-form-chart {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; } }
@media screen and (min-width: 1159px) and (max-width: 1440px) {
  .ic-expance-form-chart {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; } }

.input-daterange {
  padding-top: 30px;
  text-align: right; }
  @media screen and (max-width: 1158px) {
    .input-daterange.ic-mobile-range {
      padding-top: 16px; } }

@media (max-width: 991px) {
  .edit-font .text-muted {
    font-size: 12px; } }

.ic-print-btn-head {
  text-align: right; }
  @media (max-width: 991px) {
    .ic-print-btn-head {
      text-align: left; } }

.conversation-list {
  max-height: 400px; }

#logout-form {
  display: none; }

/* ======
38. preloader
   ====== */
/* ==============
  preloader
===================*/
.ic-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; }
  .ic-preloader::before {
    position: absolute;
    content: '';
    background-color: rgba(255, 255, 255, 0.89);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .ic-preloader .ic-inner-preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    /* DOUBLE BORDER SPINNER */ }
    .ic-preloader .ic-inner-preloader .db-spinner {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      border: 4px solid #28aaa9;
      border-top-color: transparent;
      border-bottom-color: transparent;
      -webkit-animation: 1s spin linear infinite;
      animation: 1s spin linear infinite; }
      @media (max-width: 575px) {
        .ic-preloader .ic-inner-preloader .db-spinner {
          width: 50px;
          height: 50px; } }

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
/* ======
39. according
   ====== */
/* ==============
  according
===================*/
.ic-collapse {
  padding: 10px 20px;
  background-color: #F7F7F7;
  cursor: pointer;
  position: relative; }
  .ic-collapse i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    transition: .6s; }
  .ic-collapse.collapsed i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(270deg); }

/* ======
40. according
   ====== */
/* Login Form Area css
============================================================================================ */
.ic_main_form_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  vertical-align: middle;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background-image: url(../images/bg.png);
}
  .ic_main_form_area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); }
  .ic_main_form_area .container {
    vertical-align: middle;
    align-self: center; }

.ic_main_form_inner {
  background: #fff;
  box-shadow: 2px 3.464px 14.72px 1.28px rgba(16, 16, 16, 0.15);
  padding: 60px 20px;
  width: 400px;
  margin-left: auto; }
  @media (max-width: 1366px) {
    .ic_main_form_inner {
      padding: 30px 20px; } }
  @media (max-width: 991px) {
    .ic_main_form_inner {
      margin: 0 auto; } }
  @media (max-width: 480px) {
    .ic_main_form_inner {
      width: 100%; } }
  .ic_main_form_inner .form_img {
    overflow: hidden; }
  .ic_main_form_inner .form_box {
    text-align: center;
    vertical-align: middle;
    align-self: center; }
    .ic_main_form_inner .form_box img {
      max-width: 200px;
      margin-bottom: 20px; }
    .ic_main_form_inner .form_box h2 {
      color: #00033E; }
    .ic_main_form_inner .form_box p {
      font-size: 14px;
      line-height: 20px;
      color: #000;
      font-family: "Karla", sans-serif;
      margin-bottom: 20px; }
      .ic_main_form_inner .form_box p.ic-error-massage {
        color: #ec4561; }
    .ic_main_form_inner .form_box .login_form {
      margin: auto; }
      .ic_main_form_inner .form_box .login_form .form-group {
        margin-bottom: 20px; }
        .ic_main_form_inner .form_box .login_form .form-group input {
          font-family: "Karla", sans-serif;
          padding: 0px 15px 0px 50px;
          box-shadow: none;
          background: #f5f5f5;
          border-color: #efefef;
          box-shadow: 1px 1.732px 7.68px 0.32px rgba(0, 0, 0, 0.05);
          height: 50px;
          border-radius: 0px;
          position: relative;
          font-size: 16px;
          color: #a1a1a1; }
          .ic_main_form_inner .form_box .login_form .form-group input.placeholder {
            font-size: 16px;
            color: #a1a1a1;
            font-family: "Karla", sans-serif; }
          .ic_main_form_inner .form_box .login_form .form-group input:-moz-placeholder {
            font-size: 16px;
            color: #a1a1a1;
            font-family: "Karla", sans-serif; }
          .ic_main_form_inner .form_box .login_form .form-group input::-moz-placeholder {
            font-size: 16px;
            color: #a1a1a1;
            font-family: "Karla", sans-serif; }
          .ic_main_form_inner .form_box .login_form .form-group input::-webkit-input-placeholder {
            font-size: 16px;
            color: #a1a1a1;
            font-family: "Karla", sans-serif; }
          .ic_main_form_inner .form_box .login_form .form-group input:focus {
            color: #00033E; }
          .ic_main_form_inner .form_box .login_form .form-group input:focus ~ i {
            color: #00033E; }
        .ic_main_form_inner .form_box .login_form .form-group i {
          position: absolute;
          left: 32px;
          top: 50%;
          transform: translateY(-50%); }
        .ic_main_form_inner .form_box .login_form .form-group.remember {
          text-align: left;
          margin-top: 5px;
          margin-bottom: 22px; }
          .ic_main_form_inner .form_box .login_form .form-group.remember input {
            height: 0px;
            padding: 0px;
            width: 0px;
            display: none; }
          .ic_main_form_inner .form_box .login_form .form-group.remember label {
            margin-bottom: 0px;
            color: #000;
            font-size: 16px;
            font-weight: normal;
            font-family: "Karla", sans-serif;
            position: relative;
            top: 1px; }
          .ic_main_form_inner .form_box .login_form .form-group.remember a {
            text-align: right;
            float: right;
            color: #000;
            font-size: 16px;
            font-weight: normal; }
        .ic_main_form_inner .form_box .login_form .form-group p {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 5px; }
          .ic_main_form_inner .form_box .login_form .form-group p span {
            color: #00033E; }
        .ic_main_form_inner .form_box .login_form .form-group .submit_btn {
          margin-top: 10px; }
  .ic_main_form_inner .login-form-footer {
    font-size: 14px; }

.login_social {
  display: flex;
  justify-content: center; }
  .login_social li {
    margin-right: 10px; }
    .login_social li:last-child {
      margin-right: 0px; }
    .login_social li a {
      background: #000;
      color: #fff;
      height: 40px;
      width: 40px;
      line-height: 40px;
      font-size: 18px;
      display: inline-block;
      position: relative;
      left: 0px;
      top: 0px;
      text-align: center !important;
      position: relative;
      transform: perspective(1px) translateZ(0); }
      .login_social li a:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #00033E;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out; }
      .login_social li a:hover:before {
        transform: scaleX(1); }

.submit_btn {
  background: #28AAA9;
  color: #fff;
  text-transform: uppercase;
  display: block;
  width: 100%;
  border-radius: 0px;
  height: 50px;
  font-size: 16px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  position: relative;
  transform: perspective(1px) translateZ(0); }
  .submit_btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00033E;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  .submit_btn:hover, .submit_btn:focus {
    color: #fff; }
    .submit_btn:hover:before, .submit_btn:focus:before {
      transform: scaleX(1); }

.styled-checkbox {
  position: absolute;
  opacity: 0;
  height: 0px; }
  .styled-checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0; }
  .styled-checkbox + label:before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 16px;
    height: 16px;
    background: #a1a1a1;
    position: relative;
    top: 1px; }
  .styled-checkbox:hover + label:before {
    background: #00033E; }
  .styled-checkbox:focus + label:before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); }
  .styled-checkbox:checked + label:before {
    background: #00033E; }
  .styled-checkbox:disabled + label {
    color: #acacac;
    cursor: auto; }
  .styled-checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd; }
  .styled-checkbox:checked + label:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 13px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
    opacity: 1; }

.ic-fxied-image {
  position: relative; }
  .ic-fxied-image .login-img-slider-heads {
    position: absolute;
    width: 100%;
    max-width: 529px;
    left: 71px;
    top: 24px; }
    @media (max-width: 1700px) {
      .ic-fxied-image .login-img-slider-heads {
        max-width: 415px;
        left: 58px;
        top: 20px; } }
  .ic-fxied-image .mobile-img-slider-heads {
    position: absolute;
    width: 100%;
    max-width: 101px;
    bottom: 47px;
    right: 27px; }
    @media (max-width: 1700px) {
      .ic-fxied-image .mobile-img-slider-heads {
        max-width: 81px;
        bottom: 34px;
        right: 21px; } }

/* End Login Form Area css
============================================================================================ */

/*# sourceMappingURL=style.css.map */