.calamansi-skin--ayon {
    font-family: 'Kanit', sans-serif !important;
}

    .calamansi-skin--ayon .clmns--info .clmns--progress-bar .clmns--bar {
        /*background-color: var(--primary) !important;*/
        background-color: var(--cz-heading-color) !important;
    }

.calamansi-skin--ayon .clmns--control-panel .clmns--controls .clmns--play {
    position: relative;
    background-image: none !important;
}

    .calamansi-skin--ayon .clmns--control-panel .clmns--controls .clmns--play::before {
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font: var(--fa-font-solid);
        content: "\f04b";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /*color: var(--primary);*/
        color: var(--cz-heading-color);
        font-size: 25px;
        background-image: none !important;
    }

.calamansi-skin--ayon .clmns--control-panel .clmns--controls .clmns--pause {
    position: relative;
    background-image: none !important;
}

    .calamansi-skin--ayon .clmns--control-panel .clmns--controls .clmns--pause::before {
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font: var(--fa-font-solid);
        content: "\f04c";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /*color: var(--primary);*/
        color: var(--cz-heading-color);
        font-size: 25px;
    }


.calamansi-skin--ayon .clmns--control-panel .clmns--controls .clmns--prev {
    display: none !important;
}

.calamansi-skin--ayon .clmns--control-panel .clmns--controls .clmns--next {
    display: none !important;
}

.calamansi-skin--ayon {
    padding-top: 0px !important;
}

.clmns--info {
    position: relative;
    margin-bottom: -95px;
    z-index: 10;
    background-color: transparent !important;
    padding-right: 83px !important;
    pointer-events: none;
    opacity: 1 !important;
    height: 95px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0px !important;
    right: 0px !important;
    bottom: unset !important;
}

.calamansi-skin--ayon .clmns--info .clmns--artist {
    color: #999 !important;
    font-size: 12px !important;
    margin-bottom: 1px !important;
}

.calamansi-skin--ayon .clmns--info .clmns--name {
    color: #222 !important;
    font-size: 20px !important;
    margin-bottom: 6px !important;
    line-height: 18px !important;
}

.calamansi-skin--ayon .clmns--info .clmns--playback-times {
    font-size: .80em !important;
}

.calamansi-skin--ayon .clmns--control-panel .clmns--album-art {
    height: 75px !important;
    width: 75px !important;
    top: 11px !important;
    left: 16px !important;
}

.calamansi-skin--ayon .clmns--control-panel {
    height: 95px !important;
}

.calamansi-skin--ayon .clmns--control-panel .clmns--controls{
    height:100% !important;
}

.calamansi-skin--ayon .clmns--info .clmns--progress-bar{
    margin-bottom:0px !important;
}

.calamansi-skin--ayon .clmns--control-panel .clmns--album-art {
    display: none;
}

.calamansi-skin--ayon .clmns--info {
    padding-left: 30px !important;
}