/* Add here all your CSS customizations */
@import url('https://fonts.googleapis.com/css?family=Poppins: 400,600,700&display=swap');


/*
.gln-blue {
	background-color: #1E98D3 !important;
	border-color: #1E98D3 !important;
}
.gln-blue-text {
	color: #1E98D3 !important;
}
.gln-green {
	background-color: #008C3C !important;
	border-color: #008C3C !important;
}
.gln-red {
	background-color: var(--gln-danger) !important;
	border-color: #ffffff !important;
}
.gln-magenta {
	background-color: #D40075 !important;
	border-color: #D40075 !important;
}
.gln-grey {
	background-color:var(--gln-grey) !important;
	border-color: var(--gln-grey) !important;
}
.gln-grey-dark {
	background-color:var(--gln-grey-dark) !important;
	border-color: var(--gln-grey-dark) !important;
}
.gln-grey-darker {
	background-color:var(--gln-grey-darker) !important;
	border-color: var(--gln-grey-darker) !important;
}
.gln-magenta-text {
	color: #D40075 !important;
}
.gln-yellow {
	background-color: #F2DC00 !important;
	border-color: #F2DC00 !important;
}
.gln-white {
	background-color: #FFF !important;
	border-color: #F2DC00 !important;
  color: #000 !important;
}
.gln-text-green {
  color:  var(--gln-green) !important;
}
.gln-text-green-dark {
  color:  var(--gln-green-dark) !important;
}
*/
/*
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	background-color: unset !important;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 0 unset inset !important;
}*/
.gln-gradient-purple-blue {
  background-color: #4495EB;
}
.gln-gradient-green-blue {
	background-color: #3978bc;
}
body {
  color: #777;
  font-family: "Poppins", Arial, sans-serif;
  line-height: 22px;
  margin: 0;
  font-size: 14px;
}
/*
a {
  color: #3e3e3e;
  text-decoration: underline;
}

html.dark a {
  color: var(--primary);
}
*/

.keep-thumb-in-place {
  max-height: 80%;
  overflow-y: auto;
}


/*==========================================================*/
/* Text */
/*==========================================================*/
.page-title {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 20pt;
  font-weight: 500;
  margin: 0;
  padding-top: 0.5rem;
}
.page-title small {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-top: 10px;
}
h1 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 24pt;
  font-weight: 500;
  /* color: #333; */
}
h2 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 24pt;
  font-weight: 300;
  /* color: #333; */
}
h3 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 20pt;
  font-weight: 500;
  /* color: #333; */
}
h4 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 20pt;
  font-weight: 300;
  /* color: #333; */
}
h5 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16pt;
  line-height: 25px;
  font-weight: 300;
  /* color: #333; */
}
h6 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12pt;
  font-weight: 300;
  /* color: #333; */
}

html.dark .input-group-append span {
  border-color: var(--dark-border);
  background-color: var(--dark-light);
}

@media only screen and (max-width: 991px) {
  .page-title {
    font-size: 1.6em !important;
  }
}

html.dark pre {
  color: #e3e3e3;
}
.btn.btn-lg {
  padding: 10px 18px;
  font-size: 1.3rem;
}

.w-fit-content {width: fit-content;}
html.dark .card-header.dark-light-card-header {
  background: #2e353e;
}

html.dark .table-file-block .input-group-prepend .input-group-text {
  background-color: #282d36;
  border-color: #4b4e54 !important;
}

html.dark .no-border-on-dark, html.dark .no-border-on-dark a, html.dark .no-border-on-dark input {
  border:0px solid !important;
}

.no-user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*==========================================================*/
/* Header */
/*==========================================================*/

@media only screen and (max-width: 767px) {
  .content-body {
    z-index: 97;
  }
}
@media only screen and (min-width: 768px) {
  body.dashboard .content-body {
    padding-top: 20px;
  }
}
.header .logo {
  margin: 12px 0 0 16px;
}
.header .logo img {
  width: 150px;;
}
.header .separator {
  margin: 0 15px 0;
}
.notifications {
  margin: 4px 0 0 0;
}
.userbox .name,
.userbox .role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (min-width: 767px) {
  .userbox .name,
  .userbox .role {
    max-width: 100px;
  }
}
.sidebar-right {
  z-index: 1030;
}

.page-header h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 1100px) {
  .page-header h2 {
    max-width: 100%;
  }
}
.page-header .sidebar-right-toggle i {
  font-size: 18px;
  background-color: var(--primary);
  margin-top: 6px;
  line-height: 38px;
  border-radius: 50%;
  height: 38px;
  width: 38px;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease-in-out 0s;
}
html:not(.sidebar-right-opened) .page-header .sidebar-right-toggle i:hover {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-origin: center center;
}
.page-header .sidebar-right-toggle.flip i {
  -webkit-transform: rotateY(720deg);
  -moz-transform: rotateY(720deg);
  transform: rotateY(720deg);
  transform-origin: center center;
  transition: all 1s ease-in-out 0s;
}
html.sidebar-right-opened .page-header .sidebar-right-toggle i:before {
	content: "\f00d";
}

.header-right .selected-client-user {
  line-height: 16px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
@media only screen and (max-width: 1100px) {
  .header-right .selected-client-user {
    max-width: 170px;
  }
  .header-right .selected-client-user strong {
    display: none;
  }
}

.header-right .userbox a {
  text-decoration: none;
}

#page-menu-search #results {
    padding: 0;
    list-style: none;
    margin-top: 20px;
    /*
    max-height: 100px;
    overflow: auto;
    */
}

.dropdown-menu {
  color: inherit;
}

.dropdown-menu .dropdown-item {
  text-decoration: none;
}

html.dark .dropdown-menu a {
  color: #fff !important;
}
html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: #171717;
}


/*
Hack to show the right sidebar over the pages
Layout Base - Sidebar Right Opened ( Larger than mobile )
 */
@media only screen and (min-width: 768px) {
	html.sidebar-right-opened .header {
		margin-left: 0px;
		margin-right: 0px;
	}

	html.sidebar-right-opened .inner-wrapper {
		margin-left: 0px;
	}

	html.sidebar-right-opened .sidebar-right {
		margin-right: 0;
	}

	html.sidebar-right-opened.has-top-menu:not(.has-left-sidebar-half) .inner-wrapper {
		margin-left: 0;
		padding-right: 0px;
	}

  html.fixed.sidebar-left-sm.sidebar-right-opened .sidebar-left {
    left: 0px;
  }
  html.fixed.sidebar-right-opened .sidebar-left {
      left: 0px;
  }
  html.fixed.sidebar-left-xs.sidebar-right-opened .sidebar-left {
      left: 0px;
  }
}

/*==========================================================*/
/* Breadcrumbs */
/*==========================================================*/
.content-body .breadcrumbs {
  padding: 0;
  list-style: none;
  margin-bottom: 20px;
}
.content-body .breadcrumbs li {
  display: inline-block;
  color: #000;
  font-size: 12px !important;
}
.content-body .breadcrumbs li a {
  font-size: 12px !important;
  text-decoration: none;
}
.content-body .breadcrumbs li:not(:last-child):after {
  content: '/';
  margin-left: 3px;
}
html.dark .content-body .breadcrumbs li,
html.dark .content-body .breadcrumbs li a {
  color: var(--primary);
}
@media only screen and (max-width: 1100px) {
  .page-header .breadcrumbs {
      display: none;
  }
}

/*==========================================================*/
/* Footer */
/*==========================================================*/
.footer {
  position: relative;
}
.footer-inner {
  font-size: 11px;
}
.footer a {
  font-size: 11px !important;
  color: var(--primary);
}
html .scroll-to-top {
    opacity: 1;
  z-index: 9999999;
}

@media only screen and (max-width: 768px) {
  .footer {
    position: relative;
    padding: 5px 5px;
  }
}


@media only screen and (min-width: 768px) {
  html.fixed.sidebar-left-xs footer {
      margin-left: 200px;
  }
  html.fixed.sidebar-left-sm footer {
    margin-left: 250px;
  }
  html.fixed footer {
    margin-left: 300px;
  }
  html.fixed.sidebar-left-collapsed footer {
    margin-left: 73px;
  }
}

/*==========================================================*/
/* Sidebars */
/*==========================================================*/
.sidebar-separator {
  margin: 10px 0;
  border-top: 1px solid #0f0f0f;
}
.sidebar-righ-nav .tabs {
  border-radius: 0px;
}
.sidebar-righ-nav .nav-tabs {
  border-bottom: 0px;
}
.sidebar-righ-nav .nav-tabs.nav-justified li .nav-link {
  border-radius: 0 0 0 0 !important;
}
.sidebar-righ-nav .nav-tabs.nav-justified li .nav-link {
  background: #1D2127;
  border-bottom: 1px solid #171717;
}
.sidebar-righ-nav .nav-tabs li .nav-link,
.sidebar-righ-nav .nav-tabs li .nav-link:hover {
  background: #171717;
  border-bottom: none;
  border-left: 1px solid #171717;
  border-right: 1px solid #171717;
  border-top: 3px solid #171717;
  color: #CCC !important;
}
.sidebar-righ-nav .nav-tabs li .nav-link:hover {
  color: var(--primary) !important;
}
.sidebar-righ-nav .nav-tabs.nav-justified li.active .nav-link,
.sidebar-righ-nav .nav-tabs.nav-justified li.active .nav-link:hover,
.sidebar-righ-nav .nav-tabs.nav-justified li.active .nav-link:focus {
  background: #171717;
  border-left-color: #1D2127;
  border-right-color: #1D2127;
  border-bottom: 1px solid #171717;
  color: var(--primary) !important;
}
.sidebar-righ-nav .tab-content {
  background-color: #171717;
  border-radius: 0 0 0 0;
  border: 0px solid #EEE;
  box-shadow: 0;
  padding-left: 26px;
  padding-bottom: 0;
}
.sidebar-righ-nav .nav-link {
  background-color: #1D2127;
}

.sidebar-right .table {
  color: #777;
}
.sidebar-right .table th,
.sidebar-right .table td {
  border-top: 1px solid #171717;
  padding: 6px 0;
}
.sidebar-right .table td i {
  margin-right: 6px;
}
.sidebar-right .table-striped tbody tr:nth-of-type(odd) {
  background-color: #282d36;
}
.sidebar-right .table-hover tbody tr:hover {
  color: #9e9e9e;
  background-color: rgba(0, 0, 0, 0.75);
}
.sidebar-right-wrapper {
  padding-top: 0 !important;
}
.sidebar-right a {
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}


/*==========================================================*/
/* Loader */
/*==========================================================*/
.overlay {
  color: #fff;
}
.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

html.dark .loading-overlay {
  background-color: #1d2127 !important;
}

/*==========================================================*/
/* Notification */
/*==========================================================*/
.notifications > li .notification-icon .badge {
  background: none;
  right: auto !important;
}
.notifications .notification-menu .content {
    padding: 0;
}
.notifications-list li {
  padding: 8px 12px 6px 12px;
  border-bottom: 1px solid #e3e3e3;
  margin: 0;
}
.notifications-list li:first-child {
  padding-top: 6px;
}
.notifications-list li:last-child {
  border-bottom: 0;
}
.notifications .notification-menu hr {
  background: #E6E6E6;
  height: 1px;
  margin: 0 0 12px 0;
}
.notifications-footer {
  text-align: right;
  padding: 0 12px 12px 0;
}

@media only screen and (min-width: 768px) {
	.notifications .notification-menu {
		transform: translate3d(0, 30px, 0) !important;
	}
}

#notification_scheduler{line-height: 1;}
.notification-created{font-size: 9px;}
.notifications-list ul {
  overflow: auto;
  max-height: 200px;
}
/* .notifications-list ul{margin: 0px; padding: 0px; list-style: none;}
.notifications-list ul li{
  padding: 5px;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
}
*/
.notifications-list ul li.new {
  background-color: #ebebeb;
  border-bottom: 1px solid #ffffff;
}
.notifications-list ul li .notification-actions {
  float: right;
}
.notifications-list ul li h2{
  font-size: 18px;
  font-weight: 700;
}
.notifications-list ul li p{margin: 0px;}
.notifications-list ul li .fas{margin-left: 10px; cursor: pointer;}
.notifications-list .follow-notification-link{cursor: pointer;}


.notifications-list ul::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.notifications-list ul::-webkit-scrollbar-track {
  background: #eee;
}

/* Handle */
.notifications-list ul::-webkit-scrollbar-thumb {
  background: #0088cc;
  border-radius: 5px;
}

/*==========================================================*/
/* Menu */
/*==========================================================*/
ul.nav-main li.nav-parent > a:after {
    font-family: 'Font Awesome 5 Pro';
}
ul.nav-main li.nav-active > a {
    color: var(--primary);
}
/* Make space for badgets in left menu */
ul.nav-main li.nav-parent > a:after {
  margin-right: 6px;
}

.change-client-element,
.change-user-element {
  position: relative;
  background-color: #fff;
  box-shadow: 0px 1px 15px 0px rgba(123, 123, 123, 0.15);
  margin-bottom: 8px;
  display: block;
  height: 100%;
  border: 1px solid transparent;
  padding: 20px 10px;
  border: 5px solid transparent;
}

html.dark .change-client-element,
html.dark .change-user-element {
  background-color: #1d2127;

}

html.dark .change-client-element a,
html.dark .change-user-element a {
  color: #fff!important;
}

.change-client-element:hover,
.change-user-element:hover,
.change-client-element.active,
.change-user-element.active {
  box-shadow: 0px 5px 25px 0px rgba(123, 123, 123, 0.15);
  background-color: #FFF;

  border: 5px solid #f2991f;
  text-decoration: none;
  color: inherit;
}

html.dark .change-client-element:hover,
html.dark .change-user-element:hover {
  background-color: #1d2127;
  color: #fff;
}

.change-user-element:hover:after {
	top: 0;
	left: 0;
	border: solid transparent;
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
  color: #fff;
  font-size: 16px;
  content: "\f0ec";
	height: 32px;
	width: 30px;
  padding: 3px 6px 6px 3px;
	position: absolute;
	pointer-events: none;
  background-color: #f2991f;
}

.change-client-functions {
  position: absolute;
  width: 100%;
  bottom: 5px;
  left: 0;
  display: none;
}

.change-client-functions a {
  padding: 10px;
  background-color: var(--primary);
  color: #fff;
}


/*==========================================================*/
/* NAV TABS */
/*==========================================================*/
.nav-tabs {
    border-color: rgba(162, 162, 162, 0.5);
    border-bottom: 5px solid #f3f3f3;
}
.nav-tabs li .nav-link {
    border: 0px solid transparent !important;
    border-radius: 0;
    white-space: nowrap;
    color: #3e3e3e;

    transition:all 0.1s ease-out;transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.1s ease-out;transition:all 0.2s ease-in-out;
    -moz-transition:all 0.1s ease-out;transition:all 0.2s ease-in-out;
    -o-transition:all 0.1s ease-out;transition:all 0.2s ease-in-out;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs li .nav-link.active {
    border-color: var(--primary);
    background-color: #ecedf0;

    border-top: 5px solid var(--primary) !important;
    margin-bottom: -5px;
}
.nav-tabs li .nav-link:focus,
.nav-tabs li .nav-link:hover {
  color: var(--primary);
  background-color: #ededed;
  border-top: 5px solid var(--primary) !important;
  margin-bottom: -5px;
}

html.dark .nav-tabs {
  border-color: rgba(162, 162, 162, 0.5);
  border-bottom: 5px solid #373e48;
}

html.dark .nav-tabs li .nav-link,
html.dark .nav-tabs li .nav-link:hover {
  background: #373e48;
  color: #fff;
}

html.dark .nav-tabs .nav-item.show .nav-link,
html.dark .nav-tabs .nav-link.active {
    border-color: var(--primary);
    background-color: #1d2127;
    color: var(--primary);
}

html.dark .nav-tabs .nav-link:focus,
html.dark .nav-tabs .nav-link:hover {
  color: var(--primary);
  background-color: #1d2127;
  border-top: 5px solid var(--primary) !important;
  margin-bottom: -5px;
}
html.dark .tab-content {
  background-color: #2d3239;
  border: 1px solid #1a1e23;
}

@media (max-width: 767px) {
  .nav-tabs li .nav-link {
    font-size: 12px;
  }
  /*
  .nav-tabs.gln-nav-tabs .nav-item span {
      display: block;
  }
  */
}

/*==========================================================*/
/* Content body */
/*==========================================================*/
.content-body {
  padding-top: 0;
  padding-bottom: 20px !important;
}

/*==========================================================*/
/* Content Body Header */
/*==========================================================*/
.content-body-header {
  background-color: #fff;
  margin: 0 -40px 40px -40px;
  padding: 10px 40px 0 40px;
  position: relative;
}
@media (min-width: 768px) {
  .content-body-header .buttons .btn-group {
    float: right;
  }
}
@media (max-width: 767px) {
  .buttons .btn span {
    display: none;
  }
}

html.dark .content-body-header {
  background-color: #2a2f37;
}
body.dashboard .content-body-header {
  display: none;
}

/*==========================================================*/
/* Login page */
/*==========================================================*/
body.login {
  background-color: #1d2127;
}
body.login .logo {
  margin: 30px 0 0 12px;
}
body.login .logo img {
  height: 34px;
}

/*==========================================================*/
/* Helpers */
/*==========================================================*/
.hide {
  display: none;
}

html.dark .close {
  color: #fff;
}

.fullscreen {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1021;
  margin: 0;
  padding: 10px;
  background: #f6fbfe;
  overflow-y: scroll;
}

.floating-save {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 999;
}

/*==========================================================*/
/* Table */
/*==========================================================*/
table.table:not(.mb-0) tbody tr.selected:not(.noselect) td {
	background-color: var(--primary);
}
table.table:not(.mb-0) tbody tr.selected:not(.noselect) td:not(.green):not(.red):not(.gray),
table.table:not(.mb-0) tbody tr.selected:not(.noselect) td a:not(.dropdown-item):not(.btn),
table.table:not(.mb-0) tbody tr.selected:not(.noselect) .functions a:not(.btn):hover i {
  color: #fff!important;
}
table.table:not(.mb-0) tbody tr.selected:not(.noselect) .functions a:not(.btn),
table.table:not(.mb-0) tbody tr.selected:not(.noselect) .functions a:not(.btn) i,
table.table:not(.mb-0) tbody tr.selected:not(.noselect) a:not(.btn) i {
  color: #000!important;
}
html.dark table.table {
  color: #808697;
}
html.dark .table a,
html.dark .table a:hover {
	color: var(--primary);
}
html.dark .table .actions a,
html.dark .table .actions-hover a {
	color: #808697;
}
html.dark .table-hover tbody tr:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.09);
}

/* Overview tables */

.table-select th a {
  text-decoration: none;
}
.table-select td {
  vertical-align: middle;
}

/* Responsive table */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
	.table.responsive,
    .table.responsive thead,
    .table.responsive-hide-thead thead,
    .table.responsive tbody,
    .table.responsive tfoot,
    .table.responsive tr,
    .table.responsive th,
    .table.responsive td {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.table.responsive thead tr,
    .table.responsive-hide-thead thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	/* .table.responsive tr { border: 1px solid #ccc; } */

    .table.responsive td:first-child,
    .table.responsive-hide-thead td:first-child {
      border-top: 3px solid #34495e;
    }

	.table.responsive td:not(.not-responsive) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 40%!important;
    text-align: left;
    min-height: 40px;
	}

  .table.responsive.generic-table tbody td {
    text-align: right;
  }

  .table.responsive.client_location_table td:not(.not-responsive) {
    text-align: right;
  }

  .table.responsive td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 10px;
		left: 10px;
		/* width: 40%; */
		padding-right: 10px;
		white-space: nowrap;
    font-weight: 700;
	}

  .table.responsive-hide-thead td:before {
      position: absolute;
      width: 0%;
  }

    /*
	Files being uploaded (dashboard.php & station.php)
	*/
	.table.responsive td:before { content: attr(data-title); }

}

/*==========================================================*/
/* Form */
/*==========================================================*/
.form-group {
  position: relative;
}

.form-control {
  width: 100%;
}

select {
  border-radius: 0px;
}


html.dark select {
  background-color: #282d36;
  border-color: #4b4e54 !important;
  border: 1px solid !important;
  border-width: 1px !important;
  color: #4b4e54 !important;
}
html.dark .btn-group .btn-default,
html.dark .page-link
{
  background-color: #282d36;
  border-color: #4b4e54 !important;
  border: 1px solid !important;
  border-width: 1px !important;
}

.select2-selection--multiple {
  overflow: hidden !important;
  height: auto !important;
  padding-bottom: 4px !important;
}

.select2-selection {
  min-height: 40px;
  border-color: #ECEFF1 !important;
  margin-top: -1px !important;
}

.select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
}

.select2-container .select2-search--inline .select2-search__field {
  width: 100% !important;
}

html.dark .select2-selection,
html.dark .select2-container--default.select2-container--focus .select2-selection--multiple {
  background-color: #282d36;
  border: 1px solid #282d36 !important;
  color: #EEE;
}

html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2e353e;
    border: 1px solid #aaa;
}

html.dark .select2-container--default .select2-search--inline .select2-search__field {

    color: #EEE;
}

.input-group-text {
  font-size: 13px;
  border-radius: 0;
}

select.bg-success,
select.bg-danger,
select.bg-warning
 {
  color: #fff;
}

option {
  background-color: var(--grey) !important;
  color: #333 !important;
}


/*==========================================================*/
/* Modal */
/*==========================================================*/

.modal {
  z-index: 1050;
}

#remoteModalBig {
  z-index: 1051;
}

.modal .modal-header{cursor: move;}

.fullscreen-modal .modal-dialog {
  width: 90%;
  max-width: 90%;
  height: 90%;
  padding: 0;
}

.fullscreen-modal .modal-content,
.halfscreen-modal .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

.halfscreen-modal .modal-dialog {
  width: 55%;
  max-width: 90%;
  height: 90%;
  padding: 0;
}

.bigscreen-modal .modal-dialog {
  width: 70%;
  max-width: 70%;
  height: auto;
  padding: 0;
}

.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 13.5rem);
}

@media (max-width: 768px) {
  .halfscreen-modal .modal-dialog {
    width: 90%;
    max-width: 90%;
    height: 90%;
    margin: 0 auto;
    padding: 0;
  }
}

/*==========================================================*/
/* PROMOTERE */
/*==========================================================*/
ul.promoter li {
  float: left;
  margin-right: 30px;
}
ul.promoter .fa-li {
  top: 0;
}
table.promoter td {
  vertical-align: top !important;
}

/* Status explanation */
ul.promoter .fa-li.status-not-booked  {
  color: var(--gln-grey);
}
ul.promoter .fa-li.status-booked  {
  color: var(--gln-blue);
}
ul.promoter .fa-li.status-approved  {
  color: var(--gln-success);
}
ul.promoter .fa-li.status-partly-available,
ul.promoter .fa-li.status-changed {
  color: var(--gln-yellow);
}
ul.promoter .fa-li.status-rejected  {
  color: var(--gln-orange);
}
ul.promoter .fa-li.status-cancelled  {
  color: var(--gln-red);
}

/*==========================================================*/
/* User online */
/*==========================================================*/
body .user-online {
  background-color:#46a149;
  width:10px!important;
  height:10px;
  border-radius:100%;
  display: inline-block;
}

body .user-offline {
  background-color:red;
  width:10px;
  height:10px;
  border-radius:100%;
  display: inline-block;
}

body .user-away {
  background-color:orange;
  width:10px;
  height:10px;
  border-radius:100%;
  display: inline-block;
}

/*==========================================================*/
/* Buttons */
/*==========================================================*/
.btn {
  border-radius: 1px;
}
a.btn {
  text-decoration: none;
}

.hidden-radio img {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 50px;
  height: auto;
}
.hidden-radio img:hover {
  box-shadow: 0px 0px 20px 1px #d8d8d8;
}

.hidden-radio input {
  position: absolute;
  z-index: 1;
  margin: 10px 0 0 10px;
}

.hidden-radio-selected {
  box-shadow: 0px 0px 10px 1px #d8d8d8;
  border: 1px solid #e3e3e3;
}
.chartjs {
  /* height: 550px !important; */
  min-height: 550px !important;
}
html .btn-secondary {
	background-color: var(--secondary);
	border-color: var(--secondary-dark) var(--secondary-dark) var(--secondary-light);
	color: #FFF;
}
html .btn-secondary:hover,
html .btn-secondary.hover {
	background-color: var(--secondary-light);
	border-color: var(--secondary);
	color: #FFF;
}

html .btn-warning {
	background-color: var(--warning);
	border-color: #fdf983 #fdf983 var(--warning-light);
	color: #585858;
}
html .btn-warning:hover,
html .btn-warning.hover {
	background-color: var(--warning-light);
	border-color: var(--warning) var(--warning) var(--warning);
	color: #585858;
}


/*==========================================================*/
/* GLN styles */
/*==========================================================*/
.gln-badge-icon {
    color: #FFF;
    font-size: 1.3rem;
    border-radius: 50%;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    margin-bottom: 6px;
    padding-top: 9px;
    text-align: center;
}

/*==========================================================*/
/* PAGINATION */
/*==========================================================*/
.pagination li .active,
.pagination li .active:hover,
.pagination li .active:focus {
	color: #FFF;
	background: var(--primary);
	border-color: var(--primary);
}
html.dark .pagination li .active,
html.dark .pagination li .active:hover,
html.dark .pagination li .active:focus {
	background: var(--primary);
	border-color: var(--primary);
}

/* Secondary color for pagination  */

.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #777;
	text-decoration: none;
}

/*==========================================================*/
/* Card */
/*==========================================================*/
.card + .card {
    margin-top: 16px;
    margin-top: 1rem;
}

.card-action-toggle,
.card-action-dismiss {
  font-family: 'Font Awesome 5 Pro';
}

/*==========================================================*/
/* Icon changes */
/*==========================================================*/
.fa, .far, .fas {
    font-family: "Font Awesome 5 Pro";
}


/*==========================================================*/
/* Guide */
/*==========================================================*/
.guide {
  text-align: center;
  margin: 14px 0 24px 0;
}
.guide h4 {
  color: #000;
}
.guide span {
  text-align: center;
  display: inline-block;
  background: #FFF;
  color: #f2991f;
  border: 2px solid #CCC;
  border-color: #f2991f;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  line-height: 52px;
  font-size: 22px;
  font-weight: 700;
  border-width: 4px;
}
html.dark .guide span {
  background: #2e353e;
}
.guide-step-explanation {
  color: #000;
}

/*==========================================================*/
/* Calendar */
/*==========================================================*/

.cardbox-body {
  overflow-x: auto;
  overflow-y: hidden;
}
.calendar-list table {
  border: 1px rgba(162, 162, 162, 0.16) solid;
}
.calendar table thead th {
  width: 14.27%;
  font-weight: bold;
  border: 1px rgba(162, 162, 162, 0.16) solid;
  text-align: center;
}
.calendar table tbody td {
  width: 14.27%;
  height: 150px;
  background-color: #ffffff;
  border: 1px #e9ecef solid !important;
  font-size: 12px;
  vertical-align: top;
  padding-top: 25px;
  padding: 25px 5px 5px 5px !important;
}
.dark .calendar table tbody td {
  background-color: #2e353e;
  border: 1px #262b33 solid !important;
}
.calendar .cardbox .cardbox-body,
.calendar .card .card-body {
    position: relative;
    padding: 16px;
}
.calendar table tbody td .btn,
.calendar table tbody td .availability-element {
  height: 30px;
  margin-right: 40px;
  font-size: 11px;
  display: block;
  padding: 2px;
  padding-left: 4px;
  text-align: left;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.calendar table tbody td .btn span {
  max-width: inherit !important;
  position: absolute;
}
.calendar table tbody td .day {
  position: relative;
  z-index: 2;
  color: #333;
  font-weight: normal;
  height: 30px;
  padding-left: 11px;
  padding-top: 4px;
  width: 30px;
  float: right;
  margin-right: 10px;
  margin-top: -20px;
  z-index: 999;
}
.dark .calendar table tbody td .day {
  color: #ccc;
}
.calendar table tbody td .day:hover {
  text-decoration: underline;
}
.calendar .unselectable {
	background-color: #F3F3F3;
}
.calendar .weekend {
	background-color: #F9F9F9;
}
.calendar .weeknumber {
	color: #aaa;
  font-size: 11px;
  position: relative;
  top: -25px;
  left: 0;
}
.dark .calendar .weeknumber {
  color: #888;
}
.calendar .today .day span {
  color: #FFF;
	background-color: #0088cc;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  height: 30px;
  width: 30px;
  display: table;
}
.calendar .today .day:hover {
  text-decoration: none;
}
.calendar .today .day:hover span {
  background-color: #0099e6;
}
.calendar .date {
  position: absolute;
  width: 90%;
  height: 90%;
  z-index: 1;
}
.calendar-list table tbody td {
  vertical-align: top !important;
  height: auto !important;
  padding: 10px !important;
}
.calendar-element-container {
  display: none;
}
.calendar-element .btn {
  font-size: 9px !important;
  width: 100% !important;
  overflow-x: hidden !important;
}
.calendar-element .btn span {
  width: 200px;
}
.calendar-element .btn .fas, .drop-item-here .btn.calendar-entry .fas {
  margin-right: 5px;
}
.drop-item-here .btn.calendar-entry {
  font-size: 9px !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

.drop-item-here .btn.calendar-entry > span{
  width: 200px;
}

@media (max-width: 768px) {
  .calendar table thead,
  .weeknumber,
  .calendar .unselectable {
    display: none;
  }
  .calendar table tbody td {
    min-width: 100% !important;
    height: 100% !important;
    font-size: 80% !important;
    display: block;
    padding-top: 0px !important;
  }
  .calendar table tbody td .day {
    width: 100% !important;
    margin-right: 0px;
    float: none;
    height: 20px !important;
    padding-left: 0px !important;
    text-align: center;

  }
  .calendar table tbody td .day div {
    display: inline-block;
  }
  .calendar .date {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .calendar .today .day {
    color: #0088cc !important;
  }
  .calendar .today_btn {
    float: right;
    margin-right: 0 !important;
  }
}
@media (min-width: 769px) {
  .calendar .month, .calendar .view,
  .calendar-list .month
   {
    max-width: 120px;
    display: inline-block !important;
  }
  .calendar .view,
  .calendar-list .view {
    max-width: 150px;
    display: inline-block !important;
  }
}

@media (max-width: 990px) {
  .calendar table tbody td {
    min-width: 14.2%;
    height: 60px;
    font-size: 80% !important;
  }
  .calendar table thead th {
    font-weight: 400;
    font-size: 80%;
  }
}

/*==========================================================*/
/* List view */
/*==========================================================*/

.table-display-block {
  float: left;
  display: table;
  margin-right: 10px;
  text-align: left;
}
.table-file-block {
  float: left;
  display: table;
  margin-right: 10px;
  text-align: left;
}
.table-function-block {
  float: left;
  display: table;
  margin-right: 10px;
  text-align: left;
}
.table-filters-block {
  float: left;
  display: table;
  margin-right: 10px;
  text-align: left;
}
.table-filters-block > .input-group-btn,
.table-filters-block > .input-group,
.table-filters-block > div {
  float: left;
  width: auto;
  margin-right: 5px;
}
.table-search-block {
  max-width: 200px;
  float: right;
  display: table;
  padding-top: 0.5rem !important;
}
.table-display-block select,
.table-display-block .select2-selection,
.table-display-block input,
.table-display-block .input-group-prepend,
.table-display-block .input-group-append,
.table-display-block .btn,
.table-display-block .btn-group,
.table-file-block select,
.table-file-block .select2-selection,
.table-file-block input,
.table-file-block .input-group-prepend,
.table-file-block .input-group-append,
.table-file-block .btn,
.table-file-block .btn-group,
.table-function-block select,
.table-function-block .select2-selection,
.table-function-block input,
.table-function-block .input-group-prepend,
.table-function-block .input-group-append,
.table-function-block .btn,
.table-function-block .btn-group,
.table-filters-block select,
.table-filters-block .select2-selection,
.table-filters-block input,
.table-filters-block .input-group-prepend,
.table-filters-block .input-group-append,
.table-filters-block .btn,
.table-filters-block .btn-group {
  height: 33px !important;
  max-height: 33px !important;
  min-height: 33px !important;
  border-color: #ECEFF1;
}
.table-display-block .input-group-btn .btn,
.table-file-block .input-group-btn .btn,
.table-function-block .input-group-btn .btn,
.table-filters-block .input-group-btn .btn {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.table-search-block .input-group-sm {
  height: calc(1.5em + 0.5rem + 2px) !important;
}
button[disabled='disabled'] {
  cursor: not-allowed !important;
}
.table-search-block button,
.table-search-block input,
.table-search-block .btn {
  height: 33px !important;
  max-height: 33px !important;
  min-height: 33px !important;
}

.table-search-block i {
  font-size: 11px !important;
  line-height: 10px !important;
}

.table-search-block .input-group-prepend {
  border: 1px solid !important;
  border-width: 1px !important;
  border-color: #ECEFF1 !important;
  margin: 0 !important;
}
.table-search-block input {
  border: 1px solid !important;
  border-width: 1px !important;
  border-color: #ECEFF1 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.table-search-block .input-group-append {
  border: 1px solid !important;
  border-width: 1px !important;
  border-color: #ECEFF1 !important;
  border-width: 1px !important;
  margin: 0 !important;
}

html.dark .table-search-block .input-group-prepend {
  border-color: #4b4e54 !important;
}
html.dark .table-search-block input {
  border-color: #4b4e54 !important;
}
html.dark .table-search-block .input-group-append {
  border-color: #4b4e54 !important;
}

.table-filters-block .select2-selection--single .select2-selection__rendered {
  line-height: 33px !important;
}

@media only screen and (min-width: 1380px) {
  .table-search-block {
    max-width: 300px;
    float: right;
  }
}
@media only screen and (max-width: 992px) {
  .table-search-block {
    max-width: 200px;
  }
}
@media only screen and (max-width: 768px) {

  .table-function-block,
  .table-filters-block,
  .table-search-block {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .table-filters-block .input-group-btn,
  .table-filters-block .input-group,
  .table-function-block > .input-group-btn a,
  .table-function-block > .input-group-btn .dropdown-menu,
  .table-filters-block > .input-group-btn a,
  .table-filters-block > .input-group-btn .dropdown-menu {
    width: 100% !important;
    float: auto;
  }
}

/*==========================================================*/
/* Content */
/*==========================================================*/
img {
  max-width: 100%;
}
td {
  position: relative;
}

body .border-secondary {
    border:1px solid var(--secondary) !important;
}

body .border-light {
    border:1px solid var(--light) !important;
}

body .border-primary {
  border:1px solid var(--primary) !important;
}


body .text-color-light {
    border:1px solid var(--light) !important;
}

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

body .c-pointer {
    cursor: pointer;
}
body .c-not-allowed {
  cursor: not-allowed;
}


body .background-color-danger {
    background-color: var(--danger);
}
body .background-color-success {
    background-color: var(--success);
}

body .background-color-sm-dark {
  background-color: var(--default-dark);
}


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

body .text-color-danger {
    color: var(--danger) !important;
}

.gln-badge {
	color: #FFF;
	font-size: .9rem;
	border-radius: 1px;
	padding: 4px 10px;
	margin: 0 6px;
}
.gln-badge-large {
  color: #FFF;
	font-size: 1.9rem;
  border-radius: 50%;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 6px;
  padding-top: 6px;
  text-align: center;
}
.gln-badge-icon {
  color: #FFF;
	font-size: 1.3rem;
  border-radius: 50%;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 6px;
  padding-top: 9px;
  text-align: center;
}

/**
 * Navpills
 */
 html.dark .nav-pills .nav-item a {
   color: #fff;
 }
 html.dark .nav-pills .nav-item a.active {
   color: #3e3e3e;
 }

/**
 * Timeline
 */
@media only screen and (max-width: 991px) {
  .timeline .tm-items > li {
    margin: 10px 0;
  }
  .timeline .tm-items > li .tm-info {
    margin: 0 0 5px;
  }
 .timeline .tm-items > li .tm-icon {
   border-width: 2px;
   float: left;
   font-size: 10px;
   height: 20px;
   line-height: 16px;
   margin: 0 5px 0 0;
   padding: 0;
   position: static;
   width: 20px;
 }
}
/**
 * Tables - Datatables
 */
.dataTables_wrapper {
  clear: both; }

.dataTables_filter {
  text-align: center; }
@media only screen and (min-width: 768px) {
  .dataTables_filter {
    float: right; } }
.dataTables_filter label > em {
  color: inherit; }
.dataTables_filter input {
  border: 1px solid rgba(160, 160, 160, 0.25);
  margin-left: 10px;
  padding: 0.25rem .5rem;
  background-color: transparent;
  color: inherit; }

.dataTables_length {
  text-align: center; }
@media only screen and (min-width: 768px) {
  .dataTables_length {
    float: left;
    margin-bottom: 2rem; } }
.dataTables_length select {
  border: 1px solid rgba(160, 160, 160, 0.25);
  margin-right: 10px;
  padding: 0.25rem .5rem;
  background-color: transparent;
  color: inherit; }

.dt-buttons {
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.dataTables_info {
  text-align: center;
  padding-top: .75rem;
}

.dataTables_filter label  {
  display: flex;
  align-items: center;
}

.dataTables_wrapper .dataTables_filter input {
  width: auto !important;
}

@media only screen and (min-width: 768px) {
  .dataTables_info {
    float: left; } }

.dataTables_wrapper .dataTables_paginate {
  text-align: center;
  padding-top: 0.25rem; }

@media only screen and (min-width: 768px) {
  .dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right; }
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 0.25rem .7rem;
  margin-left: .1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #777;
  border: none;
  border-radius: 1px; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff;
  border: 1px solid var(--primary);
  background-color: var(--primary); }

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #777;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff;
  background-color: var(--primary); }

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background-color: var(--primary); }

.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 1em; }

.graph-table {
  display: table;
  margin-bottom: 0;
}

.panel-footer .dataTables_length {
  margin-left: 10.5px;
}

.panel-footer .dataTables_filter {
  margin-right: 10.5px;
}

.dataTables_info {
  margin-left: 20px;
  margin-top: 10px;
}

.dataTables_filter #search {
  border-radius: 6px;
}

.dataTables_paginate {
  margin-right: 20px;
  margin-top: 10px;
}

.dataTables_wrapper {
  overflow-y: auto;
  padding-bottom: 10px;
}
.dataTables_length {
  margin-bottom: 16px;
}
.dataTables_length label {
  margin-bottom: 0;
}
.dataTables_info {
  padding-bottom: 0 !important
}


/* ui-pnotify */
.ui-pnotify-container {
  min-height: 64px !important;
}

/****** Custom checkbox ************/
.gln-checkbox {position: relative;}

.gln-checkbox:after {
  line-height: 1.5em;
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--light);
  border-radius: 0;
  background: #fff;
  position: relative;
}

.gln-checkbox:checked:after {
  content:'\2713';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  text-align: center;
}

/***** Factbox ***/
.fact-box-icon{
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.fact-box-icon-text{line-height: 0;}

.fact-box-icon i{font-size: 20px;}

/****** Select 2 z-index ******/
.select2-container.select2-container--open {
  z-index: 10013;
}

.modal-open .select2-dropdown {
  z-index: 10060;
  position: absolute;
  top: 0;
}

.modal-open .select2-close-mask {
z-index: 10055;
}

/*** Defaault look on containers ****/
.el-default {
  background-color: #FFF;
  border: 1px solid #ccc;
  color: #777;
}

/**** Swal2 z-index override. This is so hight due to modal z-index */
.swal2-container {
    z-index: 9999999 !important;
}
/* Img upload  */

.gln-upload-input {
	position: relative;
	margin-bottom: 16px;
}
.gln-upload-img {
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}
.gln-upload-thumb {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

/* Adjust input and upload button height */
.fileupload-new .input-append .btn-file {
  height: 37px !important;
}

/*Select2 padding fix***/
.select2-container--bootstrap .select2-selection--single {
  padding: 0px 24px 6px 12px;
}

/***
  No underline
 **/

.widget-summary-col a,
.dropdown-toggle {
  text-decoration: none !important;
}

/* TinyMC */
/*
html.dark .tox-editor-container .tox-menubar,
html.dark .tox-toolbar {
  background-color: #282d36;
  color: #fff;
}
html.dark .tox .tox-mbtn {
  color: #fff;
}
*/

.radio-custom {
  padding: 0 0 0 25px !important;
}

/* Bootstrap datetimepicker */
body {
  position:relative;
}
.bootstrap-datetimepicker-widget {
	z-index: 15000 !important;
}
html.dark .datepicker{
  background-color: #171717 !important;
}
html.dark .bootstrap-datetimepicker-widget table tr {
  background-color: #171717 !important;
}
html.dark .bootstrap-datetimepicker-widget table td span:hover,
html.dark .bootstrap-datetimepicker-widget table td i:hover {
  background: #1D2127;
}
html.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after  {
  border-bottom: 6px solid #282c33;
}

.display-none {
  display: none;
}

/* Minicolors */

.minicolors input {
  width: 100px !important;
}

.minicolors-position-top .minicolors-panel {
  top: -184px !important;
  left: 0 !important;
}

.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  left: auto;
  right: 10px;
  top: 10px;
}

.minicolors-swatch {
  margin-right: 1px !important;
  margin-top: -3px !important;
}
.minicolors-input {
  width: 105px !important;
  cursor: pointer;
}

/* Input group */

.input-group-sm input {
  font-size: 11px !important;
  height: 30px !important;
  line-height: 11px !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
}

.input-group-sm .btn {
  font-size: 11px !important;
  height: 30px !important;  
  line-height: 11px !important;
  min-height: 30px !important;  
  padding: 4px 8px !important;
}


.select2-results__options .select2-results__option[aria-disabled=true] {
  display: none !important;
}

.line-through {
  text-decoration: line-through;
}

.scrollable-dropdown {
  max-height: 120px;
  overflow: auto;
}

@media only screen and (max-width: 768px) {
  .text-xs-center {
    text-align: center !important;
  }
  ul.text-xs-center {
    justify-content: center !important;
    float: none !important;
  }

  #chat-area {
    z-index: 9999 !important;
    margin: 0 auto;
    right: 0 !important;
    left: 0 !important;
    bottom:0 !important;
    border-top: 1px solid var(--primary);
		width: 100% !important;
  }
}

.error-shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  animation-iteration-count: 1;
  backface-visibility: hidden;
  perspective: 1000px;
}


.unseen-bubble {
  width: 25px;
  height: 25px;
  background: var(--primary);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 100%;
}

.unseen-bubble-inline {
  width: 15px;
  height: 15px;
  background: var(--primary);
  border-radius: 100%;
}

#chat-bubble {
  position: fixed;
  width: 80px;
  height: 80px;
  background: var(--success);
  color:#fff;
  left: 10px;
  bottom: 50px;
  z-index: 10000;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  cursor: pointer;
}

#chat-area {
  position: fixed;
  width: 400px;
  height: 400px;
  background: #fff;
  right: 20px;
  bottom: 20px;
  -webkit-box-shadow: 5px 5px 15px 1px #FFFFFF;
  box-shadow: 5px 5px 15px 1px #FFFFFF;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 10;
}

#chat-area .go-back {
  font-size: 20px;
  cursor: pointer;
}

#chat-area .chat-message.me {
  background-color: var(--primary);
}

#chat-area .chat-message.other {
  background-color: var(--skin-lighter);
}

#chat-area .chat-message {
  color:#fff;
}

#chat-area .sender-name {font-size: 7px;}

#chat-area .message-writer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  right: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  background-color: #fff;
  overflow: hidden;
}

#chat-area .write{
  height: 230px;
  overflow: auto;
}

#chat-area .chat-list {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

#chat-area .write::-webkit-scrollbar {
  width: 0;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}

#chat-area .message-holder{max-width: 75%;}

#chat-area .write{display: none;}
#chat-area .write.show{display: block;}
#chat-area .chat-list{display: none;}
#chat-area .chat-list.show{display: block; user-select: none;}

.user-in-chat {
  width:20px;
  height: 20px;
  color:#fff;
  background-color: var(--primary);
  border-radius: 100%;
  margin-left: 2px;
  margin-right: 2px;
}

.users-in-chat {
  margin-bottom: 10px;
}


.is_typing {  display: none;}
.typing-bubble span {
  width: 7px;
  height: 7px;
  background-color: var(--primary);
  display: inline-block;
  margin: 1px;
  border-radius: 50%;
}




.typing-bubble span:nth-child(1) {
  animation: bounce 1s infinite;
}
.typing-bubble span:nth-child(2) {
  animation: bounce 1s infinite .2s;
}
.typing-bubble span:nth-child(3) {
  animation: bounce 1s infinite .4s;
}


@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}



@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #999999;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.bg-default-dark {background-color: var(--default-dark);}

.border-primary-bottom {border-bottom: 1px solid var(--primary);}

.overflow-x-hidden {overflow-x: hidden !important;}
.c-move {cursor: move !important;}

.line-through {
  text-decoration: line-through;
}

#timer .timer-text {
  font-size: 20px;
  color:#fff;
}

.btn-toggle:after {
  content: "\f077";
  font-family: "Font Awesome 5 Pro";
  margin-left: 8px;
}

.btn-toggle.collapsed:after {
  content: "\f078";
}

.select2-max-height {
  max-height: 150px;
  overflow: auto;
}


.shepherd-button {
  border-radius: 0px !important;
}

.shepherd-footer {
  margin-left: 0 !important;
  justify-content: space-between;
}
.btn-primary.shepherd-button {margin-left: auto;}
.btn-primary.shepherd-button:not(:disabled):hover,.btn-primary.shepherd-button:hover {
  background-color: #f4a943 !important;
  border-color: #f5af4f #f5af4f #f2991f !important;
  color: #FFF!important;
}