@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 100vh;
}
body, body * {
  box-sizing: border-box;
}
.app {
  width: 100%;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  color: #333;
  position: relative;
}
.header {
  padding: 20px;
  width: 100%;
  color: #fff;
  background-color: rgba(0, 123, 255, 1);
}
.title {
  font-size: 1.5em;
}
.title span {
  background-color: #fff;
  color: #333;
  padding: 5px;
  border-radius: 5px;
  opacity: 0.2;
}
.footer {
  width: 100%;
  text-align: center;
  padding: 20px;
  background-color: #ccc;
}
.contents {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: top;
  height: calc(100% - 127px);
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  transition: opacity 0.5s;
  overflow: hidden;
}
.pane {
  padding: 10px;
}
.pane-left {
  width: 20%;
  user-select: none;
  padding-right: 0px;
}
.pane-middle {
  width: 55%;
  padding-right: 0px;
  overflow: hidden;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.pane-right {
  width: 25%;
  opacity: 0;
}
.pane-left a {
  display: block;
}
.pane-middle > *,
.pane-middle .sheet > * {
  padding: 5px;
}
.pane-middle .sheet {
  height: 100%;
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.bread,
.sheet .bread {
  color: #ccc;
  user-select: none;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
  padding-top: 0px;
}
a, .a {
  text-decoration: none;
  color: rgba(0, 123, 255, 1);
  transition: color 0.5s, background-color 0.5s;
  padding: 5px;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 5px;
  outline: none;
}
a:hover, .a:hover, a.stay:hover, .a.stay:hover {
  background-color: rgba(0, 123, 255, 0.7);
  color: #fff;
}
a path {
  transition: fill 0.5s;
}
a:hover path {
  fill: #efefef;
}
.contents .file-list {
  padding-top: 10px;
  overflow: scroll;
  height: 100%;
}
select {
  border: 1px solid #efefef;
  outline: none;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
  font-size: 1em;
}
select:focus {
  border: 1px solid inherit;
}
.dummy {
  display: none;
}
.request {
  padding-top: 50px;
}
.pane-middle span {
  background-color: #efefef;
  color: #333;
  opacity: 1;
  display: inline-block;
  margin-bottom: 5px;
}
.request .title {
  padding-bottom: 10px;
}
.btn-auth-key {
  background-color: rgba(0, 123, 255, 1);
  color: #fff;
}
.dialog .contents {
  display: block;
}
.disabled {
  opacity: 0.5;
  pointer-events: none;
}
a.stay, .a.stay {
  background-color: rgba(0, 123, 255, 1);
  color: #fff;
}
a.red:hover, .a.red:hover,
a.red.stay:hover, .a.red.stay:hover {
  background-color: rgba(220, 53, 69, 0.7);
}
a.red.stay, .a.red.stay {
  background-color: rgba(220, 53, 69, 1);
}
input[type="text"], select {
  font-size: 1em;
  width: 100%;
  border: 1px solid #efefef;
  padding: 10px;
  outline: none;
  border-radius: 5px;
  transition: border 0.5s;
}
input[type="text"]::placeholder {
  color: #ccc;
}
input[type="text"]:focus, select:focus {
  border: 1px solid #333;
}
.show {
  opacity: 1;
}
.hide {
  opacity: 0;
}
.pane-right .buttons {
  padding-top: 5px;
  text-align: center;
}
.pane-right .row {
  margin-bottom: 10px;
}
.pane-right .row:last-child {
  margin: 0px;
}
.pane-right {
  animation: show-pane-right 2s forwards;
}
@keyframes show-pane-right {
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.pane-right .title {
  border-bottom: 1px solid #efefef;
  margin-top: 20px;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .contents {
    display: block;
  }
  .app, .contents {
    height: auto;
  }
  .pane {
    width: 100%;
    padding-right: 10px;
  }
  .pane-left {
    padding-bottom: 15px;
  }
  .pane-middle {
    padding-top: 15px;
  }
  .pane:not(:first-child) {
    padding-top: 0px;
  }
  .pane-left a {
    display: inline-block;
  }
  .contents .file-list {
    height: auto;
    overflow: inherit;
  }
}

/* optional */
.ylo-user {
  top: 8px;
  right: 5px;
  width: 100px;
}