:root {
    --fa-counter-background-color: #CC5500;
    --max-ratio: 2;
    --searchbar-background-color: #f5f5f5; /* tried #c6c6c6  */
    --checked-gray: #f0f0f0;
    --checked-light: #fff;
    --checked-dark: #f0f0f0;
    --blurb-ratio: 1.5;
}


html {
  scroll-behavior: smooth;
}

/*  todo doesn't work for pulldown - ?swicth to jquery so we can style
select[multiple]:focus option:checked {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    background-color: #acbfbc;
}
*/

input, select {
    outline-color: #acbfbc;
}

.top-aside {
    z-index: 800; /* bump this down so it doesn't intefere with mobile displayMode */
}

aside .close {
    float:right;
    padding-right: 4px; 
    font-size:12px;
    color:rgba(0,0,0,.85);
}

/*
.count::before {
    content:'('
}
.count::after {
    content:')'
}
*/
.required::after {
        content:'*';
        color: red;
}

/*
.article-header {
    max-width: var(--row-height);
}
*/

.blurb-preview {
    padding:0; /*0px 10px;*/
    margin-bottom:5px;
    float: none;
    /*max-width: calc(var(--image-ratio) * var(--row-height)); --image-ratio is always 1 for ed? */
    max-width: calc(var(--blurb-ratio) * var(--row-height));
}
/*
.blurb-l-linksb {
    padding-left:10px;
}
.blurb-r-links {
    padding-right:10px;
}
*/

/* frame website snapshot */
.mcc-website .thumbnail img {
    border: 1px solid lightgrey;
    border-radius: 0;
}

@media(min-width: 1100px)  {
            .wizard-image { 		  	
              width:400px;
              float:right;
              } 		  
}
@media(min-width: 0px) and (max-width: 1099px) {
            .wizard-image { 		  	
              width:210px;
              float:right;
              } 		  
}

.add-dividers > div + div {
    /*border-top: 1px solid #DCDDDE;*/
    margin-top: 10px;
    padding-top: 10px;
    clear: both;
}

.searchbar-widget .download-links a {
    color: #339999;
    display: block;
    padding: 4px 10px 4px 0px;
    float: left;
}

.searchbar-widget .download-links a:hover{
    color:#66cccc !important;
    cursor: pointer;
}

/*#project-widget, #lightbox-widget, #comment_list */
#sidebar aside>*
{
    border-radius: 6px;
    background-color: white;
    padding:5px;
}
#sidebar aside>section
{
    padding:5px 0;
}

#comment_list input {
    padding: 4px;
}

.searchhead {
    text-transform: capitalize !important;
    font-family: 'Poppins', sans-serif;
    font-size: 26px !important;
    line-height:28px !important;
    color: #333 !important;
    padding-left:5px;
    padding-bottom: 0px;
    letter-spacing: -0.3px;
}

#sidebar .searchhead {
    font-size: 20px !important;
    line-height:24px !important;
}

#exactrow {
    display: block;
    padding: 4px 0px;
    width: 90px;
    float: left;
}

#miad-hide {
    position:absolute; 
    left:0; 
    top:283px;     /* top = width + 103 */
    width:180px;
    height:20px; 
    line-height:20px;
    text-align: center;
    background-color: teal; 
    color: white; 
    transform: rotate(270deg); 
    transform-origin: top left;
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: top left;
    -moz-transform: rotate(270deg); 
    -moz-transform-origin: top left;
    -ms-transform: rotate(270deg); 
    -ms-transform-origin: top left;
    -o-transform: rotate(270deg); 
    -o-transform-origin: top left;
    /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
}

#right-panel {
    float:right;
    width:30px;
    min-height:150px;
    /*background:white;*/
    position: relative;
    overflow-x: hidden;
    margin-right:2px;
}
#right-panel.out {
    width:410px;
}

.were-sorry {
    font-size:20px;
    letter-spacing:.3px;
    color:#111;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin:5px 0 20px 0 !important;
    font-weight:600;
}

.exact-match-retry {
    font-size:16px;
    letter-spacing:.3px;
    color:#333;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin:5px 0 20px 0 !important;
}
.search-no-exact-match {
    text-decoration:none !important;
}
.search-no-exact-match a{
    text-decoration:none !important;
}
.future-content {
    font-size:16px;
    letter-spacing:.3px;
    color:#333;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin:5px 0 20px 0 !important;
}

.panel-tab {
    position:absolute; 
    left:-150px; /* top = negative width */
    top:0px;     
    width:150px;
    height:30px; 
    line-height:30px;
    font-size: 18px;
    text-align: center;
    background-color: #009999; 
    color: white; 
    transform: rotate(270deg); 
    transform-origin: top right;
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: top right;
    -moz-transform: rotate(270deg); 
    -moz-transform-origin: top right;
    -ms-transform: rotate(270deg); 
    -ms-transform-origin: top right;
    -o-transform: rotate(270deg); 
    -o-transform-origin: top right;
    /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.panel-content {
    margin-left:32px;
    width:376px;
}

div.history {
    margin-top: 1px;
    border-radius: 4px;
    /*min-height:50px;
    display: flex;*/
    background: white;
    border: 1px solid #aaaaaa;  
    padding: 2px;
}

div.history .imgbox {
    width:46px;
    height:46px;
    text-align: center;
    margin-right: 3px;
    display: inline-block;
    vertical-align: top;
}
div.history .imgbox:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

div.history img {
    max-width: 40px;
    max-height: 40px;
    vertical-align: middle;
    display: inline-block;
}

div.history .info {
    display: inline-block;
    width: 317px;
    color: #555555;
    font-size: 12px;
}

div.history-list p {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}

.history-controls {
    /*background-color: rgba(0,160,160, 0.5);
    padding: 2px;
    border-radius: 4px;*/
    margin-bottom: 10px;
    font-size: 10px;
    text-align: center;
}

.trans-03 {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simple th, .simple td{
    padding:10px;    
}

#project_browser {
    --row-height: 150px;
}
#project_browser .results > div,
#project_results, #lightbox_results
{
    position: relative;
}

.project-block {
    border-radius: 6px;
    border: thin solid #bbb;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    display: inline-block;
    margin: 0 10px 20px 10px;
}
.project-block .thumbnail .thumb-cell {
    vertical-align: middle;
    height: var(--row-height);
}
.project-block .thumbnail img {
    max-height: var(--row-height);
    max-width: var(--row-height);
    border-radius: 6px;
}

.project-info {
    margin-right:10px; 
    margin-bottom:10px;
    padding-left: 10px;
}

.project-info a {
    color: #888888;
}

.searchbar-widget {
    clear: both;
    height: calc(100vh - 80px);
    overflow-y: scroll;
}

.widget-thumbs .expander-content {
    clear: both;
    height: calc(100vh - 142px);
    overflow-y: scroll;
}

/* bug in 1.10.4 */
.ui-widget-overlay {
    background: #aaaaaa;
}

#main-wrap-wide {
    width: 97.5%;
    margin: 0 0 0 2.5%;
    min-height: 600px
}

.tab-container-current
{		
    border-right: #ddd 1px solid;
    border-left: #ddd 1px solid;
    border-top: #ddd 1px solid;
    border-bottom: #fff 1px solid;
    background-color: #fff;
    color:#008080;
}
.tab-container {
    background-color: #e9e9e9;
}

.tab-container, .tab-container-current
{		
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    padding:6px 7px;
    font-size:14px;
    margin-right: 5px;
}


@media only screen and (max-width: 1150px) {
    /* Squeeze in tabs */
    .tab-container, .tab-container-current
    {		
        padding:6px 5px;
        font-size:11px;
    }
}

/* Wizard logo */
.draggableWrapper {
    border: 2px dashed red;
    display: inline-block;
    position: absolute; 
    /*starter values */
    width: 20%; 
    top:0; 
    left:0;
}
.draggableWrapper img {
    margin: 0; padding: 0;
    width: 100%; height:100%;
}

body.mobile-ready {
    margin:0 !important;
}

.mobile-ready #crawler {
    display:none;
}



.metro-search-top-wrapper input {
    font-size: 11px;
}
.metro-search-top-wrapper button {
    font-size: 10px;
}

/*
-- This messes up styling in antd v5 
-- Use less globally if still needed anywhere
.desktop * {
    -webkit-box-sizing: unset;
    box-sizing: unset;
}
/* stop mobile wizard base styles overriding MCC client 
.desktop input, .desktop button, .desktop optgroup, .desktop select, .desktop textarea {
    font-size: initial ;
}
.desktop input {
    margin-right: 5px;
}
*/

#Xaod_wizard_content * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#assetDownloaderDialog label {
    display: inline;
    font-weight: inherit;
    color: teal; 
}

.searchbar-widget .dropdown-content a {
    float: none;
}


.button.toggle {
    background-color: rgba(255,255,255,0);
    color: teal !important;
    text-transform: none;
    font-size: 12px;
    font-weight: bold;
    padding: 6px;
    border: none;
}

.sidebar-selected {
    background-color: white !important;
}



.pager .link-container-nbr {
    padding-top:6px; 
    padding-top:6px;
}

.result-links {
    font-size:14px;
    color:#888;
    font-weight:normal;
    text-transform: none;
}

.lightboxlink {
    color: #339999;
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 14px;
    border: none;
    min-width: 100px !important;
    white-space: nowrap;
}


#results_browser, #teaserWrapper, #info-tab,
#project_browser, #project_content, #lightbox_content {
    padding:25px 15px 15px 15px;
}

#main-wrap-wide {
    padding:0;
    display:flex;
    width:100%;
    margin: 0;
    background-color: var(--searchbar-background-color);
}

.searchsidebar {
    flex: 0 0 295px;  /* margin-left less padding */
    /*display:none;*/
    margin-left: -315px;
    margin-top:8px;
    background-color: var(--searchbar-background-color);
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-right: solid #ddd 0px;
    transition: margin-left 0.2s;
}
.searchsidebar > * {
   margin-right: unset; 
   position: sticky;
   top: 40px;
}

/*
.sticky-mega-menu .mccnavmenu-container {
    position: sticky;
    top: 33px;
}
.sticky-mega-menu .searchsidebar > * {
    top: 111px;
}
.sticky-mega-menu .searchbar-widget {
    height: calc(100vh - 151px);
}
.sticky-mega-menu .widget-thumbs .expander-content {
    height: calc(100vh - 215px);
}

.sticky-search-bar #top-band {
    position: sticky;
    top: 23px;
}
.sticky-search-bar .searchsidebar > * {
    top: 84px;
}
.sticky-search-bar .searchbar-widget {
    height: calc(100vh - 124px);
}
.sticky-search-bar .widget-thumbs .expander-content {
    height: calc(100vh - 187px);
}

.sticky-search-bar.sticky-mega-menu #top-band {
    top: 94px;
}
.sticky-search-bar.sticky-mega-menu .searchsidebar > * {
    top: 155px;
}
.sticky-search-bar.sticky-mega-menu .searchbar-widget {
    height: calc(100vh - 195px);
}
.sticky-search-bar.sticky-mega-menu .widget-thumbs .expander-content {
    height: calc(100vh - 260px);
}
*/

.sticky-headers .mccnavmenu-container {
    position: sticky;
    top: 33px;
}
.sticky-headers #top-band {
    position: sticky;
    top: 94px;
}
.sticky-headers .searchsidebar > * {
    top: 155px;
}
.sticky-headers .searchbar-widget {
    height: calc(100vh - 195px);
}
.sticky-headers .widget-thumbs .expander-content {
    height: calc(100vh - 260px);
}



#tabBar {
    margin-left: 10px;
}

#tabs {
    width:100%;
    transition: width 0.2s,  max-width 0.2s;
}
#tabs.results-sidebar {
    max-width: calc(100% - 315px); 
    /*Fudge  the clipped teaser results blow the regular width when the sidebar is open*/ 
    /*Note this happens in regular results with older browsers as well */
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

#metro_content {
    flex-grow: 1;
    margin-left:0; 
    border-radius: 6px;
}
/*
Please explicitly qualify any changes to ant components so other parts of the UI are not effected 
.ant-btn-link {
    font-size: 12px !important;
    line-height: 14px !important;
}
*/
.related-tags h3,
.labels h3,
#sets h3,
.recommended h3
{
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 24px;
    font-weight: 300;
    color: #333;
    text-align: center;
    padding:10px 0px 0px 0px;
    text-transform: uppercase;
    border-top: 1px solid #eee;
    /*border-bottom: 1px solid #eee;*/
    width:100%;
    /*background: url(../images/global/bg-hr-dotted.png) 0 50% repeat-x;*/
    margin-bottom:10px;
    margin-top:20px !important;
}

.recommended {
    background-color: #fff;
    padding:0;
    --row-height: 150px;
}
.recommended-block{
    line-height:22px;
    font-size:18px;
}

button.button.disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(0,128,128,0.5) !important;
 }

.icon-description-preview {
    height: 18px;
}


.asset-block .icons,
.text-block .icons,
.asset-rollover .icons
{
    width: unset;
    /*margin: auto;*/
    background: #000000AA;
    font-size: 18px;
    border-radius: 4px;
    padding: 3px;
    z-index: 1 ;  /* raise icons above rollover overlay */
}

.icon-overlay, .thumbpanel, .masonry{
   border-radius: 6px;
}

.utellus{
    margin:60px auto;
}


.thumbpanel img {
    border-radius: 0;
    box-shadow: inset 0 0 0 10px white;
    background-color: whitesmoke;
}


.thumbpanel img.loaded {
    border-radius: 0;
    box-shadow: unset;
}

.unsub-overlay {
    position: absolute;
    color: black;
    /*background: rgb(51, 51, 51);*/
    opacity: 25%;
    width: 100%;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
}

.filename-overlay {
    position: absolute;
    color: white;
    top: 0;
    text-align: center;
    background: #000000AA;
    font-size: 14px;
    padding: 2px;
    border-radius: 2px;
    cursor: default;
}

.icon-overlay {
    position: absolute;
    /*background: linear-gradient(0deg, rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0) 90%);*/
    width: 100%;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    cursor: pointer;
}
.icon-overlay .icons a {
    color:white  !important;
}
.icon-overlay>div  {
    display: none;
}
[data-mcc-block-action="none"] .icon-overlay {
    cursor: unset;
}

.XXsection-overlay {
    position: absolute;
    /*background: linear-gradient(0deg, rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0) 90%);*/
    width: 100%;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    cursor: pointer;
}
.free-holiday {
    color:white  !important;
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0;
    border-radius: 6px;
}


div#mcTooltip
{
  line-height: 16px;
  border-width: 15px;
  color: #333;
  border-color: #fff;
  padding: 0px;
  font-size: 12px;
  font-family: Verdana, Arial;
  border-radius: 12px;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 14px 0 rgba(0, 0, 0, 0.3);
  z-index: 40000 !important;
  margin-bottom: 20px;
}
.tippy-box
{
  line-height: 16px;
  background-color: white;
  padding: 0px;
  font-size: 12px;
  font-family: Verdana, Arial;
  border-radius: 10px;
  box-shadow: -1px 11px 17px 1px rgba(0,0,0,0.47);
}
.tippy-content {
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    color: #333;
}
.tippy-arrow {
    color: gray;
}



/*
div#mcTooltip img,
.tippy-box img
{
    border-radius: 6px; 
}
*/

.hideit {
    opacity: 0;
    /* display: none; */
}


.records {
    text-align: justify;
}
.asset-block {
    padding: 0;
    height: fit-content;
}
.text-block {
    /*padding: 2px; */
    background-color: #F8F8F8;
}
.text-block,
.asset-block {
    position: relative;
    text-align: left;
    margin: 0 !Important;
    border: 10px solid #ffffff;
    display: inline-block;
}

.teaser-bar {
    --row-height: 200px;  /* default - medium. change this to generally increase height of rows */
}
.teaser-bar[data-mcc-size="x-small"]{
    --row-height: 120px; 
}
.teaser-bar[data-mcc-size="small"]{
    --row-height: 150px; 
}
.teaser-bar[data-mcc-size="large"]{
    --row-height: 250px; 
}
.teaser-bar[data-mcc-size="x-large"]{
    --row-height: 320px;  
}

.teaser-bar .thumbnail table,
.teaser-bar .thumbnail img.ratio,
.recommended .thumbnail table,
.recommended .thumbnail img.ratio
{
    max-height: var(--row-height) !important;
    max-width: calc(var(--max-ratio) * var(--row-height)) !important;
}
.teaser-bar .text-block .thumbnail table,
.teaser-bar .text-block .thumbnail table img
.recommended .text-block .thumbnail table,
.recommended .text-block .thumbnail table img
{
    max-width: var(--row-height) !important;
}

.thumbnail table img {
    margin: 0 auto;
}
.text-block .thumbnail table img
{
    height: var(--row-height);
    width: var(--row-height);
    object-fit: cover;
}

.text-block .thumbnail img {
    display: block;
    margin: 0 auto !important;
    width: unset !important; /*needed as bogus ratio & widthAdjustment cause stretch*/
}

/*
#teaserRows>div {
    min-height: calc(var(--row-height) + 4px);
}
*/

.teaser-row {
    margin-bottom:20px;
    border-bottom: 3px solid #f9f9f9;       
    padding-bottom:20px;
}

/*
#sets-similar, #sets-image, #sets-photo, #sets-not-photo, #sets-getty_creative_images, #sets-food,#sets-logo, #sets-web-ad, #sets-social-media,
#sets-editorial, #sets-bonus_feature, #sets-print-ad, #sets-calendar, #sets-section, #sets-website, #sets-event,
#sets-success-stories, #reco-image, #reco-photo, #reco-not-photo, #reco-getty_creative_images, #reco-food,#reco-logo, #reco-web-ad, #reco-social-media,
#reco-editorial, #reco-bonus_feature, #reco-print-ad, #reco-calendar, #reco-section, #reco-website, #reco-event,
#reco-success-stories, #reco-spec-ad{
    margin-bottom:20px !important; 
    border-bottom: 3px solid #f9f9f9 !important; 
    padding-bottom:20px !important;       
}
.teaser-row{
    border-bottom: 0px solid #f3f3f3 !important;   
    padding-bottom:0px !important;
    margin-bottom:0px !important;
}
*/

/* from templates.php */

.preview-border {
    border:2px dashed lime;
}


.download-block {
	background: #dcefee;  
	display: inline-block; 
	margin:4px; 
	padding: 3px;
	vertical-align: text-bottom;
}
.download-block img {
	max-width:200px; 
	max-height:100px;
	/* vertical-align:top; */
}
.download-block div {
	font-size: 9px; 
}
.download-block .info {
	 width: 100%;
}
.download-block select {
	width: 100%;
}
.download-block.getty {
	background: #ffe8cc;
}

/* Container needed to position the overlay. Adjust the width as needed */
.download-block .download-container {
  position: relative;
  margin:4px;
}

/* Make the image to responsive */
.download-block .image {
  /*width: 100%; (*/
  height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.download-block .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .3s ease;
  background-color: rgba(0,0,0,0);
}

.download-block .selected .icon{
  color: white;
}

.download-block .overlay.selected {
  background-color: rgba(0,0,0,0.1);
}


/* When you mouse over the container, fade in the overlay icon*/
.download-block .download-container:hover .overlay {
  background-color: rgba(0,0,0,.3);
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.download-block .icon {
  color: rgba(0,0,0,0);
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

#assetDownloaderDialog .assets {
	 text-align:justify;
}
#assetDownloaderDialog .message {
	font-size: 15px; 
}



/* Canada corner banner */
.ribbon {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: linear-gradient(rgba(247, 5, 5, .7) 0%, rgba(143, 8, 8, .7) 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid rgba(143, 8, 8, .7);
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid rgba(143, 8, 8, .7);
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid rgba(143, 8, 8, .7);
  border-bottom: 3px solid transparent;
  border-top: 3px solid rgba(143, 8, 8, .7);
}



/* top left corner banner */
.tl-ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.tl-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#05EFF7 0%, #087F8F 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.tl-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #087F8F;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #087F8F;
}
.tl-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #087F8F;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #087F8F;
}

/* bottom left corner banner */
.bl-ribbon {
  position: absolute;
  left: -5px; bottom: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.bl-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#05EFF7 0%, #087F8F 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 19px; left: -21px;
}
.bl-ribbon span::before {
  content: "";
  position: absolute; left: 0px; bottom: 100%;
  z-index: -1;
  border-left: 3px solid #087F8F;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid #087F8F;
}
.bl-ribbon span::after {
  content: "";
  position: absolute; right: 0px; bottom: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #087F8F;
  border-top: 3px solid transparent;
  border-bottom: 3px solid #087F8F;
}



/* hover menus for download options */
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
/* Show the dropdown menu on hover */
div:not(.hideit) .dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(129, 179, 179);
    top: 15px;
    left: -3px;
    white-space: nowrap;
    text-align: left;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 4px;
    padding:5px;
}
/* for rollover */
.infohrow .dropdown-content {
    top: -6px;
    left: -6px;
    padding: 2px;
}

/* gets clipped by scrolling rows in "All" if we go down - so shrink it */
.icons .dropdown-content {
    top: 18px;
    left: -10px;
}
.icons .dropdown-content a {
    padding: 2px 6px;
    font-size:12px !important;
    color: white;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 2px 6px;
    text-decoration: none;
    display: block;
    font-size:12px !important;
    color:#fff !important;
    width: max-content;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #339999;
    color:#fff !important;
    border-radius: 4px;
}

/* info view button */
.download-links .dropdown-content {
    top: 37px;
    left: 75px;
}
.download-links .dropdown-content a {
    background-color: inherit;
    width: 110px;
}
.download-links .dropdown-content a:hover {
    background-color: #339999;
}

#download-menus-target .tippy-content {
    padding: 0;
    border-radius: 0;
}
#download-menus-target .dropdown-content {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}
#download-menus-target .tippy-content {
    background-color: transparent;
}

/* allow drop down menus to hang out the bottom */
.hovercontainer {
    overflow: visible;
}
div#mcTooltip {
    overflow: visible;
}

.asset-rollover  {
    background-color: white;
    border-radius: 4px;
    color: #333; 
}
.asset-rollover  td {
    color:#777;
}
.asset-rollover .icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top:10px;
    background-color: white;
    font-size: 14px;
}
.asset-rollover .icons>a,
.asset-rollover .icons a.dropbtn
{
    color: #009999 !important;
}
.asset-rollover .icons a span {
    display: inline;
}
.icons a span {
    display: none;
}

.asset-rollover .name {
    bottom: 5px;
    right:0;
    top: unset;
}
.asset-rollover .filename-overlay.name a {
    color: white;
}

.asset-rollover figure {
    float:left; 
    margin:0 10px 10px 0;
}
.asset-rollover.mcc-editorial figure {
    border: 1px lightgray solid;
}

.XXasset-rollover figure img {
    height: 200px;
    max-width: 200px;
}
.asset-rollover .article-header-hover {
    margin-top:0;
}

.asset-rollover .preview {
    text-align: center;
    position: relative;
}
.asset-rollover .preview img {
    /*max-height: 100%;
    max-width: 100%;*/
    width: 100%;
    vertical-align: middle;
    margin-bottom:5px;
}


.asset-rollover.side-links .preview {
    float: left;
    margin-right: 10px !important;
}
.asset-rollover.side-links .info {
    display: flex;  /*not sure whay this works..*/
}


.widget-thumbs .block {
    display:inline-block;
    float:left;
    margin: 2px;
    height:65px;
    width:65px;
}
.widget-thumbs img {
    max-height:100%;
    max-width:100%;
}
.teallink {
   color:#009999;
}
.teallink a{
   color:#009999 !important;
   text-decoration:none;
}
.teallink a:hover{
   color:#009999 !important;
}
.image-caption {
    font-size: .8em;
    font-weight: bold;
}
.rollover {
    font-size: 12px;
}


.package-download a { 
    display:inline-block; 
    width:115px; 
    margin-bottom: 4px;
}


.filetype-text {
  font-size: 1.5em;
  font-weight: 700;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

.filter-label {
    font-size: 12px !important;
    color: #222 !important;
    margin: 10px 0px 0px 0px !important;
}
    
.search_content_wide, .recommended, #sets, .masonry-background {
    background-color: #ffffff;
    border-radius: 6px;
}

.search_content_wide {
    width: 100%;  /*Wierd anything more than 60 and the content gest pushed instead of squished - 100%; used to work? */
    min-height: 100%;
}


 /* gap between rows controlled on blocks now , so we can use that depth for download pulldown*/
/*
.teaser-row {
    position:relative;
    margin:0; 
    padding:0;
}
*/

.teaser-row .teaser-header {
    padding:0px 0px 0px 5px;
}
.teaser-row .searchhead {
    float:left;
    color: #333 !important;
    text-transform: none;
}
.teaser-row .more {
    float:left;
    margin:0 20px !important;
    font-size:16px !important;
}
.teaser-row .count {
    font-size:14px;
    font-weight:normal;
    color: #777777;
    padding-left:5px;
}

.unsubscribed .teaser-row {
    background-color: whitesmoke;
    /*opacity: 0.4;*/
}


.teaser-scroll .teaser-bar {
    overflow-x: scroll;
    overflow-y: visible;
}

.teaser-bar {
    /*overflow-x: hidden;
    overflow-y: hidden;*/
    overflow-x: clip;
    white-space: nowrap;
}
.teaser-bar .asset-block,
.teaser-bar .text-block
{
    white-space: normal;
    border-radius: 12px;
    padding:0px;
    vertical-align: bottom; /* why was this blocked out?*/
}

.view-more, .show-keywords {
  font-size:14px;
  line-height:34px;
  text-transform: capitalize;
}
.arrow {
  display:none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  width: 25px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  background-color: rgba(.5,.5,.5,.30);
  color: white;
  z-index: 2;
  height: 100%;
}

.arrow:hover {
    background-color: rgba(.5,.5,.5,.60);
}

/*
.teaser-scroll .scrollit .arrow, 
.scrollit .teaser-scroll .arrow {*/
.teaser-scroll.scrollit .arrow {
    display: block;
}
.teaser-scroll .scrollit .zero-left-scroll .arrow-left,  /*deprecated*/
.zero-left-scroll.teaser-scroll.scrollit .arrow-left {
    display: none;
}

.arrow-left {
  left: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.arrow-right {
  right: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}



.recommended-block {
    margin: 5px; 
    padding: 5px; 
    display:inline-block; 
}

#header-bar {
    z-index:2001;
}

#top-band {
    background-color: var(--searchbar-background-color);
    padding:10px 10px 0 10px;
    box-shadow: -1px 10px 17px -20px rgba(0, 0, 0, 0.3) inset;
    z-index:999;
}


.website-wrapper {
    width: calc(1440px * 0.40);
    height: calc(1440px * 0.40 * 1.45);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.website-wrapper>iframe {
    width: 1440px;
    height: calc(1440px * 1.45);
    -ms-zoom: 0.40;
    -moz-transform: scale(0.40);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.40);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.40);
    -webkit-transform-origin: 0 0;
}
/* prevent clicking on links */
.website-wrapper .website-overlay,
.fill-div
{
    width: 100%;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.blurb-l-linksb {
    width: unset;
}

.blurb-r-links {
    width: unset;
    max-width: 70%;
    float: right;
}

.blurb-preview p {
    font-size: 12px;
    margin: 0;
    line-height: 15px;
}

.info-mrows {
    margin:20px 0px 0px 0px; 
    width: 100%;
    clear: both;
}
.infomrow {
    width: 50%;
}

.download-count,
.thumbnail .Purchased,
.mini-section
{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(128,128,128,0.5);
    color: white;
    font-weight: bold;
    padding:3px;
    z-index: 1;
}

.mini-section
{
    left: 0;
    right: unset;
}


.marker-box
{
    position: absolute;
    bottom: 0;
    left: calc( (1 - var(--width-adjustment))/2 * 100%);
} 
.web-ad, .hi-res, .holiday-section, .used-in-ad, .bonus {
    float:left;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 16.8px;
    padding:3px 0;
    border-radius: 15px;
    width: 22px;
    text-align: center;
}
.web-ad { background-color: rgba(57,154,212,0.5); } /*blue*/
.hi-res { background-color: rgba(154,212,57,0.5); } /*green*/
.holiday-section { background-color: rgba(255,0,0,0.5); } /*red*/
.used-in-ad { background-color: rgba(64,64,64,0.5); } /*grey  //rgba(128,0,128,0.5); } /*purple*/
.bonus { background-color: rgba(225, 193, 110,0.5); } /*Brtass (brown)?)*/

.asset-detail .detail-preview {
    padding:0px 20px 20px 0px;
    width:50%; 
    vertical-align:top;
}
.asset-detail .show-large-preview img{
    border:none; /*0.5px solid #cccccc;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.asset-detail  p {
    color: #333;  /*reset unhelpful global style */
}
.asset-detail  .darker {
    color: rgb(85,85,85);  /*reset unhelpful global style */
}

.show-large-preview{
    text-align: center !important;
}
.feature .show-large-preview img{
    max-width: 40%;
    max-height: 288px;
    float: right;
    padding-right: 10px;
    padding-bottom: 5px;
}

.asset-detail figure { /*editorial only*/
    /* float:right;  */
    margin:10px 0px;
}
.asset-detail .crosswords figure { /*editorial only*/
    float: none; 
    margin:0;
}
.asset-detail figure img { /*editorial only*/
    border:0.5px solid #cccccc;
}

.download-main a {
    width: 265px;
    margin:0 0 5px 0;
}
.article-header-info {
  color: #333;
  font: bold 26px 'Poppins', sans-serif;
  line-height:24px !important;
}
.info-links {
    text-align: center;
    margin: 0 ;
}

.link-list
{
   max-width: 95%;
   margin:0 auto;
}

.link-list a
{
  text-align: center;
  background: #fff;
  border: 1px solid #6fbfbd;
  text-decoration: none;
  padding: 4px 8px;
  color: #6fbfbd !important;
  border-radius: 10px;
  display: inline-block;
  margin: 4px 4px 4px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  line-height: 12px;
  cursor: pointer !important;
  text-transform: capitalize !important;
}
.link-list a:hover
{
  border-color: #339999;
  color: #339999 !important;
}

.info-links>div,
#sets>h3
{
    padding-top: 0px;
    text-align: center;
/* background: url(https://mcg.metrocreativeconnection.com/publish/newmcc/images/global/bg-hr-dotted.png) 0 0 repeat-x;*/
    font-size: 22px;
    line-height: 24px;
    font-weight: 300;
    color: #333;
    text-align: center;
    margin: 0 auto 20px auto;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

/* flex masonry test */
.masonry-background {
    display: flex;
    flex-wrap: wrap;
    --row-height: 200px;  /* change this to generally increase height of rows */
    margin-top:15px;
    align-items: center; /*flex-end;*/
}
.masonry-background[data-mcc-size="x-small"]{
    --row-height: 120px;   /* consoldate with mcc_init & teaser size */
}
.masonry-background[data-mcc-size="small"]{
    --row-height: 150px;   /* consoldate with mcc_init & teaser size */
}
.masonry-background[data-mcc-size="large"]{
    --row-height: 250px; 
}
.masonry-background[data-mcc-size="x-large"]{
    --row-height: 320px;  
}

/* stops last line blowout */
.masonry-background:after {
    --ratio: var(--max-ratio) ;
    content: "";
    flex-grow: 1000000;
}

/* clamp the ratio to try and keep skyscrapers & banners in check*/
.masonry-background .asset-block,
.recommended .asset-block
{
    --ratio: clamp(calc(1/var(--max-ratio)), var(--asset-ratio), var(--max-ratio) );  /* --asset-ratio is asset width/height and is set for each block */
    flex-basis: calc(var(--ratio)*var(--row-height));
    flex-grow: calc(var(--ratio)*100);
}


.masonry-background .asset-block.unsubscribed,
.recommended .asset-block.unsubscribed,
.teaser-row .asset-block.unsubscribed,
.masonry-background .text-block.unsubscribed,
.recommended .text-block.unsubscribed,
.teaser-row .text-block.unsubscribed
{
    /*background-color: whitesmoke;*/
    opacity: 0.6;
}

.hatch {
   background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAEVJREFUKFNjZGBg+M8AAYxQGpkCy4EkQAycCnDpBonDTMdvBZKdjOjWoJgAcwayIqwKkN2EUwGy75C9jeFTWBDAFGENCgBfuQwGUEo7EwAAAABJRU5ErkJggg==
   ) repeat;
}

.job-materials .asset-block.mcc-layout-app
{
    --ratio: 1;  /* for ratio to 1 as we're displating a square icon */
}

/*ensure flex sizing gets all the way down to img element */
.masonry-background .thumbpanel,
.masonry-background .thumbnail,
.masonry-background table,  /*???*/
.masonry-background .thumbpanel img
{
    /*height: 100%;*/
    width: 100%;
    max-height: 100% !important;
    max-width: 100% !important;
}

/* limit height of image > 2:1 (sets percentage greater than 100% for rest but doesnot effect layout) */ 
.masonry-background .thumbpanel img.ratio {
    /*width: calc( (var(--asset-ratio)+0.5) * 100%);*/
    width: calc( var(--width-adjustment) * 100%  );
    margin-left: calc( (1 - var(--width-adjustment))/2 * 100%);
}

.masonry-background .next {
    height: var(--row-height);
    text-align: center;
    background:none !important;
}

.masonry-background .next>div {
    padding-top:40px !important;
    display: inline-block; 
    font-size: 26px; 
    line-height: normal; 
    cursor: pointer !important;
}

.masonry-background .text-block .thumbpanel img.ratio {
    height: var(--row-height) !important;
    max-width: calc(var(--max-ratio) * var(--row-height)) !important;
}

#sets { 
    /*height: 500px; /* canned size for info view result sets*/
    padding: 10px;
    --row-height: 150px;
}

.pref-bar {
    margin:0 0 20px 0;
    border-radius: 10px;
    background-color: #f5f5f5;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: normal;
    padding: 0px;
    text-decoration: none;
    color: #777;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*height: 38px;*/
    max-height:70px;
    width: 100%;
    overflow: hidden;
    padding-right: 10px;
    position: relative;
}

.sticky-headers .pref-bar {
    position: sticky;
    top: 158px;
    z-index: 600;
}

#project_browser .pref-bar,
#project_content .pref-bar {
    display:block;
    height: 38px;
    padding-right: 0;
}

.pref-bar a{    
    color:#fff;
}
.pref-bar a:hover{    
    color:#fff;
    text-decoration:underline;
}

.pref-bar .close {
    font-size: 12px;
    position: absolute;
    top: 5px;
    right:5px;
}

.pref-bar .close a{    
    color:black;
}
.pref-bar a:hover{    
    color:black;
    text-decoration:underline;
}


.pref-pulldown {
    float:left;
    font-size:12px !important;
    margin:0;
    padding:6px 10px;
    display: flex;
    align-items: center;
    color:#555 !important;
    text-decoration:none !important;
}

.pref-pulldown select {
    margin: 0 0 0 2px;
}
.pref-pulldown .sort-by {
    width: 134px;
}
.pref-pulldown .batchsize {
    width: 42px;
}
.pref-pulldown .thumbsize {
    width: 86px;
}
.pref-pulldown .label {
    display: inline-block;
}

.pref-checkbox {
    float:left;
    font-size:12px !important;  
    padding:6px 10px;
    display: flex;
    align-items: center;
    height: 100%;
    color:#555 !important;
    text-decoration:none !important;
}

.inline-pref {
    float: right;
    display: flex;
    align-items: center;
    height: 100%;
    text-align: center;
    background-color: #ededed;
    border-radius: inherit;
    padding-right: 10px;
}

.rollover-control {
    /*display: none !important; */
}

#tabBar .project-prefs {
    display: inline-block;
    text-decoration: none !important;
    height: 26px;
}

.reveal { 
    max-height: 100px; /* should be overidden on item */
    opacity: 1;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}
.reveal.reveal-hide { 
    max-height: 0;
    opacity: 0;
    margin: 0;
}

.infohrow, .infomrow {
    font-family: 'Poppins', sans-serif;
}

.pager, .feedback-link {
    float: right;
    padding-right: 10px;
    padding-top: 2px; /*10px;*/
    display: none;
}

#resultWrapper[data-mcc-split="left"] #leftSection .feedback-link ,
#resultWrapper[data-mcc-split="right"] #rightSection .feedback-link,
#resultWrapper[data-mcc-split="both"] #rightSection .feedback-link
{
   display:block; 
}

/* new pager styling */
.pager-container {
  position: relative;
  /*height: 100vh;*/
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pager-container .pager-list {
  font-family: 'Poppins', sans-serif;
  position: relative;
  background: #F8F8F8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: .85rem;
  font-weight: 400;
  border-radius: 10px;
  padding: 5px;
}
.pager-container .pager-list li {
  list-style-type: none;
  display: inline-block;
  color: #777;
  padding: 5px 5px;
  margin-bottom: 0;
}
.pager-container .pager-list li a {
  position: relative;
  padding: 5px 10px;
  text-decoration: none;
  color: #007777;
  border: 2px solid #F4F4F4;
  border-radius: 6px;
  background: #FFF;
}
.pager-container .pager-list li a:hover,
.pager-container .pager-list li.active a {
  border: 2px solid #D5D5D5;
}
.page-number {
  border: 2px solid #F4F4F4;
  color: #777;
  height: 29px;
  width: 30px;
  text-align:center;  
  border-radius: 6px;
}

.item-pager {
  justify-content: left;
}
/* end new pager styling */


#resultWrapper[data-mcc-split="left"] #leftSection .pager ,
#resultWrapper[data-mcc-split="right"] #rightSection .pager,
#resultWrapper[data-mcc-split="both"] #rightSection .pager
{
   display:block; 
}

.results .pager a{
    padding: 0;
    margin: 3px 0;
}
.results .pager a:hover{
    color:#009999;
    cursor: pointer;
}

.status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffffb3;
    color: teal;
    font-size: 2em;
}

.results .spinner {
    width: 100%;
    margin-top: 30px;
}

#appliedFilters {
    margin-bottom: 15px;
}

a.trial-link .fa-star * {
    color:#FFBA41;
}
.trial-link span {
    font-weight:bold;
}

/* utellus */
.utellus {
    width:100%;
    letter-spacing:.3px;
    color:#333;
    text-align: center;
    font-size:18px;
}

.were-sorry {
    font-size:20px;
    margin:5px 0 20px 0 !important;
}

.future-content {
    margin:5px 0 0 0 !important;
}

.search-text {
    color: #007777;
    font-weight:600;
}

.exact-match-retry {
    margin:5px 0 20px 0 !important;
}
.exact-match-retry a {
    color: #007777;
    text-decoration:underline;
}


.top-aside .one_half {
    width: unset;
}
.search-bar .type-ahead-group {
    /*width: 770px !important;*/
    max-width: 940px;
    flex-grow: 1;
}
.search-bar .freetext {
    flex-grow: 4 !important;
}
.search-bar .nottext {
    flex-grow: 1;
    /*flex-grow: 0;
    width: 155px !important;*/
}

.right-links {
    float:right;
}
.right-links>div {
    margin-top: 3px;
    padding:4px 8px;
}

.result-sub-title {
    font-size: 14px;
    color: #888;
    font-weight: normal;
    text-transform: none;
}

.checkered-background, .thumbpanel img.loaded {
    background: conic-gradient(var(--checked-light) 90deg, var(--checked-dark) 90deg 180deg, var(--checked-light) 180deg 270deg, var(--checked-dark) 270deg);
    background-repeat: repeat;
    background-size: 15px 15px;
}

.no-check {
    --checked-dark: #fff;
}
.light-check {
    --checked-dark: #f0f0f0;
}
.dark-check {
    --checked-light: #d0d000;
    --checked-dark: #aaaa00;
    /*--checked-light: #ddd;
    --checked-dark: #aaa;*/
}

.widget-thumbs .block img {
    background-size: 8px 8px;
}

.stuck-bottom {
    position: sticky;
    bottom: 100px;
    left: 30px;
    /* opacity: 0%; */
    transition: 1s;
    z-index:1000;
    container-type: scroll-state;
    container-name: sticky-button;
}
.stuck-right {
    position: sticky;
    right: 30px;
}
.stuck-bottom button {
    position: absolute;
    right: 30px;
    top:10px;
    padding: 5px;
    text-decoration: none;
    color: #007777;
    border: 2px solid #F4F4F4;
    border-radius: 6px;
    background: #FFF;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    transition: 1s;
}

html {
  container-type: scroll-state;
  container-name: scroller;
}

@supports (container-type: scroll-state) {
  /* CSS rules that rely on scroll-state() queries go here */
  .stuck-bottom {
    opacity: 0%;
  }
}

@container scroller scroll-state(scrollable: top) {
  .stuck-bottom {
    opacity: 100%;
  }
}

@container sticky-button scroll-state(stuck: none) {
  .stuck-bottom button {
    box-shadow: unset;
  }
}