* { box-sizing: border-box; }

#nav-bar {
  background-color: white;
  width: 100%;
  height: 50px;
  top: 0;
  padding-top: 4px;
  padding-right: 60px;
  left: 0;
  position: fixed; 
}
#top-spacer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  background: white;
  z-index: 1;
}
#tablet {
  display: block;
  position: fixed;
  top: 11px;
  left: 20px;
  width: 430px;
  height: 655px;
  background-image: url(../img/tablet.png);
  background-size: 430px 655px;
  background-repeat: no-repeat;
  transition: top;
  opacity: .5;
}
.snap-showing-cms-panel #tablet {
  top: calc(63px + 11px);
}
#code-mockup {
  display: block;
  position: absolute;
  top: 53px;
  left: 502px;
  width: 520px;
  height: 440px;
  background-image: url(../img/code-mockup.jpg);
  background-size: 520px 440px;
  background-repeat: no-repeat;
  cursor: default;
  opacity: .5;
}

#learn-menu {
  top: 42px;
  right: 30px;
  position: absolute;
  display: block;
  background-color: #F0F0F0;
  width: calc(100% - 500px);
  min-height: 670px;
  border-radius: 20px;
  padding-bottom: 3px;
}

/**
 * Upward-pointing triangle above the learn menu panel.
 */
#learn-menu::before {
  position: absolute;
  content: ' ';
  border-bottom: 10px solid #f0f0f0;
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-left: 10px solid rgba(0, 0, 0, 0);
  right: 137px;
  z-index: 100;
  top: -30px;
  height: 20px;
  pointer-events: none;
} 
#learn-menu .back-button {
  width: 45px;
  color: #3557b1;
  text-decoration: none;
  cursor: pointer;
}
#learn-menu .back-button:visited {
  color: #3557b1;  
}
#tabs {
  background-color: #f0f0f0;
  padding: 0 40px;
  border-radius: 20px 20px 0 0;
  margin: 0;
}
#tabs a {
  display: inline-block;
  width: 148px;
  height: 28px;
  background: #F0F0F0 0% 0% no-repeat padding-box;
  border-radius: 12px 12px 0px 0px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #333;
  opacity: 1;
  text-decoration: none;
  text-align: center;
  padding: 7px 0 5px 0;
  margin: 0 -2px;
}
#tabs a.selected {
  background: #E0E0E0 0% 0% no-repeat padding-box;
  font-weight: bold;
}
#tabs a:visited {
  color: #333;
}
#close-button {
  float: right;
  padding: 0 15px;
  margin-top: -25px;
}
#close-button img {
  width: 10px;
}

#learn-search-bar {
  padding: 13px 0 12px 19px;
  background-color: #E0E0E0;
  border-bottom: 1px solid white;
}
#learn-search-bar input {
  margin: 0;
  padding: 7px !important;
  font-size: 12px;
  border-radius: 6px 0 0 6px !important;
  border: 0;
  padding: 12px;
  font-size: 15px;
}
#learn-search-bar input[type=text] {
  font-size: 10px;
  width: 183px;
  text-align: left;
  color: black;
  padding: 6px 10px 5px 10px !important;
  font-family: Nunito, sans-serif;
}
#learn-search-bar input[type=submit] {
  vertical-align: top;
  cursor: pointer;
  background-image: url('../img/search.png');
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
  background-color: white;
  font-weight: bolder;
  height: 1.69em;
  -webkit-height: 1.69em;
  padding: 11px 22px !important;
  margin-left: -4px;
  border-radius: 0 6px 6px 0 !important;
}
#command-tags-section {
  background-color: #E0E0E0;
  box-shadow: 0px 3px 6px #00000029;
}
#command-tags-section .header {
  display: inline-block;
  color: #666;
  font-family: 'Bungee', Impact, sans-serif;
  font-size: 24px;
  text-align: left;
  margin: 0;
  padding: 11px;
  padding-left: 19px;
}
#command-tags-section .description {
  display: inline-block;
  font-size: 11px;
  font-family: Nunito, sans-serif;
}
#command-tags-section .show-in-cms {
  border: 1px solid #b5b5b5;
  padding: 3px 1px;
  border-radius: 0;
}
#command-tags {
  padding: 0 19px;
}
#command-tags label {
  display: inline-block;
  height: 39px;
  width: auto;
  border-radius: 7px;
  color: #666;
  background-color: #e8e8e8;
  border: 0.5px solid #666;
  font-family: Nunito, sans-serif;
  font-weight: bold;
  font-size: 7px;
  text-align: center;
  margin: 0 6px 6px 0;
  padding: 7px;
  padding-top: 8px;
  cursor: pointer;
}
#command-tags label.advanced {
  border-color: #E000CF;
}
#command-tags label.hidden {
  display: none;
}
#command-tags input[type="radio"] {
  display: none;
}
#command-tags label:hover {
  background-color: #666;
  color: white;
}
#command-tags input[type="radio"]:checked+label,
#command-tags label.selected {
  background-color: #5E90DC;
  color: white;
  border-color: #5E90DC;
}
#command-tags input[type="radio"]:checked+label.advanced,
#command-tags label.selected.advanced {
  background-color: #E000CF;
  border-color: #E000CF;
}
#command-tags i {
  display: block;
  font-size: 12px;
}
#show-everything {
  display: inline-block;
  color: #3557b1;
  font-family: Nunito, sans-serif;
  font-size: 10px;
  margin: 2px 0 13px 19px;
  padding: 3px 6px;
  cursor: pointer;
}
#show-everything:hover {
  background-color: #ccc;
  border-radius: 5px;
}
#show-everything.selected {
  background-color: #ccc;
  border-radius: 5px;
}
#include-advanced {
  display: inline-block;
  float: right;
  color: #666;
  text-align: right;
  font-family: Nunito, sans-serif;
  font-size: 10px;
  padding: 6px 21px 13px 0;  
}
.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 2px;
  vertical-align: middle;
  margin-top: -3px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: '';
  height: 6px;
  width: 6px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #e000cf;
}
input:checked + .slider:before {
  -webkit-transform: translateX(5px);
  -ms-transform: translateX(5px);
  transform: translateX(5px);
}
.slider.round {
  border-radius: 19px;
}
.slider.round:before {
  border-radius: 50%;
}

/* Sticky stylings */
.sticky {
  position: sticky;
  top: 0;
  z-index: 9999;
}
#close-button.sticky {
  top: 3px;
}
#learn-search-form.sticky {
  top: 28px;
}

#commands-list-container {
  margin-top: -16px;
}
#commands-list {
  padding: 12px 19px;
}
#commands-list a {
  text-decoration: none;
  display: inline-block;
}
#commands-list .hidden {
  display: none;
}
#commands-list .command {
  display: inline-block;
  width: 154px;
  height: 21px;
  background-color: white;
  color: #666;
  border-radius: 6px;
  font-family: 'Source Code Pro', monospace;
  font-size: 11px;
  padding: 4px;
  padding-left: 8px;
  margin-bottom: 6px;
}
#commands-list .dot.command {
  padding-left: 2px;
}
#commands-list .command.advanced  {
  box-shadow: inset 0 0 0 0.5px #E000CF;
}
#commands-list .command:hover {
  background-color: #666;
  color: white;
}
#commands-list .description {
  display: inline-block;
  font-family: Nunito, sans-serif;
  font-size: 11px;
  color: #595B60;
  padding: 0 7px;
  height: 21px;
}
#add-new-command {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 7px;
  background-color: #e8e8e8;
  border-radius: 6px;
  padding: 5px;
}
#add-new-command:hover {
  position: relative;
  top: -1px;
  left: -1px;
}
#add-new-command i {
  font-size: 11px;
}


/* Command Details page */
#command-page {
  width: 385px;
}
#command-details {
  padding: 12px 19px 19px 19px;
}
.back-button {
  display: block;
  text-decoration: none;
  font-size: 10px;
  width: 70px;
}

.skill-level-icon {
  display: none;
  width: 40px;
  height: 40px;
  float: right;
  position: inherit;
  margin-top: -5px;
  margin-right: 5px;
  border-radius: 80px;
  background-color: #c7c7c7;
  color: white;
  font-weight: bold;
}
.skill-level-icon.beginner {
  display: block;
}
.skill-level-icon.beginner:before {
  font-family: 'Font Awesome 5 Pro';
  font-size: 22px;
  content: '\f6d8';
  display: inline-block;
  margin-top: 10px;
  margin-left: 9px;
}
.skill-level-icon.advanced {
  display: block;
}
.skill-level-icon.advanced:before {
  font-family: 'Font Awesome 5 Pro';
  font-size: 19px;
  content: '\f6d5';
  display: inline-block;
  margin-top: 10px;
  margin-left: 8px;
}

#learn-menu h1,
#learn-menu h2,
#learn-menu h3 {
  font-family: 'Bungee', Impact, sans-serif;
}
#learn-menu p {
  hyphens: none;
  color: #000000;
  font-family: Nunito, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.364;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;

  /* 
    This property is not supported in Firefox and I'm not sure it will have
    much of an effect anyway.
    TODO(zach) Do some testing once the learn menu gets more fleshed out and
    remove if it is unnecesary or if it behaves differently between browsers.
  */
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  /* 
    This property is not supported in Firefox and I'm not sure it will have
    much of an effect anyway.
    TODO(zach): Same comment as the one about orphans. Make sure whatever we
    do here, we do to the other instances within this file.
  */
  widows: 1;
}

/* Expander Toggle */
p.expander-toggle {
  background-color: #cccccc;
  color: #000000;
  font-family: Lato, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 10px;
  margin-left: 9px;
  margin-right: 0;
  margin-top: 18px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  widows: 1;
}

/* Command Name */
#command-name {
  background-color: #666;
  color: #ffffff;
  font-family: 'Source Code Pro Medium', serif;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 1.2;
  margin: 16px 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  widows: 1;
  padding: 6px 10px;
  border-radius: 7px;
  display: inline-block;
  clear: both;
}

/* Description Sentence */
#description-sentence p {
  hyphens: none;
  color: #000000;
  font-family: Nunito, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.333;
  margin-bottom: 3px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 3px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  widows: 1;
}
#learn-menu h2 code {
  font-family: 'Source Code Pro Medium', serif;
}

/* Variation */
#learn-menu h3 {
  color: #4c4c4c;
  font-family: 'Bungee', Impact, sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 17px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  widows: 1;
  border-top: 2px dotted #4c4c4c;
  padding-top: 7px;
}

/* Subhead */
#learn-menu h4 {
  color: #808080;
  font-family: 'Bungee', Impact, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 22px;
  margin-bottom: 10px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: uppercase;
  widows: 1;
  border-top: 1px dotted #808080;
  padding-top: 5px;
}

/* Links */
#learn-menu ol li a,
#learn-menu ul li a,
#learn-menu p a {
  color: #3557b1;
  font-family: Nunito, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.364;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 10px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: -10px;
  text-transform: none;
  widows: 1;
}

/* Syntax Diagram */
#learn-menu h5 {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  min-width: 305px;
  background-color: #ffffff;
  color: #000000;
  font-family: 'Source Code Pro Medium', serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 12px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  widows: 1;
}

#learn-menu h6 {
  display: block;
  background-color: rgb(255, 244, 203);
  padding-left: 3em;
  font-size: 11px;
  font-family: Nunito, sans-serif;
  font-weight: normal;
  line-height: 1.364;
}
#learn-menu .hide-in-cms h6 {
  display: none;
}

/* ul2 Note Bullet */
#learn-menu ul li {
  hyphens: none;
  color: #000000;
  font-family: Nunito, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.364;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 1;
  padding: 0 0 7px 9px;
}

/* ul1 Paramter Bullet */
#learn-menu ol {
  margin-top: 10px;
}
#learn-menu ol li {
  hyphens: none;
  color: #000000;
  font-family: Nunito, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.364;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 1;
  padding: 0 0 7px 0;
}
#learn-menu ol li:before {
  content: '';
}

#learn-menu li {
  border-bottom: 1px solid #ccc;
  margin-left: -24px;
  margin-top: 6px;
}
#learn-menu li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

span.bold {
  color: #000000;
  font-style: normal;
  font-weight: bold;
}

span.code {
  font-family: 'Source Code Pro Semibold', serif;
  font-style: normal;
  font-weight: 600;
}

span.keyword {
  color: #000093;
  font-family: 'Source Code Pro', serif;
  font-style: normal;
  font-weight: bold;
}

span.line-number {
  color: #ff8a00;
}

span.number {
  color: #0079b9;
}

.optional-float-right {
  float: right;
  padding-right: 5px;
  color: rgb(118,118,118);
  text-transform: uppercase;
  hyphens: none;
  font-family: Nunito, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.364;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: -25px;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  widows: 1;
}

span.parameter-1 {
  color: #b60000;
  font-family: 'Source Code Pro Semibold', serif;
  font-style: normal;
  font-weight: 600;
}

span.parameter-2 {
  color: #cd5600;
  font-family: 'Source Code Pro Semibold', serif;
  font-style: normal;
  font-weight: 600;
}

span.parameter-3 {
  color: #009900;
  font-family: 'Source Code Pro Semibold', serif;
  font-style: normal;
  font-weight: 600;
}

span.parameter-4 {
  color: #005e5f;
  font-family: 'Source Code Pro Semibold', serif;
  font-style: normal;
  font-weight: 600;
}

span.parameter-5 {
  color: #3e0087;
  font-family: 'Source Code Pro Semibold', serif;
  font-style: normal;
  font-weight: 600;
}

span.string {
  color: #c500b5;
}

/**
 * Customization of the CMS editor panel.
 */
#snap-review-link {
  display: none;
}
#snap-cms-toolbars {
  min-width: 670px;
}
#snap-cms-toolbar-overlay {
  min-width: 670px;
}
.ql-snow .ql-picker.ql-header {
  width: 128px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label {
  white-space: nowrap;
}

.ql-snow .ql-picker.ql-header .ql-picker-item  {
  white-space: nowrap;
}
 
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'VariationHead';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Subheader';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Syntax Diagram';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Comment';
}

/**
 * Customization of the CMS Code Translations.
 */

/* Example Code */
#learn-menu pre {
  font-size: 11px !important;
  color: #333;
  line-height: 1.455;
  border: none;
  width: calc(100% - 4px);
  left: 1px;
  top: 10px;
  padding-left: 30px !important;
  z-index: 999;
}
#learn-menu pre.ql-syntax {
  font-size: 11px !important;
  color: #333;
  background: white;
  width: initial;
  left: unset;
  top: unset;
}
#learn-menu pre.ql-syntax::before,
#learn-menu .ql-syntax::before {
  margin-top: 0;
  margin-left: -24px;
  width: 15px;
  line-height: 16px;
  font-size: 11px;
}
#learn-menu .code-line:hover pre {
  background-color: #eee;
  width: calc(100% - 2px);
  left: 0;
  padding-left: 31px !important;
}
#learn-menu .visible pre {
  background-color: #eee;
  width: calc(100% - 2px);
  left: 0;
  padding-left: 31px !important;
}
#learn-menu .code-line pre::before {
  margin-top: -5px;
  margin-left: -35px;
  font-size: 11px;
}
.code-wrapper {
  margin-top: -30px;
  margin-bottom: 36px;
}
.code-line.start.visible::before,
.code-line.start-single-line::before,
.code-line.visible+.code-line.visible::before,
.code-line.visible+.code-line.end::before,
.code-line.start::before,
.code-line.visible+.code-line::before,
.code-line.end::before,
.code-line.visible::before {
  height: 30px !important;
  top: 3px !important;
  border: none !important;
  background: white;
}
.code-line:hover::after,
.code-line.visible::after {
  display: none;
}


/**
 * Styles for the command variations panels.
 */
.variation-toggle-panel {
  height: auto;
  max-height: 2500px;
  min-height: 34px;
  overflow: hidden;
}
.variation-toggle-panel.collapsed {
  max-height: 44px;
}
.variation-toggle-header, .variation-toggle-footer {
  font-size: 12px;
  background: #ccc;
  padding: 6px 12px;
  border-radius: 1px;
  cursor: pointer;
  user-select: none;
  margin: 12px 0;
}
.variation-toggle-panel .variation-toggle-header {
  display: none;
}
.variation-toggle-panel.collapsed .variation-toggle-header {
  display: block;
}


/**
 * Grid View stylings.
 */
#grid-view {
  position: absolute;
  top: 50px;
  left: 0;
  font-family: Arial, Helvetica, sans-serif;
}
#sticky-table-header {
  position: sticky;
  top: 50px;
  z-index: 2;
}
#grid-view table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: solid #e0e0dc;
  border-width: 1px 0 0 1px;
  background: white;
  table-layout: fixed;
  z-index: 1;
}
#grid-view th,
#grid-view td {
  border: solid #e0e0dc;
  border-width: 0 1px 1px 0;
  vertical-align: bottom;
  padding: 6px 8px;
  font-size: 12px;
  width: 100px;
}
#grid-view th {
  border-bottom: 5px solid #e0e0dc;
  padding-top: 15px;
}
#grid-view td {
  overflow-wrap: break-word;
  line-height: 1.42;
  padding-left: 9px;
}
#grid-view td.data {
  background-color: rgb(184,225,204);
}
#grid-view td.empty {
  background-color: rgb(244,204,204);
}
#grid-view td.optional {
  background-color: rgb(239,239,239);
}
#grid-view td.comments {
  background-color: rgb(255,242,204);
}
#grid-view td.snap-editable {
  outline: 1px solid #e0e0dc;
  outline-offset: -1px;
}
#grid-view td .ql-editor {
  outline: 1px solid white;
}
#grid-view td.snap-editable,
#grid-view td .ql-editor {
  padding: 6px 8px;
  outline-width: inherit;
}
#grid-view td.snap-editable:focus,
#grid-view td .ql-editor:focus {
  outline: 1px solid #1a73e8;
}
#grid-view td p {
  margin-bottom: 0;
}
#grid-view a {
  color: #3557b1;
  text-decoration: none;
  float: right;
}
#grid-view i.selected {
  font-weight: 600;
}
#commands-list-table {
  background: white;
  opacity: 1;
}
#commands-list-table.loading {
  background: #efefef;
  opacity: .35;
}

.tag-checkbox-column {
  vertical-align: top;
  display: inline-block;
  text-align: left;
  margin: 0 15px;
}

body:not(.snap-showing-cms-panel) input[type=number].snap-editable {
  border: none;
  -moz-appearance: textfield;
}
body:not(.snap-showing-cms-panel) input[type=number].snap-editable::-webkit-outer-spin-button,
body:not(.snap-showing-cms-panel) input[type=number].snap-editable::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Fix a bug creating lots of whitespace at the bottom of the table.
 * TODO(scott): Consider rolling this fix into the main snap-cms.css
 */
#grid-view .show-in-cms {
  overflow: hidden;
  height: 12px;
}
body.snap-showing-cms-panel #grid-view .show-in-cms {
  overflow: visible;
  height: auto;
}
body.snap-showing-cms-panel #grid-view .hide-in-cms {
  overflow: hidden;
  height: 12px;
}