/* X-Large button for Metro */
.button.cycle.xlarge, .button.square.xlarge {
  width: 75px;
  height: 75px;
}

.button.xlarge {
  font-size: 1.375rem;
  padding: 0 1rem;
  height: 3.7rem;
  line-height: 3.7rem;
}

.drotable td, .jogtable td {
  padding: 2px;
  vertical-align: bottom;
}

.drotable button, .dro {
  border: 1px solid lightgray;
}

.jogtable button {
  border: 1px solid lightgray;
}

#jrocell button {
  border: 1px solid lightgray;
}

#frocell button {
  border: 1px solid lightgray;
}

#trocell button {
  border: 1px solid lightgray;
}

.jogbtn:disabled {
  pointer-events: none;
}

.jogcursorbtn {
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 0px;
  margin-top: 1px;
}

.dro {
  display: block;
  text-decoration: none;
  background-color: #f8f8f8;
  color: #a7a7a7;
  width: 161px;
  height: 36px;
  position: relative;
  text-align: right;
  padding-right: 6px;
  padding-left: 6px;
  line-height: 32px;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
}

.droInput {
  display: block;
  text-decoration: none;
  background-color: #f5f6f7;
  color: #a7a7a7;
  margin: 2px;
  width: 100px;
  height: 34px;
  position: relative;
  text-align: right;
  padding-right: 6px;
  padding-left: 6px;
  line-height: 34px;
  border-radius: 2px;
  border: 1px solid #ddd;
  font-weight: 700;
  font-size: 18px;
  cursor: default;
  text-align: right;
  border: none;
  outline: none;
  display: none;
  padding-right: 20px;
}

.glossybtn:link, .glossybtn:visited {
  display: block;
  text-decoration: none;
  background-color: #f5f6f7;
  color: #a7a7a7;
  margin: 2px;
  width: 53px;
  height: 53.5px;
  position: relative;
  text-align: center;
  line-height: 50px;
  border-radius: 2px;
  border: 1px solid #ddd;
}

.glossybtn:active {
  background: #d5d6d7;
}

.glossybtn:hover {
  text-decoration: none;
  background: rgba(164, 206, 249, 0.2);
  border: 1px solid rgb(164, 206, 249);
}

​

/* CSS Mini SwitchCheckbox */
/* <label class="toggle">
        <input type="checkbox"/>
        <div>app-notifition</div>
      </label> */
.disappear-from-screen, .toggle input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.toggle-component {
  margin-bottom: 3rem;
}

.toggle-component p {
  margin: 0.7rem 0;
}

.toggle {
  display: table;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin-bottom: 0px;
}

.toggle input:focus+div {
  text-decoration: underline;
}

.toggle>div {
  cursor: pointer;
  border-radius: 14px;
  width: 36px;
  height: 17px;
  border: 1px solid lightgray;
  user-select: none;
  position: relative;
  transition: 150ms ease-out;
  font-size: 0;
}

.toggle>div:hover {
  box-shadow: 0 0 4px #4a4e51;
}

.toggle>div:before {
  will-change: translate;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  background: #4a4e51;
  border-radius: 50%;
  transition: 150ms;
}

.toggle input:checked+div {
  background: #fff;
  border-color: #lightgray;
}

.toggle input:checked+div:before {
  color: #4a4e51;
  transform: translateX(19px);
  background: #4a4e51;
}

/* End CSS mini Switch */
/* Custom size button for Macros */
.command-button-macro {
  height: 70px;
}