html, body, div, iframe {
	margin: 0;
	border: 0;
	padding: 0;
}

div {
	padding: 0;
	border: 0;
}

.ad_preview span.scale_text {
	display: none;
}

.my_mobile .ad_preview span.scale_text {
	display: inline;
	font-size: smaller;
	padding-left: 10px;
}

.after_controls_clear {
	clear: both;
	padding-top: 20px;
}

.creative_c_rtg_warning
{
	padding: 2px 10px;
	font-size: 20px;
	color: orange;
}
#output_panel .popover-title, .ad_uploader_and_approval_container .popover-title { display: none; }
#output_panel .popover, .ad_uploader_and_approval_container .popover { z-index : 10000; }

/* 300/ ==  */
.my_mobile .ad_size_160x600.ad_preview > div {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/* 300/300 == 1 */
.my_mobile .ad_size_300x250.ad_preview > div {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/* 300/300 == 1 */
.my_mobile .ad_size_300x50.ad_preview > div {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/* 300/320 == 0.9375 */
.my_mobile .ad_size_320x50.ad_preview > div {
	-webkit-transform: scale(0.9375, 0.9375);
	transform: scale(0.9375, 0.9375);
}

/* 300/336 == 0.89285714285 */
.my_mobile .ad_size_336x280.ad_preview > div {
	-webkit-transform: scale(0.89285714285, 0.89285714285);
	transform: scale(0.89285714285, 0.89285714285);
}

/* 300/468 == 0.64102564102 */
.my_mobile .ad_size_468x60.ad_preview > div {
	-webkit-transform: scale(0.64102564102, 0.64102564102);
	transform: scale(0.64102564102, 0.64102564102);
}

/* 300/728 == 0.41208791208 */
.my_mobile .ad_size_728x90.ad_preview > div {
	-webkit-transform: scale(0.41208791208, 0.41208791208);
	transform: scale(0.41208791208, 0.41208791208);
}

iframe.ad_preview_iframe {
	display: block;
}

.ad_size_160x600 iframe.ad_preview_iframe {
	width:160px;
	height:600px;
}
.ad_size_300x250 iframe.ad_preview_iframe {
	width:300px;
	height:250px;
}
.ad_size_300x50 iframe.ad_preview_iframe {
	width:300px;
	height:50px;
}
.ad_size_300x600 iframe.ad_preview_iframe {
	width:300px;
	height:600px;
}
.ad_size_320x50 iframe.ad_preview_iframe {
	width:320px;
	height:50px;
}
.ad_size_336x280 iframe.ad_preview_iframe {
	width:336px;
	height:280px;
}
.ad_size_468x60 iframe.ad_preview_iframe {
	width:468px;
	height:60px;
}
.ad_size_728x90 iframe.ad_preview_iframe {
	width:728px;
	height:90px;
}

.ad_size_336x280.ad_preview.fix_mobile_ads_layout {
	padding-bottom: 50px;
}

img.companion_ad {
	max-width: none;
}

div.my_mobile div.ad_preview {
	float: none;
	display: none;
	position: relative;
}

div.my_mobile div.ad_preview {
	text-align: center;
}

div.my_mobile div.ad_preview > div {
	display: inline-block;
	-webkit-transform-origin: top left;
	transform-origin: top left;
}

iframe.ad_preview_iframe {
	background-color:grey;
}

div.ad_preview {
	position: relative;
	top: 0;
	left: 0;
	display: none;

	padding: 24px 20px 20px; /* extra padding on top for size label */
	float:left;
}

.ad_preview_gallery span.ad_size_title {
	position: absolute;
	top: 0;
	left: 26px;
}

.ad_preview_gallery .ad_size_name {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 300px;
}

.my_mobile.ad_preview_gallery span.ad_size_title {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
}

iframe.ad_preview_iframe {
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}

div.ad_control {
	display:none;
	float: left;
	margin: 5px 5px;
}

div.ad_control > a {
	min-width:60px;
}

.ad_preview_controls > div.landing_page_container {
	float: left;
	display: none;
	padding: 20px;
}

.my_mobile .ad_preview_controls > div.landing_page_container {
	float: none;
}

.ad_preview_controls > div.click_through_urls_container {
	float: left;
	display: none;
	padding: 20px;
}

.my_mobile .ad_preview_controls > div.click_through_urls_container {
	float: none;
}

.ad_preview_controls > div.refresh_button_container {
	float: right;
	padding: 15px;
}
/* [BEGIN: fixing styles affected by collisions in bootstrap and materialize */
.container.approval-gallery {
    padding: 0;
    margin: 0 auto;
    max-width: 940px;
    width: auto;
}
div.refresh_button_container > .btn,
.ad_preview_controls > div.refresh_button_container > .btn {
	background-color: #5bb75b; /* don't change background-color */
	transition: none; /* don't delay visibility change */
	padding: 0 0.7rem;
	font-size: 0.5rem;
	line-height: 26px;
	height: 26px;
}
div.refresh_button_container > .btn i,
.ad_preview_controls > div.refresh_button_container > .btn i {
	font-size: 1rem;
}
.ad_control > .btn:hover,
.ad_preview_controls > div.refresh_button_container > .btn:hover {
	background-position: 0; /* don't change background position */
}
.ad_control > .btn {
	color: black;
	box-sizing: initial;
	padding: 0 12px;
}
.ad_control > .btn-primary.disabled {
	background-color: #0044cc;
	color: #ffffff;
}
/* END] */

.ad_preview_controls > div.ad_uploader_and_approval_container {
	float: right;
	margin-right: 50px;
}

.ad_preview_controls > div.ad_uploader_and_approval_container input[type="checkbox"] {
	float: left;
	margin-left: -20px;
}

.ad_preview_controls > div.ad_uploader_and_approval_container,
.ad_preview_controls > div.ad_uploader_and_approval_container input,
.ad_preview_controls > div.ad_uploader_and_approval_container label {
	font-size: 12px;
	margin-bottom: 0;
}

.ad_preview_controls:after {
	content: "";
	display: table;
	clear: both;
}

.my_mobile.ad_preview_gallery:after {
	content: "";
	display: table;
	clear: both;
}

.my_mobile div.refresh_button_container {
	display: inline;
	padding-left: 15px;
}

.my_mobile div.ad_preview {
	padding-top: 40px
}

.my_mobile .landing_page_container {
	padding: 2px 20px;
}
.my_mobile .landing_page_container a {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.my_mobile .click_through_urls_container {
	padding: 2px 20px;
}
.my_mobile .click_through_urls_container a {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

div.my_tablet.ad_preview_gallery,
div.my_desktop.ad_preview_gallery {
	margin: auto;
}

.my_desktop {
	max-width: 968px;
}

.ad_preview_gallery > .pre_roll_preview {
	display:none;
	padding: 10px 0;
}

.ad_preview_gallery > .pre_roll_preview > div {
	margin: auto;
}

.ad_preview_gallery div {
	box-sizing: unset;
}

/* Show Tags Preview Section */
.show_tags_preview {
	padding: 15px 0 35px;
	width:100%;
	float: left;
}

.internal_left_content {
	width: 50%;
	float: left;
}

.internal_right_content {
	width: 50%;
	float: left;
}

.set_button_position {
	width: 100%;
	float: left;
	margin-top: 10px;
}

.set_button_position button {
	background: #003057;
	color: #fff;
	border: none;
}

.tags_display {
	width: 80%;
	min-height: 250px;
	font-size: 12px;
}

.tags_button button{
	background-color: #003057;
	color: #fff;
	padding: 8px 30px 8px 30px;
	border: none;
	border-radius: 4px;
}

.tag_text{
	color: #003057;
	padding-top: 8%;
	font-weight: 600;
}

.asset_margin {
	margin-top: 50px;
}
/*loader*/
.show_loader_for_ongoing_process {
	width: 100%;
	min-height: 50px;
	display: block;
	float: left;
	text-align: center;
}
.loader {
  border: 8px solid #d7d7d7;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/*Editable container*/
#new_landing_page_url{
	border: none;
	border-bottom: 1px solid #000;
	outline: 0;
	background-color: inherit;
	width:70%;
	margin-right:20px;
}

.editable_landing_page_container{
	width:480px;
}

.edit_lp_buttons{
	border: none;
	border-radius: 3px;
	margin: 0 4px;
	font-size: 13px;
	padding: 4px 9px;
	color: #fff;
}
.edit_lp_buttons[disabled]{
	background-color: gray;
}
.ok_button[disabled]:after{
	display:inline-block;
	content:"";
	background-image: url(/images/loadingImage.gif);
	width:1.4em;
	height:1.4em;
	position:absolute;
	background-size:contain;
	margin-left:7.4em;
}

.edit_icon {
	color: #4A494A;
	margin: 0 6px 0 0;
	cursor: pointer;
}

/* Native Ad Preview: UI */
.cropped-image-container {
	background-size: cover;
	background-position: center;
	border: 1px solid gray;
	box-sizing: border-box;
	background-color: #D8D8D8;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	line-height: 0;
}
.cropped-image-container.no-scaling {
	background-size: initial;
}
.cropped-image-container.contain {
	background-size: contain;
}
.cropped-image-container.contain:not(.force-background) {
	border: none;
	background-color: transparent;
}
.native-preview-container,
.social-preview-container {
	position: relative;
	margin-top: 5em;
	min-height: 400px;
}
.native-preview-container .native-preview-header,
.social-preview-container .social-preview-header {
	font-weight: bold;
	text-align: center;
	position: absolute;
	width: 100%;
	top: -5em;
}
.native-preview-container form input[type="text"],
.native-preview-container form textarea,
.social-preview-container form input[type="text"],
.social-preview-container form textarea
{
	width: 198px;
}
.native-preview-container form textarea,
.social-preview-container form textarea {
	resize: vertical;
}

.native-preview-container form:after
.social-preview-container form:after {
	display: block;
	content: " ";
	clear: both;
}

.native-preview-container form button,
.social-preview-container form button {
	/*
	background-color: #2C8BC2;
	border: none;
	color: white;
	padding: 0.5em 1.5em;
	*/
	float: right;
}

.file-drop-area:after
{
	background-color: #D8D8D8;
	padding: 4px 5px 6px;
	border-radius: 0.4em;
}

.adaptive-details-container { /* either dl or form, depending on whether currently editable */
	box-sizing: border-box;
	width: 240px;
	border-right: 2px solid lightgray;
	min-height: 400px;
	word-break: break-word;
}
form.adaptive-details-container {
	border: 1px solid lightgray;
	padding: 1em 1em;
}

.adaptive-preview-container form dl {
	margin-bottom: 3em;
}

.adaptive-preview-container dl {
	box-sizing: border-box;
	margin-block-start: 0em;
	margin-block-end: 0em;
}
.adaptive-preview-container dl .cropped-image-container {
	width: 205px;
    height: 105px;
}
.adaptive-preview-container dl .cropped-image-container.aspect-1-1 {
	width: 80px;
	height: 80px;
}
.adaptive-preview-container dt {
	margin-top: 1em;
}
.adaptive-preview-container dd {
	word-break: break-word;
}
.adaptive-preview-container dd.text-only {
	margin-left: 0;
}
.adaptive-preview-preview-layout-container {
	box-sizing: border-box;
	position: absolute;
	left: 250px;
	right: 0;
	height: 100%;
	min-height: 400px;
	width: 70%;
}
.adaptive-preview-preview-layout-container.native-preview-full-width {
	left: 0;
}
.native-preview-platform-carousel {
	padding: 0 60px 0 70px; /* 10px extra padding on left */
	overflow: hidden;
}
.native-preview-previous-platform,
.native-preview-next-platform {
	position: absolute;
	top: 50%;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-size: 20px;
	cursor: pointer;
	transform: translateY(-50%);
	color: gray;
	user-select: none;
	z-index: 1;
}
.native-preview-previous-platform::before,
.native-preview-next-platform::before {
	font-family: "Material Icons";
}
.native-preview-previous-platform:hover,
.native-preview-next-platform:hover {
	color: black;
}
.native-preview-previous-platform {
	left: 10px;
}
.native-preview-previous-platform::before {
	content: "arrow_back_ios";
}
.native-preview-next-platform {
	right: 0;
}
.native-preview-next-platform::before {
	content: "arrow_forward_ios";
}
.native-ad-preview-for-platform {
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100%;
	transform-origin: 0 0;
}
.adaptive-ad-carousel-element {
	width: 300px;
	height: 300px;
	display: none; /* hide by default, so that initial margin does not cause transition */
	position: absolute;
	transition-property: margin-left, opacity;
	transition-duration: 0.3s; /* Reduced for better engagement */
	transition-timing-function: ease-out;
	margin: 0;
	padding: 0;
	line-height: 0;
	opacity: 0;
	will-change: margin-left, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Show adaptive-ad-carousel-element when it's the active/visible element in social media formats */
.fb-reel-social-carousel-assets .adaptive-ad-carousel-element,
.insta-reel-social-carousel-assets .adaptive-ad-carousel-element,
.fb-story-social-carousel-assets .adaptive-ad-carousel-element,
.insta-story-social-carousel-assets .adaptive-ad-carousel-element,
.facebook-infeed-post-image .adaptive-ad-carousel-element,
.social-carousel-assets .adaptive-ad-carousel-element,
.insta-social-carousel-assets .adaptive-ad-carousel-element {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
}

/* Show the first/active carousel element by default */
.fb-reel-social-carousel-assets .adaptive-ad-carousel-element:first-child,
.insta-reel-social-carousel-assets .adaptive-ad-carousel-element:first-child,
.fb-story-social-carousel-assets .adaptive-ad-carousel-element:first-child,
.insta-story-social-carousel-assets .adaptive-ad-carousel-element:first-child,
.facebook-infeed-post-image .adaptive-ad-carousel-element:first-child,
.social-carousel-assets .adaptive-ad-carousel-element:first-child,
.insta-social-carousel-assets .adaptive-ad-carousel-element:first-child {
	display: block !important;
	opacity: 1 !important;
}

/* Smooth fade transitions for active elements */
.adaptive-ad-carousel-element.active {
	opacity: 1 !important;
	z-index: 2;
}

.adaptive-ad-carousel-element.transitioning {
	opacity: 0 !important;
	z-index: 1;
}
table.adaptive-ad-carousel-element,
table.adaptive-ad-carousel-element tbody,
table.adaptive-ad-carousel-element tr,
table.adaptive-ad-carousel-element td
{
	padding: 0;
	border: 0;
	height: 100%;
}
.adaptive-ad-carousel-element.disable-transition {
	transition-property: none;
	transition-duration: 0;
}

/* Native: all platforms */
.native-ad-container-in-preview {
	position: relative;
	font-size: 0.7rem;
	line-height: 0.8rem;
}
.native-ad-container-in-preview .native-preview-title {
	font-weight: bolder;
	white-space: pre-wrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-transform: uppercase;
	font-size: 13px;
}

.native-platform-tablet .native-preview-title {
	text-decoration: underline;
	font-size: 20px
}

.native-ad-container-in-preview .native-preview-sponsor {
	font-size: 0.8em;
	opacity: 0.8;
	white-space: pre-wrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-style: italic;
	background-color: #fff;
}

.material-container {
	padding: 0 1.5rem;
	margin: 0 auto;
	margin-top: 0 !important;
}

.native-preview-container,
.native-preview-container *,
.native-preview-container *:after,
.native-preview-container *:before ,
.social-preview-container,
.social-preview-container *,
.social-preview-container *:after,
.social-preview-container *:before
{
	box-sizing: inherit;
}

.native-ad-container-in-preview .native-preview-description, .social-ad-container-in-preview .social-preview-description  {
	margin-top: 0.5em;
	word-break: break-word;
	font-weight: bolder;
}

.native-ad-container-in-preview .native-preview-description {
	white-space: normal;
	background-color: #fff;
}

/* Native Mobile */
.native-platform-mobile {
	width: calc(648px / 2);
	height: calc(1294px / 2);
	background-image: url('/assets/img/native_ad_preview/mobile-preview-fs8.png?v4.47');
}
.native-platform-mobile .native-ad-container-in-preview {
	top: 318px;
	left: -2px;
	height: 182px;
	width: 300px !important;
	line-height: 3.8;
}

.native-platform-mobile .native-preview-title {
    word-break: break-word;
	font-family: HelveticaNeue;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: normal;
  color: #000000;
}

.natve-platform-mobile .native-preview-sponsor {
	font-family: HelveticaNeue;
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
}
.native-platform-mobile .native-preview-description {
	font-family: HelveticaNeue;
	font-size: 1vh;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 1;
	letter-spacing: normal;
	color: #000000;
	padding-bottom: 20px;
}
.native-ad-container-in-preview div {
	margin:auto !important;
	font-family: roboto;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
	}

.native-platform-mobile .native-preview-main-image {
	margin:auto;
	width: 257px;
    height: 149px;
    background-size: 100% 100%;
}

.native-platform-mobile .native-preview-cta.row {
	position: absolute;
	bottom: -0.8rem;
	right: 2rem;
	padding: 0.2rem 0.3rem;
	border: 1px solid #a6a6a6;
	line-height: 1;
	border-radius: 2px;
	color: #039be5;
	text-transform: capitalize;
	max-width: 58px;
	white-space: pre-wrap;
	font-size: 0.6rem;
	word-break: break-word;
	text-align: center;
}

.native-platform-mobile .native-preview-cta.row span {
	margin: 0;
	cursor: pointer;
}

.native-platform-mobile .native-preview-sponsor.row {
	max-width: 75%;
	margin: 0 0 4px 0 !important;
	white-space: pre-wrap;
	line-height: 1.4;
	padding: 0.5rem 0rem;
	word-break: break-word;
}

/* Native Tablet */
.native-platform-tablet {
	width: calc(2048px / 2);
	height: calc(1536px / 2);
	background-image: url('/assets/img/native_ad_preview/tablet-preview-fs8.png?v4.47');
}
.native-platform-tablet .native-preview-title {
	font-family: Courier;
	font-size: 1.2vh;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: 1;
	letter-spacing: normal;
	color: #000000;
	word-break: break-word;
}
.native-platform-tablet .native-preview-description {
	font-family: Courier;
	font-size: 1vh;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.10;
	letter-spacing: normal;
	color: #000000;
}
.native-platform-tablet .native-preview-sponsor {
	font-family: Courier;
	font-size: 11px;
	font-weight: normal;
	font-style: oblique;
	font-stretch: normal;
	line-height: 1.2;
	letter-spacing: normal;
	color: #000000;
	padding: 0.4rem 0;
	word-break: break-word;
}
native-platform-tablet .native-preview-sponsor img{
	width: 28px;
}
.native-platform-tablet .native-ad-container-in-preview {
	height: 121px;
	width: 258px !important;
	left: -244px;
	top: 310px;
	font-size: 1.3em;
	line-height: 1.8em;
}
.native-platform-tablet .native-preview-main-image {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
}

.native-platform-tablet .native-preview-cta.row {
	background: #fff;
	padding-bottom: 18px;
}

.native-platform-tablet .native-preview-cta.row span {
	padding: 0.2rem 0.3rem;
	background: #969696;
	color: #fff;
	font-size: 13px;
	text-transform: capitalize;
	text-decoration: underline;
	border: 1px solid #969696;
	border-radius: 3px;
	cursor: pointer;
	margin: 6px 0;
	line-height: 1.30;
}

/* Native Desktop */
.native-platform-desktop .native-preview-title {
	word-break: break-word;
	background: #424242;
	padding: 10px 7px 10px 7px;
	min-height: 38px;
  font-family: Georgia;
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  color: #ffffff;
}

.native-platform-desktop .native-preview-sponsor {
	min-height: 50px;
	padding: 9px 7px 0px 7px;
	word-break: break-word;
}

.native-platform-desktop .native-preview-sponsor img {
	width: 50px !important;
}
.native-platform-desktop .native-preview-description {
	padding: 10px 7px 0px 7px;
	min-height: 42px;
  font-family: Georgia;
  font-size: 1.4vh;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.8vh;
  letter-spacing: normal;
  color: #000000;
}

.native-platform-desktop {
	width: calc(2880px / 2);
	height: calc(2048px / 2);
	background-image: url('/assets/img/native_ad_preview/desktop-preview-fs8.png?v4.47');
}
.native-platform-desktop .native-ad-container-in-preview {
	border: 1px solid;
	padding: 0;
	min-height: 366px;
  width: 294px !important;
  left: 407px;
  top: 197px;
  font-size: 1.4em;
  line-height: 1.2em;
  padding-bottom: 0.4rem;
  background-color: #fff;
}
.native-platform-desktop .native-preview-main-image {
	/*width: 100%;
  height: 60%;*/
  height: 20%;
  background-color: #424242;
  background-size: 100% 100%;
}
.native-platform-desktop .container::after {
	content: " ";
	display: block;
	background: #fff;
	height: 29px;
	width: 102%;
	position: absolute;
	bottom: -32px;
	left: -0.2rem;
}

.native-platform-desktop .native-preview-cta .native-preview-cta-span {
	margin: 0.5rem 0 0.5rem 0.6rem;
	text-transform: capitalize;
	cursor: pointer;
	color: #0088cc;
}

.native-preview-sponsor img {
	display: inline-table;
	vertical-align: middle;
	float: left;
	margin-right: 0.1rem;
}

/* [BEGIN creative uploader preview */
#output_zone .native-preview-toggle {
	margin-bottom: 0.5em;
}
#output_zone .native-preview-toggle label {
	display: inline-block;
	margin: 0 0 0 0.5em;
	position: relative;
	top: 0.3em;
}
#output_zone .native-preview-previous-platform::before,
#variables_ad_all .native-preview-previous-platform::before {
	content: '<';
}
#output_zone .native-preview-next-platform::before,
#variables_ad_all .native-preview-next-platform::before {
	content: '>';
}

/*toggle preview between adset & native for variable ui tab*/
.preview-type-adset .native-preview-container,
.preview-type-native .ad_preview_container,
.preview-type-native .alert-block,
.preview-type-native .top_nav{
	display: none !important;
}

.preview-type-adset .social-preview-container,
.preview-type-social .ad_preview_container,
.preview-type-social .alert-block,
.preview-type-social .top_nav{
	display: none !important;
}

.preview-type-adset .social-preview-container,
.preview-type-streaming_audio .ad_preview_container,
.preview-type-streaming_audio .alert-block,
.preview-type-streaming_audio .top_nav,
.preview-type-streaming_audio .sideNav,
.preview-type-streaming_audio .adaptive-preview-container{
	display: none !important;
}

.preview-type-native .sideNav.html5-rich-media-form-container{
	display: none;
}

.preview-type-social .sideNav.html5-rich-media-form-container{
	display: none;
}

.preview-type-native .iframe_display_social{
	display: none;
}

.preview-type-social .iframe_display_native{
	display: none;
}

.iframe_display_native, .iframe_display_social{
	min-height: 2400px;
}
.ad_preview_container
{
	margin-bottom: 40px;
}

.preview-type-native .controlscontrols-row > div {
	width: 100% !important;
}
/* END] */

#companion_preview_ads .ad_preview_controls{
	display: none;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

@media (min-width: 320px) and (max-width: 359px) {
	/* 320 */
	div.ad_control > a {
		min-width: 70px;
	}
}

@media (min-width: 360px) and (max-width: 374px) {
	/* 360 */
	div.ad_control > a {
		min-width: 84px;
	}

}

@media (min-width: 375px) and (max-width: 413px) {
	/* 375 */
	div.ad_control > a {
		min-width: 89px;
	}

}

@media (min-width: 414px) and (max-width: 475px) {
	/* 414 */
	div.ad_control > a {
		min-width: 102px;
	}
}

@media (max-width: 767px) {
	.native-preview-container dl {
		margin: 0 auto;
		border-right: none;
	}
	.adaptive-preview-preview-layout-container {
		left: 0;
		right: 0;
		position: relative;
		width: 100%;
		margin-bottom: 2em;
		height: 0;
	}
	.native-preview-platform-carousel {
		padding: 0 60px; /* even padding when taking up the full width */
		padding-top: 70%; /* make the carousel a 7:10 rectangle of flexible size */
	}
	/* remove bootstap mobile */
	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
		margin-right: 0;
		margin-left: 0;
	}
}

/* restore bootstrap-like container widths */
@media (min-width: 768px) {
	.container.approval-gallery {
		max-width: none;
		width: auto;
		margin-left: 2em;
		margin-right: 2em;
	}
	.adaptive-preview-preview-layout-container {
		min-height: none;
	}
}
.int_approve_chk{
	height: 15px !important;
	padding-left: 20px !important;
}
.hashed_id_container{
	position: absolute;
    padding-left: 20px;
}

/*File drop css*/
.file-drop-area,
.file-placeholder
{
	border: 1px dashed #999;
	border-radius: 0.5em;
	height: 70px;
	width: 66%;
	position: relative;
	transition-property: border-color, color;
	transition-duration: 0.3s;
	position: relative;
	overflow: hidden;
}
.file-placeholder.processing
{
	background-position: center 10px;
	position: relative;
}
.file-placeholder.processing:after
{
	text-align: center;
	font-size: 0.6rem;
	content: "Processing\A(check back later)";
	white-space: pre-wrap;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
	line-height: 1.4em;
}
.file-placeholder.processing.uploading:after
{
	content: "Uploading";
}
.file-drop-area,
.file-drop-area *
{
	cursor: pointer;
}
.file-drop-area:hover,
.file-drop-area.dragover
{
	border-color: #000;
}
.file-drop-area i
{
	transition-property: color;
	transition-duration: 0.3s;
}
.file-drop-area input
{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.file-drop
{
	display: block;
	padding-top: 0.3rem;
	margin-bottom: 14px; /* tuned to align bottom text fields in native ad section */
}
.file-drop .file,
.file-drop .row.uploaded-file,
.file-drop.error .alert
{
	height: 100%;
	margin: 0;
}
.file-drop .alert
{
	padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}
.file-drop.error .close-button
{
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	font-size: 1.3rem;
	cursor: pointer;
}
.file-drop .uploaded-file button.delete_file
{
	position: relative;
	top: -7px;
}
#native_ad_details label.active
{
	left: 0;
}
#native_ad_details textarea.materialize-textarea
{
	min-height: 0px;
	padding: 8px 0;
	height: 21.6px; /* seeding initial value of Materialize textarea auto height */
}
.file-drop-area:after
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	/*upload SVG*/
	content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyOCAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjggMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cmVjdCB5PSIyOCIgd2lkdGg9IjI4IiBoZWlnaHQ9IjQiLz4KCTxwb2x5Z29uIHBvaW50cz0iNy40LDI0LjIgMjAuNCwyNC4yIDIwLjQsMTMuMiAyNy44LDEzLjIgMTMuOSwwIDAsMTMuMiA3LjQsMTMuMiAJIi8+CjwvZz4KPC9zdmc+Cg==');
	opacity: 0.6;
	transition-property: opacity, transform, top;
	transition-duration: 0.2s;
}
.file-drop-area:hover::after,
.file-drop-area.dragover:after
{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.2);
}
.file-drop.error .file-drop-area:after,
.file-drop-area.populated:after
{
	display: none;
}
.file-drop-area .feedback
{
	width: 100%;
	height: 100%;
	position: relative;
}
label.file-drop.invalid .file-drop-area {
	border-color: #f44336;
	border-style: solid;
	background-color: rgba(244, 67, 54, 0.16);
}
.file-drop.invalid .uploaded-file,
.file-drop.invalid .uploaded-file label
{
	background-color: transparent;
	color: #d26c64;
}
.file-drop.invalid .product-test .material-icons
{
	background-color: white;
	border-radius: 100%;
	padding: 0.1em;
	font-weight: bold;
}

.native-preview-container .delete_file
{
	display: none; /* aset_version_preview.js update_native_file_input() */
	cursor: pointer;
	position: absolute;
	top: 32px;
	right: 40px;
	color: #999;
}
.native-preview-container .delete_file:hover
{
	color: #666;
}
.native-save-row .btn
{
	position: relative;
	top: -28px;
}
.native-preview-container .native-save-row .native-editable-message
{
	padding-top: 0.4rem; /* vertical align middle with adjacent save button */
}

.native-save-row .btn-primary{
	background-color:#0044cc !important;
}

.social-preview-outer-layout
{
	background-color: white;
	margin: 0 auto;
	width: 440px;
	min-height: 660px;
	border: 1px solid #979797;
	position: relative;
}
.social-preview-upper-content {
}
.social-title-row {
	height: 101px;
	padding: 21px 22px 0;
	position: relative;
}

/* Fix logo overlap in Reels by positioning title row properly */
.fb-reel-social-carousel-container .social-title-row,
.insta-reel-social-carousel-container .social-title-row {
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 10; /* Ensure it appears above video content */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
	padding: 10px 22px;
	height: auto;
	min-height: 60px;
}

/* Ensure logo and title text in Reels have proper contrast */
.fb-reel-social-carousel-container .social-logo,
.insta-reel-social-carousel-container .social-logo {
	border: 2px solid rgba(255, 255, 255, 0.8);
	background-color: rgba(255, 255, 255, 0.9);
	color: #333333;
}

.fb-reel-social-carousel-container .social-title-text,
.insta-reel-social-carousel-container .social-title-text {
	color: #ffffff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.social-title-row:after {
	display: block;
	content: url(/assets/img/baseline-more_horiz-24px.svg);
	position: absolute;
	right: 24px;
	top: 36px;
	opacity: 0.5;
	transform: scale(1.3);
}
.social-logo,
.social-title-text {
	float: left;
}
.social-logo {
	width: 45px;
	height: 45px;
	min-width: 45px;
	min-height: 45px;
	background-color: #d8d8d8;
	color: gray;
	text-align: center;
	line-height: 45px;
	font-size: 18px;
	user-select: none;
	border-radius: 50%;
	flex-shrink: 0;
}
.social-title-text {
	max-width: 290px;
	padding: 5px 0 0 0;
	flex: 1;
	overflow: hidden;
}
.social-advertiser-name {
	font-size: 17px;
	color: #34589c;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
.social-advertiser-subtitle {
	color: #9e9e9e;
	user-select: none;
}
.social-footer {
	display: flex;
	border-top: 1px solid #979797;
	bottom: 15px;
	left: 0;
	width: 100%;
}
.social-footer-button {
	flex: auto;
	font-size: 11px;
	opacity: 0.5;
	position: relative;
	height: 45px;
	line-height: 45px;
	text-align: center;
	font-weight: bold;
	user-select: none;
	margin-left: 10px;
}
.social-footer-button::before {
	display: inline-block;
	right: 24px;
	top: 36px;
	vertical-align: middle;
	margin-right: 1em;
}
.social-footer-like::before {
	content: url(/assets/img/baseline-thumb_up-24px.svg);
}
.social-footer-comment::before {
	content: url(/assets/img/baseline-chat_bubble-24px.svg);
	transform: scaleX(-1);
}
.social-footer-share::before {
	content: url(/assets/img/baseline-reply-24px.svg);
	transform: scaleX(-1);
}
.social-description {
	padding: 10px 0 5px 0;
	line-height: 20px;
	color: gray;
	word-break: break-word;
	font-size: 16px;
}
.social-assets-container {
	padding: 18px;
}
.social-bottom-row {
	min-height: 15%;
	height: auto;
	background: #F1F2F6;
	position: relative;
}
.social-bottom-text {
	word-break: break-all;
	padding: 25px 0;
	font-size: 12px;
	line-height: 20	px;
}
.social-link {
	text-transform: uppercase;
	font-size: 11px;
	color: #34589c;
}
.social-headline {
	font-weight: bold;
	word-break: break-word;
}
.social-cta {
	position: absolute;
	right: 25px;
	top: 15px;
	width: 100px;
	height: 30px;
	padding: 0;
	margin: 0;
	user-select: none;
}
.social-cta td {
	color: #34589c;
	font-weight: bold;
	font-size: 15px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	position: relative;
	padding: 2px;
}
.social-cta span {
	position: relative;
	z-index: 1;
}
.social-cta td:before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	border: 1px solid gray;
	background-color: lightgray;
}

/* Enhanced CTA visibility for Reels */
.fb-reel-social-carousel-container .social-cta,
.insta-reel-social-carousel-container .social-cta {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.fb-reel-social-carousel-container .social-cta td,
.insta-reel-social-carousel-container .social-cta td {
	color: #000000 !important;
	font-weight: bold;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.fb-reel-social-carousel-container .social-cta td:before,
.insta-reel-social-carousel-container .social-cta td:before {
	background-color: #ffffff;
	border: 1px solid #cccccc;
}
.social-carousel-container {
	position: relative;
	height: 300px;
	margin: 0; /* Removed extra margin to eliminate space below cards */
	padding: 0;
	overflow: hidden;
}
.insta-social-carousel-container {
	position: relative;
	height: 460px;
	margin: 0; /* Removed extra margin to eliminate space below cards */
	padding: 0;
	overflow: hidden;
}
.fb-reel-social-carousel-container, .insta-reel-social-carousel-container, .fb-story-social-carousel-container, .insta-story-social-carousel-container{
	position: relative;
	height: 600px;
	margin: 0; /* Removed extra margin to eliminate space below cards */
	padding: 0;
	overflow: hidden;
}

/* Ensure images are visible in FB Reels */
.fb-reel-social-carousel-container .cropped-image-container,
.insta-reel-social-carousel-container .cropped-image-container,
.fb-story-social-carousel-container .cropped-image-container,
.insta-story-social-carousel-container .cropped-image-container {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.social-carousel-assets {
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}
.insta-social-carousel-assets {
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}
.social-link-description {
	word-break: break-word;
}
.social-carousel-assets.empty {
	background-color: gray;
}
.social-carousel-assets img,
.social-carousel-assets video {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
}

/* Video play button centering and improved controls */
.social-carousel-assets video {
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.social-carousel-assets video::-webkit-media-controls-play-button {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 10 !important;
	background-color: rgba(0, 0, 0, 0.7) !important;
	border-radius: 50% !important;
}

.social-carousel-assets video::-webkit-media-controls {
	position: relative !important;
}

.social-carousel-assets video::-webkit-media-controls-fullscreen-button {
	display: block !important;
}

/* Prevent video flicker during transitions */
.adaptive-ad-carousel-element video {
	will-change: opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Enhanced video controls for all social media formats */
.social-carousel-assets video,
.insta-social-carousel-assets video,
.fb-reel-social-carousel-assets video,
.insta-reel-social-carousel-assets video,
.fb-story-social-carousel-assets video,
.insta-story-social-carousel-assets video {
	will-change: opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.insta-social-carousel-assets.empty {
	background-color: gray;
}
.insta-social-carousel-assets img,
.insta-social-carousel-assets video {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
}
/* Video play button centering for Instagram */
.insta-social-carousel-assets video {
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.insta-social-carousel-assets video::-webkit-media-controls-play-button {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 10 !important;
	background-color: rgba(0, 0, 0, 0.7) !important;
	border-radius: 50% !important;
}

.insta-social-carousel-assets video::-webkit-media-controls {
	position: relative !important;
}

.insta-social-carousel-assets video::-webkit-media-controls-fullscreen-button {
	display: block !important;
}
/* Override single-asset-only display: none for properly structured content */
.fb-reel-social-carousel-container.single-asset-only,
.insta-reel-social-carousel-container.single-asset-only,
.fb-story-social-carousel-container.single-asset-only,
.insta-story-social-carousel-container.single-asset-only,
.facebook-infeed-post-image.single-asset-only {
	display: block !important;
}

/* Ensure assets within single-asset containers are visible */
.single-asset-only .cropped-image-container {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 300px !important;
}


/* Reel and Story Navigation Arrows - Hidden by default */
.social-carousel-previous, .social-carousel-next,
.insta-social-carousel-previous, .insta-social-carousel-next,
.fb-reel-social-carousel-previous, .fb-reel-social-carousel-next,
.insta-reel-social-carousel-previous, .insta-reel-social-carousel-next,
.fb-story-social-carousel-previous, .fb-story-social-carousel-next,
.insta-story-carousel-previous, .insta-story-carousel-next {
	position: absolute;
	top: 50%;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-size: 30px;
	cursor: pointer;
	transform: translateY(-50%);
	color: white;
	user-select: none;
	z-index: 2;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	transition: background-color 0.3s ease;
	display: none; /* Hide by default */
}
.social-carousel-previous, .insta-social-carousel-previous,
.fb-reel-social-carousel-previous, .insta-reel-social-carousel-previous,
.fb-story-social-carousel-previous, .insta-story-carousel-previous {
	left: 10px;
	text-align: center;
}

.social-carousel-next, .insta-social-carousel-next,
.fb-reel-social-carousel-next, .insta-reel-social-carousel-next,
.fb-story-social-carousel-next, .insta-story-carousel-next {
	right: 10px;
	text-align: center;
}

/* Show arrows only when container has multiple carousel items */
.social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .social-carousel-previous,
.social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .social-carousel-next,
.insta-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .insta-social-carousel-previous,
.insta-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .insta-social-carousel-next,
.fb-reel-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .fb-reel-social-carousel-previous,
.fb-reel-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .fb-reel-social-carousel-next,
.insta-reel-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .insta-reel-social-carousel-previous,
.insta-reel-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .insta-reel-social-carousel-next,
.fb-story-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .fb-story-social-carousel-previous,
.fb-story-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .fb-story-social-carousel-next,
.insta-story-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .insta-story-carousel-previous,
.insta-story-social-carousel-container[data-carousel-count]:not([data-carousel-count="1"]) .insta-story-carousel-next {
	display: block !important;
}

/* Alternative approach: Show arrows when there are multiple child elements */
.social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .social-carousel-previous,
.social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .social-carousel-next,
.insta-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .insta-social-carousel-previous,
.insta-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .insta-social-carousel-next,
.fb-reel-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .fb-reel-social-carousel-previous,
.fb-reel-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .fb-reel-social-carousel-next,
.insta-reel-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .insta-reel-social-carousel-previous,
.insta-reel-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .insta-reel-social-carousel-next,
.fb-story-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .fb-story-social-carousel-previous,
.fb-story-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .fb-story-social-carousel-next,
.insta-story-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .insta-story-carousel-previous,
.insta-story-social-carousel-assets:has(.adaptive-ad-carousel-element + .adaptive-ad-carousel-element) ~ .insta-story-carousel-next {
	display: block !important;
}

.social-carousel-previous:hover, .social-carousel-next:hover,
.insta-social-carousel-previous:hover, .insta-social-carousel-next:hover,
.fb-reel-social-carousel-previous:hover, .fb-reel-social-carousel-next:hover,
.insta-reel-social-carousel-previous:hover, .insta-reel-social-carousel-next:hover,
.fb-story-social-carousel-previous:hover, .fb-story-social-carousel-next:hover,
.insta-story-carousel-previous:hover, .insta-story-carousel-next:hover {
	background: rgba(0, 0, 0, 0.5);
}

.social-carousel-previous::before, .insta-social-carousel-previous::before,
.fb-reel-social-carousel-previous::before, .insta-reel-social-carousel-previous::before,
.fb-story-social-carousel-previous::before, .insta-story-carousel-previous::before {
	font-family: "Material Icons";
	content: "chevron_left";
}

.social-carousel-next::before, .insta-social-carousel-next::before,
.fb-reel-social-carousel-next::before, .insta-reel-social-carousel-next::before,
.fb-story-social-carousel-next::before, .insta-story-carousel-next::before {
	font-family: "Material Icons";
	content: "chevron_right";
}
.social-carousel-assets {
	border: 1px solid gray;
}
.insta-social-carousel-assets {
	border: 1px solid gray;
}
.cropped-image-container {
	border: none;
}
.preview-type-social .controlscontrols-row > div,
.preview-type-streaming_audio .controlscontrols-row > div {
	width: 100% !important;
}

.social_thumb,
label.file-drop-area.is_social.contain.aspect-1-1.force-background.cropped-image-container
{
	height: 100px;
	width: 100px;
	margin: 3px 17px;
	background-color: #D8D8D8 !important;
}

.adaptive-details-container select {
	display: block !important;
}

.audioPlayer {
	width: 640px;
    height: 360px;
    background-size: cover;
    position: relative;
}

.audioPlayer audio{
  position: absolute;
  bottom: 0;
  width: 100%;
  filter: invert(100%) contrast(200%);
  height: 40px;
}

#variables_ad_all .audio_preview_wrapper{
	width : 100%;
	display: none;
}

.preview-type-streaming_audio #variables_ad_all .audio_preview_wrapper{
	display: block !important;
}

#variables_ad_all .audio_left_container{
	width : 30%;
	float: left;
	display: block;
}

#variables_ad_all .audio_right_container{
	width : 70%;
	float: left;
	display: block;
}

#variables_ad_all .audio_preview_wrapper .disabled{
	display: none !important;
}

#variables_ad_all .audio_left_container .audio_btn_block{
	padding: 10px 14px;
	border-radius: 4px;
	background-color: #002A3A;
	border: 1px solid #002A3A;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	float: left;
}

#variables_ad_all .audio_left_container .upload_audio_save{
	margin-right: 12px;
}

#variables_ad_all .audio_left_container .upload_audio_save.disable{
	opacity: 0.5;
	cursor: no-drop;
}

#variables_ad_all .audio_right_container .audioPlayer{
	background-image: url(/assets/img/640x360.jpg);
}

#variables_ad_all .audio_right_container audio{
	left: 0;
	background-image: url(/assets/img/640x360.jpg);
}

#variables_ad_all .audio_left_container .upload_audio_file_container{
	position: relative;
	overflow: hidden;
	float: left;
}

#variables_ad_all .audio_left_container input.audio-ad-file-upload {
	position: absolute;
	top: 0;
	opacity: 0;
	right: 0;
	margin: 0;
	font-size: 200px;
	direction: ltr;
	cursor: pointer;
}

#variables_ad_all .audio_left_container #uploaded_audio_file_name_text {
	width: 100%;
	float: left;
	color: #0088cc;
	text-decoration: underline;
	text-align: left;
	margin-bottom: 15px;
}

.download-social-custom {
    padding-left: 25px;
    vertical-align: top;
    font-size: 20px;
    text-transform: none;
    text-decoration: none;
    text-transform: none;
    color: #333333;
}

.social-custom-creative-preview {
    overflow: auto;
    margin: auto;
    max-width: 968px;
}

.social-custom-creative-image-container {
    width:50%;
    float:left;
    padding-bottom: 35px;
    padding-left: 30px;
}

.social-custom-creative-image-container .social-custom-image-desc {
    word-break: break-all;
}

.social-custom-image-preview {
    margin-top: 15px;
}

.email_ad_tag img {
    background-size: cover;
    position: relative;
}


.creative_info {
    font-family: roboto;
    font-size: 14px;
    font-weight: bold;
}

.creative_info_text {
    font-family: roboto;
    font-size: 14px;
    padding-bottom: 15px;
}

.email_creative_info {
	display: none;
}

.ad_preview_controls > div.email_creative_container {
	float: left;
	display: none;
	padding: 20px;
}

.my_mobile .ad_preview_controls > div.email_creative_container {
	float: none;
}

.my_mobile .email_creative_container {
	padding: 2px 20px;
}
.my_mobile .email_creative_container a {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.video_process_message {
	width: 640px;
    height: 180px;
    display: block;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 180px 0 0 0;
}

/* special case styling */
.ad_preview_dooh_gallery .ad_size_wrapper{
	float:left;
}
.ad_preview_dooh_gallery .ad_size_840x400.ad_size_wrapper{
	clear:both;
}
.ad_preview_dooh_gallery .ad_size_400x1400.ad_size_wrapper{
	clear:left;
}
.ad_preview_dooh_gallery .dooh_videos{
	text-align: center;
}
.dooh-info{
	color: blue;
}
.dooh_videos .ratio_text{
	padding: 24px 0 8px 0;
}

.template-wrapper {
  display: flex;
  gap: 50px;
  padding: 20px;
  box-sizing: border-box;
	justify-content: center;
}

.facebook-infeed-container {
	width: 400px;
	min-height: 625px;
	height: auto;
	left: 20.68px;
	top: 22.04px;
	background: #FFFFFF;
	box-shadow: 0px 0px 8px rgba(171, 168, 168, 0.25);
	border-radius: 2px;
	padding:10px;
}

.facebook-reel-container {
	width: 400px;
	min-height: 600px;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 0px 8px rgba(171, 168, 168, 0.25);
	border-radius: 2px;
	padding:10px;
	position: relative;
  	overflow: hidden; /* Ensure content does not overflow */
}

.facebook-infeed-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	margin-top:50px;
	border-top: 5px solid gray;
	padding-top:10px;
}

.insta-infeed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top:10px;
}

.facebook-infeed-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 5px solid gray;
}
.facebook-infeed-profile-pic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.facebook-infeed-profile-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.facebook-infeed-post-image {
	width: 100%;
	max-height: 100%;
	object-fit: cover;
	gap: 0px;
	opacity: 1;
	margin: 0; /* Remove extra margin to eliminate space below video */
	padding: 0; /* Remove extra padding to eliminate space below video */
}

/* Specific styling for videos in in_feed to remove extra space */
.facebook-infeed-post-image video,
.facebook-infeed-container video {
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: top; /* Removes baseline spacing */
}

.instagram-feed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-top: 20px;
}

.instagram-icon {
  font-size: 24px;
  color: #C13584; /* Instagram brand color */
}

.instagram-name {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.send-btn {
    display: flex;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
.instagram-camera-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.learn-more {
    display: flex;
	margin-top: 15px;
}
.learn-more-btn {
  color: #63A9F1;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  width: 97%;
}


.greater-than-sign {
  display: none;
}

.fb-reel-post-content {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden; /* Ensure content doesn't overflow */
}

.fb-reel-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fb-reel-social-carousel-assets {
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}

.fb-reel-social-carousel-assets.empty {
	background-color: gray;
}
.fb-reel-social-carousel-assets img,
.fb-reel-social-carousel-assets video {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
}

/* Video play button centering for FB Reels */
.fb-reel-social-carousel-assets video {
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.fb-reel-social-carousel-assets video::-webkit-media-controls-play-button {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 10 !important;
	background-color: rgba(0, 0, 0, 0.7) !important;
	border-radius: 50% !important;
}

.fb-reel-social-carousel-assets video::-webkit-media-controls {
	position: relative !important;
}

.fb-reel-social-carousel-assets video::-webkit-media-controls-fullscreen-button {
	display: block !important;
}

/* Instagram Reels video controls */
.insta-reel-social-carousel-assets {
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}

.insta-reel-social-carousel-assets img,
.insta-reel-social-carousel-assets video {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
}

.insta-reel-social-carousel-assets video {
	cursor: pointer;
	transition: opacity 0.3s ease;
	will-change: opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.insta-reel-social-carousel-assets video::-webkit-media-controls-play-button {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 10 !important;
	background-color: rgba(0, 0, 0, 0.7) !important;
	border-radius: 50% !important;
	padding: 15px !important;
}

.insta-reel-social-carousel-assets video::-webkit-media-controls {
	position: relative !important;
}

.insta-reel-social-carousel-assets video::-webkit-media-controls-fullscreen-button {
	display: block !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
	border-radius: 4px !important;
}

/* Story video controls */
.fb-story-social-carousel-assets,
.insta-story-social-carousel-assets {
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}

.fb-story-social-carousel-assets img,
.fb-story-social-carousel-assets video,
.insta-story-social-carousel-assets img,
.insta-story-social-carousel-assets video {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
}

.fb-story-social-carousel-assets video,
.insta-story-social-carousel-assets video {
	cursor: pointer;
	transition: opacity 0.3s ease;
	will-change: opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.fb-story-social-carousel-assets video::-webkit-media-controls-play-button,
.insta-story-social-carousel-assets video::-webkit-media-controls-play-button {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 10 !important;
	background-color: rgba(0, 0, 0, 0.7) !important;
	border-radius: 50% !important;
	padding: 12px !important;
}

.fb-story-social-carousel-assets video::-webkit-media-controls,
.insta-story-social-carousel-assets video::-webkit-media-controls {
	position: relative !important;
}

.fb-story-social-carousel-assets video::-webkit-media-controls-fullscreen-button,
.insta-story-social-carousel-assets video::-webkit-media-controls-fullscreen-button {
	display: block !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
	border-radius: 4px !important;
}

.fb-reel-header, .fb-reel-reels-header, .fb-reel-bottom-layout, .fb-reel-social-footer {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	color: #ffffff;
	z-index: 2; /* Ensure it appears over the image */
}

.fb-reel-header {
	bottom: 18%; /* Position at the top */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 10px; /* Add padding for better spacing */
	gap: 10px;
}

.fb-reel-reels-header {
	top: 30px; /* Position above the bottom layout */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px; /* Add padding for better spacing */
}

.fb-reel-bottom-layout {
	bottom: 70px; /* Position above the actions */
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px; /* Add padding for better spacing */
	width: 80%; /* Prevent overlapping with side actions */
}

.fb-reel-bottom-layout .learn-more-btn {
	color: #63A9F1; /* Text color */
	background: none; /* Remove background color */
	border: none; /* Remove border */
	border-radius: 4px; /* Rounded corners */
	cursor: pointer; /* Pointer cursor on hover */
	font-size: 12px; /* Font size */
	font-weight: bold;
	display: flex;
	align-items: center; /* Center align items vertically */
}

.fb-reel-bottom-layout .fb-reel-learn-more-btn i {
	margin-right: 5px; /* Space between icon and text */
}


.fb-reel-social-footer {
	bottom: 20px; /* Position at the very bottom */
	display: flex;
	align-items: center;
	padding: 10px; /* Add padding for better spacing */
}

.fb-reel-social-footer .fb-reel-social-footer-icon {
	margin-right: 10px; /* Space between icons */
	font-size: 12px;
}

.fb-reel-actions {
	position: absolute;
	bottom: 100px; /* Adjust as needed */
	right: 10px; /* Adjust as needed */
	display: flex;
	flex-direction: column; /* Arrange icons vertically */
	align-items: center; /* Center icons horizontally */
	gap: 10px; /* Space between icons */
}

.fb-reel-actions button {
	background: none; /* No background for buttons */
	border: none; /* White border for buttons */
	border-radius: 50%; /* Circular buttons */
	color: #ffffff; /* White icon color */
	font-size: 20px; /* Size of the icon */
	cursor: pointer; /* Pointer cursor on hover */
	padding: 2px; /* Padding inside the button */
	display: flex; /* Center icon within button */
	align-items: center; /* Center icon vertically */
	justify-content: center; /* Center icon horizontally */
}


.fb-reel-header-right i {
	font-size: 18px;
}

.fb-reel-reels-header h3 {
	margin: 0;
}

.fb-reel-reels-header i {
	font-size: 20px;
}
.fb-reel-icons-without-background::before{
	background:transparent;
	font-weight: 10;
}
.fb-reel-learn-more-container {
	width:90%;
	margin-top: 20px; /* Adjust margin as needed */
}

.fb-reel-learn-more-button {
	margin-top:15px;
	background: #ffffff; 
	color: black; 
	padding: 10px 10px; 
	font-size: 14px; 
	border: none; 
	border-radius: 4px; 
	cursor: pointer; 
	transition: background-color 0.3s ease; 
	text-align: left;
	backdrop-filter: blur(10px); 
	-webkit-backdrop-filter: blur(10px); 
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
	position: relative; 
}

.fb-reel-learn-more-button::after {
	font-size: 16px; /* Font size for the symbol */
	position: absolute; /* Position relative to the button */
	right: 10px; /* Space between the symbol and the button's right edge */
	top: 50%; /* Vertically center the symbol */
	transform: translateY(-50%); /* Correct vertical alignment */
	color: white; /* Color of the greater than symbol */
}

.fb-story-header {
	position: absolute;
	top: 45px;
	left: 10px;
	right: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #ffffff;
	z-index: 2;
}

.fb-story-header-right i {
	font-size: 18px;
}

.fb-story-bottom-layout {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	z-index: 2;
}

.fb-story-learn-more-container {
	width: 100%;
	text-align: center;
}

.fb-story-learn-more-button {
	background: #ffffff;
	color: black;
	padding: 8px;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	max-width: 350px;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fb-story-learn-more-button i {
	margin-right: 8px;
	font-size: 16px;
	color: #007BFF; /* Blue color for the link icon */
}

.fb-story-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px; /* Thinner progress bar */
	background-color: rgba(255, 255, 255, 0.3);
	z-index: 3;
}

.fb-story-progress {
	width: 25%; /* Example width, adjust dynamically as needed */
	height: 100%;
	background-color: #FFFFFF; /* White color for the progress */
}

.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}

.loading-spinner {
	border: 6px solid rgba(0, 0, 0, 0.1);
	border-left: 6px solid #3498db;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

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

.progress-bar-container {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	height: 5px;
	display: flex;
	justify-content: space-between;
	z-index: 2;
}

.progress-segment {
	height: 100%;
	background: red;
	flex-grow: 1;
	margin-right: 2px;
	opacity: 0.3;
	width: 100%; /* Segments are fully visible initially */
	transition: width 5s linear, opacity 0.5s ease;
}

.progress-segment:last-child {
	margin-right: 0;
}

.watch-again-container {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	z-index: 3;
}

.watch-again-button {
	background: rgba(255, 255, 255, 0.8);
	color: #333;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.watch-again-button:hover {
	background: rgba(255, 255, 255, 0.9);
}