:root{
    --bh-dark: #14293C;
    --bh-green: #198754;
    --bh-cream: #FFEDD8;
    --bh-white: #FFFFFF;
    --bh-yellow: #FDBF44;
    --bh-orange: #E86C3D;
    --bh-pink: #F48688;
    --bh-red: #9F1B4B;
    --alpha: 0.5;

    /* Gray */
    --bh-gray-900: #111827;
    --bh-gray-800: #1f2937;
    --bh-gray-700: #374151;
    --bh-gray-600: #4b5563;
    --bh-gray-500: #6b7280;
    --bh-gray-400: #9ca3af;
    --bh-gray-300: #d1d5db;
    --bh-gray-200: #e5e7eb;
    --bh-gray-100: #f3f4f6;
    --bh-gray-50: #f9fafb;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--bh-gray-500) !important;
}
::-moz-placeholder { /* Firefox 19+ */
    color: var(--bh-gray-500) !important;
}
:-ms-input-placeholder { /* IE 10+ */
    color: var(--bh-gray-500) !important;
}
:-moz-placeholder { /* Firefox 18- */
    color: var(--bh-gray-500) !important;
}

.rounded-6{
    border-radius: 0.60rem;
}

.fs-7{
    font-size: 0.90rem;
}

.fs-8{
    font-size: 0.80rem;
}

.ls-1{
    letter-spacing: 1px;
}

.vh-90{
    height: 90vh;
}

.lh-90{
    line-height: 90%;
}


.lh-100{
    line-height: 100%;
}

.lh-150{
    line-height: 150%;
}

.lh-175{
    line-height: 175%;
}


.dropdown-toggle:after {
    display: none;
}

.py-6{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.btn-lg{
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* Backgrounds */
.bs-gray-50{ background-color: var(--bh-gray-50) !important; }
.bs-gray-100{ background-color: var(--bh-gray-100) !important; }
.bs-gray-200{ background-color: var(--bh-gray-200) !important; }
.bs-gray-300{ background-color: var(--bh-gray-300) !important; }
.bs-gray-400{ background-color: var(--bh-gray-400) !important; }
.bs-gray-500{ background-color: var(--bh-gray-500) !important; }
.bs-gray-600{ background-color: var(--bh-gray-600) !important; }
.bs-gray-700{ background-color: var(--bh-gray-700) !important; }
.bs-gray-800{ background-color: var(--bh-gray-800) !important; }
.bs-gray-900{ background-color: var(--bh-gray-900) !important; }

.bg-dark{
    background-color: var(--bh-dark) !important;
}

.bg-green{
    background-color: var(--bh-green) !important;
}

.bg-orange{
    background-color: var(--bh-orange) !important;
}

.bg-light-alt{
    background-color: var(--bh-cream) !important;
}

.bg-yellow{
    background-color: var(--bh-yellow) !important;
}

.bg-pink{
    background-color: var(--bh-pink) !important;
}

.bg-red{
    background-color: var(--bh-red) !important;
}

/* Typography */
h1,h2,h3{
    font-weight: 600 !important;
}

h4,h5,h6{
    font-weight: 500 !important;
}


.text-sm{
    font-size: 0.90rem;
}

.text-xs{
    font-size: 0.80rem;
}

.text-xxs{
    font-size: 0.70rem;
}

.text-xl{
    font-size: 1.60rem;
}

.text-orange{
    color: var(--bh-orange) !important;
}

.text-green{
    color: var(--bh-green) !important;
}

.text-red{
    color: var(--bh-red) !important;
}

.text-light{
    color: var(--bh-cream) !important;
}

.text-dark-alt{
    color: var(--bh-dark) !important;
}

/* Icons */
.icon-12{
    width: 12px !important;
}


.icon-16{
    width: 16px !important;
}

.icon-24{
    width: 24px !important;
}

.icon-32{
    width: 32px !important;
}

.icon-64{
    width: 64px !important;
}


.icon-80{
    width: 80px !important;
    height: 80px !important
}

/* Data Tables */
.dataTables_wrapper{
    border-top: 1px solid var(--bh-gray-200);
}

.dataTables_length{
    font-size: 13px;
    padding: 0.5rem 1rem 0;
}

.dataTables_filter{
    font-size: 12px;
    padding: 0.5rem 1rem 0;
}

.dataTables_info{
    font-size: 13px;
    padding: 0.5rem 1rem;
}

.dataTables_paginate{
    font-size: 12px;
    padding: 0.5rem 1rem;
}

div.dataTables_wrapper div.dataTables_length label {
    margin-bottom: 0 !important;
}

div.dataTables_wrapper div.dataTables_filter label {
    margin-bottom: 0;
}

label{
    margin-bottom: 3px;
    color: var(--bh-dark);
}

/* Badges */
.badge{
    font-size: 90%;
    font-weight: 500;
    border: 0 none !important;
  }
  
  .badge-confirmed{
    background-color: #CBE8FF !important;
    color: #0A75E1 !important;
  }

  .badge-prepare{
    background-color: #FFF3DC !important;
    color: var(--bh-yellow) !important;
  }

  .badge-otw{
    background-color: #FCDBCE !important;
    color: var(--bh-orange) !important;
  }

  .badge-delivered{
    background-color: #CFFFE8 !important;
    color: var(--bh-green) !important;
  }

  .badge-success{
    background-color: #CFFFE8 !important;
    color: var(--bh-green) !important;
  }

  #overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }