:root {
	--drkColor:#002B14;
	--headerText: #ffffff;
    --bgColor: #ffffff;
	--text: #ffffff;
	--btnColor: #63e044ec;
	--rad-btn: 15px;
	--rad-route: 20px;
	--complete-cl: #59df37;
	--close: rgb(54, 0, 0);
	--closeText: rgb(182, 0, 0);
	--transition: all 0.5s ease-in-out;
    --cardColor: #e7e7e7;
	--complete-bg: #002B14;
	--headerColor: #002B14;
	--fill: -webkit-fill-available;
	/* --lgtColor: #DEFFF1;
	--btnMain: #fafffd;
	--btnMainHover: #ff7b00;
	--btnInfo: #73717293;
	--rad-img: 0 100px 0 100px;
  	--complete-bg: #082111; */
}

html, body {
	margin: 0px;
	padding: 0px;
	background-color: var(--cardColor);
    font-family: 'Montserrat' !important;
}
span {
	font-size: 13px;
	font-weight: 600;
	margin-left: auto;
	color: var(--txtGreen);
	transition: var(--transition);
}
span:hover {
	cursor: pointer;
	color: var(--txtGreenHover) !important;
}
h2 {
	color: var(--txtGreen);
	font-weight: 700;
	font-size: 30px;
}
h3 {
	color: var(--txtGreen);
	font-weight: 600;
	font-size: 20px;
	margin: 3%;
}
h4 {
	color: var(--txtBlack);
	font-weight: 600;
	font-size: 15px;
}
.main-container {
	width: auto;
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	display: flex;
	justify-content: space-between;
}

.icon-btn-warning {
	background-color: yellow;
	color: black;
	width: 48px;
	height: 48px;
	padding: 15px;
	border: none;
	border-radius: var(--rad-btn);
	transition: var(--transition);
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-btn {
	background-color: var(--btnColor);
    color: var(--drkColor);
    width: 48px;
    height: 48px;
    padding: 15px;
    border: none;
    border-radius: var(--rad-btn);
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-btn:hover {
	cursor: pointer;
	opacity: 0.6;
}
.table-buttons {
	gap: 1vh;
	width: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 !important;
}
.table-buttons a {
	text-decoration: none;
	color: inherit;
}
.table-buttons a:hover {
	font-size: inherit;
}
.info-btn {
	background-color: var(--btnInfo);
	color: var(--txtBlack);
	width: 52px;
	height: 52px;
	padding: 14px;
	border: none;
	border-radius: 5px;
	transition: var(--transition);
}
.info-btn:hover {
	cursor: pointer;
	background-color: var(--btnInfoHover);
	
}
.simple-btn {
	background-color: var(--cardColor);
	border: none;
	color: var(--txtBlack);
	font-weight: 500;
	font-size: 12px;
	padding: 14px 45px;
	margin: 10px 0px;
	transition: var(--transition);
}
.simple-btn:hover {
	cursor: pointer;
	color: var(--bgColor);
}
.card {
	background-color: var(--cardColor);
	border: none;
	padding: 40px;
	box-shadow: var(--shadow);
}
.expand {
	text-align: end;
}
.switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 17px;
	margin: 0;
}
.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--btnInfo);
	-webkit-transition: .4s;
	transition: .4s;
}
.slider:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 2px;
	bottom: 2px;
	background-color: var(--cardColor);
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .slider {
	background-color: var(--txtGreen);
}
input:focus + .slider {
	box-shadow: 0 0 1px var(--txtGreen);
}
input:checked + .slider:before {
	-webkit-transform: translateX(13px);
	-ms-transform: translateX(13px);
	transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
	border-radius: 17px;
}
.slider.round:before {
	border-radius: 50%;
}
.linea {
	border-top: 1px solid var(--btnInfo);
	height: 2px;
	max-width: 100px;
	padding: 0;
	margin: 20px auto 0 auto;
}
/***************************** FORMS **********************************/
.section {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin: 10px;
}
.group {
	display: block;
	background-color: var(--bgColor);
	color: var(--txtBlack);
	border-radius: 5px;
	padding: 20px;
	margin: 30px 5px;
}
.group input::placeholder {
	color: var(--txtBlack);
	font-size: 5px;
}
.group p {
	font-weight: 600;
	margin: 15px;
}
.subgroup {
	display: block;
	margin: 10px;
}
.subgroup .entry {
	background-color: var(--cardColor);
	font-size: 13px !important;
}
input:-webkit-autofill,
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  font-family: inherit !important; 
  font-weight: 600 !important;
  border: 2px solid var(--complete-cl);
  -webkit-text-fill-color: var(--complete-cl);
  -webkit-box-shadow: 0 0 0px 1000px var(--complete-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.submit-area {
	display: flex;
	justify-content: center;
}
.submit-area button {
	display: flex;
    justify-content: center;
    align-items: baseline;
    min-width: -moz-available;         
    min-width: -webkit-fill-available; 
    min-width: fill-available;
    width: -moz-available;         
    width: -webkit-fill-available; 
    width: fill-available;
    gap: 20px;
}
select {
	background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance:none !important;
    -webkit-appearance: none !important; 
    appearance: none !important;
	font-family: inherit;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 35px;
	border: none;
	width: 185px;
}
.sectionButton {
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}
/***************************** BUTTONS STATUS **********************************/
button {
	padding: 14px 45px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 5px;
	transition: var(--transition);
}
/***************************** SCROLL BAR **********************************/
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
	margin: 0px 10px;
    border: none;
}
::-webkit-scrollbar-track {
    background: var(--back-color);
    border: none;
}
::-webkit-scrollbar-thumb {
    background: var(--btn-color);
    border: none;
}
::-webkit-scrollbar-thumb:hover {
    background: black;
    border: none;
}
/***************************** TABEL */
.table {
	color: var(--cardColor);
}
thead {
	font-size: 90%;
    text-align: center;
}
tbody {
	font-size: 75%;
    font-weight: 600;
    text-align: center;
}
table.dataTable td, table.dataTable th {
	vertical-align: middle;
}
table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
	background-color: var(--cardColor);
	color: var(--drkColor);
}
table.dataTable tbody tr.selected a, table.dataTable tbody th.selected a, table.dataTable tbody td.selected a {
	color: inherit;
}
table.dataTable.fixedHeader-floating {
	position: relative !important;
}
.table-header {
    display: flex;
    justify-content: space-between;
    margin: 0px;
}
.table-search {
	width: 200px;
	display: contents;	
}
.dataTables_filter label {
	color: var(--text);
	display: flex;
	flex-direction: column;
	font-family: inherit;
	font-weight: 700;
	font-size: 10px;
	gap: 5px;
	margin: 0 !important;
	content: 'Buscar: ';
}
.dataTables_filter input {
	font-family: inherit;
	background-color: var(--cardColor);
	border: none;
	border-radius: var(--rad-btn);
    font-size: 12px;
    font-weight: 500;
    padding: 16px;
	margin: 0 !important;
}
.table-btn {
	display: contents;
}
.table-btn button {
	background-color: var(--cardColor);
	color: var(--drkColor);
	border: none;
	border-radius: var(--rad-btn);
	transition: var(--transition);
}
.table-btn button:hover {
	background-color: var(--drkColor);
	color: var(--text);
}
.table-footer {
	display: flex;
    justify-content: center;
    align-items: center;
}
.table-pag {
	display: contents;
}
.dataTables_paginate ul {
	display: flex;
	font-weight: 600;
	font-size: 10px;
	gap: 5px;
}
.page-link {
	border-radius: var(--rad-btn);
	background-color: var(--cardColor);
	color: var(--drkColor);
	transition: var(--transition);
}
.page-link:hover {
	border-radius: var(--rad-btn);
	background-color: var(--drkColor);
	color: var(--text);
}
.page-item.active .page-link {
	border: none;
	border-radius: var(--rad-btn);
	background-color: var(--btnColor);
	color: var(--drkColor);
}
/***************************** FORM */
.form-padding {
	display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0px 30px;
}
.field {
	height: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: end;
	gap: 5px;
}
.field label {
	color: var(--text);
	font-weight: 500;
	font-size: 85%;
	margin: 0;
}
.entry {
	font-family: inherit;
	background-color: var(--cardColor);
	border: none;
	border-radius: var(--rad-btn);
    color: var(--drkColor);
    font-size: 80%;
    font-weight: 600;
    padding: 16px;
}
.entry::placeholder {
	color: var(--btnInfo);
	font-size: 12px;
	font-weight: 600;
}

/***************************** NAVBAR */
.navbar-routes {
	display: flex;
	justify-content: space-between;
	padding: 30px 10px 10px 30px;
}
.routes {
	display: flex;
	gap: 10px;
}
.route-item {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--rad-route);
	padding: 10px 10px 10px 10px;
	gap: 10px;
	color: var(--drkColor);
	width: auto;
	min-height: 58px;
}
.navbar-routes p {
	margin: 0;
	color: inherit;
}
.navbar-routes a:hover {
	text-decoration: none;
	color: var(--headerText);
}
.route-item:hover {
	cursor: pointer;
	border: solid 2px;
	color: var(--text);	
	background-color: var(--headerColor);
	font-weight: inherit;
	display: flex;
}
.active {
	background-color: var(--headerColor) !important;
	color: var(--headerText) !important;	
}
.route-link {
	display: flex;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	color: inherit;
}
.dropdown-item {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--rad-route);
	color: var(--headerText);
	font-weight: 700;
	background-color: var(--headerColor);
	font-size: 13px;
}
.dropdown-content {
    display: none;
	font-size: 12px;
	padding: 0;
	
}
.route-item:hover .dropdown-content {
    display: block;
	align-items: center;
	border-radius: var(--rad-route);
	padding: 0;	
	
}
.list{
	list-style-type: none;
	margin-top: 15px;
}
.list:hover{
	color: var(--headerColor);
	
}
.dropdown-item:hover{
	background-color: rgb(7, 32, 8);
}
.profile-welcome {
	font-weight: 700;
    font-size: 13px;
    color: var(--text);
	padding: 0px 30px;
}
.route-profile {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--drkColor);
	border-radius: var(--rad-btn);
	gap: 10px;
}
.profile {
	display: flex;
	gap: 10px;
}
/* .show {
	display: flex;
} */
.spinner {
	position: fixed;
	left: 45%;
	top: 40%;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
/***************************** Button */
.main-btn {
	background-color: var(--btnColor);
	color: var(--drkColor);
	font-size: 14px;
	font-weight: 700;
	border: none;
	border-radius: var(--rad-btn);
	transition: var(--transition);
	max-width: 250px;
}
.main-btn:hover {
	cursor: pointer;
	opacity: 0.9;
	background-color: #46b32bec;
}