::-webkit-scrollbar {
    display: none;
}

:root {

    --f7-navbar-bg-color: #fff;
    /* --f7-navbar-text-color: #ffffff; */
    --f7-dialog-width: 480px;

}


.top-logo {

    height: 28px;
    margin-top: 6px;

}

.home-title {

    margin-left: 24px !important;

}

#main-block {
    width: 1180px;
    /* border:1px solid #ddd; */
    margin: 16px auto;
}

img#showImg {

    position: absolute;
    left: 0;
    top: 0;
    background: url('../ui/canvas-bg.jpg') no-repeat center center;
    background-size: cover;
    display: block;
    /* to remove the scrollbars */
    z-index: 1;

    width: 750px;
    height: 520px;

}

#img-title {

    background-color: rgba(0,0,0,0.7);
    padding:6px 8px 2px 8px;
    text-align:right;
    position: absolute;
    right: 10px;
    bottom: 34px;
    display: block;
    z-index: 2;

    width: 260px;
    height: 16px;
    font:11px "Roboto";
    color:rgb(255, 255, 255);
}

#droplet-type {
    background-color: rgba(0,0,0,0.7);
    padding:4px 8px;
    text-align:right;
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: block;
    z-index: 2;

    width: 260px;
    height: 16px;
    font:11px "Roboto";
    color:rgb(250, 255, 175);
}


canvas#mainCanvas {

    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    display: block;
    /* to remove the scrollbars */
    z-index: 3;
}

canvas#detectionCanvas {

    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    display: block;
    /* to remove the scrollbars */
    z-index: 2;
}

#canvascard {

    height: 520px;

}

.highlight {

    border:2px dotted red;
}

.greekth {
    font-family: "GFS Didot";
    font-size: 16px; 
}