@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
    font-family: 'Montserrat', sans-serif !important;
  }
html, body {
    font-family: 'Montserrat', sans-serif !important;
    transition: all .5s ease-in-out !important;
}

:root {
    --primary: #64c3d4;
    --secondary: #1f2448;
    --success: #5ee0ac;
    --info: #64c3d4;
    --warning: #d4c64e;
    --danger: #d479a1;
}  

#test{
    margin-top:2em;
    margin-bottom:2em;
}

div.testArea{
    display:inline-block;
    width:16em;
    height:12.5em;
    position:relative;
    box-sizing:border-box;
}

div.testArea2{
    display:inline-block;
    width:10em;
    height:7em;
    position:relative;
    box-sizing:border-box;
    text-align:center;
}

div.testArea div.testName{
    position:absolute;
    top:0.1em; left:0;
    width:100%;
    font-size:1.4em;
    z-index:9;
}

div.testArea2 div.testName{
    display:block;
    text-align:center;
    font-size:1.4em;
}

div.testArea div.meterText{
    position:absolute;
    bottom:1.55em; left:0;
    width:100%;
    font-size:2.5em;
    z-index:9;
}

div.testArea2 div.meterText{
    display:inline-block;
    font-size:2.5em;
}

div.meterText:empty:before{
    content:"0.00";
}

div.testArea div.unit{
    position:absolute;
    bottom:2em; left:0;
    width:100%;
    z-index:9;
}

div.testArea2 div.unit{
    display:inline-block;
}

div.testArea canvas{
    position:absolute;
    top:5%; left:5%; width:90%; height:90%;
    z-index:1;
}

div.testGroup{
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

#shareArea{
    width:95%;
    max-width:40em;
    margin:0 auto;
    margin-top:2em;
}
#shareArea > *{
    display:block;
    width:100%;
    height:auto;
    margin: 0.25em 0;
}

#privacyPolicy{
    position:fixed;
    top:100%;
    bottom:2em;
    left:2em;
    right:2em;
    overflow-y:auto;
    width:auto;
    height:auto;
    z-index:999999;
    text-align:left;
    background-color:#FFFFFF;
    transition: all .75s ease-in-out !important;
}

a.privacy{
    text-align:center;
    font-size:0.8em;
    color:#808080;
    display:block;
}

@media all and (max-width:40em){
    body{
        font-size:0.8em;
    }
}

.btn {
    transition: all .75s ease-in-out !important;
}