@media (min-width: 350px) {
  html {
    font-size: 16px;
    font-family: "Inria Sans", sans-serif !important;
  }
  html body {
    background-color: #f3f3f3;
  }
  html body .controls {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    justify-content: space-evenly;
    padding: 0.4rem;
    box-sizing: border-box;
    gap: 1rem;
  }
  html body .controls .option-btn {
    all: unset;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    bottom: 0.5rem;
    left: 0.5rem;
    height: 3rem;
    width: 3rem;
    padding: 0;
    font-size: 2rem;
    background: #f3f3f3;
    box-shadow: rgb(50, 50, 85) 0px 0px 6px;
    border-radius: 50px;
    color: #f3f3f3;
  }
  html body .controls .option-btn.--add {
    background: #00b8ff;
  }
  html body .controls .option-btn.--save {
    background: #00a900;
    font-size: 1.8rem;
  }
  html body .controls .option-btn.--edit {
    font-size: 1.6rem;
    background: #376bff;
  }
  html body .controls .option-btn.--back {
    font-size: 1.6rem;
    background: #4a4a4a;
  }
  html body .controls .option-btn.--delete {
    font-size: 1.6rem;
    margin-right: 1px;
    background: #ff4444;
  }
  html body .controls .option-btn.--delete button {
    all: unset;
    color: #f3f3f3;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  html body .controls .search-input-cont {
    display: flex;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    bottom: 0.5rem;
    right: 0.5rem;
    background: #f3f3f3;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    box-shadow: rgb(50, 50, 85) 0px 0px 6px;
    font-size: 1.5rem;
    transition: all 0.1s ease-in-out;
  }
  html body .controls .search-input-cont.show {
    width: 75%;
    cursor: unset;
  }
  html body .controls .search-input-cont.show .fa-magnifying-glass {
    display: none;
  }
  html body .controls .search-input-cont.show .fa-xmark {
    display: block;
    position: unset;
    cursor: pointer;
  }
  html body .controls .search-input-cont.show #search-input {
    width: 93%;
  }
  html body .controls .search-input-cont i {
    position: absolute;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    font-size: 1.7rem;
  }
  html body .controls .search-input-cont .fa-xmark {
    display: none;
  }
  html body .controls .search-input-cont #search-input {
    all: unset;
    display: block;
    background: #f3f3f3;
    box-shadow: inset 0 0 4px black;
    text-align: center;
    line-height: 2rem;
    border-radius: 50px;
    height: 2rem;
    width: 0%;
    box-sizing: border-box;
    font-size: 1rem;
    margin-left: 0.8rem;
    transition: box-shadow 0.1s ease-in-out;
  }
  html body .controls .search-input-cont #search-input:focus {
    box-shadow: inset 0 0 6px 2px black;
    font-weight: bold;
  }
  html body .controls .search-input-cont #search-input:focus::placeholder {
    color: transparent;
  }
  html body .controls .search-input-cont #search-input::-webkit-search-cancel-button {
    display: none;
  }
  html body #shoes-list {
    all: unset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5rem 0.7rem 50% 0.7rem;
  }
  html body #shoes-list .shoes-item {
    all: unset;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: calc(50% - 0.8rem);
    margin: 0.4rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: width 0.3s ease-in-out;
  }
  html body #shoes-list .shoes-item .shoes-size {
    font-size: 1.3rem;
  }
  html body #shoes-list .shoes-item .img-link {
    display: flex;
    justify-content: center;
    background-color: #e5e5e5;
    width: 100%;
    height: 85px;
    position: relative;
  }
  html body #shoes-list .shoes-item .img-link::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.6392156863);
    position: absolute;
  }
  html body #shoes-list .shoes-item .img-link .shoes-img {
    display: unset;
    margin: 0;
    width: 100%;
    object-fit: cover;
    animation: 5s ease-in-out infinite alternate move;
  }
  @keyframes move {
    from {
      object-position: 0 -5rem;
    }
    to {
      object-position: 0 -10rem;
    }
  }
  html body #shoes-list .shoes-item .shoes-name {
    flex: 1;
    margin: 0.2rem;
    word-break: break-all;
    display: flex;
    align-items: center;
  }
  html body #shoes-list .shoes-item .shoes-controls {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.3rem;
  }
  html body #shoes-list .shoes-item .shoes-controls a {
    all: unset;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 50px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 1.4rem;
  }
  html body #shoes-list .shoes-item .shoes-controls a i {
    color: #f3f3f3;
  }
  html body #shoes-list .shoes-item .shoes-controls .shoes-controls-edit {
    background-color: #376bff;
  }
  html body #shoes-list .shoes-item .shoes-controls .shoes-controls-plus {
    background-color: rgb(0, 215, 53);
  }
  html body #shoes-list .shoes-item .shoes-controls .shoes-controls-minus {
    background-color: rgb(231, 0, 0);
  }
  html body #shoes-list .shoes-item .shoes-controls a, html body #shoes-list .shoes-item .shoes-controls i {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body #shoes-list.--show .shoes-item {
    width: 29%;
    flex: unset;
  }
  html body #shoes-list.--show .shoes-item .shoes-controls a {
    font-size: 0.7rem;
    width: 1.4rem;
    height: 1.4rem;
  }
  html body form {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 2rem;
    margin: auto;
    text-align: center;
    gap: 1rem;
    margin-bottom: 50%;
    align-items: center;
  }
  html body form label {
    margin-bottom: 0.3rem;
  }
  html body form input {
    all: unset;
    height: 2rem;
    border-radius: 0.7rem;
    box-shadow: inset 0 0 7px #adadad, 0 0 2px black;
    max-width: 400px;
  }
  html body form input#shoe_imageFile, html body form input#shoe_edit_imageFile {
    min-width: 326px;
  }
  html body form input:focus {
    box-shadow: 0 0 7px black;
  }
  html body form #article_imageFile,
  html body form #shoe_imageFile,
  html body form #shoe_edit_imageFile {
    cursor: pointer;
    height: unset;
  }
  html body form #article_imageFile::file-selector-button,
  html body form #shoe_imageFile::file-selector-button,
  html body form #shoe_edit_imageFile::file-selector-button {
    all: unset;
    border-radius: 100px;
    color: #f3f3f3;
    background: grey;
    margin: 0.5rem;
    padding: 1rem;
  }
  html body form[name=shoe_edit] .remove-sizes {
    align-self: flex-end;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    gap: 0.5rem;
    scale: 0.9;
  }
  html body form[name=shoe_edit] .form-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }
  html body form[name=shoe_edit] .form-sizes .shoe-size_quantity {
    width: 43%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 150px;
  }
  html body form[name=shoe_edit] .form-sizes .shoe-size_quantity .delete-size-btn {
    all: unset;
    border-radius: 7px;
    width: 2rem;
    align-self: center;
    height: 1.3rem;
    background: #ff4444;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f3f3f3;
  }
  html body .form-btn {
    align-self: center;
    border-radius: 0.7rem;
    background: #00db00;
    color: #F3F3F3;
    border: unset;
    box-shadow: 0 0 4px #006a00, inset 0 -8px 7px #00a900;
    height: 2rem;
    text-shadow: 0 0 6px BLACK;
    cursor: pointer;
  }
  html body .form-btn:active {
    box-shadow: 0 0 4px #006a00, inset 0 10px 7px #00a900;
  }
  html body .form-btn.--delete {
    background: #df0000;
    box-shadow: 0 0 4px #c00000, inset 0 -8px 7px #c00000;
  }
  html body .form-btn.--delete:active {
    box-shadow: 0 0 4px #c00000, inset 0 10px 7px #c00000;
  }
  html body #sizeForm {
    position: fixed;
    top: 40%;
    left: 2rem;
    right: 2rem;
    margin: auto;
    background: rgba(0, 0, 0, 0.2196078431);
    height: 200px;
    bottom: 0;
    backdrop-filter: blur(3px);
    border-radius: 2rem;
  }
  html body #sizeForm .sizeForm-form {
    margin: auto;
    background: #f3f3f3;
    border-radius: 1rem;
    box-shadow: 0 0px 40px black;
  }
  html body #imagePreview {
    display: block;
    min-height: 100px;
    background: grey;
    min-width: 100px;
    max-height: 150px;
    max-width: 400px;
    margin: auto;
  }
  html body .shoes-img {
    display: block;
    margin: 1rem auto;
    max-width: 400px;
    max-height: 150px;
  }
  html body h1,
  html body h3,
  html body h5 {
    margin: 0.3rem 0;
    text-align: center;
  }
}
@media (min-width: 500px) {
  html body #shoes-list .shoes-item {
    flex: calc(35% - 2rem);
  }
}
@media (min-width: 900px) {
  html body #shoes-list .shoes-item {
    flex: calc(25% - 2rem);
  }
}
@media (min-width: 1200px) {
  html body #shoes-list .shoes-item {
    flex: calc(20% - 2rem);
  }
}
@media (min-width: 1600px) {
  html body #shoes-list .shoes-item {
    flex: calc(15% - 2rem);
  }
}
.sf-toolbar {
  display: none !important;
}

.highlight {
  background-color: rgb(167, 255, 236);
  font-weight: bold;
}

.hidden {
  display: none !important;
}

.displayFlex {
  display: flex;
}

/*# sourceMappingURL=app.output.css.map */