// Additional theme classes or attributes to be applied in JSON for more custom style 
// ====================================================================

// Divider block - used to separate content or break up pages. 
// =============

// Class applies alternative background color and component styling

.divider-block {
    background-color: @background-color-inverted;
    color: @foreground-color-inverted;
    text-align: center;
    .block-title,
    .block-body,
    .block-instruction,
    .component-title,
    .component-body,
    .component-instruction {
    	color: @foreground-color-inverted;
    	text-align: center;
    }
    .component-inner {
    	background-color: transparent;
    }
}


body{
line-height: 1.2;
}
// Block background color - used to apply variable based background colors on blocks
// ======================

.block {
	&.primary-color {
		background-color: @primary-color;
	}

	&.secondary-color {
		background-color: @secondary-color;
	}

	&.tertiary-color {
		background-color: @tertiary-color;
	}

	&.background-color {
		background-color: @background-color;
	}

	&.background-color-inverted {
		background-color: @background-color-inverted;
		color: @font-color-inverted;
		.component-inner {
			background-color: transparent;
		}
	}
}




	 @media screen and (max-width:768px) {
		.block-inner {
			margin-bottom:40px !important;
			}
		}
// Component background - used to apply variable based background color and padding on components
// ====================

.component-background {
	background-color: @component-background-color;
	padding: @component-padding;
}

// Assessment - remove graphic components for mobile view (when components snap down to single span).
// ==========

.assessment {
	.graphic-component {
		display: block;

		@media all and (max-width: @device-width-medium) {
			display: none;
		}
	}
}

// THIS CLASS IS FOR THE PURPOSE OF THE ADAPT DEMO 
// blank component demo - applied at block level to add a background image in place of a blank component
// ====================

.blank-background {
	background-image: url(assets/blank-bg.jpg);
	background-repeat: no-repeat;
	background-position: center;

	@media all and (max-width: @device-width-large) {
		background-image: url(assets/blank-bg-900.jpg);
		background-position: right;
	}

	@media all and (max-width: @device-width-medium) {
		background-image: none;
	}
}

// Adds styling to the blockquote element.

blockquote {
    border-left: 2px solid @primary-color;
    margin-left: 20px;
    padding-left: 20px;
}


////Global////
.vertical-middle{
	display: flex;
    align-items: center;
    justify-content: center;
}
.block-white-bg{
	.block-inner{
		background-color: #ffffff;
	    padding: 50px;
	    box-sizing: border-box;
	    margin-top: 60px;
		 @media screen and (max-width:768px){
			    margin-bottom: 20px;
		}
	    @media screen and (max-width:520px){
			padding: 20px;///////////
		}
	}
}
.component{
	.component-inner{
		@media screen and (max-width:520px){
			padding: 20px!important;///////////////
		}
	}
} 

.c-05{
	.component-inner{
		@media screen and (max-width:520px){
			padding: 0px!important;///////////////
		}
	}
}

.notify{////////////////
    .notify-popup-content{
    @media screen and (max-width:768px){
            width:90%;
        }
        @media screen and (max-width:520px){
            text-align: left;
            width:70%;
        }
    }
} 
.stacklist-button {///////////
	button{
		@media screen and (max-width:520px){
			min-width: 150px;
            margin: 0px auto;
		}
	}
}
.block-inner{
	max-width:70% !important;
	@media screen and (max-width:1024px){
		max-width:100% !important;
	}
	@media screen and (max-width:520px){
		max-width:90% !important;
	}
}
.component-title, component-instruction{
	text-align: center !important;
}
.title-p-gap{
	display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	.component-title{
		p{
			margin-top:0px !important;
			margin-bottom:0px !important;	
		}
	}
	.component-body{
	    margin: 30px 0px 30px !important;
	    text-align: left;
	}
}
.body-p-gap{
	.component-body{
		p{
			margin-top:0px !important;
			margin-bottom:0px !important;	
		}
	}
}

.buttons-inner{
	button{
    	border-radius:50px;
    	@media screen and (max-width:768px){
			padding: 14px 8px 14px 8px !important;
			font-size:14px !important;
		}
		@media screen and (max-width:520px){
			font-size:9px !important;
			padding: 14px 0px 14px 0px !important;
		}
	}
}

////launch page/////

a{
	text-decoration:underline;
}
.co-05{
    .page-header{
        display:none;
    }
	.navigation-drawer-toggle-button{
		display:none !important;
	}
}

#wrapper {
    padding-top: 0px !important;
}

.component {
	.component-inner{
		background-color:transparent !important;
	}
	.component-instruction{
		color:@primary-color;
		font-weight:normal !important;
		font-size:14px !important;
		margin-bottom: 30px !important;
		font-style:italic !important;
		text-align: center !important;
	}
}

.intro{
	background-image:url(assets/launch.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	color:@white;
	.block{
		background-color:transparent !important;
	}
	.component-body{
		font-size:30px;
		@media screen and (max-width:520px){
			font-size: 16px; //added by Chetan
		}
		P{
			margin-bottom:18px !important;
			text-align:center;
			margin-top:18px !important;
		}
	}
}

.logo-img{
	width:46%;
	@media screen and (max-width:520px){
		width: 70%;
	    margin-top: 30px;
	}
}

.article-02{
	background-color: @pista;
	.block{
		background-color:transparent !important;
	}
}

.pista-background{
	background-color:#d4e9d1;
	.block{
		background-color:transparent;
	}
}

.blue-background{
	background-color: @blue;
	.block{
		background-color:transparent;
	}
}

.blue-shade-background-color{
	background-color:#7ab4da;
	.block{
		background-color:transparent !important;
	}
}

.light-blue-bg{
	background-color:#7ab4da;
	padding:0px 0px 80px !important;
	.block{
		background-color:#a7d0eb !important;
	}
	
}

.blue-shade-background{
	background-color:#7ab4da;
	.article-inner{
		//padding:0px;
	}
	.block{
		background-color:transparent !important;
		.block-inner{
			//padding:0px;
		}
	}
}

.article-03{
	background-image:url('assets/narrative-bg.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.block{
		background-color:transparent !important;
		.block-inner{
			padding:10px 0 60px;
		}
	}
	.article-title{
		text-align: center !important;
	    background-color: #009cde;
	    padding: 10px;
	    margin-bottom: 0px !important;
	    box-sizing:border-box;
	    color: #fff !important;
	}
	.article-title-inner{
		margin-bottom: 0px !important;
	}
}

.part01-blue{
	background-color: @lightest-blue;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		.block-inner{
			padding:0px;
		}
	}
}

.part02-green{
	background-color: #d4e9d1;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		.block-inner{
			padding:0px;
		}
	}
}

.article-04{
	background-color: @lightest-blue;
	.block{
		background-color:transparent !important;
	}
}

.part-04-02{
	background-color:#9dd294;
	.block{
		background-color:transparent !important;
	}
}

.padding-zero{
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		.block-inner{
			padding:0px;
		}
	}
}

.grey-bg{
	background-color:#ababab;
	.block{
		background-color:transparent !important;
	}
}

.white-patch{
	background-color:@white;
	padding: 50px 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    .component-header{
	    //display: flex;
	  	//flex-flow: row wrap;
	  	//justify-content: center;
	  	//align-content: center;
	  	//align-items: center;
	  	text-align:center;
	  	.component-body{
	  		display: inline-block; 
			text-align: left;
			margin: 0px 0px 20px !important;
				@media screen and (max-width:768px){
			    display: revert;
		}
	  	}
    }

    @media screen and (max-width:520px){
        padding:20px;/////////////
    }
}

.part01-intro{
	background-image:url('assets/part01.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:750px;
		.block-inner{
			padding:0px;
		}
	}
}

.part02-intro{
	background-image:url('assets/part02.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:750px;
		.block-inner{
			padding:0px;
		}
	}
}

.part03-intro{
	background-image:url('assets/part03.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:600px;
		.block-inner{
			padding:0px;
		}
	}
}

.part-03-02{
	background-image:url('assets/part03-02.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:600px;
		.block-inner{
			padding:0px;
		}
	}
}

.part-04{
	background-image:url('assets/part-04.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:600px;
		.block-inner{
			padding:0px;
		}
	}
}
.part-01-text, .part-02-text, .part-03-text, .part-04-text{
    @media screen and (max-idth:520px){
        display: block;
    }
}
.assessment{
	background-image:url('assets/assessment.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:600px;
		.block-inner{
			padding:0px;
		}
	}
}

.flipcard-style{
	.flipcard-item{
		min-height: 220px; // updated by Chetan
		margin:10px;
		width:30.9%;
		@media screen and (max-width:1024px){
			width:46%;/////////////////////
		}
        //Commented below lines by Chetan
        /* @media screen and (max-width:520px){
			width:100%;
			height:190px;////////
		} */
		.front-body-title{
			font-size: 20px !important;
		    height: 60px;
		    /* text-align: left; */
		    font-weight: bold;
		    padding: 15px 0px;
		    box-sizing: border-box;
		    background-color:#fff;
		    top:0px !important;
		}
	}
	.front-item{
		img{
			width:100%;
		}
	}
	.flipcard-item-face{
		box-shadow: 0px 0px 15px 2px rgba(176, 176, 176, 0.80);
		text-align: center;
		border-radius: 7px;
	}
	.item-0{
		.flipcard-item-back{
			background-image:url('course/en/images/flip01-back.png') !important;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:transparent !important;
		}
	}
	.item-1{
		.flipcard-item-back{
			background-image:url('course/en/images/flip02-back.png') !important;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:transparent !important;
		}
	}
	.item-2{
		.flipcard-item-back{
			background-image:url('course/en/images/flip03-back.png') !important;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:transparent !important;
		}
	}
	.item-3{
		.flipcard-item-back{
			background-image:url('course/en/images/flip04-back.png') !important;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:transparent !important;
		}
	}
	.item-4{
		.flipcard-item-back{
			background-image:url('course/en/images/flip05-back.png') !important;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:transparent !important;
		}
	}
	.item-5{
		.flipcard-item-back{
			background-image:url('course/en/images/flip06-back.png') !important;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:transparent !important;
		}
	}
} 

.flipcard-style-02{
	.component-widget{
		width: 70%;
	    margin: 0 auto;
		     @media screen and (max-width:520px){
			 	width: 100%;
			 }
	}
	.flipcard-item{
		height: 350px;
		margin: 10px;
		width: 45%;
		@media screen and (max-width:1920px) and (min-width:1600px){
            height: 400px;////////////
        }
		@media screen and (max-width:1024px){
            height: 230px;////////////
            margin: 10px;
            width: 43%;///////////////
        }
        @media screen and (max-width:768px){
            height: 340px;////////////
            margin: 10px;
            width: 100%;///////////////
            img{
            	width:100%;
            }
        }
        @media screen and (max-width:520px){
            height: 230px;////////////
            margin: 10px;
            width: 100%;///////////////
        }
		.flipcard-item-front{
			border-radius: 25px;
			img{
				width:100%;
			}
		}
		.front-body-title{
			top:35px !important;
			background-color: rgba(151, 245, 186, 0.58);
			font-size: 16px !important;
			height: 70px;
			text-align: left;
			text-align: left;
			justify-content: center;
			align-items: center;
			display: flex;
			@media only screen and (max-device-width:1920px) and (min-device-width:1900px){
                position: absolute;
                left: 27px !important;/////////////////////////
                width: 85.5% !important;///////////////////////
            }
		}
		.flipcard-item-back{
			background-color: @white !important;
			border:1px solid @dark-pista;
			border-radius: 25px;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}
} 

.hotgraphic-component {
    @media only screen and (max-device-width:1920px) and (min-device-width:1900px){
        .device-pin0{
            top: 28% !important;
            left: 66% !important; 
         }
        .device-pin1{
            top: 40% !important;
            left: 37% !important;
        }
        .device-pin2{
            top: 26% !important;
            left: 23% !important;
        }
    }

    @media screen and (max-width:1366px){
        .device-pin0{
            top: 28% !important;
            left: 66% !important; 
         }
        .device-pin1{
            top: 40% !important;
            left: 37% !important;
        }
        .device-pin2{
            top: 26% !important;
            left: 23% !important;
        }
    }
    @media screen and (max-width:1024px){
        .device-pin0{
            top: 16% !important;
            left: 70% !important;
         }
        .device-pin1{
            top: 29% !important;
            left: 37% !important;
        }
        .device-pin2{
            top: 16% !important;
            left: 15% !important;
        }
    }
    @media screen and (max-width:768px){
        .device-pin0{
            top: 10% !important;
            left: 70% !important;
         }
        .device-pin1{
            top: 24% !important;
            left: 38% !important;
        }
        .device-pin2{
            top: 10% !important;
            left: 14% !important;
        }
        .hotgraphic-graphic-pin{
        	padding: 5px !important;
        }
    }
}


.dragAndDrop-component{
	.dragAndDrop-inner{
		.dragAndDrop-draggables-container{
			.dragAndDrop-item-draggable-wrapper{
				position: relative;
				float: left;
				margin-right: 20px;
				padding-bottom: 35px;
				width: 15% !important;
    			height: 14% !important;
				@media screen and (max-width:768px){
					width: 26% !important;
				}
                @media screen and (max-width:520px){
                    padding-bottom: 12px;
                }
                a{
                    @media screen and (max-width:520px){
                       
                        padding: 10px 0px;
                    }
                }
                
			}
			.dragAndDrop-item-draggable{
				padding-top: 10px;
				color: #000 !important;
				font-size: 14px;
				border: 2px dashed #64af62;
				padding-left: 20px;
				background-color:#ffffff;
				height:65px !important;
			}
		}
			.dragAndDrop-item-droppable{
				.txt{
                    @media screen and (max-width:1024px){
                        margin-top: 0% !important;
                    }
                    @media screen and (max-width:768px){
                        margin-top: 0% !important;
                        padding: 5px 9px;
    					box-sizing: border-box;
						height: 110px;
                    }
                }
			}
		} 
		.dragAndDrop-item-background{
			border: 2px solid #64af62 !important;
			background-color: rgba(186, 186, 186, 0) !important;
			margin-right: 0.5% !important;
		}
		.drag-item{
			width: 90%;
			position: absolute;
			top: 0;
			left: 0;
			margin: 0 auto;
			height: auto;
			margin-top: 12%;
			right: 0;
			@media screen and (max-width:1024px){
				top: 30%;
			}
			@media screen and (max-width:768px){
				top: 135px;
			}
		}
	} 

.narrative-style{
	.narrative-widget{
		position:relative;
	}
	.narrative-content{
		background-color:#e4e4e4 !important;
		color:@black !important;
		//padding:20px;
		width: 49% !important;
		overflow-y: auto;
		word-break: break-word;
		position: absolute;
	    right: 0;
	    bottom: 30px;
	    top: 0;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 15px;
	    box-sizing: border-box;
	    @media screen and (max-width:768px){
			padding:7px;////////////
			display: block;//////////////
		}
		ul li{
			margin-left: 0px !important;
		}
	}
	.narrative-slide-container{
		width: 50% !important;
		margin-right: 0% !important;
		@media screen and (max-width:767px){
			width: 100% !important;///////////////////
		}
	}
	.narrative-controls{
		width: 40px !important;
		height: 40px !important;
		margin-top: -28px !important;
		background-color: #5CA50B !important;
		.icon{
			font-size: 20px !important;
			margin:7px !important;
		}
	}
}

	.narrative-controls{
		width: 40px !important;
		height: 40px !important;
		margin-top: -48px !important;
		.icon{
			font-size: 20px !important;
			margin:7px !important;
		}
	}
.graphicOnMobile{
	.graphic-widget{
		margin: 0 auto;
	    text-align: center;
	}
	@media screen and (max-width:1024px){
		img{
			display:none;
		}
		.component-inner{
			padding: 0px !important;
		}
	}
}
.text-img-ipad{
	.article-inner{
		@media screen and (max-width:1024px){
			padding: 0px 0px 0px !important;
		}
	}
	@media screen and (max-width:1024px){
		.b-80{
			.block-inner{
				padding: 30px 0px 0px !important;
			}
		}
		.b-85{
			.block-inner{
				padding: 0px 0px 0px !important;
			}
		}
		.b-90{
			.block-inner{
				padding: 0px 0px 30px !important;
			}
		}
	}
}
.component-full-OnMobile{
	@media screen and (max-width:1024px){
		width:100%;
	}
	img{
		display:none;
		@media screen and (max-width:1024px){
			display: block;
		}
	}
}
.nota-narr{
	.narrative-title{
		font-size: 45px !important;
	    margin-bottom: 50px !important;
	    color:#46b035 !important;
	}
	.narrative-body {
		display: block !important;
	}
}

.stacklist-style{
	.stacklist-item{
		background-color:@light-pista;
		border:1px solid @dark-pista;
		padding:14px;
		margin-bottom:5px;
		color:@black;
		font-size: 14px;
	}
	.stacklist-button{
		button{
			background-color:#fff;
		    color: #000000;
		    border:2px solid @dark-pista;
		    &:hover{
				background-color:@light-pista !important;
				border:2px solid @dark-pista !important; 
			}
		}
	}
	.component-body{
		img{
			width: 65%;
		    margin: 0px auto;
		    margin-top: 30px;
		    @media screen and (max-width:520px){
		    	width: 100%;
		    }
		}
	}
	.component-body{
		img{
			text-align: center;
	    	display: block;
    	}
    }
}

.alternate-stack{
	.blue-stack1, .blue-stack3, .blue-stack5{
		background-color:rgba(0, 156, 222, 0.25);
	}
}

.mcq-style{
	.mcq-header{
	    .mcq-body{
	        //width: 50rem;
		    text-align: left;
		    margin: 0 auto;
	    }
	}
}

.mcq-style label{
	background-color:@white !important;
	border: 1px solid #72c265 !important;
	color:@black !important;
}

.mcq-style-assessment label{
	background-color: #b5dfae !important;
    border: 1px solid #58b748!important;
    color: #000000 !important;
}

.accordion-style{
	.accordion-item-title{
		background-color:@white !important;
		border:1px solid @dark-pista !important; 
		color:@blue !important;
		padding-top: 15px !important;
   		padding-bottom: 15px !important;
   		font-size: 16px !important;
			.accordion-item-title-icon{
				color:@blue;
			}
			&:hover{
				background-color:@light-pista !important;
				border:1px solid @dark-pista !important; 
				color:@blue !important;
				.accordion-item-title-icon{
					color:@blue !important;
				}
			}
			&.selected {
				color:@blue !important;
				background-color: @light-pista !important;
				border-color: @dark-pista !important;

				.accordion-item-title-icon {
					color: @blue !important;
				}
			}
			&.visited {
				color:@blue !important;
				background-color: @light-pista !important;
				border-color: @dark-pista !important;

				.accordion-item-title-icon {
					color: @blue !important;
				}
			}
		}
		.accordion-item-body {
			background-color: @grey !important;
			border: none !important;
		}
		.accordion-item-text{
			float: right;
		    width: 50%;
		    font-size: 14px;
		    line-height: 1.6;
		    @media screen and (max-width:768px){////////////
				width:100%;
				float: none;
			}
		}
		.accordion-item-graphic{
			float: left;
		    width: 45%;
		    @media screen and (max-width:768px){///////////////
				width:100%;
				float: none;
			}
		}
	}

	.part-01-text{
		width: 70%;
		margin:0px auto;
		color:@white;
		//text-align:center;
		background-color:rgba(14, 115, 181, 0.8);
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		@media screen and (max-width:768px){
			width: 100%;
		}

		.component-title{
			color:@white;
			text-align: center;
			font-size: 42px;
		}
	}
	.part1-text{
		width:60%;
		margin:0 auto;
		@media screen and (max-width:520px){
			width:100%;
		}
		.part-subt{
			font-size:28px;
			font-weight:bold;
			text-align: center;
		}
	}

	.part-02-text{
		width: 70%;
		margin:0px auto;
		color:@white;
		text-align:center;
		background-color:rgba(81, 177, 84, 0.8);
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		@media screen and (max-width:768px){
			width: 100%;
		}

		.component-title{
			color:@white;
			//text-align: center;
			font-size: 42px;
		}
		.component-body{
		    text-align: left;
		}
		.part2-paraText{
		    text-align: center;
    		margin-bottom: 30px;
		}
	} 

	.part-03-text{
		width: 70%;
		margin:0px auto;
		color:#009cde;
		text-align:center;
		background-color:rgba(255, 255, 255, 0.8);
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		@media screen and (max-width:768px){
			width: 100%;
		}
		
		.component-title{
			color:@primary-color;
			margin-bottom: 40px;
			font-size: 42px;
			//text-align: center;
		}
		.component-body{
		    text-align: left;
		    margin: 0 auto;
		}
	}
	.part3-box1{
		margin-bottom:30px;
	}
	.part-03-text-mapd{
		width: 70%;
		margin:0px auto;
		color:#009cde;
		text-align:center;
		background-color:rgba(255, 255, 255, 0.8);
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		@media screen and (max-width:768px){
			width: 80%;
		}
		@media screen and (max-width:520px){
			width: 90%;
		}
		.component-title{
			color:@primary-color;
			margin-bottom: 40px;
			font-size: 42px;
			//text-align: center;
		}
		.component-body{
		    text-align: left;
		    margin: 0 auto;
    		font-size: 20px !important;
    		line-height: 1.5;
    		//width:80%;
		}
	}
	.part3-box1{
		margin-bottom:30px;
		text-align: left;
	}

	.numbered-text{
		.component-body{
		    text-align: center;
		    margin: 0 auto;
    		font-size: 20px !important;
    		line-height: 1.5;
		}
		.verticle-line-04{
			display: inline-block;
	    	text-align: left;
		}
	}

	.part-04-text{
		width:70%;
		margin:0px auto;
		color:#009cde;
		//text-align:center;
		background-color:rgba(255, 255, 255, 0.9);
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		@media screen and (max-width:768px){
			width: 100%;
		}

		.component-title{
			color:@primary-color;
			margin-bottom: 30px;
			font-size: 42px;
			text-align: center;
		}
		.component-body{
		    text-align: left;
		    font-size: 20px;
		    line-height: 1.4;
		    font-weight: bold;
		    //width: 80%;
    		margin: 0 auto;
		    p{
			    margin-top: 0px;
	    		margin-bottom: 0px;
		    }
		}
	} 
	.line{
		width:70%;
		height:1px;
		background-color:@white;
		margin: 5% auto;
		
	}

	.line-blue{
		width:100%;
		margin:0px auto;
		height:1px;
		background-color:#0075c1;
		margin-bottom: 5%;
	}

	.expose-style{
		margin:0px auto;
		//text-align: center;
		padding:50px 20px;
   		box-sizing: border-box;
   		@media screen and (max-width:1024px){
	        padding:30px;///////////
	    }
	    .expose-item{///////////////////////////////////////
	        @media screen and (max-width:520px){
	            width:100% !important;
	            margin-bottom: 10px;
	        }
	    }
		.component-title{
			text-align: center;
		}
		.component-widget{
			width:85%;
			margin:0px auto;
			  @media screen and (max-width:768px){
	            width:100% !important;
	     
	        }
		}
		.expose-item-inner {
			.expose-item-cover {
				.text{
					background-color: #ffffff !important;
					border: 1px solid #72c265 !important;
					color: #009cde !important;
					height:220px;
				}
			}
		}
		.expose-item-content {
			background-color: #b5dfae !important;
			height:220px !important;
			border:1px solid #72c265 !important;
			//display: flex;
			//align-items: center;
			//justify-content: center;
			font-size: 14px;
    		line-height: 1.5;
    		text-align: left;
    		overflow-y:auto;///////////////////
        	overflow-x: hidden;///////
		}
	}

	.expose-style-02{
		margin:0px auto;
		text-align: left;
		padding:50px 20px;
		background-color: #fff;
		.component-body{
			font-size: 16px;
		}

		.expose-item {
			margin-bottom: 20px;
			@media screen and (max-width:1024px){
	        width: 48% !important;
            float: left;
            margin-right: 10px;
	        }
	        @media screen and (max-width:520px){
	            width:100% !important;//////////
	        }
			img{
				width: 40%;
				@media screen and (max-width:1024px){
		            width:30% !important;//////////
		        }
			}
		}
		.expose-item-body{
			font-size: 14px;
		    line-height: 1.3;
		    text-align: center;
		    padding: 0px !important;
		}
		.component-title{
			text-align: center;
		}
		.component-widget{
			width:100%;
			//margin:0px auto;
		}
		.expose-item-inner {
			.expose-item-cover {
				.text{
					background-color: #ffffff !important;
					border: 1px solid #72c265 !important;
					color: #009cde !important;
					height:215px;
					padding:10px;
					box-sizing: border-box;
					-ms-box-sizing: border-box;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
				}
			}
		}
		.expose-item-content {
			background-color: #b5dfae !important;
			height: 210px !important;
			border:1px solid #72c265 !important;
			word-break: break-word;
			overflow-y: auto;
		}
	}

	.part01-last-component{
		margin:0px auto;
		text-align: center;
		color:@primary-color;
		font-size: 32px;
    	font-weight: bold;
    	line-height:1.3;
	}

	.center-component{
		.component-title, .component-body, .component-instruction{
			//text-align: center;
			//margin:0px auto;
		}
	}
	.center-component-body-left{
		.component-title, .component-instruction{
			text-align: center;
		}
		.component-body{
			text-align: left;
			font-size: 14px;
    		line-height: 1.4;
    		p{
    			margin-top: 0 !important;
    			margin-bottom: 0 !important;
    		}
    		img{
	    		margin-top: 40px;
	    		margin-bottom: 20px;
    		}
		}
	}

	.main-title-3blocks{
		.component-title{
			text-align: center;
			margin:0px auto;
			color: #46b035;
    		font-size: 52px;
    		margin-bottom: 50px;
		}
	}
	.main-block-3pages{
		.block-inner{
			padding:60px 0px 0px !important;
		}
	}
	.article-center{
	.article-inner{
			padding:0px 0px 0px !important;
		}
	}

.dnd-text{
	.text-body{
		color:@blue;
	    font-size: 28px;
	    line-height: 1.2;
	}
	.component-title{
		text-align: center;
	}	
}

///////theme for DragNDrop component////////
////theme for DragNDrop component////////

.dragAndDrop-component{
	.dragAndDrop-inner{
		.dragAndDrop-draggables-container{
			.dragAndDrop-item-draggable-wrapper{
				position: relative;
				float: left;
				margin-right: 20px;
				padding-bottom: 35px;
				width: 17% !important;
    			height: 14% !important;
				@media screen and (max-width:520px){
					width: 25% !important;
			   }
			}
			.dragAndDrop-item-draggable{
				padding-top: 10px;
				color: #000 !important;
				font-size: 12px;
				border: 2px dashed #64af62;
				padding-left: 20px;
				background-color:#ffffff;
				height:40px !important;
				line-height: 1.4;
			}
		} 
		.dragAndDrop-item-background{
			border: 2px solid #64af62 !important;
			background-color: rgba(186, 186, 186, 0) !important;
			margin-right: 0.5% !important;
		}
		.drag-item{
			width: 90%;
			position: relative;
			top: 0;
			left: 0;
			margin: 0 auto;
			height: auto;
			//margin-top: 12%;
			right: 0;
			@media screen and (max-width:768px){
				//margin-top: 28%;
			}
		}
	} 
} 

.verticle-line {
	border-left: 4px solid @blue;
    margin-left: 20px;
    padding-left: 18px;
}

.verticle-line-02 {
	border-left: 4px solid @blue;
    margin-left: 20px;
    padding-left: 18px;
}
.verticle-line-03 {
	border-left: 4px solid @blue;
    margin-left: 20px;
    padding-left: 18px;
}
.verticle-line-04 {
	display: inline-block;
    text-align: left;
}
.part2-para{
	font-size:14px;   
	margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
}
.para2-box1{
	margin-top: 15px;
    font-size: 20px;
    margin-bottom: 5px;
}
.para5-box5{
    font-size: 20px;
    width: 86%;
    margin: 45px auto;
}

.part2-3{
	background-image:url('assets/part2-3.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:750px;
		.block-inner{
			padding:0px;
		}
	}
}

.line-green{
	width:70%;
	margin:0px auto;
	height:1px;
	background-color:#46b035;
	margin-bottom: 5%;
}

.left-title{
	.component-title{
		text-align:center;
	}
}
.part2-text-page{
	.text-header{
		text-align: center;
	}
	.component-title{
		display: inline-block;
	    text-align: left !important;
	    .mid-title{
	    	text-align: center;
	    }
	}
	.text-body{
		text-align: left;
	}
}

.tab-style{
	.tabs-content-items{
		background-color:#e0f2fc;
	}
	.tab-item-inner{
		background-color:#63666A !important;
		padding: 25px 5px 25px;
	    box-sizing: border-box;
	    height: 70px;
	    font-weight: bold;
	    @media screen and (max-width:1024px){
			 font-size: 12px;
		}
	    @media screen and (max-width:768px){
			 height: 120px;
		}
	}
	.tab-item{
		@media screen and (max-width:520px){
			 height: 150px;
		}
	}
	ul li{
		margin-left: 0px;
	}
	p{
		overflow-wrap: break-word;
		word-wrap:break-word;
	}
}

.article04{
	background-image:url('assets/article-04.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:600px;
		.block-inner{
			padding:0px;
		}
		@media screen and (max-width:1024px){
			height:400px;
		}
	}
}

.completion{
	background-image:url('assets/completion.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
	.article-inner{
		padding:0px;
	}
	.block{
		background-color:transparent !important;
		height:600px;
		.block-inner{
			padding:0px;
		}
	}
}

.completion-text{
	width: 70%;
	margin:0px auto;
	text-align: left;
	background-color:rgba(255, 255, 255, 0.8);
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	@media screen and (max-width:768px){
		width: 80%;
	}
	@media screen and (max-width:520px){
		width: 90%;
	}
	.component-title{
		color:#0075c1;
		text-align: center;
	}
	.close-button{
		border-radius: 40px;
	    width: 140px;
	}
} 

.tab-02-article{
	.article-inner{
    	padding: 0px 0 60px !important;
    }
}
.tab-01-article{
	.article-inner{
    	padding: 60px 0 0px !important;
    }
}
.first-stack{
	.stacklist-items{
		width: 70%;
		margin: 0 auto;
		@media screen and (max-width:520px){
			width: 100%;
		}
	}
}
.incorrect{
	.notify-popup{
		background-color: #B5DFAE !important;
	}
	.notify-popup-body{
		color:#000137 !important;
	}
	.notify-popup-done{
		border:2px solid #000137 !important;
		.notify-popup-icon-close{
			color:#000137 !important;
		}
	}
}
.correct{
	.notify-popup{
		background-color: #5CA50B !important;
	}
}
.block-zero{
    .block-inner{
        padding:0;
    }
    .component {
        .component-inner{
            padding:0;
        }
    }
}


.trickle-button-inner{
	button{
	    background-color: #fff !important;
	    width: 25% !important;
	    color: #009cde !important;
	    border-radius: 50px !important;
	    border:2px solid #009cde;
	    font-weight: bold !important;
		@media screen and (max-width:1024px){
			width: 27% !important;
		}
	    @media screen and (max-width:768px){
			width: 60% !important;
		}
	    &:hover{
	    	border:2px solid #009cde !important;
	    }
	}
}
.page-trickle{
	.trickle-button-inner{
		button{
		    background-color: #009cde !important;
		    width: 50% !important;
		    color: #fff !important;
		    border-radius: 20px !important;
		    font-weight: bold !important;
		    @media screen and (max-width:768px){
				width: 70% !important;
			}
		}
	}
}
.mcq-patch{
	.trickle-button-inner{
		button{
		    background-color: #009cde !important;
		    width: 50% !important;
		    color: #fff !important;
		    border-radius: 0px !important;
		    font-weight: bold !important;
		    width: 72% !important;
		    @media screen and (max-width:768px){
				width: 70% !important;
			}
		}
	}
	.white-patch{
    	padding: 50px 20px 0px 20px !important;
	    box-sizing: border-box;
	    margin-bottom: 20px !important;
	}
}
.trickle-button-component{
	.component-inner{
		padding: 20px !important;
		@media screen and (max-width:520px){
			padding: 0px !important;
		}
	}
}

.notify-popup-body{
	@media screen and (max-width:760px){
		a{
			word-break: break-word;
		}
	}
}
.notify-popup-title{
	display:none;
}
.pins-bottom{
	.block-inner{
		padding:60px 0px 120px !important;
	}
}
.tick-img li{
	list-style-image: url(course/en/images/tick-mark01.png);
	margin-left:20px !important;
}
.tab-left-p{
	margin-left:20px !important;
	font-weight:bold;
}
.middle-text-stack{
	width: 40rem;
    text-align: left;
    margin: 0 auto;
		@media screen and (max-width:760px){
		width: auto;
		}
}
.text-img-ipad{
	.article-inner {
		padding: 0px 0px 60px !important;
	}
} 
// Below codes added by Chetan
.avoid-word-break {
	white-space: nowrap;
}
.loading {
	.loader-gif {
		top: 45%;
        left: 45%;
	}
}
@media screen and (max-width:520px){
	.flipcard-item {
		margin: 0 0 10px 0 !important;
	}
}

.c-110 {
	.hotgraphic-graphic {
		img {
			width: 100%;
		}
	}
}
.b-90 {
	.trickle-button-inner{
		button{
		    @media screen and (max-width:1024px){
				width: 42% !important;
			}
		}
	}
}
.hotgraphic-graphic-pin-icon{
	@media screen and (max-width:1366px){
		font-size: 38px !important;
		height: 38px !important;
		width: 38px !important;
	}
	@media screen and (max-width:1024px){
		font-size: 30px !important;
		height: 30px !important;
		width: 30px !important;
	}
	@media screen and (max-width:768px){
		font-size: 25px !important;
		height: 25px !important;
		width: 25px !important;
	}
}