@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');


:root {
    --bg-color: #FFF;
    --color: #000;
    --primarycolor: #004584;
    --secundarycolor: #FFC628;
}

header {
  margin-bottom: 3em;
}

body {
    font-family: "inter", sans-serif;
    font-size: 14px;
    background-color: var(--bg-color);
    color: var(--color);
}

h1 {
    font-family: "PT+Serif", sans-serif;
    font-size: 3em;
}

a {
  text-decoration: none;
  color: var(--primarycolor);
  transition: all 0.5s ease-out;
}

a:hover {
  color: var(--secundarycolor);
  transition: all 0.5s ease;
}

.icon-header {
  width: 90px;
}

.row-neworder {
  margin-top: 8em;
}

input {
    font-family: "Anton+SC", sans-serif;
    border-radius: 1rem!important;
}

.loginForm > input {
    background-color: #D9D9D9;
}

.loginForm > input[type="submit"] {
    background-color: #004584;
    color: #fff;
    padding: 0.2em;
    font-size: 2.5em;
    transition: all 0.5s ease-out;
}

.loginForm > input[type="submit"]:hover {
    background-color: #FFC628;
    color: #004584;
    font-size: 2.5em;
    transition: all 0.5s ease;
}

.loginForm > a {
    color: var(--color);
    text-decoration: none;
    transition: all 0.5s ease-out;
}

.loginForm > a:hover {
    color: #FFC628;
    text-decoration: none;
    transition: all 0.5s ease;
}

/* Form ordername */
/* Weight in part */
.formOrdername #ordername, .formWeightIn #weight, .formWeightIn #weightin, .formWeightIn #weightout, .formWeightIn #deduction, .formWeightIn #subweight, .formWeightIn #comment, .formProduct #productname, .formProduct #comment {
    padding: 1em 0.3em 1em 0.3em!important; 
    line-height: 10em!important;
    font-size: 6em;
    background-color: #FFF;
    background-image: unset!important;
    border: 2px solid #004584;
}

.row-weightoption, .row-totalweight, .row-weightin, .row-deduction {
    margin-top: 1em;
}

/* Default buttons and styling */

.col-download, .col-upload{
    border-radius: 2em;
    margin: 0.5em;
    background-color: #FFC628;
    color: #ffffff;
    text-decoration: none; 
    padding: 1em;
    cursor: pointer;
    transition: all 0.5s ease-out; 
  }

  .col-save, .col-reset, .col-cancel, .col-comment, .col-deduction {
    border-radius: 2em;
    margin: 0.5em;
    color: #ffffff;
    text-decoration: none; 
    padding: 1em;
    cursor: pointer;
    transition: all 0.5s ease-out;
    align-items: center;
    justify-content: center;
    height: 10em;
    width: 10em;
  }

  .col-save {
    background-color:#54cf43;
  }

  .col-reset{
    background-color:#f39a26;
  }

  .col-cancel {
    background-color:#f60b0b;
  }

  .col-comment {
    background-color: #004584;
  }

  .col-deduction {
    background-color: #004584;
  }

  .col-download:hover, .col-upload:hover {
    background-color: #004584;
    transition: all 0.5s ease;
  }

  .col-save:hover {
    background-color: #108400;
    transition: all 0.5s ease;
  }
  .col-reset:hover {
    background-color: #a56005;
    transition: all 0.5s ease;
  }

  .col-cancel:hover {
    background-color: #8d0808;
    transition: all 0.5s ease;
  }

  .col-comment:hover {
    background-color: #FFC628;
    transition: all 0.5s ease;
  }

  .col-deduction:hover {
    background-color: #FFC628;
    transition: all 0.5s ease;
  }

  .col-download .icon-download, .col-upload .icon-upload {
    float: left;
    margin-right: 1em;
  }

  .col-download span,  .col-upload span {
    font-weight: 700;
    font-size: 2.4em;
  }

.icon-download, .icon-upload, .icon-save, .icon-cancel, .icon-reset, .icon-comment, .icon-deduction {
    width: 8em;
}

.icon-large {
  width:100%;
}

/* Styling for the keyboard plug-in */

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 2.5em!important;
    color: #004584!important;
}

/* Categories */

.categories-product-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  width: 100%;
  
}

.category-container {
  position: relative;
}

.row-products {
  margin-bottom: 2em;
}

.categories-product {
  margin: 1em;
  border: 3px solid #004584;
  color: #004584;
  border-radius: 2em; 
  cursor: pointer;
  padding-top: 2em;
  transition: all 0.5s ease-out;
}

.categories-product:hover, .categories-add-product:hover {
    background-color: #FFC628;
    transition: all 0.5s ease;
}

.categories-product a:hover {
  color: #004584;
  transition: all 0.5s ease;
}

.categories-add-product {
  border: 3px solid #004584;
  color: #004584;
  border-radius: 2em; 
  cursor: pointer;
  padding-top: 2em;
  transition: all 0.5s ease-out;
}


.product-comment {
  font-size: 1em;
  font-style: italic;
}