/* evitar gesto para refrescar en android */
html, body {
	overscroll-behavior: none;
	touch-action: pan-x pan-y; /* opcional, ayuda en algunos casos */
}

body {
	background-color: rgb(243, 244, 246);
}

.page {
	display: none;
}

.btn {
	white-space: nowrap;
}

/* .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0b5dd7be;
    --bs-btn-border-color: #0a58ca;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
} */

.btn.btn-secondary,
.btn.btn-outline-secondary {
	color: #999999;
}

.btn.btn-secondary:hover,
.btn.btn-outline-secondary:hover {
	background-color: #0d6efd;
	border-color: #0d6efd;
	color: white;
}

.card {
	box-shadow: 1px 1px 10px -6px #888888;
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
	.d-mobile-none {
		display: none !important;
	}
}

/* ----------------- */
/* login */

.login-wrapper {
	max-width: 400px;
	width: 100%;
}

.login-wrapper .card {
	padding: 30px 25px 25px 25px;
}

/* bootstrap: eliminar outline verde e icono check en campos válidos */

.was-validated .form-control:valid {
	border-color: var(--bs-border-color);
	background-image: none;
}

.was-validated .form-control:valid:focus {
	border-color: #86b7fe;
	box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* ----------------- */
/* sidebar */

.sidebar {
	background-color: black;
	padding-top: 5px;
	padding-bottom: 15px;
	min-width: 80px;
}

.sidebar .nav-link {
	text-align: center;
	padding: 10px 0;
	font-size: 30px;
	color: rgb(180,180,180);
	width: 100%;
	margin-top: 5px;
}

.sidebar .nav-link:hover {
	color: white;
	transition: color 500ms;
}

.sidebar .nav-link.current {
	color: white;
}

/* ----------------- */
/* navbar */

:root {
	--ga-navbar-height: 88px;
}

.navbar {
	padding: 25px;
	color: white;
	container-type: inline-size;
}

@container (width <= 600px) {
	.navbar .brand {
		display: none !important;
	}
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
	.navbar {
		padding: 10px 25px;
		--ga-navbar-height: 58px;
	}
}

.navbar img {
	height: 30px;
}

.navbar .brand {
	font-size: 22px;
	margin-right: 15px;
	white-space: nowrap;
}

.navbar .page-name {
	/* margin-left: 10px; */
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	margin-right: 20px;
	padding-left: 15px;
	font-size: 22px;
	white-space: nowrap;
}

/* ----------------- */
/* main */

main {
	padding:24px 24px;
	overflow-y: scroll;
	height: calc(100dvh - var(--ga-navbar-height));
}

/* ----------------- */

.grid-stack {
	/* margin-left: -15px; */
	background: rgb(243, 244, 246);
	left: -10px;
	top: -10px;
	margin-right: -20px;
}

.grid-stack-item-content {
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.175);
	box-shadow: 1px 1px 10px -6px #888888;
	border-radius: 8px;
	padding: 15px;
}

.grid-stack-item {
	padding: 0;
	/* border: 1px solid gray; */
	/* border-radius: 5px; */
}

/* ----------------- */
/* sidebar right */

.sidebar-right {
	background-color: rgba(var(--bs-dark-rgb));
}

.edge {
	max-width: 12px;
	background-color: #212529;
	z-index: 9;
}

.edge.collapsed {
	margin-right: -12px;
}

.edge-button {
	padding: 30px 0px;
	margin: 0;
	color: white;
	background-color: #565660;
	border-radius: 0;
	transition: padding 250ms;
	border: 0;
}

.btn.edge-button:hover,
.btn.edge-button:active,
.btn.edge-button:focus-visible {
	background-color: var(--bs-primary);
	color: white;
	padding: 60px 0px;
	transition: padding 250ms;
}

.btn.edge-button .icon {
	font-size: 21px;
	text-shadow: 0px 0px 1px white;
}

.btn.edge-button .icon.bi-chevron-compact-right {
	margin-left: -5px;
}

.btn.edge-button .icon.bi-chevron-compact-left {
	margin-left: -4px;
}

.btn.edge-button:hover .icon {
	color: white;
	transition: none;
}

nav .messages {
	background-color: #2a2f35;
	width: 400px;
	min-width: 0;
	transition: width 0ms;
	overflow-x: hidden;
}

nav .messages.collapsed {
	width: 0;
	transition: width 0ms;
}

.sidebar-header {
	padding: 25px;
	width: 400px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header .inner {
	width: 400px;
	color: white;
	font-size: 22px;
}

.sidebar-body {
	height: calc(100vh - 80px - 80px);
	width: 400px;
	height: calc(75vh - 83px);
	padding: 25px;
	overflow-y: scroll;
}

.other-message {
	margin-right: 25px;
}

.message-time {
	color: #565660;
	font-size: small;
	position: absolute;
	right: 10px;
	bottom: 6px;
}

.my-message {
	margin-left: 25px;
}

.sidebar-footer {
	width: 400px;
	height: calc(25vh);
}

.sidebar-footer form {
	padding: 25px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer textarea {
	max-height: calc(25vh - 50px);
	field-sizing: content;
	resize: vertical;
	/* background-color: #252529;
	color: lightgray !important; */
}

.sidebar .badge {
	font-size: small;
	top: 18px;
}

.sidebar .icon-text {
	font-size: 14px;
	padding: 0;
	text-align: center;
	margin: 0;
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
	.sidebar-header {
		padding: 10px 25px;
	}
	.sidebar .nav-link {
		padding: 7px 0;
	}
	.edge-button,
	.btn.edge-button:hover,
	.btn.edge-button:active,
	.btn.edge-button:focus-visible {
		transition: padding 0ms;
	}
	nav .messages,
	nav .messages.collapsed {
		transition: width 0ms;
	}
}

/* ----------------- */
/* users */

.nav-tabs .nav-link {
	font-size: 18px;
}

.modal-content {
	padding: 10px 10px;
}

.modal-body::-webkit-scrollbar {
  width: 12px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.modal-body::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 8px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #0d6efd;
}

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

button.btn-password {
	border-radius: 0 5px 5px 0 !important;
}

.modal-dialog-scrollable .modal-body {
	margin-bottom: 20px;
}

.accordion-item,
.accordion-button,
.accordion-button:not(.collapsed) {
	background-color: transparent;
	box-shadow: none;
}

.accordion-button {
	padding: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

.accordion-button:not(.collapsed) {
	color: var(--bs-accordion-color);
}

.accordion-button:focus {
	box-shadow: inherit;
}

.accordion-button:focus-visible {
	box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-body {
	padding: 0;
	margin-top: 20px;
}

.col-header {
	font-weight: bold;
	padding: 0 20px;
	border-bottom: 1px solid black;
	/* margin-bottom: 20px; */
}

.col-header {
	border-right: 2px solid black ;
}

.col-header:first-of-type,
.col-header:last-of-type,
.col-header:nth-last-of-type(2) {
	border-right: 2px solid transparent ;
}

.col-header.ch-collapse {
	width: 60px;
}

.col-header.ch-name {
	width: 25%;
}

.col-header.ch-rol {
	width: 25%;
}

/* ----------------- */
/* forms */

.page .card {
	padding: 20px 20px;
	min-height: calc(100vh - 100px - var(--ga-navbar-height));
}

form .row {
	container-type: inline-size;
}

@container (width <= 600px) {
	form .row .col {
		min-width: 100% !important;
	}
}

form .col {
	margin-bottom: 15px;
}

form ul {
	margin-bottom: 0;
}

form fieldset {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	padding: .375rem .75rem;
}

form .buttons {
	margin-top: 30px;
	pointer-events: none;
}

form .buttons button {
	pointer-events: all;
}

.form-control:disabled, .form-select:disabled {
	background-color: #f6f6f6;
}

/* ----------------- */

.col-field {
	padding-bottom: 15px;
}

.page form {
	.col-field {
		flex: 0 0 auto;
		width: 100%;
	}
}

hr {
	border-top: 0;
	border-bottom: 1px dashed #0d6efd;
	margin: 15px 0;
}

@media (min-width: 998px) {
	.page form .col-field {
		flex: 0 0 auto;
		width: 50%;
	}
	.page form .col-field:nth-child(odd) {
		padding-right: 10px;
	}
	.page form .col-field:nth-child(even) {
		/* margin-right: 0px; */
	}
}

@media (min-width: 1400px) {
	.page form .col-field {
		flex: 0 0 auto;
		width: 33.333333%;
	}
	.page form .col-field {
		padding-right: 10px;
	}
	.page form .col-field:nth-child(3n) {
		padding-right: 0px;
	}
}

div [contenteditable=true] {
	min-height: 64px;
}

/* ----------------- */
/* page nav */

.page nav {
	height: 50px;
}

.page nav button.nav-link {
	padding-top: 6px !important;
	padding-bottom: 4px !important;
}

.page nav .nav-tabs {
	border-bottom: 0;
}

.card .search-wrapper {
	position: absolute;
	top: -50px;
	right: 0px;
}

/* ----------------- */
/* cards */

.card-title {
	margin-bottom: 20px;
}

/* */

#modal form .row.hide-in-modal {
	display: none;
}

/* datatables */

.dt-bootstrap5 .row.mt-2 {
	margin-top: 0 !important;
}

.table>:not(caption)>*>* {
	padding: .6rem .6rem;
}

table thead {
	border-bottom: 2px solid #cccccc;
}

table.table.dataTable>tbody>tr:hover td {
	background-color: rgb(var(--dt-row-selected)) !important;
	color: rgb(var(--dt-row-selected-text));
	cursor: pointer;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before, 
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, 
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before, 
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before {
	margin-bottom: 2px;
}

table tr:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

/* ----------------- */
/* footer */

footer {
	position: fixed;
	bottom: 0;
	z-index: 9999;
}

footer .watermark {
	padding: 2px 4px;
	width: 80px;
	background: rgba(253, 197, 13, 1);
	color: black;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}