#dashboardContent:has(#enhancedAudioDescriptionEditorMain) {
    padding: 0 0 0 0 !important;
    max-width: 100% !important;
    margin-left: 0px !important;
}

#topBarTextWidth {
	max-width: 500px !important;
}

@media only screen and (min-width: 425px) and (max-width:768px)
{
	#topBarTextWidth{
		max-width: 300px !important;
	}
}

#enhancedAudioDescriptionEditorMain {
	color: black;
}

#enhancedAudioDescriptionEditorMain .emptyTitle {
    font-size: 18px;
    font-weight: 600 !important;
    color: rgba(51, 51, 51, 1);
    margin: 0px;
    text-align: center;
}

#enhancedAudioDescriptionEditorMain .emptySubtext {
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin: 0px;
    text-align: center;
}

#ad-editor-empty-descriptions .addAtButton {
    margin-top: 20px;
}

.addAtButton img {
	height: 20px;
	margin-right: 3px;
}

.addAtButton img {
    content: url(/Dashboard/icons/audioDescription/PlusCircle.svg);
}

.addAtButton:hover img, .addAtButton:focus img {
    content: url(/Dashboard/icons/audioDescription/PlusCircleHover.svg);
}

#ad-editor-descriptions-main {
    display: grid;
    /* padding: 15px; */
}

#ad-editor-descriptions-main .placeholder-loading {
    height: 96px;
    width: 100%;
	border-radius: 6px !important;
}

#ad-editor-discard-changes img {
    content: url(/Dashboard/icons/audioDescription/Editor/trash-red-simple.svg)
}

#ad-editor-discard-changes:hover img,
#ad-editor-discard-changes:focus img {
    content: url(/Dashboard/icons/audioDescription/Editor/trash-red-simple-hover.svg)
}

#ad-editor-save-changes img {
    content: url(/Dashboard/icons/audioDescription/Editor/floppy-disk.svg)
}

#ad-editor-save-changes:hover img,
#ad-editor-save-changes:focus img {
    content: url(/Dashboard/icons/audioDescription/Editor/floppy-disk-hover.svg)
}

#ad-editor-empty-descriptions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    width: 100%;
}

.ad-editor-single-description-box {
    display: grid;
    grid-template-columns: 1fr;
    background-color: rgba(255, 255, 255, 1);
    padding: 15px;
    border-bottom: 1px solid rgba(235, 235, 235, 1);
}

.ad-editor-single-description-box:hover,
.ad-editor-single-description-box:focus-within {
    background-color: rgba(245, 245, 245, 1);
}


.ad-editor-single-description-box.active-description {
	background-color: rgba(247, 243, 250, 1);
    border-left: 3px solid rgba(160, 126, 194, 1);
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

/* .ad-editor-single-description-box:last-child {
    border-bottom: 1px solid rgba(235, 235, 235, 1);
} */

.ad-editor-single-description-box.editmode {
	background-color: rgba(249, 249, 249, 1);
	position: relative;
}

/* .ad-editor-single-description-box .text-container textarea:focus,
.ad-editor-single-description-box .text-container textarea:focus-visible {
    outline: 2px solid #6059D7 !important;
    outline-offset: 2px;
    border-radius: 4px !important;
} */

.ad-editor-single-description-box.editmode.active-description {
    border-left: none;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Hide thumbnail in edit mode */
.ad-editor-single-description-box.editmode .single-description-right-view .single-description-content-row {
	grid-template-columns: 1fr;
}

.ad-editor-single-description-box.editmode .single-description-content-right {
	display: none !important;
}

/* Full width text-container in edit mode */
.ad-editor-single-description-box.editmode .text-container {
	width: 100%;
}

/* Position delete button in top right for edit mode */
.ad-editor-single-description-box.editmode .edit-buttons {
	position: absolute;
	top: 15px;
	right: 15px;
	flex-direction: column;
	gap: 0;
}

#ad-editor-video-player {
	position: relative;
	width: 100%;
    /* height: 100%; */
}

#ad-editor-video-player .placeholder-video {
	border-radius: 6px !important;
}

#ad-editor-video-player-iframe {
	width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    object-fit: contain;
    display: inline-block;
    border-radius: 6px;
    pointer-events: auto;
}

#ad-editor-video-playbar {
    display: flex;
    flex-direction: column;
    gap: 2px;
	position: absolute;
	height: 47px;
	width: 95%;
	bottom: 15px;
	left:10px;
    background-color: #17171D;
    border-radius: 5px !important;
    border: 1px solid #8C8C8C;
    padding: 8px 10px;
}

#ad-editor-video-playbar .ad-video-playbar-button {
    cursor: pointer;
}

#ad-editor-video-playbar .ad-video-playbar-button img {
    height: 19px;
}

#ad-editor-video-playbar #ad-video-playbar-button-container {
    display: flex;
    gap: 11px;
    padding: 4px 0px;
    align-items: center;
}

#ad-video-player-timestamp {
    color: white;
    display: flex;
    gap: 2px;
}

#ad-editor-header {
    background: linear-gradient(to right, #F4F2F9, #F7F8FB, #F8F9FC, #F3ECF8);
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    border: 1px solid #ECECEC;
}

#ad-editor-home-button img {
    cursor: pointer;
}

#ad-editor-top-buttons {
    margin-right: 25px;
    display: flex;
    gap: 16px;
}

#ad-editor-top-buttons button > img {
    margin-right: 5px;
}

#ad-editor-left-sideview {
    background-color: #F8F8F8;
    padding: 15px;
    width: 100%;
    height: calc(100vh - 55px);
    overflow: auto;
    position: relative;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#ad-editor-left-sideview > * {
    width: 100%;
    max-width: 980px;
}

#ad-editor-right-sideview {
    overflow: auto;
    background-color: white;
    height: calc(100vh - 55px);
    position: relative;
    overscroll-behavior: contain;
}

#ad-editor-main-content {
	display: grid;
    grid-template-columns: 4fr 5fr;
    height: fit-content;
}

#ad-editor-video-playbar .button-holder {
    width: 0px;
    height: 120%;
    position: relative;
    left: 100%;
}

#ad-editor-video-playbar .progress {
    width: 100%;
    height: 6px;
    background: #676767;
    float: left;
    cursor: pointer;
    padding: 0;
    position: relative;
    font-variant: normal;
    margin: auto 0;
    border-radius: 5px !important;
    overflow: visible;
}

#ad-editor-video-playbar #volume-bar .progress {
    height: 5px;
}

#ad-editor-video-playbar .progress-bar {
    background: rgb(61, 180, 223);
    border-radius: 5px !important;
    height: 100%;
    position: relative;
    transition: none;
    background-color: white;
}

#ad-editor-video-playbar .progress-button {
    background: white;
    border-radius: 30px !important;
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 100;
    text-decoration: overline;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#ad-editor-video-playbar #volume-bar .progress-button {
    width: 11px;
    height: 11px;
}

#ad-editor-video-playbar .progress-time-wrapper {
    display: inline-flex;
    height: 100%;
    outline: none;
    margin: 0 2%;
    flex: 7;
    position: relative;
    cursor: pointer;
}

#ad-editor-video-playbar #volume-bar {
    transition: width 0.2s ease;
    width: 70px;
}

.ad-editor-single-description-box .single-description-right-view {
    display: grid;
    gap: 8px;
}

.ad-editor-single-description-box .single-description-right-view.multistream {
    grid-template-rows: auto auto 1fr auto;
}

.ad-editor-single-description-box .single-description-right-view .single-description-content-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 12px;
    align-items: start;
}

.ad-editor-single-description-box .single-description-right-view .single-description-content-left {
    display: grid;
    gap: 8px;
}

.ad-editor-single-description-box .single-description-right-view .single-description-content-right {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}


.ad-editor-single-description-box .single-description-right-view .single-description-header-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.timestamp-source-chip-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timestamp-source-chip-wrapper span{
	color: rgba(51, 51, 51, 1);
	font-size: 15px;
	font-weight: 500;
	
}
.ad-editor-single-description-box .single-description-right-view .description-timestamp-capsule {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: #F0F3F8;
    border-radius: 999px !important;
}

.ad-editor-single-description-box .single-description-right-view .description-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    padding: 2px 6px;
    min-height: 32px;
    min-width: 82px;
}


.ad-editor-single-description-box .single-description-right-view .description-source-chip.ai-generated {
    background-color: rgba(232, 247, 250, 1);
    border: 1px solid rgba(215, 234, 239, 1)
}

.ad-editor-single-description-box .single-description-right-view .description-source-chip.manual-entry {
    background-color: rgba(236, 240, 255, 1);
    border: 1px solid rgba(227, 233, 254, 1)
}

.ad-editor-single-description-box .single-description-right-view .description-stream-chip {
    color: #4C5564;
    background: #EFF2F7;
    border-radius: 999px !important;
    font-size: 12px;
    line-height: 18px;
    padding: 3px 10px;
}

.ad-editor-single-description-box .single-description-right-view .description-thumbnail-container {
    width: 125px;
    aspect-ratio: 16 / 9;
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid #D9DEE8;
    background: #EDEFF3;
}

.ad-editor-single-description-box .single-description-right-view .description-thumbnail-container img,
.ad-editor-single-description-box .single-description-right-view .description-thumbnail-container .description-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ad-editor-single-description-box .single-description-right-view .description-thumbnail-container .description-thumbnail-placeholder {
    background: linear-gradient(135deg, #E7EDF9 0%, #DCE7F7 45%, #EDF2FA 100%);
}

.ad-editor-single-description-box .single-description-right-view .edit-buttons {
    display: flex;
    gap: 4px;
}

.ad-editor-single-description-box .single-description-right-view .edit-buttons > div,
.ad-editor-single-description-box .single-description-right-view .edit-buttons > button {
    cursor: pointer;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 1);
    height: 34px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
}

.ad-editor-single-description-box .single-description-right-view .edit-buttons > div:hover,
.ad-editor-single-description-box .single-description-right-view .edit-buttons > div:focus,
.ad-editor-single-description-box .single-description-right-view .edit-buttons > button:hover,
.ad-editor-single-description-box .single-description-right-view .edit-buttons > button:focus {
    background-color: #EEEEEE;
}

.ad-editor-single-description-box:hover .single-description-right-view .edit-buttons .edit-button-Edit > img {
    content: url(/Dashboard/icons/audioDescription/Editor/PencilSimple.svg);
}

.ad-editor-single-description-box .single-description-right-view .edit-buttons .edit-button-Edit:hover > img,
.ad-editor-single-description-box .single-description-right-view .edit-buttons .edit-button-Edit:focus > img {
    content: url(/Dashboard/icons/audioDescription/Editor/PencilSimple-Hover.svg);
}

.single-description-right-view .edit-buttons .edit-button-Delete > img {
    content: url(/Dashboard/icons/audioDescription/Editor/Recycle-Bin-Rounded.svg);
}

.ad-editor-single-description-box .single-description-right-view .text-container {
	width: 100%;
    min-height: 44px;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 22px;
}

.ad-editor-single-description-box .single-description-right-view .text-container textarea {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Suppress the button's own outline — it is inside overflow:hidden .text-container and gets clipped. */
.ad-editor-single-description-box-text-button:focus {
    outline: none !important;
    padding: 6px;
    border-radius: 6px !important;
    border: 2px solid rgb(11, 111, 133);
}

/* Draw focus on the container instead. An element's own outline is never clipped by its own overflow,
   so this is reliably visible. Scoped to non-editmode so it does not fire on the textarea. */
.ad-editor-single-description-box:not(.editmode) .single-description-right-view .text-container:focus-within {
    outline: 2px solid #0B6F85;
    outline-offset: 2px;
    border-radius: 6px !important;
}

.ad-editor-single-description-box .single-description-right-view .description-thumbnail-container:focus-visible,
.ad-editor-single-description-box .single-description-right-view .description-source-chip:focus-visible {
    outline: none;
}

.ad-editor-single-description-box .single-description-right-view .common-dropdown .selectCaret {
	right: 8px;
	top: 1px;
	height: 16px;
}

.ad-editor-single-description-box .single-description-right-view .common-dropdown {
	width: 95px;
}

.common-dropdown.select-stream-dropdown > div:first-child {
    height: 19px;
}

.common-dropdown.select-stream-dropdown .common-dropdown-menu > div {
    height: 19px;
}

.common-dropdown.select-stream-dropdown .common-dropdown-menu {
    top: 22px;
    left: -1px;
}

.modal-content {
	border-radius: 14px !important;
}

#videoPlaybackSpeed-holder{
    margin-left: auto;
    margin-right: 8px;
    position: relative;
    color: white;
}

#videoPlaybackSpeedBtn{
    cursor: pointer;
    padding: 0px 5px;
    border-radius: 2px !important;
}

#videoPlaybackSpeedBtn:hover{
    background-color: #777777;
}

#videoPlaybackSpeedMenu{
    position: absolute;
    cursor: pointer;
    background-color: #17171D;
    bottom: 25px;
    outline: 1px solid white;
}
@media only screen and (max-width:1015px)
{
	#videoPlaybackSpeedMenu{
        left: -10px;
	}
}

#videoPlaybackSpeedMenu > div {
	padding: 5px 10px;
}

#videoPlaybackSpeedMenu > div:hover {
	background-color: #535252;;
}

.timestamp-editable {
    padding: 3px 5px;
    border-radius: 7px !important;
    font-size: 13px;
    font-weight: 600;
    color: #1E2B39;
    border: none;
    cursor: pointer;
}

input.timestamp-editable {
    font-weight: 600;
    padding: 3px 5px;
    background: transparent;
}

.timestamp-editable:not(input) {
    width: fit-content;
    cursor: pointer;
    line-height: 20px;
}

.ad-editor-single-description-box .description-timestamp-capsule .timestamp-editable:not(input):hover {
    background-color: #DCE4EF;
}

.description-source-chip.manual-entry .timestamp-editable:not(input):hover {
    background-color: #BFCEED;
}

.description-source-chip.ai-generated .timestamp-editable:not(input):hover {
	background-color: #D4E5EA;
}

@media only screen and (max-width: 900px) {
    #ad-editor-left-sideview {
        height: calc(100dvh - 55px);
        padding-top: 20px;
    }

    .ad-editor-single-description-box .single-description-right-view .single-description-content-row {
        grid-template-columns: 1fr;
    }

    .ad-editor-single-description-box .single-description-right-view .description-thumbnail-container {
        width: 100%;
        max-width: 220px;
    }
}
.ad-editor-right-sideview-Demo{
	height: calc(45vh - 50px) !important;
}
.ad-editor-main-content-Demo{
	    grid-template-columns: auto !important;
}
.non-editable-demo{
	pointer-events:none !important;
}

.ad-editor-single-description-box-text{
	font-size: 15px;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 150%;
}

.ead-video-title{
	font-size: 16px;
    font-weight: 600 !important;
    color: rgba(51, 51, 51, 1);
}

.ead-steps-container{
	display: flex;
	width: 100%;
    flex-direction: column;
    gap: 16px;
    border-radius: 10px !important;
    padding: 15px;
    background-color: rgba(238, 244, 249, 1);
    align-items: center;
}

.ead-steps{
	display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
}

.ead-step{
	display: flex;
    gap: 10px;
    width: 100%;
    border-radius: 6px !important;
    padding: 7px 8px;
    background-color: rgba(223, 233, 241, 1);
    align-items: center;
}

.ead-step-number{
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50% !important;
	width: 30px;
	height: 30px;
	
	display: flex;
    align-items: center;
    justify-content: center;
	
	color: rgba(99, 118, 134, 1);
	font-weight: 500;
	font-size: 15px;
}

.ead-step-description{
	color: rgba(51, 51, 51, 1);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.single-description-content-row .dropdown-toggle-component
{
	height: 30px !important;
}

#ad-editor-empty-descriptions .genai-chapter-btn{
    border-radius: 6px !important;
    height: 40px;
}

#ad-editor-empty-descriptions .add-manually-btn {
	border: none !important;
	background: transparent !important;
	color: rgba(51, 51, 51, 1) !important;
	box-shadow: none !important;
}

#ad-editor-empty-descriptions .add-manually-btn:hover:not(:disabled),
#ad-editor-empty-descriptions .add-manually-btn:focus-visible:not(:disabled) {
	text-decoration: underline !important;
	background: transparent !important;
	box-shadow: none !important;
}

.learn-more-container{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	font-size: 14px;
	margin-top: 25px;
}
.learn-more-link{
	color: rgba(11, 111, 133, 1) !important;
	text-decoration: underline;
}

.learn-more-link:visited{
	color: rgba(11, 111, 133, 1) !important;
}

.timestamp-source-chip-wrapper .tooltip .tooltip-arrow{
	left: 30% !important;
}

.timestamp-source-chip-wrapper .tooltip.in,
.timestamp-source-chip-wrapper .tooltip.top{
	opacity: 1 !important;
    left: 0px !important;
}

.toc-searchBarContainer .tooltip{
	opacity: 1 !important;
    left: 0px !important;
}