
body {
	background-color: #eff0ef;
	background-image: url('../../images/grad1.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	}
		


.header {
  position: relative;
  background-image: url('../../images/amr_slim-bannerlogo2.jpg');
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid #d42241;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  overflow: hidden;
}

/* Logo added via pseudo-element */
.header::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 20px;
  width: 220px;
  height: 20px;
  background-image: url('../../images/namelogo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
}

	
.landing {	
	width: 100%;
	border-style: solid; 
	border-width: 2px; 
	border-color: #d42241; 
	border-radius:10px; 
	-webkit-border-radius:10px; 
	moz-border-radius:10px;
	padding: 20px;
	
}

.newbg{
	background: rgba(255, 255, 255, 0.9); 
	padding: 10px 10px 10px 10px; 
	border-radius: 10px; 
	border-style: solid; 
	border-color: #d42241; 
	border-width: thin; 
}

h3 {
       background-color:#d42241;
       color:white;
       padding:3px 8px;
	   border-radius: 10px; 
       width:100%;
       }

.tentopy{
	
	background-color:#808080;
	width:80%;
	color: #ffffff;
	padding: 10px 10px 10px 10px; 
	border-radius: 10px; 
	
}

.prog_wrap{

margin-left: 15%;
margin-top: 10px;

}

#playprompt{

margin-top: 10px;
	
}

  .option-container {
      background-color: #7f7f7f;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 10px;
      color: white;
	  width: 90%;
    }
	
	  .option-container2 {
      background-color: #7f7f7f;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 10px;
      color: white;
	  width: 65%;
    }

    .radio-wrapper {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      font-family: sans-serif;
    }

    .radio-wrapper input[type="radio"] {
      opacity: 0;
      position: absolute;
    }

    .custom-radio {
      width: 16px;
      height: 16px;
      border: 2px solid #fff; /* white outer ring */
      border-radius: 50%;
      background-color: #fff;
      position: relative;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .radio-wrapper input[type="radio"]:checked + .custom-radio::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      background-color: #e53935;
      border-radius: 50%;
    }

    .radio-label-text {
      line-height: 1.4;
    }


.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: sans-serif;
}

.checkbox-wrapper input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.custom-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #fff; /* white border */
  border-radius: 4px; /* square with slight rounding */
  background-color: #fff;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #e53935;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label-text {
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
	body {
	background-color: #eff0ef;
	background-image: url(../../images/grad2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	}
    .header {
        background-image: url('../../images/amr_slim-bannerlogo2.jpg');
    }
	.prog_wrap{

margin-left: 0%;

}
}