/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 24, 2016, 4:52:54 PM
    Author     : pankaj.jha
*/

@playerWidth:1010px;
@playerHeight:680px;
@headerHeight:60px;
@footerHeight:60px;
@navButtonHeight:25px;
@navButtonWidth:29px;
@navPadding:10px;
@bodyPaddingTop:60px;
@bodyPaddingBottom:60px;
@images: "../Eng/assets/";
@borderRadius: 1px;
@focuscolor:transparent;

//created by shankar
@CommonColor:#005796;

/*MCQ*/

body{
	padding:0 !important;
}

.MCQalign {
  margin-left: 40px;
}

/*.mcqBg .instruction{
	margin-left:1%;
}*/

.li_left_align{
	
	margin-left: 0% !important;
	
}

/*added by Mithlesh Kumar */
.questionBg{
    background: #E2E2E2;
    padding: 22px;
}

	 	.carousel-inner{
		
		/*if brmobileview commented Else useheight: 45vh;*/
height: 40vh;

overflow-x: hidden ;
overflow-y:auto;  


}
	
/*True false button for question*/
.btnTrueFalse {
    padding: 5px 30px;
    border-radius: 0;
    margin-right: 10px;
    font-size: 16px;
}


.btnTrueFalse1 {
    padding: 5px 30px;
    border-radius: 0;
    margin-right: 10px;
    font-size: 16px;
}

.queTextInputanswer{
	padding-left:20px;
		display: table-cell;
  padding-right: 10px;
  padding-top: 3px;
  font-size: 16px;
  vertical-align: middle;
}

.queTextTrueFalse {
	display: table-cell;
  padding-right: 10px;
  padding-top: 3px;
  font-size: 16px;
  vertical-align: middle;

}

.lastPageVideoHide{
	
	margin-top:20%;
}


.submitBtnHoder{
	text-align:center;
		margin-left:3%;
}
.queText {
  display: table-cell;
  padding-right: 10px;
  padding-top: 3px;
  font-size: 20px;
  vertical-align: middle;
}

#kcCorrect{
	height:650px;
}
#kcIncorrect-Last{
	height:650px;
}
/*End*/


#loadingPer{

               

                margin: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-right: -50%;

    transform: translate(-50%, -50%);

                font-weight: bold;

                color:#383434;

}

/*added by baban*/
.popupzoom .fa-search-plus{
	color:#fff!important;
	cursor:pointer;
}
.vertical-middl{
	background-color: #5a5656 !important;
	height:25px;
	width:25px;
	margin: 0;
    position: absolute;
	right:0;
	bottom:0;
	opacity:0.7;
	
}
.popupzoom{
	font-size:15px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	color:white;
  }
/*end by baban*/


.show1{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	margin-top:5px;
}


.img-show1{
    width: 55%;
    height:100%;
    background: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
	
	max-height:500px;
	
	
}

.img-show1 p span{
    position: absolute;
    top: 1px;
    right: 20px;
    z-index: 99;
    cursor: pointer;
	
	color:white; 
	font-size:24px !important;
	
	
}
.img-show1 p{
	
background-color: #005796;
height: 38px;
border-bottom: 2px dotted #e5e5e5 !important;
}
.img-show1 img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	margin-top:30px;
	padding: 15px;
	
	padding-bottom: 38px !important;
}
/*end code mithlesh*/
html{
}
body{
   // padding-top: @bodyPaddingTop;
    //padding-bottom: @bodyPaddingBottom;   
    //font-family: "Open Sans";
    font-family: 'Roboto', sans-serif;
    //font-weight: 600;
    font-style: normal;
    // background: url(../Eng/assets/media/images/bgPattern1.png);
    background-repeat: repeat;
    overflow-x: hidden;
    background-color:#fff;
    padding-bottom: 60px;
}


b{
    font-weight: 600;
}
//.padder{
//    margin-top:2px;
//}
h1, h2, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    color:white;
}
.headtitleh1{
    font-size: 35px !important;
    font-weight: 700;
    line-height: 1.2;
}
.headtitleh3{
    font-size: 18px;
    margin-bottom: 10px;
}
.headtitleh4{
    color: white;
    margin-bottom:45px;
    font-size:12px;
}
h3{
   font-size: 26px;
   font-weight: 400;
   margin-top: 0px;
   margin-bottom: 0px;
}
.dummyColor{
    color:@focuscolor;
}
/* Added for 508 Focus set up */
h1:focus{
    outline: 1px solid @focuscolor;
}
h2:focus{
    outline: 1px solid @focuscolor;
}
h3:focus{
    outline: 1px solid @focuscolor;
}
.clscongras:focus{
    outline: 1px solid @focuscolor;
}
h4:focus{
   outline: 1px solid @focuscolor;
}
h5:focus{
    outline: 1px solid @focuscolor;
}
h6:focus{
    outline: 1px solid @focuscolor;
}

//.menuContainer .menuChapter{
    //outline:1px solid @focuscolor;
//}
p:focus{
    outline: 1px solid @focuscolor;
}
a .modelimageheader:focus

{
   
     //outline :1px solid @focuscolor;
        //border: thin solid @focuscolor;
        border:1px solid @focuscolor;
        //outline: 1px solid @focuscolor;
   
}
a img:focus
{
      //outline :1px solid @focuscolor;
      border: thin solid @focuscolor;
    //outline: 1px solid @focuscolor;
}

.modelimageheader:focus{
      border :thin solid @focuscolor;
      
}
span:focus{
   outline: 1px solid @focuscolor;
}
i:focus{
    outline: 1px solid @focuscolor;
}
img:focus{
     outline: 1px solid @focuscolor;
}

button:focus{
    outline: 1px solid @focuscolor;
}
//video:focus{
    //outline: 1px solid #ff6317;
//}
i:focus{
    outline: 1px solid @focuscolor;
}
.instruction:focus{
    outline: 1px solid @focuscolor;
}
#skip:focus
{
    outline: 1px solid @focuscolor;
}
ul li:focus{
	 outline: 1px solid @focuscolor;
}

ul li a:focus{
	 outline: 1px solid @focuscolor;
}

ol li:focus{
      outline: 1px solid @focuscolor;
}
ol li a:focus{
      outline: 1px solid @focuscolor;
}

#horizontalTab .nav-tabs > li.active{
    outline: 1px solid @focuscolor;
}

.nav-pills > li.active{
    outline: 1px solid @focuscolor;
}

.left carousel-control img{
     outline: 1px solid @focuscolor;
}

.right carousel-control img{
     outline: 1px solid @focuscolor;
}
#replay:focus{
    border: 1px solid @focuscolor !important;
}
#next:focus{
    outline: 1px solid @focuscolor !important;
}
#back:focus{
    outline: 1px solid @focuscolor !important;
}

#mute_unmute:focus{
    outline: 1px solid @focuscolor;
}

#play_pause:focus{
    outline: 1px solid @focuscolor;
}

#playbutton:focus{
    border: 1px solid @focuscolor;
}

.menuChapter:focus{
    border: 1px solid @focuscolor;
}


/*End of Focus set up for 508 */

/* Added by Ketaki on 15th Sep 2017 to hide form input checkbox and display custom checkbox */



/*.checkbox input[type="checkbox"]
{
	opacity:0;
}*/

input[type="checkbox"]:focus
{
	 border: 1px solid #ff6317;
}

.squaredTwo {
width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    left: 4px;
    top: 4px;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }    
  }
}
/*End of Focus set up for 508 */


.modal-backdrop.in {
    opacity: 0.6;
}
.courseLogo{
    //width:auto;
    //float:right;
    background: #ebebeb;
    height:49px;
}
.courseheadingdiv{
    padding-top: 20px;
   // width: auto;
    float: left;
    font-weight: 600;
}
.courseHeading{
    font-size: 24px;
    color: #fff;
    float: left;
    padding-top: 15px;
}


p ,  a{
    font-size: 15px !important;
}

.instruction i{
	font-size: 16px !important;
}

ul li {
  /*font-size: 18px;
  line-height: 30px;
  margin-left:20px;*/
  font-size: 15px;
  line-height: 25px;
 margin-left:30px;
}

.panel-body ul li {
  /*font-size: 18px;
  line-height: 30px;
  margin-left:20px;*/
  font-size: 15px;
  line-height: 25px;
 margin-left:0px !important;
}

#horizontalTab ul li {
  margin-left:1px !important;  
}

ol li {
  font-size: 15px;
  line-height: 30px;
  margin-left:30px;
}

.dropdown-menu>ul>li{
  margin-left:0px;
 
}
.dropdown-menu>ul>li>a{
 padding:0 3px;
}



.selectCustumColor{
 width:100% !important;
}
.img-center{
    margin: 0 auto;
}
.titleheadpaddtop{
    position: absolute;
    top:30%;
}

/* start of Moretext functnality css */
.dolessmore { overflow: hidden; }

.dolessmoreblock { position: relative; }

.lm-control {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #da993f;
    text-align: center;
}
.lm-control a{
    color:#fff;
}

.dlmexpand { 
    padding-bottom: 25px !important; 
}

/*End of Moretext functnality css*/
.instruction{
    float:left;   
    color:@CommonColor;
    font-style: italic;
}
.lgPlayerHolder{
    display: inline-block;

}
.controlBtnLeft{
    float: left;
    padding-top: 5px;
    padding-left: 15px;
}
.controlBtnRight{
    float:right;
    padding-top: 5px;
    padding-right: 15px;
}
.controlBtn{
    display: inline-block;  
   // background: #b4121b;
    //height: 46px;
    //margin-top: 4px;
    //border-radius: 6px;
    //padding: 0 6px;
}
.navBtn{
    display: inline-block;    
    padding: 0px; 
    background: transparent;
    border: none;
    color: #918f8f;
    font-size: 16px;

    img{
        width:45px;
        border-radius:100%;
    }
}
#back{
   // background: url('../Eng/assets/media/images/back.png') no-repeat; 
    //-webkit-background-size: cover;
    //-moz-background-size: cover;
    //-o-background-size: cover;
  //  background-size: cover;
    //height: 25px;
    //width: 35px;

}

#back:hover{
    //color:#09699c;
    //background: url('../Eng/assets/media/images/back_hover.png') no-repeat; 
    //-webkit-background-size: cover;
    //-moz-background-size: cover;
   // -o-background-size: cover;
   // background-size: cover;
    //height: 25px;
    //width: 35px;

    
}

/*.fa-circle::before
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

}*/

#next{
    //background: url('../Eng/assets/media/images/next.png') no-repeat; 
  //  -webkit-background-size: cover;
  //  -moz-background-size: cover;
  //  -o-background-size: cover;
   // background-size: cover;
    //height: 25px;
    //width: 35px;
}

#replay{
   //  -webkit-background-size: cover;
   //  -moz-background-size: cover;
   //  -o-background-size: cover;
     //background-size: cover;
   //  font-size:17px;
}

#replay:hover{
    //color:#09699c;
}

#next:hover{
   // color:#09699c;
   // background: url('../Eng/assets/media/images/next_hover.png') no-repeat; 
    //-webkit-background-size: cover;
    //-moz-background-size: cover;
    //-o-background-size: cover;
    // background-size: cover;
    // height: 25px;
     //width: 35px;
}
//.fafont{
 //   font-size:25px;
//}
.backimageinstr{
        background: url(../Eng/assets/media/images/module00/bg_big.jpg) center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position:100% 100%;
    position:relative !important;
}
.marginbottom{
    margin-bottom:17%;
}
.enableBtn{
    background-position: 5px 5px 5px 5px !important; 
}
.disableBtn{
    background-position: 5px 5px 5px 5px !important; 
}
#transcript{
    //background: url('../Eng/assets/media/images/transcript.png') no-repeat; 
   // font-weight: 700;
    //font-size: 18px;
    //padding-top: 4px;
   // width: 60px;
   // height: 50px;
   // margin-left:5px;

}

#transcript:hover{
    //background: url('../Eng/assets/media/images/transcript_hover.png') no-repeat; 
    //font-weight: 700;
    //font-size: 19px;
    //padding-top: 4px;
    //width: 79px;
    //height: 50px;
    color:#09699c;

}
.imglogoheigh img{
    height:30px;
}
.paddtopleft{
    padding-top:1%;
    padding-left:2%;
}
.imgesabso img{
  position: absolute;
    right: 8%;
    bottom: 0;
    /* top: 15%; */
    z-index: 999999;
    height: 90%;
}
.containpadd{
     //padding: 10%;
   // background: white !important;
    margin: 0;
    padding: 5% 5% 0 2%;
}
.ftnsize1 p{
    font-size:15px !important;
}
.containpadd ul li{
    font-size:14px !important;
    line-height: 1.7;
    list-style: outside none none;
}

.containpadd p a{
    font-size:15px !important;
    line-height: 1.7;
    list-style: outside none none;
}
.maindiv1page{
    background:white;
    margin: 7% 0 7% 2%;
    border-radius:10px;
    padding-left: 2%;
    padding-top: 2%;
    padding-bottom: 3%;
}
#helpBtn{
    //background: url('../Eng/assets/media/images/help.png') no-repeat; 
    //font-weight: 700;
    font-size: 16px;
    //padding-top: 2px;
    //height: 49px;
    //width: 62px;
   // margin-top: -3px;
    //margin-right: 24px;
    //margin-right: 5px;

}
#helpBtn:hover{
    //background: url('../Eng/assets/media/images/help_hover.png') no-repeat; 
    color:#09699c;
    
}
.navBtnMob{
    display: inline-block;
    background: #cc2229;
    color:#fff;
    padding: 0px 12px 0px 12px;
    border-radius: 14px;

}
.btnMobCon{
    display: inline-block;
    background: #000;

}
.floatingBtn{
    display: inline-block;
}
.floatBtn{
    display: block;
    width: 48px;
}
.instruction1{
    float:left;

    margin-top: 1%;
    margin-bottom: 1%;
    color: #8F6DA8;
    font-size: 16px;
    //padding-left: 2%;

}
.instructionIcon{    
    display: table-cell;
    color:black;
    width:13px;
    padding-left: 10px;
}

.instructionText{
    display:table-cell;
    padding-left:20px;
    font-weight:italic;
    padding-top: 10px;
    padding-left:10px;
}
.QuestionText{
    display:table-cell;
    // padding: 5px 10px;

}
.questionMCQ{
    //display:table-cell;
    font-size:14px;
    // padding: 5px 10px;

}

.QuestionText_splash{
    //display:table-cell;
    // padding: 5px 10px;

}

button, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, a:focus {
    outline:none;
   // color:#918f8f !important;
}
.close:focus, .close:hover{
    opacity: 1 !important;
}

.pageHeading{

    margin-top: 10px !important;
}
.nopadding{
    padding: 0px !important;    
}
.table{
    margin-bottom: 0px !important;
}
.panel-heading{
    margin: 0 !important;
}

.panel-body {
      padding: 6px 0px 0 0;
}

.selectCustumColor {

}
.btn-defaultColor{
    color: #ffffff !important;
    background-color: #09699c !important;
    border-color: #ccc !important;
}
.btn-defaultColor:focus{
    color: #ffffff !important;
}

.visitedTick{
    font-size: 18px;
    color: #00b300;
    float: right;
    position: absolute;
    right: 3px;
    top: 17px;
}
.visitedTickMod{
    right: 5px;
    top: 5px;
}
.visitedTickTabCon{
    margin-right: 10px;
    font-size: 18px;
    color: #00b300;
    float: right;

}
.ppeAdujust{
    position: static !important;
}
#play_pause{
   // padding-top: 3px;
  //  padding-right: 0px;
}
.icon{
   // font-size: 18px;
}
.iconNav{
    font-size: 22px;
}
.senario_splash{
    text-align:center;    
    //padding:5px;
    //margin-top: 30px;    
    //border-radius: 4px;
    //border-left: 8px solid !important;
    //margin-left: -15px;
}


.senario{
    text-align:left;    
    //padding:5px;
    //margin-top: 30px;    
    //border-radius: 4px;
    //border-left: 8px solid !important;
    //margin-left: -15px;
}
.senarioIcon{

    width: 6px;
    height: 89px;
    margin-top: -8px;
    float: left;
    display:table-cell;
    border-radius: 8px;    
    padding-left: 7px;
    padding-top: -20px;   
    margin-left:-7px;
}


.question{

    text-align:left;    
    //padding:5px;
    //margin-top: 30px;
    display:block;
    width: 100%;

}
.QuestionIcon{

    width: 50px;
    height: 50px;

    float: left;
    display: table-cell;
    border-radius: 100%;
    font-size: 40px;
    padding-left: 17px;
    padding-top: -2px;

}
.imgShadow{
    border-style: solid;
    border-width: 1px;
    border-color: rgb( 38, 30, 165 );
    border-radius: 10px;    
    opacity: 0.8;
    box-shadow:1px 1px 3px 0px #555;
}

.moduleBullet{
    background-image: url("../Eng/assets/module01/chapter01/media/images/topic1/d_t1_scr_02_a_bullet.svg");
    width: 35px;
    height: 38px;
    background-repeat: no-repeat;
    display: table-cell;
    background-position: 0px 3px !important;
    float: left;
}
/* added by Ketaki N for selected state for click and reveal*/

.clickable
{
	text-decoration:none;
	color:transparent;
}
.clickable:hover
{
	text-decoration:none;
	color:transparent;
}




.list2{
    display: table-cell;
    padding-left: 5px;
    padding-top: 9px;
}

.imgBox{	
    display: table-cell;    
}
.imgBox1{	
    display: table-cell;    
}
.textBox{
    display: table-cell;
    padding-left: 5px;
    padding-top: 5px;

}
.durationBox{
    color: #2f2f2f;
    background-color: #f8fdff;
    border-color: #2cc2e9;
    text-align:center;
}




.factoid {
    padding: 0 15px 10px;
    margin: 20px 0 20px 15px;
    border: 1px solid #EAEAEA;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    border-radius: 3px;
}
.factoid-note::before {
    content: "\270f";
    color: #004577;
    border-color: #004577;
}
.factoid::before {
    font-family: 'Glyphicons Halflings';
    float: left;
    margin-top: -7px;
    margin-left: -29px;
    margin-right: 9px;

    background-color: #FFF;
    border-radius: 50%;
    border: 2px solid;
    padding: 13px;
}
.factoid-note h3 {
    background-color: #0067b1;
}
.factoid h3 {
    margin: 0 -15px 10px;
    padding: 8px 0;
    color: #FFF;
}

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.expandBtn{
    display:none;
}


// to hide video control button - added on 14th Sep 2017

//video::-internal-media-controls-download-button {
   // display:none;
//}

//video::-webkit-media-controls-enclosure {
    //overflow:hidden;
//}

//video::-webkit-media-controls-panel {
    //width: calc(100% + 30px); /* Adjust as needed */
//}



.header {
    width: 100%;
   //max-height:40px !important;
    //background: #667AAC;
    //min-height:70px;
    .courseTitle{
       
    }
    .logo{
        min-height:60px;
        min-height: @headerHeight;

        line-height: @headerHeight;
        // background-image: url("../ES/assets/logo.jpg");
    }
    .courseTitleMobile{
        font-size: 20px;
        margin-left: 10px;
        line-height: 30px;
        color: #fff;
    }
}

.courseTitle{
    padding-top: 12px;
    padding-bottom: 12px;
    }
.clickTab{
    text-align: center;
    margin-bottom: 15px;
    float: left;
    margin-left: 16px;
    margin-right: 16px;
    width: 130px;
}

.imgWrapper {
    position: relative;
}


.modalBody{
    padding-left: 10px;

}

.bullet1{
    background-image:url("@{images}/arrow.png");
    width:15px;
    height:11px;
    background-repeat: no-repeat;
    display:table-cell;
    background-position: 0px 3px !important;
}


.bullet3{
    background-image:url("@{images}/bullet3.png");
    width:4px;
    height:4px;
    background-repeat: no-repeat;
    display:table-cell;
    background-position: 0px 9px !important;
}

.bullet2{
    background-image:url("@{images}/smallarrow.png");
    width:4px;
    height:4px;
    background-repeat: no-repeat;
    display:table-cell;
    background-position: 0px 8px !important;
}

//.arrow::before{
// content:url("@{images}/arrow.png");
//}
.list{
    display:table-cell;
    padding-left: 5px;
}

li.large-arrow {
    list-style-image: url("@{images}/arrow.png");
    //  padding: 5px 0;
    text-align: left;

}
li.small-arrow{
    list-style-image: url("@{images}/smallarrow.png");
    //padding: 5px 0;
    text-align: left;
}
.menuIconHolder{
    //background: url('../Eng/assets/media/images/rightHeader.png');
    background-repeat: no-repeat;
    float: right;
    //height: 50px;
  // width: 119px;
    //padding-right: 15px;
    //padding-top: 10px;   
}
.topBtnIcon{
    //color:#231f20 !important;
    float: right;
    cursor: pointer;
    width: 100%;
    height: 50px;
    //background:#b4131b;
    position:relative;
    background: transparent;
    border: none;
}
//.topBtnIcon:hover{background-color: rgba(180, 19, 27, 0.5) !important;}
.menu_btn{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.menu_btn img{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.branding{
    position: relative;
    height: 49px;
    width: 100%;

}
.tickIcon{
    display:none;
}
//heading logo and title create by shankar
.topBarContainer{
    padding-left:50px;
    padding-right:100px;
}
.courseLogo{
    //display: table-cell;
    img{
       height: 40px;
    /* float: right; */
    padding: 1%;
    }
}
.menutext{
    padding: 12px 0 12px 5%;
    background: gray;
    color: white;
    font-size:18px;
   // margin-left: 12%;
}
.transcriptText p{
    padding: 3% 2% 0 8%;
    font-size: 15px !important;
    margin-bottom: 0;
}
.documentBtn{
	position: relative;
	z-index: 999999;
	width: 35px;
	top: 6px;
	left: 170px;
 }

.tabbable{
   //cursor: pointer;
   
}
.clscongras{
    font-size:60px;
    font-family: 'Roboto', sans-serif;
}
.copyrite
{
    position: absolute;
    bottom: 1%;
    padding-left: 10%;
    color: #f5f5f5;
    right: 1%;
    z-index: 99999999;
}

#menucloseNav{
    position: absolute;
    top: 0;
    left: -14%;
}

.copyrite1 {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: white;
    height: 25px;
    position: absolute;
    bottom: 100px;
    font-size: 16px !important;
    text-align: left;
    width: 350%;
    right: -126%;
}

.colorskyblue{
   // color:skyblue;
    padding-top: 7px;
    display:table-cell;
}
.colorskyblue p{
font-size:14px !important;
  font-family: 'Roboto', sans-serif;
margin:0;
 font-style: normal;
 margin-left:7px;
}
.menurightoptioncolor{
    background:#e5e5e5;
}
.courseName{
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
    color:#de362f;   
    font-weight: 600;
    font-size: 18px;
}
.menurightside{
    position:absolute;
    left:-50px;
    top: 0;
    bottom: 0;
    width:50px;
    background:@CommonColor;
   // padding-top: 2%;
    z-index:999999;
    overflow-y: auto;
    overflow-x: hidden;
}
.menurightoption{
    width:100%;
    height:50px;
    color:white;
    position: relative;
}
.menurightoption a{
    //color:white;
    //text-decoration:none;
}
.menuContainer{
    background:#ffffff;
}
.menuHr{
    margin-bottom: 0px;
    margin-top: 0px;
    border: 1px solid #de362f;
}
.menu-tabs{

    li{
        width:50%;
        text-align: center;
    }

}

.menuContainer {
    font-size: 16px;
   // display:none;
    .menuTitle{
        padding-top: 35px;
        padding-left: 10px;
        // margin-left: 20px;
        padding-bottom: 5px;
    }
    //.menuListContainer{
      //  position: absolute;
      //  overflow-y: auto;
      //  overflow-X: hidden;
   // }
    .menuCloseHolder{        
        cursor: pointer;
        position: absolute;
        right: 5px;
        top: 5px;
    }


    .menuChapter{
       // margin:0px 0px 0px 10px;
        padding: 0;
        
        font-size: 14px;
        display:table;
    }
}
.menuModalBody{
    color:#fff;
    padding-top: 10px;
}
.menuSection{
    padding-left: 10px;
    background-color: #b02228;
    margin: 0px 0px 0px 5px;
    width:90%;
}
.menuModule{
    color:black !important;
}
.menuModule{
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    .menuChapter{
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .currentPage{
        color:#f4e27a;
    }
}

.resourcePanel{
    width:298px;
    font-size: 16px;
    display:none;

    .ResourcesTitle{
        padding-top: 35px;
        padding-left: 10px;
        border-bottom: 1px solid;
        margin-left: 20px;
        padding-bottom: 5px;

    }
    .resourceHolder{
        position: absolute;

    }

    .ResourceClose{
        float: right;
        border: 1px solid;
        top: 12px;
        position: relative;
        padding: 6px 5px 6px 10px;
        background: #b02228;
        border-radius: 12px 0 0 12px;
        font-size: 12px;
        margin-right: 0;
        border: none;
        font-weight: 100;
        text-shadow: none !important;
    }
}

.resourceLink{
    padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-right: 10px;
    // border-bottom: 1px solid;
    margin-left: 20px;
    list-style-type: none;
    color: #000;
    a{
        color:#000;
        font-size: 16px;
    }
    :hover{
        text-decoration:none;
    }
    :focus{
        text-decoration:none;
    }
}

#helpHolder.fade .modal-dialog, #resourcesHolder.fade .modal-dialog,#menuContainer.fade .modal-dialog {
    transform: translate3d(0, 20%, 0);
}
#helpHolder.in .modal-dialog, #resourcesHolder.in .modal-dialog, #menuContainer.in .modal-dialog  {
    transform: translate3d(0, 0, 0);
}
.transcriptContainer {
    position: fixed !important;    
    bottom: 30px;
    display: none;
    display:none;
    position: fixed;
    right: 0;
    left: 0;
    .transcriptText{
        overflow: auto;
        float: left;       
        height: 70px;
        cursor: default;
        width:96%;
        border-radius:5px;            

        p{
            color: #fff;       
            padding:0px 5px 0px 10px;     
        }
    } 
    .transcriptclose{  
        float: right;
        cursor: pointer;
        padding-top: 10px;
        padding-right: 14px;
        text-align: center;
    }

}

.arrow_box_Trans {
    position: relative;
    background: #fff;   
    min-height: 70px;
    bottom: 24px;
    border-radius:5px;            
}

.helpModal{
  //  background: #fde688;
    border-radius: 0;
}
.helptTitle{    
    padding: 0;
    border-bottom:none;
    margin-left: 20px;
    border-color:transparent;
    background: transparent;
}
.helpTitleText{
    font-size: 20px;
    font-weight:600;
    padding-left: 5px;
    color:#ffffff;
}
.helpBody{
    padding-top:0;
    padding-bottom: 20px;
}
.helpTableIconHolder{
    background:#b4121b;
    border-radius: 2px;
    height: 40px;
    width: 45px;
    display: table-cell;
    vertical-align: middle;
    .icon{
        color: #ffffff;
    }
}
table .icon{
    color:#000;
}

.helpCloseHolder{    
    border: none;
    margin-top: 10px;
}
.helpClose{
    font-size: 12px !important;
    font-weight: 100 !important;
    text-shadow:none;
}

.accessibilitypopup {
  color: #FFF;
position: absolute;
bottom: 5%;
padding-left: 14.5%;
}
.clickable {
    cursor: pointer;
}
.helpText{
    color: #000;
    overflow: auto;
    padding: 10px;

    margin-bottom: 10px;
    background-color: #2c3133;
    padding-bottom: 20px;
    padding-top: 20px;
}
.helpHrLine{
    margin-top: 10px;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #e91136;

}

.helpTable{    
    margin: 0 auto;
    overflow: auto;
    height: 100%;
    position: relative;
}


.helpResourseIcon{
    background: #fecc00 !important;
    color: #000;
    padding: 5px 10px;
    font-weight: 600;
}
.que{
	background: #E2E2E2;
  width: 100%;
  padding-left: 0px;
  margin-bottom: 10px;
  //margin-left:1.5%;
  color: #000000;
  padding: 22px 20px;
 
  
}
.queIcon{
    display: table-cell;
    font-size: 36px;
    font-weight: 700;
    background: #169896;
    padding: 0px 12px;
    color: #fff;
}
.queText{   
    display: table-cell;    
    //padding-left: 15px;
    padding-right:14px;
    padding-top: 3px;
    font-size: 20px;
    vertical-align: middle;
	text-align:left;
}

.helpTable{
    border: none;
}
td:first-child{
    width:60px; 
    text-align:center !important;
    padding-left: 0px !important;

}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
    border: none;
    vertical-align: middle;
}

tr:nth-child(even) {}
tr:nth-child(odd) {}

.content_areat {
    //height:@playerHeight - ( @footerHeight );
    width: 100%;

    position: absolute;
    top: 0;
    .content_area_bg{
        left:0px;
        top:@headerHeight;
        width: 100%;

        position: absolute;
    }
    .testContent{
        position: absolute;
        left: 540px;
        top: 100px;

    }
    .paragraph{
        ul{
            padding-left: 20px;
            list-style-type: square;
        }
    }


}
.dropdownpaddtop{
    padding-top:5%;
}
.footer{
    background:#444444;
    width: 98%;
    padding-right: 20px;
}
.footer .container-fuild{
    //padding-left:50px;
    //padding-right:100px;
}
.footer-primary {
    max-width: 100%;    
   // border:none !important;    
    bottom:0px;
    min-height: 0px;    
    height: 45px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dc2126+86,dc2126+86,ffffff+87 */
    background:transparent; /* shankar */
    //border-bottom:5px solid #000 !important;
    //background: -moz-linear-gradient(top,  #dc2126 86%, #dc2126 86%, #000000 87%); /* FF3.6-15 */
   // background: -webkit-linear-gradient(top,  #dc2126 86%,#dc2126 86%,#000000 87%); /* Chrome10-25,Safari5.1-6 */
    //background: linear-gradient(to bottom,  #dc2126 86%,#dc2126 86%,#000000 87%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc2126', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
.footer-secondary{
    height: 0px;
    background: #fff;
}
.namemark{
    padding-top:15px;
    color:white;
    font-size:12px;
}
.padder .custumMultiSelect{
    padding-left: 0;
}
.custumMultiSelect{
    margin-bottom: 0;

}
.cntBtn{
    background:@CommonColor;
   // font-weight: 600;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
   // border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 0px;
   opacity: 1;
}
//.cntBtn:hover,.cntBtn:focus {
 //   background:rgba(180, 19, 27, 0.5) !important;
//}
//.submitButton{        
   // padding: 8px 40px;
   // background: #ffffff;
  //  color:#000;
  //  font-weight: 600;
  //  font-size: 18px;
  //  margin-bottom: 10px;
  //  margin-top: 10px;
  //  border-radius: 0;
//}
.submitButton:hove{
    color:#000 !important;
}
.submitBtnHoder{
    text-align: center;
}
.panelFeedback{
   // background:none;
    .feedbackHeading{
        font-weight: 700;
        padding-bottom: 10px;
        font-size: 15px;
    }
    .panelFeedbackCorrect{
        color:green;
    }
    .panelFeedbackIncorrect{
        color:#cc2229;
    }

}

.btn-Bottom-group > .btn{
    border-radius: 0 !important;
    padding: 0px 13px 0px 14px;

}
.progressBgBox{
    background-color: #2f2f2f !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
    height: 40px;
}
#leftButton{

}
// #pageCounter{
   // float: left;   
   // color: #fff;
    //float:left; 
   // height:50px;
   // width:100px;
    //background-color:#742228;
   // padding-top: 16px;
   // font-size: 14px;
  //  cursor: auto;
//}

.controlBar{
      padding-top: 12px;
     //border-bottom:5px solid #000 !important; //shankar change
    .control{
        //height: 50px;
       // width: 50px;
       // border-radius: 0px;
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    margin: 0 1%;
    }
    .visiablehidden{
       width: 67%;
       visibility: hidden;
    }
    .controlcounter{
      //  width:100px;
        //text-align: center;
    }
    ul {
        margin: 0;
        // padding-top: 12px;
        list-style-type: none;
        // text-align: center;
        li{
            display: inline-block;

        }
        a.control{
            padding-left: @navPadding;
            padding-right:@navPadding;
            .icon{
                min-width:@navButtonWidth;
                min-height:@navButtonHeight;
                display: inline-block;
                cursor: pointer;
                padding-top: 0px;
                //   border:1px solid red;
                font-size:16px;
                color:#fff;

            }
            .menu{
                &:hover {

                }
            }




            .help{
                &:hover {

                }
            }

            .download{

                &:hover {

                }
            }


            .transcript{

                &:hover {

                }
            }


            .mute{


            }


            .unmute{


            }


            .replay{

                &:hover {

                }
            }


            .play{

                &:hover {

                }
            }


            .pause{

                &:hover {

                }
            }


            .back{
            }


            .next{


            }


        }


        .iconSeperator{

            display: inline-block;
            // padding-top: 11px;
            padding-left: @navPadding*2;
            padding-right:@navPadding*2;
            .iconSeperatorIng{
                width:4px;
                height:28px;
                background-image: url("@{images}/navigation/png/iconSeperator.png");
                display: inline-block;
                position: absolute;
                top: 20px;
                opacity: .5;
            }


        }

        .pageCounterBar{
            width:60px;
            height:45px;
            //border:2px solid #FFFFFF;
            display: inline-block;
            padding-left: @navPadding;
            padding-right:@navPadding;
            .border-radius(2px);
            .pageCounterBg  {
                position: absolute;
                top: 25px;
                width: 60px;
                height: 25px;


            }
        }
    }
}

.progressBar{
    position: relative;
       padding-top: 10px;

    .progressBarBg{
        background: #000;
        .progress{
            width:0%;
            height:5px;
            top:0px;
            background: #b4131b;
            .border-radius(2px);
            transition: all 0.5s ease;
            margin-bottom: -1px;
        }
    }
    .progressBarTitle{
        width:331px;
        height:20px;
        position: absolute;
        top:5px;
        color:#fff;
        text-align: cetner;
        font-size:12px;

    }


}

.progressBarLg{

    margin-top: 22px;
    margin-left: 30px;
    margin-right: 30px;

    .progressBarBgLg{
        background:#275e96;
        .progress{
            width:0%;
            height:3px;

            top:0px;
            background: #ee7c24;
            .border-radius(2px);
            transition: all 0.5s ease;

        }
    }
    .progressBarTitle{
        width:331px;
        height:20px;
        position: absolute;
        top:5px;
        color:#fff;
        text-align: cetner;
        font-size:12px;

    }


}

// Accessibility focus

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    //outline:none !important;
    outline: 1px solid @focuscolor;
}
.tabable.active.focus, .tabable.active:focus, .tabable.focus, .tabable:active.focus, .tabable:active:focus, .tabable:focus, .tabable:focus {
    //outline:none !important;
    outline: 1px solid @focuscolor;
}
button.active.focus, button.active:focus, button.focus, button:active.focus, button:active:focus, button:focus, button:focus {
    //outline:none !important;
   border: 1px solid @focuscolor;
}
/*
a.active.focus, a.active:focus, a.focus, a:active.focus, a:active:focus, a:focus, a:focus {
    //outline:none !important;
    border: 1px solid #ff6317;
}
a.focus{
      border: 1px solid #ff6317;
}
*/
.icon-podcast{
    cursor:pointer;
}
.bullets{
    width: 8px;
    height: 8px;

}
.moveRight-0{
    padding-left: 0px;
}
.moveRight-5{
    padding-left: 5px;
}
.moveRight-10{
    padding-left: 10px;
}

.moveRight-15{
    padding-left: 15px;
}
.moveRight-20{
    padding-left: 20px;
}

.moveRight-25{
    padding-left: 25px;
}
.moveRight-30{
    padding-left: 30px;
}

.moveRight-35{
    padding-left: 35px;
}

.moveRight-40{
    padding-left: 40px;
}


.moveRight-45{
    padding-left: 45px;
}

.noMargin{
    margin:0px !important;
}
.arrow{
    background-image: url("@{images}/templates/rect.png");
}
.rect{
    background-image: url("@{images}/templates/arrow.png");
}
.removePadding{
    padding-left:4 ! important;
}
.icon-bg{
    padding: 5px;
    background: #000;
    border-radius: 5px;
    height: 31px;
}
.rightBottom{
    position:fixed;
    right:10px;
    bottom:70px;
}
.top-Icon{
    padding-top: 10px !important;

}

.iconTopColor{
    color: #014282 !important;
}

h5{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.pageSlider{
    box-shadow: 3px 7px 5px 1px rgba(173, 168, 168, 0.5) inset;;
    border:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #ad8c8c;
    width:500px;
    height:10px;
    top:606px;
    position:absolute;
    left:230px;
    .interval{
        transition: all .1s ease-in-out; 
        position: absolute;
        width: 16px;
        height: 16px;
        background: #344164 none repeat scroll 0% 0%;
        box-shadow: 2px 0px 9px rgba(230, 214, 214, 0.8);
        .border-radius(8px);
        bottom: -2px;
        &:hover {
            transform: scale(1.2);
            bottom: -3px;
        }

    }
}

.vertical-center{

}
.padder{
    //padding:2px;
    ul{
        //margin-top: 0;
        // margin-bottom: 10px;
       // padding-left: 0px ;
       // padding-right: 0px ;
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5000;
    background-color: rgba(0,0,0,0.5);
    display:none;
}
.alignCenter{
    margin: 0 auto !important;
}
.centeredPlayBtn{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -204px;
    margin-left: -204px;
}
.playIconHolder{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 0px;
    margin-left: -83px;
    z-index: 5001;
}
.playIconText{
    padding-top: 115px;
    margin-left: -185px;

    text-align: center;
    color: #0065ce;
    width: 500px;
    h2{
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

.wrap() {
    text-wrap: wrap;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.PlayInst{
    color:#000;
    font-size:15px;
}
.instruction{

}

.customModal_Dg{
    
    width:400px !important;
    box-shadow:none !important;
}
.custumTitle{
    background-color:#333333;
   // margin-top:10px; //shankar changes
    padding-left:30px; //Noopur
    padding-right:10px;
    z-index:99;
    //width:100%;
}
.actual_content_area{
//padding-left:50px;
//padding-right:100px;
}

.btn-primary{
    background: transparent;
    background-color:transparent !important;
}

.modal-header{
   border-bottom: 2px dotted #e5e5e5 !important;
    padding:10px 10px;
   /// background-color:#b4131b !important;
    border-radius: 3px 3px 0px 0px;
    margin: 0 !important;
}
.custumheader{
    background:#09699c !important;
}
.correctmodal{
    background:#fff !important;
    padding-top: 17px !important;
} 
.incorrectmodal{
    background:#fff !important;
    color: #b4131b !important;
   padding: 10px;
   margin: 0 !important;
   padding-top: 17px !important;
}
#myModalLabel{
    //color: #b4131b !important;
   // padding: 10px;
   // margin: 0 !important;
}
.modal-title{
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 30px;
    width:90%;
}
.modal-footer{
    padding: 5px !important;
    border-top:0;
}

.customModal-body{
    padding-left: 30px !important;
}
.btn-primary:hover{
    background: transparent;
    background-color:transparent !important;

}

a.thumbnail:hover {
    border-color: #337ab7;
}


.mcqBg {
    //position: relative;
    // background: #000 url("@{images}/templates/KC_BG.jpg")  no-repeat   center center fixed;
}
.questionBG{
    background: rgba(102, 122, 172, 0.54);
    border: none;
    border-radius: 40px 10px;  
	 
    //width: 200px;
    // height: 100px;
}
.audioIconHolder{
    padding: 5px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    background-color: RGBA(0, 0, 0, 0.2);
    z-index: 10025;
    top: 0px;
    left: 0px;

}

.audioIcon{
    font-size:35px;
    width:122px;
    height:125px;
    background-image: url("@{images}/playBtn.png");
    z-index:9999;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background-repeat: no-repeat;

}
.full-image{
    background: url(../Eng/assets/DI-Interior-FairwayVillage-8098.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}
.activityBg{
    background: url(../Eng/assets/media/images/practice/activityBg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    //position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}
.customPanel{
    //background-color: #667AAC;
    color: #fff;
}
.backcolormenu{
    background:#e5e5e5;
}
.close {
    float: right;
    font-size: 24px;
    font-weight: 700;
    opacity: 1;
    line-height: 1; 
   // margin-right:20px;
    text-shadow: none;
    color: #222 !important;
}
.menuclose{
    color: #fff !important;
    margin: 0;
    margin-right: 0px;
    margin-right: 0px;
    margin-right: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.PageHolderUI .fa{
    font-size:8px !important;
}
.bottomhelpmenu{
    position:absolute;
    bottom: 0px;
    display:inline-flex;
    left: 13%;
}
.notransition,
.notransition .slide {
    -webkit-transition-duration: 0 !important;
    -moz-transition-duration: 0 !important;
    -ms-transition-duration: 0 !important;
    transition-duration: 0 !important;

    -webkit-transition-delay: 0 !important;
    -moz-transition-delay: 0 !important;
    -ms-transition-delay: 0 !important;
    transition-delay: 0 !important;
}

.content_area_bg{
    width: 100%;
    //background: #22dddd;
    height:100%;
    position: fixed;
    //   height:@playerHeight - (@headerHeight+ @footerHeight );

}
.loading {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
					 
				 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: transparent !important;;
}

						 
.loading img {
  width: 6%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
									
 

														  
						 
								
				
					   
					  
								  
			  
}


.preLoader
{
    position: fixed;
    z-index: 99999;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Accessibility CSS starts */

.bkaccess{
     //background: #E91136 none repeat scroll 0% 0%;
margin-top: 15px;
border-radius: 0px;
//font-weight: bold;
 font-weight: 500;
color: #fff;

}
.jumpNextBtn:hover{
    background-color: rgba(0, 43, 197, 0.5);
}
.bkaccess:hover{
  background-color: rgba(0, 43, 197, 0.5);
}

.markComplete:hover
{
    background-color: none !important;
}
//.control:hover{
  //  background-color: rgba(180, 19, 27, 0.5) !important;
//}
.modal-footer{
    text-align: center !important;
}

/* Accessibility CSS ends */

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.full {
    background: url('@{images}/templates/KC_BG.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.menu-tabs > li{
    background: #09699c; 
}

.menu-tabs > li > a{    
    background:#b4131b !important;
    color:#fff;
    margin: 0;
    border:none;
}
.menu-tabs > li > a:hover{
    background: #fff !important;
    color:#b4131b !important;
}

.menu-tabs > li.active{

}
.menu-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
   background: #444 !important;
   // border: none;
   color: #ffffff !important;  
   
}

.js-tabcollapse-panel-heading:hover{   
    text-decoration:none;
}


.nav-pills > li{
    //background:white;
   // margin-bottom: 0px;
   // color:#ccc !important;   
    line-height: 1.4;
   // border:1px solid #a20f2c; 
  //  border-radius: 5px;
    width: 100%;
    margin:0 !important;
}

.nav-pills  > li > a:hover{
   // background:#b4131b!important;
   // color:white !important;
}
.nav-pills  > li > a{
    color:#000 !important;
    //font-size:34px;
    //font-weight: 700;
    //font-weight: 600;
    //text-align: center;        
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
   // color: #fff;
   // background: RGBA(243, 49, 26, 0.77) !important;
     background: none!important;    
}
#horizontalTab .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    
    //background: #b4131b!important;
    border:0 solid @CommonColor !important;
    border-bottom: 5px solid @CommonColor !important;
} 
#horizontalTab .nav-tabs  li a{
     color: #000000!important;
}

#horizontalTab .nav-tabs > li > a{
    //border-color:#b4131b!important;
    margin:0;
    border-radius:0px;
    border:none;
   // background-color:white;
   // color:#b4131b!important;
}
.tab-content{
    //background-color: #CFD4D8!important;
   // border: 1px solid #a20f2c!important;
    border-radius: 0px;
    padding: 0;
}

.tabBackGround{
    background: #d5def0;
    margin-left: 0px;
    margin-right: 0px;
    min-height: 240px;
}
.tabTopBar{
    background: #3f2828;;
    // -moz-box-shadow:    inset 0 0 10px #000000;
    // -webkit-box-shadow: inset 0 0 10px #000000;
    //  box-shadow:         inset 0 0 10px #000000;
}


.panel-title:hover {
    cursor: pointer;
}

.panel-titleCustom{
    font-size: 18px !important;
    }
.panel-custom > .panel-bodyCustom > .panel-body img{
    width:80px;
}
.panel-bodyCustom{
    margin-top: -1px;
    border-radius: 3px;
}

.panel-custom > .panel-heading{
    border-radius: 3px;
}

.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
    background: #fff;
    border:4px solid #f1f1f1;
}

.panel-custom > .panel-heading > .panel-title img{
    // width:35px;
}


.flip {
    cursor: pointer;
}
.flip .card.flipped {
    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.5s;
    -ms-transform-style: preserve-3d;
    -ms-transition: 0.5s;
    -o-transform-style: preserve-3d;
    -o-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}
.flip .card .face {
    width: 100%;
    height: 100%;
    z-index: 1;
    backface-visibility: hidden;  /* W3C */
    -webkit-backface-visibility: hidden; /* Safari & Chrome */
    -moz-backface-visibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
    -o-backface-visibility: hidden; /* Opera */    


}
.flip .card .front {
    position: absolute;
    z-index: 1;
    cursor: pointer;
}
.flip .card .back {
    background: blue;
    background: white;
    color: black;
    cursor: pointer;

    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

}
.flipCardHeding{
    width:100%;
    text-align: center;
    font-weight: 600;
    padding: 5px;
    font-size: 15px;

}
.FlipkartThumbnail{
    margin-bottom: 0 !important;
    padding: 5px;
    background: #b9babb;
    margin-bottom: 10px !important;    
}
.FlipkartThumbnailBcak{
    margin-bottom: 0 !important;
    padding: 5px;
    background: #dcaa10;

}
.custumFlipCaption{
    height:230px;
}



// time line 


.cd-horizontal-timeline {
    opacity: 0;
    margin: 2em auto;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'mobile';
    display: none;
}
.cd-horizontal-timeline.loaded {
    /* show the timeline after events position has been set (using JavaScript) */
    opacity: 1;
}
.cd-horizontal-timeline .timeline1 {
    position: relative;
    height: 100px;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
    /* these are used to create a shadow effect at the sides of the timeline */
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
    left: 0;
    //background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
    // background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
    right: 0;
    //background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
    //background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events {
    /* this is the grey line/timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50px;
    height: 2px;
    /* width will be set using JavaScript */
    background: #e4c2c2;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
    /* this is used to create the green line filling the timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #7b9d6f;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    font-size: 1.3rem;
    padding-bottom: 15px;
    color: #383838;
    /* fix bug on Safari - text flickering while timeline translates */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    text-decoration: none;
}
.cd-horizontal-timeline .events a::after {
    /* this is used to create the event spot */
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -5px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    background-color: #f8f8f8;
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    -moz-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
    background-color: #7b9d6f;
    border-color: #7b9d6f;
}
.cd-horizontal-timeline .events a.selected {
    pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
    background-color: #7b9d6f;
    border-color: #7b9d6f;
}
.cd-horizontal-timeline .events a.older-event::after {
    border-color: #7b9d6f;
}


.cd-horizontal-timeline li{
    list-style-type: none
}
.cd-timeline-navigation a {
    /* these are the left/right arrows to navigate the timeline */
    position: absolute;
    z-index: 1;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    /* replace text with an icon */
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
    /* arrow icon */
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../img/cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
    left: 0;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
    right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
    border-color: #7b9d6f;
}
.cd-timeline-navigation a.inactive {
    cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
    background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
    border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
    position: relative;
    width: 100%;
    margin: 2em 0;
    overflow: hidden;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    padding: 0 5%;
    opacity: 0;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
    /* visible event content */
    position: relative;
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
    max-width: 800px;
    margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 {
    font-weight: bold;
    font-size: 2.6rem;    
    line-height: 1.2;
}
.cd-horizontal-timeline .events-content em {
    display: block;
    font-style: italic;
    margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
    content: '- ';
}
.cd-horizontal-timeline .events-content p {
    // font-size: 1.4rem;
    color: #959595;
}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
    line-height: 1.6;
}


@-webkit-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}
@keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}
@keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
.animCheck{
    transform-origin:  left bottom 0px;
    animation-name: checkAnim;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
}

@keyframes checkAnim {
    0%  {

        transform: scale(.7);
    }

    100% {  

        transform: scale(1);
    }
}


.CenteredVideo {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    border: 1px dashed deeppink;
    width:100%;
}
.checkboxImgCustom{
    margin-top: 10px;
}
.checkbox_custom-1{
    //display: inline-block;
    //width:100%;
    //cursor:pointer;

    .question-desc{
        display:table-cell;
        color: #000;
        padding-left: 15px;
        height:100%;
        font-size: 16px;    
		margin-left:50px;	
		
        //padding-top: 5px;
    }
    .imgMrq{
        position: absolute;
        bottom: 10px;
        background: rgba(0, 0, 0, 0.6);       
        width: 88%;
        color: #fff;
        text-align: cenetr;
        padding-bottom:5px;
    }
    .mcqIconHolder{
        background: transparent;
        position: absolute;
        top:-10px;
        left:0;
    }
    .question-nubmer{
        display:table-cell;
        color: #ACD1F2;
        background-color:white;
        border-color: black;
        margin-top:0px !important;

        text-align: center;
        width: 22px;
        height: 22px;
        border-radius: 20px;
        border:1px solid black;
        font-size:16px;
        font-size-adjust:0.35;
        //width: 12%;
        float: left;
        //transform: translateY(50%);
    }
    .question-nubmer-mrq{
        border-radius: 6% !important;    
        width: 22px;
        height: 22px;
    }

    .question-nubmer-selected {
        background-color: white !important;
        border-color: black !important;
        color:@CommonColor;
        padding-left: 0;
    }

    .custQueNo{
        float: left;
    width: 22px;
    height: 22px;
    font-size: 16px;
    /* padding-top: 2px; */
    padding-left: 0px;
    margin: 2px;
    }
}
.MCQselected{

    width: 100%;
}
.single-answer-single-feedback hr {
    border-top-color: #c9e2b3;
}
.carousel-control
{
     //width: 10% !important;
}

.carousel-inner{

   width: 95% !important;
    left:2% !important;
}

.carousel-control.right{
    background-image:none !important;
    //position: relative;
    float: right;
    opacity:1;
    text-align: right;
    top: 40%;
    height: 45px;
    width: 30px;
    img{
        //width:50px;
        padding-bottom: 3px;
        //width:35px;
        margin-right:-18px;
		
    }
}

.carousel-control.left{
    background-image:none !important;
   // position: relative;   
    
    opacity: 1;
    top: 40%;
    float: left;
    text-align: left;
    height: 45px;
    width: 30px;
    img{
       // width:50px;
        padding-bottom: 3px;
        //width:35px;
        margin-left:-17px;
		
    }
}
.left {
	display: none;
}


.glyphicon-info-sign{
    cursor:pointer;
}
.alignBottom{
    position: fixed;
    bottom: -5px;
}
.alignFromBottom{
    position: fixed;
    bottom: 100px;
}
.alignRight{
    position: fixed;
    right: 30px;
}
.alignLeft{
    position: fixed;
    left: 30px;
}

.alignBottomCounter{
    position: fixed;
    bottom: -10px;
    left: -30px;
}

.alignLeftsm{
    position: fixed;
    left: -30px;
}

.alignRightsm{
    position: fixed;
    right: -30px;
}
.addBorder{
    //border:1px solid red;
}
#btnQuizPass, #btnQuiz{

}

.CloseBtn{

    padding:5px !important;

}

.btn-default.active , .btn-default.active:hover, .btn-default.active:active{
    background-color:#5d47d7;
    color:#fff;
}

// .fa-bars{font-size: 28px !important;}

.leftPopup
{
    position: relative;
    width: 250px;
    min-height: 85px;
    padding: 15px;
}

.rightPopup
{
    position: relative;
    width: 250px;
    min-height: 85px;
    padding: 15px;

}

.bubble-left
{
    position: relative;
    width: 250px;
    min-height: 85px;
    padding: 15px;
    background: RGBA(230, 219, 219, 0.89);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.noBackgroud{
    background: transparent !important; 
}

.arrow_box {
    position: relative;
    background: #8ae0d7;
    border: 3px solid #fff;
    min-height:50px;
    width:100%;
    padding:10px;
    margin-top: 10px;
    color:#000;
    border-radius: 10px;
    cursor:pointer;
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 18px;
}
.arrow_box_selected{
    background: #629F63;
}

.arrow_box_selected:after {

    border-right-color: #629F63 !important;

}


/*.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
*/
.arrow_box:after {
    border-color: rgba(215, 61, 76, 0);
    border-right-color: #D73D4C;
    border-width: 10px;
    margin-top: -10px;
}
.arrow_box:before {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 14px;
    margin-top: -14px;
}

.bubble-left:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #f4e27a;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 45px;
}


.bubble-option
{
    position: relative;
    width: 100%;
    min-height: 45px;
    padding: 15px;
    background: #D73D4C;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;        
    border-color:#fff;
    margin:20px;
}

.bubble-option:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent RGBA(230, 219, 219, 0.89);
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 45px;
}


.bubble-right{
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 20px;
    position: absolute;
    top: 5%;
    width: 300px;
    padding: 15px;
    background: #f4e27a;
    border-radius: 10px;
    right: 30%;
    font-weight: 600;
    line-height: 24px;
}



.bubble-right:after
{
    content: url(../Eng/assets/media/images/practice/pointer.png);    
    position: absolute;
    bottom: -50%;
    right: 10px;
}
.info-right{
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 20px;
    position: absolute;
    top: 5%;
    max-width: 300px;
    padding: 15px;
    background: #e4bb22;
    border-radius: 10px;
    right: 30%;
    font-weight: 600;
}

.info-right:before{
    content: "";
    position: absolute;
    bottom: -50%;
    right: 25%;
    width: 25px;
    height: 25px;
    background: #e4bb22;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.info-right:after{
    content: "";
    position: absolute;
    bottom: -85%;
    right: 18%;
    width: 15px;
    height: 15px;    
    background: #e4bb22;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.activityIntro{
    background: #f4e27a;
    font-family: 'Conv_Handlee-Regular',Sans-Serif;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
}
.activityIntro:after
{
    content: url(../Eng/assets/pointer.png);
    float: right;
    top: 30px;
    position: relative;
    right: -70px;
}
.sceneIndicator{
    margin: 0 auto;
    width: 46px;
    padding: 5px;
}
.scenarioSceneHolder{
    position:relative;

    .scenarioIntro{
        background: rgba(244, 226, 122, 0.87);
        font-family: 'Conv_Handlee-Regular',Sans-Serif;
        font-size: 17px;
        font-weight: 600;
        padding: 12px;   
        margin: 0 auto;
        // z-index: 999;
        position: absolute;
        top: 0;
        width: 100%;
        border: 10px solid #fff;
        border-bottom: none;
        z-index: 3;
        padding-bottom: 5px;
    }
    .scenarioSceneImg{
        img{
            border: 10px solid #fff;
            // position: absolute;

        }
    }
    .rightSideChar{

        img{
            position: absolute;
            bottom: 2px;
            width:50%;
            right: 10px;
        }
    } 
    .startAcitivity{
        background: #8ae0d7;
        font-family: 'Conv_Handlee-Regular',Sans-Serif;
        font-size: 20px;
        padding: 10px 15px;
        border-radius: 5px;
        max-width: 275px;
        position: absolute;
        bottom: 13%;
        right: 35%;
        font-weight:600;

        .playActBtn{
            position: absolute;
            width: 50px;
            right: 10px;
            top: -37px;
            cursor: pointer;
            transition: all .2s ease-in-out;
            //animation: glowIt 1s infinite;
            border-radius: 100%;
        }
        .playActBtn:hover{
            transform: scale(1.2);
        }
    }
}
@keyframes glowIt {
    0% {

        box-shadow: 0 0 5px #cc2229;
    }
    25%{

        box-shadow: 0 0 10px #cc2229;
    }

    50% {

        box-shadow: 0 0 15px #cc2229;
    }
    75%{

        box-shadow: 0 0 10px #cc2229;
    }
    100% {

        box-shadow: 0 0 5px #cc2229;
    }
}
.simpleTextImageHolder{
    position:relative;

    .simpleTextImageIntro{
        background: #f4e27a;
        font-family: 'Conv_Handlee-Regular',Sans-Serif;
        font-size: 17px;
        font-weight: 600;
        padding: 15px;   
        margin: 0 auto;
        // z-index: 999;
        position: absolute;
        top: 0;
        width: 100%;
        border: 10px solid #fff;
        border-bottom: none;
    }
    .simpleTextImageBGImg{
        img{
            //border: 10px solid #fff;
        }
    }
    .simpleTextImageRSChar{

        img{
            position: absolute;
            bottom: 0px;
            width:35%;
            right: 105px;
        }
    }  
}


.summaryText{      
    font-weight:600;   

    ul{
        list-style-type:square;
    }
}


.checkBoxBullets{      
    font-weight:600;   

    .featureList ul{
        margin-top: 0;
        padding-left: 2em;
        list-style-type:none;
    }

    .featureList li:before {
        position: absolute;
        margin-left: -1.3em;
        font-weight: bold;
        list-style-type:none;
    }

    .featureList li.tick:before {
        content: '\2713';

    }

}

.nextModuleInfo{

    background: #ccc;
    font-weight:600;
    width: auto;
    float: left;
    padding: 10px 20px;
    border-radius: 3px;
    margin-top: 20px;

}


.scenarioReload{
    float: left;
    img{
        width:120px;
    }

}

.scenarioReloadText{
    position: absolute;
    top: 9px;
    color: #fff;
    font-size: 15px;
    left: 16px;
    cursor: pointer;
}
.lifeLine{
    float:right;   
    .lifeLineTube{
        margin-left:-4px;
        margin-top:-2px;

        img{
            width:32px;
            border-radius: 100%;
            -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.39);
            -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.39);
            box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.39);
        }
    }
}

.activityQue{
    position: relative;
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 20px;    
    top: 5%;
    width: 100%;
    padding: 15px;
    background: #f4e27a;
    border-radius: 10px;        
    font-weight: 600;
    margin-bottom: 5px;
}
.activityQue:after{
    content: url(../Eng/assets/media/images/practice/pointer1.png);
    float: right;
    top: 10%;
    position: absolute;
    right: -12%;
}
.activityInfo{
    position: relative;
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 20px;    
    top: 5%;
    width: 70%;
    padding: 15px;
    background: #e4bb22;
    border-radius: 10px;        
    font-weight: 600;
    margin-bottom: 5px;
    float: right;
}
.activityInfo:before{
    content: "";
    position: absolute;
    bottom: -50%;
    right: 10%;
    width: 25px;
    height: 25px;
    background: #e4bb22;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.activityInfo:after{
    content: "";
    position: absolute;
    bottom: -65%;
    right: 3%;
    width: 15px;
    height: 15px;
    background: #e4bb22;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.optionHolder{
    margin-top:5px;
    .options{
        background: #8ae0d7;
        padding: 15px;
        font-family: 'Conv_Handlee-Regular',Sans-Serif;
        font-size: 20px;
        margin-bottom: 7px;
        width: 100%;
        border-radius: 5px;
        cursor: pointer;
        //transition: all .2s ease-in-out;
    }

}
.circularChar{


    img{

    }
}

.meterPannel{
    background: #cc2229;
    height: 85px;
    position: fixed;
    bottom: 0;
    width: 100%;

    .meter{
        width: 270px;
        position: relative;
        margin: 0 auto;
        bottom: 134px;
        .meterArrow{
            position: relative;
            bottom: 100px;
            width: 100px;
            left: 88px;
        }
    }
    .emptyStar{
        position: relative;
        margin: 0 auto;
        bottom: 330px;
        width: 320px;
    }
}

.feedbackIcon{
    width: 110px;
    margin: 0 auto;
    z-index: 1;
    position: relative;

    img{

    }
}
.modal-content-custom{
    background: transparent !important;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -moz-transition: none;
    -webkit-transition: none;
    border: none;
}
.custumModalBody{
    background: #fff;
    padding: 15px 10px;
    border-radius: 5px;
    margin-top: -40px;
}
.feedbackText{
    text-align: center;
    margin: 25px 0;
    p{
        font-size: 18px;
        margin: 10px 0;
        padding: 0px 10px;
    }
    .feedbackHeading{
        color:#ec4444;
        font-weight:600;
        padding: 15px 0px 0px 0px;
    }
}
.nextScenrioBtnHolder{
    margin: 25px 0px;
    text-align: center;
}
.nextScenrioBtnHolder:before{
    content: " ";
    width: 16px;
    height: 3px;
    margin: 0px 2px;
    vertical-align: middle;
    background-color: #308b81;
    display: inline-block;
}
.nextScenrioBtnHolder:after{
    content: " ";
    width: 16px;
    height: 3px;
    margin: 0px 4px;
    vertical-align: middle;
    background-color: #308b81;
    display: inline-block;
}
.nextScenrioBtn{
    margin: 0 auto;
    background: #8ae0d7;
    font-size: 18px;
    font-weight: 600;
    -webkit-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);

}
.nextScenrioBtn:active{  

    -webkit-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
}
.btnDashIn{
    margin: 0 auto;
    background: #8ae0d7;
    font-size: 18px;
    font-weight: 600;
    margin: 0px 10px 5px 10px;   
    -webkit-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.btnDashIn:active{  

    -webkit-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
}
.col-centered{
    float: none;
    margin: 0 auto;
				   
}
.modal {
    text-align: center;

}



.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
#horizontalTab .modal-dialog {
    vertical-align: top !important;
}
.panel-body .modal-dialog {
    vertical-align: top !important;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.settingPanel{
    background-color:#000;
}

.settingPanel li{
    display:inline !important;
}

.topSettingPanel{
    background-color:#000;
    top: 130%;   
    z-index: 1000;
    display: none;
    float: left;
    width: 40px;
    min-width: 50px;

    padding: 0;
    border-radius: 14px 14px 0px 0px;
    margin-bottom: -1px !important;
    margin-left: -1px !important;
}
.topIcon{
    min-width: 29px;
    //min-height: 37px;
    display: inline-block;
    cursor: pointer;
    padding-top: 0px;
    font-size: 27px;
    color: #fff;
}

.bottomIcon{
    font-size: 28px !important;

}

.star{
    font-size: 26px;
    color:#949494;
}
.starList{
    padding-top: 5px;
}
.starCount{
    color: #fff;
    //position: absolute;
    //left: 99px;
    //top: -3px;
    font-size: 2em;
    padding:0px;
    margin:0px;
}

.starItem{
    opacity:.2;
}

.scenario-modal{
    .modal-content-scenario{
        background:transparent;
        box-shadow: none;


    }
    .modal-backdrop
    {
        opacity:1 !important;
        background-color:transparent !important;
    }
    .modal-content{
        border:none;
        box-shadow: none;
    }
}

.modelimageheader{
    padding: 10px 10px;
    color: white;
    background-color:@CommonColor;
    border-radius:0;
    font-size: 18px;
}

.owl-theme .owl-nav [class*=owl-]{
    margin:0 0 !important;
    font-size: 20px !important;
}

.scenario-q{
    color:#fff;
}

.jumbotron1 {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    border: 1px dashed deeppink;
}

//shankar shitole\
//menu botton
.menu_btn div {
    width: 18px;
    height: 2px;
    background-color:white;
    margin: 4px 0;
}
.paddingtop{
    padding-top:8%;
}
.PipValpaddtop{
   padding-top:40px;
    color:black;
    margin:0;
}
.colorheader{
    color:#b4131b;
}
.paddright{
    padding-left:0px;
    padding-right:15px;
}
.colorwhite{
    color:white;
}
.PipValpaddtop h3{
    font-size:20px!important;
}
.PipValpaddtop h5,p{
    font-size:15px!important;
	//padding-left:1.5%;
	 padding-right:0;
}
.PipValpaddtop ul li{
    font-size:18px;
}
.PipValpaddtop h5{
    color:black;
}
.radio p{
	padding-left:0;
	padding-right:0;
}


.tabvertpaddtop{
    padding-top:30px;
}
.marginmiddle{
    margin:3%;
}
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
.blinker span{
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

.continueIns{
    position:fixed;
    right:95px;
    bottom:55px;
    color:#fff;
    padding: 5px;
    display:none;
    border: 1px solid #ccc;
}
.circleBorder{
    border-radius: 100%;      
    padding: 12px;
    -webkit-box-shadow: 0px 6px 33px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 6px 33px -12px rgba(0,0,0,0.75);
    box-shadow: 0px 6px 33px -12px rgba(0,0,0,0.75);

}

.tabHeading{
    text-align: center;
    height: 50px;
    background-color: #fff;
    -webkit-box-shadow: -4px 4px 10px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -4px 4px 10px -4px rgba(0, 0, 0, 0.75);
    box-shadow: -4px 4px 10px -4px rgba(0, 0, 0, 0.75);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.tabHeadingText{
    padding-left: 10px;
    padding-right: 10px;    
    padding-bottom: 5px;
    padding-top: 5px; 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.vertical-align-centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.tryAgainBtn{
    background: #c0d451;
    color:#000;
}
.tryAgainBtn:hover, .tryAgainBtn:focus{
    background: #c0d451;
    color:#000;
}

.kc-modal-content{
    border-radius: 0;
}
.kcCorrectHeader{
    padding: 10px 0px;
    color:#137a07;
    background: #2b9906 !important;
     border-radius:0!important;
}
.kcIncorrectHeader{
    padding: 10px 0px;
    color:white;
    background: @CommonColor;
    border-radius:0!important;
}
.kcModal-body{
    background:white;
   // border:1px solid;
    border-top: 0;
}
.mcenter{
    text-align:center;
}
.closeFeedback{
    background:#6635cd  !important;
    text-align: center;
}



.flip_card_bg
{
    background-color: #ECF0F1;
    border: 1px solid #CEC8EA;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    height: 288px;
    width: 315px;
}
.callout_right{
    position: fixed;
    top: 20%;
    right: 5%;
    background: #f4e27a;
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 18px;   
    padding: 10px 15px;
}
.jennModal{
    width: 100%;
    button{

    }
    .btn{
        color:#fff;       
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin-top:5px;       
        -webkit-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
        box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7c57cc+1,7851cc+23,6635cd+26,6635cd+26,6635cd+100 */
        background: #7c57cc; /* Old browsers */
        background: -moz-linear-gradient(-45deg,  #7c57cc 1%, #7851cc 23%, #6635cd 26%, #6635cd 26%, #6635cd 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  #7c57cc 1%,#7851cc 23%,#6635cd 26%,#6635cd 26%,#6635cd 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg,  #7c57cc 1%,#7851cc 23%,#6635cd 26%,#6635cd 26%,#6635cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c57cc', endColorstr='#6635cd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


    }
    button:focus, button:hover{
        color:#fff;
    }
    .modal-header{
        color:#fff;
        background: #6635cd;
    }
}
.simpleTextpage{
    ul li{
        margin-left: 20px;
    }
}
#myCarousel{

    // padding: 0px 30px;
    p{
        padding: 5px 10px;
    }
}
.carousel-indicators{
    top: -40px;
    height: 5%;
    //bottom: -50px; 
    //height:30px;
}

//page-level-color pageall

.page-level-color{
    color:@CommonColor;
	margin-left:1.5%;
}

.shankar p {
  margin:0;
  padding:0;
  text-align:center ;
  font-size:16px !important;
  color:#ffffff;
  height:8px;
  transform: rotate(90deg);
  margin-left:12px;
  
}
.shankar{
    position:absolute;
    bottom:110px;
 }
.custumcopyright{
    height:100%;
    position:relative;

 }
 
 .first{
    background-color:#333333;
    margin:18% 0 0 0;
    padding:40px ;
    margin-left:-50px;
}
.second{
    background-color:#013b68;
    padding:40px ; 
    margin-top:-2px !important;
    margin-right: -18px;

 }

.marginTop20{
margin-top : 20px; 
}

.marginTop22{
margin-top : 22px; 
}



/* All Media Query Under this line Upadted- Bhushan Chandak 23 FEB 2017*/

@media only screen and (min-width: 1280px){
#loadingPer{

    top: 45%;

}

.modal-dialog1{
    vertical-align: top !important;
    } 
	
	//For keeping carousel arrows fixed
.carousel-inner{
		//if brmobileview commented Else useheight: 45vh;
height: 60vh;

overflow-x: hidden ;
overflow-y:auto;   
}

.modal-sm{
	width:317px;
}
							 
.loading img {
  
  top: 45%;

									 
}
	#loadingPer{

    top: 45%;

}
	
}

@media only screen and (min-width : 320px) and (max-width : 375px){
.carousel-control.right {
    right: 15px !important;
	}
    
    .transcriptText{
        width:87% !important;
    }
    .transcriptclose{
        width:10% !important;
    }
    .modal-md{
        max-width: 360px !important;
    }
    body{
        padding-top:70px;
        padding-bottom: 50px;
    }
    .courseHeading{
        font-size: 12.5px !important;
        font-weight: 600;
        padding-top: 10px;
    }
    .courseLogo img{
        // height:40px;
    }
    .questionHolder{
        font-size:15px !important;
    }
    .question-desc{
        font-size:15px !important;;
    }
    .star{
        width: 29px;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .callout_left{
        position: fixed;
        bottom: 19% !important;
        left: 17% !important;
    }
    .courseTitle {
        font-size: 14px !important;
    }
    .courseHeading{
        font-size: 11px;
    }


    .meterPannel{

        height: 60px !important; 

        .meter{
            width: 200px !important; 

            bottom: 100px !important;
            .meterArrow{

                bottom: 70px !important;
                width: 70px !important;
                left: 67px !important;
            }
        }
        .emptyStar{

            bottom: 235px !important; 
            width: 270px !important; 
        }

    }
    .carousel-control.left{
        //left: 25% !important;
    }
    .carousel-control.right{
        // left: 40% !important;
    }
    
    
    // ADD MORE CSS IN SHANKAR 21.7.17 FOR RED VACTOR
    h2{
        font-size:18px;
    }
    .headtitleh1{
        font-size:28px !important; 
    }
    .headtitleh3{
        font-size:14px;
    }
    .headtitleh4{
        font-size:11px;
    }
    .topBarContainer,.footer .container-fuild{
        padding-left:15px!important;
        padding-right:45px!important;
    }
     .actual_content_area{
        padding:0 50px 0 15px;
    }
    .custumTitle{
       padding-left:15px!important;
       padding-right:45px!important;
    }
    .courseheadingdiv{
        padding-top:10px;
    }
    .menuIconHolder{
        width:16%;
    }
    //footer navbar
     .control{
      //  height: 25px!important;
       // width: 25px!important;
        border-radius: 0px;
       // padding:0!important;
        line-height: 1;
    }
    #pageCounter{
    //height:35px!important;
    width: 65px!important;
    background-color:transparent;
    padding-top: 8px!important;
    font-size: 16px!important;
    line-height: 1;
    }
     .controlcounter{
    width: 65px!important;
    }
    #transcript{
    //background: url('../Eng/assets/media/images/transcript.png') no-repeat; 
    font-weight: 100;
    font-size: 14px;
    padding-top: 0px;
    width: 30px!important;
    height: 35px !important;
    margin-right: 1.5px;
   // background: #b4121b;
    border: none;
   // width: 25px!important;
  //  height: 25px!important;
   // margin-left:5px;
}
#helpBtn {
    font-size: 28px;
    margin-top: 0px;
}
.controlBtn{
    background:transparent !important;
}
.controlBar .control{
    //height: 35px;
    //width: 30px;
    border-radius: 0px;
    background:transparent;
}
.footer .container-fuild{
   padding: 0px 0px 0 15px !important;
}
.footer-primary{
    height:35px;
}
.namemark{
    display:none;
}
.imgesabso{
    display: none;
}//shankar

/*.topBtnIcon {
    width: 30px;
    height: 30px;
}*/
//.menurightoption{
  //  padding-top:70%;
//}
.progressBar {
    padding-top: 7px;
}
.controlBar {
    padding: 3% 0 0 0;
}
#play_pause{
    padding: 0;
}
/*.menurightside{
    width:30px;
}*/
.branding{
    padding-left:1px;
}
.mcqBgColor{
    padding: 0px 0 20px 0px;
}
.clsmobilemar{
    margin-bottom:0;
}
.panel-custom .panel-heading .panel-title a{
    font-size:15px;
    font-weight:100;
}
.clscongras {
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
}
 //body{
         // padding:0 50px 50px 15px !important;
      //}
.footer{
          padding: 0 20px 0 0;
      }
      /*.copyrite {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: white;
    height: 25px;
    position: absolute;
    bottom: 100px;
    font-size: 14px !important;
    text-align: left;
    width: 566%;
    right: -221%;
}*/
.tappaddtop1{
    padding-top:10px;
}
.copyrite{
    display:none;
}


/*.mobpaddrig{
    padding-right:8%;
}*/
}
@media only screen and (min-width : 376px) and (max-width : 480px){


    .transcriptText{
        width:87% !important;
    }
    .transcriptclose{
        width:10% !important;
    }
    .modal-md{
        max-width: 360px !important;
    }
    body{
        padding-top:70px;
        padding-bottom: 50px;
    }
    .courseHeading{
        font-size: 12.5px !important;
        font-weight: 600;
        padding-top: 10px;
    }
    .courseLogo img{
        //  height:40px;
    }
    .questionHolder{
        font-size:15px !important;
    }
    .question-desc{
        font-size:15px !important;;
    }


    .star{
        width: 29px;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }



    .courseTitle {
        font-size: 15px !important;
    }

    .emptyStar{

        bottom: 235px !important; 
        width: 270px !important; 
    }
    .carousel-control.left{
        //left: 25% !important;
    }
    .carousel-control.right{
        // left: 45% !important;
    }
    // ADD MORE CSS IN SHANKAR 21.7.17 FOR RED VACTOR
    h2{
        font-size:18px;
    }
     .headtitleh1{
        font-size:28px;
    }
     .headtitleh3{
        font-size:14px;
    }
     .headtitleh4{
        font-size:11px;
    }
    .topBarContainer,.footer .container-fuild{
        padding:0;
    }
    
    //.actual_content_area{
       // padding:0 50px 0 15px;
    //}
      .custumTitle{
       padding-left:25px !important; //Added by Noopur
       padding-right:50px!important;
    }
    .courseheadingdiv{
        padding-top:10px;
    }
    .menuIconHolder{
        width:16%;
    }
    .namemark{
    display:none;
}
.imgesabso{
    display: none;
}
 //body{
     //     padding:0 50px 50px 15px !important;
    //  }
      .footer{
          padding: 0 20px 0 0;
      }
     /* .copyrite {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: white;
    height: 25px;
    position: absolute;
    bottom: 100px;
    font-size: 14px !important;
    text-align: left;
    width: 566%;
    right: -221%;
}*/
.tappaddtop1{
    padding-top:10px;
}
.copyrite{
    display:none;
}
 .page-level-color{
	  padding-right:28px;
  }
}
@media (min-width: 481px) and (max-width: 767px){
.h3{
	font-size: 24px;
}
}

/* Added by Afreen for small devices - samsun J7, iphone 6 plus*/



@media only screen and (min-width: 320px) and (max-width: 479px) and (orientation: portrait) {
	.loading img {
  width: 25%;
 
									 
}

  .carousel-control.right {
    right: 15px !important;
	}
  .PipValpaddtop h5,p {
  //padding-left:1%;
margin-right:8%;  
}
ul li {
    font-size: 15px;
    line-height: 25px;
    margin-left: 20px;
}

.h3{
	font-size: 24px;
}
  
 /* .menurightside {
    width: 30px;
}*/
 .questionBg {
    background: #E2E2E2;
    padding: 22px;
    width: 100%;
	padding-left:32px;
 }
  .actual_content_area{
       padding:0 35px 0 0 !important;
	  // padding:0;
    }
   .actual_content_area.videoScreen_area{
        padding : 0;
    }
    
 .maindiv1page{
   // margin: 7% -7% 7% 7%;
  }
 
  .shankar{
    position:relative;
    bottom:unset;
    margin-top:400px;
  }
  .shankar p {
   font-size:12px !important;
   margin-left:10px;
 }
  .footer .container-fuild{
    padding-right:30px !important;
  } 
  
  #pageCounter {
  padding-top:0px !important;
  height:25px !important;
  }
      
  .visiablehidden{
     width:10% !important;
  }
  .copyrite1{
   // width: 550%!important;
    //bottom: 20px !important;
    //right: -106px;;
    //font-size:12px !important;
    webkit-transform: rotate(90deg);
}

.accessibilitypopup{
    bottom: 6% !important;
}

.topBtnIcon{
    height:54px !important;
  }


.menutext
{
       padding: 12px 0 12px 11%;
}

.carousel-indicators{
    top: -20px;
	 left: 44%;
	width: 73%;
}
.tree-menu {
    margin-left: 5% !important;
}

.first{
    background-color:#333333;
    margin: 40% -15px 0 -15px;
    padding:40px ;
 }
.second{
    background-color:#013b68;
    padding:40px ; 
    margin:-2px -15px 0;
}
.right-match {
    height: auto;
    width: 98%;
}

.submitBtnHoder{
    text-align: left;
}

.queText {
    font-size: 16px;
    font-weight: bolder;
	padding-right:20px;
}												   

/*video::-internal-media-controls-download-button {
  display: none;
}
video::-webkit-media-controls-enclosure {
  overflow: hidden;
}
video::-webkit-media-controls-panel {
  width: calc(100% + 10%);
  
}*/
 .page-level-color{
	  padding-right:28px;
	  margin-left:2.5%;
  }

.mcqBg .instruction{
	margin-left:3.5%;
}
}

/* samsung J 7 landscape view */
@media only screen and (min-device-width: 480px) and (max-device-width: 640px) and (orientation: landscape) {
  
    
//.footer{
    //   padding-right:40px !important;
   // }
    
    
//.copyrite1{
   // bottom: -220px !important;
	//width: 520%!important;
	///right: -90px;
	//font-size: 12px!important;
	
//}
 /*.menurightside{

 min-height: 600px !important; 
} */

// .accessibilitypopup{
   // bottom: -50% !important ;
//} 

//.copyrite{
   //bottom: -58% !important ;
//}

 .controlBar .visiablehidden {
    width: 10% !important;

  }
  .menutext
  {
          padding: 12px 0 12px 10%;
  }
  
  //.carousel-indicators{
   // top: -25px;
//}
//.customtitlehead {
   // margin: 0 -15px!important;
//}
.accessibilitypopup{

    bottom: 1% !important;

}

}

 /*
Abhishek
 Iphone 7 plus landscape view */
@media only screen and (min-device-width:720px) and (max-device-width: 740px) and (orientation: landscape) {

   .enablepopup{
		padding-top:50px;
	
	}
	.imageSize{
		width:280px; 
		height:240px;
	}


}


@media  (min-width: 481px)and (max-width: 767px) {
    // body{
          //padding:0 50px 50px 15px !important;
      //}
      .vertical-middl{
          display: none;
      }
      .footer{
         padding: 0 65px 0 0;
      }
    .modal-md{
        max-width: 400px !important;
    }

    .star{
        width: 44px;
        padding-left: 5px !important;
        padding-right: 5px !important;

    }
    .courseTitle {
        font-size: 18px;
        padding-top: 10px;
        font-weight: 300;

    }

    .transcriptText {
        width:92% !important;
    }
    .transcriptclose {
        padding-right: 4px !important;
    }
    .header{
        height: 40px !important;
    }

    .courseHeading{
        font-size: 15px;
        font-weight: bold;
    }
    .overviewTextHolder{
        top: 5%;
        left: 2%;
        .yellowText{
            padding: 5px 10px;            
            font-size: 12px;
            margin-bottom: 1%;
            margin-top: 1%;
        }
        .whiteText{
            padding: 5px 10px;         
            font-size: 12px;
            margin-bottom: 1%;
            margin-top: 1%;
            margin-left: 0%;
        }


    }

    .simpleTextImageRSChar{

        img{
            width:75% !important;
            bottom: 0px !important;
            right:10px !important;

        }
    }  

    .circularChar{
        margin-bottom:-20px !important;

        img{
            width: 60% !important;
            margin: 0 auto !important;
        }
    }
    .activityQue:after {

        top: -90px;

        right: 150px;


    }
    // ADD MORE CSS IN SHANKAR 21.7.17 FOR RED VACTOR
    h2{
        font-size:18px;
    }
     .headtitleh1{
        font-size:28px;
    }
     .headtitleh3{
        font-size:14px;
    }
     .headtitleh4{
        font-size:11px;
    }
    //.topBarContainer,.footer .container-fuild{
        //padding:0;
    //}
    
      .custumTitle{
        padding-left: 41px!important;
        padding-right: 20px!important;
    }
    .courseheadingdiv{
        padding-top:10px;
    }
    .menuIconHolder{
        width:16%;
    }
    .namemark{
    display:none;
}
.tappaddtop1{
    padding-top:10px;
}
.imgesabso{
    display: none;
}
/*.copyrite {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: white;
    height: 25px;
    position: absolute;
    bottom: 100px;
    font-size: 14px !important;
    text-align: left;
    width: 566%;
    right: -221%;
}*/
.copyrite{
    display:none;
}



}

@media (min-width: 768px)and (max-width: 991px) {
    .custumModalBody{
        padding: 15px 20px !important;
    }
    .modal-md{
        max-width: 450px !important;
    }


    .callout_left{
        position: fixed;
        bottom: 234px !important;
        left: 20% !important;
    }
    .star{
        width: 58px;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .top-Icon{
        float: right;
    }
    .courseTitle {
        font-size: 17px !important;
		padding-top:13px;
		 padding-bottom: 12px; 
    }

    .alignRight{
        position: fixed;
        right: 116px;
    }
    .alignBottomCounter{
        position: fixed;
        bottom: -2px;
        left: -30px;
    }

    .alignLeft{
        position: fixed;
        left: 0px;
    }

    #pageCounter{
        min-width:55px !important;
    }
    .transcriptText {
        width:95% !important;
    }
    .transcriptclose {
        padding-right: 4px !important;
        width:5% !important;
    }

    .overviewTextHolder{
        top: 5%;
        left: 2%;
        .yellowText{
            padding: 5px 10px;
            font-size: 20px;
            margin-bottom: 1%;
            margin-top: 1%;
        }
        .whiteText{
            padding: 5px 10px;
            font-size: 20px;
            margin-bottom: 1%;
            margin-top: 1%;
            margin-left: 0%;
        }
    }

    .simpleTextImageRSChar{

        img{
            width:65% !important;
            bottom: 0px !important;
            right:10px !important;

        }
    }  

    .bubble-right{
        right:40% !important;
    }
    .info-right{
        top:15% !important;
        right:40% !important;
    }
    .topSettingPanel{
        width:59px !important;
    }
    .imgMrq{
        width:89.5% !important;
    }
    .imgesabso{
    display: none;
}
 .topBarContainer,.footer .container-fuild{
        //padding-left:15px!important;
        //padding-right:70px!important;
    }
     .actual_content_area{
        //padding:0 70px 0 15px;
		//padding:0 50px 0 0px;				  
    }
    .custumTitle {
    background-color: #333333;
    padding-left: 27px; //Noopur
    padding-right: 10px;
    z-index: 99;
   // padding-top:18px !important;
}

.tappaddtop1{
    padding-top:10px;
}
.visiablehidden{
     width:20% !important;
  }
 .imagealign{
        height:439px;
    }
    .imagealign1{
        height:421px;
    }
    .matchalign{
        padding-left:50px;
    }
    .right-match{
        height:190px;
        width:170px;
    }
    .left-match{
        height:50px;
        width:170px;
    }
	 /*Added by Noopur*/
  .page-level-color{
	  padding-right:28px;
  }
  .questionBg{
	  padding-left:25px;
  }
  
   .PipValpaddtop h5,p {
  padding-right:3%;
}
}



@media (min-width: 992px) and (max-width: 1199px) {
    .modal-md{
        max-width: 400px !important;
    }
    .callout_left{
        position: fixed;
        bottom: 400px !important;
        left: 23% !important;
    }
   .pg1_img_top{
    padding-top:60px !important;
    }
    .star{

        width:85px;

    }
    .clickTab{
        width:100px !important;
    }
    .transcriptText {
        width:95% !important;
    }
    .transcriptclose {
        padding-right:4px !important;
        width:4% !important;
    }

    .carousel-control.left{
        //  left: 28% !important;
    }
    .carousel-control.right{
        //  left: 45% !important;
    }
    .imgesabso{
    display: none;
}

     .visiablehidden{
     width:20% !important;
  }
   .PipValpaddtop h5,p{
	  padding-right:3%;
  }
  .mcqBg .PipValpaddtop h5,p{
	  padding-right:0;
  }
 

}

@media (min-width: 992px){
#Accessibilitypopup .modal-lg {
    width: 600px!important;
}
  .questionBg{
	padding-left: 30px ;
	font-size:20px !important;
}
.courseTitle{
	height:51px !important;
}
}

@media (min-width: 1200px) {
    .modal-md{
        max-width: 400px !important;
    }
    .callout_left{
        position: fixed;
        bottom: 400px !important;
        left: 20% !important;
    }
   .marginbottom{
    margin-bottom:10%;
   }
   #Accessibilitypopup .modal-content{
       padding:30px;
   }
   .pg1_img_top{
    padding-top:60px !important;
    }

}
@media (min-width: 1600px) {
    .marginbottom{
    margin-bottom:20%;
   }
    .carousel-inner{
		
		/*if brmobileview commented Else useheight: 45vh;*/
height: 40vh;

overflow-x: hidden ;
overflow-y:auto;  
}
//For bookmark popup

.modal-sm{
	top:-20%;
}
.loading img {
  
  top: 30%;

									 
}
#loadingPer{

    top: 30%;

}

}
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {

		.loading img {
  width: 13%;
 
									 
}
     	.carousel-inner{
		
		//if brmobileview commented Else useheight: 45vh;
height: 54vh;

overflow-x: hidden ;
overflow-y:auto;  


}
    .maindiv1page{
    margin: 7% 0% 7% 7%;
  }

    .custumTitle{
     padding-bottom: 0px !important;
     //padding-top: 18px !important;
  }
  
  
    .accessibilitypopup {
    bottom: 7% !important;
  }
  
  .copyrite {
    bottom: 10px !important;
}
    

    .hoTab > li > a{
    padding: 10px 5px !important;
  }
    
    .scenarioSceneHolder {
        .scenarioIntro{
            font-size: 20px;
        }
    }
    .rightSideChar img{        

        // bottom: 77px !important;
        width:85% !important;
        left: 34%;
        bottom: -1px !important;
    }
    .imgesabso{
    display: none;
}
.footer{
    width: 96% !important;
    padding-right:20px !important;
}

.resultPageImage
{
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

.first{

    background-color:#333333;
    margin:50% 0 0 0;
    padding:40px ;
    margin-left:-50px;
 }
 
.second{
    background-color:#013b68;
    padding:40px ; 
    margin-top:-2px !important;
    margin-left:-50px;

}

//Added by Noopur
.PipValpaddtop h5,p{
	padding-right:4%;
}
}
.simpleTextAd{
    background: #fdcf54;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius:6px;
}
.img-responsive{

}

.SlpashHeadingHolder{
    img{
        opacity: 0.4;
    }
}
.SlpashHeading{
    font-family: 'Conv_Handlee-Regular', Sans-Serif;
    font-size: 40px;
    font-weight: 600;
    position: absolute;
    top: 80px;
    left: 110px;
}
.SlpashBgImg1{
    position: absolute;
    top:0;

}
.SlpashBgImg2{
    position: absolute;
    top: 150px;
    left: 250px;
    ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
}
.SlpashImg1{
    position: absolute;
    top:0;
    left:130px;  
    ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari */
    transform: rotate(5deg);
    img{
        border:8px solid #fff;
        width:95%;
        -webkit-box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
        box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
    }
}
.SlpashImg2{
    position: absolute;
    top:170px;   
    ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
    transform: rotate(-5deg);
    img{
        border:8px solid #fff;
        width:95%;
        -webkit-box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
        box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
    }
}
.SlpashImg3{
    position: absolute;
    top: 250px;
    left: 200px;   
    ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Safari */
    transform: rotate(10deg);
    img{
        border:8px solid #fff;
        width:95%;
        -webkit-box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
        box-shadow: 3px 2px 10px 1px rgba(0,0,0,0.2);
    }
}
.splashBg{
    background: #ffffff !important;
}
.quizPageBg{
    background: #22b2b2 !important;
}
.info{
    color:#337ab7;
}
.redInfo{
    color:#cc2229;
    font-weight:700;    
}
.introScreenText{
    text-align: center;
    line-height:26px;
}

@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}
.spin{    
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 0.75s;
    -moz-animation-iteration-count: 3;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 0.75s;
    -ms-animation-iteration-count: 3;
    -ms-animation-timing-function: linear;
}
/* Portrait and Landscape  iphonr*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 3){

	
   //   body{
      //    padding:0 50px 50px 15px !important;
    //  }
 
  //footer navbar
     .control{
      //  height: 25px!important;
       // width: 25px!important;
        border-radius: 0px;
        padding:0!important;
        line-height: 1;
    }
    #pageCounter{
    //height:35px!important;
    width: 65px!important;
    
    //background-color:#742228;
    //padding-top: 8px!important;
    font-size: 16px!important;
    line-height: 1;
    }
     .controlcounter{
    width: 65px!important;
    }
    #transcript{
    //background: url('../Eng/assets/media/images/transcript.png') no-repeat; 
    font-weight: 100;
    font-size: 14px;
    padding-top: 0px;
    width: 30px!important;
    height: 35px !important;
    margin-right: 1.5px;
    border: none;
   // width: 25px!important;
  //  height: 25px!important;
   // margin-left:5px;
}
#helpBtn {
    font-size: 28px;
    margin-top: 0px;
}
.controlBtn{
    background:transparent !important;
}
.controlBar .control{
    height: 30px;
    width: 25px;
    border-radius: 0px;
    //background:#b4121b;
}
 .controlBar .visiablehidden{
     width:10% !important;
  }
.imgesabso{
    display: none;
}
.menurightside{
   width:35px;
    left: -35px;
}

     
       /*.copyrite {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: white;
    height: 25px;
    position: absolute;
    bottom: 100px;
    font-size: 14px !important;
    text-align: left;
    width: 566%;
    right: -221%;
}*/
.tappaddtop1{
    padding-top:10px;
}
.footer {
    padding: 0 20px 0 0;
}
}
 @media (min-width: 768px){
.modalcustumwidth .modal-dialog {
    width: 98%;
    margin: 30px auto;
}
//#modelimage-2 .modal-dialog {
    //width: 70%;
    //margin: 30px auto;
//}

}

@media (max-width: 768px) {
  .PipValpaddtop h5,p{
	padding-right:4%;
}
.mcqBg .PipValpaddtop h5,p{
	  padding-right:0;
  }
}


/* Smartphones (portrait and landscape) ----------- */


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */

.carousel-control.right {
    right: 15px !important;
	}

 .page-level-color{
	  padding-right:28px;
  }
  .queText{
		padding-right:28px;
	}
	.que{
		width:100%;
	}
        .vertical-middl{
            display: none;
        }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
 .page-level-color{
	  padding-right:28px;
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
		.loading img {
  width: 10%;
 
									 
}

}

/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
		
		     	.carousel-inner{
		
		//if brmobileview commented Else useheight: 45vh;
height: 56vh;

overflow-x: hidden ;
overflow-y:auto;  


}

	    .introScreen{
    /*padding:81px !important;*/
    padding : 71px 76px !important;
    min-height : 510px;
}
.right-match{
        /*height:190px;
        width:170px; */
        min-height: 190px;
        width : 90%;
    }
    .queText{
        padding-right: 30px;
    }
    .left-match{
       /* width:170px; */
       width : 90%;
    }
    .optionsalign{
        padding:25px 88px 55px 28px !important;
    }
    .imagealign1{
        height:471px;
    }
    .introScreenForIpad{
        padding:107px !important;
    }																																					  
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
/* Styles */
 .queText{
        padding-right: 31px;
    }
    .actual_content_area{
	height: 100%;
	overflow-y:auto;
        padding-left:0;
        padding-right:50px;
    }
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */

}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}





/* Iphone related css added by Afreen M*/


@media only screen and (min-device-width: 414px) and (max-device-width: 735px)and (orientation: portrait)  {
  /*Iphone 7 related css Afreen M */
 /*Added by Noopur*/
  .page-level-color{
	  padding-right:26px;
  }
  .carousel-control.right {
    right: 0 !important;
	}
  
  /* .menurightside {
    width: 40px;
}*/
.copyrite1{
   right: -97px;
}

 .carousel-indicators{
      top:-22px !important;
  }
 .clscongras
  {
      font-size: 30px;
  }
  .tree-menu {
    margin-left: 5% !important;
}

  .footer .container-fuild{
     padding-right:20px !important;
   } 
 
        
}
/* iphone 7 landscape view  */


@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
    
    
     body {
     //padding: 0 50px 0px 15px !important;
    }
     .enablepopup {
    padding-top: 60px;
  }
  .imageSize {
    width: 280px;
    height: 240px;
  }
	
    .actual_content_area {
     //padding: 0 30px 50px 15px;
	padding : 0; 
	    padding-right: 5%;
  }
  
  .actual_content_area.videoScreen_area{
        padding : 0;
        margin-left : -16px;
    }
  
    .maindiv1page{
   // margin: 7% 0% 7% 7%;
  }

    .footer {
    padding-right: 40px !important;
    }

    .customtitlehead{
        margin: 0 -15px !important;
    }
    .accessibilitypopup {
   
	position:relative;
	bottom:unset;

  }
    .shankar{
        position:relative;
        bottom:unset;
        margin-top:50px !important;
}
   .shankar p {
        font-size:12px !important;
        margin-left:10px;
  }
  
  .copyrite {
    position: relative;
    bottom: 1%;
    color: #f5f5f5;
    z-index: 99999999;
    text-align: right;
  }
  
  .copyrite1 {
    //right: -61px !important;
    //width:388% !important;
    //bottom: -135px !important;
   
  }
  .carousel-indicators {
    top: -30px;

 }
 
 .first{
    background-color:#333333;
    margin: 7% -65px 0;
    padding:40px ;
}
 .second{
    background-color:#013b68;
    padding:40px ; 
    margin: -2px -65px 0;
 }
 
  
    
    
    
}
@media only screen and (min-width: 736px) {
  //.accessibilitypopup {
   // bottom: 0;
    //width: 82%;
  //}
 /* .menurightside {
    width: 60px;
  }*/
  
 /* .menurightside {
    min-height: 600px !important;
	
  }*/
  //.customtitlehead {
   // margin: 0 -15px !important;
  //}
  //.copyrite{
   // bottom: -10px;	
 // }
  
/*  .transcriptText p{
      padding: 3% 2% 0 24%;
  }*/
  
  
 // .carousel-indicators{
    //  top:-30px !important;
  //}
  .menutext
  {
           padding: 12px 0 12px 0%;
  }
  
    //#pageCounter{
    // padding-top: 0px!important;
 // }
  
  
 
  /*Iphone 7 related css Afreen M */
}


@media only screen and (min-width:1024px){
/*  .copyrite1 {
    right: -137px !important;
    //width: 550%!important;
    bottom: 50px !important;
    bottom: 20px !important;
  }*/
.maindiv1page{
width : 96%;
    margin: 7% 0% 7% 2%;
}
  .accessibilitypopup {
    //bottom: 5% !important;
    bottom: 6% !important;
  }
  
  .copyrite {
    bottom: 10px;
}

.resultPageImage
{
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

  
  .custumTitle{
    padding-bottom: 0px !important;
    //padding-top: 18px !important;
  }
  
    .actual_content_area{
	height: 95%;
	overflow-y:auto;
	overflow-x:hidden;
        padding-left:0;
        padding-right:50px;
    }
  .activity_area{
        //padding-left: 50px;
        //padding-right: 100px;
    }
  .footer{
      //width:95%;
      padding-right: 5px;
      width: 96% !important;
  }
   

  
}
/*# sourceMappingURL=playerSettings.css.map */


/* Samsung Tab 3 related css */
@media only screen and (device-width: 600px) and (orientation: portrait) {
   .customtitlehead {
       margin: 0 -15px !important;
    }
	
    .tree-menu {
     margin-left: 18% !important;
}

   .custumTitle{
    padding-bottom: 0px !important;
    padding-top: 18px !important;
    
    
  }
	
	
}


@media only screen and (min-width: 1200px) {
   
   .custumTitle{
      padding-bottom: 0px !important;
      padding-top: 0px !important;
      
    }
    
   .accessibilitypopup {
       
    bottom: 5% !important;
    width: 50%;
  }
  .footer .container-fuild
  {
    padding-left: 0; 
    padding-right: 0;
  }
  .footer
  {
      width:98% !important;
      padding-right:20px;
  }
  
  .first{
    background-color:#333333;
    margin:18% 0 0 0;
    padding:40px ;
    margin-left: -15px;
    // margin-left:-50px;
}
.second{
    background-color:#013b68;
    padding:40px ; 
    margin-top:-2px !important;
    margin-left:-50px;
    margin-right: -15px;
}
  
  
}


/* video related css*/



#playbutton  button{	
	background-color: #005796;
	color:#fff;
        float: right;
	min-width:70px;
	min-height:20px;	
	font-size:12px;	
	border:1px solid #fff;
	box-shadow: 0px 0px 6px #267987;
}

#playbutton button:hover{
    /* background-color: #614cd1; */
	
}

#playbutton button:focus:enabled{
   /* background-color: #01A4BF; */
}

#playbutton  button:focus {
   outline:1px solid @focuscolor;
}



/* video controller related CSS */
/*video::-internal-media-controls-download-button {
  display: none;
}
video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% + 4%);
 
}*/
.modal-open {
    padding-right: 0px !important;
}