.keypad-input .mq-editable-field .mq-cursor:not(:only-child),
.keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child
 {
    /* HACK(charlie): Magic numbers to properly size and position the vertical
       cursor, which is visible whenever the cursor is not alone in its parent,
       with the exception that it's also visible when the entire input is
       empty. */
    height: 20px !important;
    vertical-align: middle !important;
    margin-top: -5px !important;
}

.keypad-input .mq-editable-field .mq-cursor {
    border-color: #78c008;

    border-left: 2px solid #78c008 !important;
    border-radius: 1px;

    margin-left: -1px !important;
    margin-right: -1px !important;

    /* Fade the cursor in and out, overriding MathQuill's default behavior. */
    /* NOTE(charlie): The 500ms animation length perfectly matches MathQuill's
       own frequency for toggling the application of the .mq-blink class. If we
       were to change this animation length at all, we'd need to modify
       MathQuill as well to match. */
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 500ms ease-out !important;
}

.keypad-input .mq-editable-field .mq-cursor.mq-blink {
    visibility: visible !important;
    opacity: 0 !important;
    transition: opacity 500ms ease-in !important;
}

.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
    border: 2px solid !important;
    padding: 0 4px 0 4px;

    border-color: #78c008 !important; /* bright-green color */
    transition: border-color 500ms ease-out !important;
    opacity: 1 !important;
}

.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor.mq-blink:only-child {
    border-color: #CCC !important; /* grey color */
    transition: border-color 500ms ease-in !important;
    opacity: 1 !important;
}

.keypad-input .mq-empty {
  background: transparent !important;
}

/* also adds empty block styling to elements with .mq-hasCursor but without a cursor element (this happens where the cursor is when the math input loses focus) */
.keypad-input .mq-empty:not(.mq-root-block):after, .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
  visibility: visible !important;

  /* hides the 'c' content added by MathQuill to measure the width */
  color: transparent;

  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 1px;
  padding: 0 4px 0 4px;
  margin-left: -1px;
  margin-right: -1px;
}

.keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
  border-color: #ffffff;
}

.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
  /* place a c inside for sizing the cursor (for the case explained above); normally, MathQuill already does this for .mq-cursor */
  content: 'c';
}

.keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
.keypad-input .mq-editable-field .mq-selection .mq-non-leaf
{
    background: #78c008 !important;
    color: white !important;
    border-color: white !important;
}

.keypad-input .mq-math-mode .mq-selection .mq-scaled,
.keypad-input .mq-editable-field .mq-selection .mq-scaled
{
    background: transparent !important;
    color: white !important;
    border-color: transparent !important;
}

.keypad-input .mq-selection {
    display: inline-block !important;
    background: #78c008 !important;
    color: white !important;
    border-color: white !important;
}

// The keypad sets its own color styles for KaTeX elements that are rendered in
// its keys, so prevent any external styling.
.keypad-container .katex {
    color: inherit !important;
}