@charset "UTF-8";
/* CSS Document */


.bw {
    background: url(bw.svg) no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 100px;
    padding: 0;
border: none;
}

.play {
    background: url(play.svg) no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 80px;
    width: 100px;
    padding: 0;
border: none;
}


.size {
    background: url(size.svg) no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 100px;
    padding: 0;
border: none;
}

.replay {
    background: url(replay.svg) no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 80px;
    width: 100px;
    padding: 0;
border: none;
}


.re {
    background: url(reset.svg) no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 100px;
    padding: 0;
border: none;
}

.pause {
    background: url(pause.svg) no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 80px;
    width: 100px;
    padding: 0;
border: none;
}

.hico {
    border-color: white;
    border-radius: 20px;
    border-width: 5px;
    padding-bottom: 5px;
    width: 90%;
    background-color: lightgray;
    margin-bottom: 20px;
    box-shadow: 
    0 0 0 5px hsl(0, 0%, 0%);
    
    
}

.hico2 {
    border-color: white;
    border-radius: 20px;
    border-width: 5px;
    padding-bottom: 5px;
    width: 50%;
    background-color: lightgray;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 
    0 0 0 5px hsl(0, 0%, 0%);
    
    
}

.profile {
    background: url(profile.svg) no-repeat top center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 100px;
    width: 100px;
    padding: 0;
    border-width: 5px;
    background-color: lightgray;
    border-radius: 50%;
    border-color: white;
    box-shadow: 
    0 0 0 5px hsl(0, 0%, 0%);
}

.acc-panel {
    padding-bottom: 0;
}
.nopad {
    padding-top: 0;
    padding-bottom: 0;
}

.space {
    padding-left: 20px;
}

.triangle-5 {
  width: 60px;
  height: 60px;
  border-top: solid 60px rgb(82,156,70);
  border-left: solid 0px transparent;
  border-right: solid 60px transparent;
  float: left;
  
  top: 0;
  left: 0;
}

.triangle-6 {
  width: 60px;
  height: 60px;
  border-top: solid 60px rgb(224,216,61);
  border-right: solid 0px transparent;
  border-left: solid 60px transparent;
  float: right;
    
  
  top: 0;
  right: 0;
}

.triangle-7 {
  width: 60px;
  height: 60px;
  border-bottom: solid 60px rgb(112,128,170);
  border-left: solid 0px transparent;
  border-right: solid 60px transparent;
  float: left;
  
  top: 0;
  left: 0;
}

.triangle-8 {
  width: 60px;
  height: 60px;
  border-bottom: solid 60px rgb(220,54,41);
  border-right: solid 0px transparent;
  border-left: solid 60px transparent;
  float: right;
  top: 0;
  right: 0;
}

.container-fluid {
    background-color: fff;
    padding-left: 0px;
    padding-right: 0px;
}

.pt1{
    font-size:6px;
}