/* =====================================================
   TimerPHP Version 2.0
   ===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{

    width:100%;
    height:100%;

    font-family:
        "Yu Gothic UI",
        "Meiryo",
        sans-serif;

    background:#eef2f7;

    color:#222;

}

body{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:20px;

}

/* ------------------------------ */

#container{

    width:1100px;

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 4px 12px rgba(0,0,0,.2);

    overflow:hidden;

}

/* ------------------------------ */

header{

    background:#1976d2;

    color:white;

    padding:20px;

}

header h1{

    font-size:34px;

}

#currentDate{

    margin-top:10px;

    font-size:18px;

}

#currentTime{

    margin-top:5px;

    font-size:46px;

    font-weight:bold;

    letter-spacing:3px;

}

/* ------------------------------ */

main{

    padding:20px;

}

/* ------------------------------ */

#clockArea{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

#digitalClock{

    width:320px;

    height:320px;

    display:flex;

    justify-content:center;

    align-items:center;

}

#clockText{

    font-size:64px;

    font-weight:bold;

}

#analogClock{

    display:none;

    width:320px;

    height:320px;

}

/* ------------------------------ */

#modeArea{

    display:flex;

    gap:20px;

    margin-bottom:25px;

}

#modeArea label{

    cursor:pointer;

}

/* ------------------------------ */

section{

    margin-bottom:30px;

}

section h2{

    margin-bottom:15px;

    color:#1976d2;

}

/* ------------------------------ */

table{

    width:100%;

    border-collapse:collapse;

}

table th{

    width:170px;

    background:#f5f5f5;

    padding:10px;

    border:1px solid #ddd;

    text-align:left;

}

table td{

    padding:10px;

    border:1px solid #ddd;

}

/* ------------------------------ */

input[type=text]{

    width:100%;

    padding:8px;

    font-size:15px;

}

input[type=time]{

    padding:8px;

    font-size:15px;

}

select{

    padding:8px;

}

input[type=range]{

    width:250px;

}

/* ------------------------------ */

#alarmTable{

    width:100%;

}

#alarmTable th{

    background:#1976d2;

    color:white;

    text-align:center;

}

#alarmTable td{

    text-align:center;

}

#alarmTable tbody tr:hover{

    background:#ffffdd;

    cursor:pointer;

}

/* ------------------------------ */

#buttonArea{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

button{

    border:none;

    background:#1976d2;

    color:white;

    padding:10px 20px;

    border-radius:5px;

    cursor:pointer;

    font-size:15px;

}

button:hover{

    background:#1565c0;

}

button:active{

    transform:scale(.97);

}

/* ------------------------------ */

#statusArea{

    margin-top:20px;

}

#status{

    background:#222;

    color:#00ff00;

    font-family:Consolas,monospace;

    padding:10px;

    border-radius:5px;

}

/* ------------------------------ */

footer{

    background:#ececec;

    padding:15px;

    text-align:center;

    color:#666;

}

/* ------------------------------ */

#overlay{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.4);

    z-index:900;

}

/* ------------------------------ */

#messageBox{

    display:none;

    position:fixed;

    width:420px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:white;

    border-radius:10px;

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

    padding:25px;

    z-index:999;

}

#messageBox h3{

    color:#1976d2;

    margin-bottom:20px;

}

#messageText{

    font-size:22px;

    margin-bottom:25px;

}

#messageButtonArea{

    display:flex;

    justify-content:center;

    gap:15px;

}

/* ------------------------------ */

.hidden{

    display:none;

}

.center{

    text-align:center;

}

/* ------------------------------ */

@media(max-width:900px){

#container{

    width:100%;

}

#clockArea{

    flex-direction:column;

}

#buttonArea{

    justify-content:center;

}

table th{

    width:120px;

}

#clockText{

    font-size:48px;

}

}