:root {
 --sidebar-width: 520px;
}

.body {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-contents: flex-end;
  align-items: stretch;
}

#sidebar, #manual-pdf {
  padding: 10px;
  background-color: var(--almost-white);
  width: 0;
  visibility: hidden;
  opacity: 1;
  position: relative;
  right: 0;
  float: right;
  display: flex;
  flex-direction: column;
}

#sidebar .sidebar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  font-size: 1.5em;
  visibility: hidden;
}

.sidebar-header {
  background-color: var(--almost-white);
  display: flex;
  flex-direction: row;
}

.sidebar-body {
  background-color: var(--almost-white);
  cursor: pointer;
  padding-top: 40px;
  align-self: stretch;
}

#main-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding: 10px;
  float: left;
  width: -webkit-calc(100% - var(--sidebar-width));
  max-width: 100%;
}

#main-content .input-toggler {
  cursor: pointer;
  display: inline-block;
}

#toggler {
  display: none;
}

#toggler:checked ~ #sidebar,
  #toggler:checked ~ #sidebar .sidebar-body #manual-pdf
{
  width: var(--sidebar-width);
}

#toggler:checked ~ #sidebar .sidebar-header,
  #toggler:checked ~ #sidebar .sidebar-body,
  #toggler:checked ~ #sidebar .sidebar-body #manual-pdf
{
  visibility: visible;
}

.toggle-manual
{
  padding: 0;
  float: right;
  width: 220px;
  right: 0;
  position: relative;
}

.toggle-right
{
    right: 0px;
    display: flex;
    float: right;
    margin-left: auto;
    margin-right: 0;
    position: relative !important;
}

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 100%;
  }

  #sidebar {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 10;
  }

  .toggle-right
  {
    right: -10px;
    display: block;
  }

  .toggle-manual
  {
    padding: 0px;
    right: 0px;
    width: 100%;
  }
}