div.frame {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-overflow-scrolling: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/*project info*/
*.info {
    position: absolute;
    top: 0;
    right: 0vh;
    width: 5.73vh;
    height: 5.99vh;
    background:  url('../ui/info.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 10;
}

/* Container */
*.topsection {
    position: relative; /* anchor overlay positioning */
    padding: 0vh;
    margin: 0vh 0vh 0vh;
    width: 100%;
    height: 61.2vh;
    background:  url('../ui/backgrounds.png');
    background-size: 100% 100%;
}

*.leftpanel {
    position: relative;
    display: inline-block;
    margin: 0vh;
    padding: 0vh;
    width: 25.39vw;
    height: 61.20vh;
    z-index: 1;
}

*.centerpanel {
    position: absolute;
    top: 0px;
    width: 100%;
}

*.rightpanel {
    position: absolute;
    top: 0vh;
    right: 5.73vh;
    margin: 0vh;
    padding: 0vh;
    display: inline-block;
    height: 61.20vh;
    width: 21.09vh;
}

/* Pages Thumbnails */

.pages {
    top: 0vh;
    position: absolute;
    display: inline-block;
    margin: 0vh 1.29vh 0vh;
    width:  21.09vh;
    height: 100%;
}

.pagescc{
    position: absolute;
    top: 2.60vh;
    width:  21.09vh;
    height: 57.29vh;
}

.pagethumb {
    background: none;
    display: inline-block;
    margin: 0vh 0vh 0.13vh;
    padding: 0vh;
    width: ${145 * scaleMultiplier}px;
    height: ${109 * scaleMultiplier}px;
}

.pagethumb.on {
    background: url('../ui/pageOn.png');
    background-size: 100% 100%;
}

.pagethumb.off {
    background: url('../ui/pageOff.png');
    background-size: 100% 100%;
}

.pagethumb.caret {
    background: url('../ui/pageOff.png');
    opacity: 0.25;
    background-size: 100% 100%;
}

.pagethumb.drop {
    background: url('../ui/pageTarget.png');
    background-size: 100% 100%;
}

.pagethumb .pc-container {
    margin: 0.52vh 0.65vh 0vh;
}

.pagethumb .pc {
    position: relative;
}

.pagethumb .empty {
    margin: 0vh 0vh 0.13vh;
    width: ${145 * scaleMultiplier}px;
    height: ${109 * scaleMultiplier}px;
}

.pagethumb .empty img {
    height: ${109 * scaleMultiplier}px;
}

.pagethumb .pagenum {
    position: relative;
    margin: -14.64vh 16.06vh 0vh;
    padding: 0vh;
    width: 3.65vh;
    height: 3.65vh;
    font-size: 1.82vh;
    font-family: Roboto;
    font-weight: bold;
    color: white;
    padding-left: 1.0vh;
    padding-top: 0.5vh;
    text-shadow:  0 0.13vh #000;
    background: url('../ui/numOff.svg') no-repeat left top;
    background-size: 65%;
}

.pagethumb.on .pagenum {
    text-shadow:  0 ${-scaleMultiplier}px #AF7228;
    background: url('../ui/numOn.svg') no-repeat left top;
    background-size: 65%;
}

.pagethumb.off .pagenum {
    text-shadow:  0 ${scaleMultiplier}px #000;
    background: url('../ui/numOff.svg') no-repeat left top;
    background-size: 65%;
}

.pagethumb.drop .pagenum {
    text-shadow:  0 -${scaleMultiplier}px #AF7228;
    background: url('../ui/numOn.svg') no-repeat left top;
    background-size: 65%;
}

.deletethumb {
    position: relative;
    margin: -3.9vh 0vh 0vh;
    width: 5.86vh;
    height: 5.73vh;
    background: url('../ui/closeit.svg');
    background-size: 100.5%; /* webview pixelates the image unless we do this */
    visibility: hidden;
    z-index: 5;
    -webkit-user-select: none;
}

.deletethumb.on {visibility: visible; }

.deletethumb.off {visibility: hidden; }

.circle {
    position: absolute;
    width: 2.6vh;
    height: 2.6vh;
    background: #515050;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}

/*Editor UI*/

#blockspalette {
    position: relative;
    left: 0;
    right: 0;
    height: ${64 * scaleMultiplier}px;
    margin: 0vh;
    padding: 0vh;
    z-index: 10;
}

#blockspalette .papercut{
    position: absolute;
    margin: 0vh;
    top: ${64 * scaleMultiplier}px;
    left: 0vh;
    background: white;
    z-index: 50;
    width: 100%;
    height: ${3 * scaleMultiplier}px;
    -webkit-box-shadow: 0px ${2 * scaleMultiplier}px ${6 * scaleMultiplier}px #333;
}

#blockspalette .papercut .withstyle{
    position: absolute;
    margin: 0vh;
    top: 0vh;
    left: 0vh;
    width: 100%;
    height: ${7 * scaleMultiplier}px;
    background: url('../categories/papercut.png');
    background-size: auto 100%;
    background-repeat-x: repeat;
}

/* category selector */

#blockspalette .categoryselector{
    display: inline-block;
    word-spacing: -1;
    position: relative;
    margin: 0vh;
    z-index: 60;
    width: ${354 * scaleMultiplier}px;
    height: ${64 * scaleMultiplier}px;
    overflow: hidden;
}

#blockspalette .categoryselector .catbkg{
    position: relative;
    width: ${708 * scaleMultiplier}px;
    height: ${128 * scaleMultiplier}px;
    background: #E9ECF0;
    overflow: hidden;
    zoom: 50%;
}

.catbkg .catimage{
    width: ${708 * scaleMultiplier}px;
    height: ${132 * scaleMultiplier}px;
    background: url('../categories/categoryimage.svg');
    background-size: 100%;
}

#blockspalette .palette{
    display: inline-block;
    position: relative;
    margin: 0vh 0vh 0vh;
    height: ${64 * scaleMultiplier}px;
    width: ${659 * scaleMultiplier}px;
    z-index:4;
    overflow: hidden;
}

#blockspalette .yellow { background: #FFE75A;}    /* #ffe100;}{ background: #FFFA5A;} */
#blockspalette .blue { background: #4B8CC2;}
#blockspalette .pink { background: #CD7CD1;}
#blockspalette .orange { background: #FFBE57;}
#blockspalette .green { background: #48CC7E;}
#blockspalette .red { background: #D62222;}

#blockspalette .editorversion {
    float: right;
    text-align: left;
    margin: 0vh;
    margin-top: 5.47vh;
    padding: 0vh;
    width: 4.56vh;
    height: 2.6vh;
    overflow: hidden;
    z-index: 40;
}

#blockspalette .editorversion p{
    text-align: left;
    color: #f2f2f2;
    whiteSpace: nowrap;
    text-overflow: ellipsis;
    font-size:  1.56vh;
    line-height: 1.82vh;
    cursor: default;
}

/* Editor Brand Overlay (logo-only) */
#editor-brand {
    position: absolute;
    top: 0.65vh;
    left: 1.0vh;
    height: 8.33vh;
    display: flex;
    align-items: center;
    z-index: 120;
    pointer-events: none; /* container shouldn't block UI */
}

#editor-brand .brand-logo {
    height: 6.5vh;
    width: calc(6.5vh * 3.385);
    background: url('../ui/scratchjr-logo.svg') left center / contain no-repeat;
    cursor: pointer;
    pointer-events: auto; /* logo clickable */
    z-index: 1;
}

/* Home (flip) icon rendered next to the logo in the editor header */
#editor-brand .brand-home {
    height: 8.33vh; /* match toolbar icon size */
    width: 8.33vh;  /* square icon to match toolbar */
    background: url('../lobby/house.svg') center center / contain no-repeat;
    margin-left: 0; /* spacing handled by JS-calculated gap */
    cursor: pointer;
    pointer-events: auto;
    z-index: 2; /* render above logo when overlapped */
}

/* Palette animations */

.deleteasset {
    position: absolute;
    margin: -13.02vh 0vh 0vh;
    width: 5.86vh;
    height: 5.73vh;
    background: url('../ui/closeit.svg');
    background-size: 100.5%; /* webview pixelates the image unless we do this */
    z-index: 5;
    -webkit-user-select: none;
}

/* Palette animations */

.deletesound {
    position: absolute;
    margin: -0.78vh -0.78vh 0vh;
    width: 5.86vh;
    height: 5.73vh;
    background: url('../ui/closeit.svg');
    background-size: 100.5%; /* webview pixelates the image unless we do this */
    z-index: 5;
    zoom: 75%;
    -webkit-user-select: none;
}

.deletesprite {
    position: absolute;
    margin: 0vh 0vh 0vh;
    width: 45px;
    height: 44px;
    background: url('../ui/closeit.svg');
    background-size: 100.5%; /* webview pixelates the image unless we do this */
    z-index: 5;
    -webkit-user-select: none;
}

.deletetext {
    position: absolute;
    margin: -2.08vh -4.17vh 0vh;
    width: 5.86vh;
    height: 5.73vh;
    background: url('../ui/closeit.svg');
    background-size: 100.5%; /* webview pixelates the image unless we do this */
z-index: 5;
    -webkit-user-select: none;
}

.shakeme{
    -webkit-animation:swing 0.3s infinite ease-in-out;
    -webkit-transform-origin: center;
}

.shakeflip{
    -webkit-animation:swingflip 0.3s infinite ease-in-out;
    -webkit-transform-origin: center;
}

@-webkit-keyframes swingflip{
    0%{-webkit-transform:rotate(-3deg) scale(-1,1);}
    50%{-webkit-transform:rotate(6deg) scale(-1,1);}
    100%{-webkit-transform:rotate(-3deg) scale(-1,1);}
}

.shakeyou{
    -webkit-animation:swing 0.3s infinite ease-in-out 0.15s;
    -webkit-transform-origin: center;
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(6deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

.shakethumb{
    -webkit-animation:swingthumb 0.3s infinite ease-in-out;
    -webkit-transform-origin: center;
}

@-webkit-keyframes swingthumb{
    0%{-webkit-transform:rotate(0.8deg)}
    50%{-webkit-transform:rotate(-1.6deg)}
    100%{-webkit-transform:rotate(0.8deg)}
}


/* Undo */

.controlundo {
    position: absolute;
    display: inline-block;
    top: 0.91vh;
    right: 1vh;
    margin: 0.00vh;
    padding: 0.00vh;
    width: ${100 * scaleMultiplier};
    height: 6.51vh;
    z-index: 6;
}

.undobutton {
    display: inline-block;
    position: relative;
    margin: 0.00vh;
    padding: 0.00vh;
    width: 6.51vh;
    height: 6.51vh;
    background: url('../undo/undo.png');
    background-size: 101%;
    -webkit-user-select: none;
}

.redobutton {
    display: inline-block;
    position: relative;
    margin: 0.00vh;
    padding: 0.00vh;
    width: 6.51vh;
    height: 6.51vh;
    background: url('../undo/redo.png');
    background-size: 101%;
    -webkit-user-select: none;
}

.undobutton.enable {opacity: 1; background: url('../undo/undo.svg'); background-size: 101%;}
.undobutton.pressed { background:  url('../undo/undopressed.svg'); background-size: 101%;}
.undobutton.disable {opacity: 0.5; background:  url('../undo/undoOff.svg'); background-size: 101%;}

.redobutton.enable {opacity: 1; background: url('../undo/redo.svg'); background-size: 101%;}
.redobutton.pressed { background: url('../undo/redopressed.svg'); background-size: 101%;}
.redobutton.disable {opacity: 0.5; background: url('../undo/redoOff.svg'); background-size: 101%;}

/* Scripts */

.scripts {
    background: white;
    left: 0;
    right: 0;
    position: absolute;
    overflow: hidden;
}

#scriptscontainer {}

#scriptscontainer .look {
    position: absolute;
    display: visible;
    -webkit-transform-style: preserve-3d;
}

#scriptscontainer .script {
    position: absolute;
}

.watermark {
    position: absolute;
    top: 2.60vh;
    left: 3.26vh;
    width: 18.88vh;
    height: 18.88vh;
}

.watermark img{
    max-width: 100%;
    max-height: 100%;
}

.watermark > canvas{
    position: absolute;
}

.scripts .leftarrow {
    float: left;
    padding: 0.00vh;
    padding-left: 1.30vh;
    z-index: 10;
    visibility: hidden;
}

.scripts .leftarrow span {
    position: relative;
    display: inline-block;
    width:  3.91vh;
    height: 5.86vh;
    background: url('../ui/arrowleft.svg');
    background-size: 100%;
}

.scripts .rightarrow {
    float: right;
    padding: 0.00vh;
    padding-right: 1.30vh;
    width: 3.91vh;
    z-index: 10;
    visibility: hidden;
}

.scripts .rightarrow span {
    position: relative;
    display: inline-block;
    width:  3.91vh;
    height: 5.86vh;
    background: url('../ui/arrowright.svg');
    background-size: 100%;
}

.scripts .toparrow {
    position: relative;
    top: 0.65vh;
    left: 0;
    right: 0;
    height: 3.91vh;
    z-index: 10;
    visibility: hidden;
}

.halign {
    margin: 0.00vh;
    padding: 0.00vh;
    width:  5.86vh;
    height: 3.91vh;
    margin-left: auto;
    margin-right: auto;
}

.halign.up { background: url('../ui/arrowup.svg'); background-size: 100%; }


.scripts .bottomarrow {
    position: fixed;
    bottom: 0.65vh;
    left: 0;
    right: 0;
    height: 3.91vh;
    z-index: 10;
    visibility: hidden;
}

.halign.down { background: url('../ui/arrowdown.svg'); background-size: 100%; }

/* parental gate */
.parentalgate {
    position: fixed;
    display: inline-block;
    text-align: center;
    margin: 0;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #F9CF37;
    z-index: 12000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0.2)), color-stop(35%,rgba(255, 255, 255, 0)), color-stop(100%,rgba(255, 255, 255, 0)));
}

.parentalgateproblem {
    width: 100%;
    margin-top: 20%;
    margin-bottom: 10%;
    text-align: center;
    color: #fff;
    font-size: 50pt;
}

.parentalgatechoice {
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
    text-align: center;
    font-weight: bold;
    font-size: 19pt;
    letter-spacing: .5px;
    width: 24.41vw;
    height: 5.21vh;
    padding-top: 1.56vh;
    border-radius: 15px;
    border: 2px solid #c19f21;
    float: left;
    margin-left: 6%;
}

.parentalgateexplain {
    margin-top: 20%;
    width: 100%;
    text-align: center;
    font-style: italic;
    font-size: 18pt;
    color: #fff;
}

/* info box */

.infobox {
    position: fixed;
    display: inline-block;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #F9CF37;
    z-index: 11000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0.2)), color-stop(35%,rgba(255, 255, 255, 0)), color-stop(100%,rgba(255, 255, 255, 0)));
}

div.infoboxParentsSection {
   width: 51%;
   margin: auto;
   margin-top: 8%;
}

div.infoboxParentsButton {
   color: #fff;
   background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
   text-transform: uppercase;
   text-align: center;
   font-weight: bold;
   font-size: 15pt;
   letter-spacing: .5px;
   width:  23.41vw;
   padding-top: 1.56vh;
   padding-bottom: 1.56vh;
   padding-left: .5vw;
   padding-right: .5vw;
   border-radius: 15px;
   border: 2px solid #c19f21;
   margin: auto;
}

div.infoboxShareButtons {
   width: 51%;
   margin: auto;
   margin-top: 8%;
   visibility: hidden;
}

div.infoboxShareButton {
   color: #fff;
   background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
   text-transform: uppercase;
   text-align: center;
   font-weight: bold;
   font-size: 15pt;
   letter-spacing: .5px;
   width:  23.41vw;
   padding-top: 1.56vh;
   padding-bottom: 1.56vh;
   padding-left: .5vw;
   padding-right: .5vw;
   border-radius: 15px;
   border: 2px solid #c19f21;
   margin: auto;
}

div#infoboxShareButtonEmail::before {
   content: "";
   position: absolute;
   display: block;
   background-image: url(../ui/email-shadow.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   width: 4.88vw;
   height:  6.51vh;
   -webkit-transform: rotate(-10deg);
   margin-left: 10%;
   margin-top: -4%;
}

div#infoboxShareButtonAirdrop::before {
   content: "";
   position: absolute;
   display: block;
   background-image: url(../ui/airdrop-shadow.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   width: 4.88vw;
   height:  6.81vh;
   -webkit-transform: rotate(-10deg);
   margin-left: 10%;
   margin-top: -5%;
}

img.infoboxShareLoading {
    margin-top:3%;
    margin-left:45%;
    visibility: hidden;
    -webkit-animation: 3s rotate linear infinite;
}

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

.infobox.fade {
    /*  -webkit-transition: top .2s linear, left .2s ease-out;*/
    top: -100vh;
    left: 133.33vh;
}

.infobox.fade.in {
    /*  -webkit-transition: top .2s linear, left .2s ease-out;*/
    left: 0vh;
    top: 0vh;
}


form.projectname {
    padding: 0vh;
    width: 46.88vh;
    height: 6.51vh;
    margin: 0vh 0vh 0vh;
    top: 18.88vh;
    background: #D6AF36;
    border: 2px solid #D6AF36;
    -webkit-box-shadow: inset 0 ${2 * scaleMultiplier}px 0 rgba(255, 255, 255, 1), 0 ${scaleMultiplier}px ${2 * scaleMultiplier}px rgba(255, 255, 255,0);
    -webkit-border-radius: ${32 * scaleMultiplier}px;
    -webkit-box-shadow: 0px ${scaleMultiplier}px 0px #ffffff;
    margin-left: auto;
    margin-right: auto;
    /*	-webkit-user-select: none !important;*/
}

*.pnamefield{
    position: absolute;
    margin: 0vh 0.26vh 0vh;
    padding: 0vh;
    text-align: center;
    font-family: Roboto;
    font-weight: normal;
    font-size: 3.13vh;
    line-height: 4.17vh;
    -webkit-border-radius: ${36 * scaleMultiplier}px;
    cursor: default;
    background: white;
    width: 46.88vh;
    height: 6.51vh;
    outline: 0vh;
}

.fixedinfo {
    top: 26.04vh;
    height: 4.17vh;
    margin-left: auto;
    margin-right: auto;
}

.infolabel {
    display: inline-block;
    position: relative;
    margin: 0vh;
    padding: 0vh;
    width:  100%;
    height: 4.17vh;
    line-height: 2.86vh;
    text-shadow: 0.00vh -0.13vh #D6AF36;
    color: #fff;
    text-align: center;
    font-size: 15pt;
    margin-top: 2%;
    font-weight:bold;
}

.infolabel.project { line-height: 4.17vh;}
.infolabel.project h4 {
    text-align: center;
    font-size: 3.13vh;
    font-weight: bold;
    margin: -1.30vh 0.00vh 0.00vh;
    color: #28A5DA;
    vertical-align: middle;
    font-family: Roboto;

}

.infolabel h3 {
    text-align: center;
    font-size: 2.34vh;
    font-weight: bold;
    margin: 0.00vh;
    color: #ffffff;
    vertical-align:middle;
    font-family: Roboto;
}

.infoboxlogo {
    top: 1.82vh;
    left: 43.23vh;
    width: 46.75vh;
    height: 16.67vh;
    background: url('../pinfologo.png');
    background-size: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Programming */

*.menustyle {
  -webkit-border-radius: 12px;
  border-radius: 12px;
  display: inline-block;
  overflow: visible;
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 0, 0.5), 0 1px 2px rgba(0, 0, 0,0);
  box-shadow: inset 0 2px 0 rgba(255, 255,255, 0.5), 0 1px 2px rgba(0, 0, 0, 0);
  cursor: pointer;
  margin: 0px;
  padding: 3px;
  height: 32px;
}

*.menustyle.orange {
	background-color: #FFB62B;
	border: 2px solid #F7931E;
  border-color: #FFB62B #FFB62B hsl(35, 79%, 60%);
}

*.menustyle.yellow {
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 0, 1), 0 1px 2px rgba(0, 0, 0,0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 0,1), 0 1px 2px rgba(0, 0, 0, 0);
	background-color: #FFEA00;
	border: 2px solid #D6BD05;
  border-color: #FFEA00 #FFEA00 hsl(59, 79%, 60%);
}

*.ddchoice{
  width: 42px;
  height: 42px;
  margin: 2px;
  -webkit-border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

*.menustyle.yellow > *.ddchoice{
	-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 0, 1), 0 -1px 0px -1px  rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 0, 1), 0 -1px 0px -1px  rgba(0, 0, 0, 0.2);
	background-color: #FCDD03;
	border: 2px solid #D6BD05;
  border-color: #FCDD03 #FCDD03 hsl(52, 79%, 40%);
}

*.menustyle.orange > *.ddchoice{
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 0, 0.5), 0 -1px 0px -1px  rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 0, 0.5), 0 -1px 0px -1px  rgba(0, 0, 0, 0.2);
	background-color: #FFA10B;
	border: 2px solid #C67100;
  border-color: #C67100 #C67100 hsl(35, 79%, 40%);
}

*.menustyle.yellow > *.ddchoice:active{
	-webkit-box-shadow: inset 0 2px 0 #B59B00;
  box-shadow: inset 0 2px 0 #B59B00;
	background-color: #E2C705;
	border: 2px solid #B59B00;
  border-color: #B59B00 #B59B00 hsl(52, 79%, 55%);
}

*.menustyle.orange > *.ddchoice{
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 0, 0.5), 0 -1px 0px -1px  rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 0, 0.5), 0 -1px 0px -1px  rgba(0, 0, 0, 0.2);
	background-color: #FFA10B;
	border: 2px solid #F7931E;
  border-color: #FFB62B #FFB62B hsl(35, 75%, 60%);
}

*.ddchoice > canvas{
	padding: 0px;
	width: 42px;
	height: 42px;
	z-index: 8
}

p.soundname{
    position: absolute;
    text-align: center;
    margin: 0;
    color: #337b36;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    padding: 0.00vh;
    cursor: default;
    -webkit-text-size-adjust: auto;
    -webkit-transform: translateZ(0);
}

/* zoom is already applied so no need to multiply by scaleMultiplier */
.recordedCircle {
    position: absolute;
    top: 32px;
    left: 37px;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 20px;
    border: 2px solid #64A01F;
    background: white;
    -webkit-transform: translateZ(0);
}

/* zoom is already applied so no need to multiply by scaleMultiplier */
.recordedNumber{
    position: relative;
    top: 0.4vh;
    text-align: center;
    width: 20px;
    margin: 0;
    color: #64A01F;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size:  13px;
    font-weight:bold;
    font-family: Verdana;
    line-height: 16px;
    padding: 0px;
    cursor: default;
    -webkit-text-size-adjust: auto;
}

p.balloon{
    position: absolute;
    text-align: center;
    margin: 0.65vh;
    color: #ffffff;
    font-family: Verdana;
    font-size:  14px;
    font-weight: bold;
    overflow: hidden;
    z-index:  4;
    -webkit-text-size-adjust: auto;
}

/*
Blocks text fields and input fields
*/

.textfield {
    position: absolute;
    margin: 0.00vh;
    padding: 0.00vh;
    height: 3.13vh;
    width: 6.51vh;
    top: 7.16vh;
    left: 0.78vh;
    color: #77787b;
    -webkit-border-radius: ${6 * scaleMultiplier}px;
    border: ${2 * scaleMultiplier}px solid #c0c2c3;
    background: #ffffff;
    pointer-events: all;
    -webkit-transform: translateZ(0);
}

.textfield h3 {
    margin: 0.00vh;
    padding: 0.00vh;
    float: left;
    text-align: center;
    color: #77787b;
    font-family: Verdana;
    font-size:  1.82vh;
    font-weight: normal;
    font-size:  1.82vh;
    height: 3.13vh;
    width: 6.51vh;
    cursor: default;
    line-height: 3.13vh;
    overflow: hidden;
    pointer-events: all;
}

.textform {
    position: absolute;
    padding: 0vh 0vh;
    height: 6.25vh;
    width: 62.51vh;
    top: 7.16vh;
    left: 0.79vh;
    display: none;
}

.textform.on {display: block};
.textform.off {display: none};

.textinput {
    margin: 0vh;
    padding: 0vh;
    float: left;
    background: #ffffff;
    -moz-border-radius: ${5 * scaleMultiplier}px;
    -webkit-border-radius: ${5 * scaleMultiplier}px;
    outline: 0px solid;
    text-align: center;
    color: #77787b;
    font-family: Verdana;
    cursor: default;
    border: 2px solid  #28A5DA;
    width: 62.51vh;
    height: 6.25vh;
    font-size: 3.13vh;
}

.textinput:focus{
    border: 2px solid  #28A5DA;
    -moz-border-radius: ${5 * scaleMultiplier}px;
    -webkit-border-radius: ${5 * scaleMultiplier}px;
    outline-color: rgba(0, 0, 0, 0);
    width: 62.51vh;
    height: 6.25vh;
    font-size: 3.13vh;
}

/* numric keyboard */

*.picokeyboard {
    position: absolute;
    display: none;
    padding: 0vh;
    margin: 0vh;
    width: 23.44vh;
    height: 27.34vh;
    top: 71.61vh;
    right: 1vh;
    border: ${scaleMultiplier}px solid #B9C0C6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0%,#ffffff), color-stop(1%,#ffffff),  color-stop(100%,#F9F9F9));
    -webkit-border-radius: ${6 * scaleMultiplier}px;
    -webkit-box-shadow: ${2 * scaleMultiplier}px ${2 * scaleMultiplier}px 0vh #aaa;
    z-index: 1000;
}

*.picokeyboard.on {display: block;}

*.picokeyboard.off {    display: none;}

*.insidekeyboard {
    margin: 0.65vh 0.65vh 0.00vh;
    position: relative;
    padding: 0.00vh;
    width: 23.18vh;
    height: 27.08vh;
    -webkit-border-radius: ${6 * scaleMultiplier}px;
}

*.onekey {
    display: inline-block;
    position: relative;
    width: 6.77vh;
    height: 5.21vh;
    margin: 0.26vh;
    color: #999;
    line-height: 4.95vh;
    vertical-align: middle;
    font-size: 2.08vh;
    font-family: Roboto;
    font-weight: bold;
    margin: 0.39vh;
    text-shadow: 0 0.13vh #fff;
    background: url('../ui/keyup.svg');
    background-size: 100%;
}

*.onekey:active { background: url('../ui/keydown.svg'); background-size: 100%; }

*.onekey.minus {
    font-size: 3.13vh;
    font-family: 'Verdana';
    line-height: 4.17vh;
}

*.onekey.space {
    background: none;
}

.onekey>span {
    padding: 0.00vh 2.60vh 0.00vh;
}

.onekey:active>span {
    font-size: 2.08vh;
    line-height: 5.86vh;
}

*.onekey.delete {
    background: url('../ui/deleteup.svg');
    background-size: 100%;
}

*.onekey.delete:active {
    background: url('../ui/deletedown.svg');
    background-size: 100%;
}

.numfield {
    position: absolute;
    margin: 0.00vh;
    padding: 0.00vh;
    border: 0px solid;
    height: 3.13vh;
    width: 5.47vh;
    top: 7.16vh;
    left: 1.30vh;
    color: #77787b;
    -moz-border-radius: ${12 * scaleMultiplier}px;
    -webkit-border-radius: ${12 * scaleMultiplier}px;
    border: ${2 * scaleMultiplier}px solid #c0c2c3;
    background: #ffffff;
    pointer-events: all;
    -webkit-transform: translateZ(0);
}

.numfield h3 {
    margin: 0.00vh;
    padding: 0.00vh;
    float: left;
    text-align: center;
    color: #77787b;
    font-family: Verdana;
    font-size:  1.82vh;
    font-weight: normal;
    height: 3.13vh;
    width: 5.47vh;
    cursor: default;
    line-height: 3.13vh;
}

.numfield.on {
    -webkit-box-shadow: 0px ${scaleMultiplier}px ${scaleMultiplier}px rgba(40, 165, 218, 0.5);
    border: ${2 * scaleMultiplier}px solid  #9dc7d5;
    background: #28A5DA;
    color: #ffffff;
}

.numfield.on h3 {  color: #ffffff; font-weight: bold;}


/* text */

p.textsprite {
    position: absolute;
    text-align: left;
    font-family: Helvetica;
    font-weight: bold;
    width: auto;
    -webkit-text-size-adjust: auto;
}