@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Comfortaa&family=Bungee Hairline&family=Orbitron:wght@500&display=swap');



/* main page sidebar */
.sidebar {
    margin: 0;
    padding: 0px 0px 42px 0px;
    width: 280px;
    position: fixed;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #1d1d1d;
    font-family: 'Comfortaa';
    font-size: 18px;
    text-align: left;
    direction: rtl;
    transition: 0.5s;
  }
  
 .sbItem {
    display: block;
    color: #f5f5f5;
    padding: 18px;
    margin-left: 15px;
    text-decoration: none;
    transition: 0.3s;
    direction: ltr;
  }

  .sbChosen {
    display: block;
    color: #F6821F;
    padding: 18px;
    margin-left: 15px;
    text-decoration: none;
    transition: 0.3s;
    direction: ltr;
  }
  
  .sidebar a.active {
    color: #F6821F;
  }
  
  .sidebar a:hover:not(.active) {
    color: #F6821F;
  }
  
  .sidebar .closebtn {
    display: block;
    color: #F6821F;
    padding: 18px;
    margin-left: 15px;
    text-decoration: none;
    direction: ltr;
    position: absolute;
    top: 0;
    font-size: 30px;
  }
  
  .sidebar::-webkit-scrollbar {
    width: 10px;
  }
  
  .sidebar::-webkit-scrollbar-track {
    background: clear;
  }
  
  .sidebar::-webkit-scrollbar-thumb {
    background: #F6821F;
  }
  
  .closedSidebar {
    margin: 0;
    padding: 0px 0px 42px 0px;
    width: 0px;
    position: fixed;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    font-family: 'Comfortaa';
    font-size: 18px;
    text-align: left;
    direction: rtl;
    transition: 0.5s;
  }
  
  .closedSidebar a {
    display: block;
    color: #192236;
    padding: 18px;
    margin-left: 30px;
    text-decoration: none;
    transition: 0.3s;
    direction: ltr;
  }
  
  .closedSidebar a.active {
    color: #F6821F;
  }
  
  .closedSidebar a:hover:not(.active) {
    color: #F6821F;
  }
  
  .closedSidebar .openbtn {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 30px;
    color: #404242;
  }

  .ztlogo {
    margin-left: 20px;
    padding: 15px;
    border: none;
    width: 240px;
  }

  .sbNewBtn {
    font-size: 18px;
    border: 2px dotted #f5f5f5;
    border-radius: 20px;
    background: transparent;
    color: #f5f5f5;
    margin-left: 35px;
    margin-top: 20px;
    padding: 10px 8px 8px 8px;
  }
  
  .sbNewBtn:hover {
    border: 2px solid #F6821F;
    color: #F6821F;
    background: transparent;
  }
  
  .sbNewBtn:active {
    border: 2px solid #F6821F;
    color: #F6821F;
    background: transparent;
  }