/******************************************************************************
 * Styles for the Wime Course Audio Player
 * The styles in this css file are custom styles that are laid on top of the base stylesheet that came
 * with the original audio player widget. The base stylesheet is a seperate file named 'audio-player-original-style.css'
 * Also included in this css file are styles for the 'Draggable container' which contains the audio player
 * and the instructions modal panel.
 ******************************************************************************/


/* may not need body css below, test and delete */
/*
body {
  margin: 0;
  overflow: auto;
}
*/

/*Draggable Container - Draggable container that contains the audio player <-------------------------------------------------*/ 
#draggable-container {
  position: fixed; /* Fix the container position */
  bottom: 10px;
  left: 10px;
  padding: 10px;
  cursor: move;
  user-select: none;
  z-index:888;
  background-color: #ffffff !important;
  height: 165px;
  border: 15px solid #2e3092 !important;
  border-radius: 4px;
  width:93%;
  display: none; /* Initially hide the container */
}
/*
@media only screen and (min-width: 768px) {
#draggable-container {
	width:650px;
	}
}
@media only screen and (min-width: 992px) {
#draggable-container {
	width:700px;
	}
}
*/
@media only screen and (min-width: 768px) {
	#draggable-container {
		width:365px;
	}
}

audio {
  width: 100%;
  display: block;
}

/* Draggable container Close button */
#draggable-container .close-button {
  position: absolute;
  top: -23px;
  right: -23px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ffffff;
  border:2px solid #2e3092;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index:889;
}
@media only screen and (min-width: 768px) {
	#draggable-container .close-button {
      width: 30px;
      height: 30px;
    }
}
#draggable-container .close-button:hover {
  top: -25px;
  right: -25px;
  width: 65px;
  height: 65px;
}
@media only screen and (min-width: 768px) {
	#draggable-container .close-button:hover {
      width: 35px;
      height: 35px;
    }
}
#draggable-container .close-button::before,
#draggable-container .close-button::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: #2e3092; /* Change the color as needed */
}
#draggable-container .close-button::before {
  transform: rotate(45deg);
}
#draggable-container .close-button::after {
  transform: rotate(-45deg);
}


/*Instructions Overlay for audio player information. Appears and then transitions to actual audio player location <-------------------------------------------------*/ 
#instructions-for-audio-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  border-radius:5px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it's above ALL other content, Modal Panel style */
  display: none; /* Initially hide the container */

  opacity: 1;
  transition: opacity 0.5s, transform 0.5s;
  transform-origin: bottom left;
}
#instructions-for-audio-player.shrink {
  opacity: 0.7 !important;
  transform: scale(0.21);
}
#instructions-for-audio-player.displayNone {
  display: none !important;
}
#instructions-image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 95%;
  height: 95%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it's above ALL other content */
}


/*Audio Player related CSS addons to adjust original audio player design and functionality <-------------------------------------------------*/ 
.wime-audio-player-container .row .col-md-12 {
	border: 1px solid #bebebe !important;
}
	.wime-audio-player {
		/*margin-top: 260px !important;*/
	}	
	.wime-audio-player .shk {
    --background-body: #ffffff !important;
    --color-title: #2e3094 !important;
    --color-artist: #2e3094 !important;
    --color-button: #2e3094 !important;
    --shadow-body: none !important;
    --shadow-body-mobile: none !important;
	}
.wime-audio-player .shk-player .shk-controls .shk-btn_chapter {
	/*display:none !important;*/
}
.wime-audio-player .shk-player .shk-controls .shk-btn_more {
	display:none !important;
}
.wime-audio-player .shk-player .shk-cover {
	border-radius: 5px !important;
	display:none;
}	
.wime-audio-player .shk-player .shk-text {
	display:none;
}
.wime-audio-player .shk-chapter {
	height:245px !important;
	left:-12px !important;
	right:-12px !important;
	border:none !important;
	box-shadow:none !important;
	padding: 0px 15px;
	margin-bottom: 14px;
	/*margin-left: -12px;
    margin-right: -12px;*/
    border-top: 2px solid #2e3094 !important;
    border-left: 2px solid #2e3094 !important;
    border-right: 2px solid #2e3094 !important;
    border-bottom: 2px solid #2e3094 !important;
}
.wime-audio-player .shk-chapter .shk-chapter_main {
	padding: 0px 0px !important;
	/*margin: 15px 45px 20px 15px !important;*/
	-webkit-mask-image:none;
	mask-image:none;
}
@media only screen and (min-width : 640px) {
	.wime-audio-player .shk-chapter .shk-chapter_main {
		padding: 0px 0px !important;
		/*margin: 15px 30px 20px 0px !important;*/
	}
}
.wime-audio-player .shk-chapter .shk-btn_close{
	/*display: none !important;*/
}
/*Related to Functionality that modify chapter opening up or down depending on audio player position on the page. If above 50% of the page, opens down, otherwise opens up*/
/*These styles sets or resets the original values to bring the players chapter panel back to its original position*/
.shk-chapter {
	transition:none;
	bottom:133px;
}
.shk[data-show-chapter] .shk-chapter {
	transition:none;
	bottom:133px;
	/*bottom:unset;*/
}

/*Changes to control capitalization */
.show-audio-instructions {
  text-transform: none !important;
}