body {
  font-family: arial;
  margin: 0;
  padding: none;
}

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas {
  display:block; /* To remove the scrollbars */
  outline: none; /* Remove border on focus */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* Remove border on focus for mobile webkit */
}

.bgimage {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: url("/r/evo/img/sunset.jpg");
  height: 100%;
}

html {
  background: url("/r/evo/img/sunset.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

.evo-link {
  display: inline-flex;
  align-items: center;
  color: rgba(23, 113, 122, 1);
  font-weight: bold;
  text-decoration-skip-ink: auto;
}

/* Set icon size using em unit, so its size matches current font */
.evo-menustart {
  font-size: 2.0em;
  padding-left: 0.5em;
  padding-right: 0.2em;
}

.evo-tray {
  font-size: 1.8em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.evo-tray > img {
  display: block;
  height: 1.5em;
  width: 1.5em;
}

/* Disable drag for all descendants of launch button */
.evo-launchbutton * {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Styles that apply specifically when a fine pointer (like a mouse) is available */
@media (pointer: fine) {
  .evo-launchbutton:hover {
    /* Hover effects for mouse users */
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer; /* Change cursor on hover for mouse users */
  }
}

/* Set scaling animation on hover, but cancel it for touch devices (coarse pointer) */
/*
.evo-launchbutton:hover > span > img {
  transition: all 0.20s ease-in-out;
  transform: scale(1.35);
}

@media (pointer: coarse) {
  .evo-launchbutton:hover > span > img {
    all: revert-layer;
  }
}
*/

.evo-navbar {
  font-size: 1.2em;
  color:rgba(255, 255, 255, 0.9);
  background-color: rgba(10, 10, 10, 0.5);
  text-decoration: none;
}

/* Change min height to 64px instead of 80 for UIKit uk-navbar-item */
.evo-navbar-nav {
  gap: 0px;
  min-height: 64px;
}

/*
.uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle {
  min-height: 64px;
}
*/
.evo-navbar-nav>li>a {
  min-height: 64px;
}

/* Color of navigation bar when start menu is active */
.evo-navbar:not(.uk-navbar-transparent) {
  background-color: rgba(10, 10, 10, 0.5);
}

/* Set the width and height to be 1em, which will be the font-size of its parent element */
.evo-icon {
  width: 1em;
  height: 1em;
}
/* Force SVG in menu items to match size of text */
.evo-menuicon > svg {
  width: 1em;
  height: 1em;
}

.evo-toolbutton {
  /* background-color: rgba(255, 0, 0, 0.5); */
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

.evo-toolicon {
  padding: 10px;
}

/* task bar */
.evo-desktop-bar {
  z-index: 0;
}

.evo-desktop-launchmenu {
  z-index: 9999;
  /*
   * Overload the default 'fixed' position of offscreen canvas to allow it to be displayed
   * relative to and within its container instead of using viewport
   */
  position: absolute;
}

/* Custom CSS to set the width of the off-canvas bar */
.evo-desktop-launchmenu > .uk-offcanvas-bar {
  /* width: 60%; */          /* Sets the width to % of its parent's width */
  /* width: 480px; */
  /* min-width: 480px; */   /* Caps the maximum width at 480px */
  /* Ensures padding and border are included in the width */
  /* box-sizing: border-box; */
}

.evo-desktop-dropbox {
  padding-left: 10px;
  padding-right: 10px;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%; /* Make html and body take full height */
}

.evo-desktop-main {
  /*
   * Force desktop to cover full viewport.
   * Must *not* use 'height: 100vh;' since on mobile browser,
   * this would overlap with the address bar when it is
   * visible.
   */
  position: fixed;
  height: 100%;
  width: 100%;
  /* Use flex to layout desktop components */
  display: flex; /* Enable Flexbox */
  flex-direction: column; /* Stack children vertically */
}

.evo-desktop-viewport {
  flex-grow: 1; /* This div will grow to fill all available space */
  /* background-color: rgba(255, 255, 255, 1.0); */
  overflow-y: auto; /* Enable scrolling for desk content */
  /* padding: 20px; */
  box-sizing: border-box; /* Include padding in size calculation */
  position: relative;
  overflow: hidden;
}

/* Sidebar */
.evo-sidebar {
  font-size: medium;
}
.evo-sidebar-header {
  font-size: 1.1em;
}
.evo-menulist {
  font-size: 2.1em;
}

.evo-menu-dropdown-DISABLED {
  /* color: rgba(255, 255, 255, 1.0); */
  background-color: rgba(0, 0, 0, 0.95);
}

.evo-menu {
  font-size: 1.2em;
  color:rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.evo-menu:hover,
.evo-menu:focus {
  color:rgba(255, 255, 255, 1.0);
  text-decoration: none;
}

/* Style for HiDPI devices (e.g. smartphones) */
/*
@media only screen and (-webkit-min-device-pixel-ratio: 3) and ( min-height: 640px ),
       only screen and (-webkit-min-device-pixel-ratio: 3) and ( min-width: 640px ) {
  .evo-menustart {
    font-size: 6.0em;
  }
  .evo-tray {
    font-size: 4.5em;
  }
}
*/

/* Force content to not be selectable */
.evo-no-select {
  -webkit-user-select: none; /* Safari */
  -webkit-touch-callout: none; /* Safari iOS */
  -moz-user-select: none; /* Older versions of Firefox */
  -ms-user-select: none; /* Internet Explorer, Edge */
  user-select: none;
}

/* Force content to not be draggable */
.evo-no-drag {
  -webkit-user-drag: none; /* For WebKit-based browsers (Chrome, Safari) */
  user-drag: none; /* Standard property */
}

/* Beta ribbon (top right) */
.evo-beta-ribbon-top-right {
  float: right;
  top: 1.5em;
  position: fixed;
  transform: rotate(45deg);
  background: rgba(220, 10, 10, 0.5);
  color: white;
  font-weight: bold;
  right: -3em;
  padding-left: 3em;    padding-right: 2em;
  padding-top: .3em;    padding-bottom: .3em;
  border: 0px;
  margin: 0;
  z-index: 5;
  width: 7em;
  text-align: center;
}

/* Beta ribbon (bottom right) */
.evo-beta-ribbon-bottom-right {
  float: right;
  bottom: 1.5em;
  position: fixed;
  transform: rotate(-45deg);
  background: rgba(220, 10, 10, 0.5);
  color: white;
  font-weight: bold;
  right: -3em;
  padding-left: 3em;    padding-right: 2em;
  padding-top: .3em;    padding-bottom: .3em;
  border: 0px;
  margin: 0;
  z-index: 5;
  width: 7em;
  text-align: center;
}

/* OOBE dialog */
.oobe-body {
    min-height: 300px; /* Ensure consistent modal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.oobe-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.oobe-step-indicator {
    margin-top: 20px;
}
.oobe-step-indicator span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #bbb;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}
.oobe-step-indicator span.uk-active {
    background-color: #333;
}

/* Contextual menu */
.evo-contextmenu {
  position: fixed;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: 220px; /* Standard width for context menu */
  max-width: 100%;
  border-radius: 5px; /* Add some rounding to the corners */
}

.evo-contextmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.evo-contextmenu ul li {
  padding: 10px 20px;
  white-space: nowrap;
}

.evo-contextmenu ul li a {
  text-decoration: none;
  color: #333;
  display: block;
  width: 100%;
}

.evo-contextmenu ul li:hover {
  background-color: #e9e9e9;
}