/* ==========================================================================
    Navbar Styles
     ========================================================================== */

/* CSS styles for the navbar
add <div id="navbar-container"></div>
to html, and link to the js
*/

/* Add CSS Custom Properties for NAVBAR theming */
:root {
  /* Light theme */
  --menu-bg: #235580;
  --menu-text: #ffffff;
  /* --nav-shadow: rgba(0, 0, 0, 0.1); */
  --navbar-dropdown-bg: #0d4266;
  --navbar-dropdown-hover: #1a5585;
  --menu-border: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme */
    --menu-bg: #1a3f61;
    --menu-text: #e1e1e1;
    /* --nav-shadow: rgba(0, 0, 0, 0.3); */
    --navbar-dropdown-bg: #0a2540;
    --navbar-dropdown-hover: #2a5075;
    --menu-border: rgba(255, 255, 255, 0.15);
  }
}

/* Optional: Add transition for smooth theme switching */
/* .navbar,
  .navbar-side-menu,
  .navbar-dropdown-content,
  .sub-navbar-dropdown-content,
  .sub-sub-navbar-dropdown-content {
    transition: background-color 0.3s ease, color 0.3s ease;
  } */

/* END theme styles*/

/* Reset default margins and paddings
        html,
        body {
          margin: 0;
          padding: 0;
        }      */

/* Add top padding to body to account for fixed navbar */
html body {
  padding-top: 47px; /* 60px; */
}

/* Navbar styles */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000; /* 1000 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* material theme builder, source color C0DAF9, primary P-40 */
  /*background-color: #235580;
    color: white;*/
  /* prev 0f4c75 #333; */

  background-color: var(--menu-bg);
  color: var(--menu-text);
  /* box-shadow: 0 2px 4px var(--nav-shadow); */
  /* ??? */
  height: 50px; /* 60 */
  /* hassan */
  /*background-color: #fefefe;
    box-shadow: 0 2px 2px #cacaca;*/
  /* */

  padding: 0 15px; /* Consistent padding */
  box-sizing: border-box;
  width: 100%;

  /* hassaans style */
  /*box-shadow: 0 2px 2px #cacaca;*/

  /* DONT WANT */
  /* transition: transform 0.3s ease-out; */
  /* for mobile sticky on scroll */
}

/* DONT WANT */
/* div class to add on mobile to make it hide on scroll down */
/* .navbar-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
} */

.navbar-left,
.navbar-center,
.navbar-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* Center all items */
  height: 100%;
}

.navbar-left {
  justify-content: flex-start;
}

.navbar-right {
  justify-content: flex-end;
}

.navbar-left a {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none; /* Remove underline from link */
}

.navbar-site-icon {
  width: 46px;
  height: 46px;
  /* Remove cursor: pointer since it's now handled by the anchor tag */
}

/* Site icon styles */
.navbar-site-icon {
  width: 46px; /* 48 40 */
  height: 46px;
  cursor: pointer;

  display: flex; /* Ensure proper alignment */
  justify-content: center; /* Center all items */
  height: 100%;
}

/* Page title styles */
.navbar-page-title {
  font-size: 22px; /* Default size for larger screens */
  white-space: nowrap; /* Prevent line breaks */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
  max-width: 60vw; /* Limit width to 60% of viewport width */
  direction: rtl;

  text-align: center; /* Ensure center alignment */
  width: 100%; /* Take full width of container */
}

/* Menu icon styles */
.navbar-menu-icon {
  font-size: 24px;
  cursor: pointer;

  display: flex; /* Ensure proper alignment */
  align-items: center;
  justify-content: center;
  width: 40px; /* Match the width of the navbar-site-icon */
  height: 40px; /* Match the height of the navbar-site-icon */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 480px) {
  .navbar {
    padding: 0 10px;
  }

  .navbar-site-icon,
  .navbar-menu-icon {
    width: 36px;
    height: 36px;
  }

  .navbar-page-title {
    font-size: 18px;
  }

  .navbar-menu-icon {
    font-size: 22px;
  }
}

/* Side menu styles */
.navbar-side-menu {
  font-size: 19.5px !important;
  position: fixed;
  top: 0;
  right: -300px;
  width: 275px; /* 300 */
  /*height: 100%;*/
  height: 100vh; /* fixes chrome address bar gap issue https://bokand.github.io/demo/urlbarsize.html */
  transition: right 0.3s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1000;
  /* material theme builder, source color C0DAF9, primary P-40 */
  /*background-color: #235580;*/
  /* prev 0f4c75 f1f1f1; */
  /*color: #eee;*/
  background-color: var(--menu-bg);
  color: var(--menu-text);
  border-left: 1px solid var(--menu-border); /* a */
  text-align: right; /* Add this line for right-aligned text */
  direction: rtl;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar but keep functionality */
/* Chrome, Safari and Opera */
.navbar-side-menu::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.navbar-side-menu {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile 
        html {
          height: 100%;
        } */

/* Side menu open state */
.navbar-side-menu.open {
  right: 0;
}

/* Side menu close button styles */
.navbar-side-menu-close {
  font-size: 24px;
  cursor: pointer;
  /* color: #eee;  */
  color: var(--menu-text);
  text-align: left; /* Add this line for right-aligned text. prev right */
}

/* Side menu list styles */
.navbar-side-menu ul {
  list-style-type: none;
  padding: 0;
  /* */
  margin: 0;
}

/* Ensure each li takes full width */
/* increased from 10 */
/*  prev 5 which added like a little indent */
/*.navbar-side-menu ul li {
    display: block;
    margin-bottom: 15px;
    padding-right: 0;
  }*/
.navbar-side-menu li {
  margin: 0;
  padding: 0;
  display: block;
  margin-bottom: 15px;
}

.navbar-side-menu li a,
.navbar-dropdown-label {
  color: var(--menu-text);
}

/* Add hover effects */
.navbar-side-menu li a:hover,
.navbar-dropdown-label:hover {
  background-color: var(--navbar-dropdown-hover);
}

/*.navbar-side-menu ul li a {
    text-decoration: none;
    color: #eee; 
  }*/
/* #333; */
.navbar-side-menu li a {
  display: block;
  /*padding: 12px 16px;*/
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 0;
  padding-bottom: 0;
  /* color: #eee; */
  text-decoration: none;
}

/* Navbar Dropdown styles */
.navbar-dropdown,
.sub-navbar-dropdown,
.sub-sub-navbar-dropdown {
  position: relative;
  /*display: block;*/ /* Make dropdown take full width */
  width: 100%;

  text-align: right; /* Add this line */
  direction: rtl;
  cursor: pointer;

  /* */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/*padding: 12px 16px;*/
/*.navbar-dropdown > a,
  .sub-navbar-dropdown > a,
  .sub-sub-navbar-dropdown > a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 16px;
    padding-left: 16px;
  }*/
.navbar-dropdown-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  /* color: #eee; */
  /*padding: 12px 16px;*/
  padding-left: 16px;
  padding-right: 16px;

  width: 100%;
  box-sizing: border-box;
}
.navbar-dropdown > .navbar-dropdown-label,
.sub-navbar-dropdown > .navbar-dropdown-label,
.sub-sub-navbar-dropdown > .navbar-dropdown-label {
  padding-right: 16px;
  padding-left: 16px;
}

/* Navbar Dropdown arrow styles */
.navbar-dropdown-arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* NavbarDropdown content styles */
.navbar-dropdown-content,
.sub-navbar-dropdown-content,
.sub-sub-navbar-dropdown-content {
  display: none;
  position: relative;
  /*background-color: #0d4266;*/
  /* #f9f9f9; */
  background-color: var(--navbar-dropdown-bg);
  /*width: 200px;*/
  min-width: 160px;
  /*box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);*/ /* cleaner without shadows */
  z-index: 1;
  /*  right: 0;  prev added this line to align to the right */
  direction: rtl;
  text-align: right; /* Add this line for right-aligned text */
  border-radius: 20px;
  margin-top: 5px;
  /*    text-indent: 15px;
    cursor: pointer; */

  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 2.5;
}

/* Show navbar dropdown content when active */
.navbar-dropdown-content.show,
.sub-navbar-dropdown-content.show,
.sub-sub-navbar-dropdown-content.show {
  display: block;
}

/* Styles for list items within navbar dropdowns */
.navbar-dropdown-content li,
.sub-navbar-dropdown-content li,
.sub-sub-navbar-dropdown-content li {
  padding: 0;
  /* added. this makes the line gaps even. important overrides the parent margin given to this */
  margin: 0 !important;
}

/*.navbar-dropdown-content a,
  .sub-navbar-dropdown-content a,
  .sub-sub-navbar-dropdown-content a {
    color: #eee;
    text-decoration: none !important;
    display: block;
    padding: 12px 16px;
  }*/
/* display was grid before, and block before that */

/* Remove specific styling for sub-navbar-dropdown and sub-sub-navbar-dropdown */
.sub-navbar-dropdown,
.sub-sub-navbar-dropdown {
  padding-right: 0;
}

.sub-navbar-dropdown::after,
.sub-sub-navbar-dropdown::after {
  content: none;
}

#sideMenu hr {
  border-bottom-color: var(--menu-text);
  opacity: 0.5;
  /* margin-top: 1.25em;
  margin-bottom: 1.25em; */
}

/* Hide the element by default */
#sideMenu .wide-screen-toggle {
  display: none;
}

/* Show it only when viewport is wider than 980px */
@media screen and (min-width: 981px) {
  #sideMenu .wide-screen-toggle {
    display: block; /* or list-item, depending on your layout */
  }
}

/* */

/* */

/* */

/* */

/* */

/* */

/* CLAUDE
  
  code for me a nice modern top navbar
  
  it should be responsive
  
  at the top left should be the site icon
  
  at the middle should be the text of the page, should be same as title of the html
  
  on the left should be something like a hamburger menu icon
  
  on the navbar, clicking on the top left site icon should take me to the home page
  
  clicking anywhere else on the navbar, should open the side menu from the right
  
  it should have lines of text, links etc. right aligned. it should also have dropdowns that when clicked, open a dropdown list.
  
  this navbar should be such that, i can place its js code on a page, and it will create the navbar on that page, using html elements
  
  write me the code, the html, the css, the js, for this
  
  ...
  
  clicking the hamburger doesnt open the side menu. it should open the side menu just like clicking anywhere else on the navbar. right now hamburger is clicked like it is something different from navbar. it is a part of navbar and clicking the hamburger icon should behave as if navbar was clicked
  
  the side menu shows itself behind the other body elements in the html
  
  i want to make the site icon larger, without making the navbar larger
  
  menu scrolls out of view when scrolling
  
  on mobile chrome, which has its own top navbar, when i scroll down, the top navbar of chrome goes up and disappears. in that moment, the bottom of the side menu is gone, and the body html can be seen
  
  ...
  
  in addition to dropdowns, i want sub-dropdowns, and sub-sub-dropdowns, in which can be text, or links
  
  feel free to change the code of the dropdowns itself, before making the other changes needed
  
  dropdowns sub dropdowns and sub sub dropdowns should not appear with just hover. they should be clicked on top appear.
  
  and i dont want them appearing to the side. they should appear below.
  
  ބައިތައް
  only opens when i click the text itself, not when i click the area of the li it is in
  
  the a or the li of each nested dropdown moves a little to the left each level. i want them to be in the same space that the top level is in.
  
  also instead of the ▼ that appears before a dropdown or sub  or sub sub dropdown is opened, and disapears after it is opened,
  
  there should be a  ▼ arrow before the dropdown item text with a little space between them, the arrow should initially point towards the left where sub dropdowns are further nested, then when that dropdown is opened, the arrow should rotate to facing down. when a dropdown is closed, the down facing arrow should rotate to facing left again. no matter the level of nesting.
  */

/* =============================  */
/* FOUC FIX */

html {
  visibility: visible;
  opacity: 1;
}

/* =======================
= NAV ICONS
======================== */
/* .customIcons */
#sideMenu > ul > li > a > span {
  background-size: 100%;
  /*  */
  display: inline-block;
  width: 24px;
  height: 24px;
  /*  */

  filter: invert(100%);
  vertical-align: middle;
  /*  */
  margin-left: 10px;
}

/* Shared base class for all icons */
.iconBase {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
  filter: invert(100%);
  vertical-align: middle;
  margin-left: 10px;
}

/*  */

.hamburgerIcon {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: invert(100%);
  vertical-align: middle;
  margin-left: 10px;
  /*  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M3.464 20.535C4.93 22 7.286 22 12 22c4.714 0 7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12c0 4.714 0 7.071 1.464 8.535ZM18.75 16a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75ZM18 12.75a.75.75 0 0 0 0-1.5H6a.75.75 0 0 0 0 1.5h12ZM18.75 8a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.homeIcon {
  margin-right: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m16.51 5.01-1.96-1.96c-1.4-1.4-3.7-1.4-5.1 0L7.49 5.01c-.39.39-.39 1.03 0 1.42l3.81 3.81c.39.39 1.02.39 1.41 0l3.81-3.81c.38-.39.38-1.03-.01-1.42ZM5.01 7.492l-1.96 1.96c-1.4 1.4-1.4 3.7 0 5.1l1.96 1.96c.39.39 1.02.39 1.41 0l3.81-3.81a.996.996 0 0 0 0-1.41l-3.8-3.8c-.39-.39-1.03-.39-1.42 0Zm15.94 1.96-1.96-1.96a.996.996 0 0 0-1.41 0l-3.81 3.81a.996.996 0 0 0 0 1.41l3.81 3.81c.39.39 1.02.39 1.41 0l1.96-1.96c1.4-1.41 1.4-3.71 0-5.11ZM7.49 18.99l1.96 1.96c1.4 1.4 3.7 1.4 5.1 0l1.96-1.96a.996.996 0 0 0 0-1.41l-3.81-3.81a.996.996 0 0 0-1.41 0l-3.81 3.81c-.38.38-.38 1.02.01 1.41Z'/%3E%3C/svg%3E");
}

.dropdownIcon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  transition: transform 0.3s ease;
  margin-left: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(100%);
  /*  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M701.14 299.05 444.87 620.14c-24.31 29.37-61.78 29.37-85.09 0L103.52 299.05c-24.31-30.4-12.16-53.68 25.32-53.68h546.99c38.51 0 49.63 23.31 25.32 53.68Z' style='stroke:%23000;stroke-miterlimit:100;stroke-width:80px'/%3E%3C/svg%3E");
}

.contactIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='-1.68 -1.68 27.36 27.36'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m13.629 20.472-.542.916c-.483.816-1.69.816-2.174 0l-.542-.916c-.42-.71-.63-1.066-.968-1.262-.338-.197-.763-.204-1.613-.219-1.256-.021-2.043-.098-2.703-.372a5 5 0 0 1-2.706-2.706C2 14.995 2 13.83 2 11.5v-1c0-3.273 0-4.91.737-6.112a5 5 0 0 1 1.65-1.651C5.59 2 7.228 2 10.5 2h3c3.273 0 4.91 0 6.113.737a5 5 0 0 1 1.65 1.65C22 5.59 22 7.228 22 10.5v1c0 2.33 0 3.495-.38 4.413a5 5 0 0 1-2.707 2.706c-.66.274-1.447.35-2.703.372-.85.015-1.275.022-1.613.219-.338.196-.548.551-.968 1.262ZM8 11.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5H8ZM7.25 9A.75.75 0 0 1 8 8.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.supportSideMenuIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4.414 17.859a.75.75 0 0 1 1.025.27c.827 1.418 2.091 2.49 3.65 3.186a.75.75 0 0 1-.611 1.37c-1.812-.809-3.331-2.08-4.334-3.8a.75.75 0 0 1 .27-1.026ZM18.906 3.922c-1.014-1.036-2.46-1.417-3.876-1.015a.75.75 0 0 1-.41-1.442c1.938-.552 3.955-.025 5.357 1.407a.75.75 0 0 1-1.071 1.05Zm-7.716-.614c-.214-.367-.838-.59-1.471-.227-.632.36-.743.997-.532 1.357l2.525 4.332a.75.75 0 0 1-1.296.755L7.05 3.75c-.214-.367-.838-.59-1.472-.227-.631.36-.742.997-.532 1.357l3.789 6.497a.75.75 0 1 1-1.296.756L5.854 9.245c-.214-.367-.838-.59-1.471-.227-.632.36-.743.996-.532 1.357l3.788 6.497c1.609 2.759 5.58 3.654 8.946 1.73 3.365-1.923 4.561-5.764 2.956-8.517l-2.526-4.331c-.214-.367-.838-.59-1.471-.228-.632.361-.743.997-.532 1.358l1.683 2.887a.75.75 0 0 1-.275 1.03c-1.543.88-2.016 2.585-1.34 3.743a.75.75 0 1 1-1.296.756c-.913-1.565-.544-3.45.635-4.782.33-.372.442-.914.192-1.344l-3.42-5.866Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.faqIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 56 56'%3E%3Cpath d='M13.785 49.574h28.453c4.899 0 7.336-2.437 7.336-7.265V13.69c0-4.828-2.437-7.265-7.336-7.265H13.785c-4.875 0-7.36 2.414-7.36 7.265V42.31c0 4.851 2.485 7.265 7.36 7.265ZM27.59 33.051c-1.29 0-1.969-.657-1.969-1.922V30.8c0-2.414 1.313-3.727 3.07-4.945 2.18-1.477 3.188-2.32 3.188-4.008 0-1.852-1.453-3.117-3.68-3.117-1.64 0-2.883.82-3.633 2.156-.796.937-1.03 1.664-2.414 1.664-.82 0-1.687-.586-1.687-1.688 0-.422.07-.82.187-1.218.633-2.274 3.469-4.243 7.688-4.243 4.195 0 7.828 2.18 7.828 6.258 0 2.953-1.711 4.36-4.102 5.977-1.687 1.148-2.508 1.992-2.508 3.375v.304c0 .961-.75 1.735-1.968 1.735Zm.07 7.054c-1.336 0-2.625-1.078-2.625-2.53 0-1.454 1.266-2.532 2.625-2.532 1.383 0 2.625 1.055 2.625 2.531 0 1.477-1.265 2.532-2.625 2.532Z'/%3E%3C/svg%3E");
}

.helpersIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='m615.67 502.11 7.57 7.47 26.23 26.23c4.1 3.8 7.35 8.42 9.55 13.56 1.51 3.61 2.35 7.47 2.47 11.38.08 2.93-.6 5.83-1.98 8.41-.9 1.71-1.99 3.3-3.27 4.75l-11.68 11.68c-3.2 3.75-7.68 6.16-12.57 6.78-3.91.25-7.82-.48-11.38-2.13a35.744 35.744 0 0 1-9.06-6.04 183.81 183.81 0 0 1-5.39-5.05l-37.02-37.76c-3.55-3.97-9.65-4.31-13.63-.76-.09.08-.19.17-.28.26l-1.63 1.88c-4.62 4.54-4.68 11.97-.14 16.59l.04.04 44.04 43.1c3.6 3.33 6.54 7.31 8.66 11.73 1.7 3.35 2.65 7.03 2.77 10.79.07 2.93-.61 5.82-1.98 8.41-1.21 2.2-2.71 4.23-4.45 6.04l-14.75 14.75c-3.1 3.54-7.27 5.97-11.88 6.93-3.63.53-7.33.1-10.74-1.24a28.66 28.66 0 0 1-9.06-5.69c-2.19-2.01-4.34-4.08-6.43-6.19l-45.73-46.57a8.508 8.508 0 0 0-12.02-.58c-.12.11-.24.22-.35.33l-4.26 4.31c-3.56 3.68-3.51 9.53.1 13.16l42.16 41.27c4.02 3.79 7.39 8.2 10 13.06 1.79 3.36 2.81 7.08 2.97 10.89.09 2.96-.59 5.89-1.98 8.51a28.34 28.34 0 0 1-4.5 5.94l-11.68 11.73c-11.09 9.83-23.79 7.57-38.11-6.78l-43.75-42.76c-2.3-2.33-6.05-2.37-8.41-.1l-5.74 4.65c-3.5 3.38-3.6 8.95-.23 12.46.14.14.28.28.42.41l28.7 28.95a28.61 28.61 0 0 1 8.46 13.36c.92 3.68.97 7.53.15 11.23-.85 3.77-2.64 7.25-5.2 10.14L449 753.32a20.12 20.12 0 0 1-12.77 5.99c-3.82.16-7.63-.41-11.23-1.68a30.976 30.976 0 0 1-11.09-7.42L176.62 512.97a222.077 222.077 0 0 1-30.88-38.01c-7.55-11.67-13.7-24.2-18.31-37.31a140.804 140.804 0 0 1-7.32-35.04c-.89-10.51-.17-21.09 2.13-31.37l-41.82-41.82-42.46-39.99 167.41-169.96 87.59 89.32-40.48 40.43-.89.99-.59.64a83.633 83.633 0 0 0-17.82 30.88 78.833 78.833 0 0 0-2.87 35.09 75.818 75.818 0 0 0 22.76 43.8l11.98 11.93 1.09 1.04.74.69a75.107 75.107 0 0 0 68.84 16.68 79.962 79.962 0 0 0 37.41-22.27l54.73-54.78 19.4 19.5.2.35 168.11 168.16.1.2Zm66.31-127.18c.43 5.77.43 11.56 0 17.32-.95 11.77-3.37 23.38-7.23 34.54a171.873 171.873 0 0 1-17.82 36.47c-1.75 2.75-3.56 5.46-5.44 8.12l-2.77-2.67-204.23-204.53c-9.16-9.2-24.05-9.22-33.24-.06l-.01.01-71.31 71.36a34.11 34.11 0 0 1-15.64 9.9c-4.41 1.2-9.05 1.3-13.51.3l-.25-.05c-4.7-1.12-9.05-3.42-12.62-6.68l-11.58-11.53a30.166 30.166 0 0 1-9.4-16.92c-.76-4.81-.42-9.74.99-14.4l.15-.35c1.65-5.04 4.37-9.66 7.97-13.56l.15-.15 80.17-80.17a86.184 86.184 0 0 1 29.59-19.3c11.25-4.39 23.03-7.28 35.04-8.61a218.787 218.787 0 0 1 37.02-1.04c22.04 1.21 43.96 4.09 65.57 8.61l61.81-61.76L762.01 286.4l-78.68 78.64a23.62 23.62 0 0 0-1.29 9.9h-.05Z'/%3E%3C/svg%3E");
}

.versionIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0h24ZM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01-.184-.092Z'/%3E%3Cpath fill='%23000' d='M20.245 14.75c.935.614.892 2.037-.129 2.576l-7.181 3.796a2 2 0 0 1-1.87 0l-7.181-3.796c-1.02-.54-1.064-1.962-.129-2.576l.063.04 7.247 3.832a2 2 0 0 0 1.87 0l7.181-3.796a1.59 1.59 0 0 0 .13-.076Zm0-4a1.5 1.5 0 0 1 0 2.501l-.129.075-7.181 3.796a2 2 0 0 1-1.707.077l-.162-.077-7.182-3.796c-1.02-.54-1.064-1.962-.129-2.576l.063.04 7.247 3.832a2 2 0 0 0 1.708.077l.162-.077 7.181-3.796a1.59 1.59 0 0 0 .13-.076Zm-7.31-7.872 7.181 3.796c1.066.563 1.066 2.09 0 2.652l-7.181 3.796a2 2 0 0 1-1.87 0L3.884 9.327c-1.066-.563-1.066-2.089 0-2.652l7.181-3.796a2 2 0 0 1 1.87 0Z'/%3E%3C/g%3E%3C/svg%3E");
}

.authorIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' version='1.0' viewBox='-16 -16 96 96'%3E%3Cpath d='m62.828 17.172-16-16a4 4 0 1 0-5.656 5.656l16 16C57.953 23.609 58.977 24 60 24s2.047-.391 2.828-1.172a3.997 3.997 0 0 0 0-5.656zM34.828 9.172A3.998 3.998 0 0 0 32 8H12a3.997 3.997 0 0 0-3.945 3.344L0 58l20.297-19.953C20.125 37.391 20 36.711 20 36c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8c-.711 0-1.387-.125-2.047-.297L6 64l46.656-8.055A3.997 3.997 0 0 0 56 52V32a3.998 3.998 0 0 0-1.172-2.828l-20-20z'/%3E%3C/svg%3E");
}

/* !! could not simplify and optimize */
.fullScreenIcon {
  margin-left: 10px;
  margin-right: -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.002 5.754a1.75 1.75 0 0 0-1.75-1.75h-7.247c-.087 0-.173.006-.256.018v7.228h4.83l-.89-1.002a.75.75 0 0 1 1.122-.996l2 2.25a.75.75 0 0 1 0 .996l-2 2.25a.75.75 0 1 1-1.122-.996l.89-1.002h-4.83v7.23c.084.012.169.019.256.019h7.247a1.75 1.75 0 0 0 1.75-1.75V5.754ZM11.25 11.25H6.42l.89-1.002a.75.75 0 0 0-1.12-.996l-2 2.25a.75.75 0 0 0 0 .996l2 2.25a.75.75 0 1 0 1.12-.996l-.89-1.002h4.83v7.23a1.77 1.77 0 0 1-.245.016H3.757a1.75 1.75 0 0 1-1.75-1.75V5.751c0-.966.784-1.75 1.75-1.75h7.248a1.8 1.8 0 0 1 .245.017v7.232Z'/%3E%3C/svg%3E");
}

.scrollUpIcon {
  height: 20px !important;
  width: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M98.75 600h402.5c54.54 0 98.75-44.21 98.75-98.75V98.75C600 44.21 555.79 0 501.25 0H98.75C44.21 0 0 44.21 0 98.75v402.5C0 555.79 44.21 600 98.75 600Zm207.16-460.61 145.52 145.09c5.74 5.72 1.69 15.52-6.41 15.52H342.08a9.08 9.08 0 0 0-9.08 9.08v148.83a9.08 9.08 0 0 1-9.08 9.08h-48.83a9.08 9.08 0 0 1-9.08-9.08V309.08a9.08 9.08 0 0 0-9.08-9.08H153.99c-8.1 0-12.15-9.8-6.41-15.52L293.1 139.39a9.096 9.096 0 0 1 12.83 0Z'/%3E%3C/svg%3E");
}

.reloadIcon {
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: middle;
  transition: transform 0.3s ease;
  margin-left: 10px;
  margin-right: -2px;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(100%);
  /*  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.54 24'%3E%3Cpath d='M11.77 0c-15.69.07-15.69 23.93 0 24 15.69-.07 15.69-23.93 0-24Zm5 20-1.36-2.04C10.95 20.87 4.63 17.33 4.77 12h2c-.11 3.77 4.37 6.31 7.53 4.29L12.77 14h5.72l-1.72 6Zm0-8c.11-3.77-4.37-6.31-7.53-4.29L10.77 10H5.05l1.72-6 1.36 2.04c4.46-2.91 10.78.63 10.64 5.96h-2Z'/%3E%3C/svg%3E");
}

.githubIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592.89 600.99'%3E%3Cpath fill-rule='evenodd' d='M296.44.02c337.64-3.77 410.47 498.88 95.15 600.4-15.22 3.03-20.63-6.58-20.63-14.79-1.93-13.27 10.36-124.52-20.04-141.59 66.92-7.63 137.23-33.68 137.23-152.02 0-33.65-11.66-61.12-30.95-82.69 3.13-7.78 13.43-39.12-2.94-81.55 0 0-25.18-8.26-82.54 31.58-48.95-13.75-101.54-13.77-150.48 0-57.42-39.84-82.66-31.58-82.66-31.58-16.32 42.43-6.01 73.77-2.91 81.55-19.2 21.57-30.95 49.04-30.95 82.69 0 118.03 70.16 144.47 136.9 152.26-8.59 7.69-16.38 21.27-19.08 41.2-90.81 34.2-67.35-45.81-133.5-57.36 0 0-29.3-.39-2.05 18.72 41.76 16.33 14.5 101.51 134.59 81.43.15 25.75.42 50.03.42 57.36 0 8.14-5.53 17.67-20.52 14.81C-114.12 499.12-41.13-3.88 296.44.02'/%3E%3C/svg%3E");
}