@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

:root {
  --main-color: rgba(5, 43, 148, 0.767);
  --light-gray: #cccecf;
  --red: rgb(180, 39, 39);
  --gray: rgb(178 177 177);
  --color-hover-link: #6e98f1;
  --text-color-light: #f3e9e9;
  --blue-color: #368196b7;
  --disabled-background: #dedede;
  --disabled-color: #838282;
  --title-color: #495057;
  --hard-color: #002a36;
  --light-color: #f5f5f5;
  --red-color: #c62a2a;
  --light-red-color: #e96767;
  --background-low-opacity: #1f5c6d7d;
  --background-full-opacity: #1f5c6d;
  --yellow-color: #EAC452;
  --header-color: #dbe5e8;
}

.bg-dark-subtle {
  background-color: var(--header-color) !important;
}

.quicksand {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

header {
  width: 100vw;
  height: 5rem;
  overflow-x: hidden;
}

i {
  font-style: normal;
}

#menu-sandbox {
  position: fixed;
  top: 110px;
  left: 25px;
  width: 15%;
  z-index: 1000;
}

#sandbox-container {
  display: none;
}

.scrollspy {
  margin: 20px auto;
}

.main-index {
  margin: 35px !important;
  font-size: large;
}

.main-index .info {
  margin-bottom: 3rem;
}

.main-index h1, h3 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: bold;
}

.main-index ul {
  list-style-type: none;
}

.section-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.section-info {
  width: 60%;
  margin-right: 25px;
}

.section-img {
  width: 40%;
}

.section-img img {
  width: 100%;
}

.container {
  max-width: 950px;
  margin: 0 auto;
  padding: 15px;
}

.container.form {
  width: 100%;
}

.container.form form {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 10px;
  text-transform: uppercase;
  background: #002a36;
  color: #dedede;
  font-weight: bold;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin: 10px;
}

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

.custon-checkbox {
  cursor: pointer;
  height: 20px;
}

.btn {
  width: auto;
}

#btn-index {
  align-self: flex-end;
}

input[readonly] {
  background-color: #f7f9fa;
  color: #5f6264;
  cursor: no-drop;
}

/* loader */
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.loader img {
  width: 50px;
  height: 50px;
}

/* loader */
/* ****************************** */
main {
  margin: 0 auto;
  width: 95%;
  /* height: 95vh; */
  padding: 10px;
  margin-bottom: 10px;
  overflow: auto;
}

main #iframe, main #iframe iframe {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-top: 15px;
}

main#main-perfil, main#main-ajustes, body {
  overflow-x: hidden;
}

main#main-ajustes h6 {
  font-weight: bold;
}

.table-container {
  width: 100%;
  border-radius: 10px;
}

.table-container.campos {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

footer {
  position: relative;
  bottom: 0px;
}

footer div {
  width: 100vw;
  height: 10vh;
}

.div-download {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 25px;
}

/* /// */
body#report-bank {
  overflow-x: scroll;
}

.size-cell {
  min-width: 200px;
}

body#body-login {
  background-color: var(--hard-color);
  background-image: linear-gradient(0deg, rgba(37, 37, 37, 0.5), rgba(37, 37, 37, 0.5)), url(/img/login-bgr-web2.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-dark-blue {
  background-color: #706e6edb;
}

#main-login0 {
  width: 100%;
  overflow: auto;
  margin: 15px auto;
}

#main-login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--light-color);
  /* ------ */
  margin: 20px auto;
}

#main-login h1 {
  margin-bottom: 20px;
}

#main-login .container.login {
  max-width: 40rem;
  height: 35rem;
  margin: 0 auto;
  border-radius: 10px;
  display: inherit;
  flex-direction: column;
  padding: 30px;
  background: var(--background-low-opacity);
  backdrop-filter: blur(10px);
  position: relative;
}

.drops {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/img/gotas-opacity.webp);
  background-size: contain;
  background-position: center center;
}

#main-login .img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 35px 0px;
}

#main-login .item-login {
  margin-bottom: 10px;
}

#main-login .item-login.btn-iniciar {
  margin-top: 20px;
}

.hide-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.btn-iniciar i {
  font-size: medium;
  transform: rotate(35deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.logout-btn-container {
  display: flex;
  flex-direction: column;
}

.logout-btn-container button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

.material-symbols-outlined.logout {
  font-size: 30px;
  color: var(--red);
}

.material-symbols-outlined.eye {
  align-self: center;
  color: var(--gray);
}

.input-password-container, .eye-container {
  display: flex;
  flex-direction: row;
}

.material-symbols-outlined.eye.off {
  display: none;
}

/* -----------------------------PERFIL.HTML----------------------------- */
.container.perfil, .container.ajustes, .container.api-key {
  max-width: 50rem;
  margin: 0 auto;
  padding: 30px;
  border-radius: 5px;
}

.container.ajustes {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 15px;
}

.myBox {
  /* display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; */
  border: 1px solid var(--disabled-background);
  border-radius: 10px;
  padding: 20px;
  height: 30rem;
}

.myBox {
  font-weight: bold;
}

.myBox:nth-child(1) {
  border: 1px solid var(--hard-color);
  background-color: var(--hard-color);
  color: var(--light-gray);
}

.myBox.title {
  width: 100%;
  height: fit-content;
  color: var(--light-color);
}

.labels {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.blur-effect {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  backdrop-filter: blur(4px);
}

.z-index {
  z-index: 1;
}

.container.perfil, .container.ajustes {
  /* border: 1px solid var(--light-gray); */
  display: flex;
  flex-direction: column;
  margin: 30px auto;
}

.container.perfil {
  background: var(--hard-color);
  color: var(--light-gray);
  border-radius: 10px;
}

/* .container.ajustes{
    border: none;
} */
.container.perfil h2 {
  align-self: center;
  margin-bottom: 20px;
}

.container.perfil .img-container.perfil {
  align-self: center;
  width: 8rem;
  height: 8rem;
}

main#main-perfil, main#main-ajustes {
  height: auto;
}

.container.perfil .img-container.perfil #img-perfil {
  width: 100%;
  height: 100%;
  background-color: var(--gray);
  background-image: url(/img/user.png);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.img-user {
  transition: all 1s ease-in-out;
}

.img-user:hover {
  transform: scale(1.1);
}

.item-perfil {
  display: flex;
  flex-direction: column;
  margin: 15px 0px;
}

.item-perfil label {
  margin: 10px 0px;
}

.container.api-key > div {
  display: flex;
  flex-direction: row;
}

.container.api-key #api-key {
  cursor: pointer;
}

.newApiKey-margin {
  margin: 0 4rem;
}

.btn-eye {
  align-self: center;
}

.navbar-brand {
  font-weight: bold;
  color: var(--background-full-opacity);
  font-size: x-large;
}

.nav-link.hover:hover {
  color: var(--color-hover-link);
  font-weight: bold;
}

.item-perfil .label-names {
  font-weight: bold;
  margin: 0px 10px 0px 25px;
}

.show-modal {
  position: absolute;
  display: block;
}

.bi {
  width: 2rem;
  height: 2rem;
}

.alert {
  width: 85%;
  margin: 0 auto 25px;
}

.bold {
  font-weight: bold;
}

.perfil-portada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/img/portada.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 5px;
  color: var(--text-color-light);
  position: relative;
}

.perfil-portada h2 {
  font-weight: bold;
}

/* -----------------------------PERFIL.HTML----------------------------- */
/* --------------------ACTUALIZA_TRANSACCIONES.HTML-------------------- */
.second-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#update-file-container {
  width: 100%;
  height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

hr {
  color: var(--blue-color);
  border: solid 1px var(--blue-color);
  width: 100%;
  opacity: 1;
  margin: 15px auto;
}

form#upload-form {
  margin-bottom: 20px;
}

.titulos {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}

.formulario > div {
  padding: 10px;
}

.drop {
  margin-bottom: 25px;
  max-width: 750px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

#drop-container {
  width: 95%;
  height: 16rem;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border: 2px dashed var(--blue-color);
  border-radius: 15px;
}

.drop-border {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #002a36a2;
  font-weight: bold;
  text-align: center;
  font-size: medium;
}

.drop-zone.dragover, .drop-container.dragover p {
  border-color: #333;
  color: #333;
}

.list-container {
  margin: 15px;
  color: var(--hard-color);
}

.list-container li {
  font-size: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  cursor: grab;
  border-radius: 5px;
}

.list-container li:hover, .list-container li:active {
  background-color: var(--disabled-background);
  color: var(--disabled-color);
}

.file-list {
  list-style-type: none;
  padding: 0;
}

.file-list li {
  margin: 5px 0;
  font-size: 14px;
}

.btn-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.import-color {
  filter: grayscale(80%);
}

#import-logo {
  width: 11rem;
  margin: 0 auto;
  z-index: -2;
}

#btn-update[disabled] {
  color: var(--disabled-color);
  background-color: var(--disabled-background);
  cursor: not-allowed;
}

.mybtn-form {
  border-width: 0;
  background: var(--hard-color);
  color: var(--light-color);
  padding: 5px 15px;
  border-radius: 3px;
  box-shadow: 1px 1px 5px var(--title-color);
  margin-top: 15px;
  font-size: medium;
}

.mybtn-form:hover {
  background: var(--blue-color);
  color: var(--title-color);
  cursor: pointer;
}

.btn-remove {
  background-color: var(--red-color);
  color: var(--light-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-shape {
  font-size: small;
  margin: 0 10px;
  padding: 5px;
  border-radius: 15px;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: none;
}

.btn-remove:hover {
  background-color: var(--light-red-color);
  color: var(--title-color);
}

input[type=file] {
  display: none;
}

div#update-table {
  border-radius: 10px;
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

div#update-table h5 {
  margin: 25px 5px;
}

.container.alert {
  max-width: 25rem;
}

/* ------------------FIN ACTUALIZA_TRANSACCIONES.HTML------------------ */
/* ------------------------------BOOSTRAP------------------------------ */
.table-dark {
  --bs-table-bg: var(--hard-color);
}

.col-12 {
  width: 100% !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--hard-color);
  --bs-btn-border-color: var(--hard-color);
  --bs-btn-hover-bg: var(--hard-color);
  --bs-btn-hover-border-color: var(--hard-color);
  --bs-btn-active-bg: var(--hard-color);
  --bs-btn-active-border-color: var(--hard-color);
  --bs-btn-disabled-color: var(--hard-color);
  --bs-btn-disabled-border-color: var(--hard-color);
}

.list-group-item.active {
  background-color: var(--hard-color);
  border-color: var(--hard-color);
}

/* ----------------------------FIN BOOSTRAP---------------------------- */
/* ----------------------------GOOGLE FONTS---------------------------- */
.material-symbols-outlined.money {
  color: var(--yellow-color);
}

.material-symbols-outlined.money, .material-symbols-outlined.bank {
  margin-right: 5px;
}

/* --------------------------FIN GOOGLE FONTS-------------------------- */
@media screen and (min-width: 430px) {
  #main-login {
    height: 80vh;
  }

  .myBox {
    height: 25rem;
  }
}
@media screen and (min-width: 763px) {
  main {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .row, .row.inputs {
    flex-direction: row;
    justify-content: flex-start;
  }

  .div-download {
    justify-content: flex-end;
  }

  .my-w {
    width: 70% !important;
  }
}
@media (min-width: 768px) {
  .col-md-5 {
    width: 41.66666667% !important;
  }
}
@media screen and (min-width: 885px) {
  #sandbox-container {
    display: flex;
  }
}