/* reset from https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.2;
  font-size: 20px;
}
p {
    font-size: 1.2em;
}
input,
button,
textarea,
select {
  font: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-weight: 500;
}

h1 {
  font-size: 2em;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin-top: 0.5em;
}
p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root {
  --white: #ffffff;
  --black: #333333;
  --border_gray: #c1bbaf;
  --bg_gray: #d3cfc8;

  --gold: gold;
  /*--bronze: #cf6c26;*/
  --bronze: #db9e0f;

  --selection: #4fb6ff;

  --inactive_border: #a9a49b;
  --inactive_background: #c5c1b9;
  --inactive_overlay: #d9d6cfa8;
  --inactive_text: #8b877f;
}

/* TODO: make proper web font */
@font-face {
  font-family: "Source Sans 3";
  src: url("/ss3/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/ss3/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

body {
  position: relative;
  margin: auto;
  background: var(--bg_gray);
  color: var(--black);

  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-feature-settings:
    "cv01" on,
    "cv04" on,
    "cv03" on;
}

.screen_container {
  /* background: red; */
  position: absolute;

  position: relative;

  width: 504px;
  max-width: 100%;

  /* top: 50%; */
  /*left: 50%; */
  /* transform: translate(-50%, -50%); */
  /*transform: translate(-50%, 0);*/
  height: 100%;
  margin: 0 auto;
}
.copyright {
  font-size: 75%;
}

section {
  /* background: red; */
  /* position: absolute; */

  /* position: relative; */

  /* width: 500px; */
  /* max-width: 100%; */

  /* /1* top: 50%; *1/ */
  /* left: 50%; */
  /* /1* transform: translate(-50%, -50%); *1/ */
  /* transform: translate(-50%, 0); */
}

section#instructions p {
  line-height: 1.2;
  margin-bottom: 0.5em;
}
/* section.show { */
/* 	opacity: 1; */
/* 	z-index: 5; */
/* 	-webkit-transform: translateX(0px); */
/* 	-moz-transform: translateX(0px); */
/* 	transform: translateX(0px); */
/* } */

section#game header {
  min-height: 100px;
}

/** ---------------Containers-------------- **/

section#bookMenuScreen .header,
section#aboutScreen .header,
section#resetScreen .header {
  float: left;
  width: 100%;
}

/** ------------end of containers------------- **/



.level_icon:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.icon_concealed,
.icon_concealed:hover {
  border: solid 2px var(--inactive_border);
}
.icon_concealed:before,
.icon_concealed:hover:before {
  border: solid 2px var(--inactive_border);
  background: var(--inactive_background);
}

.icon_locked,
.icon_locked:hover {
  border: solid 2px var(--inactive_border);
}

.icon_locked:before,
.icon_locked:hover:before {
  box-sizing: border-box;
  border: solid 2px var(--inactive_border);
  /*background: #cbc7bfba;*/
  background: var(--inactive_overlay);

  /*box-shadow: inset 0px 0px 40px 10px var(--inactive_background);*/
  /*box-shadow: inset 0px 0px 40px 10px #b7b3ac; */
}

.icon_hidden,
.icon_hidden:hover {
  opacity: 0.6;
}
.icon_hidden:before,
.icon_hidden:hover:before {
  box-sizing: border-box;
  border: solid 1px var(--inactive_border);
  background: rgba(217, 214, 207, 0.3);
}

.icon_unsolved {
}

.icon_glow {
  border-color: var(--selection);
  animation: pulse-animation 2s infinite;
}
.icon_glow:before {
}

.icon_suboptimal {
  border: solid 2px var(--bronze);
}
.icon_suboptimal:before {
  border: dashed 3px var(--bronze);
  /*box-shadow: inset 0px 0px 13px 3px #ffd700;*/
}

.icon_optimal {
  border: solid 2px var(--gold);
}
.icon_optimal:before {
  border: solid 2px var(--gold);
  box-shadow: inset 0px 0px 20px 0px var(--gold);
}


#iconContainer {
  /*text-align: center;*/

  display: grid;
  grid-template-columns: repeat(auto-fill, 63px);
  justify-content: center;
}

div#iconContainer.deleting .level_icon:before {
  border: solid 2px red;
}

div#iconContainer.selectingIcon .level_icon:before {
  border: dashed 2px lime;
}

div#iconContainer.togglingHidden .level_icon:before {
  /* border: dashed 2px rgb(177, 177, 177); */
}

.level_icon.bookIconRepresentative:before {
  border: solid lime;
}

.gameCanvas {
  /* background-color: red; */
  display: block;
  touch-action: none;
}


/** Buttons **/

button,
.level_icon {
  background: white;
  border: solid 2px var(--border_gray);
  margin: 2px;
  /*box-shadow: 1px 1px #9b9b9b;*/
  color: var(--black);
}

.level_icon {
  vertical-align: top;
}

button:hover,
.level_icon:hover {
  background: white;
  border: solid 2px #6b6762;
  margin: 2px;
  /*box-shadow: 1px 1px #555555;*/
  color: var(--black);
}

button.action {
  font-size: 125%;
  padding: 0.5em 1em;
  margin: 10px 0px;
  /* border-width: 4px; */
}

button.action:enabled {
  border-color: var(--selection);
  animation: pulse-animation 2s infinite;
}

button.action:enabled:hover {
  border: solid 2px #6b6762;
}

button.in_yo_face {
  border-color: var(--selection);
  animation: huge-pulse-animation 2s infinite;
}

button.hint_suggest_restart {
  border-color: #ff0000;
  animation: red-pulse-animation 1s infinite;
}

button:disabled,
button[disabled] {
  background: var(--inactive_background);
  border-color: var(--inactive_border);
  color: var(--inactive_text);
}

button.drawModeActive {
  background: #4CAF50;
  border-color: #45a049;
  color: white;
}

button.drawModeActive:hover {
  background: #45a049;
  border-color: #3d8b40;
  color: white;
}


@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 5px 0px rgb(115 191 241 / 50%);
  }

  100% {
    box-shadow: 0 0 10px 20px rgb(115 191 241 / 0%);
  }
}

@keyframes huge-pulse-animation {
  0% {
    box-shadow: 0 0 5px 0px rgb(115 191 241 / 50%);
  }

  50% {
    box-shadow: 0 0 5px 20px rgb(115 191 241 / 50%);
  }
  100% {
    box-shadow: 0 0 5px 0px rgb(115 191 241 / 50%);
  }
}

@keyframes red-pulse-animation {
  0% {
    box-shadow: 0 0 5px 0px rgba(255, 0, 0, 0.5);
    border-color: #ff0000;
  }

  50% {
    box-shadow: 0 0 10px 10px rgba(255, 0, 0, 0.7);
    border-color: #ff4444;
  }
  100% {
    box-shadow: 0 0 5px 0px rgba(255, 0, 0, 0.5);
    border-color: #ff0000;
  }
}

.finishedLevel,
.finishedLevelPerfect,
.finishedChallengeHistogram,
.viewHistogramOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}

.finishedLevel {
  box-shadow: inset 0 0 0px 0px rgba(0, 0, 0, 0);
}

.finishedLevelPerfect {
  box-shadow: inset 0 0 0px 0px rgba(255, 215, 0, 0);
}

.finishedLevel.showing {
  animation: fadeIn 1.0s ease-out forwards;
}

.finishedLevelPerfect.showing {
  animation: fadeIn 0.5s ease-out forwards;
}

.finishedLevelPerfect.withGoldenGlow.showing {
  animation: fadeInWithGoldenGlow 0.5s ease-out forwards;
}

.finishedChallengeHistogram.showing {
  animation: fadeIn 1.0s ease-out forwards;
}
.viewHistogramOverlay.showing {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Auth Modal Overlay */
.authModalOverlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

.authModalOverlay.showing {
  animation: fadeIn 0.2s ease-out forwards;
  pointer-events: auto;
}

.authModalBackdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.authModalContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background-color: #fdfdfd;
  border: solid 3px #bdbcbc;
  border-radius: 20px;
  padding: 2em;
  z-index: 1001;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.authCloseButton {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  font-size: 2em;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.authCloseButton:hover {
  color: var(--black);
}

.authModalContent h1 {
  font-size: 2em;
  margin-top: 0;
  /* margin-bottom: 1em; */
  text-align: center;
}

.authModalContent label {
  font-weight: 500;
}

.authModalContent input[type="email"],
.authModalContent input[type="password"] {
   width: 100%;
  padding: 0.5em;
  font-size: 1em;
  border: 2px solid #c1bbaf;
  border-radius: 5px;
  margin-bottom: 0.5em;
}

.authModalContent input[type="email"]:focus,
.authModalContent input[type="password"]:focus {
  outline: none;
  border-color: #2da6fd;
}

.authModalContent button[type="submit"] {
  margin-top: 0.5em;
  font-size: 1.25em;
}

.authModalContent button[type="submit"]{
  margin-top: 0.5em;
  padding: 0.6em;
  width: 100%;
  font-size: 1.1em;
  border: 3px solid #aeaba5;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-weight: 500;
}

.authModalContent button[type="submit"]:hover:not(:disabled),
 {
  border-color: #444241;
}

.authModalContent button[type="submit"]:disabled,
 {
  opacity: 0.6;
  cursor: not-allowed;
}

.authModalContent #authToggleLink {
  color: #2da6fd;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.95em;
}

.authModalContent #authToggleLink:hover {
  color: #006bc9;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInWithGoldenGlow {
  from {
    opacity: 0;
    box-shadow: inset 0 0 0px 0px rgba(255, 215, 0, 0.44);
  }
  to {
    opacity: 1;
    box-shadow: inset 0 0 60px 24px rgba(255, 215, 0, 0.44);
  }
}

.finishedLevelInside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.finishedChallengeHistogram .finishedLevelInside,
.viewHistogramOverlay .finishedLevelInside {
  width: 95%;
  background-color: #fdfdfd;
  border: solid;
  border-color: #bdbcbc;
  border-width: 3px;
  border-radius: 3px;
}

.finishedChallengeHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-bottom: 0.1em;
}

.challengeLevelPreview {
  flex-shrink: 0;
  border: solid 2px var(--border_gray);
  position: relative;
  bottom: 0.3em;
}

.finishedLevelInside h1 {
  font-size: 3em;
  font-weight: 600;
  margin-bottom: 0.1em;
  margin-top: 0;
}

.finishedLevelInside h2 {
  font-size: 1.75em;
  font-weight: 400;
  margin-bottom: 0.2em;
  margin-top: 0.1em;
  /* opacity: 0.8; */
}

.finishedLevelButtons {
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5em;
}

.finishedLevel button,
.finishedLevelPerfect button,
.finishedChallengeHistogram button,
.viewHistogramOverlay button,
/* .modal button, */
adsfadsfasd
 {
  font-size: 1.6em;
  padding: 0.3em 0.8em;
  /* min-width: 120px; */
  display: inline-block;
  border-width: 3px;

  border-radius: 10px;
  /* border-color: #9b9891; */
  border-color: #aeaba5;
}
.finishedLevel button:hover,
.finishedLevelPerfect button:hover,
.finishedChallengeHistogram button:hover,
.viewHistogramOverlay button:hover,
/* .modal button:hover, */
adfadfadsa
 {
  border-color: #444241;
}


.finishedLevelPerfect .finishedLevelNextButton,
.finishedLevel .finishedLevelNextButton {
  font-weight: 600;
  color: #333333;
  /* background-color: #e9feff; */
  background-color: #edfcfd;
  border-color: #44aaf3;
  border-color: #2da6fd;

  border-radius: 10px;
  transition:
  /* background-color 0.2s ease */
   border-color 0.2s ease
  , transform 0.1s ease
  ,box-shadow 0.2s ease
  ;
  /* box-shadow: inset 0 0 10px 2px #e9feff; */
  box-shadow: inset 0 0 10px 3px #bdfcff;
}


.finishedLevel .finishedLevelNextButton:hover,
.finishedLevelPerfect .finishedLevelNextButton:hover,
.finishedChallengeHistogram .finishedLevelNextButton:hover {
  /* background-color: #b8e8ff; */
  background-color: #d3f2ff;
  box-shadow: inset 0 0 10px 5px #bdfcff;

  border-color: #006bc9;
  /* transform: scale(1.05); */
}

.finishedChallengeHistogram .finishedLevelNextButton {
  font-weight: 600;
  color: #333333;
  background-color: #edfcfd;
  border-color: #2da6fd;
  border-radius: 10px;
  transition: border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 0 10px 3px #bdfcff;
}

.histogramControls {
  display: flex;
  position: absolute;
  top: -1px;
  right: -1px;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5em;
}

.histogramControls label {
  font-size: 1.1em;
  font-weight: 500;
}

.histogramTypeSelect {
  font-size: 0.85em;
  border: 1px solid #c1c1c1;
  cursor: pointer;
  color: #202020;
  padding: 0 0.2em;
  text-align: center;
  background: #e9e9edb5;
}

.histogramTypeSelect:hover {
  border-color: #444241;
}

#editor select {
  font-size: 0.8em;
}

.histogramContainer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  background-color: rgb(240, 240, 240);
  padding: 10px;
  border: solid 2px #d3cfc8;
  touch-action: none;
}

.histogramBars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 600px;
  height: 150px;
  border-bottom: 2px solid #ccc;
  position: relative;
  bottom: -2px;
}

.histogramBarContainer {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  max-width: 60px;
  gap: 0.2em;
}


.histogramBar {
  width: 100%;
  background-color: #2da6fd;
  /* min-height: 4px; */
  transition: background-color 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.histogramBar.playerBar {
  background-color: red;
}

.histogramBarCount {
  font-size: 0.85em;
  color: #666;
  flex-shrink: 0;
  min-height: 1.2em;
}

.histogramBarLabel {
  font-size: 0.9em;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.histogramBarContainer {
  position: relative;
}

.playerTriangle {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 16px solid #ff0000;
}

.histogramTooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 0.85em;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.histogramTooltip.visible {
  opacity: 1;
}

.histogramTooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.85);
}

.challengeFinishedButtons {
  font-size: 0.8em;
}

.content {
  position: relative;
  clear: both;
  /* background: red */
}

.hint_blocking_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
  pointer-events: auto;
}

.hint_arrow_overlay {
  position: absolute;
  z-index: 101;
  pointer-events: none;
}

.hint_arrow_overlay svg {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
}

#challengeIconContainer {
  position: relative;
  clear: both;
}

.challenge_icon_wrapper {
  display: flex;
  align-items: center;
  gap: 1em;
}

.challenge_statistics {
  display: flex;
  flex-direction: column;
  font-size: 0.9em;
}

.challenge_stat_line {
  white-space: nowrap;
}

.title {
  font-size: 1.2em;
  font-weight: 500;
}

#LevelIndicator {
  font-size: 1.2em;
  margin-left: 0.1em;
}

.histogramViewIcon {
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  vertical-align: middle;
}

.histogramViewIcon:hover {
  opacity: 1;
}

.histogramViewIcon svg {
  color: #333;
}

.IndicContainer {
  line-height: 1.2;
  /* padding: 8px; */
}

section header {
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 4px;
}

.textShower {
  font-style: italic;
  margin-top: 0.2em;
  margin-right: 0.2em;
  line-height: 1.1;
  font-size: 0.9em;
}

.variant_container {
   position: relative;
  height: 100%;
  width: 100%;
}

.variant_container > * {
  /* background: red; */
  display: none;

}

.variant_container > .variant_shown {
  display: block;
}

.screen {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.bookSummary {
  background: darkgray;
  margin-top: 2px;
  margin-bottom: 2px;
  /* clear: both; */
  border: solid 1px darkgray;
}
.bookSummary:hover {
  border: solid 1px #555555;
}

.bookSummary canvas {
  /* float: left; */
}
.bookIconContainer {
  display: inline-block;
}
.bookInfoContainer {
  display: inline-block;
}
.bookInfoContainer .bookId {
  opacity: 50%;
}

.level_icon {
  display: inline-block;
  position: relative;
}

.level_icon_image {
  vertical-align: top;
}

.level_icon_par {
  position: absolute;
  bottom: 0px;
  right: 0px;
  line-height: 1;
  /* font-size: 12pt; */
  margin-bottom: 2px;
  margin-right: 4px;
  font-weight: 700;
  color: #c918c9;
}

footer a {
  font: 75%;
  color: var(--black);
}

a {
  color: #4f7af9;
}

button.discord_button {
  background: white url("/discord-mark-grey.svg") no-repeat center right;
  background-position: right 4px center;
  background-size: 28px;
  padding-right: 38px;
}
button.discord_button_blue {
  background: white url("/discord-mark-blue.svg") no-repeat center right;
  background-position: right 4px center;
  background-size: 32px;
  padding-right: 42px;
  border-color: #ccccff;
  font-size: 1.5em;
}
button.discord_button_blue:hover {
  border-color: #6b6762;
}

button.discord_button_simple {
  background: white url("/discord-mark-blue.svg") no-repeat center right;
  background-position: center center;
  background-size: 28px;
  padding-right: 30px;
}

.instruction_image {
  display: block;
  margin: 0 auto;
  height: 250px;
}

.overlay_message {
  position: absolute;
  background: aliceblue;
  left: 0;
  right: 0;
  width: fit-content;
  top: 30%;
  bottom: 50%;
  height: fit-content;
  margin-inline: auto;
  padding: 20px 30px;
  border: solid var(--black);
}

.center_text {
  text-align: center;

}

button.gsi-material-button {
  all: revert;
  display: inline;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 20px;
  height: 3em;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  max-width: 400px;
  min-width: min-content;
}

button.gsi-material-button .gsi-material-button-icon {

  all: revert;
  height: 1.2em;
  margin-right: 0.55em;
  min-width: 20px;
  width: 1.2em;
  overflow: visible;
}

button.gsi-material-button .gsi-material-button-content-wrapper {

  all: revert;
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

button.gsi-material-button .gsi-material-button-contents {

  all: revert;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  vertical-align: top;
}

button.gsi-material-button .gsi-material-button-state {

  all: revert;
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}


button.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

button.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

button.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

button.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
button.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

button.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

button.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}