/* ESTE ARCHIVO CONTIENE LAS EXTENSIONES PROPIAS QUE SE APLICAN SOBRE BOOTSTRAP.CSS*/
/* POR EJEMPLO, CLASES QUE NO TIENE BS3 QUE SE COPIAN DE BS4 O BS5*/
/* CUALQUIER CLASE QUE DEBERÍA TENER NUESTRO BOOTSTRAP, Y QUE SEA REUTILIZABLE EN OTRAS APPS*/

@import 'variables.css';

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

.flexible {display: flex;flex-wrap: wrap;} /* Ya existe la clase flex-row en css-utils.css*/

/* Labels de ancho fijo */
.label-30 { display: inline-block !important; line-height: 1.42857143; min-width: 30px; }
.label-40 { display: inline-block !important; line-height: 1.42857143; min-width: 40px; }
.label-50 { display: inline-block !important; line-height: 1.42857143; min-width: 50px; }
.label-60 { display: inline-block !important; line-height: 1.42857143; min-width: 60px; } 
.label-70 { display: inline-block !important; line-height: 1.42857143; min-width: 70px; }
.label-80 { display: inline-block !important; line-height: 1.42857143; min-width: 80px; }

/* Label groups */
.label-group{ white-space: nowrap; } 
.label-group .label{ display: inline-block !important; line-height: 1.42857143; } 
.label-group .label:not(:only-of-type){ border-radius: 0; } 
.label-group .label:not(:only-of-type):first-of-type{ border-radius: .25em 0 0 .25em; } 
.label-group .label:not(:only-of-type):last-of-type{ border-radius: 0 .25em .25em 0; } 
.label-group-bordered .label:not(:only-of-type):not(:last-of-type){ border-right: 1px solid var(--color-white); }

/* Outline labels */
.outline-label { display: inline-block; border-radius: 50px; font-size: 10px !important; } 
.outline-label-md { display: inline-block; border-radius: 50px; font-size: 10px !important; } 
.outline-label-lg { display: inline-block; border-radius: 50px; font-size: 24px !important; } 
.outline-label-success { border: 2px solid var(--color-success); color: var(--color-success); margin-top: 5px; } 
.outline-label-danger { border: 2px solid var(--color-danger); color: var(--color-danger); margin-top: 5px; } 
.outline-label-info { border: 2px solid var(--color-info); color: var(--color-info); margin-top: 5px; } 
.outline-label-warning { border: 2px solid var(--color-warning); color: var(--color-warning); margin-top: 5px; } 
.outline-label-default { border: 2px solid #8f8f8f; color: #8f8f8f; margin-top: 5px; }

/* helpers de bordes */
.border-primary{ border-color: var(--color-primary); } 
.border-success{ border-color: var(--color-success); } 
.border-info{ border-color: var(--color-info); } 
.border-warning{ border-color: var(--color-warning); } 
.border-danger{ border-color: var(--color-danger); } 
.border-white{ border-color: var(--color-white); } 
.border-black{ border-color: var(--color-black); }

/* Imágenes */
.img-gray { filter: gray; -webkit-filter: grayscale(1); filter: grayscale(1); }

/* Modales */
.modal-fullscreen .modal-dialog{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0px;
	width: 100%;
	height: 100%;
}

.modal-fullscreen .modal-content{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	overflow-y: auto;
	overflow-y: overlay;
}

.modal-fullscreen .modal-header{
	border-radius: 0;
	background-color: var(--color-white);
}

/* Action Sheet (modal que se muestra desde abajo como en los móviles)*/
@media (max-width:767px) {
	.modal-actionsheet-xs .modal-dialog {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 90vh;
		margin: 0px;
	}

	.modal-actionsheet-xs .modal-content {
		padding-bottom: 15px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
}

/* Botones outline */
.btn-outline:hover,.btn-outline:focus,.btn-outline.focus {
	color: var(--color-white);
	text-decoration: none;
}

.btn-outline:active,.btn-outline.active {
	outline: 0;
	background-image: none;
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}

.btn-outline.disabled,.btn-outline[disabled],fieldset[disabled] .btn-outline {
	cursor: not-allowed;
	opacity: 0.65;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
}

a.btn-outline.disabled,fieldset[disabled] a.btn-outline {
	pointer-events: none;
}

.btn-outline-default {
	background-color: var(--color-white);
	color: #4e4f56;
	border-color: #95a5a6;
}

.btn-outline-default:focus,.btn-outline-default.focus {
	color: var(--color-white);
	background-color: #95a5a6;
	border-color: #95a5a6;
}

.btn-outline-default:hover {
	color: var(--color-white);
	background-color: #95a5a6;
	border-color: #95a5a6;
}

.btn-outline-default:active,.btn-outline-default.active,.open>.dropdown-toggle.btn-outline-default {
	color: var(--color-white);
	background-color: #95a5a6;
	border-color: #95a5a6;
}

.btn-outline-default:active:hover,.btn-outline-default.active:hover,.open>.dropdown-toggle.btn-outline-default:hover,.btn-outline-default:active:focus,.btn-outline-default.active:focus,.open>.dropdown-toggle.btn-outline-default:focus,.btn-outline-default:active.focus,.btn-outline-default.active.focus,.open>.dropdown-toggle.btn-outline-default.focus {
	color: var(--color-white);
	background-color: #95a5a6;
	border-color: #95a5a6;
}

.btn-outline-default:active,.btn-outline-default.active,.open>.dropdown-toggle.btn-outline-default {
	background-image: none;
}

.btn-outline-default.disabled:hover,.btn-outline-default[disabled]:hover,fieldset[disabled] .btn-outline-default:hover,.btn-outline-default.disabled:focus,.btn-outline-default[disabled]:focus,fieldset[disabled] .btn-outline-default:focus,.btn-outline-default.disabled.focus,.btn-outline-default[disabled].focus,fieldset[disabled] .btn-outline-default.focus {
	background-color: #95a5a6;
	border-color: #95a5a6;
}

.btn-outline-default .badge {
	color: var(--color-white);
	background-color: #95a5a6;
}

.btn-outline-default:hover .badge, 
.btn-outline-default:focus .badge, 
.btn-outline-default:active .badge {
	color: #95a5a6;
	background-color: var(--color-white);
}

.btn-outline-primary {
	background-color: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary:focus,.btn-outline-primary.focus {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary:hover {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary:active,.btn-outline-primary.active,.open>.dropdown-toggle.btn-outline-primary {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary:active:hover,.btn-outline-primary.active:hover,.open>.dropdown-toggle.btn-outline-primary:hover,.btn-outline-primary:active:focus,.btn-outline-primary.active:focus,.open>.dropdown-toggle.btn-outline-primary:focus,.btn-outline-primary:active.focus,.btn-outline-primary.active.focus,.open>.dropdown-toggle.btn-outline-primary.focus {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary:active,.btn-outline-primary.active,.open>.dropdown-toggle.btn-outline-primary {
	background-image: none;
}

.btn-outline-primary.disabled:hover,.btn-outline-primary[disabled]:hover,fieldset[disabled] .btn-outline-primary:hover,.btn-outline-primary.disabled:focus,.btn-outline-primary[disabled]:focus,fieldset[disabled] .btn-outline-primary:focus,.btn-outline-primary.disabled.focus,.btn-outline-primary[disabled].focus,fieldset[disabled] .btn-outline-primary.focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary .badge {
	color: var(--color-white);
	background-color: var(--color-primary);
}

.btn-outline-primary:hover .badge,
.btn-outline-primary:focus .badge,
.btn-outline-primary:active .badge {
	color: var(--color-primary);
	background-color: var(--color-white);
}

.btn-outline-success {
	background-color: var(--color-white);
	color: var(--color-success);
	border-color: var(--color-success);
}

.btn-outline-success:focus,.btn-outline-success.focus {
	color: var(--color-white);
	background-color: var(--color-success);
	border-color: var(--color-success);
}

.btn-outline-success:hover {
	color: var(--color-white);
	background-color: var(--color-success);
	border-color: var(--color-success);
}

.btn-outline-success:active,.btn-outline-success.active,.open>.dropdown-toggle.btn-outline-success {
	color: var(--color-white);
	background-color: var(--color-success);
	border-color: var(--color-success);
}

.btn-outline-success:active:hover,.btn-outline-success.active:hover,.open>.dropdown-toggle.btn-outline-success:hover,.btn-outline-success:active:focus,.btn-outline-success.active:focus,.open>.dropdown-toggle.btn-outline-success:focus,.btn-outline-success:active.focus,.btn-outline-success.active.focus,.open>.dropdown-toggle.btn-outline-success.focus {
	color: var(--color-white);
	background-color: var(--color-success);
	border-color: var(--color-success);
}

.btn-outline-success:active,.btn-outline-success.active,.open>.dropdown-toggle.btn-outline-success {
	background-image: none;
}

.btn-outline-success.disabled:hover,.btn-outline-success[disabled]:hover,fieldset[disabled] .btn-outline-success:hover,.btn-outline-success.disabled:focus,.btn-outline-success[disabled]:focus,fieldset[disabled] .btn-outline-success:focus,.btn-outline-success.disabled.focus,.btn-outline-success[disabled].focus,fieldset[disabled] .btn-outline-success.focus {
	background-color: var(--color-success);
	border-color: var(--color-success);
}

.btn-outline-success .badge {
	color: var(--color-white);
	background-color: var(--color-success);
}

.btn-outline-success:hover .badge,
.btn-outline-success:focus .badge,
.btn-outline-success:active .badge {
	color: var(--color-success);
	background-color: var(--color-white);
}

.btn-outline-info {
	background-color: var(--color-white);
	color: var(--color-info);
	border-color: var(--color-info);
}

.btn-outline-info:focus,.btn-outline-info.focus {
	color: var(--color-white);
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.btn-outline-info:hover {
	color: var(--color-white);
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.btn-outline-info:active,.btn-outline-info.active,.open>.dropdown-toggle.btn-outline-info {
	color: var(--color-white);
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.btn-outline-info:active:hover,.btn-outline-info.active:hover,.open>.dropdown-toggle.btn-outline-info:hover,.btn-outline-info:active:focus,.btn-outline-info.active:focus,.open>.dropdown-toggle.btn-outline-info:focus,.btn-outline-info:active.focus,.btn-outline-info.active.focus,.open>.dropdown-toggle.btn-outline-info.focus {
	color: var(--color-white);
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.btn-outline-info:active,.btn-outline-info.active,.open>.dropdown-toggle.btn-outline-info {
	background-image: none;
}

.btn-outline-info.disabled:hover,.btn-outline-info[disabled]:hover,fieldset[disabled] .btn-outline-info:hover,.btn-outline-info.disabled:focus,.btn-outline-info[disabled]:focus,fieldset[disabled] .btn-outline-info:focus,.btn-outline-info.disabled.focus,.btn-outline-info[disabled].focus,fieldset[disabled] .btn-outline-info.focus {
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.btn-outline-info .badge {
	color: var(--color-white);
	background-color: var(--color-info);
}

.btn-outline-info:hover .badge,
.btn-outline-info:focus .badge,
.btn-outline-info:active .badge {
	color: var(--color-info);
	background-color: var(--color-white);
}

.btn-outline-warning {
	background-color: var(--color-white);
	color: var(--color-warning);
	border-color: var(--color-warning);
}

.btn-outline-warning:focus,.btn-outline-warning.focus {
	color: var(--color-white);
	background-color: var(--color-warning);
	border-color: var(--color-warning);
}

.btn-outline-warning:hover {
	color: var(--color-white);
	background-color: var(--color-warning);
	border-color: var(--color-warning);
}

.btn-outline-warning:active,.btn-outline-warning.active,.open>.dropdown-toggle.btn-outline-warning {
	color: var(--color-white);
	background-color: var(--color-warning);
	border-color: var(--color-warning);
}

.btn-outline-warning:active:hover,.btn-outline-warning.active:hover,.open>.dropdown-toggle.btn-outline-warning:hover,.btn-outline-warning:active:focus,.btn-outline-warning.active:focus,.open>.dropdown-toggle.btn-outline-warning:focus,.btn-outline-warning:active.focus,.btn-outline-warning.active.focus,.open>.dropdown-toggle.btn-outline-warning.focus {
	color: var(--color-white);
	background-color: var(--color-warning);
	border-color: var(--color-warning);
}

.btn-outline-warning:active,.btn-outline-warning.active,.open>.dropdown-toggle.btn-outline-warning {
	background-image: none;
}

.btn-outline-warning.disabled:hover,.btn-outline-warning[disabled]:hover,fieldset[disabled] .btn-outline-warning:hover,.btn-outline-warning.disabled:focus,.btn-outline-warning[disabled]:focus,fieldset[disabled] .btn-outline-warning:focus,.btn-outline-warning.disabled.focus,.btn-outline-warning[disabled].focus,fieldset[disabled] .btn-outline-warning.focus {
	background-color: var(--color-warning);
	border-color: var(--color-warning);
}

.btn-outline-warning .badge {
	color: var(--color-white);
	background-color: var(--color-warning);
}

.btn-outline-warning:hover .badge,
.btn-outline-warning:focus .badge,
.btn-outline-warning:active .badge {
	color: var(--color-warning);
	background-color: var(--color-white);
}

.btn-outline-danger {
	background-color: var(--color-white);
	color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger:focus,.btn-outline-danger.focus {
	color: var(--color-white);
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger:hover {
	color: var(--color-white);
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger:active,.btn-outline-danger.active,.open>.dropdown-toggle.btn-outline-danger {
	color: var(--color-white);
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger:active:hover,.btn-outline-danger.active:hover,.open>.dropdown-toggle.btn-outline-danger:hover,.btn-outline-danger:active:focus,.btn-outline-danger.active:focus,.open>.dropdown-toggle.btn-outline-danger:focus,.btn-outline-danger:active.focus,.btn-outline-danger.active.focus,.open>.dropdown-toggle.btn-outline-danger.focus {
	color: var(--color-white);
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger:active,.btn-outline-danger.active,.open>.dropdown-toggle.btn-outline-danger {
	background-image: none;
}

.btn-outline-danger.disabled:hover,.btn-outline-danger[disabled]:hover,fieldset[disabled] .btn-outline-danger:hover,.btn-outline-danger.disabled:focus,.btn-outline-danger[disabled]:focus,fieldset[disabled] .btn-outline-danger:focus,.btn-outline-danger.disabled.focus,.btn-outline-danger[disabled].focus,fieldset[disabled] .btn-outline-danger.focus {
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger .badge {
	color: var(--color-white);
	background-color: var(--color-danger);
}

.btn-outline-danger:hover .badge,
.btn-outline-danger:focus .badge,
.btn-outline-danger:active .badge {
	color: var(--color-danger);
	background-color: var(--color-white);
}

.btn-outline-black {
	background-color: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-black);
}

.btn-outline-black:focus,.btn-outline-black.focus {
	color: var(--color-white);
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.btn-outline-black:hover {
	color: var(--color-white);
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.btn-outline-black:active,.btn-outline-black.active,.open>.dropdown-toggle.btn-outline-black {
	color: var(--color-white);
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.btn-outline-black:active:hover,.btn-outline-black.active:hover,.open>.dropdown-toggle.btn-outline-black:hover,.btn-outline-black:active:focus,.btn-outline-black.active:focus,.open>.dropdown-toggle.btn-outline-black:focus,.btn-outline-black:active.focus,.btn-outline-black.active.focus,.open>.dropdown-toggle.btn-outline-black.focus {
	color: var(--color-white);
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.btn-outline-black:active,.btn-outline-black.active,.open>.dropdown-toggle.btn-outline-black {
	background-image: none;
}

.btn-outline-black.disabled:hover,.btn-outline-black[disabled]:hover,fieldset[disabled] .btn-outline-black:hover,.btn-outline-black.disabled:focus,.btn-outline-black[disabled]:focus,fieldset[disabled] .btn-outline-black:focus,.btn-outline-black.disabled.focus,.btn-outline-black[disabled].focus,fieldset[disabled] .btn-outline-black.focus {
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.btn-outline-black .badge {
	color: var(--color-white);
	background-color: var(--color-black);
}

.btn-outline-black:hover .badge,
.btn-outline-black:focus .badge,
.btn-outline-black:active .badge {
	color: var(--color-black);
	background-color: var(--color-white);
}

.btn-outline-white {
	background-color: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-white);
}

.btn-outline-white:focus,.btn-outline-white.focus {
	color: var(--color-black);
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.btn-outline-white:hover {
	color: var(--color-black);
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.btn-outline-white:active,.btn-outline-white.active,.open>.dropdown-toggle.btn-outline-white {
	color: var(--color-black);
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.btn-outline-white:active:hover,.btn-outline-white.active:hover,.open>.dropdown-toggle.btn-outline-white:hover,.btn-outline-white:active:focus,.btn-outline-white.active:focus,.open>.dropdown-toggle.btn-outline-white:focus,.btn-outline-white:active.focus,.btn-outline-white.active.focus,.open>.dropdown-toggle.btn-outline-white.focus {
	color: var(--color-black);
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.btn-outline-white:active,.btn-outline-white.active,.open>.dropdown-toggle.btn-outline-white {
	background-image: none;
}

.btn-outline-white.disabled:hover,.btn-outline-white[disabled]:hover,fieldset[disabled] .btn-outline-white:hover,.btn-outline-white.disabled:focus,.btn-outline-white[disabled]:focus,fieldset[disabled] .btn-outline-white:focus,.btn-outline-white.disabled.focus,.btn-outline-white[disabled].focus,fieldset[disabled] .btn-outline-white.focus {
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.btn-outline-white .badge {
	color: var(--color-black);
	background-color: var(--color-white);
}

.btn-outline-white:hover .badge,
.btn-outline-white:focus .badge,
.btn-outline-white:active .badge {
	color: var(--color-white);
	background-color: var(--color-black);
}

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

.btn-black:focus,.btn-black.focus {
	color: var(--color-white);
	background-color: var(--color-black-tinted);
	border-color: var(--color-black);
}

.btn-black:hover {
	color: var(--color-white);
	background-color: var(--color-black-tinted);
	border-color: var(--color-black);
}

.btn-black:active,.btn-black.active,.open>.dropdown-toggle.btn-black {
	color: var(--color-white);
	background-color: var(--color-black-tinted);
	border-color: var(--color-black);
}

.btn-black:active:hover,.btn-black.active:hover,.open>.dropdown-toggle.btn-black:hover,.btn-black:active:focus,.btn-black.active:focus,.open>.dropdown-toggle.btn-black:focus,.btn-black:active.focus,.btn-black.active.focus,.open>.dropdown-toggle.btn-black.focus {
	color: var(--color-white);
	background-color: var(--color-black-tinted);
	border-color: var(--color-black);
}

.btn-black:active,.btn-black.active,.open>.dropdown-toggle.btn-black {
	background-image: none;
}

.btn-black.disabled:hover,.btn-black[disabled]:hover,fieldset[disabled] .btn-black:hover,.btn-black.disabled:focus,.btn-black[disabled]:focus,fieldset[disabled] .btn-black:focus,.btn-black.disabled.focus,.btn-black[disabled].focus,fieldset[disabled] .btn-black.focus {
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.btn-black .badge {
	color: var(--color-black);
	background-color: var(--color-white);
}

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

.btn-white:focus,.btn-white.focus {
	color: var(--color-black);
	background-color: #f0f0f0;
	border-color: var(--color-white);
}

.btn-white:hover {
	color: var(--color-black);
	background-color: #f0f0f0;
	border-color: var(--color-white);
}

.btn-white:active,.btn-white.active,.open>.dropdown-toggle.btn-white {
	color: var(--color-black);
	background-color: #f0f0f0;
	border-color: var(--color-white);
}

.btn-white:active:hover,.btn-white.active:hover,.open>.dropdown-toggle.btn-white:hover,.btn-white:active:focus,.btn-white.active:focus,.open>.dropdown-toggle.btn-white:focus,.btn-white:active.focus,.btn-white.active.focus,.open>.dropdown-toggle.btn-white.focus {
	color: var(--color-black);
	background-color: #f0f0f0;
	border-color: var(--color-white);
}

.btn-white:active,.btn-white.active,.open>.dropdown-toggle.btn-white {
	background-image: none;
}

.btn-white.disabled:hover,.btn-white[disabled]:hover,fieldset[disabled] .btn-white:hover,.btn-white.disabled:focus,.btn-white[disabled]:focus,fieldset[disabled] .btn-white:focus,.btn-white.disabled.focus,.btn-white[disabled].focus,fieldset[disabled] .btn-white.focus {
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.btn-white .badge {
	color: var(--color-white);
	background-color: var(--color-black);
}

.input-flat, .input-flat:focus{
	border:none;
	background-color: var(--color-white);
}
.input-highlight:focus {
	background-color: var(--color-primary-lighter);
}
.aspect-16by9{
	aspect-ratio:16 / 9;
}

.aspect-1by1{
	aspect-ratio:1 / 1;
}

.aspect-2by1{
	aspect-ratio:2 / 1;
}


/******************************************************
*
*                 Ratios (Bootstrap 5)
*
******************************************************/
.ratio {
	position: relative;
	width: 100%;
  }
  .ratio::before {
	display: block;
	padding-top: var(--bs-aspect-ratio);
	content: "";
  }
  .ratio > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }
  
  .ratio-1x1 {
	--bs-aspect-ratio: 100%;
  }
  
  .ratio-4x3 {
	--bs-aspect-ratio: 75%;
  }
  
  .ratio-16x9 {
	--bs-aspect-ratio: 56.25%;
  }
  
  .ratio-21x9 {
	--bs-aspect-ratio: 42.8571428571%;
  }
/*juanlu*/
  .ratio-2x1 {
	--bs-aspect-ratio: 50%;
  }

.badge-success {
	background-color: var(--color-success) !important;
	color: var(--color-white) !important;
}

.badge-danger {
	background-color: var(--color-danger) !important;
	color: var(--color-white) !important;
}

.badge-warning {
	background-color: var(--color-warning) !important;
	color: var(--color-white) !important;
}