body{

 user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

background:#000;

color:#fff;

font-family:sans-serif;

text-align:center;

padding-top:50px;

}

.appTitle{

    text-align:center;

    line-height:1;

    margin-top:12px;

    user-select:none;

}

.titleTop{

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    letter-spacing:2px;

}

.titleBottom{

    margin-top:2px;

    color:#d9b13b;

    font-size:24px;

    font-weight:700;

    letter-spacing:3px;

    text-shadow:
        0 0 6px rgba(255,215,0,.25);

}

/* STATUS */

.status{

width:80%;

margin:20px auto;

padding:;

background:;

border-radius:;

font-size:18px;

}

/* Efek hidup perlahan */

.status-pulse{

    animation:statusPulse 2s ease-in-out infinite;

}

@keyframes statusPulse{

    0%{

        opacity:1;

    }

    50%{

        opacity:.6;

    }

    100%{

        opacity:1;

    }

}

/* Error */

.status-error{

    color:#ff4040;

    animation:statusError .35s linear infinite;

}

@keyframes statusError{

    0%{

        opacity:1;

    }

    50%{

        opacity:.2;

    }

    100%{

        opacity:1;

    }

}

/* Indikator */

.monitor-wrap{
    display:flex;
    justify-content:center;
    margin:12px 0;
}

.indicator{
    width:24px;
    height:24px;
    border-radius:50%;
    transition:.2s;
}

.standby{
    background:#ffc107;
    box-shadow:0 0 10px #ffc107;
}

.receive{
    background:#00ff66;
    box-shadow:0 0 20px #00ff66;
}

/* Tombol PTT */

#ptt {

-webkit-tap-highlight-color: transparent;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: none;

    background: #1976d2;

    color: white;

    font-size: 24px;
    font-weight: 700;

    cursor: pointer;

    transition: all .15s ease;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    touch-action: manipulation;

touch-action: none;

}

#ptt.talking {

    background: #d50000;

    transform: scale(0.95);

    box-shadow:
        0 0 20px rgba(255,0,0,.5);

}

#ptt.locked{

    animation: pttlock 1.2s infinite;

}

@keyframes pttlock{

    0%{

        background:#b00000;

    }

    50%{

        background:#ff3030;

    }

    100%{

        background:#b00000;

    }

}

/* Tombol MONITOR */

#monBtn{

display:block;

width:80px;

height:25px;

margin:18px auto 10px;

background:#111;

color:#fff;

border:1px solid #555;

border-radius:10px;

font-size:12px;

font-weight:bold;

cursor:pointer;

}

#monBtn.active{

background:#00cc44;

color:#000;

border-color:#00ff55;

}

.monHelp{

text-align:center;

color:#fff;

font-size:12px;

margin-top:2px;

margin-bottom:30px;

padding:0 20px;

}

/* Roger Beep */

#rogerBeep{
    margin-top:8px;
    color:white;
    cursor:pointer;
    user-select:none;
    font-size:14px;
}

#rogerBeep.on{
    color:#ff3030;
    font-weight:bold;
}

/* Developer */

.developer-box{
    width: 200px;
    margin: 20px auto 0;
    padding: 12px;

    text-align:center;

    border:1px solid #8a6d00;
    border-radius:6px;

    color:#c9a227;

    font-size:14px;
    letter-spacing:1px;

    background:rgba(255,193,7,.03);
}

.devLink,
.waLink{

display:block;

text-decoration:none;

color:#c9a227;

cursor:pointer;

transition:.2s;

}

.devLink{

font-size:16px;

font-weight:bold;

letter-spacing:2px;

margin-top:4px;

}

.waLink{

font-size:14px;

letter-spacing:2px;

margin-top:4px;

}

.devLink:hover,
.waLink:hover{

color:#ffd54f;

}

.devLink:active,
.waLink:active{

transform:scale(.98);

}