:root {
  --gray: gray;
  --gray-2: #808080;
  --dark-gray: #4b4b4b;
  --dark-gray-2: #3f3f3f;
  --dark-gray-3: #505050;
  --dark-gray-4: #383838;
  --dark-gray-5: #2d2d2d;
  --dark-gray-6: #272727;
  --red: #e42256;
  --orange: #ff834d;
  --yellow: #fec84d;
  --purple: #8c59d8;
  --white: #ffffff;
  --cyan: #00b19c;
  --black: black;
  --black-2: #1f1f1f;
  --black-3: #141414;
  --body-background: #141414;
  --card-background: #2d2d2d;
  --primary-hover: #008b7a;
  --standard-space: 1rem;
  --card-padding: calc(var(--standard-space) * 1.25);
  --hover-background: #4b4b4b;
  --button-transparent: #4d4d4d;
  --radio-background: #2d2d2d;
  --field-background: #212121;
  --placeholder: #848484;
  --pill: #5e5e5e;
  --bg-topbar: #363636;
  --height-topbar: 76px;
  --text-default: #ffffff;
  --text-secondary-light: #a6a6a6;
  --text-secondary: #848484;
  --accent-gray: #707070;
  --accent-primary: var(--cyan);
  --bg-card-light: #363636;

  --tumbler-bg-color: #848484;
  --tumbler-checked-bg-color: #ffffff;
  --tumbler-knob-color: #404040;
  --tumbler-checked-knob-color: #848484;

  --padding-comfortable: 16px;
  --padding-semi-spacious: 24px;
  --padding-spacious: 32px;
  --padding-primary: 8px;

  --radius-primary: 8px;

  --gap-tight: 4px;
  --gap-tight-plus: 6px;
  --gap-primary: 8px;
  --gap-primary-plus: 10px;
  --gap-comfortable: 16px;
  --gap-spacious: 32px;

  --gradient-gray-start: #808080;
  --gradient-gray-end: #6b6b6b;
}

/* Browsers fixes */

input[type="number"] {
  -moz-appearance: textfield;
}

/* Navbar */

.left-side-menu {
  z-index: 1020 !important;
}

.modal,
.modal-dialog {
  z-index: 1050 !important;
}

.navbar-custom {
  display: flex;
  height: var(--height-topbar);
  padding: var(--padding-comfortable, 16px);
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  left: 230px;
}

@media (max-width: 575px) {
  .navbar-custom {
    left: 0;
  }
}

.metismenu {
  margin-bottom: 0;
}

.side-nav-item {
  color: var(--gray) !important;
  text-shadow: #191919 1px 1px 3px;
}

.side-nav-item .active {
  color: var(--white) !important;
}

.side-nav-link {
  font-size: 16px !important;
}

.logo-sm {
  padding-top: 0px !important;
}

.s2-image {
  border-radius: 50%;
  width: 32px !important;
  margin-right: 10px;
}

/* COLORS */

.red {
  color: var(--red);
}

.orange {
  color: var(--orange);
}

.yellow {
  color: var(--yellow);
}

.cyan {
  color: var(--cyan);
}

.purple {
  color: var(--purple);
}

.gray {
  color: var(--gray);
}

.white {
  color: var(--white);
}

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

.bg-dark-gray:focus {
  background: var(--dark-gray-2);
}

.mini-card {
  background: var(--dark-gray-2);
  border-radius: 0.2rem;
  border-width: 0px;
  border-style: solid;
  padding: 0.5rem;
  margin-bottom: 10px;
}

.filter {
  background: var(--cyan);
  border-radius: 0.3rem;
  border-width: 0px;
  border-style: solid;
  padding: 0.5rem;
  margin-bottom: 10px;
}

/* Icons */

.size-lg {
  font-size: 24px !important;
}

.size-lg-safe {
  position: relative;
  top: 2.5px;
  transform: scale(1.5) !important;
  display: inline-block;
}

.size-md {
  font-size: 1.125rem !important;
}

.size-sm-icon {
  font-size: 0.9rem !important;
}

.size-xl-disc {
  font-size: 24px !important;
  margin-left: 3px !important;
  margin-right: 9px !important;
  height: 46px;
}

.size-xl {
  font-size: 30px !important;
}

.bg-none {
  background: none !important;
}

.icon-link {
  color: var(--white);
  cursor: pointer;
  vertical-align: middle;
}

.icon-link:hover {
  color: var(--cyan);
}

.icon-link-light:hover {
  color: var(--dark-gray-5);
}

.btn-icon {
  padding-bottom: 2px !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
  color: var(--white) !important;
}

.btn-icon2 {
  padding: 6px 8px 1px 7px !important;
  color: var(--white) !important;
}

.btn-icon i,
.btn-icon2 i {
  font-size: 24px !important;
}

.custom-btn {
  height: 36px !important;
  width: 24px !important;
  background: none;
  border: none;
}

.card .custom-control-label::before {
  background-color: var(--dark-gray-3);
}

.modal .custom-control-label::before {
  background-color: var(--dark-gray-3);
}

/* Links */

.disabled {
  color: var(--gray);
  pointer-events: none;
  text-decoration: none;
}

.disabled-option {
  background: var(--gray) !important;
  cursor: not-allowed !important;
}

.input-disabled {
  cursor: not-allowed;
  background: var(--gray-2) !important;
  color: var(--white) !important;
  border-color: var(--gray-2) !important;
}

a.active strong.white {
  color: var(--black) !important;
  background-color: var(--white) !important;
}

a.active strong.orange {
  color: var(--black) !important;
  background-color: var(--orange) !important;
}

.card-label span {
  background-color: var(--cyan);
}

.small-avatar {
  border-radius: 50%;
  width: 50px;
  aspect-ratio: 1 / 1;
}

.medium-avatar {
  border-radius: 50%;
  width: 128px;
  aspect-ratio: 1 / 1;
}

.avatar {
  border-radius: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
}

/* Other */

.flex-parent {
  display: flex;
  align-items: center;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.custom-rounded {
  display: inline-block !important;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  white-space: nowrap !important;
  margin-right: 3.5px;
  margin-bottom: 3px;
}

.button {
  text-weight: 600 !important;
}

.btn-purple {
  background: var(--purple);
  border-color: var(--purple);
}

.btn-dark {
  background-color: var(--dark-gray-4);
  border-color: var(--dark-gray-4);
  color: var(--white);
}

.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus,
.btn-dark:disabled,
.btn-dark.active {
  background: var(--dark-gray-3) !important;
  border-color: var(--dark-gray-3) !important;
  color: var(--white) !important;
}

.btn-dark:focus {
  box-shadow: 0 0 0 3px rgba(50, 50, 50, 0.5) !important;
}

.btn-purple:hover,
.btn-purple:active,
.btn-purple:focus,
.btn-purple:disabled {
  background: #7047a6 !important;
  border-color: #7047a6 !important;
  color: unset !important;
}

.btn-purple:focus {
  box-shadow: 0 0 0 3px rgba(112, 71, 166, 0.5) !important;
}

.btn-gray {
  background: #808080;
  transition: none !important;
}

.btn-gray:hover,
.btn-gray:active,
.btn-gray:focus,
.gray-purple:disabled {
  background: linear-gradient(
    180deg,
    var(--gradient-gray-start) 0%,
    var(--gradient-gray-end) 100%
  );
  transition: none !important;
}

.button-gray {
  background: #808080;
  transition: none !important;
}

.button-gray:hover,
.button-gray:active,
.button-gray:focus {
  background: linear-gradient(
    180deg,
    var(--gradient-gray-start) 0%,
    var(--gradient-gray-end) 100%
  );
  transition: none !important;
}

.input-group {
  border: 1px solid var(--dark-gray-5);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.btn-gray-outline {
  background-color: var(--gray);
  border-color: var(--dark-gray-5);
}

.btn-gray-outline:hover,
.btn-gray-outline:active,
.btn-gray-outline:focus {
  background: #6b6b6b;
  border-color: var(--dark-gray-5);
}

.btn-gray-outline:focus {
  box-shadow: 0 0 0 3px rgba(107, 107, 107, 0.5) !important;
}

.date-input-group {
  margin-bottom: 1rem;
  border: 0px solid var(--dark-gray-5);
  border-radius: 0.5rem;
}

.date-input-group > .form-group {
  flex: 1;
  margin: 0;
}

.apply-to-all {
  flex: 2;
}

.apply-to-all > div > button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border: 1px solid var(--dark-gray-5);
}

.date-input-group > .form-group input,
.date-input-group > .form-group select,
.date-input-group > .form-group .select2-selection,
.date-input-group > .form-group .select2-container .select2-selection--single {
  border-radius: 0;
}

.date-input-group > .form-group:first-child input,
.date-input-group > .form-group:first-child select,
.date-input-group > .form-group:first-child .select2-selection,
.date-input-group
  > .form-group:first-child
  .select2-container
  .select2-selection--single {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.date-input-group > .form-group:last-child input,
.date-input-group > .form-group:last-child select,
.date-input-group > .form-group:last-child .select2-selection,
.date-input-group
  > .form-group:last-child
  .select2-container
  .select2-selection--single {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.btn-white-gray {
  background-color: var(--gray-2);
  border-color: var(--gray-2);
  color: var(--black-2) !important;
}

.btn-white-gray:active,
.btn-white-gray.active {
  background-color: var(--white);
  border-color: var(--white);
}

.progress {
  min-height: 12px;
  background: grey;
  border-radius: 6px;
}

.progress-bar {
  background: var(--yellow);
}

.progress-sm {
  min-height: 0px !important;
  height: 4px !important;
}

.album-card {
  border-radius: 0.5rem !important;
}

.album-card > .card-footer {
  border-radius: 0.5rem !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
      .album-card .card-body {
      }

      .text-muted-left {
      }
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .release-texts p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

  .release-texts h4 {
    margin-bottom: 0.25rem;
  }
}

h4 {
  font-size: 1.2rem !important;
}

.card {
  margin-bottom: 0px;
}

.dashboard-card {
  height: 250px !important;
  overflow: auto;
}

.random-block {
  height: 250px;
}

@media (max-width: 991px) {
  .random-block {
    height: 100%;
  }

  .dashboard-card {
    min-height: 100% !important;
  }

  body {
    padding-bottom: 30px;
  }

  .modal-footer {
    padding-bottom: 80px;
  }
}

.text-custom-right {
  text-align: right !important;
}

.navbar-separator {
  border: solid 0.5px #707070;
}

.side-nav-link[aria-expanded="true"] .navbar-flippable-icon {
  transform-origin: center center;
  transform: rotate(180deg);
}

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

@media (min-width: 767.98px) and (max-width: 1028px) {
  .content-page {
    margin-left: 30px;
  }
  .left-side-menu {
    padding: var(--padding-comfortable, 16px) !important;
  }
  body[data-leftbar-compact-mode="condensed"]
    .side-nav
    .side-nav-item
    .side-nav-link {
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .content-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

  .text-custom-right {
    text-align: center !important;
  }

  .nav-tabs.nav-bordered {
    border-bottom: none !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  }

  .nav-tabs.nav-bordered li {
    text-align: center;
  }

  .nav-tabs.nav-bordered li a {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .side-nav-link {
    padding-left: 10px !important;
  }

  .side-nav-second-level a {
    padding-left: 50px !important;
  }

  .button-menu-mobile {
    margin-left: -5px;
  }
}

@media (max-width: 378px) {
  .mt-sm {
    margin-top: 6px;
  }
}

.custom-file-label::after {
  background-color: var(--gray);
  border-radius: 0.5rem;
}

#div_id_territory {
  margin-bottom: 0 !important;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
}

.nav-tabs .nav-link-custom.active {
  background-color: var(--dark-gray-5) !important;
}

.nav-tabs.nav-bordered li a.active {
  border-bottom: 2px solid var(--cyan) !important;
}

.nav-tabs.nav-bordered li a {
  border-bottom: none;
}

.nav-tabs.nav-bordered {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.hide-btn {
  color: var(--gray-2) !important;
  cursor: pointer;
}

select {
  border-radius: 0.5rem;
}

.custom-spinner {
  margin-bottom: 3px !important;
}

.custom-select:disabled {
  background: var(--dark-gray-5);
}

/* Tables */

th {
  font-weight: 600;
  white-space: nowrap !important;
}

td {
  border: none !important;
  vertical-align: middle !important;
}

tr {
  border: none !important;
}

table {
  border-bottom: 1px solid !important;
  border-color: var(--dark-gray-5) !important;
  margin-bottom: 20px !important;
  margin-top: 10px !important;
}

tbody {
  border: 0 !important;
}

.min-width-50 {
  min-width: 50px !important;
}

.min-width-100 {
  min-width: 100px !important;
}

.min-width-120 {
  min-width: 120px !important;
}

.empty-table {
  width: 100%;
  font-style: italic;
  border-bottom: 1px solid !important;
  border-color: var(--dark-gray-5) !important;
  padding-bottom: 20px !important;
}

.nowrap {
  white-space: nowrap !important;
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.close-modal {
  position: absolute;
  right: 10px;
  top: 10px;
}

.custom-file-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#activity-table {
  border-collapse: separate;
  border-spacing: 0 10px;
}

/* Dropdown */

@media (min-width: 601px) {
  .dropdown-menu-custom {
    width: 500px;
  }
}

.dropdown-menu a:hover {
  background: var(--cyan);
}

.dropdown-menu a:active {
  background: var(--cyan);
}

.dropdown-menu a:focus {
  background: var(--cyan);
}

.dropdown-menu {
  border: solid 1px rgba(255, 255, 255, 0.2);
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 7px;
  margin-right: -10px;
}

.bootstrap-select > .dropdown-toggle:after {
  border-style: none !important;
  border-radius: 0.5rem !important;
  height: 24px !important;
  width: 24px !important;
  right: 0px !important;
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23FFFFFF' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
      no-repeat right 0.9rem center/8px 10px,
    no-repeat center right 1.75rem / calc(0.75em + 0.375rem)
      calc(0.75em + 0.375rem) !important;
}

.bootstrap-select > .btn-light {
  background-color: var(--dark-gray-5) !important;
  height: 41px;
  border-style: none !important;
  padding-right: 0px;
  border-radius: 0.5rem !important;
}

/* Customize the select2 box*/

.dan-s2-border {
  position: relative;
  padding-left: 16px;
  white-space: nowrap;
}

.dan-s2-border-vertical {
  position: absolute;
  height: 36px;
  border-left: 1px solid grey;
  top: -26px;
  left: 0;
  z-index: 0 !important;
}

.dan-s2-border-vertical-mini {
  position: absolute;
  height: 26px;
  border-left: 1px solid grey;
  top: -16px;
  left: 0;
  z-index: 0 !important;
}

.dan-s2-border-horizontal {
  position: absolute;
  width: 12px;
  border-bottom: 1px solid grey;
  left: 0;
  top: 10px;
  z-index: 0 !important;
}

@media (min-width: 1367px) and (max-width: 1488px) {
  .dan-request-label {
    font-size: 13.6px !important;
  }
}

.profile-image,
#profile_image {
  width: 128px;
}

#profile_image_small {
  width: 65px;
}

@media (max-width: 420px) {
  .profile-image,
  #profile_image {
    width: 64px;
  }
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 220px !important;
}

.select2-selection--multiple:before {
  content: "";
  position: absolute;
  right: 12px;
  top: 48%;
  border-top: 5px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.card .select2-container.select2-container--disabled .select2-selection {
  background-color: var(--bg-card) !important;
  border-color: var(--input-border-disabled);
}

.card input.form-control:disabled,
.card select:disabled {
  background-color: var(--bg-card) !important;
  border-color: var(--input-border-disabled);
}

.modal input.form-control:disabled,
.modal select:disabled,
.modal textarea.form-control:disabled {
  background-color: var(--bg-card) !important;
  border-color: var(--input-border-disabled);
}

.modal .select2-container.select2-container--disabled .select2-selection {
  background-color: var(--bg-card) !important;
  border-color: var(--input-border-disabled);
}

.select2-container--disabled .select2-selection {
  background-color: var(--bg-card);
  border-color: var(--input-border-disabled);
}

.card div.custom-checkbox label::before,
.card .select2-container .select2-selection {
  background-color: var(--dark-gray) !important;
}

.card input.form-control,
.card select {
  background-color: var(--dark-gray);
}

.card div.custom-checkbox .custom-control-input:checked ~ label::before {
  background-color: var(--primary) !important;
}

.modal div.custom-checkbox label::before,
.modal .select2-container .select2-selection {
  background-color: var(--dark-gray-2) !important;
}

.modal input.form-control,
.modal select,
.modal textarea.form-control {
  background-color: var(--dark-gray-2) !important;
}

.modal div.custom-checkbox .custom-control-input:checked ~ label::before {
  background-color: var(--primary) !important;
}

.s2-image-block {
  position: relative;
  z-index: 1 !important;
}

.select2-container--disabled .select2-selection__clear {
  display: none !important;
}

.select2-container--disabled .select2-selection__choice {
  background: var(--gray) !important;
  cursor: not-allowed !important;
}

.select2-selection__choice {
  max-width: 90% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select2-container .select2-selection--multiple,
.select2-container .select2-selection--single {
  background-color: var(--field-background) !important;
  border: none !important;
}

.select2-container .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
  border-radius: 0.5rem;
}

.select2-selection {
  border-radius: 0.5rem;
  background: var(--dark-gray-5);
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: calc(1.5em + 0.75rem);
}

/*.select2-selection__arrow {*/
/*  border-radius: .5rem !important;*/
/*  height: 35px !important;*/
/*  width: 35px !important;*/
/*  right: 0px !important;*/
/*  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23FFFFFF' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.9rem center/8px 10px, var(--dark-gray-5) no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;*/
/*}*/

/*.select2-selection__arrow b {*/
/*  border-style: none !important;*/
/*}*/

span.select2-selection {
  background: black;
  border-radius: 0.5rem;
  min-height: 41px;
}

.select2-selection__placeholder {
  color: var(--gray-2) !important;
}

input::placeholder {
  color: var(--gray-2) !important;
}

.select2-selection--single {
  padding-top: 2px;
}

/*set modal outside background color */

.modal {
  background: none;
}

.modal-backdrop {
  background: var(--black) !important;
}

.modal-header {
  border-bottom-color: var(--black-2) !important;
  background-color: var(--black-2) !important;
}

.modal-footer {
  border-top: 0;
  padding: 1rem;
}

/* timeline */
.timeline-item-info {
  margin-left: 0 !important;
}

/*.timeline-alt .timeline-item:before {*/
/*    background-color: transparent!important;*/
/*    top: 24px;*/
/*    bottom: -10px;*/
/*    width: 1px;*/
/*}*/

.timeline-item.time-item-v.recent-activity:before {
  background-color: var(--white) !important;
  top: 24px;
  bottom: -10px;
  width: 1px;
}

/*.timeline-item.time-item-v.recent-activity:before::last-child {*/
/*    background-color: transparent!important;*/
/*    top: 24px;*/
/*    bottom: -10px;*/
/*    width: 1px;*/
/*}*/
.timeline-item.time-item-v.recent-activity:last-child::before {
  background-color: transparent !important;
  top: 24px;
  bottom: -10px;
  width: 1px;
}

.timeline-alt {
  padding: 0.375rem;
}

.timeline-alt-h,
.timeline-item.timeline-item-v {
  padding-left: 15px;
}

.timeline-alt.timeline-alt-h {
  border-left: solid 1px white;
  margin-left: 11px;
}

.timeline-item.timeline-item-last {
  position: absolute;
  content: " ";
  height: calc(100% - 13px);
  margin-top: 11px;
  margin-left: -17px;
  /*border-left: solid 3px red;*/
  border-left: solid 3px var(--dark-gray-5);
}

.timeline-item.timeline-item-h:before {
  top: 10px !important;
  left: -16px !important;
  width: 17px;
  height: 1px;
  background-color: white;
}

.timeline-alt-h .timeline-item-h:before {
  top: 10px !important;
  left: -16px !important;
  width: 17px;
  height: 1px;
  background-color: white;
}

.timeline-alt-v .timeline-item-v:before {
  top: 26px;
  bottom: -18px;
  left: 13px;
}

/*.timeline-item.timeline-item-v:last-child::before {*/
/*    height: calc(100% - 39px);*/
/*}*/

.timeline-alt-v .timeline-item-v-2:before {
  top: 26px;
  height: 22px;
  left: 13px;
}

.timeline-alt-v .timeline-item-v-2-0:before {
  top: 26px;
  height: 0;
  left: 13px;
}

.timeline-alt-v .timeline-item-v-3:before {
  width: 0;
  border: none !important;
}

.border-h {
  position: absolute;
  width: 10px;
  border-bottom: 1px solid grey;
  left: -13px;
  top: 50%;
}

.border-v {
  position: absolute;
  height: calc(100% - 7px);
  top: -4px;
  left: 10px;
  border-left: 1px solid grey;
}

.border-v-short {
  height: calc(100% - 31px) !important;
}

.card-border-first {
  top: -20%;
  left: 30px;
  height: 70%;
  width: 42px;
  position: absolute;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;

  z-index: 0 !important;
}

.card-border {
  top: -75%;
  left: 30px;
  height: 125%;
  width: 42px;
  position: absolute;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;

  z-index: 0 !important;
}

.activity-icon {
  color: var(--white) !important;
  margin-top: 4px;
}

.progress-icon {
  color: var(--white) !important;
  margin-top: 4px;
  font-size: 1rem;
}

.bg-white {
  background: var(--cyan) !important;
}

.bg-orange {
  background: var(--orange) !important;
}

.bg-yellow {
  background: var(--yellow) !important;
}

.bg-purple {
  background: var(--purple) !important;
}

.bg-red {
  background: var(--red) !important;
}

.bg-gray {
  background-color: var(--gray) !important;
}

/* drag and dop */
.handle {
  display: inline-block;
  width: 30px;
  padding-top: 5px;
  cursor: grab !important;
}

.handle2 {
  display: inline-block;
  width: 30px;
  cursor: grab !important;
}

.handle:after,
.handle:before {
  display: block;
  content: "";
  padding-top: 5px;
}

.handle:active,
.handle:active:before,
.handle:active:after {
  cursor: grabbing;
}

/*.progress-timeline {*/
/*    padding-top: 3px;*/
/*}*/

.recording {
  margin-top: 10px;
  border-radius: 0px !important;
}

.darkCard {
  background: #000000 !important;
  border-radius: 0.5rem !important;
  padding-top: 30px;
  padding-bottom: 20px;
}

/* DROPZONE */
.dropzone,
.dropzone * {
  box-sizing: border-box;
}

.custom-dz-message {
  padding-top: 30px;
  padding-bottom: 20px;
}

.dropzone {
  position: relative;
  background: var(--dark-gray-5) !important;
}

.dz-details {
  color: var(--white) !important;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: transparent;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  background-color: var(--dark-gray-5);
}

.dz-image {
  background: var(--dark-gray-2) !important;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 120px;
  margin: 0.5em;
}

.dropzone .dz-preview .dz-progress {
  display: block;
  height: 15px;
  border: 1px solid #aaa;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  display: block;
  height: 100%;
  width: 0;
  background: green;
}

.dropzone .dz-preview .dz-error-message {
  color: red;
  display: none;
}

.dropzone .dz-preview.dz-error .dz-error-message,
.dropzone .dz-preview.dz-error .dz-error-mark {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block;
}

.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  width: 54px;
  height: 58px;
  left: 50%;
  margin-left: -27px;
}

.dynamic-form {
}

.close {
  color: var(--white);
}

.close:hover {
  color: grey;
}

/*input[type="radio"]:checked:before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: relative;*/
/*    top: 3px;*/
/*    left: 3px;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    border-radius: 50%;*/
/*    background: #363636;*/
/*}*/

.custom-modal-body {
  max-height: calc(100vh - 200px) !important;
  min-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  background: var(--black-2) !important;
}

.modal-content {
  background: var(--black-2) !important;
}

input:disabled {
  color: var(--gray-2);
  -webkit-text-fill-color: var(--gray-2);
}

.no-transition {
  transition: none !important;
}

.progress-bar-small {
  height: 18px !important;
  margin-bottom: 0.25rem !important;
}

.not-allowed {
  color: grey !important;
  cursor: not-allowed !important;
}

.text-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.template-form {
  display: none;
}

@media (max-width: 575px) {
  body {
    font-size: 14px;
  }
}

.border-lightgrey {
  border-color: #969696 !important;
}

.btn-filter {
  color: var(--white);
  background-color: var(--gray-2) !important;
  border-color: grey;
  border-radius: 0.3rem;
}

.btn-filter:hover {
  background-color: var(--dark-gray-2) !important;
  border-color: var(--dark-gray-2) !important;
}

.btn-filter-active {
  background-color: var(--cyan) !important;
  border-color: var(--cyan);
}

.btn-filter-active:hover {
  background-color: #008b7a !important;
  border-color: #008b7a !important;
}

.btn-sort {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.2rem;
}

.badge-grey {
  color: #fff;
  background-color: rgb(132, 132, 132);
}

.coming-soon {
  display: inline-block;
  color: #fff;
  background-color: rgb(132, 132, 132);
  padding: 0.375em 0.75em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 0.75rem;
}

.text-small {
  font-size: 0.75rem;
}

#timeBlock {
  position: absolute;
  right: -60px;
  width: 60px;
  bottom: -5px;
  font-size: 0.8rem;
  padding: 3px;
  background-color: var(--primary);
  font-weight: 700;
  overflow: hidden;
}

.mt-neg-2 {
  margin-top: -0.75rem;
}

.pl-6 {
  padding-left: 5.2rem;
}

@media (max-width: 1367px) {
  .pl-xl-6 {
    padding-left: 5.2rem;
  }
}

.invalid-feedback {
  margin-bottom: 0.375rem;
}

.dropdown-menu .custom-control-label::before {
  background: var(--gray);
}

.stack-top {
  /* adjust the below to control the shape */
  --d: 0px;
  --g: 25px;
  --c: darkgrey;
  /**/

  position: absolute;
  top: -12px;
  right: -12px;
  font-size: 0.8rem;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: 150px;
  transform-origin: bottom left;
  padding: 0 0 calc(var(--d) + 0px);
  background:
    linear-gradient(
        135deg,
        transparent var(--g),
        var(--c) calc(var(--g) - 0.3px)
      )
      left,
    linear-gradient(
        -135deg,
        transparent var(--g),
        var(--c) calc(var(--g) - 0.3px)
      )
      right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d)),
    0 100%
  );
}

#paypal-button {
  min-width: 13rem;
}

.btn-paypal-back {
  max-height: 2.2rem !important;
  padding: 0.3rem 0.9rem !important;
  border: none;
}

.dropdown.card-widgets {
  position: absolute !important;
  right: 0 !important;
  margin-right: 0.75rem !important;
}

.icon-white::before {
  color: white !important;
}

.side-nav-second-level li a {
  font-size: 16px !important;
}

#rm-eligibility-modal-content.both {
  width: calc(min(90vw, 800px));
  max-width: calc(min(90vw, 800px));
}

#rm-eligibility-modal-content {
  width: calc(min(60vw, 600px));
  max-width: calc(min(60vw, 600px));
}

.modal .rm-modal-content {
  padding: var(--padding-spacious);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-comfortable);
}

.rm-modal-form-container {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-spacious);
}

.rm-modal-form {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-spacious);
  width: 100%;
}

@media (max-width: 800px) {
  .rm-modal-form-container {
    flex-direction: column;
  }

  .rm-modal-form {
    width: 100%;
  }
}

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

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

.encircled {
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-default);
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: var(--text-default);
}

.background-link {
  display: inline-block; /* Ensures the background image and padding apply correctly */
  background-size: cover; /* Makes sure the image covers the entire link area */
  background-position: center; /* Centers the image within the link */
  color: white; /* Text color */
  padding: 10px 20px; /* Adjust padding as needed */
  text-decoration: none; /* Removes underline from the link */
  width: 128px;
  height: 128px;
}

.gap-1 {
  gap: var(--gap-comfortable);
}

.gap-2 {
  gap: calc(var(--standard-space) * 2);
}

.gap-tight {
  gap: var(--gap-tight);
}

.gap-comfortable {
  gap: var(--gap-comfortable) !important;
}

.gap-semi-spacious {
  gap: calc(var(--gap-comfortable) * 1.5);
}

.gap-spacious {
  gap: var(--gap-spacious) !important;
}

.gap-primary {
  gap: var(--gap-primary) !important;
}

.gap-none {
  gap: 0 !important;
}