﻿

.RightModule,
.mclr-quiz-paper,
.mclr-quiz-scroll,
.mclr-q,
.mclr-q-text,
.mclr-opts,
.mclr-opt-text {
  text-align: left !important;
}




   .mclr-opt { align-items:flex-start; }

.mclr-opt-text{
  display:flex;
  gap:8px;
  line-height:1.55;
  min-width:0;
  white-space:normal;
}

.mclr-opt-text .opt-letter{
  flex:0 0 26px;
  font-weight:600;
  width:auto; /* override any old width */
}

.mclr-opt-text .opt-body{
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;
}  
     
     
     
     
  .mclr-submit-btn {
  flex: 0 0 40%;
  padding: 5px 10px;
  background: #0169ee;
  color: #fff;
  font-size: 14px;
  border-radius: 50px;
  width: auto;
  display: block;
  text-align: center;
  margin: 0;
  border: 1px solid #0169ee;
}
.mclr-submit-btn:hover { opacity: .92; }
.mclr-submit-btn:focus { outline: none; }
.mclr-submit-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Retest button style (pill) */
.mclr-retest-btn {
  flex: 0 0 40%;
  padding: 5px 10px;
  background: #fff;
  color: #0169ee;
  font-size: 14px;
  border-radius: 50px;
  width: auto;
  display: block;
  text-align: center;
  margin: 0;
  border: 1px solid #0169ee;
}
.mclr-retest-btn:hover { background: #f3f8ff; }   
     
  .mclr-quiz-paper {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  padding: 16px;
}

.mclr-quiz-scroll {
  margin-top: 7px;
  padding-top: 7px;
 <%-- max-height: 70vh;--%>
  overflow-y: auto;
  padding-right: 10px;
}

.mclr-q {
  padding: 14px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mclr-q:last-child { border-bottom: none; }

.mclr-q-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mclr-q-no { width: 28px; font-weight: 700; }
.mclr-q-text { flex: 1; font-weight: 700; }

.mclr-opts { margin-left: 28px; margin-top: 10px; }

.mclr-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  cursor: pointer;
  padding-right: 0;
}
.mclr-opt input { margin-top: 4px; }

.mclr-ans-icon {
  position: static;
  display: inline-block;
  margin-left: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.mclr-ans-icon.ok { color: #16a34a; }
.mclr-ans-icon.bad { color: #e11d48; }

.mclr-opt.correct-answer .mclr-opt-text { font-weight: 700; text-decoration: underline; }

.mclr-quiz-actions {
  justify-content: center;
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mclr-btn-primary {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}
.mclr-btn-primary:hover { opacity: .92; }


.mclr-q.correct { background: #f3fff3; border-left: 4px solid #16a34a; }
.mclr-q.wrong { background: #fff5f5; border-left: 4px solid #e11d48; }
.mclr-q.unanswered { background: #fff5f5; border-left: 4px solid #e11d48; }


.mclr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 9999;
  padding: 16px;
}
.mclr-modal {
  max-width: 520px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.mclr-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}
.mclr-modal-head h4 { margin: 0; font-weight: 700; }
.mclr-modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mclr-modal-body { padding: 14px; font-size: 14px; }
.mclr-modal-actions {
  padding: 12px 14px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}   

     
     
     
     
        
     
    

 #main-content {
  
    box-shadow: none !important; 
   
}
 

 
  #main-content .table-slider{
    position: relative;
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

 
  #main-content .table-responsive.table-scroll{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

   
    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  
  #main-content .table-responsive.table-scroll table.table{
    width: 100%;
    margin: 0 !important;

   
    table-layout: auto !important;
  }

 
  #main-content .table-responsive.table-scroll th,
  #main-content .table-responsive.table-scroll td{
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
  }

 
  .table-slider .slide-btn{
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 36px;
    height: 36px;
    border-radius: 999px;

    border: 1px solid #e5e5e5;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);

    font-size: 22px;
    line-height: 34px;
    text-align: center;

    cursor: pointer;
    user-select: none;
  }

  .table-slider .slide-left{ left: 6px; }
  .table-slider .slide-right{ right: 6px; }

  .table-slider .slide-btn:disabled{
    opacity: 0.35;
    cursor: not-allowed;
  }

 
  @media (max-width: 768px){
    .table-slider .slide-btn{ display: inline-block; }

  
    #main-content .table-slider .slide-left{ left: -18px; }
    #main-content .table-slider .slide-right{ right: -18px; }
  }





.btn-subject.active
{
    padding: 7px 20px;
    border-radius: 25px; /* border: 2px solid #2463EB; */
    background: #2463EB;
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
}

.btn-subject
{
    padding:5px 5px;
    border-radius: 25px;
    border: 1px solid #A1A1A1;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}
.box-shadow
{
    margin-bottom: 10px;
    border-top: 3px solid #434343;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}
.box-shadow label
{
    /*padding: 1px 10px;     background: #D9D9D9;     border-radius: 10px;     margin-top: 5px;     font-size: 12px;*/
    color: #000;
}
.box-shadow p
{
    font-weight: 500;
}
.nopadding
{
    padding: 0;
}
.NotesLink
{
    background: #FFB18F;
    color: #000;
    font-weight: 500;
    margin: 10px 5px 10px 0px;
	padding: 3px; /* width: 57px; */
	
    display: block;
}

#main-content
{
    padding: 10px;
    box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 50%);
    border: 1px solid #d1d1d1;
    text-align: left;
    margin-bottom: 30px;
}
#main-content h1
{
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 500;
}
#main-content h2
{
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 500;
}
#main-content h3
{
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 500;
}
#main-content li
{
    text-align: left;
}
#main-content ul
{
    list-style: disc;
}
.share-div
{
    background: #F5F5F5;
    padding: 5px 15px;
    margin: 0 0 10px 0;
}
.ModuleBtnOption
{
    text-align: right;
    margin-top: 5px;
}
.ModuleBtn img
{
    height: 15px;
}
.ModuleBtn
{
    padding: 5px;
    border-radius: 50%;
    background: #FFF;
}
.LeftModule
{
    position: sticky;
    top: 135px;
    z-index: 111;
    background: #FFF;
}

.flip-card
{
    background-color: transparent;
    border: 1px solid #969696;
    perspective: 1000px;
    /* height: 297px; */
    border-radius: 11px;
    height: 100%;
}

/* This container is needed to position the front and back side */
.flip-card-inner
{
    position: relative;
    /*width: 100%;*/
    height: 354px;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    /* height: 100%; */
}

.col-md-4
{
    margin-bottom: 20px;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
/* .flip-card:hover .flip-card-inner
        {
            transform: rotateY(180deg);
        }
        */
/* Position the front and back side */
.flip-card-front, .flip-card-back
{
    position: absolute;
    /*width: 218px;
    height: 306px;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 18px;
    border: 1px solid #FFF;
    height: 100%;
    width: 100%;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front
{
    background-color: #bbb;
    color: black;
}
.col-md-4 .flip-card-front img, .col-md-4 .flip-card-back img
{
    /* width: 218px !important; */
    /* height: 306px; */
    height: 100%;
    max-width: 100%;
    /* height: auto; */
    width: 100%;
  
    border-radius:10px;
}
/* Style the back side */
.flip-card-back
{
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}
.btn-rotate
{
    position: absolute;
    border: none;
    top: 85%;
    right: 18px;
    background: transparent;
    padding: 4px;
    border-radius: 5px;
}
.macMoreCourses .pagehead .pageHerosplitHeader
{
    padding: 20px 0 32px;
    position: relative;
}
.btn-rotate img
{
    height: 17px !important;
}
.pageHerosplitHeader:first-child
{
    padding: 25px 0 1px 0;
    margin-bottom: 25px;
    background-color: #F5E9FF;
    border-radius: 25px;
}
@media screen and (min-width: 768px)
{
    .subjectseo
    {
        width: 77%;
    }
    /*#main-content .col-md-3 img
    {
        width: 252px !important;
    }*/
    
    .flip-card-inner {
   
    height: 279px;
    
    }

}
@media screen and (max-width: 998px)
{
   /* #main-content .col-md-4, #main-content .col-md-3, #main-content .col-md-4.col-md-3
    {
        width: 50% !important;
        float: left !important;
    }*/
}
@media screen and (max-width: 768px)
{
    .subjectseo
    {
        width: 90%;
    }
    .LeftModule
    {
        position: absolute;
        z-index: 111;
        background: #FFF;
        width: 60%;
        margin-left: 4%;
    }
    /*.LeftModule
                            {
                                display: none;
                            }*/

    .LeftModule
    {
        width: 266px;
        position: sticky;
        top:220px;
    }
    .LeftModule .mobile-row
    {
        padding: 0;
        position: absolute;
        z-index: 99;
        background: white;
        max-height: calc(100vh - 60px);
    overflow-y: auto;
    }
    
}
.subjectseo
{
    margin: auto;
    padding: 10px 0 0 0;
    color: #40128B;
}
.subjectseo p
{
    font-size: 15px;
}
.title h1
{
    color: #40128B;
}
.pageHerosplitHeader:nth-child(2)
{
    position: sticky;
    top: 75px;
    background: #FFF;
    z-index: 900;
    border-bottom: 1px solid #e2e2e2;
}
#main-content p
{
    font-size: 14px;
    text-align: justify;
    line-height: 1.6;
}
.activerow
{
    background: #ffb18f3d;
}
.activelink
{
    background: #2463eb;
    color: #ffffff;
}
.LeftModule p
{
    text-align: left;
}

.LeftModule .mobile-row
    {
        
        max-height: calc(100vh - 150px);
    overflow-y: auto;
    }

.subjectseo p
{
    text-align:center;}