.loading-placeholder { position: absolute; top: 30%; left: 50% }
.asset-footer { padding: 15px; flex: 1; display: flex; flex-direction: column; height: 100%; }
.asset-footer .actions a { text-decoration: none !important; font-size:1.1rem; }
.asset-footer .social-icon { font-size: 18px !important }
.asset-rating { padding: 5px 10px }
.asset-placeholder a.action { position: relative; }
.asset-placeholder .glyphicon-plus, .mag-pl-asset-container .glyphicon-remove-2 { margin-right: 0; }
.asset-placeholder .asset-div-img { border-bottom: 1px solid var(--mag-element-border-color);flex-shrink:0; }
.mag-pl-asset-container { height: 100%; display: flex; flex-direction: column; }
.asset-footer-info-container { flex:1;}
.asset-title, .asset-text { word-break: break-word; }
.asset-footer-actions-container { flex-shrink: 0; border-top: 1px solid var(--mag-element-border-muted-color); padding-top: 15px; }
.mag-pl-container .asset-placeholder { position: relative; border: 1px solid var(--mag-element-border-color); margin: 0px 0 25px 0; background-color: var(--mag-page-bg-100); }
.asset-placeholder .asset-text { padding-bottom:15px;}
.p-r-10 { padding-right: 10px; }
.p-r-15 { padding-right:15px;}
.star-grey { color: var(--mag-element-border-color); font-size: 15px; }
.star-orange { color: orange;}
.stars { padding: 15px; position: absolute; bottom: 5px; left: 0; }
.stars span { font-size: 12px; }
.hide-manage-asset { display: none }
.sort-asset-placeholder { width: calc(25% - 15px); height: 230px; float: left; border: dotted; border-color: dimgray; border-width: 1px; margin: 12px 2px 0 4px; background-color: antiquewhite }
.mag-pl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0 }
.mag-filter-bar:not(:empty) { padding-bottom:20px; }
.filter { padding: 4px 6px 5px 8px; display: inline-block; margin-top: 5px; margin-right: 15px; border: 1px solid var(--mag-element-border-color); }
.filter .glyphicon { cursor: pointer; }
.panel-container { max-width: 95%; position: relative; margin: 0 auto; }
.button-box { cursor: pointer; color: white; top: 10px; left: 27px; max-width: 95%; margin: 0 auto; position: absolute; z-index: 1000; }
.button-box h3 { text-shadow: 0 0 3px #222; opacity: 0.4; }
.button-box h3:hover { text-shadow: 0 0 6px #000; opacity: 1; }
.button-box:hover .show-banner-msg { display: block; }
#mag_pl_side_menu { transition: all 0.4s ease 0s; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; background-color: var(--mag-page-bg-200); border: 1px solid var(--mag-element-border-color); position: fixed; top: 0; left: -5px; height: 100vh; overflow-y: auto; width: 0; z-index: 1031; box-shadow: 0 0px 6px rgba(0,0,0,0.8); }
#mag_pl_side_menu.menu-open { left: 0; width: 320px; }
#mag_pl_side_menu.menu-open .mag-pl-side-menu-content { display: block; padding: 15px 15px 5px 15px; }
.filter-panel-group .panel { margin: 0; }
li.private-playbook > a { padding: 3px 10px; }
.btn-playbook-filters { display: none; height: 34px; float: left; }
.btn-playbook-actions { height: 34px }
.mag-pl-container { float: right; width: calc(100% - 260px); padding-left: 25px; }
.mag-pl-sidebar {float: left; width: 260px; height: 100%; position: -webkit-sticky; position: sticky;top:15px;left:0; z-index: 1; }
.mag-pl-sidebar-box { padding-bottom: 30px; }
.image-spec { margin: 0; color: gray; font-size: .8em; }
.logo-image { border: 1px solid var(--mag-element-border-color); }
.btn-filter-assets { margin-left: 10px; margin-right: 0 !important }
.asset-footer .social-icon { font-size: 28px !important }
.asset-rating { padding: 5px 10px }
.pb-center-align-banner .playbook-banner { height: 300px; position: relative; margin-bottom: 20px; }
.pb-center-align-banner .cover-wrapper-resize { overflow: hidden; height: 300px; position: relative; }

.pb-full-width-banner .mag-module-banner-container { padding-bottom: 15px; }
.sitePage .siteBody .pb-full-width-banner:has(.mag-module-banner-container) .playbook-detail { padding: 0 15px; }
.mozilla .sitePage .siteBody.hasModuleBannerFullWidth .pb-full-width-banner .playbook-detail { padding: 0 15px; }

.hasNavbarFixed .pb-full-width-banner .playbook-detail { padding-top: 20px; }

.page-setup-placeholder > .playbook-detail { padding-top: 15px; }
.page-setup-placeholder > div + .playbook-detail { padding-top: 0; }

.pb-detail-btn-back { margin-bottom: 15px; }
.img-banner { width: 100%; min-height: 100%; position: absolute; overflow: hidden; }
.btn-change-image > i { font-size: 12px }
.btn-change-image { margin-right: 10px }
.mag-search-btn { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cobranded-info span { display: block; word-wrap: break-word; }
.filter-panel-group .filter-selector { margin-bottom: 8px; }
.mag-pb-header { padding-bottom: 15px ;}
#mg_playbook_header .h3 { margin: 0; }
#mag_playbook_count { padding: 0; text-align: right; }
.sticky { position: fixed; z-index: 999; padding: 15px; left: 0px; top: 0px; border: none; width: 100%; box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); }
#mag_playbook_toolbar_branding { display: none; float: left;}
.toolbar-back-btn a { padding: 3px; }
.pl-toolbar-sm { background: var(--mag-page-bg-color); display: none; }
.mp-stars.false { min-height: 30px; display: none; }
.mp-stars.false .mag-icon { display: none; }
.btn-playbook-filters, .btn-update-cobranded { display: none; }
#mag_playbook_search { margin: 10px 0 20px 0; position: relative; width: 100%; }
#mag_playbook_search .glyphicon-search { position: absolute; z-index: 99; top: 10px; left: 5px; }
#mag_playbook_search #keywords { padding-left: 30px; padding-right: 23px; }
#mag_playbook_search .input-group-btn { position: absolute; top: 9px; right: -5px; }
#mag_playbook_filters { margin-bottom:35px; }
.search-lookup { position: relative; }
.search-lookup .glyphicon { position: absolute; right: 5px; top: 10px; }

.asset-placeholder { position: relative; }
.record-card { width: 240px; max-width: 240px; padding: 10px 10px 0 10px; }
.record-card p { font-size: 12px; line-height: 1.5em; }

.pb-tile-view .pb-tile-img { max-width:240px;max-height:170px;}

.flexbox-item.playbook-layout-four-col { overflow:hidden; width: 22.5%; margin-right: 1.25%; margin-left: 1.25%; margin-bottom: 2.5%; }
.flexbox-container.flex-row { margin-right: -1.25%; margin-left: -1.25%; }

#mag_playbook_branding { margin-top:20px;}
#mag_playbook_branding .cobranded-logo-info { padding-top: 15px; }

#socialShareModal .social-share { display: flex; justify-content: center; list-style-type: none; margin: 0; padding: 1rem 0 2rem 0; }
#socialShareModal .social-share li { padding: 0 1rem; }
#socialShareModal .social-link i { font-size: 32px; line-height: normal; }
#socialShareModal .social-link { display: inline-block; height: 100%; }

/*limit layout width for banner image to be shown as set in setup menu*/
.siteBody:not(.hasModuleBannerFullWidth) .playbook-layout-size { max-width: 1170px; margin: 0 auto; }
.siteBody:has(.mag-module-banner-container) .playbook-layout-size { max-width: 100%; }

/*manage number of docs in a row*/
.layout-five-col .flexbox-item { width: 18.5%; margin-right: 0.75%; margin-left: 0.75%; margin-bottom: 1.5%; }
.layout-five-col.flexbox-container { margin-right: -0.75%; margin-left: -0.75%; }
.layout-four-col .flexbox-item, .layout-four-col.flexbox-container::after { width: 23.5%; margin-right: 0.75%; margin-left: 0.75%; margin-bottom: 1.5%; }
.layout-four-col.flexbox-container { margin-right: -0.75%; margin-left: -0.75%; }
.layout-three-col .flexbox-item, .layout-three-col.flexbox-container::after { width: 30%; margin-right: 1.5%; margin-left: 1.5%; margin-bottom: 3%; }
.layout-three-col.flexbox-container { margin-right: -1.5%; margin-left: -1.5%; }
.layout-two-col .flexbox-item, .layout-two-col.flexbox-container::after { width: 46%; margin-right: 1.5%; margin-left: 1.5%; margin-bottom: 3%; }
.layout-two-col.flexbox-container { margin-right: -1.5%; margin-left: -1.5%; }
.layout-one-col .flexbox-item { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 6%; }
.layout-one-col.flexbox-container { margin-right: 0; margin-left: 0; margin-bottom:6%; }

@media screen and (min-width: 768px) { .modal-dialog { width: 760px; /* New width for default modal */ }
    .modal-sm { width: 350px; /* New width for small modal */ }
}

@media screen and (min-width: 992px) {
    .modal-lg { width: 950px; /* New width for large modal */ }
}


@media(max-width:1210px) {
    .siteBody { padding-right: 15px; padding-left:15px;}
}

@media(max-width:992px) {
    .pb-center-align-banner .playbook-banner { height: 250px; }
    .flexbox-item.playbook-layout-four-col { width: 30.8%; }
}

@media(max-width:768px) {
    .mag-pl-sidebar { display: none; }
    .mag-pl-container { width: 100%; }
    .btn-playbook-filters { display: block; }
    .playbook-text > .gallery-text > h3 { font-size: 1.2em }
    .playbook-text > .gallery-text > p { font-size: .9em; }
    #mag_playbook_count { text-align: left; }
    #mag_playbook_toolbar_branding { display: block; }
    .mp-search-bar.private { padding-right: 0; }
    .mp-search-bar .btn-update-cobranded { height: 34px; display: inline-block; }
    .pl-toolbar-sm { display: block;padding-bottom:15px; }
    .sitePage .siteBody:has(.mag-module-banner-container) .pl-toolbar-sm { padding: 15px; }
    .mozilla .sitePage .siteBody.hasModuleBannerFullWidth .pl-toolbar-sm { padding: 15px; }
    .pl-toolbar-sm .toolbar-back-btn { padding: 0; }
    .pb-detail-btn-back { display: none; }
    .mag-pl-container { padding: 0; }
    #mg_playbook_header .visible-xs { margin-top:10px;}
    .playbook-detail .actions-col { position: absolute; }
}

@media(max-width:576px) {
    .pb-center-align-banner .playbook-banner, .cover-wrapper-resize, .playbook-text { height: 120px; }
    .playbook-text { width: 100%; }
    .playbook-text > .gallery-text { top: 20%; margin-left: 0; }
    .playbook-text > .gallery-text > h3 { font-size: 0.8em }
    .playbook-text > .gallery-text > p { display: none; }
    .flexbox-item.playbook-layout-four-col { width: 47.5%; }
    .playbook-detail .actions-col { position: relative; }
}

@media(max-width:463px) {
    .flexbox-item.playbook-layout-four-col { width: 100%; margin-right: 0; margin-left: 0; }
}