.crw-container {
   position: relative;
   max-width: 500px;
   height: 500px;
   margin: 30px auto;
}

.crw-container .crw-wordlist {
  display: none;
}

.crw-grid {
   height: 100%;
   border-left: 1px solid rgba(0,0,0,.1);
   border-top: 1px solid rgba(0,0,0,.1);
}

.crw-grid > div {
   background: rgba(0,0,0,.05);
   border-bottom: 1px solid rgba(0,0,0,.1);
   border-right: 1px solid rgba(0,0,0,.1);
   float: left;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: #222;
   position: relative;
}

.crw-grid > div.full {
   background: rgba(255,255,255,.2);
   font-weight: 600;
}

.crw-grid > div input {
   width: 100%;
   border: 0;
   background: #c9c9c9;
   text-align: center;
   height: 100%;
}

.crw-grid > div input:focus {
   outline: 2px dashed #2BB673;
   background: rgba(255,255,255,.3);
}

.crw-grid > div svg {
   position: absolute;
   width: 80%;
   cursor: pointer;
}

.crw-grid > div svg.direction-h {
   left: -90%;
   top: 10%;
}

.crw-grid > div svg.direction-v {
   top: -90%;
   left: 10%;
}

.crw-grid > div.direction-h-init:before {
   position: absolute;
   content: '';
   top: 50%;
   left: 0;
   width: 0;
   height: 0;
   margin-top: -8px;
   border-top: 8px solid transparent;
   border-left: 10px solid #2BB673;
   border-bottom: 8px solid transparent;
   pointer-events: none;
}

.crw-clues {
   display: none;
}

.crw-grid > div.direction-v-init:after {
   position: absolute;
   content: '';
   left: 50%;
   top: 0;
   width: 0;
   height: 0;
   margin-left: -8px;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-top: 10px solid #2BB673;
   pointer-events: none;
}

.crw-grid > div svg path {
   fill: #2BB673;
}

.crw-grid > div svg:hover path {
   fill: #1ac974;
}

.tippy-content {
   max-width: 150px!important;
}