:root{
	--bible_main:#567ae3;
	--bible_sub:#52ade3;
	--bible_bg:linear-gradient(148deg, var(--bible_sub) 0%, var(--bible_main) 100%);
	
	--hymn_main:#e228b2;
	--hymn_sub:#fc90bb;
	--hymn_bg:linear-gradient(148deg, var(--hymn_sub) 0%, var(--hymn_main) 100%);
}





.calamansi-skin {background: #fff;position: relative;overflow: hidden;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;display: flex;flex-direction: column;}
.bible_audio .calamansi-skin{background-image: var(--bible_bg);}
.hymn_audio .calamansi-skin{background-image: var(--hymn_bg);}

.calamansi-skin i {color:#fff;}
.calamansi-skin .clmns--playback-info {display: flex;align-items: center;margin: 10px 0;}
.calamansi-skin .clmns--playback-bar {flex: 1;position: relative;height: .4em;background: #fff;border-radius: 10px;}
.calamansi-skin .clmns--playback-load {width: 100%;height: 100%;border-radius: 10px;}
.calamansi-skin .clmns--playback-progress {position: absolute;top: 0;width: 0%;height: 100%;border-radius: 10px;}
.calamansi-skin .clmns--playback-progress .clmns--pin {right: -8px;top: -6px;height: 20px;width: 20px;border-radius: 50%;background-color: #fff;position: absolute;pointer-events: all;box-shadow: 0 0 3px rgb(0 0 0 / 50%);}



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

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


.calamansi-skin .clmns--controls {display: flex;align-items: center;font-size: .8em;justify-content: center;padding: 10px 10px 15px;}
.calamansi-skin .clmns--row {display: none;}
.calamansi-skin .clmns--center {flex: 1;display: flex;align-items: center;justify-content: center;gap:15px;}
.calamansi-skin .clmns--pause {}
.calamansi-skin .clmns--volume {display: flex;align-items: center;}
.calamansi-skin .clmns--volume-bar {position: relative;width:50px;height:8px;background-color: #fff;margin-left: 5px;transition: all .2s ease;border-radius: 10px;}
.calamansi-skin .clmns--volume-value {height: 100%;border-radius: 10px;}

.bible_audio .clmns--playback-progress,
.bible_audio .clmns--volume-value{background-color: var(--bible_main);}

.hymn_audio .clmns--playback-progress,
.hymn_audio .clmns--volume-value{background-color: var(--hymn_main);}


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

/* 반복 버튼 */
.calamansi-skin .clmns--custom-checkbox {position: relative;}
.calamansi-skin .clmns--custom-checkbox input {position: absolute;opacity: 0;}
.calamansi-skin .clmns--custom-checkbox i { color:rgba(255,255,255,.3);}
.calamansi-skin .clmns--custom-checkbox input:checked ~ i {color: rgba(255,255,255,1);transition: all .4s ease;}

/* 재생속도 */
.calamansi-skin .playback_rate_wrap { width:120px;text-align:right;margin-top:2px; }
.calamansi-skin .playback_rate_wrap button { height: 10px;padding: 0;margin-top: 5px; }
.calamansi-skin .playback_rate_wrap button:first-child { margin-top: -1px; }
.calamansi-skin .playback_rate_wrap button i { color:#fff;font-size: 24px;line-height: 0; }
.calamansi-skin .playback_rate_wrap input { background:transparent;border:none;width:25px;text-align:center;color:#fff;font-size:13px;line-height:0;padding-top: 4px; }



.calamansi-skin .clmns--play,
.calamansi-skin .clmns--pause { border: 1px solid #fff;width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center; }
.calamansi-skin .clmns--play > i,
.calamansi-skin .clmns--pause > i { font-size:24px; }
.calamansi-skin .clmns--play > i { margin:1px 0 0 3px; }
.calamansi-skin .clmns--pause > i { margin:1px 0 0 0; }


.audio_open_wrap { width:40px; }
.audio_open_wrap .btn_toggle_audio { width:30px; }
.audio_open_wrap .btn_toggle_audio i { font-size:20px;color:#fff; }