/** Breakpoints **/

/** Extra-small screens*/
@media (max-width: 575px) {
	.subheader-wrapper {
		flex-direction: column;
		align-items: center;
	}
}

/** Small screens*/
@media (max-width: 767px) {

	/* Header */
	.header-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.header-left {
		width: 100%
	}

	.header-left img {
		height: 40px
	}

	.header-center {
		margin-bottom: 1.5rem
	}

	.header-center img {
		margin-bottom: .5rem;
		width: 100%;
	}

	.header-right {
		flex-direction: row;
		justify-content: center;
	}

	.subheader-datetime {
		text-align: center;
	}

	.form-row {
		flex-direction: column;
	}




}

/** Medium screens*/
@media (min-width: 768px) {

	body {
		overflow: hidden
	}

	/* Header */
	.header-wrapper {
		gap: 40px;
	}

	.header-center {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.header-center img {
		width: 65%;
		margin-top: .5rem;
		margin-left: 7%;
		margin-bottom: .5rem
	}

	.header-right {
		flex-direction: column;
	}

	.subheader-datetime {
		text-align: right
	}

	/* Navigation */

	.left-nav {
		height: 70vh;
		overflow-y: auto;
	}

	/* Container */

	.page-wrapper {
		width: 100%
	}

	.right-content {
		height: 85vh;
		overflow-y: auto
	}

	.cs-col-left {
		flex: 0 0 30%;
		width: 30%;
	}

	.cs-col-right {
		flex: 0 0 70%;
		min-width: 70%;
	}
}

@media (min-width: 768px) and (max-width: 991px) {

	/* Header */
	.header-left img {
		height: 50%
	}

	.header-right {
		flex-direction: column;
	}

	/* Navigation */
	.left-nav {
		width: 20%
	}

	.left-nav h3 {
		margin-top: 0
	}

	.justify-center-md {
		justify-content: center;
	}

}

/** Large screens*/
@media (min-width: 992px) and (max-width: 1199px) {}

/** Extra-Large screens*/
@media (min-width: 1200px) {

	/* Header */
	.header-center img {
		width: 55%;
	}

	.header-left {
		flex-grow: 0;
		width: 10%
	}

	.left-nav {
		width: 12%
	}

	.cs-col-left {
		flex: 0 0 20%;
		width: 20%;
	}

	.cs-col-right {
		flex: 0 0 80%;
		min-width: 80%;
	}
}

@media (min-width: 1440px) {

	/* Header */
	.header-center img {
		width: 40%;
	}

	.left-nav {
		width: 10%
	}
}

/** Site **/

.private-mode-text,
.private-mode-banner {
	display: none;
}

:root {
	--brown: brown;
	--blue: blue;
	--red: red;
	--skyblue: skyblue;
	--firebrick: firebrick;
	--orange: orange;
	--lightgreen: lightgreen;
	--lightsteelblue: lightsteelblue;
	--lightskyblue: #87ceeb94;
	--lightblue: #def0fe;
	--navajowhite: navajowhite;
	--font-1: Arial, Helvetica, sans-serif;
	--font-2: 'Times New Roman', Times, serif;
}

html,
body {
	font-size: 13px;
	/*14px;*/
	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 24px !important
}

h2 {
	font-size: 22px !important
}

h3 {
	font-size: 20px !important
}

h4 {
	font-size: 18px !important;
}

.scroll-x {
	overflow-x: auto
}

.font-1 {
	font-family: var(--font-1)
}

.font-2 {
	font-family: var(--font-2)
}

table {
	width: 100%
}

table:not(.cs-table) tr>td {
	padding: 5px 8px
}


/** Header **/

.header-container {
	padding: 10px;
	width: 100%
}

.header-wrapper {
	/*Wraps the left, center, right elements of the header*/
	display: flex;
	justify-content: space-between;
}

.header-left img {
	max-width: 150px
}

.header-center {
	flex-grow: 1;
	min-width: 200px
}

.header-right {
	display: flex;
	gap: 5px;
}

.blue-border {
	border-bottom: 3px solid navy;
	width: 100%;
}

.subheader-wrapper {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
}

.subheader-userinfo span {
	color: #808080;
	font-weight: 500
}

.subheader-datetime span {
	font-weight: 600;
	color: red;
	white-space: nowrap;
}

.above-btn button {
	width: 100%
}

.below-btn {
	display: flex;
	gap: 10px;
}


/** Navigation **/

.left-nav {
	text-align: center;
}

.left-nav h3 {
	color: blue;
	font-weight: 600
}

.left-nav hr {
	border-top: 2px solid lightgrey;
	margin: 0;
	opacity: 1
}

.left-nav-container {
	list-style: none;
	padding-inline-start: 0;
	padding-left: 0;

	li {
		text-decoration: underline
	}

	.nested-list {
		border-bottom: none;
	}

	li.nav-li-solo {
		padding: 8px 0;
	}


}

.left-nav-container>li:not(nav-li-solo) {
	padding: 4px 0;
}

.left-nav-item,
.left-nav-item:focus {
	color: blue;
}

.left-nav-item:hover {
	color: red;
	/* font-weight: 600 */
}

.left-nav-item.active {
	/* font-weight: bold; */
	color: red;
	text-decoration: underline red
		/* Highlight color */
}

.left-nav-submenu {
	display: none;
	list-style: disc;
	margin-top: 0.25rem;
	padding-inline-start: 0;

	li {
		padding: 0;
		margin-left: 2.5rem;
		/* margin-right: 5rem; */
		text-align: left;
		text-decoration: underline
	}
}

.show {
	display: block;
}



/** Container **/

.page-wrapper {
	min-height: 85vh;
	margin-left: 0;
	margin-right: 0
}

.right-content {
	box-shadow: inset 1px 1px 5px #c1c1c1;
	overflow-x: hidden;
	padding: 8px;
	border-radius: 3px
}

.flex-col {
	display: flex;
	flex-direction: column;
	width: 100%
}

.flex-row {
	display: flex;
	flex-direction: row;
	width: 100%
}

.content-wrapper {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.filter-pane {
	width: 100%;
	border: 1px solid #ccc;
	background-color: #f8f9fa;
	text-align: center;
	gap: 5px
}

.filter-btn-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #b0c4de;
	padding: 0.5rem;
	gap: 10px
}

.sub-buttons-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 10px;
}

.datepicker-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.5rem;
}

.action-btn-wrapper {
	gap: 10px;
	padding: 2.5px
}

.btn-flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
}

.overflow-x {
	overflow-x: auto
}

.overflow-y {
	overflow-y: auto
}

/** Modal **/

.cs-modal-overlay {
	position: fixed;
	z-index: 1040;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
}

.cs-modal.cs-modal-wrapper {
	position: fixed;
	z-index: 8888;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -30%);
	background: white;
	width: 90%;
	height: 90%;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	font-family: Arial, sans-serif;
	outline: none;
	overflow: auto
}

.cs-modal-title {
	padding: 5px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.cs-modal-close {
	background: none;
	border: none;
	font-weight: bold;
	font-size: 22px;
	line-height: 1;
	color: #999;
	cursor: pointer;
}

.cs-modal-body {
	padding: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	white-space: pre-wrap
}

/** Buttons **/

.filter-btn {
	border: 1px solid #ccc;
	border-radius: 3px;
	width: 80%;
	padding: 0.2rem;
}

.boton {
	border-color: #c1c1c1;
	border-radius: 3px;
	padding: 2px 10px;
	font-size: 1rem
}

.boton:active {
	border: 2px inset #e6e6e6
}

.boton:disabled {
	background: #e6e6e6;
	color: #666;
	cursor: not-allowed;
	border: 2px solid #ccc;
}

.boton:hover {
	background: #e6e6e6;
	color: black
}

.boton:focus {
	outline: 2px solid #ccc;
}

/** Forms/Labels/Inputs **/

.pg-title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	padding: 5px 8px;
}

.dynamic-header {
	text-align: center;
	justify-content: center;
	border-right: none !important;
	border-left: none !important;
}

.form-col {
	display: flex;
	flex-direction: column;
	gap: 5px
		/*10px*/
}

.form-row {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 .5rem
}

.form-row label {
	min-width: 60px;
	text-align: left;
	font-weight: 600;
	flex-shrink: 0
}

.form-control,
.form-select {
	border-radius: 3px;
	height: 28px
}

.form-input-label {
	font-weight: bold;
	min-width: 50px;
	text-align: left;
}

.form-select {
	border-color: #949494;
	line-height: 1.2
}

.form-select:focus,
.form-control:focus {
	border-color: #aaa;
	box-shadow: none
}

option {
	cursor: pointer;
}

.form-input-disabled,
input:disabled {
	background-color: #e9ecef !important;
	opacity: 1;
}

.text-underline {
	text-decoration: underline;
}

.big-checkbox {
	width: 1em;
	height: 1em;
	margin-top: 0 !important;
	border-color: #999;
}

.big-checkbox:checked,
.cs-checkbox:checked {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
	background-color: white;
	border-color: #666
}

.big-checkbox:focus,
.cs-checkbox:focus {
	box-shadow: none !important;
	border-color: #666;
}

/* .big-checkbox {
  width: 18px;
  height: 30px;
  margin-top: 0 !important
} */


/* Hide the up and down icons for number fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}


/** Table **/

.cs-table th {
	font-weight: 500;
}

.disabledrow {
	background-color: #e6e6e6;
	color: #999;
}

/** Text Color **/

.brown-text {
	color: brown
}

.blue-text {
	color: blue
}

.green-text {
	color: green
}

.red-text {
	color: red
}

.darkred-text {
	color: var(--firebrick)
}

/** Background Colors **/

/**
- Use for save, confirm
*/
.green {
	background-color: green;
	color: white
}

/**
- Use for search, add, register, export
*/
.blue {
	background-color: blue;
	color: white
}

/**
- Use for cancel, delete, exit
*/
.red {
	background-color: red;
	color: white
}

/**
- Another variation of delete
*/
.firebrick {
	background-color: firebrick;
	color: white
}

/**
- Use for save captura, generate archive
*/
.lightgreen {
	background-color: lightgreen;
}

.lightsteelblue {
	background-color: lightsteelblue;
	color: black
}

.lightksyblue {
	background-color: #87ceeb94;
	/* Replacing SkyBlue */
	color: black
}

.lightblue {
	background-color: #def0fe;
	color: black
}


.brown {
	background-color: brown;
	color: white
}

.darkviolet {
	background-color: darkviolet;
	color: white
}

.papaya {
	background-color: papayawhip;
	color: black
}

.golden {
	background-color: goldenrod;
	color: black
}

.lavender {
	background-color: lavender;
	color: black
}

.violet {
	background-color: violet;
	color: black
}

.fuschia {
	background-color: fuchsia;
	color: black
}

.yellow,
.highlight {
	background-color: yellow;
	color: black
}

.orange {
	background-color: orange;
	color: black;
}

.thistle {
	background-color: thistle;
	color: black
}


/** Borders/Separators **/
.thickBorder {
	border: 2px outset;
}