/*
// main.css
// (c) 2019 - 2020 Insert Coin LLC. All rights reserved.
*/

:root
{
    --light-tone   : #B0BEC5;
    --medium-tone  : #546E7A;
    --dark-tone    : #263238;
    --darkest-tone : #151b1e;

    --primary-colour      : #E91E63;
    --primary-colour-dim  : #7f1039;
    --primary-colour-dark : #680d2e;

    --bounce-easing : cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

body
{
    font-family      : 'Nanum Gothic', sans-serif;
    font-size        : 12pt;
    background-color : black;
    margin           : 0;
    color            : white;
    display          : flex;
    justify-content  : space-around;
    flex-direction   : column;
}

.theatre
{
    display        : flex;
    flex-direction : column;
    align-items    : center;
    max-width      : 800px;
    margin         : 120px auto;
    border         : none;
}

.theatre ::-webkit-media-controls
{
    display : none;
}

.theatre .actions
{
    display        : flex;
    flex-direction : row;
    align-items    : center;
    margin-top     : 10px;
}

.theatre .actions .time
{
    font-size : 14px;
    margin-right : 7px;
}

.theatre .actions .progress
{
    width : 605px;
}

.theatre .progress
{
    height           : 24px;
    background-color : var(--primary-colour-dark);
    opacity          : 0.4;
    transition       : opacity 0.3s ease-out;
}

.theatre .progress:hover,
.theatre .progress.seeking
{
    opacity : 1.0;
}

.theatre .progress:after
{
    display          : inline-block;
    height           : 24px;
    background-color : var(--primary-colour);
    content          : "";
}

.theatre .actions .synchronise
{
    padding          : 7px;
    cursor           : pointer;
    border-radius    : 1px;
    font-weight      : bolder;
    font-size        : 14px;
    background-color : var(--primary-colour);
    transition       : 0.3s transform var(--bounce-easing);
}

.theatre .actions .synchronise:hover
{
    transform : scale(1.2);
}

.theatre .online
{
    width            : 12px;
    height           : 12px;
    border           : 2px solid var(--primary-colour-dim);
    background-color : var(--primary-colour-dark);
    border-radius    : 50%;
    opacity          : 0.5;
    transition       : background-color 0.3s ease-in-out, opacity 0.4s ease-in-out;
    margin-left      : 7px;
    z-index          : -1;
}

.theatre .online.active
{
    opacity          : 1.0;
    background-color : var(--primary-colour);
}

/*----*/

#library .item
{
    padding : 10px;
    cursor  : pointer;
}

/*----*/

.material-icon
{
    font-family                   : 'Material Icons';
    font-weight                   : normal;
    font-style                    : normal;
    font-size                     : 24px;
    line-height                   : 1;
    letter-spacing                : normal;
    text-transform                : none;
    display                       : inline-block;
    white-space                   : nowrap;
    word-wrap                     : normal;
    direction                     : ltr;
    -webkit-font-feature-settings : 'liga';
    -webkit-font-smoothing        : antialiased;
    -webkit-user-select           : none;
}