/*
 * General
 */

:root {
  --spacing: .25rem;
}

html {
  font-size: 10px !important;
}

.maxh-10 {
  max-height: 10% !important;
}

.maxh-300{
  max-height: 300px !important;
}

.oy-scroll {
  overflow-y: scroll;
}

.oy-auto {
  overflow-y: auto;
}

.thin-scrollbar {
  scrollbar-width: thin;
}

.h-100 {
  height: 100% !important;
}

.w-full {
  width: 100% !important;
}

.w-90 {
  width: 90% !important;
}

.w-80 {
  width: 80% !important;
}

.w-50 {
  width: 50% !important;
}

.h-48 { 
  height: calc(var(--spacing)*48)
}

.h-64 { 
  height: calc(var(--spacing)*64)
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  line-height: 24px;
}

.h4, h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

p {
  line-height: 16px;
}

body {
  background: #f5f5f7;
}

.wrapper .content-wrapper {
  background-color: transparent !important;
}

.wrapper {
  background-color: transparent !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.5rem !important;
}

.m-2 {
  margin: 1rem !important;
}

.m-3 {
  margin: 1.5rem !important;
}

.m-4 {
  margin: 2rem !important;
}

.m-5 {
  margin: 2.5rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-2 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-3 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-4 {
  margin-right: 2rem !important;
  margin-left: 2rem !important;
}

.mx-5 {
  margin-right: 2.5rem !important;
  margin-left: 2.5rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-2 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-3 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-4 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.my-5 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.5rem !important;
}

.mt-2 {
  margin-top: 1rem !important;
}

.mt-3 {
  margin-top: 1.5rem !important;
}

.mt-4 {
  margin-top: 2rem !important;
}

.mt-5 {
  margin-top: 2.5rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.5rem !important;
}

.me-2 {
  margin-right: 1rem !important;
}

.me-3 {
  margin-right: 1.5rem !important;
}

.me-4 {
  margin-right: 2rem !important;
}

.me-5 {
  margin-right: 2.5rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 1rem !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-3 {
  margin-bottom: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

.mb-5 {
  margin-bottom: 2.5rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-2px {
  margin-left: 2px !important;
}

.ms-1 {
  margin-left: 0.5rem !important;
}

.ms-2 {
  margin-left: 1rem !important;
}

.ms-3 {
  margin-left: 1.5rem !important;
}

.ms-4 {
  margin-left: 2rem !important;
}

.ms-5 {
  margin-left: 2.5rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.5rem !important;
}

.p-2 {
  padding: 1rem !important;
}

.p-3 {
  padding: 1.5rem !important;
}

.p-1 {
  padding: 2rem !important;
}

.p-5 {
  padding: 2.5rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-2 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-3 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-4 {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.px-5 {
  padding-right: 2.5rem !important;
  padding-left: 2.5rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-2 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-3 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-4 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-5 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.5rem !important;
}

.pt-2 {
  padding-top: 1rem !important;
}

.pt-3 {
  padding-top: 1.5rem !important;
}

.pt-4 {
  padding-top: 2rem !important;
}

.pt-5 {
  padding-top: 2.5rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.5rem !important;
}

.pe-2 {
  padding-right: 1rem !important;
}

.pe-12 {
  padding-right: 12px !important;
}

.pe-3 {
  padding-right: 1.5rem !important;
}

.pe-4 {
  padding-right: 2rem !important;
}

.pe-5 {
  padding-right: 2.5rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 1rem !important;
}

.pb-3 {
  padding-bottom: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 2rem !important;
}

.pb-5 {
  padding-bottom: 2.5rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.5rem !important;
}

.ps-2 {
  padding-left: 1rem !important;
}

.ps-3 {
  padding-left: 1.5rem !important;
}

.ps-4 {
  padding-left: 2rem !important;
}

.ps-5 {
  padding-left: 2.5rem !important;
}

body {
  padding-right: 0 !important;
}

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

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

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

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

.fs-12 {
  font-size: 1.2rem;
}

.fs-15 {
  font-size: 1.5rem;
}

.fs-2 {
  font-size: 2rem;
}

.fs-25 {
  font-size: 2.5rem;
}

.content {
  margin-bottom: 50px;
}

.text-neutral {
  color: #333 !important;
}

@media (min-width: 1700px) {
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

.main-header .logo-lg {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.logo-lg img {
  display: block;
  margin-left: -16px;
  margin-right: auto;
}

.left-bordered {
  border-left: 1px solid #c2c2c2;
}

.fixed {
  position: fixed;
}

.main-header .logo {
  background-color: #3c8dbc !important;
  height: 52px;
  padding: 0 0 0 20px;
}

.navbar-form {
  margin-top: 10px;
}

.fa-grey {
  color: #555555;
}

.fa.fa-check-circle {
  color: #00a65a;
}

.fa.fa-times-circle {
  color: #f39c12;
}

.margin-r-20 {
  margin-right: 20px;
}

.margin-l-20 {
  margin-left: 20px;
}

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

.padding-5 {
  padding: 5px;
}

.login-box-body .error {
  color: red;
  padding-left: 1em;
  margin-bottom: 15px;
}

hr {
  border-color: #ddd;
}

a {
  color: #2887bf;
}

.space-bottom {
  padding-bottom: 1em;
}

.float-right {
  float: right;
}

.no-padding-left {
  padding-left: 0px;
}

.no-padding-right {
  padding-right: 0px;
}

.no-margin {
  margin: 0;
}

.no-margin-left {
  margin-left: 0px;
}

.no-margin-right {
  margin-right: 0px;
}

.chosen-select.filter {
  width: 100%;
}

.btn-block-m {
  display: block;
  width: 82px;
}

.bg-cloud {
  background-color: #009688 !important;
  color: white;
}
.bg-cloud:hover {
  color: white;
}

.bg-offline {
  background-color: #5f95a2 !important;
  color: white;
}
.bg-offline:hover {
  color: white;
}

.bg-ingesting {
  background-color: #7b5c00 !important;
  color: white;
}
.bg-ingesting:hover {
  color: white;
}

.gravity-color {
  background-color: #e91e63 !important;
  color: white;
  border-color: #ec427c !important;
}

.gravity-color:hover {
  background-color: #bf1952 !important;
  color: white;
}

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

.align-btn-center {
  line-height: 30px;
}

.align-left {
  text-align: left;
}

.filters-toolbar .v-select__selections .fa-align-middle,
.fa-align-middle {
  line-height: 12px;
}

.filters-toolbar .v-select__selections {
  line-height: 12px;
}

.filters-toolbar.table-striped.table-condensed.table-hover th.selector {
  padding-left: 16px;
}

.table-suggestion.table-hover > tbody > tr:nth-of-type(even):hover {
  background-color: #f5f5f5;
}

.table-suggestion.table-striped>tbody>tr:nth-of-type(even) {
  background-color: #fff;
}

.program_box .table-bordered > tbody > tr > td.selector {
  padding: 15px;
}

#dropdownclientorder_ul {
  overflow-x: hidden;
  max-height: 400px;
}

.observation {
  font-size: 12px;
}

.content-header > h1 {
  font-size: 18px;
}

.table-fixed {
  table-layout: fixed;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0;
  margin-left: 0;
}

.flex-grow {
  flex-grow: 1;
}

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-20 {
  gap: 20px;
}

.row-flex .flex-col-lg-3 {
  flex: 0 1 calc(33.333% - 16px);
  min-width: 0;
}

.row-flex > [class*="col-"] {
  display: flex;
  padding-left: 0;
  padding-right: 0;
}

.dir-col {
  flex-direction: column;
}

.row-flex .inline {
  display: inline-block;
  vertical-align: middle;
}

.row-flex .full-width {
  width: 100%;
}

.form-horizontal .row-flex .form-group {
  margin-left: 0;
  margin-right: 0;
}

.col-wrapper {
  padding: 0 12px;
}

.dropdown-flex {
  top: 36px;
  left: 31%;
  padding: 2px 0;
}

.dropdown-flex .btn-dropdown {
  text-align: left;
}

.justify-self-end {
  justify-self: flex-end !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-evenly {
  justify-content: space-evenly;
}

.space-around {
  justify-content: space-around;
}

.align-center {
  align-items: center !important;
}

.self-centered {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.self-end {
  align-self: end;
}

.align-end {
  align-items: flex-end !important;
}

.content-center {
  align-content: center !important;
}

.content-end {
  align-content: flex-end !important;
}

.flex-full {
  flex: 0 0 100%;
}

.flex-wrap-text {
  flex: 1;
  min-width: 0; /* Important for text-overflow to work */
  margin-right: 8px;
  /* Ellipsis configuration */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.flex-no-wrap-shrink {
  flex-shrink: 0; /* Prevent label from shrinking */
  white-space: nowrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex {
  display: flex;
}

.mw-90 {
  max-width: 90% !important;
}

.norm .cpl_names {
    font-size: 9px;
    padding-top: 5px;
}

/*
 * Index page
 */
.box-main-theme {
  border-top-color: #002fa7;
}

.box-legacy-theme {
  border-top-color: #1b1a28;
}

.title-activity {
  margin-top: 0px;
}

/*
 * Catalog page
 */

.row .col-no-padding {
  padding: 0 12px;
}

/* Select filter user catalog */
.nb-title {
  margin-top: 10px;
}

.select-filter-catalog {
  margin-bottom: 10px;
}

/* Title suggest */
.title-suggestions li {
  padding: 0;
}

.title-suggestions li a {
  font-size: 18px;
  display: block;
  line-height: 42px;
  height: 42px;
  padding: 0px 16px;
}

.title-suggestions li a small {
  margin-top: 11px;
  font-size: 80%;
}

.title-suggestions li a .pull-right {
  margin-right: 10px;
}

.title-suggestions li a .label {
  right: 0px;
  top: 0;
  position: absolute;
}

.title-suggestions li a:focus,
.title-suggestions li a:hover {
  background-color: #72afd2;
  color: white;
}

.title-suggestions li img {
  height: 40px;
  width: 28px;
  float: left;
  margin-top: 3px;
  margin-right: 10px;
  padding-bottom: 4px;
}
/* Title Contract */

.title-contract-exceed {
  background-color: #ef9a9a !important;
}

/* Title list */
.title-list li {
  padding: 0;
}

.title-list li a {
  font-size: 18px;
  display: block;
  line-height: 42px;
  height: 42px;
}

.title-list li a small {
  margin-top: 11px;
  font-size: 80%;
}

.title-list li a .pull-right {
  margin-right: 10px;
}

.title-list li a .label {
  right: 0px;
  top: 0;
  position: absolute;
}

.title-list li a:focus,
.title-list li a:hover {
  background-color: #72afd2;
  color: white;
}

.title-list li img {
  height: 40px;
  width: 28px;
  margin-left: 3px;
  margin-right: 10px;
  padding-bottom: 4px;
}

.search li a {
  padding-left: 20px;
}

#search-btn {
  border-color: #d2d6de;
}

.search-line {
  padding-bottom: 1.5em;
}

#box-suggest {
  padding: 0;
}

#box-suggest ul {
  width: 100%;
  position: absolute;
  z-index: 100;
}

#bundles {
  overflow: auto;
  min-height: 60px;
  max-height: 300px;
  padding: 0px;
  margin: 0px;
  scrollbar-width: thin;
}

#bundles .bundle-item {
  padding: 4px 0;
}

.text-centered {
  text-align: center;
}

/*
 * Profile page
 */
select.set-lang {
  height: 20px;
  line-height: 20px;
}

.profile-user-img-wrapper {
  height: 100px;
  width: 100px;
  position: relative;
  margin: 0 auto;
}

.profile-user-img {
  overflow: hidden;
  height: 100px;
  position: relative;
}

.profile-user-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.profile-user-img-wrapper .edit {
  position: absolute;
  right: 0;
  bottom: 0;
}

/*
 * Stats page
 */

.catalog-pie-chart {
  max-height: 180px;
  max-width: 380px;
}

/*
 * order_detail page
 */

.table-segments-read table tr {
    background: linear-gradient(90deg, rgba(60, 141, 188, 0.3) 0%, rgba(60, 141, 188, 1) 100%);
}

.table-segments-read table tr td {
    padding-left: 0;
    padding-right: 0;
    border-top: none;
    height: 25px;
}

.no-view-cell {
    background-color: rgba(0, 0, 0, 0.5);
}

/*
 * order_history page
 */

.info-label {
  margin-top: -10px;
}

.info-value {
  margin-top: -10px;
}

.info-value-cdc {
  margin-top: -15px;
}

.info-comment {
  margin-top: -25 px;
}

.info-marge-modal {
  padding: 20px 15px;
}

.info-marge-modal-textarea {
  padding: 30px 15px 15px 15px;
}

.info-label-eta {
  padding-top: 10px;
  padding-left: 5px;
}

.full button span {
  background-color: limegreen;
  border-radius: 2rem;
  color: black;
}

.partially button span {
  background-color: orange;
  border-radius: 2rem;
  color: black;
}

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

.strong {
  font-weight: 600;
}

/*
 * order_history page
 */

.button-primary-strong {
  background-color: #0073b7;
  color: #fff;
}

.button-primary-strong:hover {
  background-color: rgba(0, 115, 183, 0.7);
  color: #fff;
}

/** KDM **/

.kdm_room-suggestions {
  margin-bottom: 0px;
}
.kdm_room-suggestions li {
  color: #3c8dbc;
}
.kdm_room-suggestions li:hover {
  color: #72afde;
}
/*** PANEL INFO ***/

.panel-heading {
  padding: 10px 15px 0px 15px;
}

.panel-info {
  border-color: #3071a9;
}

.with-nav-tabs.panel-info .panel-heading {
  background-color: #3c8dbc;
  overflow: auto;
  padding: 10px;
}

.detail-tabs-nav .nav-tabs > li.hiventy_panel.active > a,
.detail-tabs-nav .nav-tabs > li.hiventy_panel.active:focus > a,
.detail-tabs-nav .nav-tabs > li.hiventy_panel.active:hover > a {
  background-color: #c4057b;
  color: #fff;
}

.detail-tabs-nav .nav-tabs > li.hiventy_panel.active,
.detail-tabs-nav .nav-tabs > li.hiventy_panel.active:focus,
.detail-tabs-nav .nav-tabs > li.hiventy_panel.active:hover {
  border-bottom: 3px solid #c4057b;
}

.detail-tabs-nav .nav-tabs > li.admin_panel.active,
.detail-tabs-nav .nav-tabs > li.admin_panel.active:focus,
.detail-tabs-nav .nav-tabs > li.admin_panel.active:hover {
  border-bottom: 3px solid #333;
}

.detail-tabs-nav .nav-tabs > li.admin_panel.active > a,
.detail-tabs-nav .nav-tabs > li.admin_panel.active:focus > a,
.detail-tabs-nav .nav-tabs > li.admin_panel.active:hover > a {
  background-color: #c4057b;
  color: #fff;
}

.detail-tabs-nav .nav-tabs > li.active,
.detail-tabs-nav .nav-tabs > li.active:focus,
.detail-tabs-nav .nav-tabs > li.active:hover {
  border-top-color: transparent;
  border-bottom: 3px solid #3c8dbc;
}

.detail-tabs-nav .nav-pills > li > a:first-child {
  border-radius: 10px 0 10px 0;
}


.detail-tabs-nav, #content-tabs {
  margin-bottom: -4px;
  padding-top: 20px !important;
}

.detail-tabs-nav .nav-tabs {
  border-bottom: none;
}

.detail-tabs-nav .nav-tabs li {
  margin-bottom: 0;
}

.detail-tabs-nav .nav-tabs li a {
  color: #fff;
  font-weight: 600;
  margin-right: 0;
}

.detail-tabs-nav .nav-tabs li.active {
  border-bottom: #3c8dbc 3px solid;
}

.detail-tabs-nav .nav-tabs li.active a,
.detail-tabs-nav .nav-tabs li a:hover {
  color: #3c8dbc;
}

.localized-info-tabs-nav {
  margin-bottom: -8px;
  padding-top: 20px !important;
}

.localized-info-tabs-nav .nav-tabs li {
  margin-bottom: 0;
}

.localized-info-tabs-nav .nav-tabs li a {
  font-weight: 600;
  margin-right: 0;
}

.localized-info-tabs-nav .nav-tabs li.active {
  border-bottom: #3c8dbc 3px solid;
}

.localized-info-tabs-nav .nav-tabs li.active a, .localized-info-tabs-nav .nav-tabs li a:hover {
  color: #3c8dbc;
}

#dropdown-menu-more-tabs-shown li.active a {
  color: #fff;
}

.localized-info-tabs-nav .nav-tabs>li.active,
.localized-info-tabs-nav .nav-tabs>li.active:focus,
.localized-info-tabs-nav .nav-tabs>li.active:hover {
  border-top-color: transparent;
  border-bottom: 3px solid #3c8dbc;
}

.localized-info-tabs-nav .nav-pills>li>a:first-child {
  border-radius: 10px 0 10px 0;
}

#asset-title-summary {
  border-top: 1px solid #fff;
}

#material-detail-tabs {
  margin-bottom: 1px;
}

.with-nav-tabs.panel-info .panel-body {
  background-color: #f4f4f4;
}

.with-nav-tabs.panel-info .nav-tabs {
  border-bottom: 0px;
}

.with-nav-tabs.panel-info .nav-tabs > li > a,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
  color: #fff;
}

.with-nav-tabs.panel-info .nav-tabs > .open > a,
.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
  color: #fff;
  background-color: #3071a9;
  border-color: transparent;
}

.with-nav-tabs.panel-info .nav-tabs > li.active > a,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
  color: #31708f;
  background-color: #f4f4f4;
  border-color: #bce8f1;
  border-bottom-color: transparent;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
  color: #31708f;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-info
  .nav-tabs
  > li.dropdown
  .dropdown-menu
  > li
  > a:focus {
  background-color: #bce8f1;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-info
  .nav-tabs
  > li.dropdown
  .dropdown-menu
  > .active
  > a:hover,
.with-nav-tabs.panel-info
  .nav-tabs
  > li.dropdown
  .dropdown-menu
  > .active
  > a:focus {
  color: #fff;
  background-color: #31708f;
}

.nav-tabs {
  display: inline-block;
}

.navbar-nav > li > .dropdown-menu {
  right: 0;
  left: unset;
}

/*
 * Page of a title
 */
.physical-icon {
  color: #f39c12;
}

.cold-icon {
  color: #00c0ef;
}

.catalog-icon {
  color: #0073b7;
}

.cloud-icon {
  color: #009688;
}

.fire-icon {
  color: #dd4b39;
}

.data-icon {
  color: #5d6d7e;
}

.delete-icon {
  color: #666;
}

.nearline-icon {
  color: #8e24aa;
}

.offline-icon {
  color: #5f95a2;
}

.ingesting-icon {
  color: #7b5c00;
}

.unknown-icon {
  color: #605ca8;
}

.info-icon {
  color: #3c8dbc;
}

.unusable-icon {
  color: red;
}

a[data-toggle='collapse'],
[aria-controls],
a[data-toggle='drawer'] {
  cursor: pointer;
}

h1.asset-single-header i.fa-chevron-right {
  font-size: 12px;
  color: #666;
  margin: 0 4px;
  vertical-align: middle;
}

.asset-single-header {
  font-size: 18px;
  margin: 0;
}

.hidden-master,
.hidden-lang,
.hidden-owner,
.hidden-standard,
.hidden-support {
  display: none !important;
}

.loading-col img {
  display: block;
  margin: 1em auto;
  width: 50px;
}

.title-filters .modified {
  border: 1px solid #a94442;
}

.title-filters .selected-filter {
  border-radius: 3px;
}

.title-filters .selected-filter .cancel .fa.fa-times-circle {
  color: #a94442;
  margin-left: 10px;
}

.title-filters {
  margin-bottom: 5px;
}

.title-actions > div {
  margin-right: 5px;
  display: inline-block;
}

.title-actions div.pull-right {
  float: none !important;
}

@media (min-width: 1200px) {
  .title-actions div.pull-right {
    float: right !important;
  }
}

/* Title detail */
.title-detail-editorial.jumbotron {
  padding-top: 0;
  background: none;
}

#detail-header {
  background: linear-gradient(#ecf0f500, #3c8dbc);
}

#detail-header-material-title,
#detail-header-material-subtitle {
  color: #fff;
}

#detail-header-material-title .label {
  font-size: 12px;
  vertical-align: middle;
}

#detail-header-material-title code {
  font-size: 12px;
  vertical-align: middle;
}

#detail-header .nav-tabs li a {
  padding: 6px 15px;
}

#detail-header .nav-tabs > li > a.drawer-btn {
  border-radius: 6px;
  padding: 2px 6px;
  margin: 4px 0 0 8px;
  background-color: #fff;
  color: #000;
  font-weight: 400;
}

#asset-summary::before {
  content: '\002022  ';
  font-size: 30px;
}

.btn-material-dropdown {
  width: 100%;
}

.dropdown-menu li:not(:last-child) {
  margin-bottom: 3px;
}

.title-detail-tab-content .panel-heading {
  padding: 10px 15px;
  font-size: 1.1rem;
}

#detail-header .label.label-default {
  background-color: #fff;
  color: #444;
}

#detail-header small {
  color: #626262;
}

.title-detail-tab-content.tab-content > .tab-pane {
  display: block;
  height: 0;
  overflow: hidden;
}

.title-detail-tab-content.tab-content > .tab-pane.active {
  height: auto;
}

.title-detail-info span.bullet:not(:first-child):before,
.title-detail-info small.bullet:not(:first-child):before,
.material-detail-info span.bullet:not(:first-child):before,
.material-detail-info small.bullet:not(:first-child):before {
  content: '  \002022  ';
}

.material-detail-info a {
  color: inherit;
}

#pad-bundles-table_wrapper .pagination {
  margin: 0;
}

.card {
  border-radius: 12px;
  background: #fff;
  padding: 1.8rem;
  width: 100%;
  box-shadow: 2px 4px 12px #00000014;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
}

.card-flat {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 1.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.content .card.card-transparent {
  background: transparent;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 340px);
  gap: 16px;
  align-items: stretch; /* Ensures all cards stretch to match tallest */
}

.card-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  gap: 8px;
  align-items: stretch; /* Ensures all cards stretch to match tallest */
}

.card-grid-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, 440px);
  gap: 16px;
  align-items: stretch; /* Ensures all cards stretch to match tallest */
}


.card-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, 600px);
  gap: 16px;
  align-items: stretch; /* Ensures all cards stretch to match tallest */
}

.card-grid-test {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch; /* Ensures all cards stretch to match tallest */
}

.card-summary {
  background-color: #f5f5f5;
}

.card-flat .owner-label {
  display: flex;
  max-width: 50%;
}

.card-dense {
  padding: 1.25rem 1.5rem !important;
}

.card .card-body table {
  margin-bottom: 0;
}

.card .card-body h3 {
  font-size: 18px;
}

.card .card-header i {
  vertical-align: middle;
}

.card .card-header, .card-flat .card-header {
  margin: 2px;
  padding: 0 0 16px 0;
  display: flex;
  justify-content: space-between;
}
.card .card-header .pagination {
  margin: 5px 0;
}
.card .card-header .row {
  width: 100%;
}

.card .card-header .badge {
  margin: 0 10px;
  vertical-align: middle;
  margin-top: -2px;
  background-color: #72afd2;
}

.card .card-header h3, .card-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0
}

.card .card-header h3 i:not(.btn), .card-header .card-title i:not(.btn){
  font-size: 1.6rem;
  margin-right: 4px;
}

.card .card-header h4, .card-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0
}

.card .card-header .card-title-sup {
  font-size: 20px;
  margin: -28px 0 0 0;
  position: relative;
  background: #fff;
  padding: 0 6px;
  color: #525252;
}

.card-header .card-subtitle {
  font-size: 16px;
  font-weight: 600;
  margin: 0
}

.card-header .card-subtitle i:not(.btn){
  font-size: 14px;
  margin-right: 4px;
}

.card .card-header a i {
  margin-right: 0px;
}

.card .card-header.with-border {
  border-bottom: 1px solid #e1e8ed;
  margin-bottom: 16px;
}

.card .card-footer {
  padding: 12px 0 0 0;
}

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

.card .card-secondary {
  background-color: #3c8dbc;
  color: #fff;
}

.card .card-secondary:hover {
  opacity: 0.9;
  color: #fff;
}

.card-warning {
    border-top: 2px solid #f39c12;
}

.card-success {
    border-top: 2px solid #00a65a;
}

.card-flat .badge.label:first-child, .card-flat .label.label:first-child {
  margin-left: -3px;
}

.card-selected {
  background-color: #dfe4ff38;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
}

.card hr {
  width: 100%;
}

.card-disabled {
  background-color: #eee;
}

.hover-card {
  position: absolute;
  width: 300px;
  background-color: white;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  padding: 16px;
  display: none;
  z-index: 1000;
}

.hover-card h3 {
  margin: 0 0 4px 0;
}

.hover-card p {
  margin: 0 0 8px 0;
  color: #657786;
}

.align-top {
  vertical-align: top;
}

.align-bottom {
  vertical-align: bottom;
}

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

.text-top {
  vertical-align: text-top;
}

.not-eligible {
  color: #fa0000;
}

.fa.fa-sm {
  font-size: 12px !important;
}

.stats {
  display: flex;
  justify-content: space-between;
}

.stats span {
  color: #657786;
  font-size: 14px;
}

.behive-v-card .box.box-primary {
  border-top: none;
}

.btn-dropdown {
  width: 100%;
}

.alert.alert-admin-info {
  padding: 8px;
  background: #48abe5;
  color: #fff;
}

.alert.alert-admin-info .btn.btn-danger {
  background-color: #fff;
  border-color: transparent;
  color: #d9534f;
}

.alert.alert-admin-info .btn.btn-danger:hover {
  background-color: #d9534f;
  color: #fff;
}

.program_box .table-bordered > thead > tr > th,
.program_box .table-bordered > tbody > tr > td {
  border: 1px solid #ddd;
}

.program_box .table th.support {
  min-width: 130px;
}

.program_box .table th.master,
.program_box .table td.master {
  min-width: 60px;
  text-align: center;
}

.program_box .table th.duration {
  min-width: 85px;
}

.program_box .table th.standard {
  min-width: 150px;
}

.program_box .table th.film-format {
  min-width: 100px;
}

.program_box .table th.audio {
  min-width: 150px;
}

.program_box .table th.subtitle {
  min-width: 150px;
}

.program_box .table th.norm {
  min-width: 150px;
}

.program_box .table th.reference {
  min-width: 90px;
}

.program_box .table th.rv,
.program .table td.rv {
  text-align: center;
  min-width: 40px;
}

.program_box .level2_box {
  margin-bottom: 3px;
}

.program_box .table td .label {
  margin-right: 0.4em;
}

td.subtitle span,
td.audio span {
  display: inline-block;
}

td.actions {
  text-align: center;
}

#modal-saver {
  display: none;
}

.box-header h4, .card-header h4 {
  display: inline-block;
}


.small-box {
    border-radius: 6px;
}

#metadata_button {
  float: right;
  margin-top: 10px;
  border-radius: 0px;
  box-shadow: none;
}

#metadata_header {
  padding-bottom: 0px;
}

textarea.modal-textarea {
  height: 150px;
}

.less-padding {
  padding: 7px 10px !important;
}

#duplication-form {
  max-width: 200px;
}

.alert-duplicated {
  position: relative;
  overflow: hidden;
}

.alert-duplicated p.pull-left {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}

.icon-share {
  margin-right: 3px;
}

.icon-report {
  color: #000000;
}

.icon-program_box {
  color: #72afd2;
}

.icon-mt {
    margin-top: 4px;
}

ul.no-offset {
    padding: 0;
    padding-left: 1em;
    margin: 0;
}

/*
 * Page of a Material
 */

.box.box-primary.box-player {
  background: none;
  box-shadow: none;
}

.box.box-primary.box-player .box-body {
  padding: 10px 0;
}

.box-player .box-body.title-proxy {
  height: 100%;
  width: 100%;
}

.row.material-row .box-header h3 {
  font-size: 18px;
  margin: 0px;
}

.row.material-row .box-header i {
  margin-right: 10px;
}

.row.material-row .table.table-box > tbody > tr > td {
  width: 50%;
}

.row.material-row .table.table-sub {
  margin-bottom: 0px;
}

.deleted-material-row,
.deleted-material-row:hover {
  background-color: gainsboro !important;
  cursor: not-allowed;
}

.materials-category-row .pagination {
  margin: 0px;
}

.babel-row li.list-group-item {
  padding-top: 4px;
  padding-bottom: 4px;
}

/*
 * Scroll To Top
*/
#scrollToTop {
  display: none;
  position: fixed;
  right: 80px;
  bottom: 40px;
  opacity: 0.6;
  font-size: 4em;
  z-index: 1000;
}

#scrollToTop:hover {
  opacity: 0.9;
}

#supportFloatBtn {
  position: fixed;
  right: 20px;
  bottom: 40px;
  opacity: 0.6;
  font-size: 4em;
  color: #000;
  z-index: 1000;
}

#supportFloatBtn:hover {
  opacity: 0.9;
}


/*
 * Filmcard
*/
.table-crew > thead > tr > th,
.table-crew > tbody > tr > td {
  padding: 3px;
}

/*
 * CPLs
*/
.cpl-folder-name {
  white-space: nowrap;
}

/*
 * Historics
 */
.td_material_id {
  display: none;
}

/*
 * Report page
 */

.td-report-label {
  width: 20%;
}

/*
 * Footer
 */

footer p {
  color: black;
  margin-bottom: 0;
}

/*
 * Basket Orders
 */

tr.disabled {
  cursor: not-allowed;
}

tr.disabled td {
  background-color: gainsboro;
}

li.disabled {
  background-color: gainsboro;
}

.blank_div_basket {
  height: 20em;
}

.basket-summary {
  position: fixed;
  right: 0;
}

/*
 * Forms misc.
 */
.expiration-date {
  font-weight: 700;
}

/*
 *  Poster
 */

.edit-container {
  display: inline-block;
  position: relative;
}

.edit-overlay {
  background: rgba(0, 0, 0, 0.7);
  font-size: 1.5em;
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  transition: all 0.2s ease;
  display: block;
  padding: 4px;
  padding-top: 7em;
}

.edit-overlay:hover {
  opacity: 1;
}

/* img hover */

.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/* effect honey */

figure.effect-honey {
  background: #3c8dbc;
}

figure.effect-honey img {
  opacity: 0.9;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img {
  opacity: 0.5;
}

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #fff;
  content: '';
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}

figure.effect-honey h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey h2 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* effect bubba */
figure.effect-bubba {
  background: #3c8dbc;
}

figure.effect-bubba img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
  opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}

figure.effect-bubba figcaption::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
}

figure.effect-bubba h3 {
  padding-top: 15%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}

figure.effect-bubba p {
  padding: 20px 2.5em;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
}

figure.effect-bubba h3 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-bubba:hover h3,
figure.effect-bubba:hover p,
figure.effect-bubba:hover h3 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure .thumbnail {
  border-radius: 0;
  margin-bottom: 0;
}

img.cover-img {
  flex: 1 1 auto;
  height: 200px !important;
  width: 130px !important;
  max-width: 130px !important;
  object-fit: cover;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.cover-img-wrapper {
  text-align: center;
  flex-wrap: wrap;
  gap: 8px; /* Optional: Adds space between images */
  display: flex;
}

a.black-link {
  color: #222;
  font-weight: inherit;
}

.va-middle {
  vertical-align: middle;
}

.small-box-storage h3 {
  font-size: 20px
}

.small-box-storage .icon {
  font-size: 58px;
  top: -5px;
}

.small-box-storage:hover .icon {
  font-size: 70px
}


/*
 * Thumbnails
 */

.image-rollover {
  position: relative;
  max-width: 100%;
  width: 800px;
}

.image-rollover .thumbnail.rollover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s;
}

.defect-rollover .thumbnail.rollover {
  position: absolute;
  top: 0;
  left: 3.5%;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s;
}

@media (min-width: 768px) {
  .defect-rollover .thumbnail.rollover {
    left: 0;
  }
}

@media (min-width: 992px) {
  .defect-rollover .thumbnail.rollover {
    left: 3.5%;
  }
}

.defect-rollover .tc-over.rollover,
.image-rollover .tc-over.rollover {
  opacity: 0;
}

.defect-rollover:hover .tc-over:not(.rollover),
.image-rollover:hover .tc-over:not(.rollover) {
  opacity: 0;
}

.defect-rollover .tc-over,
.image-rollover .tc-over {
  position: absolute;
  padding: 0 3px;
  bottom: 5px;
  right: 4%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.image-rollover .tc-over {
  right: 1%;
}

.defect-rollover:hover .rollover,
.image-rollover:hover .rollover {
  opacity: 1;
}

@media (min-width: 768px) {
  .prev-modal {
    position: absolute;
    top: 300px;
    left: calc(50% - 350px);
  }

  .next-modal {
    position: absolute;
    top: 300px;
    right: calc(50% - 350px);
  }
}

@media (min-width: 992px) {
  .prev-modal {
    position: absolute;
    top: 300px;
    left: calc(50% - 500px);
  }

  .next-modal {
    position: absolute;
    top: 300px;
    right: calc(50% - 500px);
  }
}

img.thumbnail {
  margin: 0;
  padding: 2px;
}

img.contrast-light-soft:hover {
  filter: brightness(1.2);
}

img.contrast-light:hover {
  filter: brightness(1.6);
}

img.contrast-lighter:hover {
  filter: brightness(3);
}

.allframe-rect {
  position: absolute;
  height: 100%;
  top: 0%;
  border: solid red 3px;
  border-radius: 4px;
}

.left-rect {
  position: absolute;
  height: 100%;
  top: 0%;
  border: solid red 3px;
  border-radius: 4px;
}

.right-rect {
  position: absolute;
  height: 100%;
  top: 0%;
  border: solid red 3px;
  border-radius: 4px;
}

.top-rect {
  position: absolute;
  height: 50%;
  top: 0%;
  border: solid red 3px;
  border-radius: 4px;
}

.topleft-rect {
  position: absolute;
  height: 50%;
  top: 0%;
  border: solid red 3px;
  border-radius: 4px;
}

.topright-rect {
  position: absolute;
  height: 50%;
  top: 0%;
  border: solid red 3px;
  border-radius: 4px;
}

.bottom-rect {
  position: absolute;
  height: 50%;
  bottom: 0;
  border: solid red 3px;
  border-radius: 4px;
}

.bottomleft-rect {
  position: absolute;
  height: 50%;
  bottom: 0;
  border: solid red 3px;
  border-radius: 4px;
}

.bottomright-rect {
  position: absolute;
  height: 50%;
  bottom: 0;
  border: solid red 3px;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .allframe-rect {
    width: 100%;
    left: 0%;
  }

  .left-rect {
    width: 50%;
    left: 0%;
  }

  .right-rect {
    width: 50%;
    right: 0%;
  }

  .top-rect {
    width: 100%;
    left: 0%;
  }

  .topleft-rect {
    width: 50%;
    left: 0%;
  }

  .topright-rect {
    width: 50%;
    right: 0%;
  }

  .bottom-rect {
    width: 100%;
    left: 0%;
  }

  .bottomleft-rect {
    width: 50%;
    left: 0%;
  }

  .bottomright-rect {
    width: 50%;
    right: 0%;
  }
}

@media (min-width: 992px) {
  .allframe-rect {
    width: 93%;
    left: 3.5%;
  }

  .left-rect {
    width: 46.5%;
    left: 3.5%;
  }

  .right-rect {
    width: 46.5%;
    right: 3.5%;
  }

  .top-rect {
    width: 93%;
    left: 3.5%;
  }

  .topleft-rect {
    width: 46.5%;
    left: 3.5%;
  }

  .topright-rect {
    width: 46.5%;
    right: 3.5%;
  }

  .bottom-rect {
    width: 93%;
    left: 3.5%;
  }

  .bottomleft-rect {
    width: 46.5%;
    left: 3.5%;
  }

  .bottomright-rect {
    width: 46.5%;
    right: 3.5%;
  }
}

.thumbnail .caption {
  padding: 0px 3px 3px 3px;
  height: 5em;
  overflow: hidden;
}

.preview {
  margin-bottom: 0;
  max-width: 330px;
}

.preview a {
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.preview video {
  max-width: 100%;
  display: block;
}

.thumbnail.gallery {
  display: inline-block;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

.thumbnail {
  position: relative;
  overflow: hidden;
}
.thumbnail img {
  transition: transform 0.5s;
}
.thumbnail img:hover {
  transform: scale(1.1);
}
.thumbnail .legend {
  position: absolute;
  padding: 0 3px;
  bottom: 5px;
  right: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}
.thumbnail .legend .icon {
  font-size: 0.8em;
}
.thumbnail .title {
  font-size: 1.1em;
  position: absolute;
  padding: 0 3px;
  top: 5px;
  left: 5px;
  color: white;
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000,
    1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}

.no-bg {
    border: none !important;
    background-color: unset !important;
}


/*
 * Affix
 */

.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

/*
 * Icons
 */

.align-icon {
  position: relative;
  bottom: -3px;
  left: 0px;
}

/*
 * Disabled
 */

.disabled {
  cursor: not-allowed;
  pointer-events: auto !important;
}

.disabled-item {
  background-color: #e8e8e8 !important;
}

.disabled-link {
  color: #999;
  cursor: not-allowed;
  text-decoration: none;
}

/*
 * Rapports DVD
 */

.azure-box-rd {
  background-color: #3c8dbc;
  color: #fff;
}

/*
 * Coupure de mot pour retour à la ligne en cas de mot trop long
 */
.word-break {
  word-break: break-all;
}

/*
 * Vertical align
 */

#shared-access td {
  vertical-align: middle;
}

/*
 * Comments
 */
.box-comments {
  background-color: unset !important;
}

.box-comment {
  padding: 1.5rem !important;
}

.box-comment.odd {
  background-color: #f7f7f7;
}

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

.comments-body {
  max-height: 80vh;
  overflow-y: scroll;
}

#add-comment-btn:focus {
  box-shadow: 0px 1px 4px 0px rgb(60 141 188 / 58%);
}

.box-body-no-padding {
  padding: 10px 0;
}

/* Super selector */
#select-all {
  margin: 0;
}

/* Search header */
#navbar-search-input {
  width: 500px;
  transition: width 0.5s ease-in-out;
  border-radius: 7px 0 0 7px !important;
}

form.navbar-form #search-btn{
  border-radius: 0 7px 7px 0 !important;
  background-color: #D1CFE2;
} 

.main-header #navbar-search-input.form-control {
  background-color: #fff;
  
  &::placeholder {
    color: #888;
  }
}

.nowrap {
  white-space: nowrap;
}

/*
 * Title detail vue
 */

.override-v-app .v-application--wrap {
  min-height: 0 !important;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.override-v-app .rv a {
  color: #fff;
}

.override-v-app .norm .cpl_names {
  font-size: 9px;
}

.behive-v-card.v-card {
  background-color: transparent !important;
  box-shadow: none !important;
}

.custom-box .box {
  margin-bottom: 3px;
}

.v-text-field.vue-title-search-field {
  margin-top: 0;
  padding-top: 0;
}

.v-text-field__slot input, .v-select__selections input, .v-select__slot input {
  margin-bottom: 6px;
}

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

.denser .v-select__slot input {
  font-size: 14px !important;
}

.filters-toolbar {
  z-index: 14 !important;
  padding: 0;
}

.search-toolbar.v-toolbar {
  border-radius: 12px 12px 0 0;
}

.filters-toolbar,
.filters-toolbar.v-toolbar {
}

.filters-toolbar .v-toolbar__content {
  padding: 0 15px 0 15px;
}

.filters-toolbar,
.filters-toolbar .v-toolbar__content {
  height: 50px !important;
}

#sticky-table-header {
  width: 100%;
}

#sticky-table-header .filters-toolbar {
  z-index: 14 !important;
  background-color: rgba(235, 235, 235, 0.95) !important;
}

#sticky-table-header .table {
  margin-bottom: 0;
}

#sticky-header {
  font-size: 13px;
  z-index: 15;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
}

.v-btn--mini {
  height: 20px !important;
  width: 60px;
  font-size: 10px !important;
}

.denser .v-input__control .v-label {
  font-size: 13px !important;
}

.denser.v-input input {
  max-height: 20px !important;
}

.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
  height: 23px !important;
}

.v-select-list.v-list--dense .v-list-item {
  max-height: 20px;
}

.v-select-list.v-list--dense.v-list,
.v-select-list.v-list--dense.v-list .v-list-item .v-list-item__content {
  padding: 0;
}

.v-select-list.v-list--dense .v-list-item,
.v-list-item--dense {
  min-height: 27px;
}

.v-menu__content {
  z-index: 14 !important;
}

.v-menu__content.v-menu__content--fixed.menuable__content__active.v-autocomplete__content {
  z-index: 16 !important;
}

.v-input--selection-controls__input .material-icons {
  font-size: 1.5rem !important;
}

.v-list--dense .v-list-item .v-list-item__subtitle, .v-list--dense .v-list-item .v-list-item__title, .v-list-item--dense .v-list-item__subtitle, .v-list-item--dense .v-list-item__title {
  font-size: 1.1rem !important;
}

#sticky-header .v-input--checkbox .v-input__slot {
  margin-top: 21px;
}

.search-toolbar,
.search-toolbar .v-toolbar__content {
  height: 50px !important;
  padding-top: 5px;
}

.hidden {
  display: none;
}

.search-toolbar .cart-btn {
  margin-bottom: -5px;
}

.box.box-primary.program_box .box-header {
  padding: 7px;
}

.box.box-primary.program_box .box-header .box-title .box-tools input {
  margin-left: 9px;
  margin-right: 8px;
}

.toolbar-actions-btns {
  text-align: center;
  min-width: 96px;
}

.search-toolbar
  .v-text-field.v-input--dense:not(.v-text-field--enclosed):not(
    .v-text-field--full-width
  )
  .v-input__append-inner
  .v-input__icon
  > .v-icon {
  margin-top: 0;
}

#hiddenDiv {
  height: 114px;
}

@-moz-document url-prefix() {
  .texttop {
    vertical-align: text-top;
  }
}

#sticky-table-header .table > thead > tr > th {
  vertical-align: middle;
}

.table-segments > .table > tbody > tr > td {
  width: 100%;
}

.error-text {
  color: #dd4b39;
  font-weight: 600;
}

/*
* Override Vuetify styles
*/

body {
  color: #494D5F;
}

body a {
  color: #3c8dbc;
}

.application {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.table-responsive {
  overflow-x: unset;
}

.alert-fixed {
  text-align: center;
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  z-index: 99;
}

#id_div_check_connection {
  padding-right: 5px;
}

#id_button_check_connection {
  float: left;
}

div.modal-footer#id_modal_footer_delivery_form {
  padding: 15px 0;
}

# FIX TO OVERRIDE VUETIFY CSS OVERWRITING BOOTSTRAP .bootstrap-col-sm-4 {
  width: 33.33333333%;
}

.bootstrap-col-sm-2 {
  width: 66.66666667%;
}

#id_order_support_form .modal-footer {
  padding: 15px 0;
}

#id_order_support_form .form-group {
  margin-left: 0;
  margin-right: 0;
}

.label.custom-label {
  display: inline-block;
  width: 100%;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-right: 5px;
  margin-top: -30px;
  position: relative;
  font-size: 2em;
  z-index: 2;
  color: gray;
}

/* advanced search */

.advanced-search h4 {
  font-weight: bold;
  font-size: 17px;
}

.advanced-search .box-header {
  padding-bottom: 3px;
}

.advanced-search .box-body {
  padding: 0px 10px 0px 10px;
}

.advanced-search .box-footer {
  padding-top: 0px;
  border: none;
}

.advanced-search .btn-social > :first-child {
  font-size: 1.2em;
}

.advanced-search .form-horizontal .control-label {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

.advanced-search .checkbox label {
  font-size: 12px;
}

.advanced-search .form-group {
  margin-bottom: 7px;
}

.form-group-title .input-sm {
  margin-bottom: 0px;
}

.advanced-search .form-group-title .checkbox {
  margin-top: -7px;
  margin-left: 1px;
}

.advanced-search .form-group-title .checkbox label div {
  margin-top: 3px;
  font-size: 12px;
  color: #888;
}

.advanced-search .form-checkbox input[type='checkbox'] {
  margin-top: 7px;
}

.chosen-container-multi .chosen-choices .search-field input[type='text'] {
  color: #999 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
}

input, select, textarea {
  border-radius: 6px !important;
}

.form-group .chosen-container-multi .chosen-choices {
  border-radius: 8px !important;
}

.chosen-container-single .chosen-single {
  border-radius: 8px !important;
}

.dropzone.dropzone-error-border {
  border-color: #ed2939 !important;
}

.dropzone {
  border-style: dashed !important;
  border-color: #0087f7 !important;
}

.dropzone .dz-preview .dz-progress {
  display: none !important;
}

.dropzone .dz-preview .dz-error-mark svg g g {
  fill: #ed2939;
}

code.clickable:hover {
  background-color: #ece1e1;
  cursor: pointer;
}

object.graph {
  width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.graph-link, .external-link {
  color: grey !important;
}
.graph-link:hover, .external-link:hover {
  color: black !important;
}

a.gravity-link {
  color: #e91e63
}

a.contact-logs {
  color: #e9631e
}

a.contact-edit {
  color: #1963ae
}

.modal-body hr {
  margin: 5px 0;
}

.tight {
  padding: 0;
  margin: 0;
  border: 0;
}

.animate-loading-border {
  position: absolute;
  border-radius: 100vmax;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgb(60, 141, 188),
    rgba(60, 141, 188, 0.5),
    transparent 50%
  );
  animation: animateLoading 2s ease-in-out infinite;
}

@keyframes animateLoading {
  0%,
  100% {
    width: 100%;
    opacity: 1;
  }
  50%,
  100% {
    width: 0;
    opacity: 0;
  }
}

header.main-header > .navbar {
  margin-left: unset !important;
}

nav.navbar {
  position: unset !important;
}

.position-relative {
  position: relative;
}

.d-flex {
  display: flex;
}

.d-inline {
  display: inline;
}

.mb-5 {
  margin-bottom: 5px;
}

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

.modal-body table.table-condensed {
  margin-bottom: 0;
}

.vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
  pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events: none;
}

.vertical-align-center > .modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width: inherit;
  max-width: inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
  height: inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events: all;
}

.br3 {
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

.mr-10 {
  margin-right: 10px;
}

.w-300 {
  width: 300px;
}

.full-height {
  height: 100vh;
}

.pr0 {
  padding-right: 0px !important;
}

.fixed-icon-size {
  min-width: 1.2em;
}

.work-break {
  word-break: break-word;
}

.main-header .navbar .nav > li > a:hover {
  border-bottom: white 5px solid;
  margin-bottom: -5px;
}

.nav > li > a.disabled:focus {
    color: rgba(0, 0, 0, 0.5);
    background-color: unset;
}

/* Drawer */

.drawer-menu {
  position: fixed;
  top: 0;
  right: -820px;
  width: 800px;
  height: 98%;
  transition: right 0.3s ease;
  z-index: 1032;
  background-color: #fff;
  margin: 10px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1031;
}

.drawer-btn-text {
  padding: 4px;
}

.drawer-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.drawer-btn .badge {
  background-color: #369cf4;
}

.drawer-header {
  display: flex;
  padding: 16px 20px;
  background-color: #fff;
  justify-content: space-between;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid #e9e9e9;
}

.drawer-body {
  padding: 16px 20px;
  overflow: auto;
  max-height: 87vh;
  border-radius: 0 0 8px 8px;
}

.full-height {
  height: 100%;
}

.drawer-header .close-drawer {
  font-size: 24px;
  color: #333;
}

.drawer-header .close-drawer:hover>.fa-regular {
  color: #7a7a7a;
}

.drawer-footer {
  background-color: #fff;
  margin: 8px -20px;
  position: fixed;
  bottom: 0;
  width: 800px;
  height: auto;
  display: flex;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
}

#pad-order-drawer-table_wrapper ul.pagination {
  margin: 0;
  padding: 0 14px 0 0;
}

#pad-order-drawer-table_wrapper .pagination>li>a, .pagination>li>span {
  border: 0;
}

#pad-order-drawer-table_wrapper .pagination>li>a {
  border-radius: 8px;
}

#pad-order-drawer-table_wrapper .table>tbody>tr>td, #pad-order-drawer-table_wrapper .table>thead>tr>th {
  padding: 6px;
}

#pad-order-drawer-table_wrapper .col-sm-6 {
  padding: 0 !important;
}

.table-input {
  height: 22px;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.modal-backdrop {
  z-index: 1031;
}

#addressbooks-contacts-modal .modal-dialog {
  width: 80%;
}

/* Spinner */

.simple-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #369cf4;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.row.title-detail-editorial .card {
  margin: 8px 0;
}

h1 small {
  font-size: 15px;
  display: inline-block;
  padding-left: 4px;
  font-weight: 300;
}

/* Buttons */
.btn-sm {
  padding: 3px 6px;
}

.btn-standard {
  background-color: #fff;
  border-color: #d7d7d7;
}

.btn-standard:hover {
  background-color: #eee;
}

.text-grey {
  color: #949494 !important;
}

.behive-btn {
  --bg: #000;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  border: 0;
  transition: 0.2s;
  display: inline-block;
  padding: 7px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  max-height: 34px;
}

.behive-btn-sm {
  height: 26px;
  padding: 3px 7px;
}

.behive-btn-xs {
  height: 20px;
  padding: 1px 5px;
}

.behive-btn-flat {
  background-color: inherit;
}

.behive-btn.btn-default {
  color: #000;
  background-color: #e9e9e9;
}

.behive-btn:disabled {
  pointer-events: none;
  opacity: 0.65;
}

.behive-btn:hover {
  transform: translate(-0.25rem, -0.25rem);
  box-shadow: 0.25rem 0.25rem var(--bg);
}

.behive-btn.dropdown-toggle:hover {
  transform: none;
  box-shadow: none;
}

.behive-btn:active {
  transform: translate(0);
  box-shadow: none;
}

.behive-btn.btn-secondary {
  color: #000;
}

.behive-btn.bordered {
  border: 1px solid #ddd;
}

.behive-btn.full-w {
  width: 100%;
}

.behive-btn .magic-btn {

}

button.btn, a.btn {
  border-radius: 6px !important;
}

button.btn-xs, a.btn-xs {
  border-radius: 0.5rem !important;
}

.cta {
  border: none;
  background: none;
  cursor: pointer;
}

.cta span {
  padding-bottom: 7px;
  font-size: 16px;
}

.hover-underline-animation {
  position: relative;
  padding-bottom: 20px;
  color: #2d6780;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #3c8dbc;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.separator {
  border-left: 1px solid #fff;
  padding: 15px 0;
  margin: 10px 0;
}

.search-input.form-control {
  width: 100%;
  z-index: 0;
  font-size: 18px;
  padding: 20px 16px;
}

.search-input.form-control:focus {
  z-index: 0;
}

table .form-control {
  padding-top: 0;
  padding-bottom: 0;
}

.inline {
  display: inline-block;
}

.search-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: inherit;
  padding: 5px;
}

.label {
  border-radius: 4px;
  padding: 3px 6px;
  max-width: 250px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 2px;
  vertical-align: middle;
}

.asset-resume-card {
  background-color: rgb(248 250 252);
}

.main-header .navbar .nav>li>a>.label {
  font-size: 12px !important;
  top: 7px;
  right: 5px;
}

.main-header .navbar .nav>li>a>.label.label-success {
  background-color: rgb(17, 187, 110) !important;
  color: #fff !important;
}

.main-header .navbar .nav>li>a>.label.label-danger {
  background-color: rgba(237, 41, 57, 1) !important;
  color: #fff !important;
}

.main-header .navbar .nav>li>a>.label.label-info {
  background-color: rgba(100, 173, 215, 1) !important;
  color: #fff !important;
}

.main-header .navbar .nav>li>a>.label.label-primary {
  background-color: rgba(60, 141, 188, 1) !important;
  color: #fff !important;
}

.main-header .navbar .nav>li>a>.label.label-warning {
  background-color: rgba(255, 223, 45, 1) !important;
  color: #000 !important;
}

.main-footer a>.label.label-notification, .main-header .navbar .nav>li>a>.label.label-notification {
  background-color: rgb(215, 100, 100) !important;
  color: #fff !important;
}

.badge.label-primary, .label.label-primary {
  background-color: rgba(60, 141, 188, .2) !important;
  color: #3c8dbc !important;
  border: 1px solid rgba(60, 141, 188, .2);
}

.badge.label-info, .label.label-info {
  background-color: rgba(100, 173, 215, .1) !important;
  color: #20adff !important;
  border: 1px solid rgba(100, 173, 215, .1);
}

.badge.label-warning, .label.label-warning {
  background-color: rgba(255, 223, 45, .4) !important;
  color: #ca8d1c !important;
  border: 1px solid rgba(255, 223, 45, .4);
}

.badge.label-danger, .label.label-danger {
  background-color: rgba(237, 41, 57, .1) !important;
  color: #eb2535 !important;
  border: 1px solid rgba(237, 41, 57, .1);
}

.badge.label-success, .label.label-success {
  background-color: rgba(0, 166, 90, .1) !important;
  color: #1faf6e !important;
  border: 1px solid rgba(0, 166, 90, .1);
}

.badge.label-default, .label.label-default {
  background-color: rgba(68, 68, 68, .1) !important;
  color: #404040 !important;
  border: 1px solid rgba(68, 68, 68, .1);
}

.badge.label-notification, .label.label-notification {
  background-color: rgba(215, 100, 100, .1) !important;
  color: #404040 !important;
  border: 1px solid rgba(215, 100, 100, .1);
}

.badge.label-big, .label.label-big {
  font-size: 12px;
}

.icon-link-default {
  color: #72afd2;
}

.icon-link-default:hover {
  background-color: #72afd2;
  color: #fff;
}

.icon-link-default:hover i {
  background-color: #fff;
  color: #72afd2;
}

.icon-link-default i {
  background-color: #72afd2;
  color: #fff;
  border-radius: 6px;
  padding: 6px;
}

.icon-link-success {
  color: #009688;
}

.icon-link-success:hover {
  background-color: #009688;
  color: #fff;
}

.icon-link-success:hover i {
  background-color: #fff;
  color: #009688;
}

.icon-link-success i {
  background-color: #009688;
  color: #fff;
  border-radius: 6px;
  padding: 6px;
}

.icon-link-purple {
  color: #7e5ad4;
}

.icon-link-purple:hover {
  background-color: #7e5ad4;
  color: #fff;
}

.icon-link-purple:hover i {
  background-color: #fff;
  color: #7e5ad4;
}

.icon-link-purple i {
  background-color: #7e5ad4;
  color: #fff;
  border-radius: 6px;
  padding: 6px;
}

.icon-link-gray {
  color: #777777;
}

.icon-link-gray:hover {
  background-color: #777777;
  color: #fff;
}

.icon-link-gray:hover i {
  background-color: #fff;
  color: #777777;
}

.icon-link-gray i {
  background-color: #777777;
  color: #fff;
  border-radius: 6px;
  padding: 6px;
}

.icon-link-gravity {
  color: #e91e63;
}

.icon-link-gravity:hover {
  background-color: #e91e63;
  color: #fff;
}

.icon-link-gravity:hover i {
  background-color: #fff;
  color: #e91e63;
}

.icon-link-gravity i {
  background-color: #e91e63;
  color: #fff;
  border-radius: 6px;
  padding: 6px;
}

select.set-lang.input-sm, select.set-theme.input-sm {
  line-height: normal;
}

select {
  -webkit-appearance: menulist !important;
}

.loader-spinner {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#3c8dbc 94%,#0000) top/4px 4px no-repeat,
    conic-gradient(#0000 30%,#3c8dbc);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{
  100%{transform: rotate(1turn)}
}

.loader-spinner-lg {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#3c8dbc 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#3c8dbc);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{
  100%{transform: rotate(1turn)}
}

.loader-inline {
  height : 10px;
  width  : 36px; /* (6 * <margin: 2px>) + (3 * <width: 6px>) */
}

.loader-inline-box {
  display                   : inline-block;
  height                    : 6px;
  width                     : 6px;
  margin                    : 0px 2px;
  background-color          : #3c8dbc;
  animation-name            : fadeOutIn;
  animation-duration        : 500ms;
  animation-iteration-count : infinite;
  animation-direction       : alternate;
}

.loader-inline-box:nth-child(1) { animation-delay: 250ms; } /* (1/2) * <animation-duration: 500ms */
.loader-inline-box:nth-child(2) { animation-delay: 500ms; } /* (2/2) * <animation-duration: 500ms */
.loader-inline-box:nth-child(3) { animation-delay: 750ms; } /* (3/2) * <animation-duration: 500ms */

.loader-inline-txt {
  margin-top: -8px;
  margin-left: 8px;
}

.loader-wrapper h4 {
  color: #fff;
}

@keyframes fadeOutIn {
  0%   { background-color : #3c8dbc; }
  100% { background-color : rgba(0,146,255,0); }
}


#collections-drawer-table_wrapper, #mailinglists-drawer-table_wrapper {
  padding: 16px
}

.modal-dialog.modal-dialog-lg {
  width: 70%;
}

.materials-summary-wrapper {
  max-height: 400px;
  overflow-y: auto;
}

#id_support_form .modal-footer {
  padding: 15px 0;
}

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

.col-align-bottom {
  float: none;
  display: table-cell;
  vertical-align: bottom;
}

/* Datatables */
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
  box-shadow: inset 0 0 0 9999px rgba(148, 201, 228, 0.5) !important;
  color: inherit !important;
}

table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(148, 201, 228, 0.3) !important;
  color: inherit !important;
}

table.table.dataTable th.dt-type-numeric,
table.table.dataTable th.dt-type-date,
table.table.dataTable td.dt-type-numeric,
table.table.dataTable td.dt-type-date {
  text-align: left;
}

table.dataTable > tbody > tr > td {
  vertical-align: middle;
}

.dt-layout-cell.dt-layout-end {
  text-align: right;
}

#addressbooks-contacts-table_wrapper {
  width: 100%;
}

.clickedit {
  z-index: 1;
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #3ea9e71a;
  padding: 3px 6px;
}

.clickedit label {
  cursor: text;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  overflow: hidden;
  font-weight: inherit;
  height: 20px;
}

.clickedit label::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -4px;
  right: -4px;
  background-color: #EBECF0;
  z-index: -1;
  transition: opacity 0.2s ease;
  opacity: 0;
}

.clickedit label:hover::before {
  opacity: 1;
}

.list-none {
  list-style-type: none;
}

.list-item-link {
  list-style-type: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 6px !important;
  margin: 5px 0;
  font-size: 14px;
  color: #2b2b2b;
  font-weight: 500;
  background-color: rgb(226, 239, 252);
  border-radius: 4px;
}

.list-item-link a {
  color: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-item-link:hover {
  background-color: #3ea9e7;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.list-item-link.disabled-link {
  background-color: rgba(249, 252, 255, 1);
  color: #999;
}

.list-item-link.disabled-link:hover {
  cursor: not-allowed;
}

.list-item {
  list-style-type: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 6px !important;
  margin: 5px 0;
  font-size: 14px;
  color: #2b2b2b;
  background-color: rgb(226, 239, 252);
  border-radius: 4px;
}

.searchable-dropdown-menu {
  width: 500px;
}

.searchable-dropdown-menu .row {
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#collection-modal {
  font-size: 14px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ajax-dropdown {
  position: relative;
}
.ajax-dropdown-content .non-clickable {
  background-color: #f1f1f1;
  cursor: default;
  font-weight: bold;
}
.ajax-dropdown-content {
  cursor: pointer;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top: 34px;
  left: 0;
}
.ajax-dropdown-content div {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.ajax-dropdown-content div:hover {
  background-color: #f1f1f1;
}
.ajax-dropdown.show .ajax-dropdown-content {
  display: block;
}

.input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.input-container input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 50px;
}
.input-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e7e7e7;
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 2px 6px;
  margin: 2px;
  font-size: 12px;
}
.input-tag .remove-tag {
  margin-left: 4px;
  cursor: pointer;
  font-size: 13px;
}

.input-tag .remove-tag:hover {
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.8;
}

/* Emails input */
.email-container {
  border: 1px solid #ccc;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 6px;
}

.email-input {
  border: none;
  outline: none;
  flex-grow: 1;
  min-width: 50px;
  font-size: 14px;
  border-radius: 6px;
}

.description {
  font-weight: 500;
  max-width: 50%;
}

/* Carousel */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 20%;
  box-sizing: border-box;
  padding: 10px;
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.carousel-item img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 1200px) and (max-width: 1700px) {
  .carousel-item {
    min-width: 15%;
  }
}

.carousel-item:hover {
  transform: scale(1.1); /* Zoom in on hover */
}

.carousel-item img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

.carousel-item .heading {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-top: 6px;
  white-space: initial;
}

.new-carousel-container {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  white-space: nowrap;
  height: 340px;
}

.new-carousel {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.new-carousel-item {
  min-width: 12%;
  box-sizing: border-box;
  padding: 2px;
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 10px;
}

@media (min-width: 1200px) and (max-width: 1700px) {
  .new-carousel-item {
    min-width: 10%;
  }
}

.new-carousel-item:hover img {
  transform: scale(1.1); /* Zoom in on hover */
}

.new-carousel-item img {
  max-width: 100%;
  width: 300px;
  height: 290px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

.new-carousel-item .body {
  font-weight: 600;
  color: #333;
  text-align: left;
  white-space: initial;
  width: 100%;
  padding: 8px 12px;
}

.new-carousel-item .item-img-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  border-radius: 10px 10px;
  box-shadow: 2px 2px 12px #00000014;
  width: 88%;
  margin: 0 6px;
}

.item-resume {
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 10px;
  text-align: left;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-size: 0.9em;
  z-index: 1;
  overflow: auto;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
  height: 100%;
  opacity: 0; /* Initially hide the buttons */
  transition: opacity 0.2s ease-in-out; /* Add transition for smooth fade-in/out */
  font-size: 36px;
}

.titles-carousel {
  background-color: #fff;
  margin-bottom: 2rem;
  padding: 24px 42px;
  margin-left: -14px;
  margin-right: -14px;
  margin-top: -30px;
}

.prev-btn {
  left: 0;
  background: linear-gradient(90deg, rgba(52,52,52,0.5) 0%, rgba(255,255,255,0) 100%);
}

.next-btn {
  right: 0;
  background: linear-gradient(-90deg, rgba(52,52,52,0.5) 0%, rgba(255,255,255,0) 100%);
}

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

/* Progress bar */
.progress, progress[value] {
  border-radius: 10px;
  width: 100%;
  border: none;
  margin: 5px 0;
  height: 10px;
  display: block;
  appearance: none;
  -webkit-appearance: none;
}
.progress::-webkit-progress-bar, progress[value]::-webkit-progress-bar {
  background-color: #e2ecfe;
}
.progress::-webkit-progress-value, progress[value]::-webkit-progress-value {
  background-color: #387ef5;
}
.progress .success::-webkit-progress-value, progress[value]::-webkit-progress-value {
  background-color: #26c455;
}

.progress-materializecss {
  margin: 5px 0;
  position: relative;
  height: 5px;
  display: block;
  width: 100%;
  background-color: #e2ecfe;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
}
.progress-materializecss .indeterminate {
  background-color: #387ef5;
}
.progress-materializecss .indeterminate:before {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress-materializecss .indeterminate:after {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
}
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
 }
  60% {
    left: 100%;
    right: -90%;
 }
  100% {
    left: 100%;
    right: -90%;
 }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
 }
  60% {
    left: 107%;
    right: -8%;
 }
  100% {
    left: 107%;
    right: -8%;
 }
}
.progress-container {
    width: 75%;
    display: inline-block;
}

.circular-img {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}

.circular-img-sm {
  width: 48px;
  height: 48px;
}

.circular-img-xs {
  width: 36px;
  height: 36px;
}

.circular-img img {
  width: 100%;
  height: auto;
}

/* button with hover color */
.btn-back:hover {
  color: #387ef5;
}

.small-text {
  font-size: 13px;
}

.text-align-end {
  text-align: end;
}

.date-tags {
  margin-top: 50px;
}

.img-zoom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.img-zoom img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 100%;
}

.doc-img {
  max-width: 100%;
}

.doc-img:not(.img-zoom > *) {
  cursor: pointer;
}

.doc-img:not(.img-zoom > *):hover {
  opacity: 0.8;
}

.close-img-zoom {
  padding: 16px;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: none !important;
}

.or-line {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.or-line span {
  font-size: 16px;
  font-weight: bold;
  color: #666;
  position: relative;
  z-index: 1;
}

.or-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 40%;
  border-top: 1px solid #ccc;
  z-index: 0;
}

.or-line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 40%;
  border-top: 1px solid #ccc;
  z-index: 0;
}

/* Datatables */
#collections-drawer-table_wrapper.dt-container div.dt-search input {
  width: 50%;
}

.suggested-materials {
  background-color: rgb(255, 255, 255);
  padding: 10px 15px 15px 15px;
  margin-top: 30px;
  border-radius: 8px;
  border:#ccc 1px solid;
  box-shadow: #cccccc 2px 2px 10px;
}

.suggestion-btn {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #4f4f4f;
  border-radius: 4px;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  color: black;
  z-index: 1;
  vertical-align: bottom;
}

.suggestion-btn:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.suggestion-btn:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #3c8dbc;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.suggestion-btn:hover {
  color: #ffffff;
  border: 1px solid #3c8dbc;
}

.suggestion-btn:hover:before {
  top: -35%;
  background-color: #3c8dbc;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.suggestion-btn:hover:after {
  top: -45%;
  background-color: #3c8dbc;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-10 {
  width: 10%;
}
.cell-20 {
  width: 20%;
}
.cell-30 {
  width: 30%;
}

.label.label-email {
  background: #ddd !important;
  color: #2b2b2b !important;
  vertical-align: middle;
  font-weight: 400;
}

.align-sub {
  vertical-align: sub !important;
}

.disabled-bg {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.disabled-bg-invisible {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1000;
}

.relative-container {
  position: relative;
}

.autocomplete {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
}

.tag {
  background-color: #e0e0e0;
  border-radius: 3px;
  padding: 2px 5px;
  margin: 2px;
  display: inline-flex;
  align-items: center;
  vertical-align: bottom;
}
.tag-remove {
  cursor: pointer;
  margin-left: 5px;
}
#id-emails-input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 5px;
  font-size: 14px;
}
.autocomplete .dropdown {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  z-index: 99;
  top: 111%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: auto;
  display: none;
  background-color: white;
  scrollbar-width: thin;
}
.autocomplete .dropdown div {
  padding: 10px;
  cursor: pointer;
}
.autocomplete .dropdown div:hover {
  background-color: #e9e9e9;
}

.animated-fix-col
{
  transition: width 0.2s ease-in-out;
}

.animated-moving-col {
  transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.top-input-label {
  position: absolute;
  top: 6px;
  left: 28px;
  background-color: #fff;
  padding: 0 2px;
  font-size: 12px;
}

.bundle-input-wrapper {
  padding: 4px 8px !important;
}

.opacity-hidden {
  width: 0 !important;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  margin: 0;
}

.abs-opacity-hidden {
  width: 0 !important;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  margin: 0;
  position: absolute;
}

.dt-scroll-head .dt-scroll-headInner {
  width: 100% !important;
}

.table.table-striped.dataTable {
  width: 100% !important;
}

.dt-select-checkbox:focus {
  outline: none !important;
}

.switch {
  --button-width: 3.5em;
  --button-height: 1.5em;
  --toggle-diameter: 1em;
  --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
  --toggle-shadow-offset: 10px;
  --toggle-wider: 3em;
  --color-grey: #cccccc;
  --color-green: #3c8dbc;
}

.slider {
  display: inline-block;
  width: var(--button-width);
  height: var(--button-height);
  background-color: var(--color-grey);
  border-radius: calc(var(--button-height) / 2);
  position: relative;
  transition: 0.3s all ease-in-out;
}

.slider::after {
  content: "";
  display: inline-block;
  width: var(--toggle-diameter);
  height: var(--toggle-diameter);
  background-color: #fff;
  border-radius: calc(var(--toggle-diameter) / 2);
  position: absolute;
  top: var(--button-toggle-offset);
  transform: translateX(var(--button-toggle-offset));
  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
  transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
  background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
  display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
  width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

.checkbox label.switch {
  padding-left: 0;
}

.switch-text {
  vertical-align: top;
  margin-left: 6px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .radio-wrapper input[type=radio] {
    --active: #3c8dbc;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #3c8dbc;
    --background: #fff;
    --disabled: #d9dceb;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 18px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .radio-wrapper input[type=radio]:after {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .radio-wrapper input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .radio-wrapper input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .radio-wrapper input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .radio-wrapper input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  .radio-wrapper input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .radio-wrapper input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .radio-wrapper input[type=radio]:not(.switch) {
    width: 18px;
  }
  .radio-wrapper input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .radio-wrapper input[type=radio]:not(.switch):checked {
    --o: 0;
  }
  .radio-wrapper input[type=radio] + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 4px;
  }

  .radio-wrapper input[type=radio]:not(.switch) {
    border-radius: 20px !important;
  }
}


@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-wrapper input[type=checkbox] {
    --active: #3c8dbc;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #3c8dbc;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 18px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .checkbox-wrapper input[type=checkbox]:after {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .checkbox-wrapper input[type=checkbox]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .checkbox-wrapper input[type=checkbox]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .checkbox-wrapper input[type=checkbox]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .checkbox-wrapper input[type=checkbox]:disabled + label {
    cursor: not-allowed;
  }
  .checkbox-wrapper input[type=checkbox]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .checkbox-wrapper input[type=checkbox]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .checkbox-wrapper input[type=checkbox]:not(.switch) {
    width: 18px;
  }
  .checkbox-wrapper input[type=checkbox]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .checkbox-wrapper input[type=checkbox]:not(.switch):checked {
    --o: 1;
  }
  .checkbox-wrapper input[type=checkbox] + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 4px;
  }

  .checkbox-wrapper input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  .checkbox-wrapper input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 6px;
    top: 3px;
    transform: rotate(var(--r, 20deg));
  }
  .checkbox-wrapper input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
}

.checkbox-wrapper *, .radio-wrapper * {
  box-sizing: inherit;
}
.checkbox-wrapper *:before,
.checkbox-wrapper *:after,
.checkbox-radio *:before,
.checkbox-radio *:after {
  box-sizing: inherit;
}

.de-selector {
  color: #72afd2;
  cursor: pointer;
  text-decoration: underline;
}

.label.sup-label {
  position: relative;
  top: -8px;
  left: -10px;
  border-radius: 30px;
  padding: 0 4px;
  margin-right: -8px;
}

#available_patrons_chosen.updated .chosen-single {
  border: 1px solid #3998b4;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #3998b4 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #3998b4 !important;
  animation: borderline 0.2s linear;
}

@keyframes borderline {
  0% {
    border: 1px solid #3998b4;
  }
  25% {
    border: 1px solid #3998b4;
  }
  50% {
    border: 1px solid #3998b4;
  }
  75% {
    border: 1px solid #3998b4;
  }
  100% {
    border: none;
  }
}


.skeleton {
  cursor: progress;

  background: linear-gradient(90deg, #ddda 40%, #efefefaa, #ddda 60%) right / 300% 100%;
  animation: skeleton-loading 1.5s linear infinite;
  margin: 8px 0;
}

@keyframes skeleton-loading {
  to {
    background-position: left;
  }
}

.loading-text {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, #000 40%, #efefefaa, #000 60%) right / 300% 100%;
  animation: skeleton-loading 1.5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

#broadcaster-filters {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #d1d1d1;
}

.input-group-append {
  position: absolute;
  right: 6px;
}

.help-rel {
  position: relative;
  right: 0;
  top: 0;
}


.typed-out-container{
  display: inline-block;
}

.typed-out {
  font-size: 1.3rem;
  overflow: hidden;
  white-space: nowrap;
  text-wrap: auto;
  animation: typing .5s forwards;
  width: 0;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.off {
	animation-name: none;
}

.ajax-dropdown.dropdown:focus-within > div {
  display: flex;
  flex-direction: column;
}

.waveform-container {
  /* margin: 0 0 24px 0; */
  margin: 24px auto;
  width: 100%;
  line-height: 0;
  -moz-box-shadow: 3px 3px 20px #919191;
  -webkit-box-shadow: 3px 3px 20px #919191;
  box-shadow: 3px 3px 20px #919191;
  overflow: clip;
}

.zoomview-container {
  height: 200px;
  margin: 0;
  line-height: 0;
}

.overview-container {
  height: 85px;
}

/* AI styles */

.card-ai {
  position: relative;
  box-shadow: none;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card-ai::after, .card-ai::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #32a852, #2f98b8, #2595d5, #1e87e8, #32a852);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 12px;
  animation: 10s spinner linear infinite;
}
.card-ai::before{
  filter: blur(.8rem);
  opacity: 0.8;
}

@keyframes spinner {
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}

.draggable-watermark {
  width: 60%;
  margin: 1rem 0 0 1rem;
  background-color: rgba(112, 120, 126, 0.336);
  color: #000;
  border-radius: 0.75em;
  padding: 4%;
  touch-action: none;
  user-select: none;
  text-align: center;
}

.black-box {
  border: 1px solid black;
  width: 300px;
  height: 200px;
}

.modal-scrollable {
  max-height: 75vh;
  overflow-y: scroll;
}

input.select-addressbook {
  margin: 0;
}

.underline {
  text-decoration: underline;
}

/* Rainbow border for Bootstrap button */
.btn-rainbow {
  position: relative;
  z-index: 1;
  background-color: #275D7C;
}

.dropdown .btn-rainbow {
  color: #fff;
}

/* Create the rainbow border using pseudo-element */
.btn-rainbow::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -2;
  background: linear-gradient(
    45deg,
    #0072ff,
    #339cff,
    #66c7ff,
    #99f2ff,
    #66ffcc,
    #33ff99,
    #00ff66,
    #20bf6b,
    #0abde3,
    #2980b9,
    #0072ff
  );
  background-size: 400%;
  border-radius: 0.375rem; /* Match Bootstrap's border-radius */
  animation: rainbow-border 6s linear infinite;
}

/* Create inner element that preserves the btn-primary background */
.btn-rainbow::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: inherit;
  border-radius: 0.25rem; /* Slightly smaller than outer radius */
  z-index: -1;
}

/* Enhanced hover effect */
.btn-rainbow:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-rainbow:active {
  transform: translateY(1px);
}

/* Animation for the rainbow gradient */
@keyframes rainbow-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card-marketing:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: all 0.3s ease-in-out;
  border-color: #72afd2;
  background-color: #72afd21e;
}

.nav-stacked>li>a:hover, .nav-stacked>li.active>a:hover {
  background-color: #72afd21e;
}

table.table.table-striped > tbody > tr.is-self,
table.table.dataTable.table-striped > tbody > tr.is-self {
  background-color: #a1d2721e;
}

/* showroom */
.showroom-playlist-container {
}

.showroom-playlist-container .box-player {
  height: 500px;
}

.showroom-playlist {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 76vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #f1f1f1 #000;
  width: 100%;
  border: 1px solid #333;
}

.showroom-playlist-header {
  padding: 16px;
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  position: sticky;
  top: 0;
  background-color: #000;
  z-index: 1;
  margin: 0 -10px;
}

.showroom-playlist-item {
  display: flex;
  padding: 10px;
  transition: background-color 0.3s;
  position: relative;
}

.showroom-playlist-item.active {
  background-color: #3f166e;
}

.showroom-playlist-item:hover {
  cursor: pointer;
}

.showroom-playlist-item:not(.active):hover {
  background-color: #3f166e83;
}

.showroom-playlist-item .proxy-miniature {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 20px;
  margin-right: 16px;
}

.showroom-playlist-item .showroom-playlist-item-title {
  font-size: 1.8rem;
  color: #fff;
  max-width: 84%;
}

.showroom-playlist-item-duration {
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2px 4px;
  height: 20px;
  width: 66px;
  border-radius: 4px;
  position: absolute;
  top: 102px;
  left: 119px;
}

.showroom-details p.showroom-playlist-item-subtitle {
  font-size: 14px;
  color: #aaa;
}

.showroom-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.time-to-watch {
  position: absolute;
  top: 6px;
  right: 0;
  background-color: rgba(218, 50, 50, 0.7);
  padding: 2px 4px;
  max-width: 60px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.showroom-proxy-player {
  max-width: 800px;
}