@font-face {
  font-family: MONO;
  src: url(MONO.ttf);
}
.viewport-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: 3px solid black; /* Adjust border size and color as needed */
  box-sizing: border-box; /* Ensure the border does not affect the size of the viewport */
  pointer-events: none; /* Make sure the border does not interfere with interactions */
  z-index:2000;
}
html, body{
  height:100%;
  width:100%;
  margin: 0;
  background-color:rgb(98, 0, 255);
  overflow: hidden;
  box-shadow: 0px -40px 80px rgba(145, 76, 255, 0.381) inset;
}
a{
  color:cyan;
}
.bigcontainer{
  font-family:MONO;
  letter-spacing:0.8px;
  font-size:0.8em;
  display: flex;
  flex-direction: column;
  height: 100%;
    overflow: hidden;

}
.flex-container{
  position:relative;
  height:100vh;
  overflow-y: auto;
  overflow-x:hidden;
  display: flex;
  flex-direction: column;
  padding: 4px;
  box-sizing: border-box;
}

#countdown {
  width:100%;
  height:auto;
  background-color:blue;
  color:yellow;
  margin-left:5px;
  font-family: MONO;
  font-size: 1.6em;
  padding:2px;
  display: none; /* Hide the countdown by default */
}
.cleanup {
  padding:5px;
  font-family:arial;
  display:block;
  width:100%;
  background-color:cyan;
}

.adminheader {
  font-size:0.8em;
  font-family:Menlo;
  padding:5px;
  max-height: 50vh; /* Limite la hauteur du header */
  overflow: auto;   /* Permet le défilement si nécessaire */
  width: 100%;
  background-color: white; /* Juste pour mieux voir le header, à ajuster si nécessaire */
}
#userList2 {
  position: relative; /* Ensure the parent element has positioning context */
  font-family: MONO;
  font-size: 0.7em;
  background-color: dodgerblue;
  color: white;
  padding: 0.5em;
  max-height: 9vh;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px -17px 15px -15px white; /* Mimic the inset shadow over the content */

}

#activity-recent {
  display:none;
  width: 98%;
  border: 1px dashed black;
  background-color: #f8ffe0;
  color: #ff85e4;
  font-family: MONO;
  font-weight: normal;
  font-size: 1em;
  padding: 5px;
  cursor:pointer;
}
#activity-all {
  display:none;
  width: 98%;
  max-height:40vh;
  overflow-x:hidden;
  border: 1px dashed black;
  background-color: #f8ffe0;
  color: grey;
  font-family: MONO;
  font-weight: normal;
  font-size: 1em;
  padding: 5px;
  cursor:pointer;
}
.notification {
  margin-bottom:3px;
}

#babillard{
  display:none;
  border:2px dashed black;
  align-self: center;
  text-align: left;
  color:white;
  line-height:1.4;
  width:96vw;
  padding:12px;
  height: 80dvh;
  max-height:86dvh;
  min-height:20dvh;
  background-color:#7fe5b2f8;
  position:fixed;
  bottom:calc(-100dvh);
  z-index:1000;
  box-shadow:
  -12px -12px 0 #000000a2;
  transition: bottom 1s linear;
  overflow:hidden;
}
#babillard-content{
  position:relative;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  overflow-y: scroll;
  overflow-x:hidden;
}

@media only screen and (max-width: 600px) {
  /* Reduce button width to fit on smaller screens */
  #babillard{
  height:calc(80dvh - 80px);
  width:90vw;
  }
}

/*

██████  ██    ██ ████████ ████████  ██████  ███    ██ ███████ 
██   ██ ██    ██    ██       ██    ██    ██ ████   ██ ██      
██████  ██    ██    ██       ██    ██    ██ ██ ██  ██ ███████ 
██   ██ ██    ██    ██       ██    ██    ██ ██  ██ ██      ██ 
██████   ██████     ██       ██     ██████  ██   ████ ███████ 
           

*/
/* #logImageButton, #openRecorder, #openBab, #closeBab, #notifbutton {
  font-size: 1.5em;
  line-height: 1;
  color: white;
  background-color:transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  padding:0;
} */

button:hover{
  background-color: #8cff44;
}
.toggle-comments:hover {
  background-color: transparent;
}
.img-toggle-comments:hover {
  background-color: transparent;
}
.reaction:hover{
  background-color: #8cff44;
}
.reaction, .img-toggle-comments, .pin-msg, .submitcmt, #drawButton, #submitmsg, #logImageButton, #openRecorder, #openBab, #closeBab, #activitybutton, #notifbutton{
  border-radius:1px;
  text-decoration:none;
  border:none;
  font-size:1.2em;
  vertical-align: middle;
  box-shadow: 3px 3px 0 gray;
}

.toggle-comments{
  border-radius:0;
  text-decoration:none;
  border:none;
  background-color:transparent;
  color:rgba(30,255,235,0.5);
  margin:0;
  line-height:0;
}

@media only screen and (max-width: 600px) {
  /* Reduce button width to fit on smaller screens */
  .reaction, .img-toggle-comments, .pin-msg, .submitcmt, #drawButton, #submitmsg, #logImageButton, #openRecorder, #openBab, #closeBab, #activitybutton, #notifbutton{
    border-radius:0.5px;
    text-decoration:none;
    border:none;
    margin:0;
    padding:0;
    text-align: center;
    font-size:1.6em;
    vertical-align: middle;
  }
  .toggle-comments{
    color:rgba(96, 255, 210, 0.936);

  }
}

.pin-msg{
  margin-left:3px;
}

#closeBab{
  filter:invert(1);
}

#logImageButton:hover {
  background-color: #8cff44;
}
#openRecorder:hover {
  background-color: #8cff44;
}
.codebutton{
  font-family:Menlo;
}
#logout, #submit, #saveButton {

    text-decoration:none;
    font-weight: normal;
    font-size: 1em;
    height:100%;
    margin:0;
    padding:0;
    font-family:MONO;
    border:none;
    text-align: center;
    border-radius:0%;
    padding:3px;

  }
  
  #submitmsg{
  height: 100%;
    }
  
    #submitmsg:hover {
      background-color: #8cff44;
    }
    #drawButton:hover {
      background-color: #8cff44;
    }

  

/* 

██    ██ ██████  ██       ██████   █████  ██████       ██████  ██████  ███    ██ ███████    
██    ██ ██   ██ ██      ██    ██ ██   ██ ██   ██     ██      ██    ██ ████   ██ ██         
██    ██ ██████  ██      ██    ██ ███████ ██   ██     ██      ██    ██ ██ ██  ██ █████      
██    ██ ██      ██      ██    ██ ██   ██ ██   ██     ██      ██    ██ ██  ██ ██ ██         
 ██████  ██      ███████  ██████  ██   ██ ██████       ██████  ██████  ██   ████ ██      ██ 
                                                                                            
                                                                                             */
#confirmButton, #cancelButton {
    text-decoration:none;
    margin: 5px;
    padding: 8px;
    font-size: 16px;
    font-family:MONO;
    border:none;
  
  }


#confirmationDialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  font-family:MONO;
  border:none;

}

#dialogContent {
  text-decoration:none;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-family:MONO;
  border:none;
}
/*
███████  ██████  ██████  ███    ███ ███████ 
██      ██    ██ ██   ██ ████  ████ ██      
█████   ██    ██ ██████  ██ ████ ██ ███████ 
██      ██    ██ ██   ██ ██  ██  ██      ██ 
██       ██████  ██   ██ ██      ██ ███████ 
                                            
                                            */

.messageForm, .usernameForm{
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position:sticky;
    width:100%;
    top:0;
    left:0;
    padding:4px;
    font-family:MONO;
    background-color: deeppink;
    z-index: 1;
    box-shadow:
    1.5px 3px 1px #8b00688f, /* Right-bottom shadow */
    0 0 0 #000000, /* Left-top shadow */
    0 0 0 #000000, /* Right-top shadow */
    0 0 0 #000000; /* Left-bottom shadow */
  }
  #FirstmessageForm{
    color:white;
    position:relative;
    z-index: 1;
  }

  #SecondmessageForm{
    position:relative;
    z-index: 1;
  }

  #usermsg{
    width:60%;
    max-width:600px;
    font-size: 1em;
    font-family:MONO;
    color:rgb(255, 255, 255);
    background-color:#8b8e92;
    margin-top:4px;
    }
    
    #usermsg.highlight{
    background-color:greenyellow;
    }
    #highlighted{
      background-color:cyan;
      color:red;
      font-family:Menlo;
      font-weight:bold;
      font-size:1.5em;
      text-shadow:none;
    }
   #username {
    font-size: 1em;
    font-family:MONO;
  
  }

/*
 ██████  ██████  ██       ██████  ██████       ██████  ██████  ████████ ██  ██████  ███    ██ ███████ 
██      ██    ██ ██      ██    ██ ██   ██     ██    ██ ██   ██    ██    ██ ██    ██ ████   ██ ██      
██      ██    ██ ██      ██    ██ ██████      ██    ██ ██████     ██    ██ ██    ██ ██ ██  ██ ███████ 
██      ██    ██ ██      ██    ██ ██   ██     ██    ██ ██         ██    ██ ██    ██ ██  ██ ██      ██ 
 ██████  ██████  ███████  ██████  ██   ██      ██████  ██         ██    ██  ██████  ██   ████ ███████ 
                                                                                                      
                                                                                                    

*/
/* Dropdown Container */
.dropdown {
    background-color:white;
    padding:1px;
    position: relative;
    display: inline-block;
}

/* Dropdown Button */
.dropbtn {
    background-color: #f0f0f0;
    height:100%;
    color: black;
    cursor: pointer;
    border:none;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 1em; /* Adjust font size if needed */
}

/* Dropdown Content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 25px;
  box-shadow: 3px 6px 1px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Dropdown Options */
.dropdown-option {
    color: black;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border:1px solid purple;
}







/*

    ██████ ██   ██  █████  ████████ ██       ██████   ██████       ██ ██       ██████   ██████     ██   ██ ████████ ███    ███ ██      ██  
   ██      ██   ██ ██   ██    ██    ██      ██    ██ ██           ██  ██      ██    ██ ██          ██   ██    ██    ████  ████ ██       ██ 
   ██      ███████ ███████    ██    ██      ██    ██ ██   ███     ██  ██      ██    ██ ██   ███    ███████    ██    ██ ████ ██ ██       ██ 
   ██      ██   ██ ██   ██    ██    ██      ██    ██ ██    ██     ██  ██      ██    ██ ██    ██    ██   ██    ██    ██  ██  ██ ██       ██ 
    ██████ ██   ██ ██   ██    ██    ███████  ██████   ██████       ██ ███████  ██████   ██████  ██ ██   ██    ██    ██      ██ ███████ ██  
                                                                                                                                           
                                                                                                                                           
*/

#chatlog {
  text-align: left;
  color:white;
  line-height:1.4;
  margin-top:4px;


    position: relative;
    word-wrap:break-word;
    overflow-wrap: break-word;
    padding-bottom: 4em;
    text-shadow:
    13px 3px 1px rgba(145, 76, 255, 0.47), /* Right-bottom shadow */
    2px -1px 0.5px #2800376b, /* Right-top shadow */
    -1px 0px 0.5px rgb(214, 142, 255); /* Left-bottom shadow */
  }

.user-name {
  filter:saturate(74%);
  cursor:context-menu;
  text-decoration: underline;
  font-size:1em;
  text-shadow:
  2px -1px 0.5px #2800376b, /* Right-top shadow */
  -1px 0px 0.5px rgb(214, 142, 255); /* Left-bottom shadow */
}

.chat-time {
  filter:saturate(74%);

color:pink;
font-size:smaller;
}

.msgln {
position:relative;
margin-left:4px;
}

.optionsMenu {
  display: none; /* Initially hide the options menu */
}
.optionsMenuBAB {
  display: none; /* Initially hide the options menu */
}

.msgln:hover .optionsMenu {
  display: inline-block; /* Show on hover */
  opacity: 0.86; /* Optional: Adjust opacity */
}

.commentsBAB{
  display:none;
}

.commentbox {
  filter: saturate(74%);
  position:relative;
  padding-left: 3.5em;
  padding-right: 18px;
  margin-bottom:5px;
  max-width: min(88vw, 500px);
  max-height: 40vh;
  width: fit-content;
  overflow: auto;
  background-color: rgb(49, 49, 245);
}
.comment-form {
margin-bottom:10px;
}

@keyframes colorTransition {
  0% {
      background-color: cyan;
  }
  100% {
      background-color: green;
  }
}

.cmtln {
  background-color: rgb(49, 49, 245);
  transition: background-color 2s ease-out;
  padding-top:4px;
}


.tooltip {
  font-family: MONO;
  font-size:0.6em;
  letter-spacing:0.8px;
  visibility: hidden;
  background-color: rgb(0, 94, 83);
  color: rgb(237, 167, 255);
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
  white-space: nowrap;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.sticky {
  filter:saturate(74%);
  z-index:999;
  position:sticky;
  width:100%;
  margin:0;
  padding-left:4px;
  top:80px;
  bottom:10px;
  opacity:95%;
  background-color:hotpink;
  }
.admin-text {
  filter:saturate(74%);
  color:rgb(255, 255, 144);
}
#twinpitchat {
  position:relative;
  background-color:rgb(55, 193, 202);
  width:100%;
  margin:0;
  padding-left:6px;
  padding-left:4px;
  text-shadow: 2px 1px 1px rgb(221, 50, 101);
  padding-top:4px;
  margin-bottom:10px;
  margin-top:10px;
  box-shadow: 2px 2px 1px 0 rgb(48, 123, 94) inset;
}

.board{
  display:none;
  margin:10px;
  padding:10px;
  position:relative;
  width:85vw;
  max-width:900px;
  max-height:30vh;
  overflow:auto;
  color:black;
  text-shadow:none;
  background-color:rgb(131, 244, 203);
}

.rank{
  display:inline-block;
  font-size:0.8em;
  width:10%;

}

.boardScore{
  display:inline-block;
  font-size:0.8em;
  width:16%;

}
.boardMovecount{
  display:inline-block;
  font-size:0.8em;
  width:16%;

}
.boardTime{
  display:inline-block;
  font-size:0.8em;
  width:16%;

}
.boardUsername{
  display:inline-block;
  font-size:0.8em;
  width:16%;

}
.boardDate{
  display:inline-block;
  font-size:0.8em;
  width:16%;
}


#img {
  max-width:94vw;
  max-height:55vh;
  border:2px solid black;
  }
  #imgBAB {
    max-width:78vw;
    max-height:62dvh;
    border:2px solid black;
    }

  .functionList, .userList, .metroList{
    filter:saturate(74%);

    box-sizing: border-box;
    color:rgb(255, 254, 231);
    height:auto;
    position:relative;
    width:100%;
    max-width:500px;
    border: 28px solid transparent;
    border-image: url('bordermrpgglow2.png') 220 stretch; /* Ensure it's set correctly */
    border-image-slice: 220; /* Adjust this value to match your border width */
    border-image-repeat: round; /* Use 'round' or 'stretch' as needed */
    font-family:MONO;
    padding:6px;
    line-height:1.1;
    text-shadow:
    13px 3px 1px rgb(144, 76, 255), /* Right-bottom shadow */
    -1px -1px 0 #000000, /* Left-top shadow */
    2px -1px 0 #000000, /* Right-top shadow */
    -1px 1px 0 #000000; /* Left-bottom shadow */
}
#red {
  text-shadow:
  13px 3px 1px rgba(209, 34, 195, 0.478), /* Right-bottom shadow */
  -1px -1px 0 #000000, /* Left-top shadow */
  2px -1px 0 #ba0000, /* Right-top shadow */
  -1px 1px 0 #000000; /* Left-bottom shadow */
}
#orange {
  text-shadow:
  13px 3px 1px rgba(255, 65, 227, 0.316), /* Right-bottom shadow */
  -1px -1px 0 #000000, /* Left-top shadow */
  2px -1px 0 #ba6900, /* Right-top shadow */
  -1px 1px 0 #000000; /* Left-bottom shadow */
}
#rgb\(15\,255\,80\) {
  text-shadow:
  13px 3px 1px rgb(104, 99, 255), /* Right-bottom shadow */
  -1px -1px 0 #000000, /* Left-top shadow */
  2px -1px 2px #51bfa0, /* Right-top shadow */
  -1px 1px 0 #000000; /* Left-bottom shadow */
}
#premiere{
  text-shadow:
  13px 3px 1px rgba(145, 76, 255, 0), /* Right-bottom shadow */
  -1px -1px 0 #532700, /* Left-top shadow */
  2px -1px 0 #532700, /* Right-top shadow */
  -1px 1px 0 #532700; /* Left-bottom shadow */
}
#aube {
  text-shadow:
  58px 2px 2px rgba(145, 76, 255, 0.381), /* Right-bottom shadow */
  -1px -1px 0 #ffa200, /* Left-top shadow */
  2px -1px 0 #00000000, /* Right-top shadow */
  -1px 1px 0 #000000; /* Left-bottom shadow */
}
#lever {
  text-shadow:
  28px 2px 1.5px rgba(112, 76, 255, 0.761), /* Right-bottom shadow */
  -3px -1px 0 #ffb162, /* Left-top shadow */
  -5px -1px 1px #ffd900, /* Right-top shadow */
  -1px 1px 1px #ffe946; /* Left-bottom shadow */
}
#midi {
  text-shadow:
  8px 3px 0.5px #ffdd003c, /* Right-bottom shadow */
  -0px -0px 1px #ffee97, /* Left-top shadow */
  0 0 0,
  0 0 0;
}
#heuredoree {
  text-shadow:
  13px 3px 3px rgba(105, 245, 255, 0.534), /* Right-bottom shadow */
  -1px -1px 0 #ff2d76, /* Left-top shadow */
  2px -1px 0 #ff00fb, /* Right-top shadow */
  -1px 1px 0 #9b7fff; /* Left-bottom shadow */
}
#coucher {
  text-shadow:
  13px 6px 3px rgba(145, 76, 255, 0.738), /* Right-bottom shadow */
  -1px -1px 0 #00000000, /* Left-top shadow */
  2px -1px 0 #000000, /* Right-top shadow */
  -1px 1px 0 #000000; /* Left-bottom shadow */
}
#crepuscule {
  text-shadow:
  10px 8px 1px rgba(145, 76, 255, 0.41), /* Right-bottom shadow */
  -1px -1px 4px #000000, /* Left-top shadow */
  2px -1px 4px #000000, /* Right-top shadow */
  -1px 1px 4px #000000; /* Left-bottom shadow */
}
#derniere {
  text-shadow:
  13px 3px 1px rgba(145, 76, 255, 0), /* Right-bottom shadow */
  -1px -1px 0 #3a2964, /* Left-top shadow */
  2px -1px 0 #3a2964, /* Right-top shadow */
  -1px 1px 0 #3a2964; /* Left-bottom shadow */
}

#glitter {
    font-weight: normal;
    font-size:1.1em;
    font-family:MONO;
    animation: glitter 0.5s infinite; /* Adjust the duration for faster or slower flashing */
    text-shadow:
        1px 1px 0 #000000, /* Right-bottom shadow */
        -1px -1px 0 #000000, /* Left-top shadow */
        1px -1px 0 #000000, /* Right-top shadow */
        -1px 1px 0 #000000; /* Left-bottom shadow */
}

@keyframes glitter {
    0% { color: #ffd4d4; }   /* Red */
    25% { color: #d8ffd8; }  /* Green */
    50% { color: #d2d2ff; }  /* Blue */
    75% { color: #ffdaff; }  /* Magenta */
    100% { color: #ffffcc; } /* Yellow */
}

.triggerfart{
  cursor:pointer;
}

#progress-container {
  background: red;
  display: none;
  width:100%;
  overflow: hidden;
}

#progress-bar {
  height: 6px;
  background: Chartreuse;
  width:100%;
  transition:width 1s;
}

.drawing-app {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  display: flex;
  z-index: 5000;
  font-family:MONO;
  border:none;
}

.msglnButton {

  text-decoration:none;
  font-weight: normal;
  font-size: 1em;
  margin:0;
  padding:0;
  font-family:MONO;
  border:none;
  text-align: center;
  border-radius:0%;
  padding:2px;
}


.window {

  min-width: 200px;
  min-height: 200px;
  padding:0;
  display: flex;
  flex-direction: column;
  position: absolute;
  resize: both;
  overflow: hidden;
  z-index: 100;
  border-bottom-left-radius: 10px;  /* Adjust as needed */
  border-bottom-right-radius: 10px;
  box-shadow:
  14px 10px 1px #39005dc8, /* Right-bottom shadow */
  0 0 0 #000000, /* Left-top shadow */
  0 0 0 #000000, /* Right-top shadow */
  0 0 0 #000000; /* Left-bottom shadow */
}
.windowheader {

  background: #9500ff;
  color: white;
  padding: 3px;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  border: 1px solid black;
  z-index: 100;

}
.content {

  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(50, 0, 132, 0.684);
  border: 25px solid transparent;
  border-radius:10px;
  border-image: url(bordermrpgglow2.png) 220 round;
  z-index: 100;
}
iframe {
  width: 100%;
  border: none;
  height: 100%;
  box-sizing: border-box;
  z-index: 100;

}

.close-btn{

  text-decoration:none;
  font-weight: normal;
  font-size: 1em;
  margin:0;
  font-family:MONO;
  border:none;
  text-align: center;
  border-radius:0%;
  padding:3px;

}
.close-btn:hover {
  background-color: #0056b3;
}


/*

   █████  ██    ██ ██████   ██   ██████ 
  ██   ██ ██    ██ ██   ██  ██  ██    ██
  ███████ ██    ██ ██   ██  ██  ██    ██
  ██   ██ ██    ██ ██   ██  ██  ██    ██
  ██   ██  ██████  ██████   ██   ██████ 
                                                                                                                                   
                                                                                                                                           
*/


#audioRecorder{
    background-color:aqua;
}
#message {
    margin-top: 20px;
}
#audioInputSelect{
    font-family:Menlo;
    text-decoration:none;
    border-radius:0%;
    max-width:40vw;
}
#recordButton{
    font-family:Menlo;
    text-decoration:none;
    border-radius:0%;
    color:red;
}
#stopButton{
    font-family:Menlo;
    text-decoration:none;
    border-radius:0%;
}
#sendButton{
    font-family:Menlo;
    text-decoration:none;
    border-radius:0%;
}
#quitButton{
    font-family:Menlo;
    text-decoration:none;
    border-radius:0%
}
#message{
    background-color:rgb(207, 221, 174);
    border:1px solid black;
    font-family:Menlo;
    text-decoration:none;
    border-radius:0;
}
#flashing{
    color:red;
    animation: flashing 1s infinite;
}
@keyframes flashing {
    0% { opacity: 1; }
    49% { opacity: 1; }
    50% { opacity: 0; }
    99% { opacity: 0; }
    100% { opacity: 1; }
}

/* Custom audio player styles */
.audio-player {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    border-radius: 5px;
    width: 100%;
}

.audio-player button {
    background: none;
    font-size: 0.7rem;
    cursor: pointer;
    color: #333;
    text-decoration:none;
    border-radius:0;

}

.audio-player button:disabled {
    color: #ccc;
}

.audio-player .progress-container {
    flex-grow: 1;
    margin: 0 10px;
    position: relative;
}

.audio-player .progress-bar {
    width: 100%;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


.audio-player .current-time, .audio-player .duration {
    font-size: 0.8rem;
    font-family:Menlo;
    color: #333;
}