:root {
  --primary: #ffb366;
  --primary-rgb: 255, 179, 102;
  --on-primary: #000000;

  --primary-hover: #ffa64d;
  --primary-hover-rgb: 255, 166, 77;
  --on-primary-hover: #000000;

  --secondary: #1f2937;
  --secondary-rgb: 31, 41, 55;
  --on-secondary: #ffffff;

  --secondary-hover: #11181c;
  --secondary-hover-rgb: 17, 24, 28;
  --on-secondary-hover: #ffffff;

  --checked-checkbox-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgba(0, 0, 0, 1)' d='M6.173 10.586a.75.75 0 0 1-1.06-1.06l3-3a.75.75 0 0 1 1.06 0l5 5a.75.75 0 0 1-1.06 1.06L8 8.707l-1.827 1.879z'/%3e%3c/svg%3e");

  --foreground: #393e40;
  --foreground-rgb: 57, 62, 64;

  --background: #f5f8fa;
  --background-rgb: 245, 248, 250;

  --card: #fff;
  --card-rgb: 255, 255, 255;

  --border: #d7dadb;
  --border-rgb: 215, 218, 219;

  --br-base: 0.6;

  --br-default: calc(var(--br-base) * 1rem);
  --br-sm: calc(var(--br-base) * 0.5rem);
  --br-lg: calc(var(--br-base) * 2rem);

  --surface-primary: #f5f8fa;
  --surface-primary-rgb: 245, 248, 250;

  --surface-secondary: #ebeded;
  --surface-secondary-rgb: 235, 237, 237;

  --surface-tertiary: #e0e0e0;
  --surface-tertiary-rgb: 224, 224, 224;

  --sidebar-background: var(--surface-secondary);

  --header-background: var(--background);
  --header-items-color: var(--foreground);

  --spacing-sm: 0.5rem;
  --spacing-default: 1rem;

  --font-size-base: 1;
  --font-size-default: calc(var(--font-size-base) * 1rem);
  --font-size-xs: calc(var(--font-size-base) * 0.65rem);
  --font-size-sm: calc(var(--font-size-base) * 0.85rem);
  --font-size-lg: calc(var(--font-size-base) * 1.3rem);
  --font-size-xl: calc(var(--font-size-base) * 1.85rem);

  --btn-padding-y: 0.8rem;
  --btn-padding-x: 1rem;

  --input-padding-y: 0.8rem;
  --input-padding-x: 1rem;

  /* COLORES BOOTSTRAP info, danger, warning, success */
  /* --info: #60a5fa;
  --info-rgb: 96, 165, 250;
  --on-info: #ffffff;

  --danger: #f87171;
  --danger-rgb: 248, 113, 113;
  --on-danger: #ffffff;

  --warning: #fbbf24;
  --warning-rgb: 251, 191, 36;
  --on-warning: #000000;

  --success: #4ade80;
  --success-rgb: 74, 222, 128;
  --on-success: #000000; */

  /* INFO (azul tinta) */
  --info: #1d4ed8;
  --info-rgb: 29, 78, 216;
  --on-info: #ffffff;

  /* SUCCESS (verde tinta, menos “neón”) */
  --success: #15803d;
  --success-rgb: 21, 128, 61;
  --on-success: #ffffff;

  /* WARNING (ocre/mostaza, separado del primary naranja) */
  --warning: #a16207;
  --warning-rgb: 161, 98, 7;
  --on-warning: #ffffff;

  /* DANGER (rojo ladrillo) */
  --danger: #b91c1c;
  --danger-rgb: 185, 28, 28;
  --on-danger: #ffffff;

  --font-family-base: 'Montserrat', sans-serif;
}

:root {
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --on-bs-primary: var(--on-primary);

  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: var(--secondary-rgb);
  --on-bs-secondary: var(--on-secondary);

  --bs-foreground: var(--foreground);
  --bs-foreground-rgb: var(--foreground-rgb);

  --bs-background: var(--background);
  --bs-background-rgb: var(--background-rgb);

  --bs-card: var(--card);
  --bs-card-rgb: var(--card-rgb);

  --bs-border: var(--border);
  --bs-border-rgb: var(--border-rgb);

  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --on-bs-info: var(--on-info);

  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --on-bs-danger: var(--on-danger);

  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --on-bs-warning: var(--on-warning);

  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --on-bs-success: var(--on-success);

  --cs-whatsapp-editor-primary: rgba(var(--primary-rgb), 0.3) !important;
}

html {
  font-size: 14px;
  font-family: var(--font-family-base);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-base);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--foreground) !important;
  font-family: var(--font-family-base) !important;
}

a {
  font-family: var(--font-family-base) !important;
}

p {
  font-family: var(--font-family-base) !important;
}

.content-page>.content {
  padding-top: var(--spacing-default);
  padding-bottom: var(--spacing-default);
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //-- Start - Header
  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.navbar-custom {
  background-color: var(--header-background);
  color: var(--header-items-color);
  box-shadow: none;
  border-bottom: none;
}

.navbar-custom .button-menu-mobile {
  color: var(--header-items-color);
}

.cs-header-topmenu {
  background-color: transparent;
}

.on-header {
  color: var(--header-items-color);
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//-- End - Header
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//-- Start - Sidebar
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
#side-menu {
  transition: 0.3s;
}

body:not([data-sidebar-size="condensed"]) #side-menu {
  padding-left: var(--spacing-default) !important;
  padding-right: var(--spacing-default) !important;
}

.logo-box {
  background-color: var(--sidebar-background) !important;
  border-bottom: 0.1rem solid var(--border) !important;
  border-right: 0.1rem solid var(--border) !important;
}

.left-side-menu {
  background-color: var(--sidebar-background) !important;
  border-right: 0.1rem solid var(--border) !important;
}

.cs-tireshop-selected {
  background-color: var(--card);
  width: 100%;
}

.cs-tireshop-selected>span {
  font-weight: 500;
}

[data-sidebar-size="condensed"] .cs-tireshop-selected>span {
  display: none;
}

#sidebar-menu>ul>li>a {
  color: var(--foreground);
  border-radius: var(--br-default);
  font-size: var(--font-size-default);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0.1rem solid transparent;
}

#sidebar-menu .menuitem-active .active {
  background-color: var(--card);
  color: var(--foreground);
  border: 0.1rem solid var(--border);
}

#sidebar-menu .menuitem-active>a:not(.cs-tireshop-selected) {
  background-color: var(--card);
  color: var(--on-primary) !important;
  margin-bottom: 0.2rem;
}

.nav-second-level li a {
  border-radius: var(--br-default);
  color: var(--foreground);
}

#sidebar-menu .nav-second-level .menuitem-active .active {
  background-color: rgba(var(--foreground-rgb), 0.1);
}

#sidebar-menu>ul>li>a:active,
#sidebar-menu>ul>li>a:focus,
#sidebar-menu>ul>li>a:hover {
  background-color: rgba(var(--foreground-rgb), 0.05);
  color: var(--foreground);
}

.nav-second-level li a:focus,
.nav-second-level li a:hover {
  background-color: rgba(var(--foreground-rgb), 0.05);
  color: var(--foreground);
}

.cs-tireshop-selector {
  width: 100%;
}

.logo-sm>img,
.sidebar-logo {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 100%;
}

.custom-logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  justify-content: flex-start;
  padding: 0 var(--spacing-default);
}

/* .custom-logo-container {
  padding: 0 var(--spacing-default);
} */

.custom-logo-container {
  font-weight: 500;
  font-size: var(--font-size-default);
  color: var(--foreground);
}

body[data-sidebar-size="condensed"] .custom-logo-container {
  padding: 0;
}

body[data-sidebar-size="condensed"] .custom-logo-text {
  display: none;
}

body[data-sidebar-size="condensed"] .custom-logo-container {
  justify-content: center;
}

body[data-sidebar-size=condensed] .logo-box {
  width: 84px !important;
  /* padding-left: 0 !important;
  padding-right: 0 !important; */
}

body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li:hover>a {
  color: var(--foreground);
  font-weight: 500;
  width: calc(20rem + 70px);
  border-bottom-right-radius: 0;
}

body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li:hover>.collapse>ul {
  width: 20rem;
}

.cs-tireshop-selector>.cs-tireshop-list {
  box-shadow: 0px 24px 48px rgba(var(--foreground-rgb), 0.04);
  background-color: var(--card);
  border: 0.1rem solid var(--border);
  border-top-right-radius: var(--br-default);
  border-bottom-right-radius: var(--br-default);
}

.cs-tireshop-description h5 {
  font-size: var(--font-size-default);
  color: var(--foreground);
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//-- End - Sidebar
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //-- Start - Elements
  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.page-title-container {
  /* border-bottom: 0.1rem solid var(--border); */
  margin-bottom: calc(var(--spacing-default) * 1.5);
  display: flex;
  width: 100%;
  flex-direction: column;
}

.page-breadcrumbs {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0.5rem;
}

.page-breadcrumbs>li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: rgba(var(--foreground-rgb), 0.7);
}

.page-breadcrumbs a {
  font-size: var(--font-size-sm);
  color: var(--foreground);
}

.page-breadcrumbs a.active {
  font-weight: 500;
}

@media (min-width: 768px) {
  .page-title-container:has(.page-description) {
    flex-direction: row;
    justify-content: space-between;
  }

  .page-title-container:has(.page-description) .page-breadcrumbs {
    margin-top: var(--spacing-default);
  }
}

.page-title {
  font-size: var(--font-size-xl);
  color: var(--foreground);
  font-weight: 500;
}

.page-description {
  font-size: var(--font-size-default);
  color: var(--foreground);
  opacity: 0.7;
}

.form-label {
  font-size: var(--font-size-default);
  color: rgba(var(--foreground-rgb), 1);
  font-weight: 500;
  font-family: var(--font-family-base);
}

.modal-body label {
  font-size: var(--font-size-default);
  color: rgba(var(--foreground-rgb), 0.8);
  font-weight: 500;
}

.form-control {
  font-size: var(--font-size-default);
  padding: var(--input-padding-y) var(--input-padding-x);
  background-color: var(--card);
  border: 0.1rem solid var(--border);
  border-radius: var(--br-default);
  outline: 0.1rem solid transparent;
  transition: 0.3s;
  font-family: var(--font-family-base);
}

.custom-select.is-invalid:focus,
.custom-select.is-valid:focus,
.custom-select:invalid:focus,
.custom-select:valid:focus,
.form-control.is-invalid:focus,
.form-control.is-valid:focus,
.form-control:invalid:focus,
.form-control:valid:focus {
  outline: 0.1rem solid var(--primary) !important;
  border: 0.1rem solid var(--primary) !important;
  box-shadow: 0rem 0rem 0.571rem rgba(var(--primary-rgb), 0.5) !important;
}

/* .form-check-input:checked[type=checkbox] {
  background-image: var(--checked-checkbox-svg);
} */

.search-bar span {
  top: 12%;
}

.card {
  background-color: var(--card);
  color: var(--foreground);
  border: 0.1rem solid var(--border);
  box-shadow: 0px 24px 48px rgba(var(--foreground-rgb), 0.07);
  border-radius: var(--br-default);
}

.card-footer {
  border-top: 0.1rem solid var(--border);
  background-color: transparent;
}

.card-top-border {
  border-top-width: 0.4rem;
}

.card-primary {
  border-top-color: var(--primary);
  box-shadow: 0px 24px 48px rgba(var(--primary-rgb), 0.07);
}

.card-info {
  border-top-color: var(--info);
  box-shadow: 0px 24px 48px rgba(var(--info-rgb), 0.07);
}

.card-danger {
  border-top-color: var(--danger);
  box-shadow: 0px 24px 48px rgba(var(--danger-rgb), 0.07);
}

.card-warning {
  border-top-color: var(--warning);
  box-shadow: 0px 24px 48px rgba(var(--warning-rgb), 0.07);
}

.card-success {
  border-top-color: var(--success);
  box-shadow: 0px 24px 48px rgba(var(--success-rgb), 0.07);
}

.card-secondary {
  border-top-color: var(--secondary);
  box-shadow: 0px 24px 48px rgba(var(--secondary-rgb), 0.07);
}

.card-header {
  background-color: transparent;
  border-bottom: 0.1rem solid var(--border);
  color: var(--foreground);
  border-top-left-radius: var(--br-default) !important;
  border-top-right-radius: var(--br-default) !important;
}

/* .card-header:first-child {
  border-radius: var(--br-default) var(--br-default) 0 0 !important;
} */

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--foreground);
  font-family: var(--font-family-base);
}

.card-subtitle {
  font-size: var(--font-size-default);
  font-weight: 500;
  color: var(--foreground);
}

.card-description {
  font-size: var(--font-size-default);
  color: var(--foreground);
  font-family: var(--font-family-base);
}

.cs-tabs-header {
  background-color: var(--card);
  color: var(--foreground);
  border-top-left-radius: var(--br-default);
  border-top-right-radius: var(--br-default);
  border: 0.1rem solid var(--card);
  border-bottom: 0.1rem solid var(--border);
}

.cs-tabs-body:has(.cs-tabs-header)>div>.card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.border-bottom {
  border-bottom: 0.1rem solid var(--border) !important;
}

.modal-content {
  background-color: var(--card);
  color: var(--foreground);
  border-radius: var(--br-default);
}

.modal-header {
  border-bottom: 0.1rem solid var(--border);
  border-top-left-radius: var(--br-default);
  border-top-right-radius: var(--br-default);
}

.modal-footer {
  border-top: 0.1rem solid var(--border);
  border-bottom-left-radius: var(--br-default);
  border-bottom-right-radius: var(--br-default);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--foreground);
}

.text-muted {
  color: rgba(var(--foreground-rgb), 0.5) !important;
}

.cs-header-topmenu .cs-header-topmenu-card {
  background-color: var(--card);
  color: var(--foreground);
  border: 0.1rem solid rgba(var(--border-rgb), 0.5);
  box-shadow: 0px 24px 48px rgba(var(--foreground-rgb), 0.04);
  border-radius: var(--br-default);
  padding: var(--spacing-default);
}

.cs-header-topmenu .cs-header-topmenu-card-header {
  background-color: var(--surface-secondary);
  border-radius: var(--br-default);
  padding: var(--spacing-default);
}

.profile-dropdown .dropdown-item {
  font-size: var(--font-size-default);
  color: var(--foreground);
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--surface-primary);
  color: var(--foreground);
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//-- End - Elements
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//-- Start - Bootstrap colors
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.alert {
  border-radius: var(--br-default);
}

.btn {
  border-radius: var(--br-default);
  transition: 0.2s;
  font-size: var(--font-size-default);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: 500;
  transition: 0.3s;
}

.btn-link {
  color: var(--foreground);
}

.btn-link:hover {
  color: var(--primary-hover);
}

.btn-radio {
  border-radius: var(--br-default);
  border: 0.1rem solid var(--border);
  background-color: var(--surface-primary);
}

.btn-radio h5 {
  font-size: var(--font-size-default);
  font-weight: 500;
}

.btn-radio p {
  font-size: var(--font-size-sm);
}

.btn-radio.btn-radio-sm h5 {
  font-size: var(--font-size-sm);
}

.btn-radio.btn-radio-sm p {
  font-size: var(--font-size-xs, calc(var(--font-size-base) * 0.75rem));
}

.btn-primary {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
  border: 0.1rem solid var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  color: var(--on-primary-hover) !important;
  border: 0.1rem solid var(--primary-hover) !important;
}

.btn-info {
  background-color: var(--info) !important;
  color: var(--on-info) !important;
  border: 0.1rem solid var(--info) !important;
}

.btn-info:hover {
  background-color: var(--info) !important;
  color: var(--on-info) !important;
  border: 0.1rem solid var(--info) !important;
}

.btn-danger {
  background-color: var(--danger) !important;
  color: var(--on-danger) !important;
  border: 0.1rem solid var(--danger) !important;
}

.btn-danger:hover {
  background-color: var(--danger) !important;
  color: var(--on-danger) !important;
  border: 0.1rem solid var(--danger) !important;
}

.btn-warning {
  background-color: var(--warning) !important;
  color: var(--on-warning) !important;
  border: 0.1rem solid var(--warning) !important;
}

.btn-warning:hover {
  background-color: var(--warning) !important;
  color: var(--on-warning) !important;
  border: 0.1rem solid var(--warning) !important;
}

.btn-success {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
  border: 0.1rem solid var(--success) !important;
}

.btn-success:hover {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
  border: 0.1rem solid var(--success) !important;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  color: var(--on-secondary) !important;
  border: 0.1rem solid var(--secondary) !important;
}

.btn-secondary:hover {
  background-color: var(--secondary-hover) !important;
  color: var(--on-secondary-hover) !important;
  border: 0.1rem solid var(--secondary-hover) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  color: var(--primary) !important;
  border: 0.1rem solid var(--primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
  border: 0.1rem solid var(--primary) !important;
}

.btn-outline-info {
  background-color: transparent !important;
  color: var(--info) !important;
  border: 0.1rem solid var(--info) !important;
}

.btn-outline-info:hover {
  background-color: var(--info) !important;
  color: var(--on-info) !important;
  border: 0.1rem solid var(--info) !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  color: var(--danger) !important;
  border: 0.1rem solid var(--danger) !important;
}

.btn-outline-danger:hover {
  background-color: var(--danger) !important;
  color: var(--on-danger) !important;
  border: 0.1rem solid var(--danger) !important;
}

.btn-outline-warning {
  background-color: transparent !important;
  color: var(--warning) !important;
  border: 0.1rem solid var(--warning) !important;
}

.btn-outline-warning:hover {
  background-color: var(--warning) !important;
  color: var(--on-warning) !important;
  border: 0.1rem solid var(--warning) !important;
}

.btn-outline-success {
  background-color: transparent !important;
  color: var(--success) !important;
  border: 0.1rem solid var(--success) !important;
}

.btn-outline-success:hover {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
  border: 0.1rem solid var(--success) !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--secondary) !important;
  border: 0.1rem solid var(--secondary) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--secondary) !important;
  color: var(--on-secondary) !important;
  border: 0.1rem solid var(--secondary) !important;
}

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

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

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

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

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

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

.alert-primary {
  background-color: rgba(var(--primary-rgb), 0.2) !important;
  color: var(--foreground) !important;
  border: 0.1rem solid var(--primary) !important;
}

.alert-info {
  background-color: rgba(var(--info-rgb), 0.2) !important;
  color: var(--foreground) !important;
  border: 0.1rem solid var(--info) !important;
}

.alert-danger {
  background-color: rgba(var(--danger-rgb), 0.2) !important;
  color: var(--foreground) !important;
  border: 0.1rem solid var(--danger) !important;
}

.alert-warning {
  background-color: rgba(var(--warning-rgb), 0.2) !important;
  color: var(--foreground) !important;
  border: 0.1rem solid var(--warning) !important;
}

.alert-success {
  background-color: rgba(var(--success-rgb), 0.2) !important;
  color: var(--foreground) !important;
  border: 0.1rem solid var(--success) !important;
}

.alert-secondary {
  background-color: rgba(var(--secondary-rgb), 0.2) !important;
  color: var(--foreground) !important;
  border: 0.1rem solid var(--secondary) !important;
}

.bg-soft-primary {
  background-color: rgba(var(--primary-rgb), 0.2) !important;
  color: var(--primary) !important;
}

.bg-soft-info {
  background-color: rgba(var(--info-rgb), 0.2) !important;
  color: var(--info) !important;
}

.bg-soft-danger {
  background-color: rgba(var(--danger-rgb), 0.2) !important;
  color: var(--danger) !important;
}

.bg-soft-warning {
  background-color: rgba(var(--warning-rgb), 0.2) !important;
  color: var(--warning) !important;
}

.bg-soft-success {
  background-color: rgba(var(--success-rgb), 0.2) !important;
  color: var(--success) !important;
}

.bg-soft-secondary {
  background-color: rgba(var(--secondary-rgb), 0.2) !important;
  color: var(--secondary) !important;
}

/* .ribbon-box .ribbon-two-success span {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
} */

.ribbon-primary {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

.ribbon-info {
  background-color: var(--info) !important;
  color: var(--on-info) !important;
}

.ribbon-danger {
  background-color: var(--danger) !important;
  color: var(--on-danger) !important;
}

.ribbon-warning {
  background-color: var(--warning) !important;
  color: var(--on-warning) !important;
}

.ribbon-success {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
}

.ribbon-secondary {
  background-color: var(--secondary) !important;
  color: var(--on-secondary) !important;
}

.br-default {
  border-radius: var(--br-default) !important;
}

.pagination {
  gap: calc(var(--spacing-default) * 0.5);
}

.pagination .page-item .page-link {
  border-radius: var(--br-default);
  border: 0.1rem solid var(--border) !important;
  background-color: var(--card);
  color: var(--foreground) !important;
  font-size: var(--font-size-default);
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-default);
}

.pagination .page-item .page-link.bg-primary {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
  border: 0.1rem solid var(--primary) !important;
  font-weight: bold;
}

.pagination .page-item .page-link.disabled {
  opacity: 0.5;
}

.dropdown-menu {
  background-color: var(--card);
  color: var(--foreground);
  border: 0.1rem solid var(--border);
  box-shadow: 0px 24px 48px rgba(var(--foreground-rgb), 0.07);
  border-radius: var(--br-default);
  padding: var(--spacing-sm);
}

.dropdown-item {
  font-size: var(--font-size-default);
  color: var(--foreground);
  border-radius: var(--br-default);
  padding: var(--spacing-sm) var(--spacing-default);
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--surface-primary) !important;
  color: var(--foreground) !important;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//-- End - Bootstrap colors
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.table thead {
  border-style: hidden;
}

.table thead th {
  background-color: var(--surface-secondary);
  border-bottom: none;
  font-size: var(--font-size-default);
  font-family: var(--font-family-base);
  font-weight: 500;
  color: var(--foreground);
}

.table thead th:first-child {
  border-top-left-radius: var(--br-default);
  border-bottom-left-radius: var(--br-default);
}

.table thead th:last-child {
  border-top-right-radius: var(--br-default);
  border-bottom-right-radius: var(--br-default);
}

.table td {
  font-size: var(--font-size-default);
  font-family: var(--font-family-base);
  color: var(--foreground);
}

.table tbody tr {
  vertical-align: middle !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: var(--border) !important;
}

.page-title-box {
  background-color: var(--background);
  border: none;
  box-shadow: none;
}

.form-switch input {
  height: 1.6rem !important;
  width: 3rem !important;
  margin-top: 0 !important;
}

.form-check-label {
  font-size: var(--font-size-default);
  color: var(--foreground);
  font-weight: bold;
  font-family: var(--font-family-base);
}

/* Slide animation for .cs-box-toggle-content */
.cs-box-toggle .cs-box-toggle-content {
  max-height: 10000rem;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.cs-box-toggle:not(:has([data-toggle="cs-box-toggle"]:is(:checked))) .cs-box-toggle-content {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
  pointer-events: none;
  overflow: visible;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: var(--ysl-chat-spacing-df);
  cursor: pointer;
}

.tag-item:has(.form-control.error) {
  align-items: flex-start;
}

.tag-item-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background-color: var(--ysl-chat-background);
  color: var(--ysl-chat-foreground) !important;
  box-shadow: var(--ysl-chat-shadow);
  transition: all var(--ysl-animation-time-df) var(--ysl-animation-ease);
}

.tag-item-avatar:hover {
  transform: scale(1.05);
  box-shadow: var(--ysl-chat-shadow-lg);
}

.tag-item-avatar.tag-item-avatar-input {
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}

.tag-item-avatar.tag-item-avatar-input>i {
  display: none;
}

.tag-item-avatar.tag-item-avatar-input input {
  display: none;
}

.tag-item-avatar.tag-item-avatar-input:has(input:checked)>i {
  display: inline-block;
}

.tag-item-avatar-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--spacing-default);
  padding: var(--spacing-default);
}

.tag-item-avatar-inputs-flex {
  display: flex;
  width: 100%;
  gap: var(--spacing-sm);
  padding: var(--spacing-default);
}

.tag-item-avatar-inputs-flex>* {
  flex: 1;
}

.tag-item-label {
  color: var(--ysl-chat-foreground);
  font-size: 0.875rem;
  margin: 0;
}

.tag-item-avatar.blue {
  background-color: #4F8EF7;
  color: #fff !important;
}

.tag-item-avatar.green {
  background-color: #43C59E;
  color: #fff !important;
}

.tag-item-avatar.purple {
  background-color: #A259F7;
  color: #fff !important;
}

.tag-item-avatar.orange {
  background-color: #FFB86C;
  color: #fff !important;
}

.tag-item-avatar.pink {
  background-color: #FF6F91;
  color: #fff !important;
}

.tag-item-avatar.teal {
  background-color: #38B6FF;
  color: #fff !important;
}

.tag-item-avatar.yellow {
  background-color: #FFE066;
  color: #333 !important;
}

.tag-item-avatar.red {
  background-color: #FF6363;
  color: #fff !important;
}

.tag-item-badge {
  font-size: 0.55rem;
  font-weight: bold;
  padding: 0.05rem 0.2rem;
  border-radius: 0.3rem;
}

.tag-item-badge.blue {
  background-color: #4F8EF7;
  color: #fff !important;
}

.tag-item-badge.green {
  background-color: #43C59E;
  color: #fff !important;
}

.tag-item-badge.purple {
  background-color: #A259F7;
  color: #fff !important;
}

.tag-item-badge.orange {
  background-color: #FFB86C;
  color: #fff !important;
}

.tag-item-badge.pink {
  background-color: #FF6F91;
  color: #fff !important;
}

.tag-item-badge.teal {
  background-color: #38B6FF;
  color: #fff !important;
}

.tag-item-badge.yellow {
  background-color: #FFE066;
  color: #333 !important;
}

.tag-item-badge.red {
  background-color: #FF6363;
  color: #fff !important;
}

.image-radio {
  display: flex;
  background-color: var(--background);
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-default);
  cursor: pointer;
  padding: var(--spacing-default);
  border-radius: var(--br-default);

  --image-radio-input-size: 1.6rem;
  --image-radio-border-size: 0.1rem;

  border: var(--image-radio-border-size) solid transparent;
}

.image-radio:has(input:is(:checked)) {
  border: var(--image-radio-border-size) solid var(--primary);
}

.image-radio-img {
  height: 4rem;
}

.image-radio-title {
  font-size: var(--font-size-default);
  font-weight: 500;
  margin: 0;
}

.image-radio-description {
  font-size: var(--font-size-sm);
  font-weight: normal;
  margin: 0;
}

.image-radio-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--image-radio-input-size);
  height: var(--image-radio-input-size);
}

.image-radio-input>input {
  opacity: 0;
  overflow: hidden;
  height: 0;
  width: 0;
}

.image-radio-input::before {
  content: "";
  position: absolute;
  width: var(--image-radio-input-size);
  height: var(--image-radio-input-size);
  border: 0.1rem solid var(--border);
  border-radius: 50%;
}

.image-radio-input::after {
  content: "";
  position: absolute;
  width: calc(var(--image-radio-input-size) * 0.6);
  height: calc(var(--image-radio-input-size) * 0.6);
  background-color: var(--primary);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.1s ease;
}

.image-radio:has(input:is(:checked)) .image-radio-input::before {
  border-color: var(--primary);
}

.image-radio:has(input:is(:checked)) .image-radio-input::after {
  transform: scale(1);
}

.image-radio:has(input:is(:disabled)) {
  cursor: not-allowed;
  opacity: 0.7;
}

.image-radio.image-check .image-radio-input::before {
  border-radius: 0.3rem;
}

.image-radio.image-check .image-radio-input::after {
  background-color: transparent;
}

.image-radio.image-check:has(input:is(:checked)) .image-radio-input::before {
  border-color: var(--primary);
  background-color: var(--primary);
}

.image-radio.image-check:has(input:is(:checked)) .image-radio-input::after {
  border-radius: 0.3rem;
  content: "✓";
  color: var(--on-primary);
  font-weight: bold;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}