.app-cursor {
  cursor: pointer;
}

[v-cloak] {
  display: none;
}

.navbar {
  border-radius: 0;
}

.navbar-end .navbar-item {
  height: 60px;
}

.dark_theme .navbar-end .navbar-item img {
  padding: 0.5em 0em;
}

.dark_theme .sidebar-page .dropdown-content {
  background-color: #1cbc9b;
}

.dark_theme .navbar-link:hover:not(.is-arrowless)::after,
.dark_theme .navbar-dropdown a.navbar-item:focus,
.dark_theme .navbar-dropdown a.navbar-item:hover {
  border-color: #1abc9c;
  color: #1abc9c;
}

.is-hidden-desktop .modal .animation-content {
  width: 100%;
}

a.dropdown-item {
  padding-right: 1em;
}

.ticket-text {
  /* text-align: justify; */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark_theme .button.is-static {
  border-color: transparent;
  background-color: #a2b8bd !important;
}

.dark_theme .new-box {
  background-color: #343c3d;
}

.light_theme.navbar.title.is-5 {
  color: #c9c8b8;
}

.light_theme .highcharts-background {
  fill: #fffdf5;
}

.light_theme .highcharts-container {
  border-radius: 6px;
  background-color: #fffdf5;
}

.light_theme .box,
.light_theme .table {
  background-color: #fffdf5;
}

.light_theme .modal-card-body {
  background-color: #f8f5f0;
}

.dropdown-content .dropdown-item {
  outline: none;
}

.dark_theme .dropdown-item:hover {
  color: #1cbc9b;
}

.dark_theme a.dropdown-item.is-active {
  background-color: #385a7f;
}

.sidebar-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

.sidebar-page .sidebar-layout {
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.profile-card {
  width: 220px;
}

.profile-card .media-content {
  height: 40px;
}

.auto-width .dropdown.is-expanded.is-mobile-modal .dropdown-menu {
  max-width: fit-content;
  min-width: 100%;
}

.auto-width .dropdown.is-expanded.is-mobile-modal .dropdown-menu {
  width: auto;
}

/* .mobile-charts .highcharts-root {
  display: inline;
} */

.mobile-charts .highcharts-container {
  text-align: center;
}

.b-sidebar .sidebar-content.is-static {
  transition: width 150ms ease-out;
}

html,
body {
  height: -webkit-fill-available;
  /* margin: 0; */
}

.section {
  min-height: 100%;
}

@media screen and (max-width: 1023px) {
  .mobile-paddingless {
    padding: 0;
  }

  .b-sidebar .sidebar-content.is-mini-mobile:not(.is-mini-expand) .menu-list li a span:nth-child(2),
  .b-sidebar .sidebar-content.is-mini-mobile.is-mini-expand:not(:hover) .menu-list li a span:nth-child(2) {
    display: none;
  }

  .b-sidebar .sidebar-content.is-mini-mobile:not(.is-mini-expand) .menu-list li ul,
  .b-sidebar .sidebar-content.is-mini-mobile.is-mini-expand:not(:hover) .menu-list li ul {
    padding-left: 0;
  }

  .b-sidebar .sidebar-content.is-mini-mobile:not(.is-mini-expand) .menu-list li ul li a,
  .b-sidebar .sidebar-content.is-mini-mobile.is-mini-expand:not(:hover) .menu-list li ul li a {
    display: inline-block;
  }

  .b-sidebar .sidebar-content.is-mini-mobile:not(.is-mini-expand) .menu-label:not(:last-child),
  .b-sidebar .sidebar-content.is-mini-mobile.is-mini-expand:not(:hover) .menu-label:not(:last-child) {
    margin-bottom: 0;
  }

  .b-sidebar .sidebar-content.is-fullwidth-mobile {
    position: fixed;
    width: 340px;
    max-width: 340px;
  }

  .no-ml-6-mobile,
  .no-ml-5-mobile {
    margin-left: 0 !important;
  }

  .no-pl-6-mobile,
  .no-pl-3-mobile,
  .no-pl-2-mobile,
  .no-pl-5-mobile {
    padding-left: 0 !important;
  }

  .mobile-section {
    padding: 8px;
  }

  .highcharts-container {
    margin: 0 auto;
  }

  .fab-element {
    position: fixed;
    bottom: 5%;
    right: 3%;
    z-index: 9999;
  }

  .fab-element.filter-btn {
    right: 5%;
    bottom: 3%;
  }

  .section {
    min-height: 70%;
  }
}

/*
body>section.section {
    min-width: 400px !important;
} */

.new-grey {
  color: #4a4a4a;
}

.no-decoration {
  text-decoration: none !important;
  cursor: default !important;
}

@media screen and (min-width: 1024px) {

  .b-sidebar .sidebar-content.is-mini:not(.is-mini-expand) .menu-list li a span:nth-child(2),
  .b-sidebar .sidebar-content.is-mini.is-mini-expand:not(:hover) .menu-list li a span:nth-child(2) {
    display: none;
  }

  .hamburger-menu {
    display: none;
  }

  .b-sidebar .sidebar-content.is-mini:not(.is-mini-expand) .menu-list li ul,
  .b-sidebar .sidebar-content.is-mini.is-mini-expand:not(:hover) .menu-list li ul {
    padding-left: 0;
  }

  .b-sidebar .sidebar-content.is-mini:not(.is-mini-expand) .menu-list li ul li a,
  .b-sidebar .sidebar-content.is-mini.is-mini-expand:not(:hover) .menu-list li ul li a {
    display: inline-block;
  }

  .b-sidebar .sidebar-content.is-mini:not(.is-mini-expand) .menu-label:not(:last-child),
  .b-sidebar .sidebar-content.is-mini.is-mini-expand:not(:hover) .menu-label:not(:last-child) {
    margin-bottom: 0;
  }
}

.b-tooltips .b-tooltip:not(:last-child) {
  margin-right: 0.5em;
}

.b-tooltips .b-tooltip {
  margin-bottom: 0.5em;
}

/* #member-vm .is-hidden-desktop .b-tabs ul {
    margin-top: 0;
    margin-left: 0;
} */

.avatar-iam {
  vertical-align: middle;
  width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  border-radius: 50%;
}

.round-img {
  border-radius: 50%;
  margin-right: 8px;
  width: 50px;
  height: 50px;
}

.round-img-small {
  border-radius: 50%;
  margin-right: 8px;
  width: 30px;
  height: 30px;
}

.admin-img {
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

.avatar {
  vertical-align: middle;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  color: gray;
  line-height: 30px;
  text-align: center;
  background: #feebe7;
}

.el-width-user {
  white-space: nowrap;
  width: 170px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.el-extend {
  white-space: nowrap;
  width: 110px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.truncate {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.margin-top-4 {
  margin-top: 5px;
}

.margin-top-16 {
  margin-top: 16px;
}

.margin-top-left {
  margin-top: 8px;
  margin-left: 8px;
}

.see-more-yellow {
  color: #fd9727;
}

.see-more-blue {
  color: #2c98f0;
}

.mdi-light-green {
  color: #50ae54;
}

.mdi-light-red {
  color: #f2453d;
}

.mdi-light-yellow {
  color: #fd9727;
}

.mdi-light-blue {
  color: #2c98f0;
}

.mdi-light-inactive {
  color: rgba(0, 0, 0, 0.26);
}

.material-icons.orange600 {
  color: #fb8c00;
}

article.border-blue {
  border-bottom: solid 2px #2c98f0;
}

article.border-yellow {
  border-bottom: solid 2px #fd9727;
}

article.border-red {
  border-bottom: solid 2px #f2453d;
}

article.border-green {
  border-bottom: solid 2px #50ae54;
}

article.border-blue-thick {
  border-left: solid 4px #2c98f0;
}

article.border-yellow-thick {
  border-left: solid 4px #fd9727;
}

article.border-red-thick {
  border-left: solid 4px #f2453d;
}

article.border-green-thick {
  border-left: solid 4px #50ae54;
}

.numberCircle {
  width: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #666;
}

.navbar-item>.dropdown>.dropdown-menu {
  margin-left: 5px !important;
}

.video-js {
  width: 100%;
  height: calc(100vh - 40px);
}

.video-player-item {
  background: black;
}

.progress-wrapper {
  width: 250px;
  height: 25px;
  display: inline-block;
  margin-bottom: 10px !important;
}

.icon-rounded {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.8em 0.9em;
}

/* User */

.layout {
  height: 100vh;
  width: 100vw;
  margin: 16px;
}

.user-body {
  height: 100%;
  width: 100%;
}

.columns.users {
  height: 100%;
  margin: 2px 12px;
}

.column.background1 {
  background-color: white;
}

.column.background2 {
  background-color: white;
  border-left: solid 1px lightgrey;
}

.column.no-scroll {
  overflow: auto;
}

div.loading-div {
  width: 120px;
  height: 60px;
  position: fixed;
  /*it can be fixed too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

/* Enter and leave animations can use different */

/* durations and timing functions.              */

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active below version 2.1.8 */
  {
  transform: translateX(50px);
  opacity: 0;
}

.user-notification {
  position: fixed;
  top: 10px;
  right: 0;
  width: 400px;
  height: fit-content;
  margin-right: 10px;
  z-index: 40;
}

.fab {
  width: 60px;
  height: 60px;
  background-color: #209cee;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 #666;
  transition: all 0.1s ease-in-out;
  font-size: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  position: fixed;
  right: 50px;
  bottom: 50px;
}

.fab:hover {
  box-shadow: 0 6px 14px 0 #666;
  transform: scale(1.05);
}

.c2icons {
  width: 50px;
  height: 50px;
  background-color: #eac335;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 #666;
  transition: all 0.1s ease-in-out;
  color: white;
}

.inner {
  position: absolute;
  background-color: #2c98f0;
}

.inner_more {
  position: absolute;
  background-color: #00b89c;
}

.outer {
  position: relative;
  margin-top: 20px;
}

.rotate {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  float: left;
}

.rotate-clock {
  /* Safari */
  -webkit-transform: rotate(90deg);
  /* Firefox */
  -moz-transform: rotate(90deg);
  /* IE */
  -ms-transform: rotate(90deg);
  /* Opera */
  -o-transform: rotate(90deg);
  float: left;
}

.rotate-180 {
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  float: left;
}

.rotate-270 {
  /* Safari */
  -webkit-transform: rotate(270deg);
  /* Firefox */
  -moz-transform: rotate(270deg);
  /* IE */
  -ms-transform: rotate(270deg);
  /* Opera */
  -o-transform: rotate(270deg);
  float: left;
}

.app-sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.app-main {
  margin-left: 160px;
  /* Same as the width of the sidenav */
  font-size: 28px;
  /* Increased text to enable scrolling */
  padding: 0px 10px;
}

.small-thick-scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #f5f5f5;
}

.small-thick-scroll::-webkit-scrollbar {
  width: 1px;
  height: 10px;
  background-color: #f5f5f5;
}

.small-thick-scroll::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #666;
}

.small-thin-scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #f5f5f5;
}

.small-thin-scroll::-webkit-scrollbar {
  width: 1px;
  height: 4px;
  background-color: #f5f5f5;
}

.small-thin-scroll::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #666;
}

td,
th {
  white-space: nowrap;
  overflow: visible;
}

.zui-wrapper {
  position: relative;
}

.zui-scroller {
  margin-left: 141px;
}

.zui-sticky-col {
  left: 0;
  position: absolute;
  top: auto;
}

span.material-icons {
  display: inline-flex;
  vertical-align: middle;
}

div.material-icons {
  display: inline-flex;
  vertical-align: middle;
}

table th a {
  opacity: 0;
}

table th:hover a {
  opacity: 1;
}

.fab-element {
  position: fixed;
  bottom: 5%;
  right: 3%;
}

.fab-element2 {
  position: fixed;
  bottom: 12%;
  right: 5%;
}