/* ==========================================
   ViewSys Digital Signage Player
========================================== */

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    color:#fff;

    font-family:Arial,Helvetica,sans-serif;

}

/* ==========================================
   Utility
========================================== */

.hidden{

    display:none !important;

}

/* ==========================================
   Main Player
========================================== */

#player{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    background:#000;

}

/* ==========================================
   Header
========================================== */

#header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:60px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    z-index:100;

}

#headerText{

    font-size:24px;

    font-weight:bold;

    color:#fff;

}

#clock{

    font-size:22px;

    color:#00ff99;

}

/* ==========================================
   Content
========================================== */

#content{

    position:absolute;

    top:60px;

    left:0;

    right:0;

    bottom:45px;

    background:#000;

    overflow:hidden;

}

/* ==========================================
   Players
========================================== */

video,
img,
iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:none;

    border:none;

    background:#000;

}

video{

    object-fit:contain;

}

img{

    object-fit:contain;

}

iframe{

    background:#fff;

}

/* ==========================================
   Footer
========================================== */

#footer{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:45px;

    background:#111;

    overflow:hidden;

    display:flex;

    align-items:center;

}

/* ==========================================
   Ticker
========================================== */

#tickerContainer{

    width:100%;

    overflow:hidden;

    white-space:nowrap;

}

#ticker{

    display:inline-block;

    padding-left:100%;

    color:#FFD700;

    font-size:20px;

    font-weight:bold;

    animation:tickerMove 20s linear infinite;

}

@keyframes tickerMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-100%);

    }

}

/* ==========================================
   Loading Screen
========================================== */

#loadingScreen{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader{

    width:90px;

    height:90px;

    border-radius:50%;

    border:8px solid #333;

    border-top:8px solid #FFD700;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

#loadingScreen h1{

    margin-top:30px;

    font-size:34px;

}

#loadingText{

    margin-top:12px;

    color:#aaa;

    font-size:18px;

}

/* ==========================================
   Error Screen
========================================== */

#errorScreen{

    position:fixed;

    inset:0;

    background:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.errorBox{

    width:520px;

    max-width:90%;

    background:#222;

    border:2px solid red;

    border-radius:10px;

    padding:30px;

    text-align:center;

}

.errorBox h2{

    color:#ff4444;

    margin-bottom:20px;

}

#errorMessage{

    color:#ddd;

    margin-bottom:20px;

    line-height:1.5;

}

#retryButton{

    background:#FFD700;

    color:#000;

    border:none;

    border-radius:5px;

    padding:12px 30px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

}

#retryButton:hover{

    background:#FFC107;

}

/* ==========================================
   Status Panel
========================================== */

#statusPanel{

    position:absolute;

    right:15px;

    top:75px;

    width:230px;

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

    border-radius:10px;

    padding:15px;

    font-size:14px;

    line-height:1.6;

    z-index:200;

}

#statusPanel strong{

    color:#FFD700;

}

#statusPanel span{

    color:#00ff99;

    word-break:break-word;

}

/* ==========================================
   Scrollbar
========================================== */

::-webkit-scrollbar{

    width:0;

    height:0;

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:768px){

    #header{

        height:50px;

        padding:0 15px;

    }

    #headerText{

        font-size:18px;

    }

    #clock{

        font-size:18px;

    }

    #content{

        top:50px;

    }

    #statusPanel{

        width:180px;

        font-size:12px;

    }

    #ticker{

        font-size:16px;

    }

}