.card {
		margin:5px 0px;
	}
	.card:hover{
		background-color:#eee!important;
	}
	.card-header{
		padding: 10px 5px;
	}
	.card-body{
		padding: 5px;
	}
	.card-header .bi{
		color: #47a157;
	}
	.bi-star-fill{
		color:#e2e2e2;
	}
	.bi-star-fill.bright{
		color: #eed602;
	}
	.label-btn{
		padding:4px 8px;
		margin:6px;
	}
	#userList{
		margin: 5px 0px;
		padding: 5px;
	} 
	#userList .btn{
		margin: 0px 5px;
		padding: 10px;
	}
	.userForm-btn{
		margin-left: calc(var(--bs-border-width)* -1);
    	border-top-left-radius: 0;
    	border-bottom-left-radius: 0;
	}
	#user-button{
		font-size: 20px;
		color: #47a157;
	}
	#user-span{
		font-size: 20px;
		color: #47a157;
		padding: 0px 5px 0px 0px;
	}

	#scratch-container{
		background-color:white;
	}
	#scratch-container .row{
		margin:0px;
		padding:0px;
	}
	#scratch-container .col{
		margin:0px;
		padding:0px;
	}

	#scratch-content{
		text-align:center;
		background-color:white;
		margin: auto;
	    border-color: grey;
    	border-width: 1px;
    	border-style: solid;
	}
	#scratch-control-panel{
		text-align: left;
		padding: 2px 5px;
		position: fixed;
	}

	#scratch-control-panel .var-block {
	 	background-color: #f4f4f4;
		border-radius: 4px;
    	padding: 0px 3px;
    	margin: 2px;
    	width: fit-content;
	}
	#scratch-control-panel .var-block .var-name {
		font-weight: bold;
		margin: 0px 5px 0px 0px
	}
	#scratch-control-panel .var-block .var-val {
		background-color: orange;
		color: white;
		padding: 0px 10px;
	}

	#grade-badge{
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      background-color: gold;
      color: #333;
      padding: 5px 10px;
      border-radius: 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      animation: float 3s ease-in-out infinite;
      z-index: 1000;
      cursor: pointer;
      transition: all 0.3s ease;
	  display: none;
    }
    
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    #grade-badge:hover {
      transform: scale(1.1);
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
	#grade-badge.bronze{
		background-color: #E8C1A0;
		color: #8B4513;
	}
	#grade-badge.silver{
		background-color: #E6E8E9;
		color: #5A6169;
	}
	#grade-badge.gold{
		background-color: #FFF0B3;
		color: #B8860B;
	}
	#grade-badge.platinum{
		background-color: #D9E8F5;
		color: #3B5F8F;
	}
	#grade-badge.diamond{
		background-color: #BDE4F4;
		color: #1A93C1;
	}
	#grade-badge.star{
		background-color: #E5D4F0;
		color: #6A2E91;
	}
	#grade-badge.king{
		background-color: #F8D7DA;
		color: #721C24;
	}

    
	#scratch-control-panel .oi{
		margin:3px 3px;
	}
	#scratch-control-panel p{
		text-align: left;
    	padding: 1px 1px;
    	margin:0px;
    	width: 100%;
	}
	#scratch-control-btns{
		position: absolute;
		right: 20px;
		background-color: #f1f1f1;
		border-radius: 4px;
		padding: 0px 5px;
	}

	#variables{
		text-align:right;
		position:absolute;
	}
	#scratch-stage {
		margin:auto;
		width:100%;
	}
 	#scratch-modal .modal-body{
		overflow:hidden; 
		padding: 0px;
 	}
 	
 	#scratch-modal button{
 		padding: 2px;
    	background-color: transparent;
    	border: 0;
    	-webkit-appearance: none;
    	appearance: none;
    	margin: 0px 5px;
    	font-size: 24px;
 	}
 	#scratch-modal button:hover{
    	background-color: #eee;
 	}
 	#scratch-modal button:focus{
    	outline: none;
 	}

 	#scratch-modal .scratch-start-btn{
 		margin: 0px 5px 0px auto;
 	}