.section-title {
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
    .box {
          border: 1px solid #d8b4b7;
    border-width: thin;
    background: #fff;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    }
    .table-container {
      margin: 10px auto;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    table th, table td {
      border: 1px solid #000;
      padding: 12px;
      text-align: center; 
    }
    .status-table th {
      background-color: #343a40;
      color: white;
    }
    .status-table td {
      text-align: center;
    }
    .badge-attained {
      background-color: #28a745;
      color: white;
      font-weight: bold;
    }
    .badge-not-attained {
      background-color: #dc3545;
      color: white;
      font-weight: bold;
    }
    .chart-container {
      height: 400px;
    }
    .animation-container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .animation-box {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
      flex: 1;
      margin-right: 10px;
    }
    .animation-box:last-child {
      margin-right: 0;
    }
	.blink {
            animation: blinker 1.5s linear infinite;
            color: red;
            font-family: sans-serif;
			font-weight: bold;
			background: #ebe2d4;
			padding: 7px 20px;
			border-radius: 15px;
        }
        @keyframes blinker {
            70% {
                opacity: 0.2;
            }
        }
		#container {
    height: 500px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}
.heading{
    background-color: #343a40;
    margin-top: 10px;
/*    padding: 10px;*/
    color: #fff;
}
.trStyle{
    background-color: #dee2e6;
    color: currentcolor;
}
.sectionStyle{
    background-color: #dee2e6;
    padding: 10px;
    color: #343a40;
}
 .correct {
    background-color: #d1e7dd;
    /* border-color: #212529; */
    color: #055805;
    margin: 0px 8px;
    padding: 5px 20px;
    border-radius: 15px;
      font-size: larger;
    }
    .wrong {
        
   background-color: #f8d7da;
    /* border-color: #212529; */
    color: #58151c;
    margin: 0px 8px;
    padding: 5px 20px;
    border-radius: 15px;
    font-size: larger;
    }