/***********************/
/* FRAME PICKER WIDGET */
/***********************/

.frame-picker-wrapper {
  width: 150px;
  height: 150px;
  border: 3px solid #666;
  border-radius: 3px;
}

.frame-viewer {
  width: 100%;
  height: calc(100% - 25px);
  display: flex;
  align-items: center;
  justify-content: center;

}

.frame-viewer > canvas,
.frame-viewer > img {
  max-width: 100%;
  max-height: 100%;
}

.frame-nav {
  display: flex;
  width: 100%;
  height: 24px;
  border-top: 1px solid #666;
}

.frame-nav .button {
  flex-shrink: 0;
  border-radius: 0;
  height: 24px;
  background-color: #3f3f3f;
}

.frame-nav .button[disabled],
.frame-nav .button[disabled]:hover {
    background-color: #aaa;
}

.frame-nav .button + .button {
  border-left: 1px solid #333;
}

.frame-nav-input {
  min-width: 1px;
  border-style: none;
  height: 24px;
  text-align: center;
}