@font-face
{
  font-family: 'fontawesome';
  font-weight:regular;
  src:
    local('Font Awesome 6 Free'),
    url('fonts/fontawesome/fa-regular-400.ttf');
}

@font-face
{
  font-family: 'fontawesome';
  font-weight: bold;
  src:
    local('Font Awesome 6 Free'),
    url('fonts/fontawesome/fa-solid-900.ttf');
}


#top_menu_bar
{
  height:50px; 
  display:inline-block; 
  position:absolute; 
  top:0px; 
  right:0px; 
  left:0px, 
  bottom:0px; 
  margin:auto; 
  width:100%; 
  text-align:center; 
  z-index:-10
}

#menu_checkbox
{
  display: none;
}

.menu_button span 
{
    opacity:0;
}

/* Menu button - starts */
.menu_button, .cart_button
{
  display: inline-block;
  background-color: #247D9E;
  color: #fff;
  width: 55px;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  cursor: pointer;
  transition: width .3s ease-in-out;
  font-size: 16px;
  font-weight:bold;
}

.menu_button b
{
  font-family:fontawesome;
  margin-right: 15px;
}

.cart_button b
{
  font-family:fontawesome;
}

/* Menu button - ends */

/* Sidebar - starts */
.sidebar 
{
  background-color: #2B2E33;
  position: fixed;
  width: 250px;
  height: 100%;
  z-index: 1111;
  /*transition: transform .3s ease-in-out;
  transform: translateX(-250px);*/
  overflow:auto;
  font-weight:bold;
}

@media only screen and (max-width: 1130px) 
{
  .sidebar 
  {
    transition: transform .3s ease-in-out;
    transform: translateX(-250px);
  }
}


.sidebar ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.sidebar ul a {
    position: relative;
    text-decoration: none;
    display: block;
    background-color: transparent;
    color: #BAB5BD;
    padding: 15px 20px;
    font-size: 16px;
}

.sidebar ul a li b {
    font-family:fontawesome;
    margin-right: 15px;
}

.badge
{
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -9px;
    color: #fff;
    font-size: 13px;
    padding: 0 7px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.orange 
{
  background-color: tomato;
}

.blue 
{
  background-color: #247D9E;
}

.cart_button .badge
{
  top: 3px;
  right: 3px;
  margin-top: 0px;
}

.sidebar ul a:hover, .sidebar ul a.active {
    background-color: #161920;
    color: #fff;
}

.sidebar ul a:hover::before, .sidebar ul a.active::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: #247D9E;
    width: 4px;
    height: 100%;
}
/* Sidebar - ends */

/* Effect of showing the sidebar - starts */
#menu_checkbox:checked ~ .sidebar 
{
    transform: translateX(0);
}

#menu_checkbox:checked + .menu_button 
{
    width: 250px;
    padding: 0 20px;
}

.menu_button b::before { /* Show again the word "Menu" in the button */
    content: "\f0c9";
}


#menu_checkbox:checked + .menu_button b::before { /* Show again the word "Menu" in the button */
    content: "\f410";
}

#menu_checkbox:checked + .menu_button span { /* Show again the word "Menu" in the button */
    opacity:1;
    transition: opacity 0.3s ease-in;
}

#menu_checkbox:checked + .menu_button span::before {
    content:"Menu";
}
/* Effect of showing the sidebar - ends */


@media only screen and (min-width: 900px) 
{
  #top_menu_bar
  {
    left:125px;
  }
  .sidebar 
  {
    transition: transform .3s ease-in-out;
    transform: translateX(-250px);
  }

  #menu_checkbox ~ .sidebar 
  {
    transform: translateX(0);
  }


#menu_checkbox + .menu_button 
{
    width: 250px;
    padding: 0 20px;
}


  #menu_checkbox + .menu_button b::before 
  {
    content: "\f0c9";
  }
  #menu_checkbox:checked + .menu_button b::before 
  {
    content: "\f0c9";
  }

  #menu_checkbox + .menu_button span 
  {
    opacity:1;
    transition: opacity 0.3s ease-in;
  }

  #menu_checkbox + .menu_button span::before 
  {
    content:"Menu";
  }
}