body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      background-color: #f9f9f9;
    }
    h1 {
      margin-bottom: 0px;
	  text-align: center;
    }
    .timer,
    .recorder {
      margin-bottom: 10px;
      text-align: center;
    }
    .timer h3,
    .recorder h3 {
      margin-bottom: 10px;
    }
    .timer p {
      font-size: 24px;
      margin: 10px 0;
      font-weight: bold;
    }
	  .smallText{
		font-size: 14px;
		color: red;
	  }
	label{
		font-weight: bold;
	}
    button {
      margin: 5px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #007bff;
      color: #fff;
    }
    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
    button:hover:not(:disabled) {
      background-color: #0056b3;
    }
    textarea {
      margin-top: 20px;
      width: 80%;
      max-width: 80%;
      height: 100px;
      font-size: 16px;
      padding: 10px;
    }
    .hidden {
      display: none;
    }
    .audio-controls {
      margin-top: 10px;
      text-align: center;
    }
    .audio-controls audio {
      margin-bottom: 10px;
    }
    .meter-container {
      width: 80%;
      max-width: 400px;
      height: 20px;
      background-color: #ddd;
      border-radius: 10px;
      margin: 20px auto;
      position: relative;
      overflow: hidden;
    }
    .meter-bar {
      height: 100%;
      background-color: #007bff;
      width: 0%;
      transition: width 0.1s;
    }
#contentCheckResult, #grammarFeedback, #logicFeedback{
	max-width: 800px;
}
	@media only screen and (min-width: 675px) {
	  .timer{
	    float: left;
	    margin: 10px 30px 30px 30px;
	  }
	}
	@media only screen and (max-width: 675px) {
		button{
			font-size: 20px;
		}
		h1{
			font-size: 26px;
		}
		h3{
			font-size: 22px;
		}
		.countdownTimers{
			margin-bottom: 10px;
		}
		p{
			font-size: 18px;
		}
		.timer p{
			font-size: 30px;
		}
		.recorder{
			margin-bottom: 0px;
		}
		.boxDiv{
		width: 100%;
		text-align: center;
		}
		label{
			font-size: 18px;
		}
	}
    .recording-timer {
      font-size: 18px;
      margin: 10px 0;
    }
    .grammar-feedback {
      margin-top: 20px;
      font-size: 14px;
    }
@media only screen and (min-width: 991px) {
	.loginDetails{
	width:200px;
  	height:100px;
  	position:absolute;
  	top:60px;
  	right:50px;
	text-align: right;
	}
	.boxDiv{
	width: 50%;
	text-align: center;
	}
}
@media only screen and (max-width: 990px) {
	.loginDetails{
		text-align: center;
		margin: 10px 0 0 0;
	}
}

.loginDetails button{
	background-color: transparent;
	color: blue;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding: 0;
}
.loginDetails button:hover:not(:disabled) {
      background-color: transparent;
	  text-decoration: underline;
    }

/* correction.html */
.uploader{
	margin: 40px 0 20px 0;
	text-align: center;
}
.transcriptedText, .contentCheckContainer{
	text-align: center;
}
.contentCheckContainer{
	margin-bottom: 30px;
}


/* added for styling open ai feedback */
.content-section {
    margin: 1em 0;
    border: 1px solid #ddd;
    padding: 1em;
  }
  .content-section h3 {
    margin-top: 0;
  }
  .itemRow {
    display: flex;
    align-items: start;
    margin: 0.5em 0;
  }
  .icon {
    width: 24px;
    text-align: center;
    font-size: 1.2em;
    margin-right: 0.5em;
    line-height: 1.2em;
  }
  .green { color: green; }
  .orange { color: darkorange; }
  .red { color: red; }
  .studentExcerpt {
    margin-left: 2em;
	margin-top: 10px;
    font-style: italic;
    color: #555;
  }
.boxDiv{
	text-align: center;
}
/* */
 
input[type="text"],
input[type="password"] {
  font-size: 16px;      /* Increase font size */
  padding: 10px;        /* Add padding for a bigger box feel */
  width: 100%;           /* Make them responsive - 80% of container width */
  max-width: 500px;     /* Don’t get too huge on large screens */
  box-sizing: border-box; /* Ensure padding + width works nicely */
  margin: 8px 0;        /* Some vertical space between fields */
  border-radius: 5px;   /* match your button radius if you like */
  border: 1px solid #ccc; 
}
#loginBtn{
	font-weight: 700;
	font-size: 16px;
}
.note{
	text-align: center;
	font-size:12px;
}