:root,
[data-bs-theme="light"] {
  --bs-body-bg: #f1f4f6;
  --bs-border-color: rgb(79.688, 79.688, 79.688, 0.35);

  /* SUCCESS global */
  --bs-success: #2fa11e !important;
  --bs-success-rgb: 43, 167, 24 !important;

  /* PRIMARY global */
  --bs-primary: #195f86 !important;
  --bs-primary-rgb: 60, 105, 131 !important;

  --bs-nav-pills-link-active-bg: var(--bs-primary) !important;
  --bs-nav-pills-link-active-color: #fff !important;

    /* INFO global */
  --bs-info: #96b6c8 !important;
  --bs-info-rgb: 159, 200, 223 !important;

    --bs-pagination-color: var(--bs-primary);
  --bs-pagination-border-color: var(--bs-primary);

  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-primary);

  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);

  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #f8f9fa;
  --bs-pagination-disabled-border-color: #dee2e6;

}

[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-border-color: rgb(207.19, 207.19, 207.19, 0.4);

  /* SUCCESS global también en dark */
  --bs-success: #2fa11e !important;
  --bs-success-rgb: 43, 167, 24 !important;

    /* PRIMARY global */
  --bs-primary: #195f86 !important;
  --bs-primary-rgb: 25, 95, 134 !important;

  /* INFO global */
  --bs-info: #96b6c8 !important;
  --bs-info-rgb: 159, 200, 223 !important;

  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: #fff;

    --bs-pagination-color: var(--bs-primary);
  --bs-pagination-border-color: var(--bs-primary);

  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-primary);

  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);

  --bs-pagination-disabled-color: #aaa;
  --bs-pagination-disabled-bg: #333;
  --bs-pagination-disabled-border-color: #444;

}

html, body {
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

body {
  font-family: "Bai Jamjuree", sans-serif !important;
  background-color: var(--bs-body-bg) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body, h1, h2, h3, h4, h5, h6, p, a, small {
  /*color: var(--bs-body-color) !important;*/
}

body{
  position: relative;
  min-height: 100vh;
  isolation: isolate;          /* CLAVE: permite z-index negativo sin salirte del body */

  background-image: url("../../../../images/logos/pattern.png") !important;
  background-repeat: repeat;
  background-size: 400px 400px !important;
  background-position: center;
}

/* Overlay que baja la intensidad (pero NO tapa el contenido) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;                 /* CLAVE: queda detrás del contenido, encima del background */
}

/* Intensidad por tema */
[data-bs-theme="light"] body::before { background: rgba(255,255,255,.20) !important; }
[data-bs-theme="dark"]  body::before { background: rgba(0,0,0,.90) !important; }

nav.navbar {
  padding: 1rem;
}

a {
  text-decoration: none !important;
}
a:hover {
  text-decoration: none !important;
}

#wrapper {
  display: flex;
  height: 100vh; /* esto es clave */
}

/* No desplazar contenido al expandirse en móvil */
/*#wrapper.show-sidebar #page-content-wrapper {
  margin-left: 10px !important;
}*/

/*contenido del sistema*/
#page-content-wrapper {
  margin-left: 330px;
  transition: margin-left 0.3s ease;
  width: 100%;
}

#wrapper.toggled #page-content-wrapper {
  margin-left: 85px;
  transition: margin-left 0.3s ease;
}

[data-bs-theme="light"] #sidebar {
  background: linear-gradient(330deg,rgb(49.805, 87.718, 109.57,0.87));
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid transparent !important; 
  box-shadow: 4px 0 4px rgba(0, 0, 0, 0.4);
}

 [data-bs-theme="dark"] #sidebar {
  background-color: rgb(19.922, 35.088, 43.828,0.7)!important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgb(68.57, 90.805, 90.805, 0.7);
}

#sidebar {
  width: 320px;
  border-radius: 16px;              /* esquinas redondeadas */
  margin: 8px;                       /* separación del borde */
  position: fixed;
  z-index: 1000;
  transition: width 0.3s ease;
  height: calc(100vh - 16px);
  flex-shrink: 0;
  /*  scroll oculto*/
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ocultar scrollbar pero permitir scroll */
  -ms-overflow-style: none;        /* IE 10+ */
  scrollbar-width: none;           /* Firefox */
}

.sidebar .nav-sidebar {
  display: flex;
  gap: 8px;
  width: 100%;
}

/* Estado normal: label visible */
.nav-label{
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .2s ease, transform .2s ease, max-width .25s ease;
  opacity: 1;
  transform: translateY(0);
  max-width: 220px; /* suficiente para tus labels */
}

/* Colapsado: el label "existe" pero no se ve ni ocupa ancho */
#wrapper.toggled .nav-label{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);  /* evita ese efecto de “sube” raro */
  max-width: 0;
}

/* Al hover expandido: vuelve suave */
#wrapper.toggled #sidebar:hover .nav-label{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  max-width: 220px;
}

#lockIcon { 
  font-size: 16px;
  float: right;
}

.chevron {
  opacity: 0.6;
  transition: transform 0.2s ease; /* para la animación suave */
}
/* Mostrar el sidebar al hacer clic en botón */
#wrapper.show-sidebar #sidebar {
  width: 320px !important;
}

#wrapper.toggled #sidebar {
  width: 75px;
  overflow: hidden;
}

#wrapper.toggled #sidebar:hover {
  width: 320px;
}

#wrapper.toggled #sidebar:hover .nav-sidebar {
  width: 100%;
}

#wrapper.toggled #sidebar:hover #lockIcon {
  display: block;
}

.sidebar .nav-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--bs-primary) !important;
}

#wrapper.toggled .sidebar .nav-sidebar.active {
  color: var(--bs-primary) !important;
}

#wrapper.toggled #sidebar .chevron {
  display: none;
  opacity: 0.6;
}

#wrapper.toggled #sidebar:hover .chevron {
  display: inline;
}

/* Chevron normal (submenu cerrado) */
#sidebar .nav-link.nav-sidebar[aria-expanded="false"] .chevron,
#sidebar .nav-link.nav-sidebar:not([aria-expanded]) .chevron {
  transform: rotate(0deg);
}

/* Chevron girado (submenu abierto) */
#sidebar .nav-link.nav-sidebar[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* Ocultar etiquetas y flechas al colapsar */

#wrapper.toggled #lockIcon {
  display: none;
}

/* Submenú */

.submenu .nav-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .collapse .submenu {
  transition: width 0.3s ease;
}

#wrapper.toggled #sidebar:hover .submenu.collapse.show {
  padding-left: 24px;
  transition: padding-left 0.3s ease;
  width: 305px;
}


/* BTN SUCCESS */
.btn-success {
  --bs-btn-bg: #2fa11e;
  --bs-btn-border-color: #fff;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #248b14;         /* mismo tono en hover */
  --bs-btn-hover-border-color: #248b14;
  --bs-btn-active-bg: #2fa11e;
  --bs-btn-active-border-color: #2fa11e;
  --bs-btn-disabled-bg: #2fa11e;
  --bs-btn-disabled-border-color: #2fa11e;
}

.btn-outline-success {
  --bs-btn-color: #2fa11e;
  --bs-btn-border-color: #2fa11e;
  --bs-btn-hover-bg: #2fa11e;
  --bs-btn-hover-border-color: #2fa11e;
  --bs-btn-hover-color: #fff;
}

/* BTN PRIMARY */
.btn-primary {
  --bs-btn-bg: #195f86;
  --bs-btn-border-color: #195f86;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #284657;
  --bs-btn-hover-border-color: #284657;
  --bs-btn-active-bg: #195f86;
  --bs-btn-active-border-color: #195f86;
  --bs-btn-disabled-bg: #195f86;
  --bs-btn-disabled-border-color: #195f86;
}

.btn-outline-primary {
  --bs-btn-color: #195f86;
  --bs-btn-border-color: #195f86;
  --bs-btn-hover-bg: #195f86;
  --bs-btn-hover-border-color: #195f86;
  --bs-btn-hover-color: #fff;
}

[data-bs-theme="light"] .text-primary {
   color: #3c6983 !important;
}

[data-bs-theme="dark"] .text-primary {
   color: #0678b9 !important;
}

/* BTN INFO */
.btn-info {
  --bs-btn-bg: #96b6c8;
  --bs-btn-border-color: #96b6c8;
  --bs-btn-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #508daf;
  --bs-btn-hover-border-color: #508daf;
  --bs-btn-active-bg: #96b6c8;
  --bs-btn-active-border-color: #96b6c8;
  --bs-btn-disabled-bg: #96b6c8;
  --bs-btn-disabled-border-color: #96b6c8;
}

.btn-outline-info {
  --bs-btn-color: #96b6c8;
  --bs-btn-border-color: #96b6c8;
  --bs-btn-hover-bg: #96b6c8;
  --bs-btn-hover-border-color: #96b6c8;
  --bs-btn-hover-color: #fff;
}


/**********************/
/**nav-pills nav-link**/
/**********************/

.nav-pills .nav-link.active {
  background-color: #195f86; /* azul original */
}

[data-bs-theme="light"] .nav-pills .nav-link {
   color: #284657 !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link {
   color: ##fff !important;
}

[data-bs-theme="light"] .nav-pills .nav-link.active {
   color: #fff !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
   color: ##fff !important;
}


.nav-pills .nav-link.active {
  color: #fff;
  background-color: var(--bs-nav-pills-link-active-bg);
}

.nav {
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}


.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff ;
  background-color: var(--bs-nav-pills-link-active-bg) ;
}

/**********************/
/**subnavbar-flotante**/
/**********************/

#subnavbar-flotante .subnav-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;              /* opcional: evita “saltos” */
}
#subnavbar-flotante .material-symbols-rounded{
  line-height: 1;
  display: inline-flex;    /* ayuda a centrar el icono */
  align-items: center;
}

#subnavbar-flotante {
  position: fixed;
  top: 1.4rem;        /* ajusta según tu navbar */
  right: 1rem;
  z-index: 999;      /* por encima del contenido */
  padding: 0.8em 1.5em;
}

[data-bs-theme="light"] #subnavbar-flotante {
  border: 1px solid transparent; 
  background: linear-gradient(280deg,#ff8c00,#ff8c0099);
  /*box-shadow: 0 0 1px rgba(177.3, 215.22, 237.07,0.9);*/
  border-radius: 10px;

  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);

  /*color: #ee8733;*/
}

 [data-bs-theme="dark"] #subnavbar-flotante {
    border-radius: 12px;
  background: linear-gradient(280deg,#ff8c00,#ff8c0099);
  box-shadow: 0 0 1px rgba(255,255,255,0.1);
}

/* Contenedor: transición del ancho/padding para que “respire” */
#subnavbar-flotante{
  transition: max-width .35s ease, padding .35s ease, gap .35s ease, transform .35s ease;
  max-width: 1200px; /* ajusta a tu layout */
  overflow: hidden;
}

/* Texto que se oculta/mostrar (toggleSpan) */
#subnavbar-flotante .toggleSpan{
  display: inline-block;           /* necesario para animar */
  white-space: nowrap;
  transition:
    opacity .25s ease,
    transform .35s ease,
    max-width .35s ease,
    margin .35s ease;
  opacity: 1;
  transform: translateX(0);
  max-width: 220px;                /* suficiente para tus textos */
  margin-left: .25rem;
}

/* Estado colapsado */
#subnavbar-flotante.subnav-collapsed{
  max-width: 560px;               /* ajusta a lo compacto que quieras */
  gap: .75rem !important;         /* reduce separación */
}

#subnavbar-flotante.subnav-collapsed .toggleSpan{
  opacity: 0;
  transform: translateX(-6px);
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Flechas (solo una visible, + animación) */
#toggleNav .icon-expand,
#toggleNav .icon-collapse{
  transition: opacity .2s ease, transform .35s ease;
}

#toggleNav .icon-expand{ display:none; opacity:0; transform: rotate(0deg); }
#toggleNav .icon-collapse{ display:inline-block; opacity:1; transform: rotate(0deg); }

#subnavbar-flotante.subnav-collapsed #toggleNav .icon-expand{
  display:inline-block; opacity:1; transform: rotate(0deg);
}
#subnavbar-flotante.subnav-collapsed #toggleNav .icon-collapse{
  display:none; opacity:0; transform: rotate(0deg);
}

/* “Punch” sutil al colapsar/expandir (opcional) */
#subnavbar-flotante.subnav-animating{
  transform: translateY(-1px);
}

#toggleNavIcon{
  display: inline-block;              /* importante para transformar */
  transition: transform .45s ease;    /* ajusta velocidad aquí */
  transform-origin: 50% 50%;
}

/* cuando está colapsado, “regresa” (gira 180) */
#subnavbar-flotante.subnav-collapsed #toggleNavIcon{
  transform: rotate(180deg);
}

.bg-orange{
  background-color: rgb(240.29, 151.15, 78.462) !important;
}

.btn-orange{
  background-color: rgb(238, 135, 51); 
  color: #fff;  
}

.color-orange{
  color: #FB6E14;   
}


[data-bs-theme="light"] .text-orange  {
  color: #eb7e3d;
}

[data-bs-theme="dark"] .text-orange {
  color: #E59C43;
}

.pagination .page-link {
  opacity: 0.75;
}

/*cambiar el cursor cuando se arrastra un elemento*/
.move-cursor {
  cursor: move;
}

.material-symbols-rounded {
  font-size: inherit;         /* ← importante */
  line-height: 1;             /* evita extra espacio vertical */
  display: inline-block;      /* mejor en botones */
  vertical-align: middle;
  font-variation-settings:
  'FILL' 0,
  'wght' 600,
  'GRAD' -25,
  'opsz' 72
}

/*tamanos de iconos*/
.icon-small { font-size: 16px !important; }
.icon-medium { font-size: 22px !important; }
.icon-large { font-size: 26px !important; }
.icon-xlarge { font-size: 60px !important; }

.material-symbols-rounded.icon-xlarge {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 60;
}


/********************/
/********modal********/
/********************/

[data-bs-theme="light"] .modal-content {
   background-color: rgb(141.45, 164.17, 177.3,0.2) !important; /* Igual que el sidebar */
}

[data-bs-theme="dark"] .modal-content {
   background-color: rgb(39.844, 70.176, 87.656,0.4) !important; /* Igual que el sidebar */
}

.modal-backdrop {
  backdrop-filter: blur(10px);
  background-color: rgb(143.44, 143.44, 143.44, 0.4);
  opacity: 1 !important;
}

.modal-content {
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
  
  border-radius: 8px; /* Opcional, igual que tu sidebar */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* Opcional: sombra suave */
}

.modal-header {
  border-bottom: none !important;
}

.modal-footer {
  border-top: none !important;
}

[data-bs-theme="light"] .modal-title {
  color: #195f86!important;
}

[data-bs-theme="dark"] .modal-title {
  color: #e4f2fa!important;
}

[data-bs-theme="light"] .modal-content {
  border: 1px solid rgb(53.79, 106.87, 137.46, 0.6); /* Borde tenue */
}

[data-bs-theme="dark"] .modal-content {
  border: 1px solid rgba(206, 218, 218, 0.5); /* Borde tenue */
}

/********************/
/********cards********/
/********************/


[data-bs-theme="light"] .card {
  /*border-radius: 20px;*/
  border: 1px solid rgb(41.836, 110.08, 149.41,0.4);
  /*border-image: linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.1)) 1;*/
  background: linear-gradient(180deg,#ebf0f3, #d9e1e5);
  /*box-shadow: 0 0 1px rgb(125.51, 188.7, 225.12, 0.6);*/
  box-shadow:
  0 4px 1px rgba(0, 0, 0, 0.12),   /* abajo */
  0 2px 1px rgba(0, 0, 0, 0.08),    /* alrededor suave */
  0 0 1px rgba(0, 0, 0, 0.10);      /* halo exterior */
  border-radius: 10px;
}

[data-bs-theme="dark"] .card {
  border-radius: 12px;
  background: linear-gradient(145deg,#101010,#303030);
  box-shadow: 0 0 1px rgba(255,255,255,0.1);
}

[data-bs-theme="light"] .card-principal {
  /*border-radius: 20px;*/
  border: 1px solid rgb(68.57, 90.805, 90.805, 0.2);
  /*border-image: linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.1)) 1;*/
  background: linear-gradient(180deg,#60889f40, #48667770);
  box-shadow: 0 0 1px rgb(125.51, 188.7, 225.12, 0.6);
  border-radius: 10px;
}

 [data-bs-theme="dark"] .card-principal {
    border-radius: 12px;
  background: linear-gradient(145deg,#8f8f8f90, #70707060);
  box-shadow: 0 0 1px rgba(255,255,255,0.1);
}

/* Solo las cards con la clase .cards-hover */
.cards-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cards-hover:hover {
  transform: translateY(-8px); /* efecto de flotar */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); /* sombra más marcada */
}

/*cards alineadas verticalmente*/

/* Masonry “real” sin librerías usando CSS columns */
.perm-masonry{
  column-gap: 1rem;
  column-count: 1;
}
@media (min-width: 768px){
  .perm-masonry{ column-count: 2; }
}
@media (min-width: 1200px){
  .perm-masonry{ column-count: 3; }
}

/* Evita que una card se parta entre columnas */
.perm-item{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1rem;
}

/**********************/
/********tablas********/
/**********************/

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

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

.table tr,
.table td,
.table th {
  background-color: transparent !important;
}

.sombra{
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4) !important;
}

.icon-button-sm {
  font-size: 12px;
  vertical-align: middle;
  margin-right: 4px;
}

/* === ESTILOS PARA SIDEBAR MODO MÓVIL (ICONOS FIJOS, SIN EXPANSIÓN POR HOVER) === */

/* Sidebar móvil sobre el contenido */
.mobile-overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1050;
  height: 100vh;
/*  box-shadow: 4px 0 4px rgba(0, 0, 0, 0.4);*/
/*  background-color: var(--sidebar-bg);*/
}

#switchcode-input{
  -webkit-text-security: disc; /* Chrome/Safari */
}

.logo-hospital{
  width: 100%;
  max-height: 60px;
  vertical-align: middle !important;
}

.imagen-con-fondo-blanco {
    background-color: white;
    display: inline-block;
    padding: 0;
}

.espacio-logo-pech{
  height: 90px;
  padding: 3px;
  vertical-align: middle !important;

}

#toggleTheme.btn-link {
  text-decoration: none;
  padding-right: 30px !important;
  color: inherit;
}

#autoBadge {
  font-size: 0.65rem;
  color: inherit;
  top:auto;
  left:24px;
}

.cursor:hover{
  cursor:move;
}


/* Asegura que el modal esté por encima del backdrop */
.modal {
  z-index: 1050;
}

.modal-backdrop.show {
  z-index: 1040;
}

/* Fuerza el dropdown de Select2 por encima del modal */
.select2-container--open {
  z-index: 9999 !important;
}

/* Por si acaso, el menú desplegable en sí */
.select2-container--open .select2-dropdown {
  z-index: 9999 !important;
}

#tableCuentas tbody tr,
  #tableSubcuentas tbody tr {
  cursor: pointer;
}


/*datatables*/

/* Disabled (Primero, Anterior cuando estás en la página 1) */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  color: #6c757d !important;
  background-color: #f8f9fa !important;
  border-color: #d0d4d8 !important;      /* borde visible */
  opacity: 1 !important;                  /* que no se vea borroso */
}

[data-bs-theme="dark"] 
  .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
    color: #8a8a8a !important;
    background-color: #1c1c1c !important;
    border-color: #3a3a3a !important;     /* borde visible */
    opacity: 1 !important;
}

/* Paginación DataTables + Bootstrap 5 */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Hover */
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Página activa */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Deshabilitados (prev/next cuando no hay más) */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: transparent;
  border-color: #dee2e6;
}

/*typeahead*/

/* ============================================
   Ajustes para Typeahead dentro de form-floating
   Compatible con modo claro y oscuro
   ============================================ */

/* wrapper de typeahead */
.twitter-typeahead {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Input real + hint deben tener mismo alto que form-floating */
.twitter-typeahead .tt-input,
.twitter-typeahead .tt-hint {
  height: calc(3.5rem + 2px) !important; /* igual que form-floating */
  padding: 1rem .75rem !important;
  line-height: 1.25 !important;
  border-radius: var(--bs-border-radius) !important;
}

/* Hint debe quedar invisible pero NO blanco */
.twitter-typeahead .tt-hint {
  color: transparent !important;
  background-color: transparent !important;
}

/* Ajuste del input según tema */
[data-bs-theme="light"] .twitter-typeahead .tt-input {
  background-color: #fff !important;
  color: #212529 !important;
}

[data-bs-theme="dark"] .twitter-typeahead .tt-input {
  background-color: #1e1e1e !important;   /* mismo tono que los form-control oscuros */
  color: #f8f9fa !important;
  border-color: rgba(255,255,255,0.15) !important;
}



/* Dropdown autocomplete */
.tt-menu {
  width: 100% !important;
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .35rem;
  margin-top: .25rem;
  padding: .25rem 0;
}

.tt-suggestion {
  padding: .5rem .75rem;
  cursor: pointer;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.rounded-pill{
  overflow: visible !important;
}

/* busqueda autocompletador */

.contenedor-autocompletar{
    width:100%;
    position:relative;
}

.data_buscar {
  background: #BFDEFF;
  width:100%;
  padding: 5px;
  margin-top: 40px;
  margin-bottom: 3px;
  position:absolute;
  z-index: 3000;
  display:none;
  border-radius: 5px;
  height: auto;
  opacity: 1;
  color: black;
  text-transform:capitalize;
  font-size: 13px;
  filter: alpha(opacity=50); /* For IE8 and earlier */

  -webkit-box-shadow: -2px 3px 12px 0px rgba(94,119,122,0.62);
  -moz-box-shadow: -2px 3px 12px 0px rgba(94,119,122,0.62);
  box-shadow: -2px 3px 12px 0px rgba(94,119,122,0.62);

}

.data_buscar p{
  padding: 2px;
  margin: 4px;
  cursor:pointer;
}

.data_buscar p:hover {
  background:  #5D86B1;
  border-radius: 5px;
  color:#606060;
}

.search-box .app-search {
    position: absolute;
    margin: 0px;
    display: block;
    z-index: 110;
    width: 100%;
    top: -1px;
    -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0px
}

.search-box .app-search input {
    width: 100.5%;
    padding: 20px 40px 20px 20px;
    border-radius: 0px;
    font-size: 17px;
    -webkit-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
    transition: 0.5s ease-in;
    height: 61px
}

.search-box .app-search input:focus {
    border-color: #ffffff
}

.search-box .app-search .srh-btn {
    position: absolute;
    top: 23px;
    cursor: pointer;
    background: #ffffff;
    width: 15px;
    height: 15px;
    right: 20px;
    font-size: 14px
}

@media (max-width: 768px) {

  .main-content {
    transform: scale(0.8);
    transform-origin: top left;
    width: 125%; /* 1 / 0.8 = 125% para compensar el escalado */
/*    height: 125vh;*/
  }

  .modal {
    transform: scale(0.85);
    transform-origin: top center;
  }

  /*tamanos de iconos*/

  .icon-small { font-size: 12px !important; }
  .icon-medium { font-size: 18px !important; }
  .icon-large { font-size: 22px !important; }
  .icon-xlarge { font-size: 30px !important; line-height: 1; }

  .table th,
  .table td {
    padding: 0.25rem !important;
  }

  div.dt-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end; /* o center si quieres centrarlos */
    gap: 0.5rem;
  }

  div.dt-buttons .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem; /* opcional para hacerlo más pequeño */
  }

  nav.navbar {
    padding: 0.5rem;
    font-size: 15px;
  }

  .logo_principal{ width:80px }

  #wrapper.toggled #sidebar { width: 50px !important; text-align:center; }
  .material-symbols-rounded { font-size: 20px; }
  #wrapper.toggled #sidebar .nav-sidebar{ padding: 5px !important; }

  #wrapper.toggled #sidebar .nav-label,
  #wrapper.toggled #sidebar .nav-sidebar[data-bs-toggle="collapse"]::after {
    display: none !important;
  }

  #wrapper.show-sidebar #sidebar .nav-label {
    display: inline !important;
    opacity: 1 !important;
    white-space: nowrap;
  }

  /* En modo móvil, solo expandir sidebar manualmente */
  #wrapper.toggled.show-sidebar #sidebar {
    width: 250px !important;
    overflow: visible !important;
  }

  #wrapper.toggled #sidebar:hover .submenu.collapse.show {
    padding-left: 0rem;
  }

  /*  fechas de los submenus*/
  #wrapper.toggled #sidebar .nav-sidebar[data-bs-toggle="collapse"]::after {
    display: none !important;
  }

  #wrapper.show-sidebar #sidebar .nav-sidebar[data-bs-toggle="collapse"]::after {
    display: inline-block !important;
  }

  /*  comportamiendo del contenido */
  #wrapper.toggled #page-content-wrapper {
    padding: 0;
    margin:0;
    padding-left:50px;
  }

  #page-content-wrapper {
    padding: 0px;
    margin:0;
    padding-left:50px;
  }

  #contenedor{
    padding: 0rem;
  }

  .logo-hospital{
    height: 40px;
  }

  .espacio-logo-pech{
    height: 60px;
  }


  .texto-perfil-hospital {
    display:none;
  }


}

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

/*.nodata {
  display: none;
}*/

.hide {
  display: none;
}

.show {
  display: block;
}

.text-justify {
  text-align: justify;
  text-justify: inter-word;
}


/*datepicker*/

/* --- CONTENEDOR GENERAL --- */
.ui-datepicker {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  padding: .2rem;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 9999 !important; /* por seguridad */
  display: none;
}

/* --- HEADER: fondo + bordes + layout --- */
.ui-datepicker-header {
  background: #0d6efd !important; /* color Bootstrap primary */
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  border-radius: .5rem .5rem 0 0;
  
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: .5rem !important;
}

/* --- TÍTULO --- */
.ui-datepicker-title {
  flex-grow: 1;
  text-align: center;
  font-weight: 600;
  font-size: .95rem;
  margin: 0;
  padding: 0;
  color: #fff;
  order: 2;
}

/* --- FLECHAS prev/next --- */
.ui-datepicker-prev,
.ui-datepicker-next {
  width: 2rem;
  height: 2rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  cursor: pointer;
  border-radius: .25rem;
  transition: background .2s;
  order: 1;
}

.ui-datepicker-next { order: 3; }

/* Hover estilo Bootstrap */
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {

  background: rgba(13,110,253,0.15) !important; /* azul clarito tipo Bootstrap */
   color: var(--bs-body-color) !important
}

/* Ocultar íconos viejos */
.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none;
}

/* Iconos modernos */
.ui-datepicker-prev::after {
  content: "‹";
  font-size: 1.4rem;
  line-height: 1;
}

.ui-datepicker-next::after {
  content: "›";
  font-size: 1.4rem;
  line-height: 1;
}

/* --- CELDAS DEL CALENDARIO --- */
.ui-datepicker-calendar th {
  padding: .5rem 0;
  color: #6c757d;
}

.ui-datepicker-calendar td {
  padding: .3rem;
}

.ui-state-default {
  border-radius: .25rem;
  color: var(--bs-body-color) !important;
  text-align: center;
  padding: .3rem;
}

.ui-state-hover {
    background: rgba(13,110,253,0.15) !important; /* azul clarito tipo Bootstrap */
  border: none !important;
  color: var(--bs-body-color) !important;

}

.ui-state-active {
  background: #0d6efd !important;
  color: #fff !important;
  border-color: #0d6efd !important;
  padding: .3rem;
}

/*fin datepicker*/

/*sweetalert2*/

[data-bs-theme="dark"] .swal2-modal {
  background-color: #2b3035 !important;
  color: #fff !important;
}

[data-bs-theme="light"] .swal2-modal {
  background-color: #fff !important;
  color: #333 !important;
}

/* MODO OSCURO – overlay */
[data-bs-theme="dark"] .swal2-container {
  background: rgba(0, 0, 0, 0.75) !important; /* más oscuro */
}

/* MODO CLARO – overlay */
[data-bs-theme="light"] .swal2-container {
  background: rgba(0, 0, 0, 0.45) !important; /* más suave */
}

/* TODOS LOS BOTONES DE SWEETALERT2 */
.swal2-actions button {
  border-radius: 50rem !important;     /* pill */
  padding: .5rem 1.25rem !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
}


/* Estilo base de todos los swal2-confirm SI NO se define confirmButtonColor */
/*.swal2-confirm {
  background-color: #6fdf00;
  border-color: #6fdf00;
  color: #000;
}
.swal2-confirm:hover {
  background-color: #8ccf6e;
  border-color: #8ccf6e;
}
*/
/* fin de sweetalert2*/

/* Alinea el botón del selectpicker con los inputs form-floating */
.bootstrap-select > .dropdown-toggle {
  height: calc(3.5rem + 2px);     /* igual altura que los inputs flotantes */
  display: flex;
  align-items: center;            /* centra verticalmente el contenido */
  justify-content: space-between; /* separa el texto y el ícono del caret */
  padding: 0 0.75rem;             /* padding lateral consistente */
  line-height: normal;            /* evita desalineaciones internas */
}

/* Alinea el texto del select al centro */
.bootstrap-select > .dropdown-toggle .filter-option {
  display: flex;
  align-items: center;            /* centra verticalmente el texto */
  white-space: nowrap;            /* evita saltos de línea */
  vertical-align: middle !important;
}

/* Ajusta el caret (flecha) verticalmente */
.bootstrap-select > .dropdown-toggle .caret {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  vertical-align: middle !important;
}

/* (Opcional) Forzar ancho completo y consistencia visual */
.bootstrap-select {
  width: 100% !important;
}


/* Altura estándar de form-floating en BS 5.3 */
:root { --control-h: calc(3.5rem + 2px); }

/* Toda la fila tiene esa altura */
.control-row { height: var(--control-h); }

/* Que todos los hijos la adopten */
.control-row > * { height: 100%; }

/* form-floating: que el input llene la altura */
.control-row .form-floating { width: auto; }
.control-row .form-floating > .form-control {
  height: 100%;
  padding-top: 1.625rem;   /* como BS para label flotante */
  padding-bottom: .625rem;
}

/* Botones a la misma altura (stretchar) */
.control-row .btn { height: 100%; display: inline-flex; align-items: center; }

/* ===== Select2: haz que su contenedor y selección llenen el 100% ===== */
.control-row .select2-container { width: 100% !important; height: 100%; }
.control-row .select2-container .select2-selection--single {
  height: 100%;
  display: flex; align-items: center;
  box-sizing: border-box;
  padding: 0 .75rem;
  border-radius: var(--bs-border-radius, .375rem);
}

/* Texto centrado verticalmente y sin recortes raros */
.control-row .select2-selection__rendered {
  line-height: normal !important;
  display: flex; align-items: center;
  padding-left: 0 !important;
  padding-right: 2rem !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Flecha centrada */
.control-row .select2-selection__arrow {
  height: 100%; display: flex; align-items: center; justify-content: center;
}

/* Enfoque tipo Bootstrap sin cambiar la altura */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap-5.select2-container--focus .select2-selection--single {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
  outline: 0;
}

.tt-input,
.tt-hint {
  background-color: #fff !important;
  color: #000 !important;
}

.btn-link.no-underline {
  text-decoration: none !important;   /* quita subrayado */
}

.btn-link.no-underline:hover,
.btn-link.no-underline:focus {
  text-decoration: none !important;   /* asegura que tampoco aparezca en hover/focus */
}

/* =========================================
   DROPIFY (BASE)
   ========================================= */
.dropify-wrapper {
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden; /* importante para recortes */
}

/* Fondo por tema (sobrescribe cualquier gradiente) */
[data-bs-theme="light"] .dropify-wrapper{
  background: #fff !important;
}

[data-bs-theme="dark"] .dropify-wrapper{
  background: #000 !important;
}

/* Quitar overlays/texto/info de dropify */
.dropify-wrapper .dropify-infos,
.dropify-wrapper .dropify-infos *{
  display: none !important;
}

/* Si quieres ocultar el texto "arrastra y suelta" pero dejar el icono */
.dropify-wrapper .dropify-message p{
  display: none !important;
}

/* Evita que reaparezca raro en hover */
.dropify-wrapper:hover .dropify-message{
  opacity: 1; /* no lo apagues si quieres icono; si lo quieres oculto, pon 0 */
}

/* =========================================
   DROPIFY: PREVIEW TRANSPARENTE (PNG sin fondo)
   ========================================= */
.dropify-wrapper .dropify-preview,
.dropify-wrapper .dropify-preview .dropify-render,
.dropify-wrapper.has-preview .dropify-preview,
.dropify-wrapper.has-preview .dropify-preview .dropify-render{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}

/* =========================================
   ✅ CLAVE: IMAGEN LLENA EL CONTENEDOR (cover)
   - Si la imagen es vertical, llenará el ancho y recortará arriba/abajo
   ========================================= */

/* Asegura que el preview/render ocupe todo el alto */
.dropify-wrapper .dropify-preview{
  height: 100% !important;
}

.dropify-wrapper .dropify-preview .dropify-render{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* La imagen SIEMPRE ocupa todo el cuadro */
.dropify-wrapper .dropify-preview .dropify-render img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;

  /* evita “fondo blanco” dentro del propio <img> */
  background: transparent !important;
  background-color: transparent !important;
}

/* =========================================
   (OPCIONAL) AVATAR CIRCULAR
   - Solo aplica si agregas la clase .avatar al wrapper
   - Si NO lo quieres, puedes borrar este bloque completo
   ========================================= */
.dropify-wrapper.avatar{
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.dropify-wrapper.avatar .dropify-preview,
.dropify-wrapper.avatar .dropify-preview .dropify-render,
.dropify-wrapper.avatar .dropify-preview .dropify-render img{
  border-radius: 50% !important;
}

/*////////////////////////////*/
/*Estilos para boostrap-select*/
/*////////////////////////////*/

/* Quita cualquier caret interna del botón de bootstrap-select */
.bootstrap-select .bs-caret,
.bootstrap-select .caret,
.bootstrap-select .dropdown-toggle .caret,
.bootstrap-select .filter-option .caret,
.bootstrap-select .filter-option-inner .caret,
.bootstrap-select .filter-option-inner-inner .caret,
.bootstrap-select .dropdown-toggle::after {
  display: none !important;
  content: "" !important;
}

/* Estilos base para el botón de bootstrap-select */
/* Hacer que el botón de bootstrap-select se vea como form-select */
.bootstrap-select>.dropdown-toggle {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .375rem;
  padding: .375rem 2rem .375rem .75rem; /* espacio para la flecha */
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;

  /* 👇 Igual que form-select */
  background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

/* En modo oscuro, la flecha cambia de color automáticamente */
[data-bs-theme="dark"] .bootstrap-select>.dropdown-toggle {
  background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"));
}

/* Al pasar el mouse */
.bootstrap-select>.dropdown-toggle:hover,
.bootstrap-select>.dropdown-toggle:focus {
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,0.05)) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color, #212529) !important;
}

/* Dropdown (menú) */
.bootstrap-select .dropdown-menu {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid var(--bs-border-color) !important;
}

/* Opciones del dropdown */
.bootstrap-select .dropdown-menu li a {
  color: var(--bs-body-color, #212529) !important;
  padding: .375rem .75rem;
}

/* Hover en opción */
.bootstrap-select .dropdown-menu li a:hover {
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,0.1)) !important;
  color: var(--bs-body-color, #212529) !important;
}


/* Cuando ya hay imagen (has-preview), ocultar el ícono/mensaje de Dropify */
.dropify-wrapper.has-preview .dropify-message,
.dropify-wrapper.has-preview .dropify-message *{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Por si Dropify lo muestra en hover */
.dropify-wrapper.has-preview:hover .dropify-message{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/*////////////////////////////*/
/*Estilos para select2*/
/*////////////////////////////*/

/* ===== Base: que respete ancho y fuente ===== */
.select2-container { width: 100% !important; font: inherit; }

/* ===== Caja del control (single y multiple) ===== */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .375rem;
  min-height: calc(2.25rem + 2px); /* igual a .form-select */
  padding: .375rem .75rem;
  display: flex; align-items: center;
}

/* Altura interna (single) */
.select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color, #212529) !important;
  line-height: 1.5;
  padding-left: 0;
}

/* Placeholder */
.select2-container .select2-selection__placeholder {
  color: var(--bs-secondary-color, rgba(108,117,125,.8)) !important;
}

/* Borde y focus “como BS” */
.select2-container--focus .select2-selection,
.select2-container .select2-selection:focus {
  outline: 0;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* Disabled */
.select2-container--disabled .select2-selection {
  background-color: var(--bs-secondary-bg) !important;
  opacity: .65;
}

/* ===== Arrow (single) estilo BS: solo una flecha ===== */
.select2-container .select2-selection--single .select2-selection__arrow {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem;
}
/* quita SVG default para poner caret de BS con background-image */
.select2-container .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  width: 0; height: 0;
}

/* Usa la flecha de Bootstrap 5 (igual a .form-select) */
.select2-container .select2-selection--single {
  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  padding-right: 2rem; /* espacio para el caret */
}

/* ===== Múltiple: chips (tags) ===== */
.select2-container .select2-selection--multiple {
  padding: .25rem .5rem;
  min-height: calc(2.25rem + 2px);
  gap: .25rem; flex-wrap: wrap;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,.05)) !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  border-radius: .25rem;
  padding: .125rem .5rem;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--bs-body-color) !important;
  margin-right: .25rem;
}

/* ===== Dropdown (lista) ===== */
.select2-dropdown {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  overflow: hidden; /* bordes redondeados */
}

/* Búsqueda en dropdown */
.select2-container .select2-search--dropdown .select2-search__field {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .375rem;
}

/* Opción resaltada al navegar */
.select2-results__option--highlighted {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Separador / scroll */
.select2-results__options { scrollbar-color: var(--bs-border-color) transparent; }

/* ===== Z-index dentro de modales (que no se “vaya atrás”) ===== */
.modal .select2-container .select2-dropdown {
  z-index: 1056; /* > modal (1055) */
}

/* ===== Dark tweaks (si quieres afinarlas más) ===== */
[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] {
  background-color: rgba(255,255,255,.1) !important;
}

/* ===========================================
   EXPEDIENTE DE LA MASCOTA – CARD ESTILO FOLDER
   =========================================== */


/* Card principal */
.card-expediente {
  border-radius: 1.5rem;
  overflow: hidden; /* Para que las lengüetas respeten bordes */
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
}

/* Contenedor de lengüetas */
.card-expediente .expediente-header {
  display: flex;
  flex-wrap: nowrap;     /* No saltar a otra línea */
  align-items: stretch;  /* Iguales alturas */
  margin: 0;
}

/* ================================
   LENGÜETAS BASE
   ================================ */
.card-expediente .exp-tab {
  padding: 1rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tamaños de columnas (70/30) */
.card-expediente .exp-tab-main {
  flex: 7 1 0;
}

.card-expediente .exp-tab-secondary {
  flex: 3 1 0;
  border-left: 1px solid rgba(0,0,0,.05);
}

/*//ribbon*/

.ribbon-wrapper, .ribbon-wrapper-bottom, .ribbon-wrapper-reverse, .ribbon-wrapper-right-bottom {
    position: relative;
    padding: 50px 15px 15px 15px
}

.ribbon-vwrapper {
    padding: 15px 15px 15px 50px;
    position: relative
}

.ribbon-overflow {
    overflow: hidden
}

.ribbon-vwrapper-reverse {
    padding: 15px 50px 15px 15px
}

.ribbon-wrapper-bottom {
    padding: 15px 15px 50px 50px
}

.ribbon-wrapper-right-bottom {
    padding: 15px 50px 50px 15px
}

.ribbon-content {
    margin-bottom: 0px
}

.ribbon {
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    clear: left;
    position: absolute;
    top: 12px;
    left: -2px;
    color: #ffffff
}

.ribbon-bookmark:before {
    position: absolute;
    top: 0;
    left: 100%;
    display: block;
    width: 0;
    height: 0;
    content: '';
    border: 15px solid #263238;
    border-right: 10px solid transparent
}

.ribbon-right {
    left: auto;
    right: -2px
}

.ribbon-bookmark.ribbon-right:before {
    right: 100%;
    left: auto;
    border-right: 15px solid #263238;
    border-left: 10px solid transparent
}

.ribbon-vertical-l, .ribbon-vertical-r {
    clear: none;
    padding: 0 5px;
    height: 70px;
    width: 30px;
    line-height: 70px;
    text-align: center;
    left: 12px;
    top: -2px
}

.ribbon-vertical-r {
    left: auto;
    right: 12px
}

.ribbon-bookmark.ribbon-vertical-l:before, .ribbon-bookmark.ribbon-vertical-r:before {
    top: 100%;
    left: 0;
    margin-top: -14px;
    border-right: 15px solid #263238;
    border-bottom: 10px solid transparent
}

.ribbon-badge {
    top: 15px;
    overflow: hidden;
    left: -90px;
    width: 100%;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.ribbon-badge.ribbon-right {
    left: auto;
    right: -90px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ribbon-badge.ribbon-bottom {
    top: auto;
    bottom: 15px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ribbon-badge.ribbon-right.ribbon-bottom {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.ribbon-corner {
    top: 0;
    left: 0;
    background-color: transparent!important;
    padding: 6px 0 0 10px
}

.ribbon-corner i {
    position: relative
}

.ribbon-corner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    content: '';
    border: 30px solid transparent;
    border-top-color: #1976d2;
    border-left-color: #1976d2
}

.ribbon-corner.ribbon-right:before {
    right: 0;
    left: auto;
    border-right-color: #526069;
    border-left-color: transparent
}

.ribbon-corner.ribbon-right {
    right: 0;
    left: auto;
    padding: 6px 10px 0 0
}

.ribbon-corner.ribbon-bottom:before {
    top: auto;
    bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #526069
}

.ribbon-corner.ribbon-bottom {
    bottom: 0;
    top: auto;
    padding: 0 10px 6px 10px
}

.ribbon-custom {
    background: #1976d2
}

.ribbon-bookmark.ribbon-right.ribbon-custom:before {
    border-right-color: #1976d2;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before {
    border-right-color: #1976d2;
    border-bottom-color: transparent
}

.ribbon-primary {
    background: #5c4ac7
}

.ribbon-bookmark.ribbon-primary:before {
    border-color: #5c4ac7;
    border-right-color: transparent
}

.ribbon-bookmark.ribbon-right.ribbon-primary:before {
    border-right-color: #5c4ac7;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before {
    border-right-color: #5c4ac7;
    border-bottom-color: transparent
}

.ribbon-primary.ribbon-corner:before {
    border-top-color: #5c4ac7;
    border-left-color: #5c4ac7
}

.ribbon-primary.ribbon-corner.ribbon-right:before {
    border-right-color: #5c4ac7;
    border-left-color: transparent
}

.ribbon-primary.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #5c4ac7
}

.ribbon-success {
    background: #26dad2
}

.ribbon-bookmark.ribbon-success:before {
    border-color: #26dad2;
    border-right-color: transparent
}

.ribbon-bookmark.ribbon-right.ribbon-success:before {
    border-right-color: #26dad2;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-success:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-success:before {
    border-right-color: #26dad2;
    border-bottom-color: transparent
}

.ribbon-success.ribbon-corner:before {
    border-top-color: #26dad2;
    border-left-color: #26dad2
}

.ribbon-success.ribbon-corner.ribbon-right:before {
    border-right-color: #26dad2;
    border-left-color: transparent
}

.ribbon-success.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #26dad2
}

.ribbon-info {
    background: #1976d2
}

.ribbon-bookmark.ribbon-info:before {
    border-color: #1976d2;
    border-right-color: transparent
}

.ribbon-bookmark.ribbon-right.ribbon-info:before {
    border-right-color: #1976d2;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-info:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-info:before {
    border-right-color: #1976d2;
    border-bottom-color: transparent
}

.ribbon-info.ribbon-corner:before {
    border-top-color: #1976d2;
    border-left-color: #1976d2
}

.ribbon-info.ribbon-corner.ribbon-right:before {
    border-right-color: #1976d2;
    border-left-color: transparent
}

.ribbon-info.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #1976d2
}

.ribbon-warning {
    background: #ffb22b
}

.ribbon-bookmark.ribbon-warning:before {
    border-color: #ffb22b;
    border-right-color: transparent
}

.ribbon-bookmark.ribbon-right.ribbon-warning:before {
    border-right-color: #ffb22b;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before {
    border-right-color: #ffb22b;
    border-bottom-color: transparent
}

.ribbon-warning.ribbon-corner:before {
    border-top-color: #ffb22b;
    border-left-color: #ffb22b
}

.ribbon-warning.ribbon-corner.ribbon-right:before {
    border-right-color: #ffb22b;
    border-left-color: transparent
}

.ribbon-warning.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #ffb22b
}

.ribbon-danger {
    background: #ef5350
}

.ribbon-bookmark.ribbon-danger:before {
    border-color: #ef5350;
    border-right-color: transparent
}

.ribbon-bookmark.ribbon-right.ribbon-danger:before {
    border-right-color: #ef5350;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before {
    border-right-color: #ef5350;
    border-bottom-color: transparent
}

.ribbon-danger.ribbon-corner:before {
    border-top-color: #ef5350;
    border-left-color: #ef5350
}

.ribbon-danger.ribbon-corner.ribbon-right:before {
    border-right-color: #ef5350;
    border-left-color: transparent
}

.ribbon-danger.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #ef5350
}

.ribbon-default {
    background: #263238
}

.ribbon-bookmark.ribbon-default:before {
    border-color: #263238;
    border-right-color: transparent
}

.ribbon-bookmark.ribbon-right.ribbon-default:before {
    border-right-color: #263238;
    border-left-color: transparent
}

.ribbon-bookmark.ribbon-vertical-l.ribbon-default:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-default:before {
    border-right-color: #263238;
    border-bottom-color: transparent
}

.ribbon-default.ribbon-corner:before {
    border-top-color: #263238;
    border-left-color: #263238
}

.ribbon-default.ribbon-corner.ribbon-right:before {
    border-right-color: #263238;
    border-left-color: transparent
}

.ribbon-default.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #263238
}