body{background-color:#FFFFFF;
}
a:hover{
cursor:pointer;
}
.qmarea{
cursor:pointer;
}
.loginlink{
color:#FFFFFF;
}
.subjectidno{
font-weight:bold;
border:1px solid #f1f1f1;
}

#right_content {
width: 100%;
float:left;
padding-left:0px;
}
.container{
max-width:100%;
}
.inner-body-wrapper .container{
width:100% !important;
}
.contentdiv {
margin:0px 0px 0px 0px;
}
.navigationdiv{
margin:20px 50px 0px 70px;
}
.currcontent{
width:90%;
margin-left:50px;
}
#currititle{
margin:0px 0px 0px 50px;
max-width:50%;
}
#qoverview{
margin:150px 0px 0px 200px;
}
.below4blocks{
width:95%;
//display: grid;
//grid-template-columns: repeat(4, 1fr); /* 4 equal columns */ 
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-items:center;
margin:0 auto;
}
.clickdiv{
width:50%;
margin-left:200px;
}
.middlecurrihd{
margin:50px 0px 0px 200px;
}
#quadrantab{
margin: 0px 0px 0px 100px;
width:95%;
display:flex;
}
#quadrantab img{
max-width: 100%;  /* Ensures the image never overflows its container */
height: auto;     /* Maintains the original aspect ratio automatically */
display: block; 
}
#popside2{
margin:0px 0px 0px 910px;
}
#popside4{
margin: 415px 0px 0px 743px;
}
#popside3{
margin: 425px 0px 0px 65px;
}
#fleftarrow{
position:inherit;
}
#frightarrow{
}
.q2pdfdiv{
padding:0px;
}
.currcontent{
text-align:justify;
padding:50px 0px 0px 137.5px;
font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
//height:1200px;
background-color:rgba(241, 241, 241, 0.24);
width:1450px;
margin-left:-100px;
}
.currfirst{
text-align:center;
width:315px;
height:700px;
position:relative;
float:left;
}
.currfirstinner{
text-align:center;
box-shadow:0px 1px 11px 2px #ccc;
min-height:660px;
width:275px;
background-color:#fff;
}
.currsecond{
text-align:center;
width:315px;
height:700px;
position:relative;
float:left;
}
.currsecondinner{
text-align:center;
box-shadow:0px 1px 11px 2px #ccc;
min-height:660px;
width:275px;
background-color:#fff;
}
.currthird{
text-align:center;
width:315px;
height:700px;
position:relative;
float:left;
}
.currthirdinner{
text-align:center;
box-shadow:0px 1px 11px 2px #ccc;
min-height:660px;
width:275px;
background-color:#fff;
}
.currfourth{
text-align:center;
width:315px;
height:700px;
position:relative;
float:left;
}
.currfourthinner{
text-align:center;
box-shadow:0px 1px 11px 2px #ccc;
min-height:660px;
width:275px;
background-color:#fff;
}
.headingdivcurr{
width:275px;
background-color:#490b1a;
padding:10px 0px 10px 0px;
color:#fff;
font-size:1.2em;
margin-top: -10px;
}
.currtxt{
font-size:14px;
padding:0px 0px 0px 0px;
overflow:auto;
max-height:460px;
}
.currtxt div img{
padding:5px;
}

.currtxt div{
background-color:#F6FFF0;
margin:0px 0px 5px 0px;
cursor:pointer;
}
.lecturelink{
display:none;
background-color:#EFEFEF;
padding-left:10px;
padding-bottom:2px
}
.lecturelink a:hover{
color:#0066FF;
}
#qoverview{
font-size:22px;
margin:10px 0px 0px 0px;
text-align:justify;
color:#274CC2;
}
#qoverviewstart{
font-size:22px;
text-align:justify;
color:#274CC2;
margin:50px 0px 50px 0px;
}
#qcourse{
font-size:22px;
margin:20px 0px 0px 300px;
text-align:left;
color:#274CC2;
}
#q1 span, #q2 span, #q3 span, #q4 span{
font-size: 200px;
font-family: 'Georgia';
color: #787878;
opacity: 0.1;
filter: alpha(opacity=10); /* For IE8 and earlier */
float:right;
margin:-400px 100px 0px 0px;
}
#quatrant{
width:100%;
margin-top: 0px;
text-align:center;
}
#q1, #q2, #q3, #q4{
width:100%;
text-align:center;
padding-top:100px;
background: #d8d8d8;
display: flex;
flex-wrap: wrap;
//display: grid;
//grid-template-columns:repeat(2, 1fr); /* 3 equal columns */
}
.mobiletabouter2{
margin:0px 0px 0px 0px;
}
.pdfdiv, .q2pdfdiv, .q3pdfdiv, .q4pdfdiv {
float:left;
background:#d8d8d8;
min-height:500px;
margin: -50px 0px 0px 50px;
padding:0px 50px 50px 0px;

}
.q1content, .q2content, .q3content, .q4content{
background:#d8d8d8;
margin:-100px 0px 0px 30px;
padding:20px 100px 0px 0px;
display:flow-root;
width:35%;
}
.q1txt{
float:left;
MARgin:-85px 0px 0px 145px;
color:white;
position:absolute;
font-size:18px;
font-weight:bold;
}
.pdftabcontent, .pdftabcontent2, .pdftabcontent3, .pdftabcontent4{
float:left;
position:absolute;
margin:-484px 0px 0px 70px;
}
.vdtabcontent{
margin:-460px 0px 0px 0px;
}
#vdstitle1{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle2{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle3{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle4{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle5{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle6{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle7{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle8{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle9{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle10{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle10{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle11{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#vdstitle12{
float:left;
position:absolute;
color:#FFFFFF;
font-size:16px;
margin:35px 0px 0px 125px;
text-align:left;
font-weight:bold;
}
#qvdstitle2{
text-align:center;
font-weight:bold;
margin:-642px 0px 0px 625px;
position: absolute;
}
#vd3stitle1{
float:left;
position:absolute;
color:#FFFFFF;
font-size:20px;
margin:40px 0px 0px 150px;
text-align:center;
font-weight:bold;
}
#vd4stitle1{
float:left;
position:absolute;
color:#FFFFFF;
font-size:20px;
margin:40px 0px 0px 150px;
text-align:center;
font-weight:bold;
}
#vd4stitle2{
float:left;
position:absolute;
color:#FFFFFF;
font-size:20px;
margin:40px 0px 0px 150px;
text-align:center;
font-weight:bold;
}
#qname1, #qname2, #qname3, #qname4{
background-color:#f9de06;
color:#000000;
padding: 5px;
position: absolute;
font-size: 24px;
transform: rotate(-42deg);
margin:10px 0px 0px -30px;
}
#qtype2, #qtype3, #qtypetxt3, #qtype4{
color:#ffffff;
font-size:30px;
padding: 15px;
position: absolute;
transform: rotate(90deg);
margin:135px 0px 0px -121px;
width:350px;
}
#qvdstitletxt, #qvdstitle2{
text-align:center;
font-weight:bold;
margin:-633px 0px 0px 625px;
position: absolute;
}
#qvdstitle3, #qvdstitle4{
float:left;
position:absolute;
margin:-143px 0px 0px 600px;
text-align:center;
font-weight:bold;
}
.currivideosourcebelow{
background-image:url(../../../../default/beyond/buffering.gif);
background-position:center;
background-size:100%;
width:650px;
height:360px;
}
.currheading{
margin:0 auto;
padding-top:60px;
}
.bottomline{
margin:0 auto;
}
#econtentdisplay{
display:none;
justify-items: center;
}
/* Container that locks the buttons perfectly on top of the image */
.responsive-map-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1190px; /* Prevents image from blowing out larger than original */
}

/* Forces image to scale fluidly with screen size */
.responsive-map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Base style for clickable hotspot buttons */
.map-btn {
  position: absolute;
  top: 15.6%;    /* Match original pixel 'y' start line */
  height: 59.4%; /* Match original pixel height */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  
  /* Optional: Uncomment below line to visually see and test boxes */
  /* background-color: rgba(255, 0, 0, 0.3); */ 
}

/* Exact widths & left offsets mapped perfectly from your 4 coordinates */
.btn-1 { left: 0%;      width: 31.7%; }
.btn-2 { left: 31.9%;   width: 23.2%; }
.btn-3 { left: 55.2%;   width: 23.1%; }
.btn-4 { left: 78.7%;   width: 21.3%; }
/* Small Laptops and Large Tablets */
@media (max-width: 1200px) {
    
}

@media (max-width: 992px) {
	#q1, #q2, #q3, #q4{
	margin-left:-100px;
	}
	q2content{
	margin: 0px 0px 0px 30px;
	}    
	.q3content, .q4content{
	    min-height: 450px;
	}
}

/* Mobile Devices (Smartphones) */
@media (max-width: 768px) {
	#q1, #q2, #q3, #q4{
		margin-left:-100px;
	    margin-top: -80px;
		background-color:#FFFFFF;			
	}
	q2content{
		margin: 0px 0px 0px 30px;
	}    
	.q3content, .q4content{
	    min-height: 450px;
	}
	#qcourse{
	margin:0px;
	}

}