/* CSS LOG IN */
  
  input[type=email]:-webkit-autofill, input[type=text]:-webkit-autofill, input[type=number]:-webkit-autofill, .general-select, .input[type=password]:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill{
    background-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  .global-header{
    display: flex;
    position: fixed;
    background-color: rgb(106, 90, 205);
    color: ghostwhite;
    column-gap: 12px;

    justify-content: space-between;
    align-items: center;
    padding: 0 60px 0 60px;

    z-index: 5;
    top: 0; left: 0; right: 0;
    height: 50px;
  }

  .header{
    color: rgb(106, 90, 205);
  }

  .global-content{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: auto;

    margin-top: 55px;
    margin-bottom: 25px;

    background-color: transparent; /* Default: transparent; */

    padding-left: 12px;
    padding-right: 12px;
  }

  .triangle-login{
    width: 0;
    height: 0;
    border: solid 16px;
    border-color: transparent transparent #f4f6f7 transparent;
  }

  .rot{
    transform: rotate(-22.5deg);
  }

  .login-square{
    width: 100%;
    max-width: 400px;
    min-width: 300px;
    border-radius: 6px;

    height: 100%;
    padding: 12px;
    background-color: #f4f6f7;
    box-shadow: 0px 8px 16px -10px black;
  }

  .form-login{
    background-color: white;
    padding: 12px;
    border-radius: 6px;
  }

  label{
    font-family: 'Quicksand', sans-serif;
    color: rgb(106, 90, 205);
  }

  input, select, .general-select{
    background-color: white;
    width: 100%;
    height: 40px;
    transition: 0.5s;
  }

  .filter-by-categories{
    padding: 0;
    height: 30px;
  }

  select:hover{cursor: pointer;}

  input[type=email], input[type=password], input[type=text], input[type=number],  .general-select, input[type=datetime-local], textarea{
    border-left: 6px solid rgb(106, 90, 205);
    background-color: white !important;
  }

  input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, .general-select:focus, input[type=text]:focus, input[type=datetime-local]:focus, textarea:focus{
    box-shadow: 0px 8px 16px -12px black;
    background-color: white;
  }

  input[type=email]:valid, input[type=password]:valid, .general-select:valid, input[type=number]:valid, input[type=text]:valid, input[type=datetime-local]:valid, textarea:valid{
    border-left: 6px solid #2ecc71; /* Verde - Green */
    box-shadow: 0px 8px 16px -12px black;
    background-color: white;
  }

  input[type=submit]{
    background-color: darkorange;
    font-weight: bold;
    color: white;
  }

  input[type=submit]:hover{
    cursor: pointer;
    background-color: rgb(106, 90, 205);
  }

  footer{
    position: fixed;
    bottom: 7px;
    right: 7px;
    color: grey;
  }

/* DASHBOARD CSS */
  option, select{
    font-size: 1rem;
  }

  .opt-head{
    color: rgb(106, 90, 205);
  }

  .item-nav{
    color: white;
  } .item-nav .fa-solid{
    font-size: 1rem;
  } .item-nav:hover{
    cursor: pointer;
  }

  .div-statistics{
    display: grid;
    width: 100%;

    margin-top: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    column-gap: 8px;

    background-color: transparent;
  }

  .div-statistics .item-statistics{
    display: flex;
    flex-direction: column;
    padding: 6px;

    justify-content: center;
    align-items: center;

    border-radius: 6px;
    color: white;
  }

  .div-statistics .item-statistics:nth-child(1){
    background-color: #2ecc71;
  }

  .div-statistics .item-statistics:nth-child(2){
    background-color: darkorange;
  }

  .div-statistics .item-statistics:nth-child(3){
    background-color: rgb(106, 90, 205);
  }

  .most-sale{
    background-color: #f4f6f7;
    text-align: center;

    margin-top: 10px;
    border-radius: 6px;
    padding: 12px;
    width: 100%;
    color: grey;
  }

  .the-products{
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin-top: 10px;
    background-color: transparent;
    width: 100%;
  }

  .product-container{
    display: flex;
    justify-content: center;
    width: 100%;
    column-gap: 5px;

    border-radius: 6px;
  }

  .product-block{
    display: flex;
    position: relative;
    width: 100%;
    justify-content: space-between;
    align-items: center;

    border-radius: 6px;
    padding: 12px;
    padding-right: 30px;
    background-color: hotpink;
    color: white;
  } .product-container:nth-child(odd) .product-block{
    background-color: deeppink;
  }

  .sale-button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    background-color: darkorange;
    border-radius: 6px;
    color: white;
    width: 40px;

    transition: 0.5s;
  } .sale-button:hover{
    cursor: pointer;
    background-color: rgb(106, 90, 205);
  } .sale-button p{
    font-weight: 600;
  }

  .conteo-carrito, .conteo-carrito-apartados, .notif-in-apart{
    display: flex;

    justify-content: center;
    align-items: center;

    position: absolute;
    background-color: red;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 12px;
    text-align: center;
    font-weight: 800;
  } .conteo-carrito, .notif-in-apart{
    left: 10px;
    bottom: 15px;
  } .conteo-carrito-apartados{
    top: 0;
    right: 0;
  } .notif-in-apart{
    background-color: skyblue;
  }

  .modal-container{
    display: flex;
    position: relative;
    width: 100%;
    background-color: black;
  }

  .header-modal-carrito{
    position: sticky;
    top: 0;
    background-color: white;
    padding-top: 8px;
  }

  .modal-carrito{
    width: 100%;
    max-width: 500px;
    min-width: 200px;

    max-height: 320px;
    overflow-y: auto;

    top: -15px;
    right: 0;
    margin-left: 5px;

    position: absolute;
    z-index: 7;
    background-color: white;
    box-shadow: 0 2px 16px 0 black;
    padding: 12px;
    padding-top: 0;
    border-radius: 6px;

    color: #2c3e50;

    animation-name: appearModal;
    animation-duration: 0.3s;
  }


  @keyframes appearModal{
    from{
      transform: translateY(-10px);
      opacity: 0;
    } to{
      opacity: 1;
      transform: translateY(0px);
    }
  }



  .lista-carrito{
    flex-direction: column;
    align-items: unset;
    row-gap: 12px;
  }

  .item-carrito{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px dashed gray;
  } .item-carrito p{
    font-weight: 500;
    color: rgb(106, 90, 205);
  }

  .name-product{
    margin-right: 10px;
    word-break: break-word;
  }

  .div-botones-producto{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    row-gap: 5px;
  }

  .action-button, .add-cat-button{
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: center;

    border: none;
    background-color: darkorange;
    color: white;
    font-size: 16px;
    font-weight: 800;
    border-radius: 6px;

    transition: 0.5s;
  } .action-button:hover, .add-cat-button:hover{
    cursor: pointer;
    background-color: rgb(106, 90, 205);
  } .action-button:nth-child(1):hover{
    background-color: gray;
  } .add-cat-button:hover{
    background-color: gray;
  }

  .buttons-ticket-div{
    margin-top: 6px;
    display: flex;
    justify-content: right;
    column-gap: 5px;
  }

  .action-button-ticket{
    border: none;
    border-radius: 6px;
    padding: 5px;
    text-align: center;
    color: white;
    font-weight: 500;

    transition: 0.5s;
  } .action-button-ticket:nth-child(1){
    background-color: orangered;
  } .action-button-ticket:nth-child(2){
    background-color: #2ECC71;
  }.action-button-ticket:hover{
    cursor: pointer;
    font-weight: 700;
  }

  .modal-add-category, .modal-new-amount{
    display: flex;
    position: fixed;
    z-index: 8;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    top: 0;
    height: 100vh;
  }

  @keyframes appearCatModal{
    from{
      opacity: 0;
    } to{
      opacity: 1;
    }
  }

  .modal-categories, .modal-amount{
    background-color: white;
    position: absolute;
    z-index: 8;
    padding: 12px;
    border-radius: 6px;
    color: #2c3e50;
    box-shadow: 0 2px 16px 0 black;

    animation-name: appearCatModal;
    animation-duration: 0.5s;
  }

  .div-botones-categories, .div-botones-amount{
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
  }

  .cancel-add-category, .cancel-add-amount{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    width: 100%;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    background-color: red;
  } .cancel-add-category:hover, .cancel-add-amount:hover{
    cursor: pointer;
  }

  .input-search-sku, .input-empty-sku{
    position: fixed;
    top: 50px;
    border-bottom: 2px solid rgb(106, 90, 205);
    z-index: 4;
    padding-right: 30px;
    right: -200px;
    width: 200px;
    letter-spacing: 2px;
    transition: all 0.6s;
  }

  .input-empty-sku{
    top: 55px;
    padding: 0;
    text-align: center;
    width: 30px;
    height: 30px;
    background-color: white;
    font-weight: 700;
    border: none;
    color: grey;
  } .input-empty-sku:hover{
    cursor: pointer;
  }

  .desplegable-menu{
    position: fixed;
    right: -320px;
    top: 0px;
    width: 300px;
    padding: 12px;
    border-radius: 0 0 0 12px;
    background-color: rgb(106, 90, 205); /*rgb(106, 90, 205)*/
    color: white;                        /* white */
    box-shadow: 0 8px 16px 0 black;
    z-index: 10;

    transition: all 0.5s;
  }

  .profile-container{
    position: relative;

    border-bottom: 1px solid white;
    padding: 12px;
    width: 100%;
  }

  .options-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
  }

  .button-options-modal{
    width: 250px;
    padding: 6px;
    background-color: transparent;
    font-size: 1.125rem;
    text-align: right;
    border-radius: 6px;
    border: 1px solid transparent;
    color: white;

    transition: 0.5s;
  } .button-options-modal:hover{
    border-bottom: 1px solid white;
    cursor: pointer;
  }

  .close-options{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    background-color: rgb(106, 90, 205);
    color: white;
    border: none;

  } .close-options:hover{
    cursor: pointer;
  }

  .add-product-modal{
    position: absolute;

    width: 450px;
    padding-top: 12px;
    background-color: white;
    color: #2c3e50;
    border-radius: 6px;
    box-shadow: 0 8px 16px 0 black;
    top: -100%;

    transition: all 0.5s;
  }

  .modal-add-product{
    display: grid;
    padding: 12px;
    width: 450px;

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, auto);

    column-gap: 8px;
    row-gap: 8px;

    background-color: transparent;
  }

  .item-modal-add-product{
    display: flex;
    flex-direction: column;
  }

  .item-modal-add-product:nth-child(3){
    grid-column: 1 / 3;
  }

  .item-modal-add-product:nth-child(6){
    grid-column: 1 / 3;
  }

  .item-modal-add-product:nth-child(7){
    width: 100%;

    grid-column: 1 / 3;
    grid-row: 5 / 6;
  }.item-modal-add-product:nth-child(7) textarea{
    min-height: 150px;
    resize: none;
  }

  .item-modal-add-product:nth-child(8){
    grid-column: 1 / 3;

    flex-direction: row;
    column-gap: 8px;
  } .item-modal-add-product:nth-child(8) button{
    font-weight: 400;
    height: 20px;
    padding: 2px;
    width: 100%;
    border: none;
    color: white;

    transition: 0.3s;
  } .item-modal-add-product:nth-child(8) button{
    cursor: pointer;
  }

  .item-modal-add-product:nth-child(8) button:nth-child(1){
    background-color: red;
  }

  .item-modal-add-product:nth-child(8) button:nth-child(2){
    background-color: darkorange;
  } .item-modal-add-product:nth-child(8) button:nth-child(2):hover{
    background-color: rgb(106, 90, 205);
  }

  #desc-product-field{
    height: 100%;
  }


  /* Container de Apartados */

    .apart-separation{
      display: flex;
      position: relative;
      width: 100%;
      background-color: red;
      justify-content: center;

      margin-left: 12px;
      margin-right: 12px;
    }

    .close-apartado-modal{
      position: absolute;
      padding: 0;
      font-weight: bold;
      color: grey;
      border: none;
      background-color: transparent;
      width: 30px;
      height: 30px;
      top: 5px;
      right: 5px;
      font-size: 1.125rem;
    } .close-apartado-modal:hover{
      cursor: pointer;
    }

    .container-send-apartados{
      position: absolute;
      top: -524px;
      right: 0;

      width: 100%;
      max-width: 500px;
      min-width: 300px;

      background-color: ghostwhite;
      padding: 12px;
      color: rgb(106, 90, 205);
      border-radius: 6px;

      box-shadow: 0 8px 16px 0 black;
      z-index: 9;

      transition: all 0.3s;
    }

    .header-apartados{
      top: 0;
      position: sticky;
      padding-top: 12px;
      background-color: white;
    }

    .horizontal-line{
      border-color: rgb(106, 90, 205);
    }

    .data-information-client{
      display: grid;

      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);

      column-gap: 8px;
      row-gap: 8px;
    }

    .container-send{
      background-color: white;
      padding: 12px;
      border-radius: 6px;

      max-height: 200px;
      overflow-y: auto;
      padding-top: 0;
    }

    .lista-carrito-apartado{
      flex-direction: column;
      align-items: unset;
      row-gap: 12px;
    }

    .item-data-client:nth-child(3){
      grid-column: 1 / 3;
    }

    .form-container{
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      width: 85%;
      background-color: #f4f6f7;
      /*box-shadow: 0 2px 8px 0 black;*/
      border-radius: 6px;
      padding: 12px;
    }

    .form-header{
      color: rgb(106, 90, 205);
    }

    .form-edit{
      display: grid;

      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(7, auto);

      column-gap: 8px;
      row-gap: 8px;
    }

    .edit-product-button{
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background-color: transparent;
      border: none;
      color: white;
      font-size: 1rem;
    } .edit-product-button:hover{
      cursor: pointer;
    }

    .item-grid-edit{
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .item-grid-edit:nth-child(3), .item-grid-edit:nth-child(6), .item-grid-edit:nth-child(7){
      grid-column: 1 / 3;
    }

    .item-grid-edit:nth-child(7){
      grid-row: 5 / 7;
    }

    .item-grid-edit:nth-child(7) textarea{
      min-height: 150px;
      resize: none;
    }

    .save-edit{
      background-color: darkorange;
      padding: 6px;
      font-weight: bold;
      font-size: 0.875rem;
      border: none;
      color: white;

      transition: 0.3s;
      grid-column: 2 / 3;
    } .save-edit:hover{
      background-color: rgb(106, 90, 205);
      cursor: pointer;
    }

    .des-prod{
      width: 100%;
    }

    .float-message{
      display: flex;
      position: fixed;
      top: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 10;
    }

    .fModal{
      width: 350px;
      padding: 12px;
      border-radius: 6px;
      color: white;
      text-align: center;

      animation-name: in;
      animation-duration: 1s;
    }

    .success-modal{background-color: #2ecc71;}
    .errno-modal{background-color: red;}

    @keyframes in{
      from{
        opacity: 0;
      } to{
        opacity: 1;
      }
    }

    .fasicon{
      font-size: 3rem;
    }

/* CHANGE PASS CSS */

  .changePassButton{
    width: 100%;
    background-color: darkorange;
    font-weight: bold;
    color: white;
    text-align: center;

    height: 40px;
    transition: 0.5s;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
  }

  .changePassButton:hover{
    cursor: pointer;
    background-color: rgb(106, 90, 205);
  }

  .cancelButton{
    width: 100%;
    background-color: red;
    font-weight: bold;
    color: white;
    text-align: center;

    height: 40px;
    transition: 0.5s;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
  }

  .cancelButton:hover{
    cursor: pointer;
    background-color: darkred;
  }

  /* Modal de los Apartados */
  .block-apart{
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    max-height: 304px;
    overflow-x: hidden;
    overflow-y: auto;
  }

    .modalApartados{
      display: none;
      position: absolute;
      
      top: -425px;
      right: 0;

      height: auto;
      max-height: 407px;

      border: 1px solid rgb(106, 90, 205);
      flex-direction: column;

      align-items: center;
      width: 320px;
      padding: 12px;
      background-color: rgb(106, 90, 205);
      color: white;
      border-radius: 6px;
      box-shadow: 0 3px 10px 0 black;

      transition: all 1s;
      z-index: 12;
    }

    .close-modalApartado{
      position: absolute;
      top: 0;
      right: 0;

      background-color: transparent;
      border: none;
      color: white;

      

      width: 40px;
      height: 40px;

      font-size: 1.25rem;
      cursor: pointer;
    }

    .block-apart::-webkit-scrollbar{
      width: 4px;
      background-color: rgb(106, 90, 205);
      border-radius: 6px;
    }

    .block-apart::-webkit-scrollbar-thumb{
      background-color: whitesmoke;
      border-radius: 6px;
    }

    .window{
      position: relative;
      width: 300px;
      border-radius: 6px;
      height: 70px;
      border: none;
      background-color: white;
      overflow: hidden;
    
      color: grey;
    }

    .cintillo{
      display: grid;

      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, auto);

      transition: all 0.6s;
    }

    .info-client{
      display: flex;
      align-items: center;
      background-color: transparent;
      width: 300px;
      height: 70px;
      overflow: auto;
      padding-left: 8px;
    }

    .client-data{
      white-space: nowrap;
      font-size: 1rem;
      font-weight: 500;
    }

    .apart-data{
      position: relative;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, auto);
      background-color: transparent;
      width: 300px;
      height: 70px;
    }

    .numbers-data{
      display: flex;

      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 50px;
      overflow: auto;
      grid-row: 1;
      background-color: transparent;
    }

    .numbers-data:nth-child(1){
      grid-column: 1/2;
    } .numbers-data:nth-child(2){
      grid-column: 2/3;
    } .numbers-data:nth-child(3){
      grid-column: 3/4;
    }

    .numbers-data p{
      text-align: center;
      padding: 0;
      margin: 0;
      font-size: 0.875rem;
      font-weight: 500;
    }

    .saleButton{
      height: 20px;
      border: none;
      padding: 0;

      grid-row: 2;
      grid-column: 1 / 4;
      font-size: 0.875rem;
      font-weight: 600;

      transition: 0.3s;

      border-radius: 0 0 6px 6px;
    }

    .window:hover #cintillo{
      transform: translateX(-300px);
    }

    .saleButton{
      background-color: darkorange;
      color: white;
    }

    .saleButton:hover{
      background-color: gray;
      cursor: pointer;
    }

    .upload-photo{
      position: absolute;
      font-size: 1rem;
      right: 80px;
      bottom: 50px;
      width: 30px;
      height: 30px;
      padding: 0;
      z-index: 1;

      border-radius: 6px;
      border: none;
      background-color: darkorange;
      cursor: pointer;
      color: white;

      transition: all 0.3s;
    } .upload-photo:hover{
      background-color: rgb(106, 90, 205);
    }

    .close-photo-editor{
      position: absolute;
      font-size: 1rem;
      right: 0;
      top: 0;

      width: 30px;
      height: 30px;
      padding: 0;

      border-radius: 6px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      color: white;

      transition: all 0.3s;
    }


    /* Estilos de Subir Perfil */
      .file-input-wrapper {
        width: 100%;
        position: relative;
        overflow: hidden;
        display: inline-block;
      }

      .file-input-button {
        width: 100%;
        height: 40px;
        border: 2px dashed white;
        padding: 8px;
        background-color: transparent;
        cursor: pointer;
        border-radius: 2px;
        color: white;
      }

      .file-input {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
      }








































.errno{
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

@media screen and (max-width: 480px){
  .upload-photo{
    width: 25px;
    height: 25px;
    font-size: 0.75rem;

    right: 90px;
    bottom: 40px;
  }

  .success-modal, .errno-modal{
    width: 280px;
  }

  .form-container{
    width: 100%;
  }

  .modal-add-product, .add-product-modal{
    width: 350px;
  }

  .item-modal-add-product:nth-child(8) button{
    height: 30px;
  }

  .add-cat-button{
    position: absolute;
    right: 4px;
    top: 75px;
  }

  .photoProfile{
    width: 80px;
    height: 80px;
  }

  .button-options-modal{
    font-size: 1rem;
  }

  option, select{
    font-size: 0.875rem;
  }

  .global-header{
    padding: 0 20px 0 20px;
  }

  .div-botones-producto{
    flex-direction: column;
    flex-flow: column-reverse;
  }

  .modal-carrito{
    max-width: 300px;
  }

  .logo-enterprise{
    width: 114px;
    height: 114px;
  }

  h1{font-weight: 700; font-size: 1.5rem;} /* 32px */
  h2{font-weight: 600; font-size: 1.125rem;} /* 24px */
  h3, label, a{font-weight: 500; font-size: 1rem;} /* 18px */
  p {font-weight: 400; font-size: 0.875rem;} /* 16px */

  /*.imgSearch, .imgResend, .imgUpdate, .imgLog{
    width: 80px;
    height: 80px;
  }*/
}

@media screen and (max-height: 610px){
  .add-product-modal{
    height: 300px;
    overflow-y: auto;
  }
}

@media screen and (max-height: 470px){
  .desplegable-menu{
    overflow: auto;
    height: 300px;
  }
}