* {
    box-sizing: border-box;
}

:root {
    --header-color: #111722;
    --base-color: #283c5a;
    --offwhite: #fff;
    --grey: #555454;
    --base-line-height: 1.4rem;
    /* --page-width: 1280px; */
    --skyblue-50: #f0f9ff;
    --skyblue-100: #e0f2fe;
    --skyblue-200: #bae6fd;
    --skyblue-400: #38bdf8;
    --skyblue-700: #0369a1;
    --skyblue-900: #0c4a6e;
    --red-100: #fff8f8;
    --red-200: #f3a7a7;
    --red-400: #f87171;
    --red-700: #b91c1c;
    --red-900: #7f1d1d;
    --base-border-radius: 4px;
    --base-padding: 6px 8px;
    --base-border: 1px solid #ededed;
    --base-font-size: 16px;
    --small-font: 13px;
    --base-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  }


  body {
    font-family: "Inter", "Sans-serif";
    font-size: var(--base-font-size);
    color: var(--base-color);
    margin: 0;
    padding: 0;
    background: var(--offwhite);
  }

  body {
    font-family: "Inter", "Sans-serif";
    font-size: var(--base-font-size);
    color: var(--base-color);
    margin: 0;
    padding: 0;
    background: var(--offwhite);
  }


h1 {
    font-size: 2.4rem;
    font-weight: bold;
}
/* Layouts */


/* NAVBAR  */
  
nav {
    border: var(--base-border);
    background: #fff;
    height: 100vh;
    width: 240px;
    position: fixed;
    float: left;
  }
  
  .nav-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    margin: auto;
    max-width: var(--page-width);
  }
  
  .nav-container a {
    padding: 8px 12px;
    height: 100%;
    color: var(--base-color);
    text-decoration: none;
  }
  
  .nav-logo,
  .nav-settings,
  .nav-toggle,
  .nav-links {
    padding: 10px;
    display: flex;
  }
  .nav-logo {
    border-bottom: var(--base-border);
    font-weight: 600;
  }
  
  .nav-settings,
  .nav-toggle {
    justify-content: flex-start;
    margin-top: auto;
  }
  
  .nav-toggle {
    display: none;
  }
  
  .nav-toggle:hover {
    cursor: pointer;
  }
  
 
  .nav-links {
    justify-content: space-evenly;
    text-align: left;
    flex-direction: column;
  }
  
  .nav-links a {
    /* transition: 0.4s; */
    border: 1px solid transparent;
    border-radius: var(--base-border-radius);
    text-decoration: none;
    color: var(--base-color);
  }
  
  .nav-links a:hover, .active {
    background: var(--offwhite);
  }

  .active {
    font-weight:600;
  }


  .container-fluid{
    max-width: var(--page-width);
    padding-top:20px;
    padding-left: 260px;
  }

  input[type="text"] {
    font-size: 14px;
  }
  


  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .hide-menu {
    opacity: 0;
    visibility: hidden;
    /* transition: opacity 0.4s ease-out, visibility 0.4s ease-out 0.4s; */
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  .container {
    max-width: var(--page-width);
    margin: auto;
  }

  .hidden {
    display: none;
  }
  

/* Forms */

label {
    margin-bottom: 4px;
    display:block;
    font-weight: 500;
    font-size: 0.9rem;
}



.help-text {
    font-size:0.8rem;
    display:block;
    margin-top:4px;
}

/* Buttons */

/* CSS */
button {
    border: var(--base-border);
    color: var(--base-color);
    border-radius: var(--base-border-radius);
    padding: 10px 12px;
    background: white;
    font-size: var(--small-font);
    font-weight: 500;
    line-height: var(--small-font);
    /* transition: 0.4s; */
  }
  
  button:hover {
    background: #ededed;
  }
  
  .skyblue-button {
    background: var(--skyblue-50);
    border-color: var(--skyblue-200);
    color: var(--skyblue-700);
  }
  
  .skyblue-button:hover {
    background: var(--skyblue-400);
    border-color: var(--skyblue-400);
    color: var(--skyblue-100);
  }
  
  .red-button {
    background: var(--red-100);
    border-color: var(--red-200);
    color: var(--red-700);
  }
  
  .red-button:hover {
    background: var(--red-400);
    border-color: var(--red-400);
    color: var(--red-100);
  }

  .badge {
    font-size:0.8rem;
    font-weight:400;
  }
  
  hr {
    border-top: 1px solid var(--grey);
  }
  
  .separator {
    border-top: 1px solid #aaa;
  }
  
  .scroll-container {
    overflow: auto;
    max-height:60%;
  }

  
  /* Tables */
  
  .table-wrapper {
    border-radius: var(--base-border-radius);
    border: 2px solid #dddddd;
    overflow: auto;
  }
  
  table {
    text-align: left;
    border-radius: var(--base-border-radius);
    font-size: var(--small-font);
    /* border-collapse: collapse; */
    width: 100%;
    background: #fff;
  }
  
  thead {
    background: var(--offwhite);
    border-radius: 4px 4px 0px 0px;
  }
  
  tr {
    border-bottom: var(--base-border);
  }

  .no-bottom-border {
    border-bottom: none !important; /* !important may be needed to override other styles */
  }
  
  
  th {
    font-weight: 600;
    background: #f0f0f0;
  }
  
  th,
  td {
    padding: 12px 10px;
    /* overflow: hidden; */
    vertical-align: middle;
    color:#283c5a;
  }


/* promotions */
.promo-details {
    font-size: 14px;
    background: #f7fdfd;
    font-weight: bold;
    color: #009cde;
    padding: 8px;
    border: 1px solid #009cde30;
    text-align: left;
    border-radius: 4px;
}

.promo-details p {
    padding: 6px 0px;
    font-weight: 400;
    color: #042354;
    font-size: 14px;
    margin-bottom: 0;
}

/* image widget */
.awo-image-widget {
    width:100%;
    height:70px;
  background:url('https://res.cloudinary.com/db2okldfm/image/upload/v1697701618/AWO/-Generic_-_Product_card_bg_x_1600_x_900_1_trlqxj.svg');
    background-position:center;
    background-size:cover;
    background-repeat:none;
    color:white;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:15px;
    border-radius:4px;
    flex-direction:column;
  }
  
  .awo-image-widget-summary {
    font-size:16px;
    margin-bottom:4px;
    font-weight:600;
    display:block;
  }
  
  .awo-image-widget-detail {
    font-size:14px;
    font-weight:400;
    display:block;
  }

  .active-promo {
    outline:3px solid #009bde;
    transition:0.2s ease-in;
  }

  .promo-selector:hover {
    cursor:pointer;
    transition:0.2s ease-in;
  }

  .inactive-overlay {
    position: absolute;
    transition:0.2s ease-in;
    width:100%;
    background:#000000b3;
    left:0;
    z-index:1;
    border-radius: 6px;
  }

  .inactive-overlay > .card-header > .promo-details {
    background:#000000b3;
    color:black;
  }

  .inactive-overlay > .card-header > .awo-image-widget {
    background:#000000b3;
    color:black!important;
  }

.money-off-section {
    display: none;
}


@media (max-width: 980px) {
    nav {
      height: auto;
      width: 100%;
    }
    .nav-container {
      flex-direction: row;
    }
    .nav-logo {
      flex: 2;
      font-weight: 700;
      border-bottom: none;
    }
    .nav-links,
    .nav-settings {
      display: none;
    }
    .nav-links, .nav-logo, .nav-settings {
      padding-left:0px;
      padding-right:0px;
    }
    .nav-toggle {
      display: flex;
    }
    .container-fluid,
    .container {
      padding: 80px 15px;
    }
    .nav-settings,
    .nav-toggle {
      justify-content: flex-end;
      border-left: var(--base-border);
    }
    .show-menu {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: left;
      z-index: 100;
      padding: 8px;
      position: absolute;
      left: 0;
      top: 57px;
      background: #fff;
      border-top: 1px solid #ededed;
      border-bottom: 1px solid #ededed;
      width: 100%;
      opacity: 1;
      visibility: visible;
      animation: fadeIn 0.2s ease-in;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }
    nav {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }
    input[type="text"], .form-control {
      font-size: 16px;
    }
    #awo-comp-image {
      width:150px;
    }
  }


  /* Update products modal */
  .product-update-modal {
    display: none;
  }
  
  
  .product-update-modal.show {
    display: flex!important;
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: var(--base-box-shadow);
    left: 0;
    justify-content: center;
    padding: 20px;
  }