html, body {
    height: 97%;
    margin: 0;
	color:#fff9;
	font-family: Poppins, sans-serif;
	background-color: transparent;
}
#baca, #bacb {
	border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;}
.pane {
    align-self: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    grid-area: pane;
    height: -webkit-fill-available;
    justify-self: center;
	margin: 10px;
    position: relative;
    width: -webkit-fill-available;}
.tcon {
    height: 100%;
	display: block;
    position: relative;
    -webkit-animation: fadeIn 1s;}
.ico {
    padding: 5px;}
.rows {
    height: 100%;}
.col {
    float: left;
    height: 100%;
    position: relative;
    width: 50%;}
.cola, .colb {
    bottom: 25%;
    left: 5%;
    position: absolute;
    right: 5%;
    top: 25%;}
	.colb {
    top: 0;}
	/*------ Pane Quad ------*/
.quad {
	display: grid;
	grid-row-gap: 10px;
	height: 100%;
	left: 10px;
	position: absolute;
	right: 10px;}
.qbox {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	height: 100%;}	
.cove {
    width: 72%;
    height: auto;
    min-width: 125px;
    min-height: 125px;
    max-width: 160px;
    max-height: 160px;
    top: 26%;
	border-radius: 200px;
    border: 30px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transform: translateY(-37%) translateX(0%);}
.deta {
    font-size: 6pt;
    height: 85%;
    padding: 50px 15px 25px 0;
    width: 100%;}
.desp {
    width: 45px;}
.pbtn {
    bottom: 50%;
    left: 25%;
    position: relative;
    right: 0;
    width: 100px;}
#musi {
    background-repeat: no-repeat!important;
    background-position: center;
    background-size: 45px;
    height: 45px;
    margin: auto;
    width: 45px;
    z-index: 2;}
.play {
	background-image: url(../../images/ico/play.svg);}
.paus {
	background-image: url(../../images/ico/paus.svg)!important;}
.arti {
	font-size: 10pt;
	margin-bottom: 4px;}
.titl {
	font-size: 11pt;
	font-weight: 700;
	margin-bottom: 7px;}
.albu {
	font-size: 9pt;
	font-style: italic;}
/*------ Tab - Hist/Sche ------*/
.cell {
	height: 100%;
	width: 100%;
	border-radius: 5px;
    color: #0009;
	border: 1px solid #e5e5e5;}
.cell:hover {
    background-color: #e5e5e5;
}
.cdat {
	font-size: 9pt;
	margin-left: 10px;
	text-transform: uppercase;}
.cday {
	font-size: 14pt;
	font-weight: 900;
	margin-bottom: -2px;
	margin-left: 10px;
	text-transform: uppercase;}
.cimg {
   	border: 8px solid #e5e5e5;
    	border-radius: 60px;
    	max-width: 60px;
    	margin: 9px 5px 0px -5px;}
.cart {
	font-size: 10pt;
	margin-bottom: 2px;}
.ctit {
	font-size: 12pt;
	font-weight: 700;
	}
.ciam {
	font-size: 14pt;
	height: 50%;
	padding-right: 10px;
	padding-bottom: 5px;
	vertical-align: bottom;}
.ciap {
	font-size: 14pt;
	padding-right: 10px;}
.cdel {
	float: left;
	margin-left: 10px;}
.cbar {
    background-color: #e5e5e5;
    font-size: 8pt;
    height: 30px;
    font-weight: 600;}	
.bw {
    filter: invert(0.95) opacity(0.8);}
.ibox {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    height: 30px;
    margin-bottom: 4px;
    padding: 0px;
    width: 30px;}
.abg {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(
-60deg, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.2) 5%);
    bottom: 0;
    left: -50%;
    opacity: .25;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;}
.abg2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;}
.abg3 {
    animation-duration: 5s;}
	
@media screen and (max-width: 403px){
.col {
    height: 50%;
    overflow: visible;
    width: 100%;}
.cola, .colb {
    bottom: 10px;
    left: 15px;
    position: absolute;
    right: 15px;
    top: 0;}
.cove {
    max-width: 125px;
    max-height: 125px;
    top: 40%;}
.deta {
    height: 100%;
    padding: 0;
    width: 100%;}
.pbtn {
    bottom: 115px;
    left: 0;
    position: relative;
    right: 0;
    width: 100px;}
	}
@media screen and (min-height: 438px) and (min-width: 410px){
.pbtn {
bottom: 67%;}
}	
.fadeIn, #baca, #bacb {
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;}
@keyframes fadeIn {0% { opacity: 0;}100% { opacity: 1;}}
@-moz-keyframes fadeIn {0% { opacity: 0;}100% {	opacity: 1;}}
@-webkit-keyframes fadeIn {0% {	opacity: 0;}100% { opacity: 1;}}
@-o-keyframes fadeIn {0% { opacity: 0;}100% { opacity: 1;}}
@-ms-keyframes fadeIn {0% { opacity: 0;}100% { opacity: 1;}}
@keyframes slide { 0% { transform:translateX(-25%); } 100% { transform:translateX(25%); }}