#ead-demo-page {
	
}

#demoEAD{
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 640px;
    background-color: #fff;
    padding-top: 0px;
    border-radius: 10px !important;
    box-shadow: 0px 0px 4px 0px #0000001a;
    margin-bottom: 30px;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
	#demoEAD{
	 width:100% !important;
	}
	.demoskeleton-box {
  flex: 1;
  height: 360px;
  width: 100% !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0; /* base light grey */
}
	
}

#processingdemoEAD{
	/* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    padding-top: 0px;
    border-radius: 10px !important;
    box-shadow: 0px 0px 4px 0px #0000001a;
    margin-bottom: 30px;
}
.demo-modal-header-container {
    align-items: center;
    justify-content: center;
    display: flex
;
    text-align: center;
    position: relative;
}

.modal-header-arrow {
    content: url("/Dashboard/DemoEAD/icons/mainArrowText.svg");
    width: 50px;
    height: 60px;
    position: absolute;
    left: -58px;
    top: 75px;
    rotate: 204deg;
    transform: scale(-1, -1);
}

 #ead-demo-page #demoFormGroup {
	position: relative;
    display: flex;
    grid-template-rows: auto auto auto 1fr auto auto 0.5fr;
    gap: 10px;
    padding: 20px;
    min-height: 560px;
    overflow-y: auto;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* #ead-demo-page .common-button-wrapper #generateAudioDescriptionBtn {
	position: absolute;
    bottom: -100px;
    left: calc(50% - 160px);
} */

#ead-demo-page .love-product-card .common-button-wrapper {
    position: relative;
    bottom: 0;
    left: 0;
}

#ead-demo-page #uploadDetails .common-button-wrapper {
    position: relative;
    bottom: 0;
    left: 0;
}

#ead-demo-page #generateAudioDescriptionBtn .tooltip{
	width:max-content !important;
}

#ead-demo-page #generateAudioDescriptionBtn>img {
	margin-right: 5px;
	height: 20px;
}
#ead-demo-page #generateAudioDescriptionBtn img,#ead-demo-page #generateAudioDescriptionBtn:hover img, #ead-demo-page #generateAudioDescriptionBtn:focus img {
    content: url(/Dashboard/icons/audioDescription/Sparkle.svg) !important;
}

.demo-ead-textfield {
	display: grid;
	gap: 4px;
	font-size: 14px;
	font-weight: 500;
	color: #454545;
}

.demo-ead-textfield > input {
    border: 1px solid #E4E4E4;
}

#ead-demo-page .drop-box-image {
	margin-top: 0%;
	margin-bottom: 0%;
	height: 32px;
}

#ead-demo-page .add-video-drop-box {
	width: 100%;
	gap: 15px;
	min-height: 152px;
	justify-content: center;
	height: 100%;
	border: 1px dashed #42296E !important;
	background: #FCFBFF;
}

#ead-demo-page #fileUploadIcon{
	width: 36px;
    height: 36px;
    border-radius: 5.48px !important;
    border-width: 0.78px;
    padding-top: 5px;
    padding-right: 9.39px;
    padding-bottom: 4.7px;
    background: #FFFFFF;
    padding-left: 6.39px;
    border: 0.78px solid #DEDEDE;
}

.demo-ead-upload-error {
	display: flex;
	border-radius: 5px !important;
	color: #B73636;
	background-color: #E375751A;
	border: 1px solid #D27979;
	margin-top: 5px;
	min-height: 43px;
	/* max-height: 43px; */
    align-items: center;
    padding: 10px;
}

.demo-ead-upload-error > img {
    margin-right: 5px;
}
.uploadFileItemEAD{
	padding: 0px 10px;
    height: 60;
    padding-top: 9px;
    padding-right: 10px;
    padding-bottom: 9px;
    padding-left: 10px;
    opacity: 1;
    box-shadow: 0px 0px 2px 0px #00000040;
    background: #F9FAFB;
    border: 1px solid #F9FAFB;
    margin: 0px auto 10px auto !important;
    border-radius: 5px !important;
    width:100%
}

#ead-demo-page .uploadFileText{
	font-weight: 400 !important;
    font-size: 14px !important;
    color: #212121 !important;
}
/* 
@media (min-width: 768px) {
    section.evp.afc-hero .hero-content {
        padding: 30px 0;
        width: 40%;
    }
} */

@media (max-width: 1100px) {
    section.evp .container {
        display: grid !important;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }

    section.evp.afc-hero .hero-content {
        width: 98%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    section.evp.afc-hero .hero-form-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .modal-header-arrow {
        left: -85px;
    }
    .hero-content{
	margin-right:0px !important;
}
}

section.evp.afc-hero h1 .highlight {
     background: linear-gradient(to right, #7246c0, #439ab4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.progress-subtext {
    position: relative !important;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.processing-card {
    display: grid;
    gap: 30px;
    padding: 20px;
   
}
.not-complete{
	 height:467px;
}


.processing-banner {
    padding: 20px;
    height: 64;
    border-radius: 6px !important;
    gap: 10px;
    opacity: 1;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
    background: #F2FCFF;
	font-weight: 400;
	font-size: 15px;
	color:black;
	}
.processing-banner-complete{
	 padding: 15px;
    height: fit-content;
    border-radius: 6px !important;
    gap: 10px;
    opacity: 1;
    background: #F7FAFF;
	font-weight: 400;
	font-size: 15px;
	width:100%;
	color:black;
}

.processing-message {
  text-align: center;
  margin-bottom: 24px;
  color: #2e2e2e;
  padding-top: 30px;
  padding-right: 20px;
  padding-left: 20px;
}

.processing-message p {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.5;
}

.processing-email {
  font-weight: 500;
  font-size: 15px;
  color: #000;
}

.processing-video-wrapper {
  	position: relative;
    width: 50%;
    border-radius: 10px !important;
    overflow: hidden;
    height:100%;
}

.processing-video-wrapper-complete {
    position: relative;
    width: 100%;
    border-radius: 10px !important;
    overflow: hidden;
    background: white;

    /* New additions for centering content */
    display: flex;              /* make it a flex container */
    justify-content: center;    /* center horizontally */
    align-items: center;        /* center vertically (optional) */
}


.processing-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.processing-overlay-text {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: white;
  font-weight: 500;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.processing-overlay{
	justify-self: anchor-center;
    top: 16%;
}

#demoVideoProcessingDiv{
    border-radius: 6px !important;
    opacity: 1;
    display: flex;
    background: white;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
}
#demoVideoProcessingDivComplete{
	    border-radius: 6px !important;
    opacity: 1;
    display: flex;
    background: white;
    align-items: flex-start;
    width: 100%;
    justify-content: space-evenly;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 600px) {
	#demoVideoProcessingDiv{
		flex-direction: column;
	}
	#demoVideoProcessingDivComplete{
	flex-direction: column;
	}
	.processingInfoContainer{
	    width: 100% !important;
	    padding: 5px !important;
	}
	.not-complete{
	 height:100%;
}
}

@media (max-width: 370px) {
	.processing-video-wrapper {
		width: 70% !important;
	}
}

.processing-loader-gif{
    background-repeat: no-repeat;
    background-position: 98% center;
    width: 250px;
    height: 180px;
}

#ead-demo-page .react-text-field {
	border: 1px solid #E4E4E4 !important;
}

#ead-demo-page .react-input-error-label {
    position: absolute;
    right: 0;
    top: -24px !important;
    color: black !important;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
}
#ead-demo-page .react-input-error-label img{
   margin-right:3px;
}

#ead-demo-page .upload-completion-bar {
    display: grid;
    gap: 10px;
    grid-template-columns: 90% auto;
    align-items: center;
    margin-right: 35px;
}

#ead-demo-page #uploadDetails {
	display: flex;
    gap: 10px;
    flex-direction: column;
   /*  min-height: 152px; */
}

#demo-ead-textFields{
	gap: 10px;
    display: flex;
    flex-direction: column;
}

#fileMaxSizeDescriptionText{
	color: #747474;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
}

.uploadedFile{
	overflow: hidden;
    max-width: 22vw;
    width: fit-content;
    text-overflow: ellipsis;
}
.love-product-card {
      display: flex;
    flex-direction: column;
    align-items: center;
    padding:20px;
}

.love-title {
    font-weight: 500 !important;
    font-size: 20px;
    text-align: center;
    color:#42296E;
    margin-top:0px;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.check-icon {
    background: url(/Dashboard/DemoEAD/icons/trailOver.gif);
    padding: 20px;
    width: 82%;
    height: 475px;
    display: flex;
    align-items: center;
    background-position: center;
}

.love-description {
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	color: #42296E;
	margin-bottom: 20px;
}

.contact-button {
  background-color: #7b5cd6;
  color: white;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.contact-button:hover {
  background-color: #6a4cc2;
}
#contactUserButton{
	width: 176px;
	height:39px !important;
    border-radius: 5px !important;
    padding-top: 8px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-left: 15px;
    gap: 5px;
    background: #7557B4;
    color: #FFFFFF !important;
    border: 1px solid #7557B4 !important;
}

.modal-title {
    color: #3d3d3d;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.modal-title-highlight {
    background: linear-gradient(180deg, #1592ae 0%, #4e0da3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 26px;
    line-height: 150%;
}

.modal-subtitle {
    color: #414141;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 0px;
}
.generateAudioDescriptionBtnRegular{
	    background: linear-gradient(114.71deg, rgba(107, 85, 254, 0.8) 9.52%, rgba(147, 80, 199, 0.8) 133.56%), linear-gradient(0deg, var(--Grey-Transparent-Black20, rgba(0, 0, 0, 0.2)), var(--Grey-Transparent-Black20, rgba(0, 0, 0, 0.2))) !important;
		color:white !important;
}

.common-button.custom:disabled{
	background-color: var(--disabled-color, #ECEAF0) !important;
	color: #6A6A6A !important;
	border: none !important;
}


.generateAudioDescriptionBtnRegular img{
	filter:brightness(0) saturate(100%) invert(1) !important;
}
/* p {
	text-wrap: balance;
} */

@media (max-width: 480px) {
	    section.evp.afc-hero .hero-form-container {
	    	width:400px !important;
	    }
	    #demoEAD{
	    	width:360px !important;
	    }
	    .hero-content {
        	width: 90% !important;
    	}
}

@media (max-width: 370px) {
	    section.evp.afc-hero .hero-form-container {
	    width:300px !important;
	    }
	    #demoEAD{
	    width:300px !important;
	    }
}

#evpDemoEnhancedAudioDescription button:focus-visible{
	outline: 2px solid #0B6F85 !important;
	outline-offset: 2px !important;
	border-radius: 4px !important;
}


.desText {
	background: #48228a;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-size: 23px;
    font-weight: bold;
}

.transparentBackground{
	background:transparent !important;
	background-color:transparent !important;
}
#phoneNumberField{
	width:88px !important;
}
/* .hero-content{
	margin-right:135px;
} */
#demoEAD .player .settings {
	display:none !important;
}
#demoEAD .processing-video-wrapper iframe .player .table-of-contents-button{
	display:none !important;
}

#demoEAD .player-icon-class {
	display:none !important;
}
#ead-demo-page  .ad-editor-single-description-box.editmode, #ead-demo-page  .ad-editor-single-description-box:hover, #ead-demo-page  .ad-editor-single-description-box.highlight {
    outline: 0px solid #0B6F85 !important;
    box-shadow: none !important;
}

.tab-regular {
	position:relative;
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #FFFFFF;
    box-shadow: none;
    width: 248px;
    border-radius: 20px !important;
}

.tab-regular::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px;
    padding: 2px; /* thickness of border */
    background: linear-gradient(253.51deg, #8E42C9 34.43%, #00AACE 100.29%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -1;   /* behind content */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-regular:hover::before {
    opacity: 1;
}

.tab-active {
    position: relative;
    padding: 12px;
    width: 248px;
    border-radius: 20px !important;
    background: #fff;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 20px rgba(142, 66, 201, 0.3),
                0 0 15px rgba(0, 170, 206, 0.3);
}

/* First gradient border */
.tab-active::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px !important;
    padding: 2px; /* thickness of border */
    background: linear-gradient(253.51deg, #8E42C9 34.43%, #00AACE 100.29%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -2;
}

/* Second gradient border */
.tab-active::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 22px !important;
    padding: 2px;
    background: linear-gradient(262.1deg, #D2AEEE 0.78%, #82CEE6 99.22%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -3;
}
.mainContentBox{
	 box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;
    min-height: 300px;
    width: 1200;
    height: 430;
    border-radius: 20px !important;
    border-width: 1px;
    padding: 20px;
    opacity: 1;
}

.tab-description-icons{
	width: 32px;
    height: 32px;
    border-radius: 3.5px !important;
    opacity: 1;
}
.descriptionTextContent {
height: 50;
    border-radius: 10px !important;
    opacity: 1;
    padding: 15px;
    background: #F7FAFF;
}

.try-my-video-button{
	position: absolute;
    top: 11px;
    right: 12px;
    padding: 12px 24px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    pointer-events: auto;
    width: fit-content;
    height: 36;
    opacity: 1;
    border-width: 1px;
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
    background: linear-gradient(170.42deg, #3934BB 9.54%, #7242C4 92.42%);
    border: 1px solid;
    border-image-slice: 1;
    border: 1px solid transparent;
	border-radius: 10px !important;
}

.AskAiDemo{
	width: 600px;
    border: 1px solid #EFEFEF;
    border-radius: 20px !important;
    border-width: 1px;
    text-align: center;
    height:360px;
}
/* 
.AskAiDemo:has(div.aiAskVideoQuestionLandingStylingDemo) {
	height: fit-content !important;
} */

div.AskAiDemo:has(div.demoLoadingGif) {
	display: flex;
    justify-content: center;
    align-items: center;
}


.askAiTitle{
	height: 42;
    opacity: 1;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    background: #F8F8F8;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    line-height: 160%;
    margin-bottom: 20px;
}
.textColorField{
	color:black;
}
.aiAskVideoQuestionPredefinedOptionsContainerDemoCss{
	display: flex;
    justify-content: center;
    margin-top: 20px !important;
    margin-bottom: 39px;
}
.sentimentAiBox{
	height: 360px;
    overflow: auto;
    border: 1px solid #E8E8E8;
    border-radius: 20px !important;
    padding: 20px;
    width:600px;
}

div.sentimentAiBox:has(div.demoLoadingGif) {
	display: flex;
    justify-content: center;
    align-items: center;
}

/* .back-to-demo-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    left: calc(24% - 165px);
    display: flex;
    gap: 5px;
    z-index:9999;
} */

.back-to-demo-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    left: 15.4%;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 9999;
    padding: 5px 10px;
}

.demoLoadingGif{
	content: url(/Dashboard/DemoEAD/icons/loading.gif);
    height: 318px;
    display: flex;
    align-items: center;
}
.videoQuizDemo{
	display: flex;
    gap: 40px;
	}
	
.tab-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap; /* allow wrapping */
}

.tab-container > div {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.processingDisplay {
	display:flex;
	background:white;
	gap:40px;
	flex-direction:row
}
.demoVideoChaptering{
	width:600px;
	max-height: 360px;
    overflow: auto;
}
div.demoVideoChaptering:has(div.demoLoadingGif) {
	display: flex;
    justify-content: center;
    align-items: center;
}
.demoEnhancedAudioDescription{
	width:600px;
	max-height:360px;
}
.demoVideoQuiz{
	width:600px;
}

@media (min-width: 1312px) {
	#demoEADIframe,#demoEADIframeQuiz {
 		width: 600px;
 	}
}
@media (max-width:1475px){
	.tab-container > div {
	   flex: 0 0 calc(50% - 10px); /* 2 columns */
	 }
	 
	 .tab-container > div:nth-child(5) {
  flex: 0 0 99.2%; /* 5th tab takes full row */
}
	 	.tab-regular {
	position:relative;
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #FFFFFF;
    box-shadow: none;
    width: 210px;
    border-radius: 10px !important;
}
	.tab-active {
    position: relative;
    padding: 12px;
    width: 210px;
    border-radius: 10px !important;
    background: #fff;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 20px rgba(142, 66, 201, 0.3),
                0 0 15px rgba(0, 170, 206, 0.3);
}

.tab-active::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 10px !important;
    padding: 2px; /* thickness of border */
    background: linear-gradient(253.51deg, #8E42C9 34.43%, #00AACE 100.29%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -2;
}

/* Second gradient border */
.tab-active::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 12px !important;
    padding: 2px;
    background: linear-gradient(262.1deg, #D2AEEE 0.78%, #82CEE6 99.22%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -3;
}
}
/* Responsive: 2 per row */


@media (max-width: 1200px) {
	 .tab-container > div:nth-child(5) {
  flex: 0 0 98.5%; /* 5th tab takes full row */
}
}

@media (max-width: 1311px) {
	 .tab-container > div {
	   flex: 0 0 calc(50% - 10px); /* 2 columns */
	 }

	 .processingDisplay {
		display:flex;
		background:white;
		gap:40px;
		flex-direction:column;
	 }
	 #demoEADIframe,#demoEADIframeQuiz {
	 	width: 100%;
	 }
	.sentimentAiBox{
		height: 360px;
	    overflow: scroll;
	    border: 1px solid #E8E8E8;
	    border-radius: 20px !important;
	    padding: 20px;
	    width:100%;
	}
	.AskAiDemo{
		width: 100%;
	    border: 1px solid #EFEFEF;
	    border-radius: 20px !important;
	    border-width: 1px;
	    text-align: center;
	    min-width: 600px;
        max-width: 600px;
	}
		.demoskeleton-box {
  flex: 1;
  height: 360px;
  width: 100% !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0; /* base light grey */
}
	
	.tab-regular {
	position:relative;
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #FFFFFF;
    box-shadow: none;
    width: 210px;
    border-radius: 10px !important;
}
	.tab-active {
    position: relative;
    padding: 12px;
    width: 210px;
    border-radius: 10px !important;
    background: #fff;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 20px rgba(142, 66, 201, 0.3),
                0 0 15px rgba(0, 170, 206, 0.3);
}

.tab-active::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 10px !important;
    padding: 2px; /* thickness of border */
    background: linear-gradient(253.51deg, #8E42C9 34.43%, #00AACE 100.29%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -2;
}

/* Second gradient border */
.tab-active::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 12px !important;
    padding: 2px;
    background: linear-gradient(262.1deg, #D2AEEE 0.78%, #82CEE6 99.22%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -3;
}

	.demoVideoChaptering{
		width:100%;
        min-width: 600px;
        max-width: 600px;
	}
		.demoskeleton-box {
  flex: 1;
  height: 360px;
  width: 100% !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0; /* base light grey */
}
	
	.demoEnhancedAudioDescription{
		width:100%;
	}
	.demoVideoQuiz{
	width:100%;
	}
	.videoQuizDemo{
	display: flex;
    gap: 40px;
    flex-direction: column;
	}
	.demoVideoQuiz-question-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    /* position: absolute; */
    bottom: 0;
    align-items: center;
   width: 100% !important;
}
}

@media (max-width: 400px) {
	.tab-container > div {
  flex: 0 0 100% !important;
}
	
}
/* On very small screens: 1 per row */
@media (max-width: 630px) {

	.demoVideoQuiz-question-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    bottom: 0;
    align-items: center;
    width: 100% !important;
}

  .tab-container > div {
    flex: 0 0 calc(50% - 10px); /* 2 columns */
  }
  .tab-container > div:nth-child(5) {
  flex: 0 0 97%; /* 5th tab takes full row */
}
  .processingDisplay {
	display:flex;
	background:white;
	gap:40px;
	flex-direction:column
}
.hero-content{
	width:70%;
}
.videoQuizDemo{
	display: flex;
    gap: 40px;
    flex-direction: column;
	}
		.tab-regular {
		position:relative;
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #FFFFFF;
    box-shadow: none;
    width: 210px;
    border-radius: 10px !important;
}
.tab-active::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 10px !important;
    padding: 2px; /* thickness of border */
    background: linear-gradient(253.51deg, #8E42C9 34.43%, #00AACE 100.29%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -2;
}

/* Second gradient border */
.tab-active::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 12px !important;
    padding: 2px;
    background: linear-gradient(262.1deg, #D2AEEE 0.78%, #82CEE6 99.22%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    z-index: -3;
}
.tab-active {
    position: relative;
    padding: 12px;
    width: 210px;
    border-radius: 10px !important;
    background: #fff;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 20px rgba(142, 66, 201, 0.3),
                0 0 15px rgba(0, 170, 206, 0.3);
}
}

/* Container box */
.demoVideoQuiz-question-card {
    border: 1px solid  #E5E5E5;
    border-radius: 10px !important;
    overflow: hidden;
    background: white;
    height: 425px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width:600px;
    min-width:600px;
}

@media screen and (max-width:750px){
	.demoVideoQuiz-question-card {
    border: 1px solid  #E5E5E5;
    border-radius: 10px !important;
    overflow: auto;
    background: white;
    height: 425px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width:600px;
    min-width:0px;
}
}

/* Header */
.demoVideoQuiz-question-header {
  background-color: #D9EDF7;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  height:46px;
}

/* Header left side */
.demoVideoQuiz-question-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0px;
    color: #333333;
}

/* Points badge */
.demoVideoQuiz-points-badge {
    background: #E7F1F3;
    border: 1px solid #0B6F84;
    padding: 4px 8px;
    font-size: 14px;
    height: 34;
    opacity: 1;
    border-radius: 6px !important;
    border-width: 2px;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    color: #2b4a60;
    display:flex;
    gap:5px;
}

/* Question text */
.demoVideoQuiz-question-body {
      padding: 20px 10px 10px 10px;
    color: #000000;
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0px;
}

/* Answer options */
.demoVideoQuiz-answer-option {
    padding: 12px 16px;
    margin: 8px 0;
    background-color: #EEEEEE;
    border-radius: 5px !important;
    cursor: pointer;
    transition: background 0.2s;
}

.demoVideoQuiz-answer-option:hover {
  background-color: #ebebeb;
}

/* Radio alignment */
.demoVideoQuiz-answer-option input[type="radio"] {
  margin-right: 8px;
}

/* Footer buttons */
.demoVideoQuiz-question-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    /* position: absolute; */
    bottom: 0;
    align-items: center;
    width: 600px;
}

.demoVideoQuiz-btn-skip {
  border: 1px solid #6a1b9a;
  color: #6a1b9a;
  background: transparent;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 500;
  margin-right: auto;
}

.demoVideoQuiz-btn-submit {
  background-color: #e0e0e0;
  color: #666;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
}

.demoVideoQuiz-btn-submit.enabled {
  background-color: #6a1b9a;
  color: white;
  cursor: pointer;
}

.demoVideoQuiz-progress-container {
  position: relative;
  width: 100%;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  margin: 20px 0;
  overflow: hidden; /* prevent overflow */
}

.demoVideoQuiz-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #4a90e2;
  width: 0%; /* update dynamically if needed */
  border-radius: 5px;
}

.demoVideoQuiz-progress-icon {
  position: absolute;
  top: -20px; /* float above the bar */
  transform: translateX(-50%);
  text-align: center;
  cursor: pointer;
}

.demoVideoQuiz-progress-icon img {
  width: 20px;
  height: 20px;
}

.demoVideoQuiz-progress-time {
  font-size: 11px;
  color: #666;
  display: block;
  margin-top: 2px;
}

.tdVideoPollingprogressDivContainerDemo{
	background: #eee;
    position: relative;
}

.demoIframe{
	border-top-right-radius: 20px !important;
    border-top-left-radius: 20px !important;
}

.dummyProgressBar{
	border-bottom-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}
.tdVideoPollingprogressDivDemo {
    padding-top: 2em;
    padding-bottom: 2em;
}
.demoVideoQuiz-answer-options{
	padding:10px;
}
.demo-video-options-label{
	    display: flex;
    align-items: center;
    color: #000000;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    gap: 5px;
}
.demoRadio{
	height: 16px;
    width: 16px;
    margin:2px !important;
}
.questionTimeStamp{
    margin-top: 4px;
    color: #333333;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
}

.quizIconWrapper {
  position: relative;
  display: inline-block;
}

.questionTooltipText {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  top: 160%;          /* show below the icon */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none; /* so hover stays on img */
}

.quizIconWrapper:hover .questionTooltipText {
  visibility: visible;
  opacity: 1;
}

.bannerDescription{
	font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #4B4B4B;
    margin:0px;
}
.aiBadge{
width: fit-content;
    opacity: 1;
    border-radius: 5px !important;
    border-width: 1px;
    padding-top: 6px;
    padding-right: 12px;
    padding-bottom: 6px;
    padding-left: 12px;
    background: #F8F6FF;
    border: 1px solid #ECE9FF;
    justify-self: center;
    color: #5443B2;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
    vertical-align: middle;
}

/* .AskAiDemo #aiAskVideoQuestionLandingSubText {
	padding-left: 108px !important;
	padding-right: 108px !important;
} */

.AskAiDemo .aiAskVideoQuestionExchangeStyling{
	    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:normal;
}

.AskAiDemo #aiAskVideoQuestionTextExchangeContainer {
    max-height: 63%;
    overflow-y: scroll;
}
.AskAiDemo .react-tooltip-container{
	display: inline-flex;
    align-items: center;
    margin-left: 0.5em;
    z-index: 5;
    position: absolute;
    align-self: center;
    right: 30px !important;
   /*  margin-right: 30px; */
}

.sentimentAiBox .react-text-with-badge-badge{
background: #ECE6F5 !important;
}

.sentimentAiBox .react-text-with-badge-value{
	font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0px;
    color: #000000;
}

.AskAiDemo .aiAskVideoQuestionInputBoxAdjustAlignment{
	position: relative;
    right: 0px;
}

.AskAiDemo #aiAskVideoQuestionInputBoxContainer{
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 10px;
    padding-right: 20px;
}
#processingInfoDemo{
font-weight: 400;
font-style: Regular;
font-size: 15px;
line-height: 170%;
letter-spacing: 0%;
text-align: center;
color:#212121;
}

#processingInfoDemo .demoEmail {
  color: #212121;
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 150%;
    text-align: center;
}

.demoEnhancedAudioDescription .ad-editor-single-description-box .single-description-right-view .text-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    white-space: pre-wrap;
    pointer-events: none;
    color:#333333;
}

.demoEnhancedAudioDescription  .ad-editor-single-description-box .single-description-left-view.aiGenerated {
    color: #0B6F85;
    background-color: #EDF4F6;
    pointer-events: none;
}
.try-my-video-button:hover {
  background: linear-gradient(350.42deg, #3934BB 9.54%, #7242C4 92.42%);
}
.AskAiDemo .aiAskVideoQuestionMessageBoxMainContentContainer{
	text-align:left !important;
}
.demoVideoQuiz-gif-card{
	justify-self:center;
}
.dubbingLanguageButtons{
	display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: 0.2s;
    width: 224;
    height: 58;
    border-width: 1px;
    justify-content: space-between;
    opacity: 1;
    border-radius: 10px !important;
    padding: 12px;
    border: 1px solid #F1F1F1;
    background: #FFFFFF;
}
.languageDescription{
	font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    color: #333333;
}

#genAiLanguageDubbing{
	    display: flex;
    gap: 40px;
	}
	
@media (max-width: 750px) {
	#genAiLanguageDubbing{
	    display: flex;
    gap: 40px;
    flex-direction: column;
	}
}
.tab-regular:hover, .tab-active:hover{
    background-color: #F6F6F6;
}

/* @media (max-width: 580px){
	
#ead-demo-page .common-button-wrapper #generateAudioDescriptionBtn {
    position: absolute;
    bottom: -79px;
    left: calc(50% - 147px);
}
	
} */

@media (max-width:1500px){
	.back-to-demo-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    left: 11.4% !important;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 9999;
    padding: 5px 10px;
}
}



@media (max-width:1499px){
	#formButtonWrapper{
	display: flex;
    flex-direction: column;
	}
	.back-to-demo-button{
	 position:unset!important;
	 left: 0px !important;
	}
}

.demoSkeletonLoader {
  display: flex;
  gap: 40px;
}

.demoskeleton-box {
  flex: 1;
  height: 358px;
  width: 600px;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0; /* base light grey */
}

/* Flow animation using pseudo-element covering full width */
.demoskeleton-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #d6d6d6 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%; /* make gradient twice as wide */
  animation: flow 1.0s linear infinite;
}

@keyframes flow {
  0% {
    background-position: -100% 0; /* start off left */
  }
  100% {
    background-position: 100% 0; /* end off right */
  }
}

.tab-regular:focus-visible, .tab-active:focus-visible {
	outline: 2px solid #0B6F85 !important;
	outline-offset: 2px !important;
	border-radius: 20px;
}
.highlightChapter{
	font-weight:bold !important;
}

.quizTagIcon{
	height:20px;
	width:20px;
}

@media (max-width: 750px) {
    .AskAiDemo {
        width: 100%;
        border: 1px solid #EFEFEF;
        border-radius: 20px !important;
        border-width: 1px;
        text-align: center;
        min-width: 0px;
    }
        .demoVideoChaptering {
        width: 100%;
        min-width: 0px;
    }
    
}

.mediaStyle{
	padding:40px;
}
@media (max-width:500px){
	
    .mediaStyle{
	    padding-top: 40px;
    padding-bottom: 40px;
}
}
.disableHover:hover{
	background-color: white !important;
    cursor: default !important;
}

.processingInfoContainer{
	display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
    padding: 15px;
    justify-self: center;
    background: white;
    align-items: center;
}
#processingTitleDemo{
font-weight: 700;
font-style: Bold;
font-size: 25px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;
color:#212121;
padding-bottom:18px;
}

.processingBackgroundImage{
	background: url(/Dashboard/DemoEAD/icons/Background.png);
    height: 100%;
    width: 100%;
    max-width: 450px;
    min-width: 130px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin: auto;
}

.processingBackToDemoButton{
	width: 158;
    height: 40;
    opacity: 1;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: 0px;
    padding-left: 10px;
    background: #7346B6;
    border: none;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: center;
    justify-content: space-evenly;
}

.processingBackToDemoButton:hover{
	    background: #8159BD !important;
}
.inlineDescription{
    align-items: center;
    justify-content: space-around;
    gap: 5px;
}

@media (max-width: 1499px) {
	.inlineDescription{
	display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5px;
    flex-direction: column;
}
}