/* #ccffcc	(204,255,204)
#ccffff	(204,255,255)
#ccccff	(204,204,255)
#ffcccc	(255,204,204)
#ffffcc	(255,255,204) */
/*
--green: #ccffccff;
--blue: #ccffffff;
--purple: #ccccffff;
--pink: #ffccccff;
--yellow: #ffffccff; */

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-rendering: optimizeLegibility;
    font-size: 14px;
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    position: relative;
}

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 33px;
    display: flex;
    align-items: center;
    background: #ccffccff;
    padding: 0 25px;
}

.content {
    display: flex;
    flex-direction: row;
    height: calc(100% - 51px);
}

main {
    width: 66.66%;
    height: 100%;
    padding: 30px;
    max-height: 100%;
    overflow-y: scroll;
    background-color: #ffccccff;
}

aside {
    width: 33.33%;
    background-color: #ccccffff;
    overflow: hidden;
    position: relative;
}

/* aside::after {
    content: "";
    position: absolute;
    top: calc(50% - 16.5px);
    left: calc(50% - 16.5px);
    width: 0;
    height: 0;
    border-top: 33px solid transparent;
    border-bottom: 33px solid transparent;
    border-left: 33px solid #ccffccff;
} */

aside::after:hover {
    border-left: 33px solid rgb(146, 255, 146);
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background-color: #ccffffff;
    perspective-origin: center;
}

ul, li {
    list-style: none;
    padding: 0;
}

section {
    margin: 0;
    padding-bottom: 30px;
    background-color: #ffccccff;
}

main > section:last-child {
    padding: 0;
}

section h2  {
    margin: 0;
}

section h3  {
    margin: 10px 0;
}

section section {
    margin: 20px 0 0;
    padding: 25px;
    background-color: #ffffccff;
    width: 100%;
}

.profile label {
    display: block;
    font-weight: bold;
    margin: 10px 0 5px;
}

.profile .live {
    float: right;
    font-size: 18px;
    font-weight: bold;
}

.profile .show {
    display: block;
    margin: 10px 0 5px;
}

.profile > .shows > .show > .live {
    color: lightgreen
}

.profile .show time {
    display: block;
    margin: 10px 0 5px;
}

a {
    color: deeppink;
}

.spinner {
    animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: translateX(120px) rotateY(0deg);
    }

    to {
        transform: translateX(120px) rotateY(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: translateX(120px) rotateY(0deg);
    }

    to {
        -webkit-transform: translateX(120px) rotateY(360deg);
    }
}

video {
    position: relative;
    cursor: pointer;
    height: 200%;
}

video::after {
    content: "";
    position: absolute;
    top: calc(50% - 16.5px);
    left: calc(50% - 16.5px);
    width: 0;
    height: 0;
    border-top: 33px solid transparent;
    border-bottom: 33px solid transparent;
    border-left: 33px solid #ccffccff;
}

span.now, span.streaming {
    color: grey;
    background: #ccffccff;
    border-radius: 7px;
    padding: 5px;
    float: right;
    margin-left: 5px;
}

.vjs-modal-dialog-content {
    align-content: center !important;
}