* {
    box-sizing: border-box;
}




/* This CSS is based on your inline styles. Adjust as necessary. */
html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.split-pane-divider {
  background: #aaa;
}
.write-here {
  position: absolute;
  width: 100vw;
  text-align: center;
  margin: 30vh 300vw auto 0;
  transform: translateY(-80%);
  color: #79828c;
  font-family: "Waiting for the Sunrise", cursive;
  font-size: 40px;
  min-width: 315px;
  z-index: 21;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
div.dotted {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #ffffff 1.5px, rgba(0, 0, 0, 0) 1px);
}
/* Include further styles from your original code as needed. */




html {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.select {
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body > svg {
    display: none;
}

nav {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    z-index: 25;
    border-top: 1px solid #D7DDE3; /*#A9B7C5*/
    border-bottom: 1px solid #D7DDE3; /*#A9B7C5*/
    padding: 12px;
}

.languages {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.input-field {
    height: 36px;
    padding: 2px 15px 3px;
    font: inherit;
    font-weight: 600;
    border-radius: 3px;
    -webkit-appearance: none;
    color: #060607;
    background: #fff none;
    border: 1px solid #d2d6d7;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.08);
    transition: border-color 125ms;
    -webkit-tap-highlight-color: transparent;
}

.input-field:focus {
    outline: 0;
    padding: 2px 14px;
    border: 2px solid #1a9fff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
}

#importContentField {
    margin: 0 12px;
}

#importContent {
    margin: 5px;
}

#lexicon {
    margin: 0 12px;
    width: 500px;
}

select {
    width: auto;
    padding: 0 35px 0 15px;
    color: #131F26;
    background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik00LjQyMi4yNmMtLjIzMy0uMzM3LS42MS0uMzM3LS44NDQgMEwuMTc1IDUuMTdDLS4xNDIgNS42MjguMDQ4IDYgLjYxIDZoNi43OGMuNTU4IDAgLjc1NC0uMzcuNDM1LS44M0w0LjQyMi4yNnptLjAyIDEzLjQ3Yy0uMjM2LjM0Mi0uNjE4LjM0Ny0uODUuMDFMLjE2NyA4LjgxOEMtLjE0NiA4LjM2Ny4wNDggOCAuNjA4IDhoNi43ODNjLjU1OCAwIC43NTUuMzcuNDM3LjgzbC0zLjM4NSA0Ljl6IiBmaWxsPSIjMTMxRjI2Ii8+PC9nPjwvc3ZnPg==) right center no-repeat #fff;
    -webkit-appearance: none;
    appearance: none;
    height: 2.625rem;
    font: 600 16px "Source Sans Pro",sans-serif;
    border: 1px solid #CED5D9;
    border-radius: 3px;
    -webkit-tap-highlight-color: transparent;
}

select:focus {
    padding: 0 34px 0 14px;
    outline: 0;
    border: 2px solid #1a9fff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
}

#parameters {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-button {
    cursor: pointer;
    box-sizing: border-box;
    color: #FFFFFF;
    background: #1A9FFF;
    border-radius: 50%;
    border: none;
    padding: 8px;
    margin: 6px;
    height: 40px;
    width: 40px;
    outline: none;
}

.action-button:hover {
    background: #0798FF;
}

.action-button:focus {
    background: #0177CB;
}

.action-button:disabled {
    background: #F5F6F7;
}

.action-button:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 18px;
    width: 18px;
}

.action-label-button {
    cursor: pointer;
    box-sizing: border-box;
    color: #1A9FFF;
    background: transparent;
    border: none;
    padding: 8px;
    margin: 6px;
    height: 40px;
    outline: none;
}

.action-label-button:hover {
    color: #0798FF;
}

.action-label-button:focus {
    color: #0177CB;
}

.action-label-button:disabled {
    color: #F5F6F7;
}

.mybtn {
    /* width:100%; */
    /* padding-top: 5px; */
    padding: 5px 5px;
    font-size: 10px;
    /* text-align: center; */
    cursor: pointer;
    outline: none;
   /*  color: #ffffff;
    background-color: #0177CB; */
    border: 1px;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
    }

.spacer {
    flex-grow: 2;
}

#clear:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dHJhc2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0idHJhc2giPiAgICAgICAgICAgIDxnIGlkPSJTb3VyY2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuMDAwMDAwLCAyLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsMyBMMTIsMyIgaWQ9IlBhdGgtNTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMiw0IEwyLjQ4NzY0MDM4LDEzLjc1MjgwNzYgQzIuNDk0NDY2NDEsMTMuODg5MzI4MiAyLjYyMTQ5ODExLDE0IDIuNzQ5MTMzNzEsMTQgTDkuMjUwODY2MjksMTQgQzkuMzg4NDU5MDQsMTQgOS41MDU2MTUyMywxMy44ODc2OTUzIDkuNTEyMzU5NjIsMTMuNzUyODA3NiBMMTAsNCIgaWQ9IlBhdGgtNTMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNiwzIEw2LDE0IiBpZD0iTGluZSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgtNTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcG9pbnRzPSIzLjUgMi41IDQuNSA0LjQ0MDg5MjFlLTE0IDcuNSA0LjQ0MDg5MjFlLTE0IDguNSAyLjUiPjwvcG9seWxpbmU+ICAgICAgICAgICAgPC9nPiAgICAgICAgICAgIDxwYXRoIGQ9Ik01LjYyMjk2NzA0LDQgTDMsNCBDMi40NDc3MTUyNSw0IDIsNC40NDc3MTUyNSAyLDUgQzIsNS41NTIyODQ3NSAyLjQ0NzcxNTI1LDYgMyw2IEwzLjk5OTk3NzU1LDYgQzMuOTk5OTkxMDgsNi4wMTY1NjM3MiA0LjAwMDQxMTQzLDYuMDMzMjEyOTQgNC4wMDEyNDc2Niw2LjA0OTkzNzYyIEw0LjQ4ODg4ODA0LDE1LjgwMjc0NTIgQzQuNTIyNTE4MDUsMTYuNDc1MzQ1NCA1LjA5MjEyMzYyLDE3IDUuNzQ5MTMzNzEsMTcgTDEyLjI1MDg2NjMsMTcgQzEyLjkyMDM0NDksMTcgMTMuNDc3NzA3OCwxNi40NzA4MjkxIDEzLjUxMTExMiwxNS44MDI3NDUyIEwxMy45OTg3NTIzLDYuMDQ5OTM3NjIgQzEzLjk5OTU4ODYsNi4wMzMyMTI5NCAxNC4wMDAwMDg5LDYuMDE2NTYzNzIgMTQuMDAwMDIyNSw2IEwxNSw2IEMxNS41NTIyODQ3LDYgMTYsNS41NTIyODQ3NSAxNiw1IEMxNiw0LjQ0NzcxNTI1IDE1LjU1MjI4NDcsNCAxNSw0IEwxMi4zNzcwMzMsNCBMMTEuNDI4NDc2NywxLjYyODYwOTMyIEMxMS4yNzY2MTMzLDEuMjQ4OTUwOTQgMTAuOTA4OTA0NiwxIDEwLjUsMSBMNy41LDEgQzcuMDkxMDk1NDEsMSA2LjcyMzM4NjY2LDEuMjQ4OTUwOTQgNi41NzE1MjMzMSwxLjYyODYwOTMyIEw1LjYyMjk2NzA0LDQgWiBNNy43NzcwMzI5Niw0IEwxMC4yMjIyOTM4LDQgTDkuODIyMjM2NTcsMy4wMDE3ODUxMSBMOC4xNzQ1ODMwNywzLjAwNjEyNDczIEw3Ljc3NzAzMjk2LDQgWiBNOCw2IEw2LjAwMTI0OTIyLDYgTDYuNDUxNTY3MjksMTUuMDA2MzYxNSBMOCwxNS4wMDQ2NjI5IEw4LDYgWiBNMTAsNiBMMTEuOTk4ODI2OCw2IEwxMS41NjI0ODgsMTUuMDAwNzU1MSBMMTAsMTUuMDAyNDY5MSBMMTAsNiBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) center center no-repeat;
}

#undo:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dW5kbzwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJ1bmRvIiBmaWxsPSIjRkZGRkZGIj4gICAgICAgICAgICA8cGF0aCBkPSJNNC4zOTY5NzM4Myw5IEw2LjcwNDQ1MjA0LDExLjI5MDI0ODMgQzcuMDk2NDM3MDYsMTEuNjc5MzA2NCA3LjA5ODgwOTgxLDEyLjMxMjQ2NjkgNi43MDk3NTE3MywxMi43MDQ0NTIgQzYuMzIwNjkzNjYsMTMuMDk2NDM3IDUuNjg3NTMzMTIsMTMuMDk4ODA5NyA1LjI5NTU0ODEsMTIuNzA5NzUxNyBMMS40Njc0MjMwMyw4LjkxMDIxMTEgQzAuOTg3NzYyMDk4LDguNDM0MTMxNzggMC45NzczODMzNTcsNy42NDA2MTY5NyAxLjQ2MjE0Mjk4LDcuMTUyMjM3NjcgTDUuMjkwMjY4MDEsMy4yOTU1MjgyNCBDNS42NzkzMzcwMywyLjkwMzU1NDA3IDYuMzEyNDk3NjIsMi45MDExOTg5NyA2LjcwNDQ3MTc5LDMuMjkwMjY3OTggQzcuMDk2NDQ1OTYsMy42NzkzMzcgNy4wOTg4MDEwNiw0LjMxMjQ5NzU5IDYuNzA5NzMyMDUsNC43MDQ0NzE3NiBMNC40MzEyMTczNiw3IEwxMy4wMDEyMTQ0LDcgQzE1LjIwODc4NDIsNyAxNyw4Ljc5MzMzMjE1IDE3LDExIEMxNywxMy4yMDkwODQ2IDE1LjIxMjQzMjUsMTUgMTMuMDA0ODgxNSwxNSBMMTEsMTUgQzEwLjQ0NzcxNTMsMTUgMTAsMTQuNTUyMjg0NyAxMCwxNCBDMTAsMTMuNDQ3NzE1MyAxMC40NDc3MTUzLDEzIDExLDEzIEwxMy4wMDQ4ODE1LDEzIEMxNC4xMDcwMjQ0LDEzIDE1LDEyLjEwNTM1MTkgMTUsMTEgQzE1LDkuODk3MzczMzMgMTQuMTAzNjg1Nyw5IDEzLjAwMTIxNDQsOSBMNC4zOTY5NzM4Myw5IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) center center no-repeat;
}

#redo:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+cmVkbzwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJyZWRvIiBmaWxsPSIjRkZGRkZGIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTMuNTk0Mzc2Nyw5IEwxMS4yOTQyMTcyLDExLjI5MTU3MiBDMTAuOTAyOTYzMywxMS42ODEzNjUzIDEwLjkwMTc3OTEsMTIuMzE0NTI5MSAxMS4yOTE1NzI0LDEyLjcwNTc4MzEgQzExLjY4MTM2NTYsMTMuMDk3MDM3MSAxMi4zMTQ1Mjk1LDEzLjA5ODIyMTIgMTIuNzA1NzgzNCwxMi43MDg0MjggTDE2LjUzMzkwODEsOC44OTQ1OTUzNCBDMTcuMDEyMjU5NCw4LjQxODAyOTk2IDE3LjAyMjYzNzQsNy42MjQ1MzM0OCAxNi41MzY1NDgxLDcuMTM2NjI5MzcgTDEyLjcwODQyMzMsMy4yOTQyMTIgQzEyLjMxODYyNzQsMi45MDI5NjA3MiAxMS42ODU0NjM1LDIuOTAxNzgwOTQgMTEuMjk0MjEyMiwzLjI5MTU3Njg5IEMxMC45MDI5NjEsMy42ODEzNzI4NCAxMC45MDE3ODEyLDQuMzE0NTM2NzIgMTEuMjkxNTc3MSw0LjcwNTc4OCBMMTMuNTc3MjU1NCw3IEw0Ljk5ODc4NTY0LDcgQzIuNzkxMjE1ODEsNyAxLDguNzkzMzMyMTUgMSwxMSBDMSwxMy4yMDkwODQ2IDIuNzg3NTY3NTIsMTUgNC45OTUxMTg1LDE1IEw3LDE1IEM3LjU1MjI4NDc1LDE1IDgsMTQuNTUyMjg0NyA4LDE0IEM4LDEzLjQ0NzcxNTMgNy41NTIyODQ3NSwxMyA3LDEzIEw0Ljk5NTExODUsMTMgQzMuODkyOTc1NjIsMTMgMywxMi4xMDUzNTE5IDMsMTEgQzMsOS44OTczNzMzMyAzLjg5NjMxNDMyLDkgNC45OTg3ODU2NCw5IEwxMy41OTQzNzY3LDkgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) center center no-repeat;
}

#convert:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgICA8ZyBpZD0iY29udmVydCIgZmlsbD0iI0ZGRkZGRiI+ICAgICAgICA8cGF0aCBkPSJNIDM3Ljk1MTQ0MSw0NC4xMDg1NDUgTCAzNy42OTQzNTksNDUuNTczOTEgQyAzNy4wNzczMyw0NS42MjUzMjYgMzYuNTM3NDYsNDUuNjUxMDM0IDM2LjA3NDc0NSw0NS42NTEwMzUgQyAzNS40MDYzMDEsNDUuNjUxMDM0IDM0LjYwMDc4LDQ1LjU5OTYxOCAzMy42NTgxNzcsNDUuNDk2Nzg2IEMgMzIuMDQ3MTA0LDQ1LjMyNTM5OCAzMS4wMjczNDgsNDUuMjM5NzA0IDMwLjU5ODkwNSw0NS4yMzk3MDQgQyAyOS44NzkwNTEsNDUuMjM5NzA0IDI4Ljc3MzYwMSw0NS4zNTExMDYgMjcuMjgyNTUxLDQ1LjU3MzkxIEMgMjcuODEzODMsNDQuMjM3MDg3IDI4LjI1OTQzOCw0Mi44MzE3MDggMjguNjE5Mzc2LDQxLjM1Nzc3MSBDIDI4Ljg3NjQzMyw0MC4zMTIzMSAyOS4xNTA2NTQsMzguNTEyNzQxIDI5LjQ0MjAzNywzNS45NTkwNTYgQyAyNy40MzY3NzgsMzUuOTQxOTI2IDI0LjMyNjA5MiwzNS45ODQ3NzMgMjAuMTA5OTczLDM2LjA4NzU5NyBDIDE1Ljc1NjcxMiw0Mi43Mzc0NDUgMTIuNTYwMzMzLDQ2LjkxMDczMyAxMC41MjA4MjcsNDguNjA3NDc0IEMgOC40OTg0NDY5LDUwLjMyMTM0NyA2LjU3MDMzNjMsNTEuMTc4Mjg1IDQuNzM2NDg5MSw1MS4xNzgyOTEgQyAzLjc3NjcxODMsNTEuMTc4Mjg1IDMuMDY1NDU5Nyw1MC45ODk3NTggMi42MDI3MTEyLDUwLjYxMjcxMSBDIDIuMTIyODI3OSw1MC4yNTI3OTIgMS44ODI4ODUyLDQ5Ljc4MTQ3NiAxLjg4Mjg4MjYsNDkuMTk4NzYyIEMgMS44ODI4ODUyLDQ4Ljc1MzE1IDIuMDE5OTk1Myw0OC4zODQ2NjcgMi4yOTQyMTMyLDQ4LjA5MzMxMSBDIDIuNTY4NDM1Nyw0Ny44MDE5NDkgMi45MTEyMTA5LDQ3LjY1NjI2OSAzLjMyMjUzOTksNDcuNjU2MjcyIEMgMy41NjI0ODM4LDQ3LjY1NjI2OSAzLjg4ODEyMDIsNDcuNjk5MTE2IDQuMjk5NDUwMiw0Ny43ODQ4MTMgQyA1LjMyNzc3NjEsNDguMDI0NzUzIDYuMDEzMzI2Niw0OC4xNDQ3MjQgNi4zNTYxMDM2LDQ4LjE0NDcyNyBDIDcuNTA0Mzk4OCw0OC4xNDQ3MjQgOC43NzI2NjcxLDQ3LjQ5MzQ1MSAxMC4xNjA5MTIsNDYuMTkwOTA2IEMgMTIuNDIzMjIzLDQ0LjA2NTY5OSAxNS43NjUyODEsMzkuNjA5NjIxIDIwLjE4NzA5NywzMi44MjI2NiBDIDI1LjE5MTYsMjUuMTQ0NTA3IDI5LjI0NDkxNywxOS41NTcyNzEgMzIuMzQ3MDYsMTYuMDYwOTM1IEMgMjguMTEzNzU5LDE2LjQzODAxNyAyNS40NzQzODksMTYuNzk3OTMxIDI0LjQyODk0NSwxNy4xNDA2NzggQyAyMi45ODkyNjksMTcuNjAzNDUyIDIxLjkwOTUyNywxOC4yODkwMDMgMjEuMTg5NzE2LDE5LjE5NzMzMSBDIDIwLjQ2OTg3MSwyMC4xMDU3MTEgMjAuMTA5OTU3LDIxLjAzMTIwNSAyMC4xMDk5NzMsMjEuOTczODEzIEMgMjAuMTA5OTU3LDIyLjI4MjMzNCAyMC4yMjEzNTksMjIuNzE5MzcyIDIwLjQ0NDE3OSwyMy4yODQ5MyBDIDIwLjY4NDEwNiwyMy45MTkwODYgMjAuODA0MDc3LDI0LjM4MTgzMiAyMC44MDQwOTMsMjQuNjczMTcxIEMgMjAuODA0MDc3LDI1LjA1MDI0NCAyMC42NTgzOTgsMjUuMzg0NDUgMjAuMzY3MDU1LDI1LjY3NTc4OSBDIDIwLjA3NTY4LDI1Ljk2NzE2OCAxOS43MjQzMzUsMjYuMTEyODQ3IDE5LjMxMzAyLDI2LjExMjgyOCBDIDE4LjczMDI4NywyNi4xMTI4NDcgMTguMjU4OTcxLDI1Ljg5ODYxMyAxNy44OTkwNzEsMjUuNDcwMTI0IEMgMTcuNTU2MjgyLDI1LjAyNDUzNiAxNy4zODQ4OTQsMjQuMzY0NjkzIDE3LjM4NDkwNywyMy40OTA1OTUgQyAxNy4zODQ4OTQsMjIuMjU2NjI2IDE3LjcwMTk2MSwyMS4wNjU0ODIgMTguMzM2MTA5LDE5LjkxNzE2IEMgMTguOTg3MzY4LDE4Ljc1MTc0OSAxOS45MTI4NjIsMTcuNzgzNDA5IDIxLjExMjU5MSwxNy4wMTIxMzcgQyAyMi4zMTIyODgsMTYuMjIzNzgyIDIzLjgxMTkzLDE1LjYyMzkyNSAyNS42MTE1MjEsMTUuMjEyNTY1IEMgMjYuNTM2OTkzLDE0Ljk4OTc5MSAyOC4xNjUxNzUsMTQuNzkyNjk2IDMwLjQ5NjA3MiwxNC42MjEyNzcgQyAzMi41MTg0MiwxNC40NDk5MiAzMy43ODY2ODgsMTQuMjg3MTAyIDM0LjMwMDg4MSwxNC4xMzI4MjIgQyAzNS4xMDYzNzMsMTMuOTEwMDQ5IDM1Ljg3NzYxNywxMy40NzMwMTEgMzYuNjE0NjE2LDEyLjgyMTcwNiBDIDM2LjEwMDQyMSwxNC45Mjk4MDYgMzUuNzMxOTM4LDE2Ljc3MjIyMiAzNS41MDkxNjUsMTguMzQ4OTYyIEwgMzMuNTAzOTI4LDMzLjIwODI4MiBMIDMyLjM0NzA2LDQzLjg1MTQ2MyBDIDMzLjYxNTMwMSw0NC4xNzcxMDEgMzQuNzU1MDI4LDQ0LjMzOTkxOSAzNS43NjYyNDcsNDQuMzM5OTE4IEMgMzYuNDM0NjI3LDQ0LjMzOTkxOSAzNy4xNjMwMjQsNDQuMjYyNzk1IDM3Ljk1MTQ0MSw0NC4xMDg1NDUgTSAyOS42NzM0MTEsMzQuMDU2NjUyIEMgMzAuNDk2MDQ2LDI3LjA5ODMyNiAzMS4zMTg3MDcsMjIuMDE2NjgzIDMyLjE0MTM5NSwxOC44MTE3MDkgQyAyOS45NjQ3NDUsMjEuNjkxMDQ3IDI4LjYxOTM1MiwyMy41MDc3NTUgMjguMTA1MjEzLDI0LjI2MTg0IEwgMjEuNDk4MjE0LDM0LjA1NjY1MiBDIDIyLjkyMDcxNCwzNC4xMDgwNzkgMjQuOTUxNjU3LDM0LjEzMzc4NyAyNy41OTEwNDksMzQuMTMzNzc2IEMgMjguMjQyMjk5LDM0LjEzMzc4NyAyOC45MzY0MTksMzQuMTA4MDc5IDI5LjY3MzQxMSwzNC4wNTY2NTIgTSA1OS4yNjM1MDksMjMuMTgyMDk3IEwgNjAuOTYwMjQ4LDIyLjgyMjE4MyBMIDU5LjAzMjEzNiwyOS4zMjYzNDkgQyA1OC4yNjA4NywzMS45MTQzMTggNTcuNTMyNDczLDM0Ljg5NjQ2MiA1Ni44NDY5NDIsMzguMjcyNzkxIEMgNTYuNDY5ODY5LDQwLjEwNjY0NSA1Ni4yODEzNDMsNDEuMjg5MjIgNTYuMjgxMzYyLDQxLjgyMDUxOCBDIDU2LjI4MTM0Myw0Mi4zNTE4MjMgNTYuNDk1NTc3LDQyLjYxNzQ3NCA1Ni45MjQwNjYsNDIuNjE3NDcxIEMgNTcuMTk4MjY3LDQyLjYxNzQ3NCA1Ny42MzUzMDUsNDIuNDM3NTE3IDU4LjIzNTE4Myw0Mi4wNzc2IEMgNTkuMjk3NzY1LDQxLjQ0MzQ2OSA2MC4zMTc1MjEsNDAuNjU1MDg2IDYxLjI5NDQ1NSwzOS43MTI0NDggTCA2Mi4xMTcxMTYsNDAuNzE1MDY3IEMgNjAuMTYzMjcyLDQyLjQ5NzUwMiA1OC45MTIxNDMsNDMuNTc3MjQ0IDU4LjM2MzcyNCw0My45NTQyOTYgQyA1Ny4yNjY4MjIsNDQuNzA4NDAzIDU2LjIyMTM1Nyw0NS4yNjU0MTIgNTUuMjI3MzI3LDQ1LjYyNTMyNyBDIDU0LjU3NjAzNiw0NS44NjUyNjkgNTMuOTQxOTAyLDQ1Ljk4NTI0IDUzLjMyNDkyMyw0NS45ODUyNDEgQyA1Mi44NzkyOTksNDUuOTg1MjQgNTIuNTQ1MDkzLDQ1Ljg4MjQwOCA1Mi4zMjIzMDQsNDUuNjc2NzQzIEMgNTIuMDk5NDg1LDQ1LjQ3MTA3NyA1MS45ODgwODMsNDUuMTcxMTQ5IDUxLjk4ODA5OCw0NC43NzY5NTcgQyA1MS45ODgwODMsNDQuNTE5ODc2IDUyLjA1NjYzOCw0NC4xNjg1MzIgNTIuMTkzNzYzLDQzLjcyMjkyMiBMIDUzLjIyMjA5LDQwLjIyNjYxMiBDIDUxLjc0ODE0MSw0MS45OTE5MDkgNDkuOTkxNDE4LDQzLjUwODY4OSA0Ny45NTE5MTYsNDQuNzc2OTU3IEMgNDYuNzAwNzc2LDQ1LjU2NTM0MSA0NS41NTI0NzksNDUuOTU5NTMyIDQ0LjUwNzAyMiw0NS45NTk1MzMgQyA0My41MTI5NjYsNDUuOTU5NTMyIDQyLjc1MDI5MSw0NS42MDgxODcgNDIuMjE4OTk1LDQ0LjkwNTQ5OCBDIDQxLjQ5OTE2Miw0My45NjI4NjYgNDEuMTM5MjQ4LDQyLjcyODg3NiA0MS4xMzkyNTIsNDEuMjAzNTIyIEMgNDEuMTM5MjQ4LDM5LjM4NjgxNyA0MS42MTkxMzMsMzcuMzY0NDQ0IDQyLjU3ODkwOSwzNS4xMzYzOTUgQyA0My41NTU4MTMsMzIuOTA4MzY2IDQ0Ljg1ODM1OSwzMC44ODU5OTIgNDYuNDg2NTUsMjkuMDY5MjY3IEMgNDguMTE0NzIzLDI3LjI1MjU3NSA0OS44Mjg2LDI1LjkxNTc1MSA1MS42MjgxODQsMjUuMDU4NzkzIEMgNTMuMDE2NDA5LDI0LjQwNzU0IDU0Ljc5ODg0LDI0LjA4MTkwNCA1Ni45NzU0ODIsMjQuMDgxODgzIEMgNTcuNTIzOTAzLDI0LjA4MTkwNCA1OC4wODA5MTMsMjQuMTE2MTgxIDU4LjY0NjUxMywyNC4xODQ3MTUgTCA1OS4yNjM1MDksMjMuMTgyMDk3IE0gNTYuMDc1Njk3LDI3LjExNTQ0NiBDIDU1LjE1MDE4NSwyNi45MjY5MzggNTQuMzcwMzcxLDI2LjgzMjY3NSA1My43MzYyNTMsMjYuODMyNjU3IEMgNTIuMTkzNzQ5LDI2LjgzMjY3NSA1MC44NDgzNTYsMjcuMjYxMTQ0IDQ5LjcwMDA3MSwyOC4xMTgwNjUgQyA0OC41NTE3NjIsMjguOTU3ODgxIDQ3LjQ4MDU4OSwzMC40ODMyMzEgNDYuNDg2NTUsMzIuNjk0MTE5IEMgNDUuNTA5NjMyLDM0Ljg4Nzg5MyA0NS4wMjExNzcsMzcuMDgxNjU0IDQ1LjAyMTE4NSwzOS4yNzU0MDkgQyA0NS4wMjExNzcsNDAuNDQwODUxIDQ1LjIxODI3Myw0MS4yODA2NSA0NS42MTI0NzMsNDEuNzk0ODEgQyA0Ni4wMDY2NTYsNDIuMzA4OTc2IDQ2LjUyMDgxOSw0Mi41NjYwNTcgNDcuMTU0OTYzLDQyLjU2NjA1NSBDIDQ4LjMzNzUyNyw0Mi41NjYwNTcgNDkuNjA1Nzk2LDQxLjkzMTkyMyA1MC45NTk3NzEsNDAuNjYzNjUgQyA1Mi4zMTM3MiwzOS4zNzgyNDggNTMuMzA3NzY4LDM3LjUzNTgzMSA1My45NDE5MTksMzUuMTM2Mzk1IEwgNTYuMDc1Njk3LDI3LjExNTQ0NiIvPiAgICA8L2c+PC9zdmc+) center center no-repeat;
    background-size: contain;
}

#export:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE4IDE4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnVwbG9hZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0idXBsb2FkIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTgsNS40MTQyMTM1NiBMOCwxMiBDOCwxMi41NTIyODQ3IDguNDQ3NzE1MjUsMTMgOSwxMyBDOS41NTIyODQ3NSwxMyAxMCwxMi41NTIyODQ3IDEwLDEyIEwxMCw1LjQxNDIxMzU2IEwxMi4yOTI4OTMyLDcuNzA3MTA2NzggQzEyLjY4MzQxNzUsOC4wOTc2MzEwNyAxMy4zMTY1ODI1LDguMDk3NjMxMDcgMTMuNzA3MTA2OCw3LjcwNzEwNjc4IEMxNC4wOTc2MzExLDcuMzE2NTgyNDkgMTQuMDk3NjMxMSw2LjY4MzQxNzUxIDEzLjcwNzEwNjgsNi4yOTI4OTMyMiBMOS44Nzg5ODE3OCwyLjQ2NDc2ODIyIEM5LjQwMTkzMDIzLDEuOTg3NzE2NjcgOC42MDg0NDcwOCwxLjk3NzMzOTM2IDguMTIxMDE4MjIsMi40NjQ3NjgyMiBMNC4yOTI4OTMyMiw2LjI5Mjg5MzIyIEMzLjkwMjM2ODkzLDYuNjgzNDE3NTEgMy45MDIzNjg5Myw3LjMxNjU4MjQ5IDQuMjkyODkzMjIsNy43MDcxMDY3OCBDNC42ODM0MTc1MSw4LjA5NzYzMTA3IDUuMzE2NTgyNDksOC4wOTc2MzEwNyA1LjcwNzEwNjc4LDcuNzA3MTA2NzggTDgsNS40MTQyMTM1NiBaIE0xNCwxNiBDMTQuNTUyMjg0NywxNiAxNSwxNS41NTIyODQ3IDE1LDE1IEMxNSwxNC40NDc3MTUzIDE0LjU1MjI4NDcsMTQgMTQsMTQgTDQsMTQgQzMuNDQ3NzE1MjUsMTQgMywxNC40NDc3MTUzIDMsMTUgQzMsMTUuNTUyMjg0NyAzLjQ0NzcxNTI1LDE2IDQsMTYgTDE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==) center center no-repeat;
}

/* #editor {
    width: 100vw;
    height: calc(100vh - 152px);
    touch-action: none;
} */




div.grid {
    background-size: 40px 40px;
    background-image:
      linear-gradient(to right, grey 1px, transparent 1px),
      linear-gradient(to bottom, grey 1px, transparent 1px);
  }
  



/*** Interact page ***/

.nextOne {
    text-align: center;
    height: 60px;
}

#nextButton .icn {
    margin: 0 -6px -4px 6px;
}

#question {
    font-size: 2em;
    background-color: #f5f5f5;
    margin: 0;
    padding: 10px 0 10px;
    border-bottom: 1px solid #D7DDE3;
    text-align: center;
}



/*** Index page ***/

.index-background {
    background: #f5f5f5;
}

@media screen and (min-width: 1024px) {
    .example-section {
        width: 1002px;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 48px;
    }

 

    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(100px, auto);
    }

    .grid-column-one {
        grid-column: 1;
        grid-row: 1;
        margin-right: 24px;
    }

    .grid-column-two {
        grid-column: 2;
        grid-row: 1;
        margin-left: 24px;
    }
}

@media screen and (min-width: 768px) and (max-width:1023px) {
    .example-section {
        padding: 0 12px 48px;
    }
    .example-section .btn {
        padding: 0 .75em 2px 1.5em;
    }
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(100px, auto);
    }

    .grid-column-one {
        grid-column: 1;
        grid-row: 1;
        margin-right: 12px;
    }

    .grid-column-two {
        grid-column: 2;
        grid-row: 1;
        margin-left: 12px;
    }
}

@media screen and (max-width:768px) {
    .example-section {
        padding: 24px 18px 48px;
    }

    .example-section .btn {
        padding: 0 .5em 2px 1em;
    }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    select {
        padding: 0 24px 0 12px;
    }

    select:focus {
        padding: 0 23px 0 11px;
    }

    nav {
        padding: 12px 6px;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    }
}

.example-section h1 {
    font-size: 36px;
    line-height: 48px;
    padding: 24px 0 24px;
    margin: 0;
}

.example-section h2 {
    font-size: 24px;
    line-height: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.example-section a {
    text-decoration: none;
    color: #1a9fff;
    transition: all 125ms;
}

.example-section li {
    margin-top: 15px;
}

.example-section .btn {
    height: 48px;
    line-height: 43px;
    background-color: rgba(0,0,0,.08);
    display: inline-block;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: #1a9fff;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 3px;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    transition: all 125ms;
}

.example-section .notice {
    width: fit-content;
    padding: 12px 24px 12px 54px;
    margin-bottom: 24px;
    font-weight: 600;
    border-radius: 3px;
}

.example-section .notice-warning {
    color: #cd1e3c;
    background: #fae6e8;
}

.example-section .notice-info {
    color: #0065b8;
    background: #d8eefe;
}

.notice .notice-txt {
    font-size: 16px;
    line-height: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.icn {
    margin: 0 2px -4px -12px;
    width: 20px;
    height: 20px;
}

.notice .icn {
    float: left;
    width: 24px;
    height: 24px;
    padding: 4px;
    margin: 6px 0 0 -36px;
    color: #fff;
    border-radius: 50%;
}

.notice .icn-info {
    background: #0065b8;
}

.notice .icn-warning {
    background: #cd1e3c;
}

.center {
    margin: 20px 0 20px;
    text-align: center;
}

.classic-btn {
    /* height: 26px; */
    /* line-height: 25px;  */
    /* padding: 0 .75em 0px; */
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    background: #1a9fff;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.2);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transition: all 125ms;
}

.classic-btn:active {
    color: #fff;
    text-decoration: none;
    background: #0065b8;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
}

.classic-btn:disabled {
    pointer-events: none;
    cursor: default;
    background-color: #ececec;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/** Undo redo Buttons **/

.nav-btn {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 26px;
    /* line-height: 24px;
    padding: 0 1.5rem; */
    color: #424242;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    outline: none;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 2px;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}

.nav-btn > img {
    display: block;
    width: 50%;
    margin: 2px auto;
}

.nav-btn.btn-fab, .nav-btn.btn-fab-mini {
    overflow: hidden;
    position: relative;
    margin: auto 12px auto auto;
    padding: 0;
    line-height: normal;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}
.nav-btn.btn-fab {
    width: 56px;
    height: 56px;
    font-size: 28px;
}
.nav-btn.btn-fab-mini {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* Buttons Color */
.nav-btn.btn-lightBlue {
    color: #FFF;
    background-color: #1A9FFF;
}

.nav-btn.btn-lightBlue:active {
    color: #fff;
    text-decoration: none;
    background: #0065b8;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
}

.nav-btn:disabled, .nav-btn[disabled] {
    pointer-events: none;
    cursor: default;
    background-color: #ececec;
    -webkit-box-shadow: none;
    box-shadow: none;
}








#content{
    /* width:100%;
    height:500px; */
    border: 12px solid transparent;
    border-radius: 3px;
    overflow:hidden;
  }

  #handwriting{
    height: calc(100vh - 200px);
    overflow-y:auto
}
  
  .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }

  .mask{height:100%;width:100%;}


  .overlay{ 
    position: absolute; 
    top: 70%; left: 0; 
    width: 100%; height: 30%; z-index: 100; background-color: rgba(42, 141, 221, 0.5);
    resize: horizontal;
    overflow: auto;
    text-align: center;
}