/* TODO: Use Sass to override Bootstrap 5 styles more easily */
@font-face {
  font-family: 'Hipsterish';
  src: url("/static/font/hipsterishfontnormal-webfont.woff2") format("woff2"), url("/static/font/hipsterishfontnormal-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

html,body {
  height: 100%;
  min-height: 100%;
  }

:root {
  --hipster-font-family: "Hipsterish", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
  --regular-font-family: "Open Sans", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
  --neucha-font-family: "Neucha",'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
}

th {
  --bs-primary-rgb: rgba(15, 15, 11,1);
}

.btn-primary {
  --bs-btn-active-bg: #000;
  --bs-btn-bg: #007200;
  --bs-btn-border-color: #007200;
  --bs-btn-color:#ffffff; 
  --bs-btn-hover-bg: #44A244;
  --bs-btn-hover-border-color: #44A244;
  --bs-btn-hover-color:#ffffff; 
}

.btn:disabled {
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #6d6d6d;
  --bs-btn-disabled-border-color: #6d6d6d;
}

.btn-default {
  --bs-btn-border-color: #060;
}

.lead {
  font-size: 1.1em;
}

strong {
  font-weight: bold;
}

a {
  color: #02385a;
}

a:hover {
  color: #035081;
}

.panel {
  margin-top: 2em;
  display: block;
}

body {
  font-size: 14px;
  font-family: var(--regular-font-family)
}

.product {
  border-color: rgb(117, 103, 0, 0.3);
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  margin-bottom: 1.2em;
}

.normalfont {
  font-family: var(--regular-font-family)
}

.body-background {
    background-image: url("/static/img/craftpaper-light.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 661px 480px;
}

.nav-background {
    background-image: url("/static/img/headgreen.png");
    background-position: center bottom;
    background-size: cover;
    height: 110px;
}

.navbar li a {
  font-family: var(--neucha-font-family);
  font-size: 1.2em;
  letter-spacing: .1em;
  --bs-nav-link-color: #291703 !important;
  height: 100%;
  margin-right: 1em;
}

.nav-tabs, .nav-item {
  --bs-nav-tabs-border-color: #291703;
  --bs-nav-tabs-link-hover-border-color: #291703;
  --bs-nav-link-color: #291703;  
  --bs-nav-link-hover-color: #007200;  
  font-size: 16px;
}

.info a {
  text-decoration: none;
}

.dropdown-menu {
  background-image: url("/static/img/headgreen.png");
  font-size: 0.8em;
  letter-spacing: .06em;
  margin-top: -10px !important;
  
}

.dropdown-item {
  opacity: 1;
  font-size: smaller;
  font-weight: bolder;
}

.dropdown-item:hover {
  color:#007200;
  background: none;
}

.progress {
  width: 10em;
}

.progress-bar {
  background-color: #007200;
}

h4.product-name a {
  text-decoration: none;
}

/* duallistbox */
.btn.moveall,
.btn.move,
.btn.removeall,
.btn.remove {
  border-width: 1px;
  border-color:#756700;
  background-color: #fff;
  color:#000;
}

@media all and (min-width: 900px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}

@media (max-width: 900px) {

    .navbar-brand {
        width: 210px;
        height: 34px;
        background-image: url('/static/img/VokoLogo.png');
        background-size: 210px 34px;    
    }

    .navbar-brand img {
      display: none;
    }

    .navbar {
      height: 56px;
    }

    .navbar-collapse {
      display: block;
      margin: 15px 5px 5px 5px;
      width: 100%;
      height: 100%;
      padding: 20px;
      background-image: url("/static/img/craftpaper_medium.jpg");
      background-size: 661px 480px;
      transition: all 0.4s ease; 
      border-radius: 16px;  
      border-width: 1px;
      border-style: solid;  
      border-color:#cbb402;
    }

    .navbar-collapse li {
      color:#291703;
      display: block;
      width: 100%;
      position: relative;
      padding: 15px 10px 15px;
      text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .navbar-collapse li .sub-menu {
      padding-bottom: 0;
      padding-top: 5px;
    }

    .navbar-collapse li a {
      display: block;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      padding-top: 5px;
      color:#291703;
      line-height: 1;
    }

    .dropdown-menu {
      background-image: unset;
      background: unset;
      border: 0px;
    }

    .dropdown-menu li  {
      border-bottom: 0px;
      padding: 6px;
    }

    .dropdown-menu.categories {
      background-color: #d1c091;
    }

    
  }

h1, h2, h3 {
  clear: both;
  font-weight: bold;
  font-family: var(--hipster-font-family);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
  color: #007200;
}

tr {
  border-color: #d1c091;
}

/* textarea, input, option, select {
  background-color: #f1dca5 !important;
  border-color: #e8d39e !important;
} */

ul.pagination li a {
  background-color: #d1c091 !important;
  border-color: #756700 !important;
  color:#291703;
}

ul.pagination li.active a {
  background-color: #fee8ae !important;
  border-color: #756700 !important;
  color:#291703;
}

ul.pagination li:hover a {
  background-color: #fee8ae !important;
  border-color: #756700 !important;
  color:#291703;
}