html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.toolbar {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 16px;
}

.toolbar a {
  padding: 16px;
}

.hint_window {
    position: absolute;
    transform: translate(40px, -50%);
    padding: 14px;
    background: #ffffff;
    width: 246px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px 0px rgba(95, 105, 131, 0.1), 0px 4px 24px 0px rgba(95, 105, 131, 0.04);
    gap: 8px;

    .hint_window__title {
        font-weight: 500;
        font-size: 20px;
        color: #050d33;
        margin-bottom: 8px;
    }

    .hint_window__text {
        font-weight: 400;
        font-size: 14px;
        color: #7b7d85;
    }
}

.hint_window__title {
  font-weight: bold;
}

.showall-button {
  background-image: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  outline: 0;
  padding: 0;
  position: relative;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  padding: 8px;
}

.showall-button-background {
  display: block;
  width: 24px;
  height: 24px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjQ3NDQ5IiBoZWlnaHQ9IjEwLjgxNTMxIiB2aWV3Qm94PSIwIDAgOS40NzQ0OSAxMC44MTUzMSI+PHRpdGxlPmRvd25hc2Rhc2Rhc2Rsb2FkPC90aXRsZT48cmVjdCB4PSIyLjk0MzI0IiB3aWR0aD0iNi41MzEyNSIgaGVpZ2h0PSIxMC4wODgzMiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik04LjA1MTcsNi44NDg3NWEuMTYxNTcuMTYxNTcsMCwxLDAsLjE2MTUuMTYxNTZBLjE2MTU1LjE2MTU1LDAsMCwwLDguMDUxNyw2Ljg0ODc1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMDU2NzYgLTEuNzgxMjUpIiBmaWxsPSIjNGQ0ZDRkIi8+PHBhdGggZD0iTTguMDUxNywyLjI0NDYzYTEuODU4LDEuODU4LDAsMCwwLS40MzE1MiwzLjY2NTIyLjUwMi41MDIsMCwwLDEsLjM5MDIuNDk2NTIuMDQwNDQuMDQwNDQsMCwwLDAsLjA0MDQuMDM4NTJoLjAwMTc3QS4wNDA0Mi4wNDA0MiwwLDAsMCw4LjA5Myw2LjQwNjM3YS41MDIwNS41MDIwNSwwLDAsMSwuMzkwMTktLjQ5NjUyQTEuODU4LDEuODU4LDAsMCwwLDguMDUxNywyLjI0NDYzWm0wLDIuMzU3NzlhLjUuNSwwLDEsMSwuNS0uNUEuNDk5OTUuNDk5OTUsMCwwLDEsOC4wNTE3LDQuNjAyNDJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi4wNTY3NiAtMS43ODEyNSkiIGZpbGw9IiM0ZDRkNGQiLz48Y2lyY2xlIGN4PSI3LjEzOTE2IiBjeT0iMTAuNjUzNzUiIHI9IjAuMTYxNTYiIGZpbGw9IiM0ZDRkNGQiLz48cGF0aCBkPSJNOS4xOTU5Miw3LjY2OTMxYTEuODU4LDEuODU4LDAsMCwwLS40MzE1MiwzLjY2NTIyLjUwMi41MDIsMCwwLDEsLjM5MDI2LjQ5NjUyLjA0MDQyLjA0MDQyLDAsMCwwLC4wNDA0MS4wMzg1MmguMDAxNzdhLjA0MDM2LjA0MDM2LDAsMCwwLC4wNDAzNC0uMDM4NTIuNTAyMTkuNTAyMTksMCwwLDEsLjM5MDI2LS40OTY1MiwxLjg1OCwxLjg1OCwwLDAsMC0uNDMxNTItMy42NjUyMlptMCwyLjM1Nzc5YS41LjUsMCwxLDEsLjUtLjVBLjUuNSwwLDAsMSw5LjE5NTkyLDEwLjAyNzFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi4wNTY3NiAtMS43ODEyNSkiIGZpbGw9IiM0ZDRkNGQiLz48cGF0aCBkPSJNMy45MTQ1NSwxMC41MzY4YS4xNjE1My4xNjE1MywwLDEsMCwuMTYxNTYuMTYxNTZBLjE2MTU2LjE2MTU2LDAsMCwwLDMuOTE0NTUsMTAuNTM2OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yLjA1Njc2IC0xLjc4MTI1KSIgZmlsbD0iIzRkNGQ0ZCIvPjxwYXRoIGQ9Ik0zLjkxNDU1LDUuOTMyNjhBMS44NTgsMS44NTgsMCwwLDAsMy40ODMsOS41OTc5YS41MDIuNTAyLDAsMCwxLC4zOTAyNi40OTY1Mi4wNDA0LjA0MDQsMCwwLDAsLjA0MDM1LjAzODUxaC4wMDE4M2EuMDQwMzkuMDQwMzksMCwwLDAsLjA0MDM0LS4wMzg1MS41MDIxMy41MDIxMywwLDAsMSwuMzkwMjYtLjQ5NjUyLDEuODU4LDEuODU4LDAsMCwwLS40MzE1Mi0zLjY2NTIyWm0wLDIuMzU3NzlhLjUuNSwwLDEsMSwuNS0uNUEuNS41LDAsMCwxLDMuOTE0NTUsOC4yOTA0N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yLjA1Njc2IC0xLjc4MTI1KSIgZmlsbD0iIzRkNGQ0ZCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
}

.fullscreen-button {
  background-image: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  outline: 0;
  padding: 0;
  position: relative;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  padding: 8px;
}

.fullscreen-button-background {
  display: block;
  width: 24px;
  height: 24px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTQ3MF8xMDMxOCkiPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy43NTIgNC41OTQ3M0MyMy43NjE5IDQuNDU2NjIgMjMuNjQ3MSA0LjM0MTggMjMuNTA4OSA0LjM1MTcxTDE4LjQzMzYgNC43MTYxMUMxOC4xNzQ2IDQuNzM0NyAxOC4wNTc0IDUuMDQ5MTIgMTguMjQxIDUuMjMyNzRMMTkuNzg0MiA2Ljc3NkwxNC43NzEgMTEuNzg5MkwxNi4zMTQxIDEzLjMzMjNMMjEuMzI3MyA4LjMxOTExTDIyLjg3MDkgOS44NjI2OUMyMy4wNTQ1IDEwLjA0NjMgMjMuMzY5IDkuOTI5MDkgMjMuMzg3NiA5LjY3MDA4TDIzLjc1MiA0LjU5NDczWiIgZmlsbD0iIzM0Mzc0QSIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjU2ODM1IDIzLjI5NTJDNC41NTg0NCAyMy40MzMzIDQuNjczMjYgMjMuNTQ4MSA0LjgxMTM3IDIzLjUzODJMOS44ODY3MiAyMy4xNzM4QzEwLjE0NTcgMjMuMTU1MiAxMC4yNjMgMjIuODQwOCAxMC4wNzkzIDIyLjY1NzFMOC41MzYwOCAyMS4xMTM5TDEzLjU0OTMgMTYuMTAwN0wxMi4wMDYyIDE0LjU1NzZMNi45OTI5NyAxOS41NzA4TDUuNDQ5MzggMTguMDI3MkM1LjI2NTc3IDE3Ljg0MzYgNC45NTEzNCAxNy45NjA4IDQuOTMyNzUgMTguMjE5OEw0LjU2ODM1IDIzLjI5NTJaIiBmaWxsPSIjMzQzNzRBIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwMF8xNDcwXzEwMzE4Ij4KICAgICAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4yMTg3NSAyKSIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPgo=) center / 24px 24px no-repeat;
}

.exit-fullscreen-button-background {
  display: block;
  width: 24px;
  height: 24px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE0NzBfNDg1MSkiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMjU1OSAxMi4zODJDMTUuMjQ1OSAxMi41MjAxIDE1LjM2MDggMTIuNjM0OSAxNS40OTg5IDEyLjYyNUwyMC41NzQyIDEyLjI2MDZDMjAuODMzMiAxMi4yNDIgMjAuOTUwNSAxMS45Mjc2IDIwLjc2NjggMTEuNzQ0TDE5LjIyMzYgMTAuMjAwN0wyNC4yMzY4IDUuMTg3NTVMMjIuNjkzNyAzLjY0NDQ1TDE3LjY4MDUgOC42NTc2NEwxNi4xMzY5IDcuMTE0MDVDMTUuOTUzMyA2LjkzMDQzIDE1LjYzODggNy4wNDc2NiAxNS42MjAyIDcuMzA2NjdMMTUuMjU1OSAxMi4zODJaIiBmaWxsPSIjMzQzNzRBIi8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi42MjcgMTUuNTA3OUMxMi42MzY5IDE1LjM2OTggMTIuNTIyMSAxNS4yNTQ5IDEyLjM4MzkgMTUuMjY0OUw3LjMwODU5IDE1LjYyOTNDNy4wNDk1OCAxNS42NDc5IDYuOTMyMzYgMTUuOTYyMyA3LjExNTk8IDE2LjE0NTlMOC42NTkyNCAxNy42ODkxTDMuNjQ2MDQgMjIuNzAyM0w1LjE4OTE1IDI0LjI0NTRMMTAuMjAyMyAxOS4yMzIzTDExLjc0NTkgMjAuNzc1OEMxMS45Mjk1IDIwLjk1OTUgMTIuMjQ0IDIwLjg0MjIgMTIuMjYyNiAyMC41ODMyTDEyLjYyNyAxNS41MDc5WiIgZmlsbD0iIzM0Mzc0QSIvPgo8L2c+CjxkZWZzPgogIDxjbGlwUGF0aCBpZD0iY2xpcDBfMTQ3MF80ODUxIj4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMikiLz4KICA8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) center / 24px 24px no-repeat;
}