.basic-div {
  background: beige;
  border: 1px solid black;
  font-size: 16px;
  padding: 5px 20px; }

.basic-wrapper {
  display: flex;
  height: 35px; }

.height-50 {
  height: 50px; }

.flex-grow-1 {
  flex-grow: 1; }

.shuki-inner {
  border: 1px solid black; }

.shuki-child {
  flex-grow: 1; }

.shuki-wrapper {
  display: flex; }

.absolute {
  position: absolute; }

.enter {
  transform: translate(100px, 0);
  transition: all 1s linear;
  opacity: 0; }

.enter-active {
  transform: translate(0, 0);
  opacity: 1; }

.exit {
  transform: translate(0, 0);
  transition: all 1s linear;
  opacity: 1; }

.exit-active {
  transform: translate(100px, 0);
  opacity: 0; }

.orange {
  color: orange; }

.flex-grow-4 {
  color: purple;
  flex-grow: 10; }

.show-hide-wrapper {
  margin-top: 20px; }

.styled-div {
  background: #b13dac;
  color: white;
  font-size: 18px;
  padding: 20px 30px;
  line-height: 30px; }
  .styled-div code {
    background: transparent;
    font-size: 14px;
    margin: 0;
    padding: 0; }

.sequence-example-wrapper {
  display: flex;
  width: 400px; }

.arrow-top {
  position: absolute;
  left: 40px;
  bottom: 30px;
  font-size: 40px; }

.markup {
  font-size: 16px; }
  .markup p {
    margin-top: 0;
    margin-bottom: 16px; }

.flex-parent {
  display: flex; }

.flex-child {
  flex-grow: 1;
  width: auto;
  /* overriding width: 100%; */ }

.flex-child-grow-2 {
  flex-grow: 2; }