@charset "utf-8";
/* CSS Document */

.testList, .testList2 {
width: 98%;
align-self: center;	
}
.testList td {
width:32%;	
}
.testList2 td {
width:49%;	
}
.blank {
width:100%;	
background-color: #eee;	
padding:2% 0%;	
}
.testList a {
	display: inline-block;
   width: 100%;
height: 100%;	
background-color: #eee;
color:#333;	 
padding:2% 0%;
transition:0.3s;	
}
.testList a:hover{
   background-color: #37c;
color:#fff;	 
}
.testList2 a {
	display: inline-block;
   width: 100%;
height: 100%;	
background-color: #eee;
color:#333;	 
padding:1.7% 0%;
transition:0.3s;	
}
.testList2 a:hover{
   background-color: #37c;
color:#fff;	 
}
	.testListBG {
		width: 94%;
max-width: 750px;
	 padding: 1% 2%;
    	background-color: #fafafa;
        border-radius:2px;
		 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.19);		
}
.testListTitle1 {
width: 100%;
padding: 0px;
	text-align: center;

}
.testListTitle2 {
width: 97.5%;
padding:8px 0px;	
	margin: auto;
text-align: center;
background-color: #36a;
	font-size: large;
	color: #fff;
font-weight: bold;	
}	
.rowTitle {
text-align: center;
background-color: #36a;
	font-size: large;
	color: #fff;
font-weight: bold;		
}
.rowTitle2 {
text-align: center;
background-color: #36a;
	font-size: large;
	color: #fff;
font-weight: bold;	
}
.rowTitle2 td {
padding:6px 0px;	
}
.flexTestList{
width: 98%;
align-self: center;
align-items: center;	
padding: 1px;
 display: flex;
 flex-wrap: wrap;
}
.flexTestList > div {
width:33.33%;
text-align: left;
}	
 .flexTestList a {
    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #eee;
color:#333;	 
margin:3px 0.5% 0% 0.5%;
padding:1.5%;	 
  }
 .flexTestList a:hover {
     background-color: #37c;
	color:white;
transition:0.3s;		 
}

/* for unfinished tests */
.unfinished {
    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #eee;
color:#999;	 
margin:3px 0.5% 0% 0.5%;
padding:1.5%;		
}
.unfinished:hover{
   background-color: #A21C1C; 
}
/* For GCSE flexTestlistG has centre aligned text */

.flexTestListG{
width: 98%;
align-self: center;
align-items: center;	
padding: 1px;
 display: flex;
 flex-wrap: wrap;
}
.flexTestListG > div {
width:33.33%;
text-align: center;
}	
 .flexTestListG a {
    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #eee;
color:#333;	 
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
transition:0.3s;	 
  }
 .flexTestListG a:hover {
    background-color: #37c;
color:white;	 
}

/* For GCSE flexTestlistTopic has centre aligned text ad coloured by topic */

.flexTestListTopic{
width: 98%;
align-self: center;
align-items: center;	
padding: 1px;
 display: flex;
 flex-wrap: wrap;
}
.flexTestListTopic > div {
width:33.33%;
text-align: center;
}	
 .flexTestListTopic a {
    display: inline-block;
    text-decoration: none; 
   width: 96%;
color:#333;	 
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
transition:0.3s;	 
  }
 .flexTestListTopic a:hover {
    background-color: #37c;
color:white;	 
}

/* title blocks for blue and grey */
.divTitleGrey {
	    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #eee;
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
}
.divTitleBlue {
	    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #cde;
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
}
/* blocks for odd number, even number, and 2 column only (2 is dispay none to start ) */
.spareO, .spareE {
	    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #eee;
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
}
 .spareEblue, .spareOblue {
	    display: inline-block;
    text-decoration: none; 
   width: 96%;
background-color: #cde;
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
}
.spare2 {
display: none !important;	
text-decoration: none; 
width: 96%;
background-color: #eee;
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
}
.spare2blue {
display: none !important;	
text-decoration: none; 
width: 96%;
background-color: #cde;
margin:3px 0.5% 0% 0.5%;
padding:1.5%;
}
.spare2holder{display: none !important;}
.div_2{display: none !important;}
.spareOholder{display:inline-block;}

@media screen and (max-width: 850px){
	.flexTestList > div {
width:50%;
}	
	.flexTestListG > div {
width:50%;
}	
		.flexTestListTopic > div {
width:50%;
}		
.spareO, .spareOblue, .spareOholder, .div_O {
display:none;
	}
.spare2, .spare2blue, .spare2holder, .div_2 {
display:inline-block !important;
	}	
	}
@media screen and (max-width: 600px){
	.flexTestList > div {
width:100%;
}	
	.flexTestListG > div {
width:100%;
}	
		.flexTestListTopic > div {
width:100%;
}	
.spareO, .spareE, .spare2, .spare2blue, .spareEblue, .spareOblue, .div_E {
display:none !important;
	}	
	}
.forces {background-color: #cde;}
.elec {background-color: #eee;}
.wav {background-color: #cde;}
.nrg {background-color: #eee;}
.mat {background-color: #cde;}
.rad {background-color: #eee;}
.mag {background-color: #cde;}
.astro {background-color: #eee;}
.wavC {background-color: #eee;}
.elecC {background-color: #cde;}
.magC{background-color: #eee;}
.radC {background-color: #cde;}
.topic1{background-color: #eee;}
.topic2{background-color: #cde;}


	.gradepod2 {
	display:none;	
	}
@media screen and (max-width: 1200px){

	.gradepod2 {
display:inline;		
	}	
}
 /* code for locked options---------------------------------------------------------------*/   
    .locked-button {
    position: relative;
    display: inline-block;
    width: 100%; /* Adjust as needed */
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 96%;
    height:16px;
    margin:3px 0.5% 3px 0.5%;
padding:1.5%;
    background-color: rgba(200, 230, 245, 0.4); /* Semi-transparent black */
    display: flex;
    align-items: right;
    justify-content: right;
    cursor: not-allowed;
    z-index: 10;
}

.lock-icon {
    font-size: 17px;
    color: white;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.locked-button .lock-overlay + a {
    pointer-events: none;
}
.premium-button {
width:21%;
display: inline-block;
background-color: #def;
margin:1%;
padding:2px;
border:2px solid black;
border-radius:8px    
}
.premium-button-wedge {
width:24%;
display: inline-block;    
}
.premium-title-block {
width:48%;
display: inline-block; 
padding:1%;    
}
@media screen and (max-width: 700px){
.premium-button {
width:95%;  
}	
.premium-button-wedge {
display: none;    
}
    .premium-title-block {
width:98%;    
}
}