/*Base*/
/*Utilities*/
@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
.flexH {
  display: flex;
  flex-wrap: wrap; }
  .flexH div {
    margin-right: 25px; }

.flexV {
  display: flex;
  flex-direction: column; }

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  font-family: 'Raleway', sans-serif; }

body {
  max-width: 100%;
  font-size: 1em;
  overflow-x: hidden; }

.bodyContent {
  margin: 20px; }

@media screen and (max-width: 768px) {
  body {
    font-size: 0.9em;
    scroll-behavior: smooth; } }

/*End Media Screen 768px*/
@media screen and (max-width: 480px) {
  body {
    font-size: 0.9em; } }

/*End Media Screen 480px*/
@media screen and (max-width: 320px) {
  body {
    font-size: 0.8rem; } }

/*Components*/
/*----------Background-Colors------*/
.bgYellow {
  background-color: #ffcd00; }

.bgDarkYellow {
  background-color: #E9BB00; }

.bgRed {
  background-color: red; }

.bgLightBlue {
  background-color: #F49C7D; }

.bgBlue {
  background-color: #50c497; }

.bgDarkBlue {
  background-color: #168057; }

.bgLightBlue {
  background-color: #aeeed5; }

.bgBlack {
  background-color: #201c1c; }

.bgDarkGray {
  background-color: #1f2526; }

.bgLightGray {
  background-color: #4c5151; }

.bgWhite {
  background-color: #FAFAFA; }

/*----------Text colors------------*/
.yellowTx {
  color: #ffcd00; }

.darkYellowTx {
  color: #E9BB00; }

.redTx {
  color: red; }

.orangeTx {
  color: #ED6E30; }

.darkOrangeTx {
  color: #E52E2E; }

.lightOrangeTx {
  color: #F49C7D; }

.blueTx {
  color: #50c497; }

.darkBlueTx {
  color: #168057; }

.lightBlueTx {
  color: #aeeed5; }

.darkGrayTx {
  color: #1f2526; }

.lightGrayTx {
  color: #4c5151; }

.whiteTx {
  color: #FAFAFA; }

.blackTx {
  color: #201c1c; }

/*----------Text effects------------*/
.boldTx {
  font-weight: bold; }

.semiBoldTx {
  font-weight: 400; }

.lightTx {
  font-weight: lighter; }

.cTx {
  text-align: center; }

.rTx {
  text-align: right; }

.lTx {
  text-align: left; }

.jTx {
  text-align: justify; }

.uppercase {
  text-transform: uppercase; }

.lowercase {
  text-transform: lowercase; }

.capitalize {
  text-transform: capitalize; }

.noTransform {
  text-transform: none; }

.noDecorateTx {
  text-decoration: none; }

/*----------Text aligns------------*/
.cTx {
  text-align: center; }

.rTx {
  text-align: right; }

.lTx {
  text-align: left; }

/*----------Buttons---------*/
.lgBtn {
  margin-top: 15px;
  padding: 10px 100px;
  text-decoration: none;
  display: inline-block; }

.smBtn {
  margin-top: 15px;
  padding: 10px 50px;
  text-decoration: none;
  display: inline-block; }

/* Special features */
.boxShadow {
  box-shadow: 0 0 10px 2px #aaa8a8; }

.rounded {
  border-radius: 50px; }

.semiRounded {
  border-radius: 10px; }

.space {
  padding-top: 30px; }

.line {
  display: block; }

.noList {
  list-style: none; }

.noDecoration {
  text-decoration: none; }

.pointer {
  cursor: pointer; }

.roundedImg {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: auto; }

.alignCenter {
  align-self: center; }

.alignLeft {
  align-self: left; }

.alignRight {
  align-self: right; }

.justifyCenter {
  justify-self: center; }

.justifyStart {
  justify-self: start; }

.justifyEnd {
  justify-self: end; }

.hidden {
  visibility: hidden; }

.slider {
  padding: 40px; }
  .slider .container {
    width: 90%;
    min-height: 60vh;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; }
  .slider .slider__container {
    max-width: 100%;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: repeat(1, auto);
    grid-template-areas: "slider__arrow_left       slider__body        slider__arrow_right";
    align-items: center;
    gap: 1em; }
    .slider .slider__container .slider__body {
      grid-area: slider__body;
      opacity: 0;
      pointer-events: none;
      display: grid;
      grid-template-columns: 1fr max-content;
      grid-template-rows: repeat(1, auto);
      grid-template-areas: "slider__text       slider__picture";
      align-items: center;
      transition: opacity 1.5s; }
      .slider .slider__container .slider__body .slider__text {
        grid-area: slider__text;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; }
        .slider .slider__container .slider__body .slider__text .subtitle {
          font-size: 2em; }
        .slider .slider__container .slider__body .slider__text .slider__review {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-weight: 2em;
          line-height: 1.7; }
      .slider .slider__container .slider__body .slider__picture {
        grid-area: slider__picture;
        display: flex;
        justify-content: center; }
        .slider .slider__container .slider__body .slider__picture .slider__img {
          width: 500px; }
    .slider .slider__container .slider__body--show {
      opacity: 1;
      pointer-events: unset; }
    .slider .slider__container .slider__arrow--left {
      grid-area: slider__arrow_left;
      cursor: pointer; }
    .slider .slider__container .slider__arrow--right {
      grid-area: slider__arrow_right;
      cursor: pointer; }

@media screen and (max-width: 768px) {
  .slider .slider__container .slider__body {
    grid-template-columns: 1fr;
    grid-template-areas: "slider__picture" "slider__text"; }
    .slider .slider__container .slider__body .slider__picture {
      flex-direction: row;
      align-items: center; }
      .slider .slider__container .slider__body .slider__picture .slider__img {
        width: 210px; } }

@media screen and (max-width: 576px) {
  .slider .slider__container {
    grid-template-columns: 25px 1fr 25px; }
    .slider .slider__container .slider__body .slider__text .subtitle {
      font-size: 1.53846em;
      margin-bottom: 15px; }
    .slider .slider__container .slider__body .slider__text .slider__review {
      font-size: 1em;
      line-height: 1.6; }
    .slider .slider__container .slider__body .slider__picture .slider__img {
      width: 180px;
      height: 180px; }
    .slider .slider__container .slider__arrow {
      width: 100%; } }

@media screen and (max-width: 380px) {
  .slider .slider__container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "slider__body           slider__body" "slider__arrow_left     slider__arrow_right"; }
    .slider .slider__container .slider__body {
      margin-bottom: 20px; }
      .slider .slider__container .slider__body .slider__text {
        align-items: center;
        overflow-x: hidden; }
        .slider .slider__container .slider__body .slider__text .subtitle {
          font-size: 1.33333em;
          margin-bottom: 15px; }
        .slider .slider__container .slider__body .slider__text .slider__review {
          font-size: 1em;
          line-height: 1.6; }
        .slider .slider__container .slider__body .slider__text a {
          padding: 10px 50px; }
    .slider .slider__container .slider__arrow--left {
      justify-self: center; }
    .slider .slider__container .slider__arrow--right {
      justify-self: center; } }

@media screen and (max-width: 320px) {
  .slider .slider__container .slider__body {
    margin-bottom: 20px; }
    .slider .slider__container .slider__body .slider__text {
      align-items: center;
      overflow-x: hidden; }
      .slider .slider__container .slider__body .slider__text .subtitle {
        font-size: 1.17647em;
        margin-bottom: 15px; }
      .slider .slider__container .slider__body .slider__text .slider__review {
        font-size: 0.90909em;
        line-height: 1.6; }
  .slider .slider__container .slider__arrow--left {
    justify-self: center; }
  .slider .slider__container .slider__arrow--right {
    justify-self: center; } }

.fullScroll {
  overflow: scroll; }

.horizontalScroll {
  overflow-x: scroll; }

.verticalScroll {
  overflow-y: scroll; }

/*Layout*/
/*------Nav-------*/
.header__nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 0;
  background-color: #201c1c;
  /*--- Burger Nav---*/ }
  .header__nav .header__nav--burger div {
    width: 20px;
    height: 2px;
    background-color: #FAFAFA;
    margin: 5px;
    transition: all 0.3s ease; }
  .header__nav .header__nav--logo img {
    max-width: 100px; }
  .header__nav .header__nav--content {
    position: absolute;
    right: 0;
    height: 92vh;
    top: 11vh;
    flex-direction: column;
    background-color: #201c1c;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    text-align: center; }
    .header__nav .header__nav--content li {
      padding-top: 50px;
      opacity: 0; }
      .header__nav .header__nav--content li a:hover {
        color: #ffcd00; }
      .header__nav .header__nav--content li .closeSesion:hover {
        color: red; }
  .header__nav .header__nav--burger {
    display: block;
    cursor: pointer; }
  .header__nav .header__nav--contentActive {
    transform: translate(0%); }

@keyframes header__nav--contentFade {
  from {
    opacity: 0;
    transform: translateX(50px); }
  to {
    opacity: 1;
    transform: translateX(0px); } }
  .header__nav .toggle .header__nav--burger-1 {
    transform: rotate(-45deg) translate(-3px, 5px); }
  .header__nav .toggle .header__nav--burger-2 {
    opacity: 0; }
  .header__nav .toggle .header__nav--burger-3 {
    transform: rotate(45deg) translate(-5px, -7px); }

@media screen and (max-width: 320px) {
  .header__nav .header__nav--content {
    width: 100%; } }

footer {
  bottom: 0;
  background-color: #201c1c;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center; }
  footer .footer__logo {
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px; }
    footer .footer__logo h2 {
      max-width: 100%;
      letter-spacing: 10px;
      color: #FAFAFA; }
  footer .footer__social {
    display: none;
    padding: 0 50px 200px;
    width: 30%; }
    footer .footer__social ul {
      margin-top: 30px;
      display: flex;
      justify-content: space-around; }
      footer .footer__social ul li {
        list-style: none; }
        footer .footer__social ul li a {
          color: #FAFAFA; }
          footer .footer__social ul li a:hover {
            color: #168057; }
  footer .footer__credits {
    width: 100%;
    background-color: #201c1c;
    padding: 30px 0; }
    footer .footer__credits ul {
      display: flex;
      justify-content: space-around; }
      footer .footer__credits ul li {
        list-style: none; }
        footer .footer__credits ul li p {
          font-size: 0.66667em; }
        footer .footer__credits ul li a {
          text-decoration: none;
          color: #168057; }

@media screen and (max-width: 768px) {
  footer .footer__logo {
    padding: 120px 50px 0; }
    footer .footer__logo h2 {
      font-size: 1em; } }

@media screen and (max-width: 576px) {
  footer .footer__logo {
    padding: 120px 50px 0; }
  footer .footer__social {
    width: 60%;
    padding-bottom: 100px; } }

@media screen and (max-width: 480px) {
  footer .footer__logo {
    padding: 120px 30px 0; }
  footer .footer__credits {
    padding: 10px; }
    footer .footer__credits ul {
      flex-direction: column;
      align-items: center; } }

@media screen and (max-width: 320px) {
  footer .footer__logo {
    text-align: center;
    font-size: 1em;
    padding: 100px 50px 0; }
    footer .footer__logo h2 {
      letter-spacing: 5px; }
  footer .footer__social {
    padding-right: 0px;
    padding-left: 0px; }
  footer .footer__credits {
    padding: 10px; }
    footer .footer__credits ul {
      display: block;
      text-align: center; } }

form {
  width: 100%; }
  form input {
    text-align: center;
    border: none;
    border-bottom: 1px solid #201c1c;
    margin-bottom: 10px; }
    form input:focus {
      outline: none;
      border-bottom: 2px solid #ffcd00; }
  form textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 150px;
    max-height: 220px;
    padding: 20px; }
    form textarea:focus {
      outline: none;
      border: 2px solid #ffcd00; }
  form select {
    font-size: 1.2rem;
    background-color: white;
    border: none;
    border-bottom: solid 2px #201c1c;
    margin-bottom: 15px; }
    form select:focus {
      outline: none; }

.formStOne {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; }
  .formStOne .form__item {
    margin-right: 25px; }

@media screen and (max-width: 480px) {
  .formStOne {
    justify-content: space-evenly; } }

.formStTwo {
  justify-content: center; }
  .formStTwo .form__item {
    display: block;
    width: 100%; }
    .formStTwo .form__item input {
      justify-self: center; }

.externalForm {
  display: flex;
  justify-content: center; }
  .externalForm .externalForm__content {
    max-width: 500px;
    padding: 20px; }
    .externalForm .externalForm__content .externalForm__header {
      border-bottom: solid 1px #4c5151; }
      .externalForm .externalForm__content .externalForm__header h4 {
        margin-bottom: 25px; }
    .externalForm .externalForm__content .externalForm__body {
      margin-top: 20px;
      max-height: 410px; }
    .externalForm .externalForm__content .externalForm__footer {
      display: flex;
      justify-content: end;
      margin-top: 25px;
      border-top: 1px solid #4c5151; }

@media screen and (max-width: 768px) {
  .externalForm .externalForm__content .externalForm__body {
    max-height: 310px; } }

@media screen and (max-width: 320px) {
  .externalForm .externalForm__content .externalForm__body {
    max-height: 250px; }
    .externalForm .externalForm__content .externalForm__body input, .externalForm .externalForm__content .externalForm__body textarea, .externalForm .externalForm__content .externalForm__body select {
      max-width: 90%; }
  .externalForm .externalForm__content .externalForm__footer {
    flex-direction: column-reverse; } }

.appBodyContent {
  padding: 20px; }

@media screen and (max-width: 768px) {
  .appBodyContent {
    padding: 10px;
    padding-top: 5%; } }

.tableContainer {
  max-width: 100%;
  max-height: 400px;
  overflow: scroll; }
  .tableContainer table thead {
    position: sticky;
    top: 0; }
    .tableContainer table thead tr th {
      min-width: 200px;
      text-align: center; }
  .tableContainer table tbody tr td {
    text-align: center; }
  .tableContainer table tbody tr .horizontal {
    display: flex; }

@media screen and (max-width: 768px) {
  .tableContainer {
    max-height: 350px; } }

@media screen and (max-width: 576px) {
  .tableContainer {
    max-height: 300px; } }

.organizeStart {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start; }
  .organizeStart .organizeItem {
    max-width: 600px;
    margin-right: 50px; }

.organizeCenter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .organizeCenter .organizeItem {
    max-width: 600px;
    margin-right: 50px; }

@media screen and (max-width: 768px) {
  .organizeStart {
    justify-content: center; }
    .organizeStart .organizeItem {
      width: 100%; } }

/*Views*/
.formsContainer {
  display: flex;
  flex-direction: column;
  align-items: center; }

.userLog {
  width: 80%; }
  .userLog form {
    border-top: 50px solid #E9BB00; }
    .userLog form .userLog__formImg {
      grid-area: userLog__formImg; }
      .userLog form .userLog__formImg img {
        max-width: 100%;
        height: 100%; }
    .userLog form .userLog__formData {
      grid-area: userLog__formData;
      display: flex;
      flex-direction: column;
      padding: 30px; }
      .userLog form .userLog__formData img {
        max-width: 150px;
        align-self: center; }

.userReg {
  width: 80%; }
  .userReg form {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, auto);
    grid-template-areas: "userReg__formImg        userReg__formData"; }
    .userReg form .userReg__formImg {
      grid-area: userReg__formImg; }
      .userReg form .userReg__formImg img {
        max-width: 100%;
        height: 100%; }
    .userReg form .userReg__formData {
      grid-area: userReg__formData;
      display: flex;
      flex-direction: column;
      padding: 50px; }
      .userReg form .userReg__formData img {
        max-width: 150px;
        align-self: center; }

@media screen and (max-width: 768px) {
  .userLog form {
    grid-template-columns: 1fr;
    grid-template-areas: "userLog__formImg"         "userLog__formData"; }
  .userLog .userLog__formImg img {
    display: none; }
  .userReg form {
    grid-template-columns: 1fr;
    grid-template-areas: "userReg__formImg"         "userReg__formData"; }
  .userReg .userReg__formImg img {
    display: none; } }

@media screen and (max-width: 320px) {
  .userLog, .userReg {
    width: 90%; } }

.fitrosInventario {
  padding: 50px; }
  .fitrosInventario .filtrosInventario__form--usuarios {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start; }
    .fitrosInventario .filtrosInventario__form--usuarios div {
      margin-right: 50px; }
  .fitrosInventario .filtrosInventario__form--equipos {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start; }
    .fitrosInventario .filtrosInventario__form--equipos div {
      margin-right: 50px; }
    .fitrosInventario .filtrosInventario__form--equipos .equipoPrecio {
      padding: 30px;
      display: flex;
      flex-direction: row; }
      .fitrosInventario .filtrosInventario__form--equipos .equipoPrecio h6 {
        display: block; }
  .fitrosInventario .filtrosInventario__form--fechas {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center; }
    .fitrosInventario .filtrosInventario__form--fechas div {
      padding: 50px;
      margin-right: 50px; }