/* CSS for book narration consoles
/* Adapted from various snippets produced by ChatGPT @
/* Custom Audio Controls CSS chat
/* https://chatgpt.com/c/685a4e99-8138-800f-8da7-17afbc95a74e
/* 2025.06.24
/* Every page containing the narration feature must have a link to this file
/* together with kfb1024.css OR kfb360.css AND any other
/* ***** Must work in conjunction with awdjo.js *****

    /* Container */
    .audio-player {
	  max-width: 500px;
	  margin: auto;
      display: inline-flex;
      align-items: center;
      gap: 1px; /* originally 10px; */
      background: #91d1eb; /* originally #f8f8f8; */
      border: 4px solid #000; /* originally 1px solid #ccc; */
      border-radius: 8px;
      padding:  1px; /* originally 10px; */
      font-family: sans-serif;
      font-style: normal;
	  user-select: none;
	  font-weight: bold;
	  height: 18px; /* my addition */
    }
    /* Play/Pause Button */
    .audio-player button {
      background: none;
      border: none;
      font-size: 14px; /* originally 16px; */
      cursor: pointer;
      padding: 2px; /* originally 5px; */
      border-radius: 50%; /* originally 4px; */
    }
    .audio-player button:hover {
      /* background: rgba(0,255,255); originally rgba(0,0,0,0.5); */
	  color: rgba(255,255,255); /* my addition */
    }
    /* Progress Bar Container */
    .progress-container {
      position: relative;
      width: 50px; /* originally 200px; */
      height: 4px; /* originally 8px; */
      background: #fff; /* originally #ddd; */
      border-radius: 2px; /* originally 4px; */
      cursor: pointer;
      flex-shrink: 0;
    }
    /* Progress Fill */
    .progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #c00000; /* originally #4285f4; */
      width: 0%;
      border-radius: 4px;
    }
    /* Time Display */
    .time {
      font-size: 14px; /* originally14px; */
	  font-weight: bold; /* my addition */
      min-width: 20px; /* originally 50px; */
      text-align: center;
    }
    /* Volume Slider */
    .volume-container {
	  color: #91d1eb; /* my addition */
      display: inline-flex;
      align-items: center;
      gap: 2px; /* originally 4px; */
    }
    .volume-container input[type=range] {
      width: 40px; /* originally 80px; */
	  /* height: 10px; my addition */
    }
	
	table, th, td {
	width: 100%;
	/* I could absolutely find NO WAY of centering the iFrame in the
	page. So I had to create a table with three cells in a row and place
	the iFrame in the centre cell. Dirty, but effective. I also worked out
	the percentage length of each cells to more or less place it in the centre.
	}