.profile_avatar{
display: block;
margin: 0 auto;
}
.avatar_spin{
border-radius: 50%;
}
.state_profile{
width: 18px;
height: 18px;
right: 6px;
}
.profile_tinfo{
display: block;
padding: 10px;
}
.pdetails{
text-align: center;
}
#profile_like{
width: auto;
margin: 0 auto;
}

.gen2 {
    color: #ff0000
}
.gen3 {
    color: #0000FF
}
.gen4 {
    color: #00008b
}
.gen5 {
    color: #70defa
}
.gen6 {
    color: #00FF00
}
.gen7 {
    color: #d4af37
}
.gen8 {
    color: #FF00FF
}
.gen9 {
    color: #FFC0CB
}
.gen10 {
    color: #FF4500
}
.gen11 {
    color: #964b00
}
.gen12 {
    color: #7f00ff
}
.gen13 {
    color: #c0c0c0
}
/* prole box */

.audio-player {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  max-width: 300px;
  margin: 0 auto;
}
.play_button{
	background: teal;
}
button#play-button {
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 13px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    
}
button#play-button:hover {
  background-color: #45a049;
}
/**/

.flex_frame_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.bccheckFrame{
	left: 50%;
    font-size: 20px;
    color: #0037ff;
    margin-top: 9px;
    position: relative;
	text-shadow: 0px 0px 5px #fd0808;
}
.gtag {
    color: white;
    background: black;
}
.note_gold {
    border: 1px solid rgb(6 84 77 / 23%);
    background: #f3ffe6;
    border-radius: 6px;
    text-align: center;
    margin-top: 11px;
    font-size: 13px;
    padding: 10px;
}
.center_item{display: flex;align-items: center;margin-top: 4px;margin-bottom: 4px;}
.frame_div{
	float: right;
    margin: 1.25%;
    min-height: 41px;
    display: flex;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
	position:relative;
}
.avatar_profile_frames {
    width: 120px;
    height: 120px;
    margin-right: auto;
}
.profile_top {
    padding: 0 15px 20px 15px;
    position: relative;
    height: 100%;
}
.frame_switch{
	width:76px;
}
.ps_choice_frame .bccheck {
    color: black;
	position: absolute;
}
.frame_photo {
    position: absolute;
    z-index: 30;
    right: -4px;
    pointer-events: none;
    bottom: -17px;
    width: 147px;
}
.top_frame_photo{
	position: relative;  top: -128px; left: -2px;
}
.middle_frame_photo{
	display: inline-block;vertical-align: middle;
}
.avatar_profile_frame {
    min-height: 100px;
    width: 100px;
    height: auto;
    cursor: pointer;
    display: block;
    border-radius: 100px;
    top: 50px;
    left: 20px;
	position: absolute;
}
.under {
    position: absolute;
}
.white { color:white; }
.file-upload {
  position: relative;
  display: inline-block;
}

.file-label {
    display: inline-block;
    padding: 10px 70px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.file-label:hover {
  background-color: #2186c3;
}

.file-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#file-name {
  margin-top: 10px;
}
.file-upload-btn{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
}
#progress-container {
    width: 100%;
    height: 5px;
    background-color: #eee;
    position: relative;
}

#progress-bar {
  height: 100%;
  width: 0;
  background-color: #4CAF50;
  transition: width 0.3s;
}

.audio-player {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  max-width: 300px;
  margin: 0 auto;
}


.mprofilemenu{background-size:cover !important;background-color:#000000 !important}
.probio{background: #00000059;}
.ps_switch{
    float: left;
    width: 12%;
    margin: 1%;
    position: relative;
    min-height: 40px;
    text-align: center;
}
.ps_choice .bccheck{color: black;}
.psshadow1 { box-shadow: 0 0 16px 10px #e96060; }
.psshadow2 { box-shadow: 0 0 16px 10px #ff5733; }
.psshadow3 { box-shadow: 0 0 16px 10px #ffab61; }
.psshadow4 { box-shadow: 0 0 16px 10px #ffdb58; }
.psshadow5 { box-shadow: 0 0 16px 10px #ffea80; }
.psshadow6 { box-shadow: 0 0 16px 10px #a9dfbf; }
.psshadow7 { box-shadow: 0 0 16px 10px #5cc8f2; }
.psshadow8 { box-shadow: 0 0 16px 10px #9a77b9; }
.psshadow9 { box-shadow: 0 0 16px 10px #a0616a; }
.psshadow10 { box-shadow: 0 0 16px 10px #a89685; }
.psshadow11 { box-shadow: 0 0 16px 10px #f8b195; }
.psshadow12 { box-shadow: 0 0 16px 10px #f67280; }
.psshadow13 { box-shadow: 0 0 16px 10px #c06c84; }
.psshadow14 { box-shadow: 0 0 16px 10px #6b4226; }
.psshadow15 { box-shadow: 0 0 16px 10px #d9bf77; }
.psshadow16 { box-shadow: 0 0 16px 10px #1a535c; }
.psshadow17 { box-shadow: 0 0 16px 10px #92a8d1; }
.psshadow18 { box-shadow: 0 0 16px 10px #dbcfb0; }
.psshadow19 { box-shadow: 0 0 16px 10px #b7c0c7; }
.psshadow20 { box-shadow: 0 0 16px 10px #edf2ef; }
.psshadow21 { box-shadow: 0 0 16px 10px #fabcf2; }
.psshadow22 { box-shadow: 0 0 16px 10px #e4bb97; }
.psshadow23 { box-shadow: 0 0 16px 10px #a8dadc; }
.psshadow24 { box-shadow: 0 0 16px 10px #ff84b4; }
.psshadow25 { box-shadow: 0 0 16px 10px #cbf3f0; }
.psshadow26 { box-shadow: 0 0 16px 10px #d9bf77; }
.psshadow27 { box-shadow: 0 0 16px 10px #fcbf49; }
.psshadow28 { box-shadow: 0 0 16px 10px #3d9a96; }
.psshadow29 { box-shadow: 0 0 16px 10px #004445; }
.psshadow30 { box-shadow: 0 0 16px 10px #008891; }
.psshadow31 { box-shadow: 0 0 16px 10px #00bcd4; }
.psshadow32 { box-shadow: 0 0 16px 10px #78c4d4; }
.backpsshadow1 { box-shadow: 0 0 3px 1px #e96060; }
.backpsshadow2 { box-shadow: 0 0 3px 1px #ff5733; }
.backpsshadow3 { box-shadow: 0 0 3px 1px #ffab61; }
.backpsshadow4 { box-shadow: 0 0 3px 1px #ffdb58; }
.backpsshadow5 { box-shadow: 0 0 3px 1px #ffea80; }
.backpsshadow6 { box-shadow: 0 0 3px 1px #a9dfbf; }
.backpsshadow7 { box-shadow: 0 0 3px 1px #5cc8f2; }
.backpsshadow8 { box-shadow: 0 0 3px 1px #9a77b9; }
.backpsshadow9 { box-shadow: 0 0 3px 1px #a0616a; }
.backpsshadow10 { box-shadow: 0 0 3px 1px #a89685; }
.backpsshadow11 { box-shadow: 0 0 3px 1px #f8b195; }
.backpsshadow12 { box-shadow: 0 0 3px 1px #f67280; }
.backpsshadow13 { box-shadow: 0 0 3px 1px #c06c84; }
.backpsshadow14 { box-shadow: 0 0 3px 1px #6b4226; }
.backpsshadow15 { box-shadow: 0 0 3px 1px #d9bf77; }
.backpsshadow16 { box-shadow: 0 0 3px 1px #1a535c; }
.backpsshadow17 { box-shadow: 0 0 3px 1px #92a8d1; }
.backpsshadow18 { box-shadow: 0 0 3px 1px #dbcfb0; }
.backpsshadow19 { box-shadow: 0 0 3px 1px #b7c0c7; }
.backpsshadow20 { box-shadow: 0 0 3px 1px #edf2ef; }
.backpsshadow21 { box-shadow: 0 0 3px 1px #fabcf2; }
.backpsshadow22 { box-shadow: 0 0 3px 1px #e4bb97; }
.backpsshadow23 { box-shadow: 0 0 3px 1px #a8dadc; }
.backpsshadow24 { box-shadow: 0 0 3px 1px #ff84b4; }
.backpsshadow25 { box-shadow: 0 0 3px 1px #cbf3f0; }
.backpsshadow26 { box-shadow: 0 0 3px 1px #d9bf77; }
.backpsshadow27 { box-shadow: 0 0 3px 1px #fcbf49; }
.backpsshadow28 { box-shadow: 0 0 3px 1px #3d9a96; }
.backpsshadow29 { box-shadow: 0 0 3px 1px #004445; }
.backpsshadow30 { box-shadow: 0 0 3px 1px #008891; }
.backpsshadow31 { box-shadow: 0 0 3px 1px #00bcd4; }
.backpsshadow32 { box-shadow: 0 0 3px 1px #78c4d4; }
@media screen and (max-width:768px){
	.frame_photo {
		width: 123px;
		right: -12px;
	}
	.avatar_profile_frames {
		width: 100px;
		height: 100px;
	}
}
.play_button{
	background: teal;
}
button#play-button {
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 13px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    
}
button#play-button:hover {
  background-color: #45a049;
}
/*........*/

.quiz_question { background:#03add8; color:#012832; font-weight:bold; }
.quiz_bad { background:#cc0000; color:orange; font-weight:bold; }
.quiz_good { background:#74b20e; color:#003300; font-weight:bold; }
.quiz_hint { background:#ac00e6; color:#39004d; font-weight:bold; }
.quiz_question span { color:#fff; }
.quiz_good span { color:#fff; }
.quiz_bad span { color:#fff; }
.quiz_hint span { color:#fff; }

.quiz_text { border-radius:3px; padding:2px 10px; margin-top:5px; display:inline-block; }
.quiz_text .my_notice { background:none !important; }
.score_lm { display:table-cell; vertical-align:middle; width:70px; text-align:right; padding:0 5px; }
.ranking_lm { display:table-cell; vertical-align:middle; width:30px; text-align:center; font-weight:bold; }
.quiz_leaderbox { width:100%; max-height:400px; overflow:hidden; overflow-y:auto; }