html,
body,
#app {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.theme-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Exo', 'Roboto', Helvetica, Arial, sans-serif;
}

h1 .material-icons {
  line-height: 3rem;
}

:root {
  --janby-color: #ed8B00;
  --sammic-color: #b50027;
  /* #757575; */
  --theme-color: var(--janby-color); 
  --theme-black: #343a40;
}

.theme-color {
  color: var(--theme-color) !important
}

.theme-border {
  border-color: var(--theme-color) !important;
  border-left-color: var(--theme-color) !important;
  border-right-color: var(--theme-color) !important;
  border-top-color: var(--theme-color) !important;
  border-bottom-color: var(--theme-color) !important;
}

.theme-black-border {
  border-color: var(--theme-black) !important;
  border-left-color: var(--theme-black) !important;
  border-right-color: var(--theme-black) !important;
  border-top-color: var(--theme-black) !important;
  border-bottom-color: var(--theme-black) !important;
}

.theme-color-background {
  background-color: var(--theme-color) !important
}

.theme-black-background {
  background-color: var(--theme-black) !important
}

html,
body,
#app,
.body-background-color {
  background-color: #eff0f0
}

.body-background-color-alpha {
  background-color: rgba(239, 240, 240, 0.85)
}

.body-background-color-border,
.body-background-color-border * {
  text-shadow: 3px 0 #eff0f0, -3px 0 #eff0f0, 0 3px #eff0f0, 0 -3px #eff0f0,
    2px 0 #eff0f0, -2px 0 #eff0f0, 0 2px #eff0f0, 0 -2px #eff0f0,
    1px 1px #eff0f0, -1px -1px #eff0f0, 1px -1px #eff0f0, -1px 1px #eff0f0;
}

.material-icons,
.fa {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /*font-size: 24px; Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  float: left;

  /* Support for all WebKit browsers. */
  font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons.sm {
  font-size: 18px;
}

.material-icons.lg {
  font-size: 32px;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  text-decoration: underline;
  cursor: pointer;
}

.main-spinner , .reload-app-button {
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 3rem;
  height: 3rem;
}

.breadcrumb.text-truncate {
  flex-wrap: nowrap !important;
  overflow-x: auto;
}
.breadcrumb.text-truncate .breadcrumb-item + .breadcrumb-item::before {
  float: unset
}

.b-toaster-bottom-right {
  bottom: 4rem !important
}

.modal.show .modal-content {
  animation: stamp-animation .2s ease
}

.modal-content .modal-header {
  padding: 1rem 1rem;
}

.modal-body {
  background-color: #eff0f0;
  background-repeat: repeat;
}

.leaflet-map-container {
  resize: vertical;
  height: 192px;
  max-height: 60vh;
}

.leaflet-map-container .leaflet-map {
  border-radius: 12px;
}

.leaflet-map-container .leaflet-map .leaflet-control-attribution {
  display: none;
}

.page-link {
  margin-right: 0 !important;
  border-radius: 0;
  color: #343a40 !important;
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, .5) !important;
}

.page-item select {
  background-color: #343a40;
  color: #fff;
  padding-right: 1rem;
  min-width: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>")
}

.btn-dark.custom-file-control:before,
.btn.btn-dark {
  background-color: #fff
}

.page-item.active .page-link {
  color: #fff !important;
  background-color: #343a40 !important;
  border-color: #343a40 !important;
}

.list-group-item.active,
.custom-control-input:checked~.custom-control-label:before {
  background-color: #343a40 !important;
  border-color: #343a40 !important;
}

.b-dropdown button.dropdown-toggle {
  margin-bottom: 0 !important;
}

.dropdown-menu.show {
  max-height: 60vh;
  overflow: auto;
  transition: transform 0s;
}

.btn .icon-pill.right-bottom {
  position: absolute;
  margin-left: 16px;
  margin-top: 24px;
  font-weight: 500;
  background: transparent;
}

.custom-control-label::after {
  cursor: pointer;
}

.editr.bg-white {
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.sticky-background::before {
  content: "";
  position: absolute;
  width: 100%;
  margin-top: -8px;
  height: calc(100% + 10px);
  backdrop-filter: blur(4px);
  background-color: rgba(239, 240, 240, 0.3);
  /* border-bottom: 1px solid #ced4da; */
}

@media (min-width: 728px) {
  table tr td.image-field {
    width: 96px;
  }
}

.form-control {
  background-image: none;
}

.form-control.disabled {
  background: transparent;
}

.form-row,
.form-control.disabled,
.form-control:disabled {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 30%, transparent 0, transparent);
  background-repeat: repeat-x;
  background-size: 3px 1px;
  background-position: bottom;
}

.form-group.content-align-center>.form-row>div {
  display: inline-flex;
  align-items: center;
}

.table th,
.table td {
  vertical-align: middle !important;
  margin-left: attr(data-margin-left);
}

.printer-borders>*:first-child {
  background-color: #fff !important;
  background-image: linear-gradient(135deg, #e2e3e5 50%, transparent 50%), linear-gradient(225deg, #e2e3e5 50%, transparent 50%), linear-gradient(45deg, #e2e3e5 50%, transparent 50%), linear-gradient(-45deg, #e2e3e5 50%, transparent 50%);
  background-position: top left, top left, bottom left, bottom left;
  background-size: 16px 16px;
  background-repeat: repeat-x;
  padding-top: 16px;
  padding-bottom: 16px;
}

.contain-background-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  max-height: 100%;
  max-width: 100%;
}

.cover-background-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.fit-background-image {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  max-height: 100%;
  max-width: 100%;
}

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.tree-container {
  border-radius: 0.25rem !important;
  height: 256px;
  max-height: 256px;
  border: 1px solid #ccc;
}

.drag-container {
  min-height: 32px;
}

.drag-container .drag-node {
  border: 1px solid #ccc;
  min-width: 128px;
}

.drag-container .drag-handle,
.drag-handle {
  cursor: move !important;
}

.drag-container .drag-node.dragging {
  border-style: dashed;
}

.drag-container .drag-handle.dragging,
.drag-container .drag-node.dragging {
  cursor: grabbing;
}

.drag-container .btn-group .drag-handle {
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-color: #ccc;
}

.vc-popover-content button {
  background-color: transparent;
}
.vc-popover-content .vc-weekday {
  text-align: left;
}
.vc-popover-content .is-active {
  background-color: var(--theme-black) !important;
}

.collapse-icon {
  transition: transform .3s ease-out;
  /* transform: scaleY(-1); */
}

.collapsed .collapse-icon {
  /* transform: scaleY(1); */
}

.margin-for-timeline {
  margin-left: calc(20px - 4px)
}

.margin-for-timeline::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 100%;
  background-color: var(--theme-black);
}

.b-custom-control-xl,
.b-custom-control-xl .custom-control-label {
  transform: scale(1.24) translateX(-12%) translateY(-12%);
}

.breadcrumb-item a {
  color: #343a40 !important;
}

.b-form-spinbutton output>div,
.b-form-spinbutton output>bdi {
  line-break: anywhere;
  overflow: hidden;
}

.b-form-datepicker button {
  margin: 0 !important;
}

.w-0 {
  width: 0% !important
}

.w-10 {
  width: 10% !important
}

.w-15 {
  width: 15% !important
}

.w-20 {
  width: 20% !important
}

.minw-10 {
  min-width: 10% !important
}

.minw-10vw {
  min-width: 10vw !important
}

.maxw-10 {
  max-width: 10% !important
}

.maxw-10vw {
  max-width: 10vw !important
}

.minw-15 {
  min-width: 15% !important
}

.maxw-15 {
  max-width: 15% !important
}

.maxw-15vw {
  max-width: 15vw !important
}

.minw-20 {
  min-width: 20% !important
}

.maxw-20 {
  max-width: 20% !important
}

.maxh-20 {
  max-height: 20% !important
}

.minh-20 {
  min-height: 20% !important
}

.minw-25 {
  min-width: 25% !important
}

.maxw-25 {
  max-width: 25% !important
}

.maxh-25 {
  max-height: 25% !important
}

.minw-25vw {
  min-width: 25vw !important
}

.maxw-25vw {
  max-width: 25vw !important
}

.maxh-25vh {
  max-height: 25vh !important
}

.minh-25vh {
  min-height: 25vh !important
}

.minw-50 {
  min-width: 50% !important
}

.maxw-50 {
  max-width: 50% !important
}

.minw-50vw {
  min-width: 50vw !important
}

.maxw-50vw {
  max-width: 50vw !important
}

.maxh-50vh {
  max-height: 50vh !important
}

.minh-50vh {
  min-height: 50vh !important
}

.minw-75 {
  min-width: 75% !important
}

.maxw-75 {
  max-width: 75% !important
}

.minw-75vw {
  min-width: 75vw !important
}

.maxw-75vw {
  max-width: 75vw !important
}

.maxh-75vh {
  max-height: 75vh !important
}

.h-64px {
  height: 64px !important;
}

.resizable-v {
  resize: vertical;
  overflow: auto
}

.resizable-h {
  resize: horizontal;
  overflow: auto
}

.user-events-none {
  user-select: none;
  pointer-events: none;
}

.hide-until-hover-container .hide-until-hover {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.hide-until-hover-container:hover .hide-until-hover {
  opacity: 1;
}

@media print
{    
  .hide-on-print,
  .hide-on-print > * {
      display: none !important;
  }
}

.hide-on-web {
    display: none;
}

.dark-arrow-ended,
.light-arrow-ended,
.white-arrow-ended {
  margin-right: 0.5rem
}
.dark-arrow-ended::after,
.dark-arrow-ended::before,
.light-arrow-ended::after,
.light-arrow-ended::before,
.white-arrow-ended::after,
.white-arrow-ended::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 50%;
  left: 100%;
}
.dark-arrow-ended::after {
  bottom: 0;
  background: linear-gradient(to right bottom, var(--theme-black) 50%, transparent 50%);
}
.light-arrow-ended::after {
  bottom: 0;
  background: linear-gradient(to right bottom, #dee2e6 50%, transparent 50%);
}
.white-arrow-ended::after {
  bottom: 0;
  background: linear-gradient(to right bottom, #fff 50%, transparent 50%);
}
.dark-arrow-ended::before {
  top: 0;
  background: linear-gradient(to right top, var(--theme-black) 50%, transparent 50%);
}
.light-arrow-ended::before {
  top: 0;
  background: linear-gradient(to right top, #dee2e6 50%, transparent 50%);
}
.white-arrow-ended::before {
  top: 0;
  background: linear-gradient(to right top, #fff 50%, transparent 50%);
}

.polaroid {
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
}

.smartphone {
  position: relative;
  margin: auto;
  border: 12px #343a40 solid;
  border-top-width: 30px;
  border-bottom-width: 30px;
  border-radius: 18px;
}

.smartphone:before {
  content: '';
  display: block;
  width: 30px;
  height: 5px;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--theme-color);
  border-radius: 10px;
}

.smartphone::after {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translate(-50%, -50%);
  background: var(--theme-color);
  border-radius: 50%;
}

.pulse-animation,
.v-step__content {
  overflow: visible;
  position: relative
}

.pulse-animation::before,
.v-step__content::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: inherit;
  border-radius: inherit;
  border-color: inherit;
  border-style: solid;
  border-width: .2rem;
  transition: opacity .3s, transform .3s;
  animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  will-change: transform, opacity;
  z-index: -1
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
    transform: scaleY(1)
  }

  50% {
    opacity: 0;
    transform: scaleY(2)
  }

  100% {
    opacity: 0;
    transform: scaleY(4)
  }
}

.stamp-animation {
  animation: stamp-animation .25s cubic-bezier(.39, 1.44, .78, 1.15);
  animation-fill-mode: forwards;
  will-change: opacity, transform;
  opacity: 0;
}

@keyframes stamp-animation {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  10% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-animation,
.v-step {
  animation: fade-animation .5s cubic-bezier(.39, 1.44, .78, 1.25);
  animation-fill-mode: forwards;
  will-change: opacity;
}

@keyframes fade-animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.dissapear-animation {
  animation: dissapear-animation 5s cubic-bezier(.39, 1.44, .78, 1.25);
  animation-fill-mode: forwards;
  will-change: opacity;
}

@keyframes dissapear-animation {

  10%,
  75% {
    opacity: 1;
  }

  0%,
  100% {
    opacity: 0;
  }
}

.bell-animation {
  animation: bell-animation 4s ease-in-out;
  animation-fill-mode: forwards;
  transform-origin: 50% 0%;
  will-change: transform;
}

@keyframes bell-animation {

  0%,
  25%,
  100% {
    transform: rotateZ(0)
  }

  1%,
  5%,
  9%,
  13%,
  17%,
  21% {
    transform: rotateZ(20deg)
  }

  3%,
  7%,
  11%,
  15%,
  19%,
  23% {
    transform: rotateZ(-20deg)
  }
}