/* Ignore devtools usual resizer */
stack.browserStack.os-mode box.devtools-responsiveui-resizehandle,
stack.browserStack.os-mode box.devtools-responsiveui-resizebar {
  display: none;
}

/* Gives responsive mode a phone look'n feel */
stack.browserStack.os-mode {
  padding: 60px 15px 0;

  border-radius: 25px / 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #FFFFFF;
  border-bottom-width: 0;
  
  background-color: #353535;
  
  box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset !important;

  background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
  min-width: 320px;
}

#os-hardware-buttons {
  -moz-appearance: none;
  padding: 20px;
  
  border: 1px solid #FFFFFF;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-width: 0;

  box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

  background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
}

#os-home-button {
  width: 40px;
  height: 30px;
  list-style-image: url("chrome://browser-helper.js/content/icons/home.png");
  -moz-image-region: rect(0, 12px, 12px, 0);
}

#os-home-button:hover:active {
  -moz-image-region: rect(0, 24px, 12px, 12px);
}

#os-sleep-button {
  -moz-appearance: none;
  /* compensate browserStack top padding */
  margin-top: -67px;
  margin-right: 10px;

  min-width: 10px;
  width: 50px;
  height: 5px;

  border: 1px solid #444;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom-color: transparent;

  background-image: -moz-linear-gradient(top, #111 11%, #333 56%);
}

#os-sleep-button:hover:active {
  background-image: -moz-linear-gradient(top, #aaa 11%, #ddd 56%);
}

#os-volume-buttons {
  margin-left: -29px;
}

#os-volume-up-button,
#os-volume-down-button {
  -moz-appearance: none;
  border: 1px solid red;
  min-width: 8px;
  height: 40px;

  border: 1px solid #444;
  border-right-color: transparent;

  background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
}

#os-volume-up-button:hover:active,
#os-volume-down-button:hover:active {
  background-image: -moz-linear-gradient(right, #aaa 11%, #ddd 56%);
}

#os-volume-up-button {
  border-top-left-radius: 12px;
}

#os-volume-down-button {
  border-bottom-left-radius: 12px;
}