/* Navbar container */
@font-face {
  font-family:"cubano";
  src:
    local("Cubano"),
    url("assets/Cubano.ttf") format(truetype);
}
body {
  font-family:"cubano"!important;
  font-weight:400;
  border-color:#333;
}
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: "cubano";
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    font-weight:400;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: "cubano"; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .widget-btn {
    background-color:#333;
    color:#fff;
    font-size:16px;
    border:1px solid #333;
    margin-top:5px;
    margin-bottom:5px;
    font-family:"cubano";
    padding:5px;
  }
  .widget-btn:hover {
    filter:brightness(90%);
    cursor: url(hand.cur), pointer;    
  }
  .widget-btn-oos {
    background-color:#fff;
    color:#333;
    font-size:12.7px;
    border:1px solid rgb(126, 126, 126);
    margin-top:5px;
    margin-bottom:5px;
    font-family:"cubano";
    padding:5px;
    filter:brightness(70%);
  }
  .description, .API-header {
    margin-top:5px;
  }
  #api-widget {
    transition:all 0.5s;
    max-height:400px;
    overflow-y:scroll;
    margin-top:5px;
    display:none;
    background-color:#fff;
    box-shadow: 0px 0px 8px 3px #ddd, 0px 0px 1px 1px #fff;
    width:400px;
    padding:2%;
    align-items:center;
    justify-content:center;
  }
  #retailer {
    display:flex;
    flex-flow:row nowrap;
    border-bottom:1px solid #000;
    padding:2px;
    margin-top:3px;
    margin-bottom:3px;
    justify-content:space-around;
  }
  #retailer img {
    object-fit:contain;
    width: 120px;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #retailer p {
    display:flex;
    justify-content:center;
    align-items:center;
    width:70px;
  }
  #retailer a {
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #header {
    font-size:30px;
    font-weight:400;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #main.content {
    margin-top:5px;
    margin-bottom:5px;
    justify-content:center;
    align-items:center;
    display:flex;
    position:static;
    flex-flow:column;
  }
  #button1 {
    background-color:#333;
    color:#fff;
    font-size:16px;
    border-color:#333;
    margin-top:5px;
    font-family:"cubano";
    padding:5px;
    height:100%;
    width:11%;
    cursor: url(hand.cur), pointer;
  }
  #button1:hover {
    filter:brightness(90%);
  }
  #header.description {
    display:flex;
    flex-flow:column;
  }
  .description {
    margin-top:5px;
    margin-bottom:5px;
    justify-content:center;
    align-items:center;
    display:flex;
    position:static;
    flex-flow:column;
    font-size:30px;
    font-weight:400;
  }
  .tabs {
    display:flex;
    flex-flow:row;
    justify-content:space-around;
    width:400px;
    order:0;
    margin-top:10px;
    height:50px;
    font-family:"cubano";
  }
  .tabs .tab {
    background-color:#fff;
    color:#000;
    font-size:16px;
    border-color:#000;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
    margin-right:5px;
    justify-content:center;
    width:40%;
    box-shadow: 0px 0px 11px 4px #ddd, 2px 2px #fff;
    
  }
  .tab:focus {
    background-color:#000;
    color:#fff;
    font-size:16px;
    border-color:#000;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
    margin-right:5px;
    justify-content:center;
    width:40%;
    box-shadow:unset;
    transition:box-shadow ease-in-out 0.5s;
  }
  /*.tab:inactive {
    background-color:#fff;
    color:#000;
    font-size:16px;
    border-color:#000;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
    margin-right:5px;
    justify-content:center;
    width:40%;
    box-shadow: 0px 0px 11px 4px #ddd, 2px 2px #fff;
    transition:box-shadow ease-in-out 0.5s;
  }*/
  #local-retailer {
    display:flex;
    flex-flow:row nowrap;
    border-bottom:1px solid #000;
    padding:2px;
    margin-top:3px;
    margin-bottom:3px;
    justify-content:space-around;
    font-size:0.9rem;
  }
  #local-retailer img {
    object-fit:contain;
    height:80px;
    width: 120px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:3px;
  }
  #local-retailer p {
    display:flex;
    justify-content:center;
    align-items:center;
    width:70px;
  }
  .address {
    font-size:0.6rem;
    flex-flow:column-reverse;
  }
  .address h1 {
    font-size:0.6rem;
    align-self:baseline;
    justify-self:left;
  }
  #local-retailer a {
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .wtb-inpage-embed {
    width:85%;
  }