input {
  width: 100%;
  border: 1px solid #aaa;
}
@font-face {
  font-family: "MyWebFont";
  src: url("/static/fonts/woff2/Barlow-Regular.woff2") format("woff2"),
    url("/static/fonts/woff/Barlow-Regular.woff") format("woff"),
    url("/static/fonts/ttf/Barlow-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "numero";
  src: url("/static/fonts/TitilliumWeb-Regular.ttf") format("truetype");
}

body {
  font-family: "MyWebFont", Fallback, sans-serif;
}

.numero {
  font-family: "numero", Fallback, sans-serif;
}

#modal {
  z-index: 1;
}

thead {
}

th,
td {
  padding: 6px 6px;
}

tr {
  border-bottom: 1px solid #ccc;
}

.ember-power-select-trigger {
  border-radius: 0px;
  padding: 4px 1px;
  border: 1px solid #ccc;
  box-shadow: #00000012 1px 1px 2px;
}

.ember-power-select-status-icon {
  border-color: #ccc transparent transparent transparent;
}

.seccion:hover {
  background-color: #f8f8f8;
}

.seccion.active:hover {
  background-color: #fff;
}

.seccion.active {
  background-color: #fff;
  outline: 1px solid #6b6bb2;
}

.seccion-cuentas:hover {
  background-color: #f8f8f8;
}

.seccion-cuentas.active:hover {
  background-color: #f8f8f8;
}

.pl-custom {
  padding-left: 19px;
}

.ember-power-select-option[aria-current="true"] {
  background-color: #dfdfdf;
  color: black;
}

.no-user-select {
  user-select: none;
}

.no-user-input {
  pointer-events: none;
}


.button:disabled, button:disabled {
  opacity: 0.5;
}

.button, button {
  background-color: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
  color: #454545;
  cursor: pointer;
  margin-right: 5px;
  padding: 8px;
  user-select: none;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 5px;
}

.button:hover, button:hover {
  background-color: #eff1f1;
}

.button:active, button:active {
  background-color: #d2d6d6;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px rgb(0 0 0 / 10%);
}

.button:focus, button:focus {
  box-shadow: inset 0 1px rgb(255 255 255 / 36%), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.form label {
  padding-bottom: 6px;
  display: block;
  color: dimgray;
}

.field input {
  border: 1px solid #ccc;
  box-shadow: #00000012 1px 1px 2px;
  display: inline-block;
  line-height: 1;
  padding: 0.5em 0.6em;
}

/* errores de formularios */
.field .error {
  color: #eb3434;
  display: block;
  font-size: small;
  min-height: 25px;
  padding: 5px 0px;
  text-align: right;
}

.dialogo {
  background-color: #f4f5f7;
  border-radius: 2px;
}

.ember-power-select-search-input {
  border: 1px solid #ccc;
  box-shadow: #00000012 1px 1px 2px;
  display: inline-block;
  margin-bottom: 6px;
  padding: 0.5em 0.6em;
}


.field-con-errores
  .ember-view.ember-basic-dropdown-trigger.ember-power-select-trigger {
  border: 1px solid red;
}

.field-con-errores input {
  border: 1px solid red;
}

.ember-power-select-group .ember-power-select-group-name {
  color: gray;
  font-weight: bold;
  font-size: small;
}

.ember-power-select-option[aria-selected="true"] {
  background-color: #def1ff;
}

.ember-power-select-option[aria-current="true"] {
  background-color: #d3ebfd;
}

.spinner {
  height: 1em;
  width: 1em;
}

.boton-mas {
  height: 1em;
  width: 1em;
  opacity: 50%;
}

.boton-mas:hover {
  opacity: 100%;
}

.ember-application {
  overflow: hidden;
}

.panel-izquierdo {
  min-width: 20rem;
  max-width: 20rem;
  width: 20rem;
}

.panel-izquierdo-colapsado {
  min-width: 3rem;
  max-width: 3rem;
  width: 3rem;
}

.bg-header {
  background-color: #252554;
}

.bg-secundario {
  background-color: #6b6bb2;
}

.no-responsive {
  max-width: unset;
}

.numero-disponible {
  padding-right: 14px;
}

.interlinea {
  pointer-events: none;
  transform: translateY(-9px);
}

.hover:hover {
  background-color: #4f4fc81f;
}


.htmx-indicator{
}

@keyframes animacion-de-ingreso {
  from {
    max-height: 0px;
    opacity: 0.75;
    overflow: hidden;
    background-color: #adeab4;
  }

  to {
    max-height: 250px;
    opacity: 1;
    overflow: initial;
    background-color: initial;
  }
}


@keyframes animacion-de-fondo {
  from {
    color: green;
  }

  to {
    color: initial;
  }
}

@keyframes animacion-desaparecer {
  0% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.desaparecer {
  opacity: 0;
  animation: animacion-desaparecer 1s linear;
}

.animar-ingreso {
  animation: animacion-de-ingreso 2s ease-out;
}

.animar-fondo {
  animation: animacion-de-fondo 3s linear;
}

[data-loading] {
  display: none;
}

.ss-main .ss-single-selected {
  padding: 0.5rem !important;
  border: 1px solid gray !important;
  border-radius: 0px !important;
  height: revert !important;
}

.ss-main {
  color: black !important;
}

.ss-content {
  border: 1px solid gray !important;
}

.ss-content .ss-search input {
  border: 1px solid gray !important;
  border-radius: 0 !important;
}

.select2-container .select2-selection--single {
  height: inherit !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: inherit !important;
}

.select2-container--default .select2-selection--single {
  border-radius: 0 !important;
  padding: 0.5em !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 5px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0px !important;
}

input:focus, input:focus {
  box-shadow:
    inset 0 0 1px rgb(67 90 111 / 14%),
    inset 0 0 0 1px #579ad9,
    0 0 0 3px rgb(16 112 202 / 14%);
  outline: 0!important;
  z-index: 2;
}

.dialogo p {
  padding-bottom: 0.5em !important;
}

.grabbing * {
  cursor: grabbing !important;
}

.errorlist {
  float: right;
  color: red;
  font-size: small;
  padding: 0;
  margin: 0;
}

.errorlist li {
  list-style: none;
}

/* Hace que los select readonly se vean correctamente en select2 */
select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
  background: #eee;
  box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
  display: none;
}

.centavos {
  top: -0.4em;
  opacity: 0.8;
  font-size: 60%;
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 100px 150px 150px calc(100% - 500px) 100px;
}

.row-sin-cuenta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 100px 200px calc(100% - 500px) 100px 100px;
}


.row-full {
  grid-column: 1 / -1;
  display: grid;
}

.wrapper-presupuesto {
  display: grid;
  grid-template-columns: 55% repeat(3, 15%)
}

.row-presupuesto {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 55% repeat(3, 15%)
}

.row-presupuesto-asignacion {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 55% repeat(3, 15%)
}

.row-historial-de-asignacion {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 50% repeat(2, 25%)
}


.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: x-small;
}

.boton-alternar-panel {
  display: block;
  width: 100%;
  padding: 0 !important;
  color: gray !important;
  font-size: large !important;
  background: none;
  border: none;
  box-shadow: none;
}

select#id_categoria {
  height: 39px;
  width: 100%;
  opacity: 0.5;
}


#djDebugToolbar input {
  width: initial !important;
}

.dn {
  display: none !important;
}


.chart-container {
  position: relative;
  height: 80vh;
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
}



.select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 0px !important;
}

.select2-selection__arrow {
  display: none !important;
}


@media only screen and (max-width: 900px) {

  .row {
    display: block;
  }

  .row-sin-cuenta {
    display: block;
  }
  
  .columna-balance {
    display: none;
  }

  .row-presupuesto-asignacion {
    grid-template-columns: initial;
  }
}


table.tabla {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

table.tabla caption {
}

table.tabla tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}

table.tabla th,
table.tabla td {
}

table.tabla th {
}

@media screen and (max-width: 900px) {
  table.tabla {
    border: 0;
  }

  table.tabla thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table.tabla progress.w-100.progreso {
    width: 130px;
  }

  table.tabla tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 2em;
  }
  
  table.tabla td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  
  table.tabla td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
  }
  
  table.tabla td:last-child {
    border-bottom: 0;
  }
}


.sticky {
  position: sticky;
  top: 0px;
}