/**
 * Additional styles for the embedded Yarn editor
 */
html,
body {
  font-family: Helvetica;
  margin: 0;
  overflow-y: hidden;
  background-color: white;
  display: flex;
  flex-direction: column;
}

#yarn-frame {
  flex: 1;
  border: none;
  overflow-y: hidden;
}

#path-editor-header .leftSide {
  width: 100%;
}

#path-editor-header .rightButtons {
  display: flex;
  padding-bottom: 4px;
  width: 350px;
}

#path-editor-header .rightButtons > button {
  right: 0;
  margin-right: 4px;
  margin-top: 5px;
}

#path-editor-header > button,
#path-editor-header > span > button {
  background-color: white;
  border: 2px solid lightblue;
  border-radius: 3px;
  max-height: 30px;
  margin-top: 5px;
}

#path-editor-header > span > input {
  font-family: 'Courier New';
  height: 27px;
  width: 90px;
  float: left;
  padding: 4px;
  margin-top: 4px;
  font-size: 15px;
  border: 2px solid cyan;
  border-radius: 3px;
  background-color: white;
  color: darkslategrey;
}

#path-editor-header > span > label {
  height: 27px;
  color: darkcyan;
  float: left;
  margin-top: 10px;
  font-size: 15px;
}

#path-editor-header > span > * {
  padding-left: 5px;
}
