@import url("https://fonts.googleapis.com/css?family=Open Sans");
@import url("https://unpkg.com/simplebar@4.2.3/dist/simplebar.min.css");

.calamansi-skin--calamansi {
    box-sizing: border-box;
    background: #FFFFFF;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 5px 5px 15px rgba(54, 79, 60, 0.4);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;

    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 1.2;

    display: flex;
    flex-direction: column;
}

.calamansi-skin--calamansi .clmns--album {
    position: absolute;
    background: linear-gradient(rgba(54, 79, 60, 0.25), rgba(73, 101, 77, 0.55));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.calamansi-skin--calamansi .clmns--heart {
    position: absolute;
    right: 0;
    color: #FFFFFF;
    margin: 10px;
    transition: all .4s ease;
}

.calamansi-skin--calamansi .clmns--space {
    flex: 1;
}

.calamansi-skin--calamansi .clmns--info {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
}

.calamansi-skin--calamansi .clmns--info.clmns--show-playlist {
    position: relative;
    max-height: 100%;
    height: 100%;
}

.calamansi-skin--calamansi .clmns--playback-info {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.calamansi-skin--calamansi .clmns--playback-bar {
    flex: 1;
    position: relative;
    height: .4em;
    background: #cdd9c2;
    border-radius: 10px;
}

.calamansi-skin--calamansi .clmns--playback-load {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.calamansi-skin--calamansi .clmns--playback-progress {
    position: absolute;
    top: 0;
    background-color: #8BA989;
    width: 0%;
    height: 100%;
    border-radius: 10px;
}

.calamansi-skin--calamansi .clmns--playback-time, .calamansi-skin--calamansi .clmns--playback-time-left {
    color: #364F3C;
    font-size: .7em;
    margin: 0 10px;
}

.calamansi-skin--calamansi .clmns--playback-time {
    left: 15px;
}

.calamansi-skin--calamansi .clmns--playback-time-left {
    right: 15px;
}

.calamansi-skin--calamansi .clmns--currently-playing {
    text-align: center;
}

.calamansi-skin--calamansi .clmns--song-name,
.calamansi-skin--calamansi .clmns--artist-name
{
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    padding: 0 1em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calamansi-skin--calamansi .clmns--song-name {
    font-size: .8em;
    letter-spacing: 3px;
    color: #364F3C;
}

.calamansi-skin--calamansi .clmns--artist-name {
    font-size: .6em;
    letter-spacing: 1.5px;
    color: #557c5f;
    margin-top: 5px;
}

.calamansi-skin--calamansi .clmns--controls {
    display: flex;
    align-items: center;
    font-size: .8em;
    justify-content: center;
    color: #8BA989;
    padding: 1em;
}
.calamansi-skin--calamansi .clmns--controls .clmns--row {
    display: none;
}
.calamansi-skin--calamansi .clmns--controls .clmns--center {
    flex: 1;
    display: flex;
    justify-content: center;
}
.calamansi-skin--calamansi .clmns--controls .clmns--center > div {
    margin: 0 1em;
}
.calamansi-skin--calamansi .clmns--controls .clmns--center div:first-of-type {
    margin-left: 0;
}
.calamansi-skin--calamansi .clmns--controls .clmns--center div:last-of-type {
    margin-right: 0;
}
.calamansi-skin--calamansi .clmns--controls .clmns--play, .calamansi-skin--calamansi .clmns--controls .clmns--pause {
    color: #6e946c;
}

.calamansi-skin--calamansi .clmns--controls .clmns--volume {
    display: flex;
    align-items: center;
}
.calamansi-skin--calamansi .clmns--controls .clmns--volume .clmns--volume-bar {
    position: relative;
    width: 0;
    height: .4em;
    background-color: #cdd9c2;
    margin-top: -.1em;
    transition: all .2s ease;
    border-radius: 10px;
}
.calamansi-skin--calamansi .clmns--controls .clmns--volume:hover .clmns--volume-bar {
    width: 5em;
    margin-left: .5em;
}
.calamansi-skin--calamansi .clmns--controls .clmns--volume .clmns--volume-value {
    height: 100%;
    background-color: #8BA989;
    border-radius: 10px;
}

/* Small player size controls */
.calamansi-skin--calamansi .clmns--controls.clmns--compact {
    flex-direction: column;
}
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--left,
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--center,
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--right
{
    display: none;
}
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--row {
    display: flex;
}
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--row:last-of-type {
    margin-top: .5em;
}
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--row > div {
    margin: 0 .5em;
}
.calamansi-skin--calamansi .clmns--controls.clmns--compact .clmns--volume:hover .clmns--volume-bar {
    width: 3em;
    margin-left: .5em;
}

.calamansi-skin--calamansi .clmns--play,
.calamansi-skin--calamansi .clmns--pause,
.calamansi-skin--calamansi .clmns--next,
.calamansi-skin--calamansi .clmns--previous,
.calamansi-skin--calamansi .clmns--option,
.calamansi-skin--calamansi .clmns--loop,
.calamansi-skin--calamansi .clmns--volume,
.calamansi-skin--calamansi .clmns--shuffle 
{
    transition: all .5s ease;
}
.calamansi-skin--calamansi .clmns--play:hover,
.calamansi-skin--calamansi .clmns--pause:hover,
.calamansi-skin--calamansi .clmns--next:hover,
.calamansi-skin--calamansi .clmns--previous:hover,
.calamansi-skin--calamansi .clmns--option:hover
.calamansi-skin--calamansi .clmns--loop:hover,
.calamansi-skin--calamansi .clmns--volume:hover,
.calamansi-skin--calamansi .clmns--shuffle:hover
{
    color: #557c5f;
}

.calamansi-skin--calamansi .clmns--custom-checkbox {
    position: relative;
}
.calamansi-skin--calamansi .clmns--custom-checkbox input {
    position: absolute;

    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
}
.calamansi-skin--calamansi .clmns--custom-checkbox input:checked ~ i {
    color: #49654D;
    transition: all .4s ease;
}

.calamansi-skin--calamansi .clmns--playlist-wrapper {
    flex: 1;
    height: 0;
    max-height: 100%;
}
.calamansi-skin--calamansi .clmns--playlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.clmns--playlist-item.template {
    display: none !important;
}
.calamansi-skin--calamansi .clmns--playlist .clmns--playlist-item {
    display: flex;
    font-size: .8em;
    color: #364F3C;
    padding: .75em 1em;
}
.calamansi-skin--calamansi .clmns--playlist .clmns--playlist-item.clmns--active {
    background-color: #cdd9c2;
}
.calamansi-skin--calamansi .clmns--playlist .clmns--playlist-track-info--name {
    flex: 1;
    padding-right: 1em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calamansi-skin--calamansi .simplebar-scrollbar::before {
    background: #8BA989;
}

/* Icon font */
/* Generated by Glyphter (http://www.clmns--glyphter.com) on  Sun Sep 22 2019*/
@font-face {
    font-family: 'calamansi-skin--calamansi--glyphter';
    src: url('fonts/Glyphter.eot');
    src: url('fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('fonts/Glyphter.woff') format('woff'),
         url('fonts/Glyphter.ttf') format('truetype'),
         url('fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}
.calamansi-skin--calamansi .clmns--glyphter:before {
	display: inline-block;
   font-family: 'calamansi-skin--calamansi--glyphter';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-play:before {
    content: '\0041';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-pause:before {
    content: '\0042';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-backward:before {
    content: '\0044';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-forward:before {
    content: '\0045';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-bars:before {
    content: '\0046';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-volume-up:before {
    content: '\0047';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-random:before {
    content: '\0048';
}
.calamansi-skin--calamansi .clmns--glyphter.clmns--fa-loop:before {
    content: '\0049';
}

@media all and (min-width: 1024px) {
    .calamansi-skin--calamansi {
        font-size: 16px;
    }
}