:root {
  --gray: #d8e2d6;
  --green: #3baa5f;
  --primary: #17517d;
  --radius: 3px;
}

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: safe center;
  align-items: safe center;
  font-family: sans-serif;
}

select,
button {
  cursor: pointer;
  padding: 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #17517d;
  color: var(--primary);
  background: white;
  border-radius: 3px;
  border: 2px solid #17517d;
  border: 2px solid var(--primary);
}

select:hover, button:hover {
    color: white;
    background-color: #17517d;
    background-color: var(--primary);
  }

select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="gray" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>');
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: calc(100% - 10px) center;
}

#app {
  height: 100%;
  display: grid;
  width: 100%;
  grid-template-columns: 300px auto;
  grid-template-areas:
    "left right"
  ;
}

.site-title {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.sidebar {
  padding: 20px;
  grid-area: left;
  background: #d8e2d6;
  background: var(--gray);
}

.main {
  padding: 20px;
  margin: 0;
  grid-area: right;
  width: auto;
  overflow-y: auto;
}

h3 button {
    float: right;
    padding: 5px 10px;
  }

ul {
  padding: 0;
  margin: 0 0 30px 0;
  list-style: none;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

ul li {
    display: flex;
    background: white;
    padding: 10px;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
  }

ul li button {
      margin-left: auto;
      padding: 5px 10px;
    }

ul li.selected,
    ul li:hover {
      color: white;
      background-color: #17517d;
      background-color: var(--primary);
    }

ul li + li {
      margin-top: 2px;
    }

.file {
  display: flex;
}

.file .file-name {
    margin-right: auto;
  }

.language-code {
  padding: 3px;
  background: #d8e2d6;
  background: var(--gray);
  display: block;
  width: 20px;
  text-align: center;
  border-radius: 3px;
  color: #17517d;
  color: var(--primary);
}

.language-code.translated {
    background: #3baa5f;
    background: var(--green);
    color: white;
  }

.language-code + .language-code {
    margin-left: 5px;
  }

.language-switcher {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}