/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
:root {
	--color-blue-ss: #2E5C82;
	--color-beige-ss: #EFE8DB;
	--color-light-blue-ss: #7BA5E9;
	--color-pink-ss: #F94868;
	--color-orange-ss: #E8980A;
}

.btn,
.btn-flat,
.btn-large,
.btn-small {
	text-transform: inherit;
}

.row .input-field {
	min-height: 54px !important;
}

.blue-ss {
	background-color: var(--color-blue-ss) !important;
}

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

.light-blue-ss {
	background-color: var(--color-light-blue-ss) !important;
}

.orange-ss {
	background-color: var(--color-orange-ss) !important;
}
.orange-ss.darken {
	background-color: #d37b0d !important;
}

.gradient-blue-ss {
	background: var(--color-blue-ss);
	background: linear-gradient(135deg, var(--color-light-blue-ss), 20%, var(--color-blue-ss)) !important;
}

.gradient-light-blue-ss {
	background: var(--color-blue-ss);
	background: linear-gradient(135deg, var(--color-light-blue-ss), 20%, #3763ab) !important;
}

.gradient-pink-ss {
	background: var(--color-pink-ss);
	background: linear-gradient(135deg, #f79cac, 20%, var(--color-pink-ss)) !important;
}
.gradient-orange-ss {
	background: var(--color-orange-ss);
	background: linear-gradient(135deg, #f3d49e, 20%, var(--color-orange-ss)) !important;
}

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

.toast-confirm {
	font-weight: 400;
}

.toast-confirm i {
	margin-left: -5px;
	margin-right: 10px;
}

/* LOGO */
.brand-sidebar .brand-logo {
	padding: 14px 12px 14px 22px;
	transition: padding 0.2s linear;
}

.brand-sidebar .logo-wrapper a.brand-logo img {
	height: 34px;
	opacity: 0;
	transition: opacity 0.2s linear;
}

.nav-lock .brand-sidebar .logo-wrapper a.brand-logo img,
.sidenav-main:hover .brand-sidebar .logo-wrapper a.brand-logo img {
	opacity: 1;
}

.brand-sidebar .logo-wrapper a.navbar-toggler {
	opacity: 0;
	transition: opacity 0.2s linear;
}

.sidenav-main:hover .brand-sidebar .logo-wrapper a.navbar-toggler {
	opacity: 1;
}

.brand-sidebar span.logo-text {
	font-size: 20px;
}

@media only screen and (max-width : 992px) {
	.sidenav-main .brand-sidebar {
		left: 130px;
		border: none;
	}
}

/* Estilo paginación para Livewire. Aplicable a buttons, además de a:href */
.links-pagination nav ul.pagination li button {
	color: #444;
	display: inline-block;
	font-size: 1.2rem;
	padding: 0 10px;
	line-height: 30px;
}

.links-pagination div nav ul.pagination li button {
	color: #444;
	display: inline-block;
	font-size: 1.2rem;
	padding: 0 10px;
	line-height: 30px;
}

.links-pagination nav ul button {
	transition: background-color 0.3s;
	font-size: 1rem;
	color: #fff;
	display: block;
	padding: 0 15px;
	cursor: pointer;
	background-color: transparent;
	border: none;
}

.links-pagination div nav ul button {
	transition: background-color 0.3s;
	font-size: 1rem;
	color: #fff;
	display: block;
	padding: 0 15px;
	cursor: pointer;
	background-color: transparent;
	border: none;
}

/* Botón más pequeño que btn-small */
.btn-p-1 {
	padding: 0 1rem;
}

/* Color de fondo en Select2 en modales y collapsibles */
.modal .select2 span,
.collapsible-body .select2 span {
	background-color: #fafafa;
}

/* tabla con celdas comprimidas */
table.table-comprimida thead tr th {
	padding: 4px !important;
}

table.table-comprimida tbody tr td {
	padding: 4px !important;
}

/* div row con bloque de filtrado para livewire */
.filtrado_list_bloque {
	border-bottom: 2px solid #6429a1;
}

/* Contenido de desplegables visible en el contenedor principal */
.elementos-list-wrapper .elementos-list-table {
	overflow: auto !important;
}

/* Tabla de 7 col */
.row-seven .col.s1 {
	width: calc(100% / 7) !important;
}

/* Tabla de 8 col */
.row-eight .col.s1 {
	width: calc(100% / 8) !important;
}

i.material-icons.bottom-align {
	vertical-align: bottom;
}

i.material-icons.tooltipped {
	font-size: 1.3rem;
	vertical-align: text-bottom;
}

/* Tabla con padding reducido */
.compacta td {
	padding: .4rem .4rem !important;
	font-size: 13px;
}

.compacta th {
    padding: .4rem 15px .4rem .4rem !important;
	font-size: 13px;
}

/* Definir altura de input form dropify */
.dropify-wrapper {
	height: 41px;
}

/* Para col con botones de documentación */
.col-btn-docs {
	gap: .5rem;
	padding: .5rem inherit !important;
}

/* Compactar subopciones menú nav */
.sidenav ul.collapsible.collapsible-sub li {
	line-height: 30px !important;
}

.sidenav ul.collapsible.collapsible-sub li a,
.sidenav ul.collapsible.collapsible-sub li a>i.material-icons {
	line-height: 30px !important;
	height: 30px !important;
}

.sidenav ul.collapsible.collapsible-sub li a>i.material-icons {
	font-size: 1.4rem;
}

/* Enlaces en alerts */
.card.card-alert a {
	color: inherit;
	text-decoration: underline;
}

/* input-field with switch */
.input-field>.switch {
	margin-top: 10px;
}

.input-field>.switch:not(:last-child) {
	margin-bottom: 10px;
}

.input-field label {
	line-height: 1;
}

/* Add * to required elements */
.input-field>input:required+label:after,
.input-field>select:required+label:after,
.input-field>textarea:required+label:after,
.input-field>.select-wrapper:has(>select:required)+label:after,
.input-field>select:required+.select2+label:after {
	content: " *" !important;
	display: inline !important;
	color: red;
	position: relative;
	opacity: 1;
}

/* Skeleton preload livewire view */
.skeleton {
	background: linear-gradient(90deg, #f0f0f0, #d0d0d0, #f0f0f0) 0 0/ 100vh 100% fixed;
	animation: bgslide 6s infinite linear;
	border-radius: 10px !important;
}

@keyframes bgslide {
	to {
		background-position: 100vw 0
	}
}

/* Upload doc form */
.upload-doc-form {
	margin-bottom: 1.5rem;
}

.upload-doc-form .section {
	border-radius: 4px;
	border: 1px #d0d0d0 solid;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
}

.upload-doc-form .doc-title {
	display: flex;
	padding: 10px;
	margin: 0;
	border-right: none;
	height: 41px;
	align-items: center;
	gap: 1rem;
	font-weight: 600;
}

.upload-doc-form .dropify-container .dropify-wrapper {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.upload-doc-form .dropify-wrapper.touch-fallback {
    height: 41px !important; 
}
.upload-doc-form .dropify-wrapper.touch-fallback .dropify-message {
	padding: 0;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.upload-doc-form .dropify-wrapper.touch-fallback .dropify-clear {
	bottom: 7px;
}

div .dropify-wrapper.touch-fallback {
    height: 41px !important; 
}
div .dropify-wrapper.touch-fallback .dropify-message {
	padding: 0;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
div .dropify-wrapper.touch-fallback .dropify-clear {
	bottom: 7px;
}

.upload-doc-form .docsDescargables {
	border: 1px solid #e0e0e0;
	border-top: 0;
	margin: 0 0.5rem;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
}

.upload-doc-form .docsDescargables>div {
	gap: 0.5rem;
	padding: 0 0.5rem 0.5rem;
	align-items: center;
}

.upload-doc-form .docsDescargables>div:first-of-type {
	padding-top: 0.5rem;
}

.upload-doc-form .docsDescargables>div>small.fecha {
	white-space: nowrap;
	margin-right: 1rem;
}

.upload-doc-form .docsDescargables .btn-flat {
	text-align: left;
	border: 1px solid #e0e0e0;
}

.upload-doc-form .docsDescargables .btn-flat:hover {
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

/** Tooltip small tag */
.tooltip-content small {
	display: block;
	text-align: center;
	color: #9e9e9e;
	font-style: italic;
}

.spinner-white {
	border-color: #fff;
}

/** Font size datatables elements */
.dataTables_info,
.dataTables_paginate {
	font-size: 12px !important;
}

.btn-round {
	border-radius: 50px;
}

.chip-compact {
	margin: 0;
	padding: 0 8px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
}

.collapsible-header span.chip {
	margin: 0 12px 0 auto;
}

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