* {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

img{
    pointer-events: none;
}

body {
    position: relative;
    margin: auto;
    width: 100%;
    min-width: 1024px;
    height: 100vh;
    min-height: 576px;
    background-color: #FFFFFF;
    touch-action: none;
}

.gm-canvas-container {
    position: absolute;
    margin: auto;
    background-color: #FFFFFF;
    transform-origin: top left;
    height: auto;
    overflow: hidden;
}

canvas {
    width: 100%;
    height: inherit;
}

.gm-canvas-wrapper {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.gm-table {
    display: block;
    position: absolute;
    touch-action: none;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.gm-table img {
    width: 100%;
    position: absolute;
}

.gm-popup {
    display: block;
    position: absolute;
    cursor: move;
    touch-action: none;
    top: 5%;
    left: 3%;
    margin: 16px 16px 3px 3px;
    z-index: 3;
    font-family: sans-serif;
    font-weight: 600;
}

.gm-popup img {
    width: 100%;
    box-shadow: 0 0 15px 0 #888888;
}

.gm-btn-close {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    left: 100%;
    background-color: #7f878f;
    border-radius: 50%;
    text-align: center;
    font-weight: 100;
    color: #FFFFFF;
    transform: translate(-50%, -50%);
    cursor: pointer;
    font-size: 25px;
    line-height: 25px;
}

.gm-hidden {
    display: none;
}

.gm-zoom {
    overflow: auto;
}

/* ==========================================================================
   General style of button
   ========================================================================== */
.gm-left-wrapper {
    position: absolute;
    left: 2%;
}

.gm-right-wrapper {
    position: absolute;
    right: 2%;
}

ul.gm-btn-wrapper {
    padding: 0;
    margin: 0;
    width: 10%;
    bottom: 5%;
    z-index: 2;
    touch-action: none;
}

ul.gm-btn-wrapper li {
    display: block;
    width: 100%;
    margin: 3%;
    text-align: center;
}

ul.gm-btn-wrapper li button:focus {
    outline: 0;
}

ul.gm-btn-wrapper .gm-button {
    border: none;
    top: 0;
    left: 0;
    margin: 0 auto;
}

ul.gm-btn-wrapper .dash-line {
    width: 100%;
    background: url("../image/dash-line.png") repeat;
    margin: 16px auto;
    height: 2px;
}

/* Button iPad */
.iPad.gm-btn-wrapper {
    width: 170px;
}
.iPad.gm-left-wrapper {
    left: 0;
}
.iPad.gm-right-wrapper {
    right: 0;
}
.iPad.gm-btn-wrapper .gm-btn-normal {
    width: 160px;
    height: 49px;
}
.iPad.gm-btn-wrapper .gm-button {
    width: 120px;
    height: 49px;
}
.iPad.gm-btn-wrapper .dash-line {
    width: 120px;
}

.iPad.gm-btn-wrapper #swapImage {
    width: 116px;
    height: 49px;
    background-size: 100%;
}

/* ==========================================================================
   Normal button
   ========================================================================== */
.gm-button {
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
    height: auto;
}

#preload {
    background: url("../image/button/button-table.png"), url("../image/button/button-table-active.png"),
    url("../image/button/button-class-1.png"), url("../image/button/button-class-1-active.png"),
    url("../image/button/button-pencil.png"), url("../image/button/button-pencil-active.png"),
    url("../image/button/button-erase.png"), url("../image/button/button-erase-active.png"),
    url("../image/button/button-reset.png"), url("../image/button/button-reset-active.png"),
    url("../image/button/button-swap-left.png"), url("../image/button/button-swap-right.png")
}

#btnClass1 {
    background: url("../image/button/button-class-1.png") no-repeat;
    background-size: 100%;
}

#btnClass1.gm-active {
    background: url("../image/button/button-class-1-active.png") no-repeat;
    background-size: 100%;
}

#btnTable {
    background: url("../image/button/button-table.png") no-repeat;
    background-size: 100%;
}

#btnTable.gm-active {
    background: url("../image/button/button-table-active.png") no-repeat;
    background-size: 100%;
}

/* Button Pencil */
#btnPencil {
    background: url("../image/button/button-pencil.png") no-repeat;
    background-size: 100%;
}

#btnPencil.gm-active {
    background: url("../image/button/button-pencil-active.png") no-repeat;
    background-size: 100%;
}

/* Button Erase */
#btnErase {
    background: url("../image/button/button-erase.png") no-repeat;
    background-size: 100%;
}

#btnErase.gm-active {
    background: url("../image/button/button-erase-active.png") no-repeat;
    background-size: 100%;
}

/* Button Reset */
#btnReset {
    background: url("../image/button/button-reset.png") no-repeat;
    background-size: 100%;
}

#btnReset.gm-active {
    background: url("../image/button/button-reset-active.png") no-repeat;
    background-size: 100%;
}

/* Button Swap */
.gm-left-wrapper #swapImage {
    background: url("../image/button/button-swap-left.png") no-repeat center top;
    background-size: 98%;
}

.gm-right-wrapper #swapImage {
    background: url("../image/button/button-swap-right.png") no-repeat center top;
    background-size: 98%;
}

/*Hide scroll*/
@media screen and (min-height: 576px) {
    body {
        overflow-y: hidden;
    }
}

@media screen and (min-width: 1024px) {
    body {
        overflow-x: hidden;
    }
}