@charset "UTF-8";
/*!
 * Atomic Web Design v2.1 (https://atomic-webdesign.com/)
 * Developed by: L.D.G. Jose Luis Quintana Trejo - Author.
 * Copyright each time you see this message - Atomic Web Design.
 */

body {
  font-family: 'OpenSans-Regular';
  background: linear-gradient(25deg, #212121, #212121, #303030, #212121, #212121, #212121, #212121, #212121, #212121);
  background-size: 300% 300%;
  color: #ffffff;
}

.main_content {
  padding-top: 3.3rem;
}

.footer_atomic {
  background-color: transparent;
  height: 6rem;
}

.footer_atomic div {
  color: white;
  font-size: 0.75rem;
  font-family: 'OpenSans-LightItalic';
  padding-top: 3rem;
  padding-left: 0;
  padding-right: 3rem;
}

.pdt-1 {
  padding-top: 1rem;
}

.ml-atm-1 {
  margin-left: 0.10rem;
}

.ml-atm-2 {
  margin-left: 0.20rem;
}

.rmv_pdd {
  padding-left: 0;
  padding-right: 0;
}

.clr_01 {background-color: #49d313;}
.clr_02 {background-color: #fd0da9;}
.clr_03 {background-color: #ead024;}

hr {
  color: #074a74;
  background-color: #074a74;
  margin: 0;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

.titles_welcome {
  display: flex;
}

.titles_welcome h1 {
  font-family: 'OpenSans-Bold';
  color: #074a74;
  font-size: 1.50rem;
}

.titles_welcome h3 {
  font-family: 'OpenSans-Medium';
  color: #074a74;
  font-size: 0.90rem;
}

.titles_welcome_desk {
  margin-top: 4rem;
}

.content_atomic {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pdd_cmdn_01 {
  margin-top: 69px;
}

.menu_side {
  background-color: #1A1A1A;
  width: 70px;
  height: 100%;
  color: white;
}

.scrollable_menuside {
  height: calc(100% - 0.5rem * 2);
}

.scrollable_menuside_ul {
  height:auto;
  padding-bottom: 100px;
}

.ul_menu_side {
  padding-top: 0;
  list-style: none;
}

.ul_menu_side li:first-child {
  padding-top: 1rem;
}

.ul_menu_side li {
  margin-left: -0.420rem;
  padding-top: 3rem;
}

.btn-action {
  background-color: transparent;
  border: none;
}

.form-todo {
  display: flex;
  justify-content: space-between;
}

.task-input[type="text"] {
  width: 100%;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 0.50rem;
  background-color: #d7ecf9;
  border: 1px solid #074a74;
  margin-right: 10px;
}

.btn_list {
  padding: 8px;
  border: none;
  background-color: #074a74;
  color: white;
  border-radius: 0.50rem;
  cursor: pointer;
  width: 6rem;
  font-size: 0.95rem;
  font-family: 'OpenSans-SemiBold';
}

.btn_list:hover {
  background-color: #08446a;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  font-size: 0.85rem;
  font-family: 'OpenSans-SemiBold';
  color: #074a74;
  background: #f4f4f4;
  margin-top: 1rem;
  padding-left: 0.50rem;
  padding-right: 0.50rem;
  border-radius: 0.50rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li span {
  padding-right: 10px;
}

li.completed {
  text-decoration: 2px solid #074a74 line-through;
  color: #074a74;
  background-color: #d7ecf9;
}

button.remove {
  background-color: #074a74;
  padding: 6px;
  font-size: 0.70rem;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

button.remove:hover {
  background-color: #c9302c;
}

.user_login {
  width: 100%;
}

.days_left_content {

}

.time_left {
  border-radius: 0.50rem;
  display: flex;
}

.dias_left {
  font-family: 'OpenSans-Bold';
  color: #074a74;
  font-size: 2.6rem;
}

.text_left {
  padding-left: 0.50rem;
  padding-top: 0.75rem;
  font-family: 'OpenSans-Light';
  color: #074a74;
  font-size: 0.90rem;
  width: 100%;
  border-right: 1px solid #074a74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text_left div:last-child {
  margin-top: -0.25rem;
  font-family: 'OpenSans-Medium';
  color: #074a74;
  font-size: 0.90rem;
}

.actions_counters {
  margin: 0.5rem;
}

.header_pagos {
  display: flex;
}

.add_pago {
  padding-left: 1rem;
}

.add_pago img {
  width: 1.80rem;
  height: auto;
  padding-top: 0.12rem;
}

.title_section {
  font-family: 'OpenSans-Bold';
  color: #074a74;
  font-size: 1.25rem;
  padding-bottom: 0.50rem;
}

.title_section_fixed {
  font-family: 'OpenSans-Bold';
  color: #074a74;
  font-size: 1.25rem;
  margin-top: 1.60rem;
  margin-left: 1rem;
}

.content_pago_items {
  margin-left: 1rem;
  margin-right: 1rem;
  border: 1px solid #074a74;
  border-radius: 0.50rem;
}

.header_pagos {
  padding-left: 1rem;
  padding-right: 1rem;
}

.item_main_pago {
  margin-bottom: 1rem;
}

.subcontent_pago_items {
  margin-left: 1.50rem;
  margin-right: 1.50rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  height: auto;
  background-color: #d7ecf9;
  padding-top: 0.50rem;
  padding-left: 0.50rem;
  padding-bottom: 0.65rem;
  font-family: 'OpenSans-Italic';
  color: #074a74;
  font-size: 0.90rem;
}

.img_comprobante {
  margin: 0.25rem;
}

.img_comprobante img {
  width: 220px;
  height: auto;
  border-radius: 0.75rem;
  padding-right: 0.50rem;
}

.pago_item {
  display: flex;
  color: #074a74;
}

.importe_item {
  color: #074a74;
  font-family: 'OpenSans-Bold';
  font-size: 0.90rem;
  padding-top: 0.40rem;
  padding-bottom: 0.40rem;
  padding-left: 0.50rem;
  border-bottom: 1px solid #074a74;
}

.info_pago_item:first-child {
  color: #074a74;
  font-size: 0.85rem;
  font-family: 'OpenSans-Bold';
  width: 100%;
  padding-left: 0.50rem;
  padding-right: 0.50rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-right: 1px solid #074a74;
}

.info_pago_item div:first-child {
  color: #074a74;
  font-family: 'OpenSans-Bold';
  font-size: 0.80rem;
}

.info_pago_item div {
  font-size: 0.75rem;
  font-family: 'OpenSans-Regular';
  padding-top: 0.25rem;
  color: #074a74;
}

.actions_pago_item {
  display: flex;
  padding-top: 0.25rem;
  padding-right: 0.50rem;
  width: 10rem;
}

.actions_pago_item div {
  padding-left: 1rem;
}

.actions_pago_item_soli {
  padding-top: 0.5rem;
  padding-right: 1rem;
}

.actions_pago_item_soli div {
  padding-left: 1rem;
  padding-bottom: 1rem;
  color: #074a74;
  font-size: 0.85rem;
  font-family: 'OpenSans-Medium';
}

.actions_pago_item img {
  width: 1.50rem;
  height: auto;
}

.modal-content {
  background: rgba(66, 66, 66, 0.68);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: none;
  margin-top: 4rem;
}

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

.modal-header h1 {
  font-family: 'OpenSans-Medium';
  font-size: 0.90rem;
  color: white;
  text-transform: uppercase;
}

.modal-header .btn-close {
  padding: 0;
  margin: 0;
  color: white;
  background: transparent;
}

.btn-close img {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-body {
  background-color: #212121;
  border: none;
  border-radius: 0.60rem;
  height: auto;
}

.modal-body div {
  font-family: 'OpenSans-LightItalic';
  color: white;
  font-size: 0.80rem;
}

.modal-footer {
  border-top: none;
}

.table-responsive::-webkit-scrollbar {
  width: 1rem;
  height: 0.75rem;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: #9e9d9d;
  background-color: #212121;
  border-bottom-width: 0;
  box-shadow: inset 0 0 0 9999px #212121;
}

.table thead {
  text-transform: uppercase;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table tbody td a img {
  width: 1.20rem;
  height: auto;
}

.table tbody td a:first-child {
  margin-right: 0.60rem;
}

.table tbody td a:last-child img {
  width: 0.95rem;
  height: auto;
}

.submitting_form {
  color: white;
  font-family: 'OpenSans-Italic';
  font-size: 0.80rem;
}

.atomic_action_modal {
  background-color: #606060;
  color: white;
  font-family: 'OpenSans-SemiBold';
  border: none;
  border-radius: 2rem;
  padding: 7px 22px;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.atomic_action_modal_close {
  background-color: #074a74;
  color: #ffffff;
  font-family: 'OpenSans-Bold';
  border: 1px solid #074a74;
  border-radius: 2rem;
  padding: 5px 20px;
  text-transform: uppercase;
  font-size: 0.70rem;
}

.atomic_sm_btn {
  background-color: #074a74;
  color: white;
  font-family: 'OpenSans-Bold';
  border: 1px solid #074a74;
  border-radius: 2rem;
  padding: 5px 10px;
  text-transform: uppercase;
  font-size: 0.70rem;
}

.modal-body form label {
  color: white;
  font-family: 'OpenSans-Bold';
  font-size: 1rem;
  padding-top: 1rem;
}

.modal-body form input {
  color: #074a74;
  font-family: 'OpenSans-Medium';
  font-size: 0.90rem;
  border-radius: 0.50rem;
  background-color: rgba(250,250,250,0.150);
  border: 1px solid #074a74;
}

.modal-body form textarea {
  color: #0b79be;
  border-radius: 0.50rem;
  background-color: rgba(250,250,250,0.150);
  border: 1px solid #0b79be;
}

._input_pago {
  display: flex;
}

._input_pago ._input_item_pago:first-child {
  width: 50%;
  margin-right: 1rem;
}

._input_item_pago {
  width: 50%;
}

#file {
  display: none; /* Hide the file input */
}

.upload-button img {
  cursor: pointer;
}

.upload_button {
  background-color: #074a74;
  border-radius: 1rem;
  border: none;
  margin-left: -1rem;
  margin-top: 2rem;
  padding: 2px 10px;
  font-size: 0.80rem;
  font-family: 'OpenSans-Italic';
  color: white;
}

.alert-upload {
  margin-left: -1rem;
  display: block;
  margin-top: 0.5rem; /* Adjust the value to set the desired space between the image and the span */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  max-width: 120px;
  font-size: 0.80rem;
  font-family: 'OpenSans-Italic';
  color: #074a74;
}

.upload_button-recibo {
  background-color: #074a74;
  border-radius: 1rem;
  border: none;
  margin-left: 1rem;
  margin-top: 1rem;
  padding: 2px 10px;
  font-size: 0.80rem;
  font-family: 'OpenSans-Italic';
  color: white;
}

.alert-upload-recibo {
  display: block;
  margin-top: 0.5rem;
  margin-left: 1.50rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 330px;
  font-size: 0.80rem;
  font-family: 'OpenSans-SemiBoldItalic';
  color: #074a74;
}

.payment-container {
  font-size: 0.80rem;
  font-family: 'OpenSans-Italic';
  color: #074a74;
}

.notify_content {
  display: flex;
  background-color: #074a74;
  color: #ffffff;
  width: auto;
  position: absolute;
  margin-top: 0;
  margin-left: 1rem;
  border-radius: 0.65rem;
  font-family: 'OpenSans-Light';
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.85);
}

.file-name {
  display: block;
  margin-top: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  max-width: 100px;
}

.file-name-recibo {
  color: white;
  font-family: 'OpenSans-SemiBoldItalic';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin-left: 0.5rem;
  margin-top: 0.20rem;
}

.loading-indicator {
  color: white;
  font-family: 'OpenSans-SemiBoldItalic';
  margin-top: 0.20rem;
}

.visually-hidden {
  display: none;
}

.notify_content div {
  padding: 1rem;
}

.notify_content img {
  width: 1.50rem;
  height: auto;
}

.historial_pagos {
  margin-top: 0;
}

.filter_section {
  margin-top: 0.25rem;
}

.filter_by_label {
  width: 5rem;
  font-family: 'OpenSans-LightItalic';
  color: white;
  font-size: 0.80rem;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.filter_by {
  margin-left: 0.25rem;
  font-family: 'OpenSans-MediumItalic';
  font-size: 0.85rem;
  border: none;
  color: white;
  background-color: #212121;
  width: 8rem;
  border-radius: 2rem;
}

.metrics_money {
  background-color: transparent;
}

.config_metrics {
  width: auto;
  background-color: #d7ecf9;
  border-radius: 2rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-bottom: 2rem;
}

.imgs_forms_metrics {
  width: 100%;
  height: 35rem;
  background-color: #becfda;
  border-radius: 1rem;
}

.imgs_forms_metrics iframe {
  width: 100%;
  height: 100%;
  margin-right: 0;
  border-radius: 1rem;
  padding: 0.50rem;
}

.imgs_sec_forms_metrics {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #becfda;
  border-radius: 1rem;
}

.img_inside_form {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 35rem;
}

.imgs_sec_forms_metrics img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  padding: 0.50rem;
}

.form_metrics {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}

.forms_registros_metrics::-webkit-scrollbar {
  width: 8px;
}

.forms_registros_metrics::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.form_metrics input {
  width: 100%;
  background-color: #212121;
  border-radius: 2rem;
  border: none;
  color: white;
  font-size: 0.85rem;
  font-family: 'OpenSans-Medium';
}

.form_metrics label {
  font-family: 'OpenSans-SemiBold';
  font-size: 0.80rem;
  color: white;
  margin-bottom: 5px;
  padding-left: 12px;
}

.form_metrics select {
  width: 100%;
  background-color: #212121;
  border-radius: 2rem;
  border: 1px solid #212121;
  margin-right: 0;
  color: white;
  font-size: 0.85rem;
  font-family: 'OpenSans-Medium';
  padding-left: 1rem;
  padding-top: 0.30rem;
  padding-bottom: 0.30rem;
}

._all_inputs_img {
  margin-top: 0.80rem;
}

._input_metric {
  margin-bottom: 0.30rem;
}

.metrics_header_page {
  display: flex;
  width: 100%;
}

.metrics_title_view {
  padding-left: 1rem;
  background-color: transparent;
  width: 70%;
  color: #074a74;
  font-family: 'OpenSans-Bold';
  font-size: 2rem;
}

.metrics_tabs {
  text-align: center;
  margin-top: 6rem;
  margin-bottom: 0;
  padding-top: 2rem;
  padding-bottom: 1rem;
  width: 100%;
  background-color: #d7ecf9;
  border-radius: 2rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.btn_metrics {
  background-color: #074a74;
  color: white;
  font-family: 'OpenSans-Bold';
  border: 1px solid #074a74;
  border-radius: 2rem;
  padding: 10px 30px;
  text-transform: uppercase;
  font-size: 0.80rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.active {
  padding: 8px;
  margin-right: 1rem;
  border: none;
  background-color: #0a6ba8;
  color: white;
  border-radius: 0.35rem;
  cursor: pointer;
  width: 6rem;
  font-size: 0.95rem;
  font-family: 'OpenSans-SemiBold';
}

.chart_content {
  height: auto;
  background-color: transparent;
}

.chart_graphic {
  margin-right: 1rem;
  margin-left: 1rem;
}

.chart_data {
  color: white;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 4rem;
  background: rgb(66, 66, 66);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 1rem;
  box-shadow: 0 2px 1px rgba(0,0,0,0.140);
}

.info_item_data {
  display: flex;
}

.info_items_data {
  display: flex;
}

.chart_data .info_item_data {
  margin-right: 1rem;
}

.bars_content {
  display: flex;
}

.header_chart {
  background-color: #0dcaf0;
  width: 50rem;
}

.nav_header_btns {
  display: flex;
}

.nav_header_btns button:first-child {
  margin-right: 1rem;
}

.y-axis-labels {
  border-right: 1px solid #074a74;
  width: 3rem;
  height: 18.50rem;
  position: absolute;
  font-size: 0.80rem;
  font-family: 'OpenSans-SemiBold';
  color: #074a74;
}

.y-axis-labels div {
  margin-bottom: 2rem;
}

.x-axis-labels {
  padding-bottom: -1rem;
  width: 100%;
}

.bars_content {
  margin-left: 3rem;
}

.bar_item {
  background-color: rgba(7, 74, 116, 0.49);
  height: 18.50rem;
  width: 4rem;
  margin-right: 1rem;
}

.amount_item {
  font-size: 0.80rem;
  font-family: 'OpenSans-SemiBold';
  color: white;
  border-top: 1px solid #074a74;
}

.totales_data {
  text-wrap: nowrap;
}

.registros_data {
  display: flex;
  margin-top: 1rem;
}

.wrap_col_data {
  color: white;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.total_data_number div {
  color: white;
  font-family: 'OpenSans-Medium';
  font-size: 1.10rem;
  border-right: 1px solid #305165;
  padding-right: 0.75rem;
}

.wrap_data_around {
  display: flex;
  margin-top: 0.25rem;
  margin-left: 0.25rem;
}

.atomic_btn_action img {
  width: 1rem;
  height: auto;
}

.wrap_data_around a {
  text-decoration: none;
  margin-top: 0;
}

.actions_data_content {
  display: flex;
}

.actions_data {
  display: flex;
}

.actions_data div {
  color: #074a74;
  font-family: 'OpenSans-Medium';
}

.actions_data div:first-child {
  font-family: 'OpenSans-SemiBoldItalic';
}

.actions_data img {
  height: auto;
}

.actions_data div:last-child {
  margin-left: 0.25rem;
}

.total_data {
  margin-right: 3rem;
  display: flex;
}

.open_chart_content {
  padding-left: 0.30rem;
  margin-top: 0;
  display: flex;
  font-size: 0.90rem;
  color: white;
  font-family: 'OpenSans-Bold';
}

.open_chart_content a {
  text-decoration: none;
  color: white;
  padding-right: 1rem;
}

.open_chart_content a img {
  width: 1.25rem;
  height: auto;
}

.open_chart_content a:last-child img {
  width: 1rem;
}

.total_data div:first-child {
  color: white;
  font-family: 'OpenSans-Bold';
  font-size: 0.90rem;
}

.total_data_amount {
  color: white;
  font-family: 'OpenSans-Medium';
  font-size: 1.10rem;
}

.sub_total_data {
  margin-top: 0.50rem;
  margin-left: 0.50rem;
}

.sub_total_data div:first-child {
  color: rgb(7, 74, 116);
  font-family: 'OpenSans-Medium';
  font-size: 0.80rem;
}

.sub_total_data_amount {
  color: #074a74;
  font-family: 'OpenSans-Medium';
  font-size: 0.80rem;
}

.registro_data_area {
  margin-bottom: 1rem;
  margin-right: 3rem;
}

.registro_data_area div:first-child {
  color: rgb(7, 74, 116);
  font-family: 'OpenSans-SemiBold';
  font-size: 1rem;
  text-wrap: nowrap;
}

.registro_data_area {
  color: #108cdc;
  font-family: 'OpenSans-MediumItalic';
  font-size: 0.95rem;
}

.registro_data_area a {
  text-decoration: none;
  color: #074a74;
}

.registro_data_area img {
  width: 1.5rem;
  height: auto;
  margin-top: -0.5rem;
  margin-right: 0.20rem;
}

.body_chart {
  width: 97%;
  height: 100%;
  margin-left: 0;
  position: absolute;
  z-index: 10;
  margin-top: 1rem;
}

.flex_data_area a {
  display: flex;
  margin-top: 0.25rem;
  text-wrap: nowrap;
}

.range_graphic {
  display: flex;
  padding-top: 0.50rem;
  margin: 1rem;
  background-color: #212121;
  width: 100%;
  height: 2rem;
}

.range_item {
  background-color: #212121;
}

.range_item a {
  text-decoration: none;
  font-size: 0.80rem;
  color: white;
  text-wrap: nowrap;
  font-family: 'OpenSans-MediumItalic';
  padding-right: 1rem;
  background-color: #212121;
}

.selected {
}

.nomina_form_metrics {

}

.gastos_form_metrics {
  display: flex;
}

.extras_form_metrics {
  display: flex;
}

.deudas_form_metrics {
  display: flex;
}

.table tbody {
  text-wrap: nowrap;
  font-size: 0.85rem;
}

.record_counter {
  display: flex;
  color: white;
  font-size: 0.80rem;
  font-family: 'OpenSans-Light';
}

.record_counter img {
  width: 1rem;
  height: auto;
  margin-top: 0.1rem;
  margin-left: 0.5rem;
}

/* ---- SM = SMALL ---- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pdt-1 {
    padding-top: 1rem;
  }

  .main_content {
    padding-top: 3.5rem;
  }

}

/* ---- MD = MEDIUM ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pdt-1 {
    padding-top: 0;
  }

  .main_content {
    padding-top: 1rem;
    padding-left: 2.7rem;
  }
}

/* ---- LG = LARGE ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pdt-1 {
    padding-top: 0;
  }

  .main_content {
    padding-top: 1rem;
    padding-left: 2.7rem;
  }
}

/* ---- XL = EXTRA LARGE ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pdt-1 {
    padding-top: 0;
  }

  .main_content {
    padding-top: 1rem;
    padding-left: 2.7rem;
  }
}

/* ---- XXL = EXTRA EXTRA LARGE ---- */
@media (min-width: 1400px)  {
  .pdt-1 {
    padding-top: 0;
  }

  .main_content {
    padding-top: 1rem;
    padding-left: 2.7rem;
  }
}