.viewport {
    align-items: center;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    padding-top: 64px;
    text-align: center;
    width: 100%;
}

.viewport > .main-container {
    text-align: center;
}

.viewport > .main-container > .input-container {
    margin: 0px auto 0px auto;
    width: 460px;
}

.viewport > .main-container > .input-container > .input {
    border: 2px dashed #2d2d2d;
    border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -khtml-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    padding: 12px 12px 12px 12px;
    text-align: center;
    width: 100%;
}

.viewport > .main-container > .viewer-container {
    border: 2px dashed #2d2d2d;
    border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -khtml-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    font-size: 30px;
    height: 60px;
    line-height: 32px;
    margin: 0px auto 0px auto;
    min-width: 460px;
    padding: 12px 12px 12px 12px;
    text-align: center;
}

.viewport > .main-container > .viewer-container > span:not(.caret) {
    cursor: pointer;
}

.viewport > .main-container > .fonts-container {
    margin: 20px auto 0px auto;
    width: 720px;
}

.viewport > .main-container > .fonts-container > .font {
    border: 1px solid #2d2d2d;
    border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 22px;
    height: 34px;
    line-height: 34px;
    margin: 6px 6px 6px 6px;
    padding: 6px 12px 6px 12px;
    vertical-align: top;
}

.viewport > .main-container > .fonts-container > .font.selected,
.viewport > .main-container > .fonts-container > .font.selected:hover {
    background-color: #e0e0e0;
}

.viewport > .main-container > .fonts-container > .font:hover {
    background-color: #f0f0f0;
}

.viewport > .main-container > .emojis-container,
.viewport > .main-container > .emojisp-container,
.viewport > .main-container > .keyboard-container {
    font-size: 0px;
    margin: 20px auto 0px auto;
}

.viewport > .main-container > .keyboard-container {
    display: none;
    width: 620px;
}

.viewport > .main-container > .keyboard-container.lowercase {
    text-transform: lowercase;
}

.viewport > .main-container > .emojis-container {
    display: none;
    font-family: "Cool Emojis";
    width: 720px;
}

.viewport > .main-container > .emojisp-container {
    display: none;
    font-family: "Cool Emojis Pantograph";
    width: 720px;
}

.viewport > .main-container > .emojis-container > .char,
.viewport > .main-container > .emojisp-container > .char,
.viewport > .main-container > .keyboard-container > .char {
    border: 1px solid #9d9d9d;
    border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 26px;
    line-height: 48px;
    margin: 3px 3px 3px 3px;
    min-height: 48px;
    min-width: 48px;
    padding: 0px 8px 0px 8px;
}

.viewport > .main-container > .emojis-container > .char:hover,
.viewport > .main-container > .emojisp-container > .char:hover,
.viewport > .main-container > .keyboard-container > .char:hover {
    background-color: #e2e2e2;
    box-shadow: 1px 1px 1px #cccccc;
    -o-box-shadow: 1px 1px 1px #cccccc;
    -ms-box-shadow: 1px 1px 1px #cccccc;
    -moz-box-shadow: 1px 1px 1px #cccccc;
    -khtml-box-shadow: 1px 1px 1px #cccccc;
    -webkit-box-shadow: 1px 1px 1px #cccccc;
}

.viewport > .main-container > .emojis-container > .char:active,
.viewport > .main-container > .emojisp-container > .char:active,
.viewport > .main-container > .keyboard-container > .char:active {
    background-color: #d2d2d2;
    box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -khtml-box-shadow: none;
    -webkit-box-shadow: none;
}

.viewport > .main-container > .keyboard-container:not(.lowercase) > .char.shift {
    background-color: #e2e2e2;
}