@font-face {
    font-family: 'Nissan Brand Light';
    src: url('fonts/NissanBrand-Light.eot');
    src: url('fonts/NissanBrand-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/NissanBrand-Light.woff') format('woff'),
         url('fonts/NissanBrand-Light.ttf') format('truetype'),
         url('fonts/NissanBrand-Light.otf') format('otf'),
         url('fonts/NissanBrand-Light.svg') format('svg');
  }
  @font-face {
    font-family: 'Nissan Brand Regular';
    src: url('fonts/NissanBrand-Regular.eot');
    src: url('fonts/NissanBrand-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/NissanBrand-Regular.otf') format('otf'),
         url('fonts/NissanBrand-Regular.svg') format('svg'),
         url('fonts/NissanBrand-Regular.ttf') format('truetype'),
         url('fonts/NissanBrand-Regular.woff') format('woff');
         font-weight: 400;
  }
  @font-face {
    font-family: 'Nissan Brand Bold';
    src: url('fonts/NissanBrand-Bold');
    src: url('fonts/NissanBrand-Bold?#iefix') format('embedded-opentype'),
         url('fonts/NissanBrand-Bold.otf') format('otf'),
         url('fonts/NissanBrand-Bold.svg') format('svg'),
         url('fonts/NissanBrand-Bold.ttf') format('truetype'),
         url('fonts/NissanBrand-Bold.woff') format('woff');
         font-weight: 700;
  }
  body {
    padding: 0;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    background: #fff;
    font-size: 16px;
    /* font-family: 'Calibri'; */
    font-family: 'Nissan Brand Regular';
    font-weight: 200;
}
body.whiteText{
 color: white;
}
*{
    outline: none;
}
*:focus{
    outline: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
ul li,
ol li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.slide ul,
.slide ol{
    margin-bottom: 16px;
    list-style: inherit;
}
.slide ol li{
    margin-left: 30px;
    list-style: decimal;
}
.slide ul li{
    margin-left: 30px;
    list-style: disc;
}
body p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
img {
    max-width: 100%;
}

.sec_main {
	width: 100%;
	position: absolute;
	height: 100%;
	margin: auto;
	bottom: 0;
    overflow: hidden;
    /* background-image: linear-gradient(#6B0317,#C40B37); */
    background-color: #1d2124;  
}

#content{
    /* min-height: 100vh; */
    height: auto;
    padding-top: 100px;
    width: 100%;
    position: relative;
    background-position: center;
    background-size: cover;
    padding-top: 74px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#content::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgb(72 62 62 / 40%);
}
.page_container{ 
    width: calc(100% - 140px);
    float: none;
    margin: 0 auto;
    height: 100%;
    /* min-height: 100vh; */
    position: relative;    
    padding: 66px 0px 0px 0px;
}
.page_container.fullwidth{
    width: 100%;   
    padding: 66px 70px;
    /* height: 1100px; */
    /* max-height: 100vh; */
}
.minHeightAuto{
    min-height: auto;
}
.content_sec {
    width: 100%;
    position: absolute;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
    scrollbar-width: thin;
    background-color: #0A0A0A;
    background-color: #C7BC6E;  
}
.preloader,
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
}
.loader {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}
.preloader_inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    font-size: 1.5em;
    font-family: monospace;
    font-weight: 300;
    color: #000;
}

.pg1_container {
    float: none !important;
    min-height: 100vh !important;
}
.star_centre {
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    height: calc(100vh - 54px);
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.star_centre_popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 502px;
    height: 344px;
    background: url(../images/star_centre_bg.png) no-repeat;
    padding: 10px;
    background-size: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 5px 0 #989898;
    border-radius: 20px;
}

.sc_close_btn {
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 0px 20px 0 15px;
    padding: 3px 13px 7px;
    background: #d8d8d8;
    cursor: pointer;
    font-size: 16px;
}

.sc_avatar {
    float: left;
    width: 100%;
}

.sc_avatar img {
    float: left;
    width: 196px;
    margin: -98px calc(50% - 98px) 0;
}

.sc_list {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin-top: 15px;
}

.sc_list li {
    float: left;
    width: 16.6%;
    margin-top: 10px;
}

.next_continue {
	position: absolute;
	padding: 8px;
	right: 150px;
	bottom: 10px;
	background: #0d0d0d;
	width: auto;
	color: #fff;
	box-sizing: border-box !important;
	font-size: 14px;
	display: none;
	border-radius: 3px 0 0 3px;
	min-height: 36px;
}

.next_continue span {
    padding: 10px;
}

header {
    min-height: 36px;
    z-index: 14;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 40px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -8px inset; */
    position: fixed;
    width: 100%;
    height: 66px;
    /* background: rgb(255 255 255 / 30%);
    background: linear-gradient(rgba(85, 89, 90, 1) 0%, rgba(117, 121, 131, 0.5) 50%, rgba(0, 0, 0, 0) 100%); */
    backdrop-filter: blur(7px);
    background: rgb(0 0 0 / 15%);
}
.footer {
    background: transparent;
    min-height: 54px;   
    position: absolute;
    display: block;
    z-index: 15;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 40px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -8px inset; */
    position: fixed;
    width: 100%;
}
.top_w {
    width: 100%;
    position: fixed;
    background: #fff;
    height: 30px;
    top: 0;
    z-index: 1;
}

/* header.fixed {
    background: linear-gradient(rgba(85, 89, 90, 1) 0%, rgba(117, 121, 131, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

.footer.fixed {
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(117, 121, 131, 0.5) 50%, rgba(85, 89, 90, 1) 100%);
} */
footer {
    background: #171717;
    height: 48px;
    width: 95%;
    position: fixed;
    bottom: 2%;
    z-index: 1000;
    display: none;
}

footer * {
    box-sizing: initial !important;
}

content {
    width: 100%;
    height: calc(100vh - 54px);
    position: relative;
    display: block;
    background: url("../images/bg.jpg") no-repeat center bottom;
    background-size: cover;
    background-attachment: fixed;
}


.mobile_html{
    display: none;
}
.mobile_header_bg{
    position: relative;
    background-size: auto 100%;
    background-position: center;
}
container {
    width: 100%;
    /* height: 100%; */
    position: relative;
    display: block;
    font-size: 20px;
}
section {
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: auto;
    padding: 0 !important;
}
.offScreen{
    opacity: 0.5;
}
.offScreen .content::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(0 0 0 / 30%);
    z-index: 9999999;
}
header h1 {
	width: 100px;
	float: left;
	position: relative;
	height: auto;
}
.header_container{
    position: relative;
    display: flex;
    height: 100%;
    z-index: -1;
}
header .site_logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    bottom: 0;
    margin: auto;
    width: auto;
    height: 70%;
    z-index: -1;
}
.web_link{
    position: absolute;
    left: auto;
    right: 0;
    height: 50%;
    top: 0;
    bottom: 0;
    margin: auto 20px auto auto;
}
.globe{
    height: 100%;
}
.header_left,.header_right{    
    display: flex;
    align-items: center;
    align-self: center;
    z-index: -1;
}

.header_title{
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
.estimated_time {
    position: absolute;
    left: auto;
    right: 0;
    height: auto;
    margin: auto 70px auto auto;
    text-transform: uppercase;
    z-index: -1;
}
span.menu_head_estimated_time {
    display: none;
    font-size: 16px;
    font-weight: 100;
    font-family: 'Nissan Brand Light';
}
.menu_head_estimated_time .est_time,
.estimated_time .est_time{
    letter-spacing: 1.5px;
}
.footer ul {
    width: auto;
    border-left: 1px solid #464545;
    padding: 0;
    margin: 0;
}

footer ul li {
    float: left;
    opacity: 0.5;
    min-height: 30px;
    min-width: 44px;
    padding: 12px 0 6px 0;
    margin: 0;
    text-align: center;
    border-right: 1px solid #464545;
    transition: all 0.5s;
}

footer ul li:nth-child(1) {
    opacity: 1;
}

footer ul.right li:nth-child(1) {
    min-width: 76px;
}

footer ul li.enable {
    opacity: 1;
    cursor: pointer;
}

footer ul li.enable:hover {
    background: #009ad9;
}

footer div {
    float: left;
    width: calc(100% - 380px);
    padding: 5px 15px 15px 15px;
    min-height: 14px;
    text-align: center;
    color: #fff;
}

footer div span.bar {
    background: #747474;
    width: 100%;
    height: 7px;
    position: relative;
    float: left;
    opacity: 0.5;
}

footer div span span.progress {
    background: #e3e3e3;
    width: 30%;
    height: 7px;
    float: left;
    max-width: 100% !important;
}

#seekPosition.enable {
    opacity: 1;
    cursor: pointer;
}

.play-btn .img_play {
    display: inline;
}

.play-btn .img_pause {
    display: none;
}

.pause-btn .img_pause {
    display: inline;
}

.pause-btn .img_play {
    display: none;
}

.bg {
    background: #181717
}

.hide {
    display: none;
}
.dflex.hide{
    display: none;
}
.right {
    float: right;
    position: fixed;
    bottom: 0;
    /* width: calc(100% - 60px); */
    z-index: 10;
    margin: 0;
}

#menuCon {
    position: fixed;
    width: 400px;
    color: #fff;
    display: none;
    z-index: 12;
    overflow-y: auto;
    left: 0;
    top: 66px;
    overflow-x: hidden;
    padding: 20px;
    background: var(--menu_bg);
    border-radius: 0 0 20px 0px;
    scrollbar-width: thin;
    backdrop-filter: blur(7px);
    top: 0;
    padding-top: 66px;
    max-height: 100vh;
}
li.menu_visible.enable:not(.currentMenu):hover{
    background-color: #C7BC6E;
}
#menuCon li .ul_open{
    display: block;
}
#menuCon .menu_visible.currentMenu{
    cursor: default;
    /* pointer-events: none; */
}
.menu_overlay,.dropdown_overlay,.modal_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    display: none;
    background: var(--modal_bg);
    border-radius: 40px 40px 0 0;
}

.hidden {
    display: none !important;
}

#menuCon li {
    float: right;
    width: 100%;
    cursor: default;
    margin: 2px 0;
    padding: 5px 10px;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    color: white;
    text-transform: uppercase;
}
#menuCon>li {
    padding-left: 0;
}
#menuCon li:not(.currentMenu).enable {
	cursor: pointer;
    color: #fff;    
    transition: all 0.3s ease-out;
}
#menuCon li ul li.currentMenu {
	background: #C7BC6E !important;   
    transition: all 0.3s ease-out;
}
#menuCon li img {
    float: left;
    margin: 5px 3px;
    visibility: hidden;
}

#menuCon li span {
    float: left;
    width: 20px;
    position: relative;
    text-align: center;
    margin-left: 1%;
}
#menuCon li div {
	float: left;
	width: calc(100% - 60px);
	padding-left: 10px;
}
#menuCon li ul {
	list-style: none;
	float: left;
	margin-left: 0%;
	padding-left: 0%;
	width: 100%;
	color: #000;
	display: none;
	position: relative;
}
#menuCon li ul li {
    padding-left: 30px;
    position: relative;
    float: none;
    width: calc(100% - 30px);
    overflow: hidden;
    margin-left: 30px;
    background: #bbb9b9;
}
#menuCon li ul li span {
    margin-right: 10px;
    float: none;
    position: absolute;
    left: 0;
    top: 5px;
}
#menuCon li ul li.enable {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;    
    background: transparent;
}
#menuCon li ul li.enable:not(.currentMenu):hover {
	background: #C7BC6E;
}
.audTimer {
    float: right;
    font-size: 13px;
}

.pgNoCon {
    float: right;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 18px;
    padding: 0 0 0 28px;
}

.page_contents{
    width: calc(100% - 60px);    
    margin: 0 auto;
}
.slide_container {
    padding: 30px 20px;
    background: #294C72;
    z-index: 1;
    position: relative;
    font-size: 18px;
    max-width: 450px;
}
.glowing_animation {
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}


/* --------------------new css--------------------------- */
.Menu_lists {
    float: left;
    padding: 0;
    margin: 0;
    /* margin-left: 30px; */
    margin-top: 40px;
}

.Menu_lists li {
    width: auto;
    float: left;
    margin: 0 15px;
    text-transform: uppercase;
    position: relative;
    color: #fff;
}

.Menu_lists li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    /* background-color: #efac41; */
    bottom: -15px;
}
.menu_toc {
    cursor: pointer;
    color: #fff;
    height: 30px;
    width: 30px;
    margin: 0 20px;
    position: relative;
}
.menu_toc:hover {
    color: #C7BC6E;
}
.menu_toc span{
    font-size: 0;
}
.menu_toc::before, .menu_toc::after,.menu_toc span::before {
    border-radius: 3px;
    border-top: 3px solid;
    content: '';
    display: block;
    height: 0;
    left: 50%;
    opacity: 1;
    position: absolute;
    transition: all .5s;
    width: 100%;
}
.menu_toc::after {
    margin-top: -3px;
    top: 90%;
    transform: translate(-50%,0);
}
.menu_toc::before {
    margin-top: 3px;
    top: 0%;
    transform: translate(-50%,0);
}
.menu_toc span::before {
    top: 50%;
    transform: translate(-50%,-50%);
}

.menu_toc.open::before {
    transform: translate(-50%,10px) rotate(45deg);
    top: 2%;
}
.menu_toc.open::after {
    transform: translate(-50%,-10px) rotate(-45deg);
    top: 80%;
    margin-top: 0;
}
.menu_toc.open span::before {
    opacity: 0;
}

.scroll_instruction{
    position: fixed;
    bottom: 5px;
    background: transparent;
    user-select: none;
    margin: auto;
    left: 0;
    right: 0;
    width: 45px;
    pointer-events: none;
}
.scroll_up_instruction{
    position: absolute;
    bottom: 5px;
    z-index: 10;
    right: 20px;
    cursor: pointer;
    user-select: none;
}
.scroll_up_instruction .scrollOval div{
	margin-top: 10px;
}
.scroll_up_instruction .scrollOval {
	padding-top: 7px;
}
.scrollOval{
    background: rgb(42 42 42 / 15%);
    color: white;
    padding: 20px 0;
    border-radius: 70px;
    width: 45px;
    height: 70px;
    text-align: center;
    border: 3px solid white;
    font-size: 12px;
    padding-top: 13px;
}
.scrollOval img {
	position: relative;
    display: block;
    margin: 0px auto;
    width: 20px;
}
.lock_button {
	position: fixed;
    bottom: 5px;
    z-index: 2;
    right: 0;
    user-select: none;
    width: 45px;
    height: 45px;
    left: 0;
    margin: auto;
}
.lock_button img {	
    width: 100%;
    border-radius: 50%;
	background: rgb(42 42 42 / 15%);
    border: 3px solid white;
    padding: 5px;
}
#next, .exit_btn, #skip, #module {
	position: absolute;
	right: 32px;
    background-color:rgba(61, 53, 50,0.6);
	bottom: 10px;
	padding: 4px 8px;
	cursor: pointer;
	transition: all .3s ease-out;
	/* width: 100px C7BC6E;
	height: 35px; */
	z-index: 1002;
	text-align: right;
}
#skip:hover {    
	background-color: rgba(61, 53, 50,1);;
}
#next span, #skip span, #module span {
	position: relative;
	float: left;
	width: 64%;
	margin-top: 3px;
	font-size: 14px;
	color: #fff;
}
#next img, #skip img, #module img {
	width: 17px;
	margin-top: 4px;
}
#previous img {
	width: 17px;
	margin-top: 4px;
}
#previous.enable,#previous {
    position: absolute;
    left: 32px;
    background-color: rgba(61, 53, 50,0.6);
    bottom: 10px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all .1s ease-out;
    width: 100px;
    height: 35px;
    z-index: 1002;
}
.disable {
    background-color: #a6a6a6;
    pointer-events: none;
}
#previous span {
    position: relative;
    float: right;
    width: 75%;
    margin-top: 3px;
    font-size: 14px;
    color: #fff;
}
#previous.enable:hover {
    background-color: #3c3a39;
    background-size: 100% 100%, auto;
}

#next.enable:hover,
.exit_btn:hover, 
#skip.enable:hover,
#module.enable:hover {
    background-color: #3c3a39;
    background-size: 100% 100%, auto;
}

.next_continue::before {
	content: '';
	position: absolute;
	border-bottom: 12px solid transparent;
	right: -12px;
	border-top: 12px solid transparent;
	border-left: 12px solid #0d0d0d;
	top: 8px;
}

.menu_head_txt {
    margin-top: 5px;
    width: 100px;
    display: block;
    float: left;
}

.menu_head {
    width: 100%;
    float: left;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.save_head {
    width: 100%;
    float: left;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    margin-left: 5%;
    margin-bottom: 10px;
}

.save_head_txt {
    margin-top: 7px;
    display: block;
    float: left;
    /* margin-left: 7%; */
}

.cl_white {
    color: #fff;
}

.exit_course,
.returnCourse {
    color: #FF0000;
    width: 75%;
    padding: 10px;
    font-size: 17px;
    border-radius: 2px;
    margin: auto;
    text-align: left;
    background-image: linear-gradient(#f0ad43, #f0ad43), linear-gradient(#fff, #fff);
    background-size: 0 5px, auto;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .4s ease-out;
}

.exit_course:hover,
.returnCourse:hover {
    background-color: #f0ad43;
    background-size: 100% 100%, auto;
}

.fl_left {
    width: 100%;
    float: left;
}

.txt_center {
    text-align: center;
}

.ml_5per {
    margin-left: 5%;
}

.fn_size {
    font-size: 18px;
}
.fn_size14{
    font-size: 14px;
}
.mb_10 {
    margin-bottom: 10px;
}

button {
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

.progress_bar {
	width: 0%;
	float: left;
	height: 100%;
	background: #FF0000;
	transition: .2s all ease-in-out;
	overflow: hidden;
	max-width: 100%;
	height: 5px;
}
.progress_sec {
    width: 100%;
    position: absolute;
    top: 0;
    height: 5px;
    border: 1px;
    background: transparent;
}

.fa-arrow-right,
.fa-arrow-right.completed {
    visibility: hidden;
    width: 40px;
}
.tickmark {
    visibility: hidden;
    display: none;
}

.completed .tickmark {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 18px;
    padding: 6px 7px;
    border-radius: 50%;
    background: #fff;
    margin-right: 10px;
    border: 1px solid #ba0c2f;
    visibility: visible;
    display: block;
}

.menu_visible.highlighted .fa-arrow-right {
	width: 16px;
	height: 18px;
	padding: 6px 7px;
	border-radius: 50%;
	background: #fff;
	margin-right: 10px;
	border: 1px solid #ba0c2f;
	visibility: visible;
	z-index: 2;
	color: #ba0c2f;
}
.page_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
    display: none;
    background: rgb(0, 0, 0, 0.7);
}
.insidepg_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
}

.visited .visited_tick {
    display: block;
    right: -8px;
    z-index: 2;
    width: 25px;
    height: 25px;
    /* padding: 1px 3px; */
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ba0c2f;
    top: -7px;
    font-size: 17px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: #000;
}
.visited_tick {
    position: absolute;
    display: none;
}
.exit_btn {
    color: #fff;
    font-size: 18px;
}
.video_overlay_sec {
    position: absolute;
    width: 100%;
    /* top: 0; */
    bottom: 0;
    height: calc(100% + 54px);
    z-index: 1;
}
.common_play_icon,.custom_play_icon {
    position: absolute;
    top: calc(50% - 10px);
    /* transform: translate(-50%, -50%); */
    left: calc(50% - 37px);
    border-radius: 50%;
    width: 74px;
    height: 74px;
    text-align: center;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: all .2s ease-out;
    box-shadow: aliceblue;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 0px 10px -8px inset;
    z-index: 1;
    background-color: rgba(255, 255, 255,0.5);
    backdrop-filter: blur(19px) brightness(200%);
}
.play_waves{
    box-shadow: none;
    background-color: transparent;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 37px);
    border-radius: 50%;
    width: 74px;
    height: 74px;
    text-align: center;
    cursor: pointer;
    z-index: 0;
}
.common_play_icon:hover i,.custom_play_icon:hover i {
    color: #f9f9f9;
}
.common_play_icon i,.custom_play_icon i {
    font-size: 30px;
    color: #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 31px;
    left: 0;
    right: 0;
    left: 6px;
}
.common_play_icon::before,.custom_play_icon::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #c7bc6e;
    color: #fff;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.common_play_icon:hover::before,.custom_play_icon:hover::before {
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 0;
}

.common_play_icon::after,.custom_play_icon::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    z-index: -1;
    animation: pulseRounded 1.2s infinite ease-in-out;
    box-shadow: 0 0 0 1.5rem transparent;
}
.custom_play_icon_2 {
    width: 200px;
    height: 200px;
    background-image: url(../images/hotspot_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: -30px;
    left: 0;
    transition: none;
}
.custom_play_icon_2::before{    
    transform: scale(1);
    background: transparent;
}
.custom_play_icon_2:hover::before{
    background: transparent;
    transition: none;
    transform: scale(1);
}
.custom_play_icon_2:hover i{
    color: #C3002F;
}
.custom_play_icon_2 i {
    font-size: 70px;
    height: 70px;
    left: 16px;
}
/* -----------------new css ends here -------------------------*/
@-webkit-keyframes glowing {
    0% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
    50% {
        background-color: #f98e00;
        -webkit-box-shadow: 0 0 25px #f08900;
    }
    100% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
}

@-moz-keyframes glowing {
    0% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
    50% {
        background-color: #f98e00;
        -webkit-box-shadow: 0 0 25px #f08900;
    }
    100% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
}

@-o-keyframes glowing {
    0% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
    50% {
        background-color: #f98e00;
        -webkit-box-shadow: 0 0 25px #f08900;
    }
    100% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
}

@keyframes glowing {
    0% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
    50% {
        background-color: #f98e00;
        -webkit-box-shadow: 0 0 25px #f08900;
    }
    100% {
        background-color: #005575;
        -webkit-box-shadow: 0 0 3px #005575;
    }
}

.close_animation {
    -webkit-animation: close_btn_animation 1500ms infinite;
    -moz-animation: close_btn_animation 1500ms infinite;
    -o-animation: close_btn_animation 1500ms infinite;
    animation: close_btn_animation 1500ms infinite;
}

@-webkit-keyframes close_btn_animation {
    0% {
        background-color: #dedede;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #dedede;
    }
}

@-moz-keyframes close_btn_animation {
    0% {
        background-color: #dedede;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #dedede;
    }
}

@-o-keyframes close_btn_animation {
    0% {
        background-color: #dedede;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #dedede;
    }
}

@keyframes close_btn_animation {
    0% {
        background-color: #dedede;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #dedede;
    }
}

.video_close {
    -webkit-animation: video_close_animation 1500ms infinite;
    -moz-animation: video_close_animation 1500ms infinite;
    -o-animation: video_close_animation 1500ms infinite;
    animation: video_close_animation 1500ms infinite;
}

video {
    border-radius: 0px 0px 0 0 !important;
    position: absolute;
    margin: auto !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* height: 100%; */
    background: rgba(0, 0, 0, 0.5);
}

@-webkit-keyframes video_close_animation {
    0% {
        background-color: #b9b9b9;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #b9b9b9;
    }
}

@-moz-keyframes video_close_animation {
    0% {
        background-color: #b9b9b9;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #b9b9b9;
    }
}

@-o-keyframes video_close_animation {
    0% {
        background-color: #b9b9b9;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #b9b9b9;
    }
}

@keyframes video_close_animation {
    0% {
        background-color: #b9b9b9;
    }
    50% {
        background-color: #f98e00;
    }
    100% {
        background-color: #b9b9b9;
    }
}

.game_close {
    -webkit-animation: game_close_animation 1500ms infinite;
    -moz-animation: game_close_animation 1500ms infinite;
    -o-animation: game_close_animation 1500ms infinite;
    animation: game_close_animation 1500ms infinite;
}

@-webkit-keyframes game_close_animation {
    0% {
        background-color: #ffffff;
    }
    50% {
        background-color: #a9305b;
    }
    100% {
        background-color: #ffffff;
    }
}

@-moz-keyframes game_close_animation {
    0% {
        background-color: #ffffff;
    }
    50% {
        background-color: #a9305b;
    }
    100% {
        background-color: #ffffff;
    }
}

@-o-keyframes game_close_animation {
    0% {
        background-color: #ffffff;
    }
    50% {
        background-color: #a9305b;
    }
    100% {
        background-color: #ffffff;
    }
}

@keyframes game_close_animation {
    0% {
        background-color: #ffffff;
    }
    50% {
        background-color: #a9305b;
    }
    100% {
        background-color: #ffffff;
    }
}

/* OSS CSS */
.heading {
    font-size: 44px;
    margin-bottom: 20px;
    line-height: 1;
}
.heading1 {
    font-size: 65px;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1;
}
.heading2 {
    font-size: 30px;
    line-height: 1.2;
}
.heading3 {
    font-size: 20px;    
    font-family: 'Nissan Brand Bold';
    font-weight: 700;
}
.topic_title_inline { 
    font-family: 'Nissan Brand Bold';
    font-weight: 600;
    z-index: 1;
    position: relative;
    max-width: 1780px;
    margin: 0 auto;
    width: 100%;
}
.title_screen .topic_title_inline{
    color: white;
}
.title_screen video{
    height: 100%;
    background: black;
    width: 100%;
}
.topic_title_big{
    font-size: 200px;
    text-transform: uppercase;    
    font-family: 'Nissan Brand Bold';
}
.page_title_inline {
    font-size: 70px;
    text-transform: uppercase;
    line-height: 1;
    text-indent: 0px;
    padding-bottom: 16px;
    min-height: 40px;
    z-index: 0;
    position: relative;
}
.page_title_right_col{
    padding: 0;
    position: absolute;
    top: 66px;
    right: 15px;
}
.page_title_center{
    padding: 0 10px;
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.zindex1{
    z-index: 1;
    position: relative;
}

*{
    box-sizing: border-box;
}

.vCenter{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
}
.activity_container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: white;
    background: transparent;
    padding: 10px 0px;
    padding-bottom: 100px;
}

/* loading slider */
.loading#preloader{
    background-color: rgb(0 0 0 / 70%);
    color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    z-index: 100;
}
.loading__inner,.loading__inner:before,.loading__inner:after {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    animation-fill-mode: both;
    animation: loading 1.25s infinite ease-in-out
}
.loading__inner {
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    margin: auto;
    text-indent: -9999rem;
    animation-delay: -0.16s;
    transform: translateZ(0);
    bottom: 0;
}
.loading__inner:before,.loading__inner:after {
    content: "";
    position: absolute;
    top: 0
}
.loading__inner:before {
    left: -3rem;
    animation-delay: -0.32s
}
.loading__inner:after {
    left: 3rem
}
@keyframes loading {
    0%,80%,100% {
        box-shadow: 0 2.5rem 0 -1.3rem
    }

    40% {
        box-shadow: 0 2.5rem 0 0
    }
}
.dflex{
    display: flex;
}
.dflex_left{
    width: calc(50% - 10px);
    margin-right: 10px;
}
.dflex_right{
    width: calc(50% - 10px);
    margin-left: 10px;
}
.bullet_list li{
    list-style: disc;
    margin-left: 30px;
    margin-bottom: 10px;
}
.text-align-center{
    text-align: center;
}
.justify-content-space-beetween{
    justify-content: space-between !important;
}
.justify-content-flex-start{
    justify-content: flex-start !important;
}
.justify-content-flex-end{
    justify-content: flex-end;
}
.text-align-right{
    text-align: right;
}
.whiteText{
    color: white;
}
.whiteTextImpr, .tabs_parent .whiteTextImpr.page_title_inline,.whiteTextImpr *{
    color: white !important;
}


/* slides CSS */
.slides{
    font-family: 'Nissan Brand Regular';
    color: inherit;
}
#content,#previous{
    display: none !important;
}
.right {
    z-index: 12;
}
#next.enable{
    opacity: 1;
    background-color: rgba(61, 53, 50,0.6);
    display: block;
    opacity: 0;
    clip: rect(0,0,0,0);
    width: 0;
    height: 0;
    overflow: hidden;
}

#next:not(.enable){
    background-color: #b5b5b5;
    pointer-events: none;
    display: none !important;
}
.container .wrap .spaceWrap, .container .wrap.spaceWrap, .container .wrap:not(.noSpaces) {
    padding: 0;
}
.button, .container .wrap, .slides-form.center input, .slides-form.center textarea {
    text-align: inherit;
}
.slide .content{
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}
.max_content_width{
    max-width: 1780px;    
    margin: 0 auto;
    position: relative;
}
.slide.full_content .content{
    max-width: initial;
}
.has_bg_image{
    /* background-attachment: fixed; */
    background-position: center;
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.bg_size_contain{
    background-size: contain !important;
}
.bgCenterTop{
    background-position: center top !important;
}
.bgRightTop{
    background-position: right top !important;
}
.twocolumn_background{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto !important;
    width: 100%;
}
.p_85px{
    padding: 0 70px 70px 15px !important;
}
.padding0px{
    padding: 0px !important;
}
.paddingtop0px{
    padding-top: 0px !important;
}
.paddingbottom0px{
    padding-bottom: 0px !important;
}
.paddingtop66px{
    padding-top: 66px !important;
}
.paddingbottom60px{
    padding-bottom: 60px !important;
}
.paddingInner{
    padding: 10px 20px;
}
.margintop0{
    margin-top: 0 !important;
}
.marginleft0px{
    margin-left: 0 !important;
}
.margin0px{
    margin: 0 !important;
}
.margintop-90px{
    margin-top: -90px;
}
.left-40px{
    left: -50%;
}
.uppercase{
    text-transform: uppercase;
}
section.slide:not(.has_bg_image)::after{
    content: "";
    height: 1px;
    width: calc(100% - 140px);
    display: block;
    background-color: #707070;
    max-width: 1920px;
    margin: auto;
    z-index: 10;
    position: relative;
}
section.slide.has_bg_image::after{
    content: "";
    height: 10px;
    width: 130%;
    background: #0A0A0A;
    display: block;
    filter: blur(3px);
    position: absolute;
    bottom: -5px;
    left: -10%;
    z-index: 1;
    box-shadow: 0px -10px 15px #0A0A0A;
}
.topics section.slide:not(.has_bg_image):nth-last-child(1)::after{
    height: 0px;
}
.bg_tintBefore::before{    
    content: "";
    position: absolute;
    background-image: linear-gradient(0deg, #0A0A0A00, #0A0A0A,#0A0A0A);
    z-index: 2;
    height: 300px;
    width: 100%;
    display: block;
    top: -1px;
    left: 0;
}
container section:last-child::after {
    height: 0;
}
.footer {
    min-height: 5px;
}

.pb-10{
    padding-bottom: 10rem;
}
.closeBtn,.closee_1 {
    position: absolute;
    right: 15px;
    top: 15px;
    outline: none;
    width: 30px;
    height: 30px;
    background: transparent;
    color: inherit;
    z-index: 11;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 50%
}
.closeBtn::before,.closee_1::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: #FF0000;
    color: #fff; */
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    box-shadow: inset 0 0 0 20px #C7BC6F;
    border-radius: 50%;
}
.closeBtn:hover::before,.closee_1:hover::before,.menu_toc.open:hover{
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 0;
}
.closeBtn::after,.closee_1::after {
    /* content: "✖"; */
    /* content: "🞡"; */
    content: "";
    background-image: url(../images/close_icon_white.png);   
    background-repeat: no-repeat;    
    background-position: center;
    background-size: 70%;
    width: 80%;
    height: 80%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 30px;
    line-height: 1;
    /* transform: rotate(45deg); */
    display: flex;
    align-items: center;
    justify-content: center;
}
.closeBtn{
    border: 1px solid white;
}
.blackIcon{
    border: 1px solid black;
}
.closee_1.blackIcon::after {    
    background-image: url(../images/close_icon_black.png); 
}
.closee_4{
    top: 100px;
    right: 100px;
    cursor: pointer;
}
.closeBtn i{
    display: none;
}

.height100vh{
    min-height: 100vh;
    /* max-height: 1020px; */
}
.height1000px{    
    min-height: 1000px;
}
@media (max-height: 999px) {
    .height1000px{
        min-height: 100vh;
    }
}
.height400px{
    min-height: 400px !important;
}
.height500px{
    min-height: 500px !important;
}
.height600px{
    min-height: 600px !important;
}
.height50vh{
    min-height: 50vh;
}
.max_width_100px{
    max-width: 100px !important;
}
.maxHeight40vh{
    max-height: 40vh !important;
    text-align: center;
}
.maxHeight40vh img{
    max-height: 40vh !important;
    /* max-width: initial; */
    min-height: 100%;
}
.height60vh{
    min-height: 60vh;
}
.width60{
    width: 60px;
}
.width100{
    width: 100%;
}
.height100{
    height: 100%;
}
.height800{
    min-height: 800px;
}
.pt-66{
 padding-top: 66px;   
}
.height300{
    min-height: 300px !important;
}
.height200{
    min-height: 200px !important;
}
.height150{
    min-height: 150px;
}
.height100{
    min-height: 100px !important;
}
.page_container .heightauto{
    height: auto;
}
.lightblue_bg{
    background-color: #869AA9 !important;
}
.darkgray_bg{
    background-color: #3D4F59 !important;
}
.blue_bg{
    background-color: #397EA5 !important;
}
.gray_bg{
    background-color: #5E605D !important;
}
.darkGreen_bg{
    background-color: #092B35 !important;
}
.yellow_bg{
    background-color: #C7BC6E !important;
}
.yellow_bg_tint .content{
    background-color: rgb(199 188 110 / 66%);
}
.lightYellow_bg{
    background-color: #fadf5c !important;
}
.black_bg{
    background-color: #000 !important;
}


.static_bg_image.has_bg_image{
    background-attachment: initial;
}
.top_center.has_bg_image{
    background-position: top center;
}
/* .parallex{
    background-attachment: fixed;
} */
.zoom_container{
    position: relative;    
}
.zoomBtn{
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-image: url(../images/enlarge_icon_black.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 1px 3px 5px #092b35;
    cursor: pointer;
}
.large_image_popup_overlay {
    background: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
}
.large_image_popup {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 15;
}
.large_image_container{
    max-width: 1920px;    
    max-height: 1080px;
    overflow: auto;
    margin: auto;
    width: 100%;    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.large_image_container .closeBtn1{
    top: 40px;
}
.large_image{
    margin: auto;
    width: auto;
    height: 90%;
    max-height: 500px;
}
.btnText{
    background-color: #BFBFBF;
    text-transform: uppercase;
    margin: 20px auto;
    padding: 8px 16px;
    cursor: default;
    text-align: center;
    line-height: 1;
    margin-top: 20px;
    font-size: 24px;
    user-select: none;
    max-width: 300px;
}
.btnText.enable{
    cursor: pointer;
    background-color: #c3002f;
    color: white;
    pointer-events: auto;
    animation: pulseShadow 1s infinite;
    box-shadow: 0 0 0 1rem transparent;
}
.btnText.enable:hover{
    /* background-color: #FF0000; */
}
.backtomenu .btnBack {
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    position: fixed !important;
    bottom: 20px;
    background: rgb(0 0 0 / 40%);
    z-index: 12;
    padding: 10px;
    transition: background 500ms ease-in-out;
}
.btnBack:hover {
    /* text-decoration: underline; */
    background: rgb(0 0 0 / 100%);
}
.next_icon_arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49.408' height='20.852' viewBox='0 0 49.408 20.852' stroke='%23fff'%3E%3Cg id='Group_105' data-name='Group 105' transform='translate(761.815 -273.598) rotate(90)'%3E%3Cline id='Line_12' data-name='Line 12' x1='46.413' transform='translate(284.467 759.32) rotate(-90)' fill='none' stroke-linecap='round' stroke-width='1'/%3E%3Cpath id='Path_148' data-name='Path 148' d='M12.509,19.449,0,10.079,12.509,0' transform='translate(274.301 761) rotate(-90)' fill='none' stroke-linecap='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    width: 40px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
    display: inline-block;
}
.fullViewport.slide .content{
    max-width: 100%;
}
b,strong,.bold{
    font-family: 'Nissan Brand Bold';
    font-weight: 600;
}

.lightText{
    font-family: 'Nissan Brand Light';
    font-weight: 100 !important;
}
.regularText{
    font-family: 'Nissan Brand Regular';
    font-weight: 400;
}
.offWhite_bg{
    background-color: #f5f4f2;
}
.blackText{
    color: black;
}
.page_content_inline{
    position: absolute;
    top:66px;
    width: 100%;
    padding: 0 70px;
    z-index: 1;
    max-width: 1920px;
    margin: auto;
    left: 0;
    right: 0;
}
.page_content_relative{
    position: relative;
    top: 0;
    width: 100%;
    padding: 0;
    height: 150px;
}
.page_content_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 70px;
}
.content_image {
    width: 100%;
    padding: 66px 40px;
}

/* hotspot CSS */
.fade:not(.show) {
    opacity: 0;
    display: none;
}
.modal.fade.show{
    display: block;
}
.hotspot_image{
    max-width: inherit;
    width: 100%;
}
.centerAlign{
    max-width: inherit;
    width: 80%;
    position: relative;
    display: flex;
    margin: auto;
}
.hotspot_btn {
    width: 60px;
    height: 70px;   
    border-radius: 0;
    /* background-color: #707070;    
    color: white; */
    cursor: pointer;
    font-size: 36px;
    margin-right: 10px;
    margin-bottom: 14px;
    transition: all 0.2s ease-in-out;
}
.hotspot_header{
    z-index: 3;
    position: relative;
}
.hotspot_popup{
    width: 56%;
    /* background-color: #465253; */
    /* color: white; */
    padding: 20px 0;
    position: absolute;
    left: -70px;
    top: 66px;
    z-index: 2;
    padding: 200px 40px 20px 70px;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
    max-width: 900px;
}
.right_contents{
    position: relative;
    margin-left: 50%;
    margin-top: 20px;
    line-height: 1.2;
    font-size: 14px;
}
.right_contents p{
    line-height: 1.2;
    font-size: 14px;
}
.large_header {
    font-size: 300px;
    line-height: 0.8;
    z-index: 0;
    position: relative;
    font-weight: 900;
    text-indent: -22px;
    padding-left: 10px;
    font-family: 'Nissan Brand Bold';
}
.has_bg{
    background-attachment: fixed;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow-wrap: break-word;
    background-size: cover;
    margin-bottom: 50px;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
    background-color: white;
}
.firefox .has_bg{
    background-attachment: unset;
}
.btn_inline{
    background-color: transparent;
    width: auto !important;
    color: white;
    cursor: pointer;
    font-size: 14px;
    height: auto;
    position: relative;
}
.hotspot_popup_right{
    width: 60%;
    top: 66px;
    right: 0;
    left: auto !important;
    padding: 20px 40px;
    padding-right: 70px;
}
.vAlignCenter{
    top: 0;
    bottom: 0;
    background-color: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    align-items: center;
    width: auto;
    justify-content: end;
}
.vAlignCenter>div{
    background-color: black;
    padding: 20px 40px;
}
.bottom_text {
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 1;
}
.plus_icon{
    color: #C3002F;
    font-size: 0;
    position: relative;
    top: 5px;
    left: 5px;
    line-height: 1;
    width: 20px;
    height: 20px;
    /* border-radius: 50%; */
    display: inline-block;
    border: 2px solid;    
    transition: all 0.5s ease-in-out;
}
.plus_icon::before,.plus_icon::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    user-select: none;
    transition: all 0.5s ease-in-out;
    width: 60%;
    height: 0;
    border-top: 2px solid;
}
.plus_icon::after{
    transform: rotate(90deg);
}
.btn_inline.active .plus_icon::after{
    transform: rotate(180deg);
}
.iframeYoutube{
    min-height: calc(100% - 66px);
    bottom: 0;
    position: absolute;
    max-width: 1920px;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 2;
}
.ytp-title-enable-channel-logo .ytp-title{
    pointer-events: none;
    z-index: 0;
}
.ytp-copylink-button{
    display: none !important;
}

/* video_background CSS */
.video_background{
    position: relative;
    min-height: calc(100vh - 0px);
    width: 100%;
    overflow: hidden;
}
.fullwidthVideo video{
    width: 100%;
    bottom: auto;
    position: relative;
    min-height: 200px;
}
.fullBgVideo{
    overflow: hidden;
}
.fullBgVideo .myVideo{
    height: auto !important;
    width: 100%;
    margin-top: 0 !important;
}
.video_popup_container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 13;    
    background-color: #000;
}
.video_popup_container video{ 
    height: 90%;
    top: 66px;
    max-width: 90%;
}
.iframeYoutube{
    background-color: #000;
}
.pageBg{
    position: absolute;
    top:0;
    width: 100%;
    z-index: 0;
    /* min-height: 790px; */
}
@media only screen and (orientation: landscape) and (max-height: 991.98px) {
    .pageBg,
    .height100vh{
        /* min-height: 850px; */
    }
    .topic_screen.height100vh,.topic_screen .pageBg{
        min-height: 100vh;
    }
    .minheight850{
        min-height: 850px;
    }
}
@media (max-height: 991.98px) {
    .minheight850{
        min-height: 750px;
    }
}
.height100vhimpr{
    min-height: 100vh !important;
}
.activity{
    position: relative;
    z-index: 1;
}
.video_background {
    color: white;
}
.video_background .myVideo {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.video_background .custom_overlay{    
    position: absolute;
    width: 100%;
    bottom: 0;
    height: calc(100% + 54px);
    z-index: 0;
}
.video_background .video_overlay_sec{
    z-index: -1;
}
.video_background .video_content {
    position: absolute;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    padding: 20px;
    padding-bottom: 60px;
    z-index: 10;
    backdrop-filter: blur(7px);
    background: rgb(0 0 0 / 15%);
}
.title_screen .video_background .video_content{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.instruction {
    margin-bottom: 30px;
    font-family: 'Nissan Brand Light';
    font-size: 18px;
}
.startInstruction.instruction{
    bottom: 60px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: 20px;
    z-index: 11;
    font-family: 'Nissan Brand Light';
}
.playInstruction{
    top: 60px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.5);
    font-family: 'Nissan Brand Light';
}
.instructionBottom{
    position: absolute;
    bottom: 70px;
    padding: 10px 5px;
    display: inline-block;
    margin: auto;
    width: 110%;
    left: -5%;
    top: auto;
    text-align: center;
    font-family: 'Nissan Brand Light';
}
@keyframes close {
    0%, 10% {
        top: -18px;
    }
    20%, 100% {
        top: -14px;
    }
  }
  
  @keyframes wiggle {
    0%, 10%, 20%, 30%, 40% {
        transform: rotate(0);
    }
    40%, 50%, 60%, 70%, 80% {
        transform: rotate(5deg);
    }
    45%, 55%, 65%, 75%, 85% {
        transform: rotate(-5deg);
    }
    85%, 100% {
        transform: rotate(0);
    }
  }
.lock {
    width: 50px;
    height: 50px;
    animation: wiggle 1.5s linear infinite alternate;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    top: 0;
    margin: auto;
    background-image: url(../../shell/images/lock_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Range container */
.range_container {
    width: 180px;
    color: inherit;
    position: relative;
    bottom: 0;
    font-weight: 600;
    margin: 0;
    padding: 40px 0;
}

.range_container_inline{
    max-width: 150px;
    position: relative;
}
.range_container_relative{
    position: relative;
    bottom: 0px;
    margin-bottom: 0px;
}
.drag_slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    background: #6C6363;
    outline: none;
    border-radius: 20px;
    border: none;
    padding: 0px;
    cursor: pointer;
}
.outline2px{
    outline: 2px solid #6C6363 !important;
}

.drag_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 48%;
    height: 15px;
    background: var(--drag_slider_color, #000);
    cursor: pointer;
    border-radius: 20px;
    background: #C3002F !important;
}

.drag_slider::-moz-range-thumb {
    width: 48%;
    height: 15px;
    background: var(--drag_slider_color, #000);
    cursor: pointer;
    border-radius: 20px;
    background: #C3002F !important;
}
.text-end {
    text-align: right;
}
.image_container{
    padding: 0;
    position: relative;
}
img.swipeX {
    width: 20px;
    position: absolute;
    left: 30%;
    bottom: 10px;
}
.menu_item.nextBtn {
    position: absolute;
    right: 110px;
    width: 100px;
    z-index: 99;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    bottom: 5px;
    padding: 4px 8px;
    background-color: rgba(61, 53, 50,0.6);
}
:root {
    --swiper-pagination-bullet-inactive-color: #fff;
    --drag_slider_color: #fff;
    --text_color: #fff;
    --selected: #0093d0;
    --bg_color: #000000;
    --nissanRed: #FF0000;
    --modal_bg: #00000070;
    --menu_bg: rgb(255 255 255 / 50%);
    --required: var(--nissanRed);    
    --nissanYellow: #C7BC6E;
}
.btn-nissanRed{
    background-color: #c3002f;
    color:white;
    text-transform: uppercase;
    border-radius: 0 !important;
    margin-left: 5px;
}
button.btn{
    background-color: #C7BC6F;
    color: #000;
    transition: all 0.3s ease-in-out;    
    text-transform: capitalize;
    
}
button.btn:hover{
    background-color: #887E35;
    color: #fff;
}
button.btn:focus{
    box-shadow: none;
}
button.saveImage.btn {
    margin: 20px 0;
    border-radius: 0;
}
.modal{
    background-color: var(--modal_bg,#000);
}
.inactivityModal{
    background-color: var(--bg_color,#000);
}

.alert_popup{
    padding: 1.35rem 1.25rem;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 15;
    padding-right: 50px;
    margin: 0;
    width: 100%;
}
.alert_popup .closee_1{
    top: 0;
    bottom: 0;
    margin: auto;
}
.menuSwitch{
    font-size: 14px;
    font-weight: 400;
    margin-top: 15px;
    justify-content: right;
    margin-right: 20px;
}
.menuSwitch .range_container_inline{
    width: 60px;
    margin-left: 10px;
}
.menuSwitch .dflex_right{
    margin-left: 0px;
}
.ques_icons i.fa-arrow-right{
    margin-left: 0px;
}
.fa-arrow-right:before {
    content: "";
    background-image: url(../images/arrow_right.svg);
    width: 16px;
    height: 13px;
    position: relative;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.loading {
	width: 100%;
    height: 100%;
	z-index: 999;
	position: fixed;
}
.loading-container {
	width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.loading_inner{
	width: 100%;
	height: 100vh;	
    position: relative;
    background: rgba(3, 3, 3,0.5);
}
.loading-gif{
	width: 70px;
}

/* The settings panel css */
.btn_course_settings {
    color: inherit;
    background: no-repeat;
}
.btn_course_settings:hover {
    color: #C7BC6E;
}
#course_settings .modal-dialog{
    width: 90%;
    margin: auto;
    margin-top: 66px;
    max-width: 900px;
}
#course_settings .modal-content{
    border-radius: 0;
    /* padding: 20px 0; */
    height: calc(100vh - 100px);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}
.settings_list{
    margin: 0;
}
.settings_list li{
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
}
.settings_list li:hover{
    background-color: #eee;
}
.settings_list li.disable{
    opacity: 0.5;
}

.dropdown-menu {
    padding-left: 12px !important;
    color: inherit;
}
.dropdown-menu a{
    color: inherit;
}
.dropdown-item{    
    transition: background-color 0.2s ease-in-out;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #C7BC6E;
}
.nav-link {
    border: 1px solid #000;
    border-radius: 50%;       
    transition: all 0.2s ease-in-out;
    position: relative;
}
.nav-link:hover {
    border-color: #C7BC6E;
}
.nav-link::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: all 0.2s ease-in-out;
    scale:1.3;
}
.nav-link:hover:after{    
    scale:1.8;
}
.nav-link::before {
    content: "";
    background-image: url(../images/close_icon_black.png);   
    background-repeat: no-repeat;    
    background-position: center;
    background-size: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(199 188 110 / 80%);
    border-radius: 50%;
    display: none;    
    transition: all 0.2s ease-in-out;
    border: 1px solid black;
}
.nav-link[aria-expanded="true"]:hover::before {
   /* display: block; */
}
.nav-link[aria-expanded="true"] {
    border-color: #fff;
}
.nav-user {    
    position: absolute !important;
    left: auto;
    right: 25px;
    height: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;    
}
.nav-user .nav-user-img {
    display: flex;
    padding: 0;
    width: 35px;
    align-items: center;
    color: inherit;
}
.nav-user .nav-user-img:hover{
    color: inherit;
}
.nav-user .dropdown-toggle::after{
    margin-left: 2px;
}
.nav-user .user-avatar-md {
    /* border: 1px solid; */
    margin-right: 2px;
    background: white;
}
.nav-user .nav-user-dropdown{
    font-size: 14px;
    border: none !important;
    display: none;
    background-color: white;
    margin-right: -25px;
    margin-top: -55px;
    padding-bottom: 10px;
    z-index: -1;
    width: 200px;
    min-width: 120%;
}
.nav-user .nav-user-dropdown.show{
    display: block;
}
.nav-user-info {
    background: #C7BC6E;
    color: white;
    font-weight: 400;
    display: flex;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 4px solid #c3002f;
    margin-bottom: 6px;
}
.nav-user-name.lms_user_name {
    width: calc(100% - 50px);
}

.switch {
    position: relative;
    width: 70px;
    height: 20px;
    margin: 0;
}
.switch input {display:none;}
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;     
    border-radius: 34px;
    width: 70%;
    max-width: 40px;
}
.switch .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 3px;
    background-color: rgb(133, 133, 133);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;  
}
.switch input.primary:checked + .slider {
    background-color: #C7BC6F;
}
.switch input:focus + .slider {
    box-shadow: 0 0 1px #C7BC6F;
}
.switch input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    background-color: white;
}
.switch input + .slider:after {
    content: "Off";
    position: absolute;
    right: -25px;
}
.switch input:checked + .slider:after {
    content: "On";
}

.nightMode{
    --swiper-pagination-bullet-inactive-color: #000;
    --drag_slider_color: #000;
    --text_color: #000;
    --selected: #0093d0;
    --bg_color: #F5F4F2;
    --nissanRed: #FF0000;
    --modal_bg: rgb(255 255 255 / 50%);
    --menu_bg: rgb(0 0 0 / 50%);
    --required: var(--nissanRed);
    --nissanYellow: #C7BC6E;
}
.nightMode section,.nightMode .dynamic_theme{
    background-color: var(--bg_color);
    color: var(--text_color);
}
.nightMode .drag_slider::-webkit-slider-thumb,
.nightMode #followMouse .circle {
    background: var(--text_color);
}
.nightMode #followMouse .circle2 {
    background-color: rgba(6, 6, 124, 0.74);
}
.nightMode .drag_slider::-moz-range-thumb {
    background: var(--text_color);
}
.nightMode  .startInstruction.instruction{
    background: var(--modal_bg);
    padding: 10px;
}
.nightMode .controlbox .selected {    
    /* --modal_bg: rgb(255 255 255 / 50%); */
    border: 15px solid var(--modal_bg);
}
.tooltip.show{
    z-index: 14;
}
.dropdown_container{
    position: relative;
    display: inline-block;
}
.dropdown_container select,
.dropdown_container .custom_select{
    height: 30px;
    background: #fff;
    border-radius: 0;
    padding: 0 12px;
    cursor: pointer;
    font-family: 'Nissan Brand Light';
    margin: 0;
    font-size: initial;
    appearance: none;
    width: 200px;
    border: 1px solid;
    text-align: left;
    display: flex;
    align-items: center;
    margin: 0 !important;
}
.dropdown_container select{
    border: none;
}
#google_translate_element{    
    border: 1px solid;
    width: 200px;
    height: 30px;
    overflow: hidden;
}
.dropdown_container .custom_select::after{
    display: none;
}
.dropdown_container::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    transition: .25s all ease;
    pointer-events: none;
    width: 30px;
    height: 100%;
    margin: auto;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}
.dropdown-menu.show {
    display: block;
    margin-top: -1px;
    width: 100%;
    border: 1px solid;
    padding: 0;
    padding-left: 0 !important;
}
.img_curs {
    margin-right: 10px;
    width: 20px;
    display: flex;
    align-items: center;
}
ul.dropdown-menu li {
    padding: 5px 12px;
    width: 100%;
    justify-content: left;
    cursor: pointer;
}
ul.dropdown-menu li:hover,
ul.dropdown-menu li.checked{
    background-color: #007bff;
    color: white;
}
.followMouse .circle {
	width: 70px;
	height: 70px;
    background-color: #ffffff;
    position: fixed;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(16, 0, 54, 0.2);
	z-index: 20;
	pointer-events: none;
	opacity: 0.5;
}
.followMouse .circle2 {
	background-color: rgba(6, 6, 124, 0.74);
	border: solid 1px #ccc;
	opacity: 0.5;
}
.followMouse .text {
	border-radius: 37px;
	border: 4px solid;
	padding: 30px;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd {
	display: none;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc,#goog-gt-tt{
    display: none !important;
}
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q,.skiptranslate{
    background: none !important;
    box-shadow: none !important;
}
body{
    top: 0px !important; 
    position: static !important; 
}
.lang_container {
    display: flex;
    align-items: center;
}
/* The settings panel css */


/* Knowlege check CSS  */
.option {
    width: 17%;
    height: 17%;
    border-radius: 50%;
    margin: 0px;
    position: absolute;
    cursor: pointer;
    z-index: 1;
}
.option:hover{
    background: rgba(231, 230, 78, 0.50);
}
.option1 {
    top: 28%;
    left: 12%;
}
.option2 {
    top: 11%;
    left: 27%;
}
.option3 {
    top: 8%;
    left: 51%;
}
.option4 {
    top: 21%;
    left: 70%;
}
.option5 {
    top: 44%;
    left: 73%;
}

.option_list {
    margin: 20px 0;
    position: relative;
    width: 320px;    
    z-index: 2;
}
#mode_indicator{
    width: 100%;
    height: 100%;
    position: absolute;
}
#mode_indicator:after {
    content: "";
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    left: 0;    
}
#mode_indicator.opt1::after {    
    background-image: url(../images/mcq_states/1.png); 
}
#mode_indicator.opt2::after {
    background-image: url(../images/mcq_states/2.png); 
}
#mode_indicator.opt3::after {
    background-image: url(../images/mcq_states/3.png); 
}
#mode_indicator.opt4::after {
    background-image: url(../images/mcq_states/4.png); 
}
#mode_indicator.opt5::after {
    background-image: url(../images/mcq_states/5.png); 
}
.option.disable{
    pointer-events: none;
    z-index: -1;        
}
.submit,.tryAgain{
    top: 350px;
    position: absolute;
}
.submit.enable{
    display: inline-block;
}
.mcq_container{
    position: relative;
    z-index: 1;
    margin-bottom: 100px;
}
.mcq_inner{
    position: relative;
    padding: 10px 20px;
}
.mcq_feedback {
    background: #60708A;
    margin: auto;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.feedback_inner {
    width: 50%;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    justify-content: center;
    /* padding-right: 20px; */
}
.title_small{
    font-size: 18px;
    display: inline-block;
}
.feedback_title:before {
    content: "";
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    top: 10px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 5px;
    scale: 0.7;
    -webkit-animation: zoom 2s ease-in-out infinite;
    animation: zoom 2s ease-in-out infinite;    
    background-position: center;
    background-repeat: no-repeat;
}
.feedback_title.correct:before{
    background-image: url(../images/tick_white.svg);
    border-color: #669B3E;
    background-color: #669B3E;
}
.feedback_title.incorrect:before{
    background-image: url(../images/cross_white.svg);
    border-color: #D11F36;
    background-color: #D11F36;
}
/*  */

/* Tabs CSS */
.tabs_parent{
    position: relative;
}
.tabs_btn {
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 14px;
    margin-right: 5px;
    padding: 0 10px;
    transition: all 0.2s ease-in-out;
    border-bottom: 4px solid #9D9D9D;
    text-align: center;
    color: white;
    position: relative;
}
.yellow_bg .tabs_btn, .yellow_bg .instruction,.yellow_bg .page_title_inline  {    
    border-color: #000;
    color: #000;
}
.tabs_btn:hover,
.tabs_btn.active{
    border-color: #C3002F !important;
}
.tabs_btn:before{
    content: " ";
    background-color: rgba(255, 255, 255, 0.4) !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;    
    display: block;
    top: auto;
    z-index: -1;    
    transition: all 0.3s ease-in-out;
}
.tabs_btn:hover:before,
.tabs_btn.active:before{
    height: 100%;
}
.tabs_header{
    z-index: 3;
    position: relative;
}
.tabs_popup{    
    width: 100%;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    max-width: initial;
    z-index: 1;
    background-color: #C7BC6E;
}
.tabs_popup .inline_video video{
    width: 100%;
}
.pos_relative{
    position: relative;
}    
.tabs_popup.pos_relative{
    position: relative;
    width: calc(100% - 40px);
    margin: auto;
    padding: 30px 0px;
    max-width: 1880px;
}
.tabs_popup.pos_relative .page_container_inner{
    width: calc(100% - 100px);
    padding: 0;
}
.mt70_desktop{
    /* margin-top: -70px; */
    width: 95%;
}
.mt--10px{
    margin-top: -10px;
}
.baseContent{
    z-index: 2;
}
.tabs_contents img{
    width: 50%;
    display: block;
    margin: auto;
}
.inline_video video{
    border-radius: 0px 0px 0 0 !important;
    position: relative;
    margin: auto;
    margin-right: 0;
    left: 0;
    right: 0;
    width: 95%;
    background: rgba(0, 0, 0, 0.5);
}
.page_container_inner{
    width: calc(100% - 140px);
    float: none;
    margin: 0 auto;
    height: 100%;
    position: relative;    
    padding: 66px 0px 60px 0px;
}

/* Course_menu */
.course_menu .hotpsot_container {
    max-width: 540px;
    min-height: 360px;
    position: absolute;
    height: auto;
    margin: auto;
    bottom: 50px;
    left: 0;
    right: 0;
    padding: 0;
    justify-content: end;
    display: flex;
    align-items: end;
    flex-direction: column;
}
.course_menu .menu_item {
    width: 160px;
    height: 50px;
    position: absolute;
    background-color: transparent;
    align-items: center;
}

.course_menu .menu_item .menu_text{
    opacity: 0.8;    
    position: relative;
    padding: 0 5px;
    transition: color 0.3s ease-in-out;
    margin-top: 5px;
}
.course_menu .menu_item.enable:hover .menu_text,.course_menu .menu_item.active{
    opacity: 1;
    /* background: rgb(231 224 142 / 50%); */
    color: #000;
}
.course_menu .menu_item.enable .menu_text:before{
    opacity: 1;
    background: rgb(231 224 142 / 50%);
    color: #000;
    content: " ";
    background-color: rgba(255, 255, 255, 0.4) !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    display: block;
    top: auto;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}
.course_menu .menu_item.enable:hover .menu_text:before{
    height: 100%;
}
.course_menu .menu_item.enable,.course_menu .menu_item.enable .menu_text,.course_menu .menu_item.active .menu_text{
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
}
.course_menu .menu_item.currentMenu,.course_menu .menu_item.currentMenu .menu_text{
    cursor: default;
    pointer-events: none !important;
}
.course_menu .menu_item.enable.active .menu_hotspot_icon,
.course_menu .menu_item.enable:hover .menu_hotspot_icon,
.course_menu .menu_item.enable.visited .menu_hotspot_icon,.visited>.tick_icon{
    background-color: #E7E08E;
    border: 1px solid #C3002F;
}
.course_menu .menu_item.enable:hover .menu_hotspot_icon{
    animation: none;
    scale: 1.2;    
    transition: all 0.2s ease-in-out;
}
.course_menu .menu_item.currentMenu .menu_hotspot_icon{
    background-color: #BFBFBF !important;
}
.course_menu .menu_hotspot_icon,.tick_icon {
    border: 1px solid transparent;
    min-width: 30px;
    min-height: 30px;
    margin: auto 0;
    margin-left: 10px;
    border-radius: 50%;
    position: relative;    
    transition: all 0.2s ease-in-out;
}
.course_menu .menu_hotspot_icon.zoom {
    background-color: #E7E08E;
    border: 1px solid #C3002F;
}
.course_menu .visited .zoom{
    /* animation: none; */
}
.tick_icon{
    width: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
.visited>.tick_icon{
    display: block;
}
.course_menu .menu_hotspot_icon::before,.tick_icon::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #C3002F;
    margin: auto;
    border-radius: 50%;
}
.course_menu .menu_item.enable.visited .menu_hotspot_icon::before,.visited>.tick_icon::before{
    top: 5px;
    background-color: transparent;
    position: absolute;
    background-image: url(../images/tick_red.svg);  
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 17px;
}
.course_menu .menu_item.enable:hover .menu_hotspot_icon{
    scale: 1.1;
}
.course_menu .hotspot_header{
    height: 100px;
    position: absolute;
    bottom: 430px;
    left: 0;
    right: 0;
    margin: auto;
}
.course_menu .hotspot_image{
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    right: 0px;
    top: 0;
}
.course_menu .hotspots{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.course_menu #menu_item1{
    left: -4%;
    top: 47%;
}
.course_menu #menu_item2{
    left: 0%;
    top: 11%;
}
.course_menu #menu_item3{
    right: -5%;
    top: 13%;
}
.course_menu #menu_item4{
    right: -3.5%;
    top: 47%;
    width: auto;
}
.course_menu #menu_item1 .dflex,
.course_menu #menu_item4 .dflex
{
    flex-direction: column-reverse;
    align-items: baseline;
}
/* course menu */

/* text image blocks */
.static_block{
    padding: 66px 0;
    position: relative;
    height: 100vh;
    max-width: 80%;
    margin: auto;
}
.static_block_negative{
    padding: 20px 30px;
    position: relative;
    height: auto;
    max-width: 50%;
    margin-top: -110px;
}
.content_inline{
    width: 70%;
    padding: 20px 30px;
    padding-bottom: 60px;
}
.blur_bg{
    backdrop-filter: blur(30px);
    background: rgb(254 252 252 / 20%);
}
.white_blur_bg{
    backdrop-filter: blur(30px);
    background: rgb(255 255 255 / 30%);;
}
.black_blur_bg{    
    backdrop-filter: blur(30px);
    background: rgb(0 0 0 / 20%) !important;
}
.scrollable_block{
    padding: 66px 0;
    position: relative;
    min-height: 100vh;
}
.content_scrollable{
    overflow: auto;
    max-height: 100vh;
    background-color: #C7BC6E;
}
.bg_image{
    position: absolute;
    width: 50%;
    height: auto;
    top: 200px;
    bottom: auto;
    opacity: 0.2;
    margin: auto;
    left: 0;
    right: 0;
}
.inline_image{
    /* width: 50%; */
    height: auto;
    margin: auto;
    display: flex;
}

.page_bg1_img{
    display: none;
}
.page_bg1 .page_bg1_img{
    display: block !important;
}
.page_bg1 .page_bg_img{
    display: none !important;
}



/* myslider CSS */
.myslider{
    position: relative;
}
.myslider .click_buttons{
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: auto;
}
.myslider .click_buttons li{
    display: flex;
    height: auto;
    min-width: 260px;
    padding: 5px 10px;
    min-height: 15px;
    background: transparent;
    border: 1px solid black;
    list-style: none;
    justify-content: center;
    margin: 10px 20px 10px 0;
    transition: all 0.3s ease-in-out;
}
.myslider .click_buttons li:hover,.myslider .click_buttons li.active{    
    background-color: transparent !important;
}
.myslider .click_buttons li:before{
    content: " ";
    background-color:rgba(255, 255, 255, 0.4) !important;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 0;
    transition: all 0.3s ease-in-out;
    display: block;
    top: auto;
    z-index: -1;
}
.myslider .click_buttons li:hover:before,.myslider .click_buttons li.active:before{
    width: 100%;
}

.myslider .click_buttons li .icon{
    border-radius: 50%;
    min-width: 50px;
    min-height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}
.myslider .slide_text {
    color: black;
    text-align: left;
    padding-left: 20px;
    text-indent: 0;
}
.myslider .click_buttons li.disabled{
    cursor: not-allowed;    
    pointer-events: none;
}
.myslider .myslide_container {
    position: relative;
    margin: 0 auto;
    top: 0px;
    max-height: initial;
    opacity: 1;
    overflow: hidden;
    padding: 66px 0px 60px 5px;
}
.myslider .slide-inner{
    height: 50vh;
    padding-top: 60px;
    min-height: 600px;
    max-height: 600px;
    position: relative;
    overflow: hidden;
}
.myslider .slide-item{
    position: absolute;
    width: 0%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 80% auto;
    /* background-attachment: fixed; */
}
.myslider .slide-inner .slide-item {
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
}
.myslider .slide-item.active{
    width: 100%;
}
.video_slider .myslide_container{
    margin: 20px auto;
}
.inline_image_bg{
    width: 100%;
}
.tabs_slider{    
    position: relative;
    height: 100vh;
    top: -110px;
    z-index: 0;
}
.tabs_popup_container {
    position: relative;
    margin-top: -110px;
    z-index: 0;
    height: 67vh;
}
.tabs_buttons {
    padding: 1px 0;
}
.roundedCircle{
    border-radius: 50%;
}
.inline_video2  video{
    border-radius: 0px 0px 0 0 !important;
    position: absolute;
    margin: auto !important;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.hotspot_btn.visited:after,
.tabs_btn.visited:after,
.card-link.visited:after,
.click_buttons li.visited:after,
.custom_play_icon.visited::before
{
    content: "✔";
    content: "";
    position: absolute;
    width: 10px !important;
    height: 10px !important;
    color: white;
    left: -5px !important;
    bottom: -5px !important;
    font-size: 10px;
    border: 1px solid #82ca9c;
    border-radius: 30px;
    text-align: center;
    background: #82ca9c;    
    background-image: url(../images/tick_white.svg) !important;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
}
.custom_play_icon.visited::before{
    top: 25% !important;
}

/* notes popup css */
.modal_overlay_inner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
    width: 200px;
    height: 50px;
    font-size: 1.8em;
}
.modal_overlay{
    display: none;
    position: fixed;
    z-index: 999999999;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;      
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}
#myModalNotes .modal-body {
    padding: 25px 25px;
}
#myModalNotes .modal-content{
    padding-bottom: 10px;
}
.modal_btn {
    color: #fff;
    padding: 5px 20px;
    border-radius: 0;
    cursor: pointer;
    margin: 0px 5px;
    font-style: normal;
    min-width: 100px;
}
.modal_btn img{
    position: relative;
    left: -7px;
    top: 5px;
}
.modal_btn .btn_text{
    position: relative;
    top: 0px;
}
.messege {
    color: #C3002F;
    padding: 0 11px;
    font-size: 12px;
    text-align: center;
    display: none;
    margin-top: 15px;
}
#myModalNotes .modal-header {
      display: block;
} 
#myModalNotes .modal-header .flex_container {
    background-color: whitesmoke;
    justify-content: flex-end;
    text-align: center;
}
#myModalNotes.modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0 10%;
}
@media(max-width: 330px){
    #saveAndExit{
        margin-bottom: 15px !important;
    }
}      
#myModalNotes .modal-content {
    position: relative;
    background-color:whitesmoke;
    margin: auto;
    padding: 0px;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-radius: 0px;
    padding-bottom: 20px;
}   
            
#myModalNotes .modal-header {
    padding: 15px 17px;
    background-color: whitesmoke;
}     
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}        
@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}
.btnStickyNotes {
    /* display: none; */
    position: fixed;
    z-index: 2;
    top: 70px;
    right: 20px;
    padding: 0;
    opacity: 1;
    background: rgb(0 0 0 / 40%);
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgb(235 235 235 / 60%);
    float: right;
    cursor: pointer;
    border: none;
    min-width: 40px;
    min-height: 40px;
    transition: all 0.3s ease-in-out;
}
.btnStickyNotes img{
    position: relative;
    left: 0px;
    top: 2px;
}
button.btnStickyNotes[disabled] {
pointer-events: none;
background-color: #dddddd !important;
}     
i.fa.fa-print,i.fas.fa-save {
    padding-right: 10px;
}       

.btnStickyNotes:active,
.btnStickyNotes:hover,
.btnStickyNotes:focus {
    opacity: 1;
    background: rgb(0 0 0 / 100%);
    box-shadow: 0px 0px 2px 3px rgb(235 235 235 / 60%);
}
  @media screen {
      #printSection {
          display: none;
      }
  }  
  @media (max-width: 500px) {
    .modal{
        padding: 0 15px;
        width: 100%;
      }
      .modal-content {
        /* padding: 0px; */
        width: 100%;
      }
  }