:root { --userComponentCardSelectedColor: #1781E3; --userComponentCardSelectedColorHover: #1574cc; --userComponentCardSelectedColorActive: #1267b6; } @font-face { font-family: "TheSansBasic"; font-style: normal; font-weight: 200; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3Light.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3Light.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3Light.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3Light.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3Light.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3Light.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: italic; font-weight: 200; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3LightItalic.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3LightItalic.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3LightItalic.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3LightItalic.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3LightItalic.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B3LightItalic.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: normal; font-weight: 300; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLight.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLight.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLight.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLight.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLight.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLight.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: italic; font-weight: 300; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLightItalic..eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLightItalic..eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLightItalic..woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLightItalic..woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLightItalic..ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B4SemiLightItalic..svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: normal; font-weight: 400; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5Plain.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5Plain.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5Plain.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5Plain.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5Plain.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5Plain.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: italic; font-weight: 400; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5PlainItalic.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5PlainItalic.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5PlainItalic.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5PlainItalic.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5PlainItalic.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B5PlainItalic.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: normal; font-weight: 600; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBold.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBold.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBold.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBold.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBold.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBold.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: italic; font-weight: 600; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBoldItalic.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBoldItalic.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBoldItalic.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBoldItalic.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBoldItalic.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B6SemiBoldItalic.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: normal; font-weight: 700; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7Bold.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7Bold.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7Bold.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7Bold.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7Bold.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7Bold.svg#TheSansBasic") format("svg"); } @font-face { font-family: "TheSansBasic"; font-style: normal; font-weight: 700; src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7BoldItalic.eot"); src: url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7BoldItalic.eot?#iefix") format("embedded-opentype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7BoldItalic.woff2") format("woff2"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7BoldItalic.woff") format("woff"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7BoldItalic.ttf") format("truetype"), url("/5.0.5/includes/fonts/TheSansBasic/TheSans-B7BoldItalic.svg#TheSansBasic") format("svg"); } body { font-size: 14px; color: #666; background-color: #fff; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, pre, input, button, select, textarea, .ui-menu .ui-menu-item { font-family: "TheSansBasic", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5 { font-family: "TheSansBasic", Helvetica, Arial, sans-serif; } p { font-family: "TheSansBasic", Helvetica, Arial, sans-serif; font-size: 14px; } b, strong { font-family: "TheSansBasic", Helvetica, Arial, sans-serif; font-weight: 700; } a, a:visited, a.link-primary, a.link-primary:visited, a.share-link, a.onlineLinkPreview, a.active, .view-link-online, .control-group .copytoclipboard, table.table td a.job-title, .wf-dashboard-job-left a.job-title, .activity-title > a, .wf-jobs-list a, table.table td a, .span-link, .wf-wrapper a, a.stage-item.current.progress-current, .btn-link { font-family: "TheSansBasic", Helvetica, Arial, sans-serif; color: #666; text-decoration: none; transition: color 200ms ease; } a:hover, a:visited:hover, a.link-primary:hover, a.link-primary:visited:hover, a.share-link:hover, a.onlineLinkPreview:hover, a.active:hover, .view-link-online:hover, .control-group .copytoclipboard:hover, table.table td a.job-title:hover, .wf-dashboard-job-left a.job-title:hover, .activity-title > a:hover, .wf-jobs-list a:hover, table.table td a:hover, .span-link:hover, .wf-wrapper a:hover, a.stage-item.current.progress-current:hover, .btn-link:hover { color: #1781E3 !important; } a:active, a:visited:active, a.link-primary:active, a.link-primary:visited:active, a.share-link:active, a.onlineLinkPreview:active, a.active:active, .view-link-online:active, .control-group .copytoclipboard:active, table.table td a.job-title:active, .wf-dashboard-job-left a.job-title:active, .activity-title > a:active, .wf-jobs-list a:active, table.table td a:active, .span-link:active, .wf-wrapper a:active, a.stage-item.current.progress-current:active, .btn-link:active { color: #1574cc !important; } /* Buttons */ button.btn, button.btn-primary, button.btn-default, button.action-btn, button.action-btn.blue, button.action-btn.black, button.action-btn.green, span.action-btn, span.action-btn.black, span.action-btn.green, a.action-btn, a.action-btn.blue, a.action-btn.black, a.action-btn.green, a.action-btn:not(.disabled), a.start-btn, a.wizard-btn, .admin-right ul.admin-options li.logout button.action-btn, #carousel-holder .carousel-caption a.read-more, #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a, #image_enlarger .bottom .action-btn, #image_enlarger .bottom .action-btn.black, #image_enlarger .bottom.has-package .action-btn:first-child, #single-collection-top .cta-main-container > li > a, #single-collection-top .cta-main-container li.collection-delete a.action-btn, a.dialogbutton.dialog-cancel, header .tool-bar ul.actions-bar.group-btns.blue li a.group-btn.tip-trigger.group-edit, #styleguide-page-footer li.new-paragraph a.group-btn, #styleguide-page-footer li.new-embed-toolbar a.group-btn, .wf-wrapper .btn, .wf-wrapper .btn-default, .wf-wrapper .btn-primary, .stage-btn.btn-primary, #briefingroom-modal-container .btn-primary, #image_enlarger ul.media-info li.active .cropSave, #styleguide-button-export, .annotation-holder .save-annotation, .annotation-holder .edit-annotation, .preset .stage-management .stage-item .responsible, .cke_dialog a.cke_dialog_ui_button_ok, .btn.btn-download-product-data, #templateSettings .pull-right .btn, .brand-holder .thumbnail span.has-options.blue, .transfer-box a.btn, .stage-btn.primary, #styleguide-page-content .bynder-widget-header a.bynder-widget-btn, #podEditor .btn-dashed, header .tool-bar ul.group-btns.actions-bar.export-pdf li.active a.group-btn, header .tool-bar ul.group-btns.actions-bar.export-pdf li a.group-btn, #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton { color: #fff; background-color: #1781E3; border-radius: 5px; border: 0; font-family: "TheSansBasic", Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-size: 14px; text-transform: none; box-shadow: none; box-sizing: border-box; outline: none !important; text-shadow: none; transition: all 200ms ease; } button.btn:hover, button.btn-primary:hover, button.btn-default:hover, button.action-btn:hover, button.action-btn.blue:hover, button.action-btn.black:hover, button.action-btn.green:hover, span.action-btn:hover, span.action-btn.black:hover, span.action-btn.green:hover, a.action-btn:hover, a.action-btn.blue:hover, a.action-btn.black:hover, a.action-btn.green:hover, a.action-btn:not(.disabled):hover, a.start-btn:hover, a.wizard-btn:hover, .admin-right ul.admin-options li.logout button.action-btn:hover, #carousel-holder .carousel-caption a.read-more:hover, #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a:hover, #image_enlarger .bottom .action-btn:hover, #image_enlarger .bottom .action-btn.black:hover, #image_enlarger .bottom.has-package .action-btn:first-child:hover, #single-collection-top .cta-main-container > li > a:hover, #single-collection-top .cta-main-container li.collection-delete a.action-btn:hover, a.dialogbutton.dialog-cancel:hover, header .tool-bar ul.actions-bar.group-btns.blue li a.group-btn.tip-trigger.group-edit:hover, #styleguide-page-footer li.new-paragraph a.group-btn:hover, #styleguide-page-footer li.new-embed-toolbar a.group-btn:hover, .wf-wrapper .btn:hover, .wf-wrapper .btn-default:hover, .wf-wrapper .btn-primary:hover, .stage-btn.btn-primary:hover, #briefingroom-modal-container .btn-primary:hover, #image_enlarger ul.media-info li.active .cropSave:hover, #styleguide-button-export:hover, .annotation-holder .save-annotation:hover, .annotation-holder .edit-annotation:hover, .preset .stage-management .stage-item .responsible:hover, .cke_dialog a.cke_dialog_ui_button_ok:hover, .btn.btn-download-product-data:hover, #templateSettings .pull-right .btn:hover, .brand-holder .thumbnail span.has-options.blue:hover, .transfer-box a.btn:hover, .stage-btn.primary:hover, #styleguide-page-content .bynder-widget-header a.bynder-widget-btn:hover, #podEditor .btn-dashed:hover, header .tool-bar ul.group-btns.actions-bar.export-pdf li.active a.group-btn:hover, header .tool-bar ul.group-btns.actions-bar.export-pdf li a.group-btn:hover, #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton:hover { color: #fff !important; background-color: #1574cc !important; border: 0; border-radius: 5px; box-shadow: none; cursor: pointer; } button.btn:focus, button.btn:active, button.btn-primary:focus, button.btn-primary:active, button.btn-default:focus, button.btn-default:active, button.action-btn:focus, button.action-btn:active, button.action-btn.blue:focus, button.action-btn.blue:active, button.action-btn.black:focus, button.action-btn.black:active, button.action-btn.green:focus, button.action-btn.green:active, span.action-btn:focus, span.action-btn:active, span.action-btn.black:focus, span.action-btn.black:active, span.action-btn.green:focus, span.action-btn.green:active, a.action-btn:focus, a.action-btn:active, a.action-btn.blue:focus, a.action-btn.blue:active, a.action-btn.black:focus, a.action-btn.black:active, a.action-btn.green:focus, a.action-btn.green:active, a.action-btn:not(.disabled):focus, a.action-btn:not(.disabled):active, a.start-btn:focus, a.start-btn:active, a.wizard-btn:focus, a.wizard-btn:active, .admin-right ul.admin-options li.logout button.action-btn:focus, .admin-right ul.admin-options li.logout button.action-btn:active, #carousel-holder .carousel-caption a.read-more:focus, #carousel-holder .carousel-caption a.read-more:active, #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a:focus, #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a:active, #image_enlarger .bottom .action-btn:focus, #image_enlarger .bottom .action-btn:active, #image_enlarger .bottom .action-btn.black:focus, #image_enlarger .bottom .action-btn.black:active, #image_enlarger .bottom.has-package .action-btn:first-child:focus, #image_enlarger .bottom.has-package .action-btn:first-child:active, #single-collection-top .cta-main-container > li > a:focus, #single-collection-top .cta-main-container > li > a:active, #single-collection-top .cta-main-container li.collection-delete a.action-btn:focus, #single-collection-top .cta-main-container li.collection-delete a.action-btn:active, a.dialogbutton.dialog-cancel:focus, a.dialogbutton.dialog-cancel:active, header .tool-bar ul.actions-bar.group-btns.blue li a.group-btn.tip-trigger.group-edit:focus, header .tool-bar ul.actions-bar.group-btns.blue li a.group-btn.tip-trigger.group-edit:active, #styleguide-page-footer li.new-paragraph a.group-btn:focus, #styleguide-page-footer li.new-paragraph a.group-btn:active, #styleguide-page-footer li.new-embed-toolbar a.group-btn:focus, #styleguide-page-footer li.new-embed-toolbar a.group-btn:active, .wf-wrapper .btn:focus, .wf-wrapper .btn:active, .wf-wrapper .btn-default:focus, .wf-wrapper .btn-default:active, .wf-wrapper .btn-primary:focus, .wf-wrapper .btn-primary:active, .stage-btn.btn-primary:focus, .stage-btn.btn-primary:active, #briefingroom-modal-container .btn-primary:focus, #briefingroom-modal-container .btn-primary:active, #image_enlarger ul.media-info li.active .cropSave:focus, #image_enlarger ul.media-info li.active .cropSave:active, #styleguide-button-export:focus, #styleguide-button-export:active, .annotation-holder .save-annotation:focus, .annotation-holder .save-annotation:active, .annotation-holder .edit-annotation:focus, .annotation-holder .edit-annotation:active, .preset .stage-management .stage-item .responsible:focus, .preset .stage-management .stage-item .responsible:active, .cke_dialog a.cke_dialog_ui_button_ok:focus, .cke_dialog a.cke_dialog_ui_button_ok:active, .btn.btn-download-product-data:focus, .btn.btn-download-product-data:active, #templateSettings .pull-right .btn:focus, #templateSettings .pull-right .btn:active, .brand-holder .thumbnail span.has-options.blue:focus, .brand-holder .thumbnail span.has-options.blue:active, .transfer-box a.btn:focus, .transfer-box a.btn:active, .stage-btn.primary:focus, .stage-btn.primary:active, #styleguide-page-content .bynder-widget-header a.bynder-widget-btn:focus, #styleguide-page-content .bynder-widget-header a.bynder-widget-btn:active, #podEditor .btn-dashed:focus, #podEditor .btn-dashed:active, header .tool-bar ul.group-btns.actions-bar.export-pdf li.active a.group-btn:focus, header .tool-bar ul.group-btns.actions-bar.export-pdf li.active a.group-btn:active, header .tool-bar ul.group-btns.actions-bar.export-pdf li a.group-btn:focus, header .tool-bar ul.group-btns.actions-bar.export-pdf li a.group-btn:active, #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton:focus, #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton:active { color: #fff !important; background-color: #1267b5 !important; border: 0; border-radius: 5px; box-shadow: none; } /* Secondary buttons / Cancel buttons */ a.action-btn.cancel, a.action-btn.action-cancel, a.action-btn.cancel-request, a.action-btn.cancel-bulk, a.action-cancel, a.action-btn.gray, a.action-btn#clearFilter, a.cancel-bulk, a#styleguide-save, button.cancel, button.action-btn.cancel, button.action-btn.blue.cancel, button.action-btn.gray, button.action-btn.back-btn, button.btn-default.cancel, button.redhover, button[data-bb-handler=cancel], button[data-bb-handler=cancel].btn.btn-default, .annotation-holder .remove-annotation, a.dialogbutton.dialog-cancel, a.cke_dialog_ui_button_cancel, .content-container .page-component .form-actions a.action-btn.gray, .import-asset-button-container #assetImportButton, .stage-nav .stage-btn.pull-left.previous-stage, .modal-container .modal-header .modal-close, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box { max-height: 40px; color: #666 !important; background-color: #CFD5D9 !important; border: 0 !important; border-radius: 5px !important; box-shadow: none !important; box-sizing: border-box; } a.action-btn.cancel:hover, a.action-btn.action-cancel:hover, a.action-btn.cancel-request:hover, a.action-btn.cancel-bulk:hover, a.action-cancel:hover, a.action-btn.gray:hover, a.action-btn#clearFilter:hover, a.cancel-bulk:hover, a#styleguide-save:hover, button.cancel:hover, button.action-btn.cancel:hover, button.action-btn.blue.cancel:hover, button.action-btn.gray:hover, button.action-btn.back-btn:hover, button.btn-default.cancel:hover, button.redhover:hover, button[data-bb-handler=cancel]:hover, button[data-bb-handler=cancel].btn.btn-default:hover, .annotation-holder .remove-annotation:hover, a.dialogbutton.dialog-cancel:hover, a.cke_dialog_ui_button_cancel:hover, .content-container .page-component .form-actions a.action-btn.gray:hover, .import-asset-button-container #assetImportButton:hover, .stage-nav .stage-btn.pull-left.previous-stage:hover, .modal-container .modal-header .modal-close:hover, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box:hover { color: #fff !important; background-color: #c1c9ce !important; } a.action-btn.cancel:active, a.action-btn.cancel:focus, a.action-btn.action-cancel:active, a.action-btn.action-cancel:focus, a.action-btn.cancel-request:active, a.action-btn.cancel-request:focus, a.action-btn.cancel-bulk:active, a.action-btn.cancel-bulk:focus, a.action-cancel:active, a.action-cancel:focus, a.action-btn.gray:active, a.action-btn.gray:focus, a.action-btn#clearFilter:active, a.action-btn#clearFilter:focus, a.cancel-bulk:active, a.cancel-bulk:focus, a#styleguide-save:active, a#styleguide-save:focus, button.cancel:active, button.cancel:focus, button.action-btn.cancel:active, button.action-btn.cancel:focus, button.action-btn.blue.cancel:active, button.action-btn.blue.cancel:focus, button.action-btn.gray:active, button.action-btn.gray:focus, button.action-btn.back-btn:active, button.action-btn.back-btn:focus, button.btn-default.cancel:active, button.btn-default.cancel:focus, button.redhover:active, button.redhover:focus, button[data-bb-handler=cancel]:active, button[data-bb-handler=cancel]:focus, button[data-bb-handler=cancel].btn.btn-default:active, button[data-bb-handler=cancel].btn.btn-default:focus, .annotation-holder .remove-annotation:active, .annotation-holder .remove-annotation:focus, a.dialogbutton.dialog-cancel:active, a.dialogbutton.dialog-cancel:focus, a.cke_dialog_ui_button_cancel:active, a.cke_dialog_ui_button_cancel:focus, .content-container .page-component .form-actions a.action-btn.gray:active, .content-container .page-component .form-actions a.action-btn.gray:focus, .import-asset-button-container #assetImportButton:active, .import-asset-button-container #assetImportButton:focus, .stage-nav .stage-btn.pull-left.previous-stage:active, .stage-nav .stage-btn.pull-left.previous-stage:focus, .modal-container .modal-header .modal-close:active, .modal-container .modal-header .modal-close:focus, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box:active, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box:focus { color: #fff !important; background-color: #b3bcc2 !important; } /* Success button */ .stage-btn.success { margin: 0; padding: 0 15px; background-color: #1781E3; border: 0; } .stage-btn.success:hover { background-color: #1574cc; } .stage-btn.success:active { background-color: #1267b5; } .stage-btn.success .fa { margin-left: 5px; line-height: 30px; } /* Colored buttons */ span.action-btn.green, a.action-btn.green, a.btn.btn-success, button.action-btn.green, #templateSettings .pull-right a.btn.btn-success { background-color: #5cb85c !important; color: #fff !important; border: 0; } span.action-btn.green:hover, a.action-btn.green:hover, a.btn.btn-success:hover, button.action-btn.green:hover, #templateSettings .pull-right a.btn.btn-success:hover { background-color: #449d44 !important; color: #fff !important; } span.action-btn.green:active, a.action-btn.green:active, a.btn.btn-success:active, button.action-btn.green:active, #templateSettings .pull-right a.btn.btn-success:active { background-color: #3d8b3d !important; color: #fff !important; } span.action-btn.green:focus, a.action-btn.green:focus, a.btn.btn-success:focus, button.action-btn.green:focus, #templateSettings .pull-right a.btn.btn-success:focus { background-color: #3d8b3d !important; color: #fff !important; } span.action-btn.red, a.action-btn.red, button.action-btn.red, button.btn.btn-danger, #templateSettings .pull-right button.btn.btn-danger, #single-collection-top .cta-main-container li.collection-delete a.action-btn { background-color: #c00 !important; color: #fff !important; border: 0; } span.action-btn.red:hover, a.action-btn.red:hover, button.action-btn.red:hover, button.btn.btn-danger:hover, #templateSettings .pull-right button.btn.btn-danger:hover, #single-collection-top .cta-main-container li.collection-delete a.action-btn:hover { background-color: #990000 !important; } span.action-btn.red:active, a.action-btn.red:active, button.action-btn.red:active, button.btn.btn-danger:active, #templateSettings .pull-right button.btn.btn-danger:active, #single-collection-top .cta-main-container li.collection-delete a.action-btn:active { background-color: maroon !important; } span.action-btn.red:focus, a.action-btn.red:focus, button.action-btn.red:focus, button.btn.btn-danger:focus, #templateSettings .pull-right button.btn.btn-danger:focus, #single-collection-top .cta-main-container li.collection-delete a.action-btn:focus { background-color: maroon !important; } /* Setup wizard buttons */ .content .setup-lookfeel .select .upload-btn, .content .upload-media .select .upload-btn, .content .add-brands .board .addBrand, .content .add-brands .board .addCategory, .content .upload-media .select .upload-btn-review, .setup-wizard nav .navigation .next, .wizard-btn.addBrand, .setup-wizard nav .navigation .previous { color: #fff !important; } .content .setup-lookfeel .select .upload-btn:hover, .content .upload-media .select .upload-btn:hover, .content .add-brands .board .addBrand:hover, .content .add-brands .board .addCategory:hover, .content .upload-media .select .upload-btn-review:hover, .setup-wizard nav .navigation .next:hover, .wizard-btn.addBrand:hover, .setup-wizard nav .navigation .previous:hover { color: #fff !important; background-color: #1574cc !important; } .content .setup-lookfeel .select .upload-btn:focus, .content .upload-media .select .upload-btn:focus, .content .add-brands .board .addBrand:focus, .content .add-brands .board .addCategory:focus, .content .upload-media .select .upload-btn-review:focus, .setup-wizard nav .navigation .next:focus, .wizard-btn.addBrand:focus, .setup-wizard nav .navigation .previous:focus { color: #fff !important; background-color: #1267b5 !important; } .content .setup-lookfeel .select .upload-btn:active, .content .upload-media .select .upload-btn:active, .content .add-brands .board .addBrand:active, .content .add-brands .board .addCategory:active, .content .upload-media .select .upload-btn-review:active, .setup-wizard nav .navigation .next:active, .wizard-btn.addBrand:active, .setup-wizard nav .navigation .previous:active { color: #fff !important; background-color: #1267b5 !important; } button.icon-close, .modal-close { color: #fff; background-color: #CFD5D9; } button.icon-close:hover, .modal-close:hover { color: #1781E3 !important; } .bg-primary { background-color: #1781E3; } ul.group-btns.blue li a.group-btn:active { background-color: transparent; } .stage-btn.success:hover { color: #fff !important; } #styleguide-page-footer li.new-embed-toolbar a.group-btn:hover .fa { color: #fff; } .stage-nav .stage-btn.pull-left.previous-stage { padding: 0 15px; height: 30px; line-height: 28px; } button.btn-switch { background: none !important; color: #7ab03f !important; border: 0 !important; } button.btn-switch:hover, button.btn-switch:focus { background: none !important; color: #000 !important; } button.btn-switch .active { background: none; color: #CF000F !important; } button.btn-switch .active:hover, button.btn-switch .active:focus { background: none !important; color: #000 !important; } #confirm-modal .action-btn.action-confirm span.type { padding: 0; background-color: transparent; font-family: "TheSansBasic", Helvetica, Arial, sans-serif; font-size: 14px; text-transform: none; } #templateSettings .pull-right .btn[disabled] { color: #fff !important; background-color: #1781E3 !important; border: 0 !important; } /*======================= HEADER =======================*/ header.base { min-width: 100%; height: auto; background: #fff; box-shadow: none; z-index: 99; transition: top 600ms; } header.base.small { top: -50px; } /* Admin-bar section */ header > .admin-bar { height: 50px; margin: 0 auto; padding: 0 20px; background: #fff; font-size: 14px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); z-index: auto; } a.admin-bar-logo.powered, a.admin-bar-logo { height: 50px; line-height: 50px; margin: 0; background-position: 0 50%; opacity: 0.6; transition: all 200ms ease; } a.admin-bar-logo.powered:hover, a.admin-bar-logo:hover { opacity: 1; } .unit-switch-container { position: absolute; margin: 7px 0 0 0; border: 0; border-radius: 0; z-index: 120; } .unit-switch-container button.btn-adminbar { padding: 10px 6px; font-size: 11px; } .unit-switch-container a.unit-dropdown, .unit-switch-container.show a.unit-dropdown { padding: 0 25px 0 10px; color: #666; font-weight: 400; background-color: #fff; border: 1px solid #DCE3E7; border-radius: 0; } .unit-switch-container a.unit-dropdown:hover, .unit-switch-container.show a.unit-dropdown:hover { color: #1781E3; background-color: #fff; border-color: #1781E3; } .unit-switch-container a.unit-dropdown:hover > span .fa-caret-down, .unit-switch-container.show a.unit-dropdown:hover > span .fa-caret-down { color: #1781E3; } .unit-switch-container a.unit-dropdown > span, .unit-switch-container.show a.unit-dropdown > span { top: 0; right: 12px; line-height: 32px; } .unit-switch-container a.unit-dropdown > span .fa-caret-down, .unit-switch-container.show a.unit-dropdown > span .fa-caret-down { transition: all 200ms ease; } .unit-switch-container.show a.unit-dropdown { border-color: #1781E3; } .unit-switch-container.show .unit-switch-dropdown { top: 35px; border-radius: 0; } .unit-switch-container.show .unit-switch-dropdown .auto-complete { box-shadow: none; border-radius: 0; } ul.ui-autocomplete, ul.auto-complete { padding: 0; background: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-sizing: border-box; } ul.ui-autocomplete li.ui-menu-item, ul.auto-complete li.ui-menu-item { border-bottom: 1px solid #DCE3E7 !important; } ul.ui-autocomplete li.ui-menu-item:last-of-type, ul.auto-complete li.ui-menu-item:last-of-type { border-bottom: 0; } ul.ui-autocomplete:empty, ul.auto-complete:empty { border: 0; } ul.ui-autocomplete .ui-state-focus { margin: 0; color: #fff !important; background: #1781E3 !important; transition: none; } ul.ui-autocomplete li:first-child a, ul.auto-complete li:first-child a { border-radius: 0; } /* Admin-right */ .admin-right li a, .admin-right li a .fa { transition: all 200ms ease; } .admin-right ul li:hover > a, .admin-right ul li.hover > a { color: #1781E3; background-color: rgba(0, 0, 0, 0.1); transition: all 200ms ease; } .admin-right ul li:hover > a:before, .admin-right ul li.hover > a:before { color: #1781E3 !important; border-color: #1781E3 !important; } .admin-right ul li:hover > a i.fa, .admin-right ul li.hover > a i.fa { color: #1781E3 !important; } .admin-right ul.badges li > a i.fa { color: #666; height: 50px; line-height: 50px; } .admin-right i.fa, .admin-right ul.admin-options i.fa { height: 50px; color: #666; font-size: 20px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); transition: all 200ms ease; vertical-align: bottom; } .admin-right i.fa.fa-lg, .admin-right ul.admin-options i.fa.fa-lg { line-height: 50px; } .admin-right ul.badges li > a { height: 50px; line-height: 50px; padding: 0 10px; color: #666; box-sizing: border-box; } .admin-right ul.badges li > a span { min-width: 22px; height: 22px; line-height: 22px; margin: 14px 0 0 4px; padding: 0; background-color: #1781E3; color: #fff; font-weight: 600; font-size: 11px; border: 0; border-radius: 100px; box-sizing: border-box; box-shadow: none; text-shadow: none; transition: all 200ms ease, transform ease 0.6s; } ul.badges > li > div.activity-dropdown > ul > li > p { max-width: 200px; font-size: 12px; } /* Profile & Settings */ ul.admin-options > li > a { height: 50px; line-height: 50px; padding: 0 10px; font-size: 14px; color: #666; } ul.admin-options > li > a:hover.fa, ul.admin-options > li > a:hover .fa-caret-down { color: #1781E3 !important; } ul.admin-options > li > a.profile > .avatar { position: relative; width: 25px; height: 25px; line-height: 25px; margin: 12.5px 4px 0 0; background-color: transparent; border: 0; border-radius: 100px; text-align: center; z-index: 20; } ul.admin-options > li > a.profile:before { content: "\f2be"; position: absolute; width: 25px; height: 50px; line-height: 50px; left: 10px; margin: 0; color: #666; font-family: fontAwesome; font-size: 20px; box-sizing: border-box; z-index: 10; } ul.admin-options > li > a.profile:hover:before { color: #1781E3; border-color: #1781E3; transition: all 200ms ease; } ul.admin-options > li > a.settings > i.fa-caret-down, ul.admin-options > li > a.profile > i.fa-caret-down { display: none; margin: 2px 0 0 3px; color: #666; font-size: 14px; } ul.admin-options > li.touch-block.hover > a.settings > i.fa-caret-down, ul.admin-options > li.touch-block.hover > a.profile > i.fa-caret-down { transition: all 200ms ease; transform: rotate(180deg); } /* Adminbar dropdown */ ul.admin-options > li > div.admin-dropdown { top: 50px; padding: 0; background: #fff; box-shadow: 0 2px 8px 0 rgba(1, 1, 1, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); } ul.admin-options > li > div.admin-dropdown .fa { height: auto; line-height: normal; vertical-align: baseline; margin: 0 4px 0 0; } .admin-right ul.single i.fa { font-size: 14px; } .admin-right ul.admin-options .admin-dropdown ul.single .fa { width: auto; color: #666; } ul.badges > li.active div.activity-dropdown, ul.badges > li#shoppingCart > .activity-dropdown, ul.badges > li.active .activity-dropdown, ul.admin-options > li > div.admin-dropdown, ul.admin-options > li.hover > .admin-dropdown, ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub { border: 0; border-radius: 0 0 0 0; z-index: 120; } ul.admin-options > li > div.admin-dropdown ul.single li a.admin-option, ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub ul.single-sub li a.admin-option-sub { height: auto; line-height: normal; padding: 10px 20px; color: #666; } ul.admin-options > li > div.admin-dropdown ul.single li a.admin-option:after, ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub ul.single-sub li a.admin-option-sub:after { content: ""; position: absolute; width: auto; height: 1px; right: 20px; bottom: 0; left: 20px; background-color: #f2f2f2; } ul.admin-options > li.touch-block > .admin-dropdown ul.single > li:not(.logout):last-of-type a.admin-option:after, ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub ul.single-sub li:last-of-type a.admin-option-sub:after { display: none; } ul.admin-options > li > div.admin-dropdown ul.single li:first-of-type a.admin-option { padding-top: 12px; } ul.admin-options > li > div.admin-dropdown ul.single li:last-of-type a.admin-option { padding-bottom: 12px; } ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub ul.single-sub li a.admin-option-sub { background: #fff; } ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub { margin: 0 0 0 4px; padding: 0; background: #fff; } ul.admin-options > li > div.admin-dropdown ul.single li.sub div.admin-dropdown-sub ul.single-sub li a.admin-option-sub:hover { background-color: rgba(0, 0, 0, 0.03); } ul.admin-options > li > div.admin-dropdown ul.single li.sub:hover:before, ul.admin-options > li > div.admin-dropdown ul.single li.sub.hover:before, ul.admin-options > li > div.admin-dropdown ul.single li.sub.noHover.hover:before, ul.admin-options > li > div.admin-dropdown ul.single li.sub.noHover.hover:hover:before { top: 11px; } ul.admin-options > li > div.admin-dropdown ul.single li.sub a { padding: 10px 10px 10px 20px; transition: all 200ms ease; } ul.admin-options > li > div.admin-dropdown ul.single li.sub a:hover { padding-left: 10px; } ul.admin-options > li > div.admin-dropdown ul.single li.sub .admin-dropdown-sub ul.single li a { padding-left: 20px; } ul.admin-options > li > div.admin-dropdown ul.single li.sub .admin-dropdown-sub ul.single li a:hover { padding-left: 20px; } ul.admin-options > li > div.admin-dropdown ul.single li.sub:before { content: "\f104"; position: absolute; color: #666; font-family: "FontAwesome"; font-size: 16px; top: 10px; left: 10px; } ul.admin-options > li > div.admin-dropdown ul.single li.sub:hover:before, ul.admin-options > li > div.admin-dropdown ul.single li.sub.hover:before, ul.admin-options > li > div.admin-dropdown ul.single li.sub.noHover.hover:before, ul.admin-options > li > div.admin-dropdown ul.single li.sub.noHover.hover:hover:before { top: 11px; } /* Brandstore */ ul.badges > li#shoppingCart > div.activity-dropdown .checkout-btn .fa { vertical-align: middle; } ul.badges > li#shoppingCart > div.activity-dropdown .checkout-btn .fa-chevron-right { position: absolute; height: 40px; line-height: 40px; color: #fff; margin-left: 5px; font-size: 16px; } ul.badges > li#shoppingCart > div.activity-dropdown > ul { overflow-y: auto; } /* Logout */ .admin-right ul.admin-options > li > div.admin-dropdown ul.single li.logout { padding: 10px; } .admin-right ul.admin-options .admin-dropdown ul.single li.logout button .fa { color: inherit; font-size: 12px; vertical-align: baseline; } /* Tasks */ ul.badges > li > div.activity-dropdown h2:after { top: -10px; } ul.badges > li > div.activity-dropdown > ul > li > .actions { right: 25px; } ul.badges > li > div.activity-dropdown > ul > li > .actions a.remove-task { top: 20px; right: -15px; } ul.badges > li > div.activity-dropdown > ul > li > .actions a.action-btn { height: auto; } ul.badges #taskFeed a.action-btn.download-task .fa-download { color: #fff; } ul.admin-options > li > a.profile[title=Login]:before { display: none; } /* Notification center */ aside.notifications-panel section.notifications-right .notifications-header { color: #333; } aside.notifications-panel section.notifications-right .notifications-list .notification .upload, aside.notifications-panel section.notifications-right .notifications-list .notification .updated { background-color: #1781E3; } aside.notifications-panel section.notifications-right .notifications-list .notification .download_request, aside.notifications-panel section.notifications-right .notifications-list .notification .upload_request, aside.notifications-panel section.notifications-right .notifications-list .notification .archived { background-color: #5cb85c; } .notifications-category-list section.notifications-right .upload { background-color: #1781E3; } .notifications-category-list section.notifications-right .notifications-list .notification .action-label { color: #1781E3; } .notifications-list .category .pull-right, .notifications-list .category .pull-right button.icon-group-close { height: 50px; line-height: 50px; margin-right: 10px; padding: 0; } .notifications-list button.icon-close:hover { background-color: transparent !important; } .notifications-list button.icon-group-close .fa { font-size: 18px; color: #b7b7b7; transition: all 200ms ease; } .notifications-list button.icon-group-close:hover, .notifications-list button.icon-group-close:focus, .notifications-list button.icon-group-close:active { background-color: transparent !important; } .notifications-list button.icon-group-close:hover .fa, .notifications-list button.icon-group-close:focus .fa, .notifications-list button.icon-group-close:active .fa { color: #1781E3 !important; } /* Notification popup */ aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification { height: auto; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } section.notifications-left .media .media-heading, section.notifications-right .media .media-heading { color: #666; } aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box:hover, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box:active, aside.notifications-panel section.notifications-left ul.notifications-flyover li.notification .media .media-right .close-box:focus { background: transparent !important; border: 0 !important; border-top: 1px solid #DCE3E7 !important; border-radius: 0 !important; font-weight: 400 !important; } section.notifications-left .ready, section.notifications-right .ready { background-color: #5cb85c; } /*======================= NAVIGATION SECTION / NAVBAR SECTION =======================*/ header .nav-bar { height: 80px; margin: 0 auto; padding: 0 20px; background: #fff; text-align: left; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-sizing: border-box; z-index: auto; transition: all 200ms ease; } header .nav-bar a.account-logo { width: auto; height: auto; max-height: 80px; line-height: 80px; margin: 0; border-radius: 0; } header .nav-bar a.account-logo img { max-height: 70px; margin: 0; vertical-align: middle; transition: none; } header .nav-bar .nav-bar-right { display: inline-block; float: none; height: 80px; line-height: 80px; } header .nav-bar .nav-main { margin: 0 10px; } header .nav-bar .nav-main li a { height: 80px; line-height: 80px; margin: 0; padding: 0 10px; color: #001155; font-weight: 400; font-size: 24px; border-radius: 0; } header .nav-bar .nav-main li a:after { content: ""; position: relative; display: block; width: 0; height: 1px; top: auto; bottom: 25px; margin: auto; background: transparent; transition: width 0.3s ease, background-color 0.3s ease; } header .nav-bar .nav-main li a:hover:after { width: 100%; background: #1781E3 !important; } header .nav-bar .nav-main li a:active:after { background-color: #001155; } header .nav-bar .nav-main li a.active { color: #001155; } header .nav-bar .nav-main li a.active:after { width: 100%; background: #001155; } header .nav-bar .nav-main li a .fa { display: none; } /* Responsive navigation */ header .nav-bar .nav-main li.hidden-nav { z-index: 9; } header .nav-bar .nav-main li.hidden-nav ul { background-color: #fff; } header .nav-bar .nav-main li.hidden-nav a:hover:after { background: transparent; } header .nav-bar .nav-main li.hidden-nav > ul { border: 1px solid #DCE3E7; border-top: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } header .nav-bar .nav-main li.hidden-nav > ul:after { position: absolute; top: -10px; left: 10px; border-width: 5px 8px 5px 8px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; content: ""; } header .nav-bar .nav-main li.hidden-nav > ul li a { height: 50px; line-height: 50px; margin: 0; padding-left: 10px; border-top: 1px solid #DCE3E7; text-align: left; } /* Upload media button / CTA button */ header .nav-bar .cta-main-container, #LayoutCompact #upload-compact-actions { height: 48px; line-height: 48px; margin: 16px 0 0 0; } .cta-main-container li a.cta-main, #styleguide-button-export, #LayoutCompact #upload-compact-actions #uploadMedia .upload-btn { height: 48px; line-height: 48px; margin: 0; padding: 0 24px; background: #1781E3; color: #fff; font-weight: 400; font-size: 16px; border: none; border-radius: 5px; box-shadow: none; transition: all 200ms ease; } .cta-main-container li a.cta-main:hover, #styleguide-button-export:hover, #LayoutCompact #upload-compact-actions #uploadMedia .upload-btn:hover { background: #1574cc; color: #fff !important; } .cta-main-container li a.cta-main:active, #styleguide-button-export:active, #LayoutCompact #upload-compact-actions #uploadMedia .upload-btn:active { background: #1267b5; } .cta-main-container li a.cta-main .fa-cloud-upload, .cta-main-container li a.cta-main .fa-briefcase, #styleguide-button-export .fa-cloud-upload, #styleguide-button-export .fa-briefcase, #LayoutCompact #upload-compact-actions #uploadMedia .upload-btn .fa-cloud-upload, #LayoutCompact #upload-compact-actions #uploadMedia .upload-btn .fa-briefcase { display: none; margin-right: 5px; } .cta-main-container li a.cta-main .fa, #styleguide-button-export .fa, #LayoutCompact #upload-compact-actions #uploadMedia .upload-btn .fa { vertical-align: baseline; height: 48px; line-height: 48px; font-size: 16px; transition: all 200ms ease; } .cta-main-container li a.cta-main { background: #1781E3; color: #fff !important; border: none; border-radius: 5px; box-shadow: none; transition: all 200ms ease; } .cta-main-container li a.cta-main:hover { background: #1574cc; color: #fff !important; } .cta-main-container li a.cta-main:active { background: #1267b5; } header .nav-bar .cta-main-container li:first-child a { border-radius: 5px 0 0 5px; } header .nav-bar .cta-main-container li:last-of-type a { border-radius: 0 5px 5px 0; border-left: none; } header .nav-bar .cta-main-container li:only-of-type a { border-radius: 5px !important; } header .nav-bar .cta-main-container #uploadMedia { height: 48px; line-height: 48px; } html.dashboard header .nav-bar .cta-main-container #uploadMedia a, body[data-module=media] header .nav-bar .cta-main-container #uploadMedia a { border-radius: 5px 0 0 5px; } header .nav-bar .cta-main-container li a.cta-main.cta-dropdown-trigger { width: auto; height: 48px; margin: 0 0 0 1px; padding: 0 20px; border-radius: 0 5px 5px 0; } header .nav-bar .cta-main-container li ul.cta-dropdown { right: 0; border-radius: 0; min-width: 178px; transition: all 200ms ease; } header .nav-bar .cta-main-container li ul.cta-dropdown:hover .add-news:before { color: #1781E3; } header .nav-bar .cta-main-container li ul.cta-dropdown > li > a { padding: 0 10px; line-height: 48px; } header .nav-bar .cta-main-container li ul.cta-dropdown .add-news:before { content: "\f0fe"; margin: 0 5px 0 0; font-family: "FontAwesome"; font-size: 12px; color: #666; vertical-align: baseline; transition: all 200ms ease; } html.dashboard header .tool-bar { display: none; } /* Searchbar section */ .nav-bar-search { width: 330px; height: 36px; line-height: 36px; margin: 7px 0 0 0; left: 50%; font-size: 14px; color: #333; background: #D1E6F9; border: none; border-radius: 5px; box-shadow: none; z-index: 120; transform: translateX(-50%); transition: all 200ms ease; } .nav-bar-search input.search { width: 330px; height: 36px; margin: 0; padding: 0 50px 0 10px; font-size: 14px; font-weight: 300; color: #333; background: #D1E6F9; border: 0; border-radius: 5px; box-sizing: border-box; transition: all 200ms ease; } .nav-bar-search input.search:focus { background: #D1E6F9; } .nav-bar-search input.search::-webkit-input-placeholder { color: #333 !important; transition: all 200ms ease; } .nav-bar-search input.search:-moz-placeholder { color: #333 !important; transition: all 200ms ease; } .nav-bar-search input.search::-moz-placeholder { color: #333 !important; transition: all 200ms ease; } .nav-bar-search input.search:-ms-input-placeholder { color: #333 !important; transition: all 200ms ease; } .nav-bar-search input.search:focus::-webkit-input-placeholder { color: #333 !important; } .nav-bar-search input.search:focus:-moz-placeholder { color: #333 !important; } .nav-bar-search input.search:focus::-moz-placeholder { color: #333 !important; } .nav-bar-search input.search:focus:-ms-input-placeholder { color: #333 !important; } .nav-bar-search a.spotlightClear, .nav-bar-search .spotlightLoader, .nav-bar-search .search-icon { width: 30px; height: 36px; line-height: 36px; top: 0; right: 0; left: auto; color: #666; font-size: 16px; text-align: center; } .nav-bar-search a.spotlightClear:hover, .nav-bar-search .spotlightLoader:hover, .nav-bar-search .search-icon:hover { color: #1781E3 !important; transition: all 200ms ease; } .nav-bar-search a.spotlightClear .fa, .nav-bar-search .spotlightLoader .fa, .nav-bar-search .search-icon .fa { vertical-align: middle; } .nav-bar-search .search-icon { width: 40px; right: 0; left: auto; line-height: 34px; } .nav-bar-search a.spotlightClear, .nav-bar-search .spotlightLoader { width: 40px; right: 20px; } /* Search results */ .nav-bar-search .nav-bar-searchbox { width: 330px; top: 41px; padding: 0; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .nav-bar-search .nav-bar-searchbox:after { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #DCE3E7 rgba(0, 0, 0, 0); } .nav-bar-search .nav-bar-searchbox ul li a p.searchbox-title { height: 40px; line-height: 40px; font-weight: 400; } .nav-bar-search .nav-bar-searchbox ul li a span, .nav-bar-search .nav-bar-searchbox ul li a.header span { position: absolute; top: 50%; transform: translateY(-50%); background: #1781E3; border-radius: 3px; text-transform: uppercase; } .nav-bar-search #suggestMediaItemPreview { border-radius: 0; } .nav-bar-search .spotlight-tag a i.fa { width: auto; } /* Dashboard search */ .nav-bar-search.dashboard-search, .nav-bar-search.dashboard-search input.search { height: 50px; line-height: 50px; background: #D1E6F9; color: #333; border: none; border-radius: 5px; box-sizing: border-box; z-index: 90; } .nav-bar-search.dashboard-search { margin: 0; top: 150px; left: 50%; transform: translateX(-50%); border: 0; } .nav-bar-search.dashboard-search input.search { width: 470px; padding: 5px 50px; } .nav-bar-search.dashboard-search .search-icon, .nav-bar-search.dashboard-search a.spotlightClear, .nav-bar-search.dashboard-search .spotlightLoader { width: 50px; height: 50px; line-height: 50px; top: 0; font-size: 20px; } .nav-bar-search.dashboard-search a.spotlightClear, .nav-bar-search.dashboard-search .spotlightLoader { right: 5px; } .nav-bar-search.dashboard-search .nav-bar-searchbox { width: 470px; top: 56px; } /*======================= DASHBOARD PAGE / HOME PAGE =======================*/ .content-container.dashboard { position: static; width: 100%; max-width: 1180px; margin: 0 auto; padding: 550px 0 0 0; } .content-container.dashboard > .collection-stream { position: static; float: left; width: 1180px; margin: 30px auto 0 auto; padding: 0; background: transparent; box-shadow: none; border-radius: 0; } /*======================= DASHBOARD SLIDER SECTION =======================*/ #carousel-holder { width: 100%; height: 420px; position: absolute; top: 130px; right: 0; left: 0; background: #fff; box-shadow: none; overflow: hidden; } #carousel-holder .carousel-inner > .item { height: 420px; max-height: none; background: transparent; } #carousel-holder .carousel-inner > .item:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.1); } #carousel-holder .carousel-inner > .item > img { position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; min-height: 100%; transform: translate(-50%, -50%); } #carousel-holder:hover .carousel-control { z-index: 89; } #carousel-holder .carousel-caption { position: absolute; top: 57px; right: calc((100% - 574px) / 2); bottom: auto; left: auto; width: 574px; max-width: 574px; padding: 0; background: transparent; text-align: center; box-sizing: border-box; transform: translateX(-50%); } #carousel-holder .carousel-caption h3 { margin: 0 0 20px 0; font-weight: 300; font-size: 54px; line-height: 64px; color: #001155; } #carousel-holder .carousel-caption p { margin: 0 0 20px 0; font-weight: 300; font-size: 24px; line-height: 30px; color: #666; } #carousel-holder .carousel-caption a.read-more { height: 40px; line-height: 40px; margin: 0; padding: 0 40px; font-size: 18px; font-weight: 300; color: #fff; border: 0; border-radius: 5px; background-color: #1781E3; } #carousel-holder a.carousel-control { opacity: 1; } #carousel-holder a.carousel-control i.fa { height: 50px; line-height: 50px; top: 50%; transform: translateY(-50%); margin-top: 0; color: #fff; font-size: 35px; font-weight: 700; border-radius: 0; background-color: rgba(255, 255, 255, 0.2); transition: all 200ms ease; } #carousel-holder a.carousel-control:hover i.fa { color: #1781E3; background: #fff; } #carousel-holder a.carousel-control.right { right: -50px; opacity: 0; transition: all 200ms ease; } #carousel-holder:hover a.carousel-control.right { right: 20px; opacity: 1; } #carousel-holder a.carousel-control.left { left: -50px; opacity: 0; transition: all 200ms ease; } #carousel-holder:hover a.carousel-control.left { left: 20px; opacity: 1; } #carousel-holder a.carousel-control, #carousel-holder a.carousel-control:hover, #carousel-holder a.carousel-control:focus, a.carousel-control:active { display: block !important; color: #fff; transition: all 200ms ease; opacity: 1; } .carousel-indicators li { width: 14px; height: 14px; margin: 0 2px 0 0; border: none; border-radius: 100px; background: rgba(255, 255, 255, 0.6); } .carousel-indicators li:hover { background: rgba(23, 129, 227, 0.9); } .carousel-indicators li.active { width: 14px; height: 14px; margin: 0 2px 0 0; background: rgba(255, 255, 255, 0.9); } .carousel-indicators li:only-child { display: none; } /*======================= DASHBOARD NAVIGATION TILES SECTION =======================*/ .content-container.dashboard .navigation-tiles { width: 1180px; height: 100%; margin: 0; padding: 0; background-color: transparent; overflow: hidden; } .navigation-tiles .navigation-tile { width: 380px; height: 330px; margin: 0 20px 20px 0; background: transparent; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; box-sizing: border-box; overflow: hidden; z-index: 50; } .navigation-tiles .navigation-tile:first-child:nth-last-child(1) { width: 380px; } .navigation-tiles .navigation-tile:first-child:nth-last-child(2), .navigation-tiles .navigation-tile:first-child:nth-last-child(2) ~ .navigation-tile { width: 380px; } .navigation-tiles .navigation-tile:first-child:nth-last-child(2):last-of-type, .navigation-tiles .navigation-tile:first-child:nth-last-child(2) ~ .navigation-tile:last-of-type { margin-right: 0; } .navigation-tiles .navigation-tile:first-child:nth-last-child(3), .navigation-tiles .navigation-tile:first-child:nth-last-child(3) ~ .navigation-tile { width: 380px; } /* Amount of navtiles per row */ .navigation-tiles .navigation-tile:nth-of-type(3n) { margin-right: 0; } .navigation-tiles .navigation-tile a { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; box-sizing: border-box; background: transparent; transition: background ease 0.6s !important; } .navigation-tiles .navigation-tile a:hover { background: #1781E3; } .navigation-tiles .navigation-tile a .navigation-image { position: relative; width: 380px; height: 200px; background-color: #fff; background-repeat: no-repeat; transition: 600ms; z-index: 10; filter: none; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); } .navigation-tiles .navigation-tile:hover a .navigation-image { transform: scale(1.06); } .navigation-tiles .navigation-tile a .navigation-content, .navigation-tiles .navigation-tile a .navigation-image + .navigation-content { position: absolute; width: 100%; height: 130px; top: auto; right: 0; bottom: 0; left: 0%; padding: 20px; color: #666; background: #fff; text-align: center; overflow: hidden; box-sizing: border-box; z-index: 30; } .navigation-tiles .navigation-tile:nth-of-type(1) a .navigation-content { border-top: 4px solid #0851DA; } .navigation-tiles .navigation-tile:nth-of-type(2) a .navigation-content { border-top: 4px solid #A63297; } .navigation-tiles .navigation-tile:nth-of-type(3) a .navigation-content { border-top: 4px solid #0EABA9; } .navigation-tiles .navigation-tile a .navigation-image + .navigation-content h1, .navigation-tiles .navigation-tile a .navigation-content h1 { margin: 0 0 5px; padding: 0; background: transparent; color: #333; font-weight: 300; font-size: 24px; word-break: break-word; transition: all 200ms ease; } .navigation-tiles .navigation-tile a .navigation-image + .navigation-content p, .navigation-tiles .navigation-tile a .navigation-content p { margin: 0; padding: 0; background: transparent; color: #666; font-weight: 300; font-size: 18px; overflow: hidden; text-overflow: ellipsis; transition: all 200ms ease; } /*======================= DASHBOARD COLLECTIONS SECTION / FEATURED COLLECTIONS SECTION =======================*/ .content-container.dashboard .featured-collections .collection { width: 100%; max-width: 1180px; height: 435px; margin: 0 0 20px 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; z-index: 80; overflow: hidden; } .content-container.dashboard .featured-collections .collection a { background-size: cover; background-repeat: no-repeat; } .featured-collections .collection .column-left, .featured-collections .collection .column-left a.main { width: 50%; height: 100%; } .featured-collections .collection .column-left { width: calc(33.3333333333% - 10px); margin-right: 15px; border: 0; border-radius: 0 0 0 0; box-sizing: border-box; } .featured-collections .collection .column-left a.main { position: absolute; width: 100%; height: 50%; top: auto; right: 0; bottom: 0; left: 0; border-radius: 0 0 0 0; background-repeat: no-repeat; } .featured-collections .collection .column-left a.description { width: auto; height: auto; max-height: 210px; top: 0; right: 0; bottom: auto; left: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; box-sizing: border-box; overflow: hidden; } .featured-collections .collection .column-left a.description h1 { margin: 40px 0 0 0; font-weight: 300; font-size: 24px; line-height: 24px; color: #333; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } .featured-collections .collection:hover .column-left a.description h1 { color: #1781E3; transition: all 200ms ease; } .featured-collections .collection .column-left a.description p { width: auto; height: auto; max-height: none; margin: 18px 0 0 0; font-weight: 300; font-size: 18px; line-height: 18px; color: #666; letter-spacing: 0; overflow: hidden; word-break: break-word; } .featured-collections .collection .column-left a.description p:last-of-type { margin-bottom: 0; } .featured-collections .collection .column-left a.description time { font-size: 12px; color: #666; } .featured-collections .collection .column-right { float: right; width: calc(66.6666666667% - 7.5px); height: 100%; margin-left: 0; background: transparent; border: 0; border-radius: 0 0 0 0; box-sizing: border-box; } .featured-collections .collection .column-right .media-left, .featured-collections .collection .column-right .media-right { width: calc(50% - 7.5px); } .featured-collections .collection .column-right .media-right { float: right; } .featured-collections .collection .column-right a.big, .featured-collections .collection .column-right a.small { width: 100%; height: calc(50% - 7.5px); } .featured-collections .collection .column-right .media-left a.small { display: none; } .featured-collections .collection .column-right .media-left a.big { height: 100%; } .featured-collections .collection .column-right .media-right a.small { margin-top: 15px; } .featured-collections .collection .column-left:before, .featured-collections .collection .column-left:after, .featured-collections .collection .column-right .media-left a:before, .featured-collections .collection .column-right .media-left a:after, .featured-collections .collection .column-right .media-right a:before, .featured-collections .collection .column-right .media-right a:after { content: none; } .featured-collections .collection span.label { display: none; } .collection:nth-of-type(2n) .column-left { float: right; margin-right: 0; margin-left: 15px; border: 0; border-radius: 0 0 0 0; box-sizing: border-box; } #collection-view #results-thumbs .media-holder.singleview { width: 50%; left: 50%; transform: translateX(-50%); } /*======================= DASHBOARD NEWS SECTION / FEATURED NEWS =======================*/ .collection.news { margin: 0 0 20px 0; padding: 0; background: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } .collection.news .news-content { padding: 20px; } .collection.news span.label { display: none; } .collection.news .news-image { position: relative; min-height: 200px; max-height: 400px; border-radius: 0 0 0 0; overflow: hidden; } .collection.news h1, .collection.news h1 a { color: #333; } .collection.news h2 { margin: 0 0 5px 0; } .collection.news a.read-more .fa-chevron-right:before { content: "\f105"; } /*======================= DASHBOARD INTRO SECTION =======================*/ .dashboard-intro { margin: 20px 0; padding: 20px; border: 1px solid #DCE3E7; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } /*======================= DASHBOARD RECENTLY ADDED MEDIA SECTION =======================*/ .collection-stream > .lp-container { width: 1180px; margin: 20px 0; border: 1px solid #DCE3E7; border-radius: 0; } .collection-stream > .lp-container span.label { top: 20px; left: 20px; background: #1781E3; border-radius: 0; } .collection-stream > .lp-container #last-media-slider .carousel-inner .item a.img-responsive { width: auto; min-height: 100px; border-radius: 0; background-size: auto; } .collection-stream > .lp-container .carousel-controls i.fa.fa-angle-right { margin-left: -45px; } .collection-stream > .lp-container .carousel-controls i.fa.fa-angle-left { margin-left: -5px; } .collection-stream > .lp-container .carousel-controls i.fa.fa-angle-right:before { width: 50px; left: 0; } .collection-stream > .lp-container .carousel-controls i.fa.fa-angle-left:before { width: 50px; right: 0; } .carousel-controls .carousel-control.left, .carousel-controls .carousel-control.right { display: block; opacity: 1; } .carousel-controls .fa { position: absolute; margin-top: 0; margin-left: -18px; height: 35px; width: 35px; line-height: 35px; transform: translateY(-50%); font-size: 30px; background-color: rgba(0, 0, 0, 0.1); transition: all 200ms ease; border-radius: 0; color: #fff; } .carousel-controls .fa:hover { color: #1781E3; background-color: #fff; } .carousel-controls .fa-angle-left:before { position: absolute; right: 12px; content: "\f104"; font-family: "FontAwesome"; } .carousel-controls .fa-angle-right:before { position: absolute; left: 12px; content: "\f105"; font-family: "FontAwesome"; } /*======================= DASHBOARD-SIDE SECTION =======================*/ .dashboard-side { position: relative; float: right; width: 1180px; margin: 20px 0 0 20px; padding: 40px 0 0 0; top: 0; background: #F8FAFB; } .dashboard-side:before, .dashboard-side:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: #F8FAFB; } .dashboard-side:after { left: auto; right: -100%; } .dashboard-side > div { position: relative; float: left; width: calc(25% - 30px); margin: 0 40px 40px 0 !important; padding: 0; background: transparent; color: #666; border: 0; border-radius: 0; box-shadow: none; } .dashboard-side > div:nth-of-type(4n) { margin-right: 0 !important; } .dashboard-side > div.hide { display: none; } .dashboard-side > div > h3, .transfer-settings .bynder-transfer-browse-button { margin: 0 0 20px 0; color: #333; font-family: "TheSansBasic", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; } .dashboard-side ul, .dashboard-side ul li a { padding: 0; border: 0; } .dashboard-side a .collection-thumb-holder { background: none; } /* Quicklinks section */ .dashboard-side .quicklinks ul, .dashboard-side .quicklinks ul li a { border: none; } .dashboard-side .quicklinks ul li { position: relative; min-height: 25px; line-height: 25px; } .dashboard-side .quicklinks ul li a { position: relative; width: auto; height: 25px; margin: 0 0 5px 0; padding: 0 20px 0 0; color: #666; font-size: 14px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .dashboard-side .quicklinks ul li a:after { content: "\f105"; position: absolute; height: 25px; line-height: 25px; top: 0; right: 5px; font-family: "FontAwesome"; font-size: 20px; color: #666; letter-spacing: 0; transition: all 200ms ease; } .dashboard-side .quicklinks ul li a:hover:after { color: #1781E3; transform: translateX(2px); } /* Latest news */ .dashboard-side .news .news-list { border: none; } .dashboard-side .news .news-list .news-item a { max-width: 240px; height: 30px; position: relative; margin: 0 0 10px 0; padding: 0 0 20px 50px; color: #666; font-weight: 400; font-size: 12px; line-height: 12px; border: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); transition: all 200ms ease; } .dashboard-side .news .news-list .news-item a:hover { color: #1781E3; box-shadow: inset 0 -1px 0 0 rgba(23, 129, 227, 0.3); } .dashboard-side .news .news-list .news-item a:hover span { color: #1781E3; transition: all 200ms ease; } .dashboard-side .news .news-list .news-item a .collection-thumb-holder { position: absolute; left: 0; padding: 0; background-color: #DCE3E7; border: 1px solid #DCE3E7; border-radius: 1px; box-shadow: none; } .dashboard-side .news .news-list .news-item a span { position: static; margin: 5px 0 0 0; color: #666; font-size: 10px; line-height: 10px; transition: all 200ms ease; } .dashboard-side .news .news-list .news-item a span:hover { color: #1781E3; } .dashboard-side .news .news-list .more-news a { color: #1781E3; font-size: 14px; border: none; box-shadow: none; } /* Recently added media */ .dashboard-side #last-media-slider.carousel { margin-bottom: 0px; } .dashboard-side #last-media-slider .carousel-inner { border: 0; box-shadow: none; } .dashboard-side #last-media-slider .carousel-inner, .dashboard-side #last-media-slider .carousel-inner .item a.img-responsive { border: 0; border-radius: 0; box-shadow: none; } .dashboard-side #last-media-slider .carousel-inner img { background-size: contain; } .dashboard-side #last-media-slider .carousel-control.left, .dashboard-side #last-media-slider .carousel-control.right { display: block; opacity: 1; } .dashboard-side #last-media-slider .carousel-control > .fa { position: absolute; margin-top: 0; margin-left: -18px; height: 35px; width: 35px; line-height: 35px; transform: translateY(-50%); font-size: 30px; background-color: rgba(0, 0, 0, 0.1); transition: all 200ms ease; border-radius: 0; color: #fff; } .dashboard-side #last-media-slider .carousel-control > .fa:hover { color: #1781E3; background-color: #fff; } .dashboard-side #last-media-slider .carousel-control .fa-angle-left:before { position: absolute; right: 12px; content: "\f104"; font-family: "FontAwesome"; } .dashboard-side #last-media-slider .carousel-control .fa-angle-right:before { position: absolute; left: 12px; content: "\f105"; font-family: "FontAwesome"; } .dashboard-side #last-media-slider.carousel { opacity: 1; } /* Sharebox section */ .transfer-splashscreen .bynder-transfer-browse-button { margin: 0; padding: 0; color: #333; font-weight: 600; font-size: 22px; line-height: 243px; border: 2px dashed #DCE3E7; text-align: center; border-radius: 0; box-sizing: border-box; transition: all 200ms ease; } .transfer-splashscreen .bynder-transfer-browse-button:hover, .transfer-splashscreen.transfer-dragover:before { background: transparent; color: #1781E3; border-color: #1781E3; } #sharewidget .transfer-splashscreen:not(.transfer-ready) .fa-spin { display: none; } #sharewidget .transfer { background: transparent; border: none; border-radius: 0; box-shadow: none; } #sharewidget .transfer.transfer-settings { padding-top: 40px; } .transfer-header, .share-group { border: none; } .transfer-settings .transfer-header { position: static; width: auto; height: auto; line-height: normal; margin: 0 0 20px 0; } .transfer-settings .transfer-header .bynder-transfer-browse-button { position: absolute !important; height: auto; top: 0; padding: 0; } .transfer-settings .transfer-header .bynder-transfer-browse-button:hover { cursor: pointer; } /* Add more files button */ .transfer-settings .transfer-header button { position: static; width: 100%; height: auto; line-height: normal; padding: 11px 0; color: #666; background-color: transparent; border: 1px dashed #DCE3E7; border-radius: 0; } .transfer-settings .transfer-header button:hover, .transfer-settings .transfer-header button:active { color: #1781E3 !important; background-color: transparent !important; border-color: #1781E3; } .transfer-settings .transfer-header:hover button { color: #1781E3 !important; background-color: transparent !important; border-color: #1781E3; } /* Sharebox moxie-shim, must always overlap the add more files button */ #sharewidget .transfer-settings .moxie-shim { width: 100% !important; height: 40px !important; top: 40px !important; left: 0 !important; } /* Sharebox text */ .transfer-body a, .transfer-body .form-group, .transfer-body > .panel-group span, .transfer-body .list-group-item .radio label { font-size: 12px; color: #666; } .transfer-body a strong, .transfer-body .form-group strong, .transfer-body > .panel-group span strong, .transfer-body .list-group-item .radio label strong { font-weight: 700; } .transfer-body .form-group, .transfer-body .share-group { margin: 0; padding: 0; } .transfer-body .share-group { margin-bottom: 10px; } /* Sharebox email / link buttons */ .transfer-body .share-group:first-of-type { width: 100%; font-size: 0; } .transfer-body .share-group:first-of-type .btn-group { width: 100%; } .transfer-body .share-group:first-of-type .btn-group .btn-primary { width: calc(50% - 2px); height: 36px; line-height: 36px; padding: 0; font-size: 14px; font-weight: 400; text-align: center; color: rgba(0, 34, 51, 0.65); background-color: #fcfcfc; border: 1px solid rgba(0, 34, 51, 0.15); border-radius: 5px; box-shadow: none; box-sizing: border-box; color: #666; background-color: #CFD5D9; border: 0; border-radius: 5px; box-shadow: none; box-sizing: border-box; } .transfer-body .share-group:first-of-type .btn-group .btn-primary:hover { color: #fff; background-color: #c1c9ce; } .transfer-body .share-group:first-of-type .btn-group .btn-primary:active, .transfer-body .share-group:first-of-type .btn-group .btn-primary:focus { color: #fff; background-color: #b3bcc2; } .transfer-body .share-group:first-of-type .btn-group .btn-primary:first-of-type { margin-right: 4px; } .transfer-body .share-group:first-of-type .btn-group .btn-primary.active { color: #fff; background-color: #1781E3; border-radius: 5px; border: 0; font-family: "TheSansBasic", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 14px; text-transform: none; box-shadow: none; box-sizing: border-box; outline: none; text-shadow: none; transition: all 200ms ease; } .transfer-body .share-group:first-of-type .btn-group .btn-primary.active:hover { color: #fff; background-color: #1574cc; border: 0; border-radius: 5px; box-shadow: none; cursor: pointer; } .transfer-body .share-group:first-of-type .btn-group .btn-primary.active:focus, .transfer-body .share-group:first-of-type .btn-group .btn-primary.active:active { color: #fff; background-color: #1267b5; border: 0; border-radius: 5px; box-shadow: none; } .transfer-body .panel-group .panel.panel-default > .panel-heading { padding: 10px 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .transfer-body > .panel-group { margin-bottom: 20px; } .transfer-body .panel-group .panel .list-group .list-group-item { height: 20px; } .transfer-body .panel-group .panel .list-group .list-group-item span.filename { line-height: 20px; } .transfer-body .panel-group .panel .list-group .list-group-item .file-delete { line-height: 20px; } #shareExpire, #shareFilesAdded { margin: 10px 0 0 0; padding: 0; } .transfer-body .list-group-item .radio label { height: 20px; line-height: 18px; } /* Send button */ .transfer-footer .btn-default, .transfer-footer .btn-default:disabled, .transfer-footer button#transfer-send { width: auto; height: 40px; line-height: 40px; margin: 0 auto; padding: 0 10px; background: #1781E3; border-radius: 5px; color: #fff; text-align: center; } .transfer-footer .btn-default:hover, .transfer-footer .btn-default:disabled:hover, .transfer-footer button#transfer-send:hover { height: 40px; line-height: 40px; background: #1574cc; color: #fff; border-radius: 5px; } .transfer-footer .btn-default:focus, .transfer-footer .btn-default:active, .transfer-footer .btn-default:disabled:focus, .transfer-footer .btn-default:disabled:active, .transfer-footer button#transfer-send:focus, .transfer-footer button#transfer-send:active { height: 40px; line-height: 40px; background: #1267b5; color: #1267b5; border-radius: 5px; } .transfer-footer .btn-default[disabled], .transfer-footer .btn-default:disabled[disabled], .transfer-footer button#transfer-send[disabled] { height: 40px; line-height: 40px; border-radius: 5px; } .transfer-footer .btn-default[disabled]:hover, .transfer-footer .btn-default:disabled[disabled]:hover, .transfer-footer button#transfer-send[disabled]:hover { height: 40px; line-height: 40px; border-radius: 5px; } .transfer-footer .btn-default .fa, .transfer-footer .btn-default:disabled .fa, .transfer-footer button#transfer-send .fa { margin: 0 0 0 4px; line-height: 40px; } .transfer-footer .btn-default .fa-spin, .transfer-footer .btn-default:disabled .fa-spin, .transfer-footer button#transfer-send .fa-spin { margin: 0; } #bynder-transfer-recipient li.list-group-item { color: #666; } #sharewidget .transfer-body .panel-group .panel-collapse, #sharewidget .transfer-body .panel-group .panel-title > a .fa-chevron-up { transition: all 200ms ease; } #transfer-send:focus, #transfer-send:active, #transfer-again:focus, #transfer-again:active, #transfer-cancel:focus, #transfer-cancel:active { box-shadow: none; } .transfer-percentage { color: #1781E3; border-color: #1781E3; } .transfer-footer button#transfer-send { width: 100%; height: 40px; line-height: 40px; padding: 0 20px; } .transfer-footer button#transfer-send.sending .transfer-loader { display: block; } .transfer-footer button#transfer-send.sending .fa.fa-chevron-right { display: none; } .transfer-footer button#transfer-send .transfer-loader { text-align: center; position: relative; margin: 0; } .transfer-footer button#transfer-send .fa { display: none; } .transfer-footer button#transfer-send .fa.fa-chevron-right { margin: 0 0 0 4px; font-size: 10px; } .transfer-footer button#transfer-send .fa.fa-chevron-right:before { content: "\f1d8"; } /* Dashboard dropbox */ .dashboard-side .dashboard-dropbox .upload { border: 2px dashed #DCE3E7; border-radius: 0; box-sizing: border-box; transition: all 200ms ease; } .dashboard-side .dashboard-dropbox .upload:hover { border-color: #1781E3; } .dashboard-side .dashboard-dropbox.none .upload { border: 0; } .dashboard-side .dashboard-dropbox .dropLink { color: #333; } .dashboard-side #dashboard-drop-area .files { margin-top: 10px; padding: 0 20px; } .dashboard-side #dashboard-dropbox-form input[type=text], .dashboard-side #dashboard-dropbox-form input[type=email], .dashboard-side #dashboard-dropbox-form textarea { width: 100%; height: 40px; padding: 0 0 0 30px; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-sizing: border-box; } .dashboard-side #dashboard-dropbox-form input[type=text]:focus, .dashboard-side #dashboard-dropbox-form input[type=email]:focus, .dashboard-side #dashboard-dropbox-form textarea:focus { border: 1px solid rgba(0, 0, 0, 0.3) !important; } .dashboard-side #dashboard-dropbox-form textarea { height: 52px !important; min-height: 52px; padding-top: 10px; } .dashboard-side #dashboard-drop-area .dropbox-input-holder .fa { margin-left: 10px; } .dashboard-side #dashboard-drop-area .dropbox-input-holder .fa.icon-clear { right: 10px; } .dashboard-dropbox .send-form .help-inline { right: 250px; } .dashboard-side #dashboard-drop-area .action-btn.big { width: 240px; } .dashboard-side #dashboard-drop-area .confirm .fa { color: #5cb85c; } .dashboard-side #dashboard-drop-area .confirm h2 { color: #666; margin-bottom: 10px; } .dashboard-dropbox .files ul li .loading p { width: 100%; color: #666; } .dashboard-dropbox .files ul li .loading p { color: #fff; } .dashboard-side .dashboard-dropbox .files ul li p { width: 100%; margin-right: 20px; color: #666; box-sizing: border-box; } .dashboard-dropbox .files ul li .loading { background: #1781E3; } /* Popular brands */ .dashboard-side .brands ul li { word-break: break-all; } /*======================= ASSETS PAGE / ASSETBANK PAGE / MEDIA PAGE =======================*/ header .tool-bar { height: auto; max-height: 60px; line-height: 60px; padding: 0 20px; background-color: #fff; font-size: 14px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } header .tool-bar .filters-holder { height: auto; max-height: 60px; line-height: 60px; margin: 0 0 0 -5px; padding: 0; } header .tool-bar .filters-holder ul.filters { height: auto; max-height: 60px !important; margin: 0 0 0 5px; padding: 0; font-size: 14px; } header .tool-bar > .filters-holder > ul.filters > li.filter > a { height: 60px; line-height: 60px; margin: 0 -5px 0 1px; padding: 0 15px; color: #001155; font-weight: 400; font-size: 14px; transition: all 200ms ease; } header .tool-bar > .filters-holder > ul.filters > li.filter > a .fa { margin-right: 5px; } header .tool-bar > .filters-holder > ul.filters > li.filter > a .fa-refresh { display: none; margin: 10px 0 0 10px; } header .tool-bar > .filters-holder > ul.filters > li.filter > a:before { content: ""; position: absolute; display: inline-block; width: 1px; top: 12px; bottom: 12px; right: 0; background-color: #DCE3E7; } header .tool-bar > .filters-holder > ul.filters > li.filter:not(.disabled):first-of-type a.filter-button:after { content: ""; position: absolute; display: inline-block; width: 1px; top: 12px; bottom: 12px; right: 0; background-color: #e9eaec; } header .tool-bar > .filters-holder > ul.filters > li.filter.active > a { height: 60px; background: transparent; } .filters > li.active > a:after { display: none; } header .tool-bar > .filters-holder > ul.filters > li.filter.active > a { color: #333; box-shadow: none; } header .tool-bar > .filters-holder > ul.filters > li.filter > a .fa.fa-caret-down { margin: 0 0 0 5px; transition: transform ease 200ms; } header .tool-bar > .filters-holder > ul.filters > li.filter > a .fa.fa-caret-down:before { content: "\f0d7"; font-family: "FontAwesome"; font-size: 16px; vertical-align: -2px; } header .tool-bar > .filters-holder > ul.filters > li.filter > a.disabled { color: rgba(233, 234, 236, 0.3); } header .tool-bar > .filters-holder > ul.filters > li.filter > a.disabled:hover { color: rgba(204, 0, 0, 0.5) !important; } header .tool-bar > .filters-holder > ul.filters > li.filter > a.disabled:focus { color: rgba(204, 0, 0, 0.5) !important; } .filters li.disabled a, .filters li.disabled, .filters li a.disabled { display: none; color: rgba(170, 170, 170, 0.5); } .filter-button.loading .fa.fa-caret-down { display: inline-block; } .filter-level > ul > li:hover { background: #eee; } .filter-level > ul > li:hover .fa { color: #1781E3; } #filter-save-form input[type=radio], #filter-save-form input[type=checkbox] { margin-top: 3px; } /* Filters */ .filter-level-container, .filter-level-container.advanced { top: 60px; border: 0; border-radius: 0 0 0 0; box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; } .filter-level-container.floatright { overflow-x: auto; } .filter-level { box-shadow: none; border-radius: 0; } .filter-level.sublevel { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .filter-level > ul, .advanced .filter-level ul { padding: 0; } .filter-level.disabled, .filter-meta .filter-level.grid-filter li.disabled, .filter-meta .filter-level.grid-filter li.disabled a { display: none; } .filters > li.filter > a { padding: 5px 10px; } .advanced .filter-level { min-height: 420px; margin-bottom: 10px; } .filter-level li label { min-height: 20px; line-height: 20px; } .filter-level p, .filter-level h2 { margin: 0 10px; } .filter-level ul.stand span.searchCount { margin: 15px 0 0 0; } .filter-level li input[type=text].input-append, .filter-level li input[type=number].input-prepend, .filter-level li input[type=text].input-prepend, .filter-level li input[type=number].input-prepend { height: 32px; } .filter-level li.drop-right a span { right: 20px; } .filter-level li label span.searchCount { width: auto; height: 20px; line-height: 18px; right: 10px; margin-top: -10px; color: #666; box-sizing: border-box; border-radius: 50px; } .filter-level li a.tip-trigger label span.searchCount { right: 20px; } .filters > li a.selected span.searchSelected, .filters > li a.selected span.searchCount, .filter-level li.selected span.searchCount { color: #fff; background-color: #1781E3; } .filters .tag > span.searchCount { margin-left: 5px; color: #666; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50px; box-sizing: border-box; } .filters > li a.selected span.searchSelected:before, .filters > li a.selected span.searchCount:before { margin-top: 0; color: #fff; line-height: 18px; } .filters > li a.tag.selected span.searchCount:before { color: #fff; } .filter-level-container.advanced li.radio, .filter-level-container.advanced li.checkbox, .smart-filter-container li.radio, .smart-filter-container li.checkbox { padding: 5px 10px; } /* Advanced filter */ .filter-level-container.advanced li > span { height: 18px; line-height: 18px; } .filter.advanced .filter-level li label { overflow: visible; line-height: 20px; } .filter.advanced .filter-level ul#orientationFilter li label { overflow: hidden; font-size: 12px; } .advanced .filter-level span.input-label, .filter-level li .action-btn.btn-appen, .filter-level #dpiFilter button.action-btn { height: 32px; box-sizing: border-box; border-radius: 0 5px 5px 0; } .filter-level #dpiFilter button.action-btn, .filter-level #dpiFilter button.action-btn:hover, .filter-level #dpiFilter button.action-btn:active, .filter-level #dpiFilter button.action-btn:focus { border-radius: 0 5px 5px 0; } .filter-navigation { margin: 0 10px; padding: 0; border: 0; } header .tool-bar > .filters-holder > ul.filters > li.filter .filter-level-container#colorFilter .filter-level .form-item input { width: 266px; } .filter-level-container.advanced li.checkbox:hover { background: #eee; } .filter-level-container.advanced li.radio:hover, .filter-level-container.advanced li.checkbox:hover, .filter-level-container.advanced li.radio:hover .fa, .filter-level-container.advanced li.checkbox:hover .fa { color: #1781E3 !important; } .filter-level li.drop-right a:after, .filter-level li.sg-sub > a:after { right: 10px; } .filters-holder .scroll-down .fa-chevron-down { display: none; } /* Grid filter / tiles filter */ .smart-filter-container .grid-filter li { padding: 5px 7px; } .smart-filter-container .grid-filter li:hover { background: transparent; } .smart-filter-container .grid-filter li a label { height: auto; min-height: 30px; max-height: 50px; line-height: 16px; margin-top: 2px; text-overflow: clip; white-space: normal; word-break: break-word; } .smart-filter-container .grid-filter li a.selected { color: #1781E3; } .smart-filter-container .grid-filter li a.selected .grid-item:after { border: 3px solid #1781E3; } .smart-filter-container .grid-filter li .searchCount { top: 8px; } /* Action-bar / selection options */ header .tool-bar ul.actions-bar { line-height: 60px; height: 60px; margin: 0; overflow: visible; } header .tool-bar ul.actions-bar li.select { line-height: 60px; } header .tool-bar ul.actions-bar li.select a.group-btn.select-all, header .tool-bar ul.actions-bar li.select a.group-btn.select-dropdown { width: 30px; height: 30px; line-height: 30px; background-color: transparent !important; border: 1px solid #DCE3E7; border-radius: 0; box-sizing: border-box; } header .tool-bar ul#select-actions li.select a.group-btn.select-all { margin: 0; border-right: none; border-radius: 0 0 0 0; background: transparent !important; transition: all 200ms ease; } header .tool-bar ul#select-actions li.select a.group-btn.select-all:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 11px; height: 11px; margin: auto; border: 1px solid #666; border-radius: 2px; } header .tool-bar ul#select-actions li.select a.group-btn.select-all:hover:before { border-color: #1781E3; } header .tool-bar ul#select-actions li.select a.group-btn.select-all:hover:after { color: #1781E3; } header .tool-bar ul.actions-bar li.select a.group-btn.select-dropdown { border-radius: 0 0 0 0; } header .tool-bar ul.actions-bar.active li.select a.group-btn.select-all:after, header .tool-bar ul.actions-bar.part li.select a.group-btn.select-all:after { content: "\f00c"; position: absolute; left: 10px; font-family: "FontAwesome"; font-size: 10px; color: #666; } header .tool-bar ul.actions-bar.part li.select a.group-btn.select-all:before, header .tool-bar ul.actions-bar.active li.select a.group-btn.select-all:before { border-color: #1781E3; } header .tool-bar ul#select-actions.active li.select a.group-btn.select-all:hover:before { color: #1781E3; } header .tool-bar ul.actions-bar li.select a.group-btn.select-all .fa-refresh { font-size: 10px; vertical-align: baseline; } header .tool-bar ul.actions-bar li.select a.group-btn.select-dropdown .fa-caret-down { height: 30px; line-height: 30px; font-size: 16px; color: #666; transition: transform ease 0.3s; } header .tool-bar ul.actions-bar li.select a.group-btn.select-dropdown:hover .fa-caret-down { transform: translateY(1px); } header .tool-bar ul.actions-bar li.select:hover ul.auto-complete { top: 47px; background: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } header .tool-bar ul.actions-bar li.select a.group-btn, ul.group-btns.blue li a.group-btn, ul.group-btns li.active a.group-btn { width: auto; height: 30px; line-height: 30px; color: #666; background-color: transparent; border-radius: 0; box-shadow: none; transition: none; } header .tool-bar ul.actions-bar li.select a.group-btn:hover, ul.group-btns.blue li a.group-btn:hover, ul.group-btns li.active a.group-btn:hover { color: #1781E3; background-color: transparent; } header .tool-bar ul.actions-bar li.select a.group-btn:hover .fa, header .tool-bar ul.actions-bar li.select a.group-btn:hover .fa-caret-down, ul.group-btns.blue li a.group-btn:hover .fa, ul.group-btns.blue li a.group-btn:hover .fa-caret-down, ul.group-btns li.active a.group-btn:hover .fa, ul.group-btns li.active a.group-btn:hover .fa-caret-down { color: #1781E3; } header .tool-bar ul.actions-bar li.select a.group-btn:hover .fa-print, ul.group-btns.blue li a.group-btn:hover .fa-print, ul.group-btns li.active a.group-btn:hover .fa-print { color: #fff; } header .tool-bar ul.actions-bar li.select a.group-btn:focus, ul.group-btns.blue li a.group-btn:focus, ul.group-btns li.active a.group-btn:focus { color: #1781E3; background-color: transparent; } .smart-filter-container .autocomplete-loader { top: 45px; } /* Filterbar */ .filterbar { transition: top 0.6s; } .filterbar.show, .content-container.metaproperty-view.single-collection#pim-view .filterbar.show { height: auto; min-height: 40px; top: 190px; margin: 0; padding: 4px 20px 0 20px; background-color: #f5f7f9; border: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); box-sizing: border-box; font-size: 0; overflow-y: auto; opacity: 1; } .filterbar.show.small, .content-container.metaproperty-view.single-collection#pim-view .filterbar.show.small { top: 140px; } .compact .filterbar.show { top: 60px; } header .tool-bar > .filters-holder > ul.filters > li.filter:not(.disabled):last-of-type a.tag:after { display: none; } #image_enlarger ul.media-info li .media-info-extend ul li a.thumbnail, #image_upload ul.media-info li .media-info-extend ul li a.thumbnail { background: transparent; color: #666; } #image_enlarger ul.media-info li .media-info-extend ul li a.thumbnail:hover, #image_upload ul.media-info li .media-info-extend ul li a.thumbnail:hover { background: transparent; color: #1781E3; } #image_enlarger ul.media-info li.linked-asset-item { color: #666; transition: all 200ms ease; } #image_enlarger ul.media-info li.linked-asset-item span.pull-right i.fa.fa-trash-o { transition: all 200ms ease; } #image_enlarger ul.media-info li.linked-asset-item:hover span.pull-right i.fa.fa-trash-o { color: #c00; } /* Color picker */ .filter-dropdown.color .action-btn { height: 30px; line-height: 30px; padding: 0; margin-bottom: 0; } /* Tags */ .filterbar a.tag, .listview-duplicates .media-holder .tags .tag { height: 30px; line-height: 28px; margin: 0 4px 4px 0; padding: 0 28px 0 10px; color: #fff; background: #1781E3; font-weight: 400; font-size: 12px; border: 1px solid #DCE3E7; border-radius: 3px; box-shadow: none; box-sizing: border-box; transition: all 200ms ease; } .filterbar a.tag:hover, .listview-duplicates .media-holder .tags .tag:hover { color: #fff !important; } .filterbar a.tag:hover .fa, .listview-duplicates .media-holder .tags .tag:hover .fa { color: #fff !important; } .filterbar a.tag span .fa { right: 10px; line-height: 28px; vertical-align: middle; font-size: 14px; opacity: 1; } .filterbar a.tag span .fa:hover { color: #1781E3; } .filterbar a.tag span.selected-color { width: 15px; height: 15px; line-height: 17px; } .filterbar a.tag:hover span .fa { opacity: 1; } .filterbar a.tag > .fa { margin-right: 2px; vertical-align: middle; font-size: 14px; } .filters > li.filter .tags a.tag { background: #fff; color: #666; } .filters > li.filter .tags a.tag:hover { background: #fff; border: 1px solid #1781E3; } .filters > li.filter .tags a.tag.selected { background-color: #fff; border: 1px solid #DCE3E7; } /* Clear / Save filter */ .filterbar a.action-btn#clearFilter, .filterbar #saveFilters.action-btn.green { height: 30px; line-height: 30px; margin: 0 4px 4px 0; padding: 0 10px; top: 0; font-size: 12px; font-weight: 700; color: #fff; border: 1px solid transparent; border-radius: 3px !important; background: #1781E3; box-sizing: border-box; vertical-align: top; } .filterbar a.action-btn#clearFilter { color: #666 !important; background: #fff !important; border: 1px solid #666666 !important; border-radius: 3px !important; } .filterbar a.action-btn#clearFilter:hover, .filterbar a.action-btn#clearFilter:focus { color: #fff !important; background: #1781E3 !important; border: 1px solid #1781E3 !important; border-radius: 3px !important; } .filterbar #clearFilter .fa-times-circle { margin-right: 2px; opacity: 1; } .filterbar #saveFilters .fa { margin-right: 4px; } /* Saved filters */ #save-filter-dropdown-holder { margin: 0 10px 0 0; padding: 0; } #save-filter-dropdown-holder .fa-caret-down { vertical-align: middle; margin-left: 6px; } #save-filter-dropdown > a:hover, #save-filter-dropdown .filter-level li label .searchEdit .fa:hover { color: #1781E3 !important; } #save-filter-dropdown-holder, #save-filter-dropdown-holder > div, #save-filter-dropdown-holder > div > .filters, #save-filter-dropdown, #save-filter-dropdown > a { height: 59px; max-height: 59px !important; line-height: 60px; } .filters #save-filter-dropdown > a { margin: 0; padding: 0 10px; color: #666; } .filters #save-filter-dropdown.active > a { box-shadow: none; } #save-filter-dropdown #personal-filters { padding-bottom: 10px; } #save-filter-dropdown .filter-level li label .searchEdit { margin-top: -10px; box-sizing: border-box; } #save-filter-dropdown .filter-level li label .searchEdit .fa { vertical-align: baseline; } /* Assetbank content area */ body[data-module=media] #media-container.content-container.media.ui-selectable { padding-top: 230px; font-size: 0; } body[data-module=media] .filterbar.show ~ #media-container.content-container.media.ui-selectable { padding-top: 270px; } body.hasSidebar #media-container.content-container.ui-selectable.media { padding-left: 300px; } #media-container .has-tagfilter.content-container .media-tools, #media-container .media-tools { margin: 0 20px 20px 0; } .media-tools ul.media-tools-left { box-sizing: border-box; } .media-tools ul.media-tools-left > li { height: auto; border-radius: 0; box-shadow: none; box-sizing: border-box; } .media-tools ul.media-tools-left > li:last-of-type { border-radius: 0 0 0 0; } .media-tools ul.media-tools-left > li.sort-order { border-radius: 0 0 0 0; } .media-tools ul.media-tools-left > li:only-of-type { border-radius: 0; } #media-container .media-tools ul.media-tools-left > li:not(.sort-order):not(.selected), #media-container .media-tools ul.media-tools-left > li:not(.sort-order):not(.selected) > a, #collection-media .media-tools ul.media-tools-left > li:not(.sort-order):not(.selected), #collection-media .media-tools ul.media-tools-left > li:not(.sort-order):not(.selected) > a { border-radius: 5px 0 0 5px; } #media-container .media-tools ul.media-tools-left > li.sort-order, #media-container .media-tools ul.media-tools-left > li.sort-order > a { border-radius: 0 5px 5px 0; } .media-tools ul.media-tools-left > li ul.auto-complete li a { font-size: 14px; } .media-tools ul.media-tools-left > li.media-results { margin-right: 20px; } .media-tools ul.media-tools-left li.media-results span.selected-results { width: auto; min-width: 30px; height: 30px; line-height: 30px; top: 0; padding: 0 10px; font-weight: 700; font-size: 14px; color: #fff; text-align: center; letter-spacing: 0; background-color: #1781E3; border: 1px solid transparent; border-radius: 5px 0 0 5px; box-shadow: none; box-sizing: border-box; } .media-tools ul.media-tools-left li.media-results span.results { height: 30px; line-height: 30px; margin: 0; color: #666; background-color: #fff; font-weight: 400; font-size: 14px; border: 1px solid #DCE3E7; border-radius: 0 5px 5px 0; box-shadow: none; box-sizing: border-box; } .media-tools ul.media-tools-left li.media-results span.results strong { font-weight: 700; } body[data-view-type=contactsheet] .media-tools ul.media-tools-left li.media-results span.results { border-radius: 0; } /* Order by */ .media-tools ul.media-tools-left li.media-sort a.sort { height: 30px; line-height: 30px; color: #666; font-weight: 400; font-size: 14px; background-color: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; box-sizing: border-box; } .media-tools ul.media-tools-left li.media-sort a.sort strong { font-weight: 700; } /* Sort order */ .media-tools ul.media-tools-left li.media-sort.sort-order a.sort { padding: 0 8px; box-shadow: none; border: 1px solid #DCE3E7; border-radius: 0 5px 5px 0; } /* Order by dropdown */ .media-tools ul.media-tools-left li.media-sort ul.auto-complete { padding: 0; background: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; z-index: 85; } .media-tools ul.media-tools-left li.media-sort ul.auto-complete li:hover { background-color: rgba(0, 0, 0, 0.03); } .media-tools ul.media-tools-left li.media-sort ul.auto-complete li.active a { background: #1781E3; border-radius: 0; } .media-tools ul.media-tools-left li.media-sort ul.auto-complete li.active a:hover { color: #fff !important; } /* View buttons */ .media-tools ul.group-btns li a.group-btn { width: 30px; height: 30px; line-height: 30px; padding: 0; background-color: #fff; color: #666; border: 1px solid #d5d8dc; border-radius: 0; box-shadow: none; box-sizing: border-box; } .media-tools ul.group-btns li a.group-btn:hover { color: #1781E3; background-color: #fff; } .media-tools ul.actions-bar.group-btns li:first-of-type a.group-btn { border-right: 0; border-radius: 0 0 0 0; } .media-tools ul.actions-bar.group-btns li:last-of-type a.group-btn { border-left: 0; border-radius: 0 0 0 0; } .media-tools ul.group-btns li.active a.group-btn { color: #fff; background-color: #1781E3; border-color: #1781E3 !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .media-tools ul.group-btns li.active a.group-btn:hover, .media-tools ul.group-btns li.active a.group-btn:active { color: #fff; background-color: #1574cc; border-color: #1574cc !important; } .media-tools ul.group-btns li.active a.group-btn:hover .fa { color: #fff; } /* All view buttons */ #media-container .media-tools ul.group-btns:nth-of-type(2) li a.group-btn, #collection-media .media-tools ul.group-btns:nth-of-type(2) li a.group-btn { border: 1px solid #DCE3E7; border-right: 0; } /* First view button */ #media-container .media-tools ul.group-btns:nth-of-type(2) li:first-of-type a.group-btn, #collection-media .media-tools ul.group-btns:nth-of-type(2) li:first-of-type a.group-btn { border-radius: 5px 0 0 5px; } /* Last view button */ #media-container .media-tools ul.group-btns:nth-of-type(2) li:last-of-type a.group-btn, #collection-media .media-tools ul.group-btns:nth-of-type(2) li:last-of-type a.group-btn { border-right: 1px solid #DCE3E7; border-radius: 0 5px 5px 0; } /* Duplicate finder view button */ #media-container .media-tools ul.group-btns li a.group-btn.duplicate-finder, #collection-media .media-tools ul.group-btns li a.group-btn.duplicate-finder { border: 1px solid #DCE3E7; border-radius: 5px; } /* Show / Select page view buttons */ .content-container.metaproperty-view.single-collection#pim-view .media-tools ul.group-btns li a.group-btn { border: 0; } .content-container.metaproperty-view.single-collection#pim-view .media-tools ul.group-btns li a.group-btn.select-all, .content-container.metaproperty-view.single-collection#pim-view .media-tools ul.group-btns li a.group-btn.select-dropdown { border: 1px solid #DCE3E7; } .content-container.metaproperty-view.single-collection#pim-view .media-tools ul.group-btns li a.group-btn.select-dropdown { border-left: 0; } /* View buttons tooltip */ .media-tools > .actions-bar:nth-last-child(2) li .tip:before { display: none; } .media-tools > .actions-bar:nth-last-child(2) li:nth-last-child(2) .tip { left: auto; right: 0; } .media-tools > .actions-bar:nth-last-child(2) li:nth-last-child(2) .tip:after { left: auto; right: 10px; } .media-tools > .actions-bar:nth-last-child(2) li:last-child .tip { left: auto; right: 0; } .media-tools > .actions-bar:nth-last-child(2) li:last-child .tip:after { left: auto; right: 8px; } /* Assetbank content */ #media-container.content-container.media { margin: 0; padding: 210px 0 0 20px; text-align: center; transition: all 200ms ease; } #media-container.content-container.media.has-tagfilter { padding: 250px 0 0 20px; text-align: center; transition: all 200ms ease; } body.hasSidebar #media-container.content-container.ui-selectable.media.has-tagfilter { padding-top: 250px; } #results-thumbs .media-holder { width: 220px; height: auto; margin: 0 20px 20px 0; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; vertical-align: top; transition: all 200ms ease; } #results-thumbs .media-holder .thumbnail, #image_upload .media-holder .thumbnail { width: 100%; height: auto; min-height: 190px; padding: 10px; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; box-sizing: border-box; transition: all 200ms ease; } #results-thumbs .media-holder .thumbnail .play-button-thumb .fa-play-circle-o, #image_upload .media-holder .thumbnail .play-button-thumb .fa-play-circle-o { color: #fff; font-size: 50px; } #results-thumbs .media-holder .thumbnail:hover, #image_upload .media-holder .thumbnail:hover { border: 1px solid transparent; box-shadow: inset 0 0 0 2px rgba(23, 129, 227, 0.95); cursor: pointer !important; } #results-thumbs .media-holder .thumbnail:hover .play-button-thumb .fa-play-circle-o, #image_upload .media-holder .thumbnail:hover .play-button-thumb .fa-play-circle-o { color: #1781E3; } #results-thumbs .media-holder.active .thumbnail { border: 1px solid transparent; box-shadow: inset 0 0 0 2px rgba(23, 129, 227, 0.95); } .media-holder .thumbnail { border-radius: 0; } .media-holder .thumbnail .image-holder, .media-holder.portrait .thumbnail .image-holder { width: 100%; height: 130px; background-color: #e9eaec; border: 1px solid #fafafa; border-radius: 0; box-sizing: border-box; } #results-thumbs .media-holder .thumbnail p { width: 100%; max-width: 100%; min-height: 20px; height: auto; max-height: 20px; line-height: 20px; margin: 10px 0 0 0; padding: 0; font-weight: 400; font-size: 14px; color: #333; transition: all 200ms ease; } #results-thumbs .media-holder .thumbnail p:hover, #results-thumbs .media-holder .portrait .thumbnail p:hover { max-height: 80px; color: #1781E3; word-break: break-all; white-space: normal; } #results-thumbs .media-holder .thumbnail .media-status .archive { float: right; } /* Asset file extensions */ .media-holder .thumbnail span.extension, .media-holder ul.listview-info span.extension, .media-holder.duplicate .thumbnail > span, .media-holder.original .thumbnail > span, .media-holder.duplicate .thumbnail:hover > span, .media-holder.original .thumbnail:hover > span { position: static; display: inline-block !important; width: auto; height: 22px; line-height: 22px; margin: 2px 0 0 0; padding: 0 8px; color: #fff; background: #1781E3; font-weight: 400; font-size: 12px; text-align: center; text-transform: none; border-radius: 3px; } .media-holder .thumbnail span.extension.jpg, .media-holder .thumbnail span.extension.JPG, .media-holder .thumbnail span.extension.jpeg, .media-holder .thumbnail span.extension.JPEG, .media-holder .thumbnail span.extension.png, .media-holder .thumbnail span.extension.PNG, .media-holder .thumbnail span.extension.tif, .media-holder .thumbnail span.extension.TIF, .media-holder ul.listview-info span.extension.jpg, .media-holder ul.listview-info span.extension.JPG, .media-holder ul.listview-info span.extension.jpeg, .media-holder ul.listview-info span.extension.JPEG, .media-holder ul.listview-info span.extension.png, .media-holder ul.listview-info span.extension.PNG, .media-holder ul.listview-info span.extension.tif, .media-holder ul.listview-info span.extension.TIF, .media-holder.duplicate .thumbnail > span.jpg, .media-holder.duplicate .thumbnail > span.JPG, .media-holder.duplicate .thumbnail > span.jpeg, .media-holder.duplicate .thumbnail > span.JPEG, .media-holder.duplicate .thumbnail > span.png, .media-holder.duplicate .thumbnail > span.PNG, .media-holder.duplicate .thumbnail > span.tif, .media-holder.duplicate .thumbnail > span.TIF, .media-holder.original .thumbnail > span.jpg, .media-holder.original .thumbnail > span.JPG, .media-holder.original .thumbnail > span.jpeg, .media-holder.original .thumbnail > span.JPEG, .media-holder.original .thumbnail > span.png, .media-holder.original .thumbnail > span.PNG, .media-holder.original .thumbnail > span.tif, .media-holder.original .thumbnail > span.TIF, .media-holder.duplicate .thumbnail:hover > span.jpg, .media-holder.duplicate .thumbnail:hover > span.JPG, .media-holder.duplicate .thumbnail:hover > span.jpeg, .media-holder.duplicate .thumbnail:hover > span.JPEG, .media-holder.duplicate .thumbnail:hover > span.png, .media-holder.duplicate .thumbnail:hover > span.PNG, .media-holder.duplicate .thumbnail:hover > span.tif, .media-holder.duplicate .thumbnail:hover > span.TIF, .media-holder.original .thumbnail:hover > span.jpg, .media-holder.original .thumbnail:hover > span.JPG, .media-holder.original .thumbnail:hover > span.jpeg, .media-holder.original .thumbnail:hover > span.JPEG, .media-holder.original .thumbnail:hover > span.png, .media-holder.original .thumbnail:hover > span.PNG, .media-holder.original .thumbnail:hover > span.tif, .media-holder.original .thumbnail:hover > span.TIF { background: #1781E3; } .media-holder .thumbnail span.extension.gif, .media-holder .thumbnail span.extension.GIF, .media-holder .thumbnail span.extension.raw, .media-holder .thumbnail span.extension.RAW, .media-holder .thumbnail span.extension.ico, .media-holder .thumbnail span.extension.ICO, .media-holder ul.listview-info span.extension.gif, .media-holder ul.listview-info span.extension.GIF, .media-holder ul.listview-info span.extension.raw, .media-holder ul.listview-info span.extension.RAW, .media-holder ul.listview-info span.extension.ico, .media-holder ul.listview-info span.extension.ICO, .media-holder.duplicate .thumbnail > span.gif, .media-holder.duplicate .thumbnail > span.GIF, .media-holder.duplicate .thumbnail > span.raw, .media-holder.duplicate .thumbnail > span.RAW, .media-holder.duplicate .thumbnail > span.ico, .media-holder.duplicate .thumbnail > span.ICO, .media-holder.original .thumbnail > span.gif, .media-holder.original .thumbnail > span.GIF, .media-holder.original .thumbnail > span.raw, .media-holder.original .thumbnail > span.RAW, .media-holder.original .thumbnail > span.ico, .media-holder.original .thumbnail > span.ICO, .media-holder.duplicate .thumbnail:hover > span.gif, .media-holder.duplicate .thumbnail:hover > span.GIF, .media-holder.duplicate .thumbnail:hover > span.raw, .media-holder.duplicate .thumbnail:hover > span.RAW, .media-holder.duplicate .thumbnail:hover > span.ico, .media-holder.duplicate .thumbnail:hover > span.ICO, .media-holder.original .thumbnail:hover > span.gif, .media-holder.original .thumbnail:hover > span.GIF, .media-holder.original .thumbnail:hover > span.raw, .media-holder.original .thumbnail:hover > span.RAW, .media-holder.original .thumbnail:hover > span.ico, .media-holder.original .thumbnail:hover > span.ICO { background: #3f64a3; } .media-holder .thumbnail span.extension.mp4, .media-holder .thumbnail span.extension.MP4, .media-holder .thumbnail span.extension.mov, .media-holder .thumbnail span.extension.MOV, .media-holder .thumbnail span.extension.wmv, .media-holder .thumbnail span.extension .WMV, .media-holder .thumbnail span.extension.qt, .media-holder .thumbnail span.extension.QT, .media-holder ul.listview-info span.extension.mp4, .media-holder ul.listview-info span.extension.MP4, .media-holder ul.listview-info span.extension.mov, .media-holder ul.listview-info span.extension.MOV, .media-holder ul.listview-info span.extension.wmv, .media-holder ul.listview-info span.extension .WMV, .media-holder ul.listview-info span.extension.qt, .media-holder ul.listview-info span.extension.QT, .media-holder.duplicate .thumbnail > span.mp4, .media-holder.duplicate .thumbnail > span.MP4, .media-holder.duplicate .thumbnail > span.mov, .media-holder.duplicate .thumbnail > span.MOV, .media-holder.duplicate .thumbnail > span.wmv, .media-holder.duplicate .thumbnail > span .WMV, .media-holder.duplicate .thumbnail > span.qt, .media-holder.duplicate .thumbnail > span.QT, .media-holder.original .thumbnail > span.mp4, .media-holder.original .thumbnail > span.MP4, .media-holder.original .thumbnail > span.mov, .media-holder.original .thumbnail > span.MOV, .media-holder.original .thumbnail > span.wmv, .media-holder.original .thumbnail > span .WMV, .media-holder.original .thumbnail > span.qt, .media-holder.original .thumbnail > span.QT, .media-holder.duplicate .thumbnail:hover > span.mp4, .media-holder.duplicate .thumbnail:hover > span.MP4, .media-holder.duplicate .thumbnail:hover > span.mov, .media-holder.duplicate .thumbnail:hover > span.MOV, .media-holder.duplicate .thumbnail:hover > span.wmv, .media-holder.duplicate .thumbnail:hover > span .WMV, .media-holder.duplicate .thumbnail:hover > span.qt, .media-holder.duplicate .thumbnail:hover > span.QT, .media-holder.original .thumbnail:hover > span.mp4, .media-holder.original .thumbnail:hover > span.MP4, .media-holder.original .thumbnail:hover > span.mov, .media-holder.original .thumbnail:hover > span.MOV, .media-holder.original .thumbnail:hover > span.wmv, .media-holder.original .thumbnail:hover > span .WMV, .media-holder.original .thumbnail:hover > span.qt, .media-holder.original .thumbnail:hover > span.QT { background: #a12a2a; } .media-holder .thumbnail span.extension.pdf, .media-holder .thumbnail span.extension.PDF, .media-holder .thumbnail span.extension.doc, .media-holder .thumbnail span.extension.DOC, .media-holder .thumbnail span.extension.docx, .media-holder .thumbnail span.extension.DOCX, .media-holder .thumbnail span.extension.ppt, .media-holder .thumbnail span.extension.PPT, .media-holder .thumbnail span.extension.pptx, .media-holder .thumbnail span.extension.PPTX, .media-holder .thumbnail span.extension.xlsx, .media-holder .thumbnail span.extension.XLSX, .media-holder ul.listview-info span.extension.pdf, .media-holder ul.listview-info span.extension.PDF, .media-holder ul.listview-info span.extension.doc, .media-holder ul.listview-info span.extension.DOC, .media-holder ul.listview-info span.extension.docx, .media-holder ul.listview-info span.extension.DOCX, .media-holder ul.listview-info span.extension.ppt, .media-holder ul.listview-info span.extension.PPT, .media-holder ul.listview-info span.extension.pptx, .media-holder ul.listview-info span.extension.PPTX, .media-holder ul.listview-info span.extension.xlsx, .media-holder ul.listview-info span.extension.XLSX, .media-holder.duplicate .thumbnail > span.pdf, .media-holder.duplicate .thumbnail > span.PDF, .media-holder.duplicate .thumbnail > span.doc, .media-holder.duplicate .thumbnail > span.DOC, .media-holder.duplicate .thumbnail > span.docx, .media-holder.duplicate .thumbnail > span.DOCX, .media-holder.duplicate .thumbnail > span.ppt, .media-holder.duplicate .thumbnail > span.PPT, .media-holder.duplicate .thumbnail > span.pptx, .media-holder.duplicate .thumbnail > span.PPTX, .media-holder.duplicate .thumbnail > span.xlsx, .media-holder.duplicate .thumbnail > span.XLSX, .media-holder.original .thumbnail > span.pdf, .media-holder.original .thumbnail > span.PDF, .media-holder.original .thumbnail > span.doc, .media-holder.original .thumbnail > span.DOC, .media-holder.original .thumbnail > span.docx, .media-holder.original .thumbnail > span.DOCX, .media-holder.original .thumbnail > span.ppt, .media-holder.original .thumbnail > span.PPT, .media-holder.original .thumbnail > span.pptx, .media-holder.original .thumbnail > span.PPTX, .media-holder.original .thumbnail > span.xlsx, .media-holder.original .thumbnail > span.XLSX, .media-holder.duplicate .thumbnail:hover > span.pdf, .media-holder.duplicate .thumbnail:hover > span.PDF, .media-holder.duplicate .thumbnail:hover > span.doc, .media-holder.duplicate .thumbnail:hover > span.DOC, .media-holder.duplicate .thumbnail:hover > span.docx, .media-holder.duplicate .thumbnail:hover > span.DOCX, .media-holder.duplicate .thumbnail:hover > span.ppt, .media-holder.duplicate .thumbnail:hover > span.PPT, .media-holder.duplicate .thumbnail:hover > span.pptx, .media-holder.duplicate .thumbnail:hover > span.PPTX, .media-holder.duplicate .thumbnail:hover > span.xlsx, .media-holder.duplicate .thumbnail:hover > span.XLSX, .media-holder.original .thumbnail:hover > span.pdf, .media-holder.original .thumbnail:hover > span.PDF, .media-holder.original .thumbnail:hover > span.doc, .media-holder.original .thumbnail:hover > span.DOC, .media-holder.original .thumbnail:hover > span.docx, .media-holder.original .thumbnail:hover > span.DOCX, .media-holder.original .thumbnail:hover > span.ppt, .media-holder.original .thumbnail:hover > span.PPT, .media-holder.original .thumbnail:hover > span.pptx, .media-holder.original .thumbnail:hover > span.PPTX, .media-holder.original .thumbnail:hover > span.xlsx, .media-holder.original .thumbnail:hover > span.XLSX { background: #3ebe9e; } .media-holder .thumbnail span.extension.mp3, .media-holder .thumbnail span.extension.MP3, .media-holder .thumbnail span.extension.wav, .media-holder .thumbnail span.extension.WAV, .media-holder ul.listview-info span.extension.mp3, .media-holder ul.listview-info span.extension.MP3, .media-holder ul.listview-info span.extension.wav, .media-holder ul.listview-info span.extension.WAV, .media-holder.duplicate .thumbnail > span.mp3, .media-holder.duplicate .thumbnail > span.MP3, .media-holder.duplicate .thumbnail > span.wav, .media-holder.duplicate .thumbnail > span.WAV, .media-holder.original .thumbnail > span.mp3, .media-holder.original .thumbnail > span.MP3, .media-holder.original .thumbnail > span.wav, .media-holder.original .thumbnail > span.WAV, .media-holder.duplicate .thumbnail:hover > span.mp3, .media-holder.duplicate .thumbnail:hover > span.MP3, .media-holder.duplicate .thumbnail:hover > span.wav, .media-holder.duplicate .thumbnail:hover > span.WAV, .media-holder.original .thumbnail:hover > span.mp3, .media-holder.original .thumbnail:hover > span.MP3, .media-holder.original .thumbnail:hover > span.wav, .media-holder.original .thumbnail:hover > span.WAV { background: #d38100; } .media-holder .thumbnail span.extension.zip, .media-holder .thumbnail span.extension.ZIP, .media-holder .thumbnail span.extension.psd, .media-holder .thumbnail span.extension.PSD, .media-holder .thumbnail span.extension.ai, .media-holder .thumbnail span.extension.AI, .media-holder .thumbnail span.extension.eps, .media-holder .thumbnail span.extension.EPS, .media-holder ul.listview-info span.extension.zip, .media-holder ul.listview-info span.extension.ZIP, .media-holder ul.listview-info span.extension.psd, .media-holder ul.listview-info span.extension.PSD, .media-holder ul.listview-info span.extension.ai, .media-holder ul.listview-info span.extension.AI, .media-holder ul.listview-info span.extension.eps, .media-holder ul.listview-info span.extension.EPS, .media-holder.duplicate .thumbnail > span.zip, .media-holder.duplicate .thumbnail > span.ZIP, .media-holder.duplicate .thumbnail > span.psd, .media-holder.duplicate .thumbnail > span.PSD, .media-holder.duplicate .thumbnail > span.ai, .media-holder.duplicate .thumbnail > span.AI, .media-holder.duplicate .thumbnail > span.eps, .media-holder.duplicate .thumbnail > span.EPS, .media-holder.original .thumbnail > span.zip, .media-holder.original .thumbnail > span.ZIP, .media-holder.original .thumbnail > span.psd, .media-holder.original .thumbnail > span.PSD, .media-holder.original .thumbnail > span.ai, .media-holder.original .thumbnail > span.AI, .media-holder.original .thumbnail > span.eps, .media-holder.original .thumbnail > span.EPS, .media-holder.duplicate .thumbnail:hover > span.zip, .media-holder.duplicate .thumbnail:hover > span.ZIP, .media-holder.duplicate .thumbnail:hover > span.psd, .media-holder.duplicate .thumbnail:hover > span.PSD, .media-holder.duplicate .thumbnail:hover > span.ai, .media-holder.duplicate .thumbnail:hover > span.AI, .media-holder.duplicate .thumbnail:hover > span.eps, .media-holder.duplicate .thumbnail:hover > span.EPS, .media-holder.original .thumbnail:hover > span.zip, .media-holder.original .thumbnail:hover > span.ZIP, .media-holder.original .thumbnail:hover > span.psd, .media-holder.original .thumbnail:hover > span.PSD, .media-holder.original .thumbnail:hover > span.ai, .media-holder.original .thumbnail:hover > span.AI, .media-holder.original .thumbnail:hover > span.eps, .media-holder.original .thumbnail:hover > span.EPS { background: #44444e; } .media-holder .thumbnail span.extension, .media-holder ul.listview-info span.extension { background-color: #1781E3; } /* Asset selector */ .media-holder .thumbnail .select, .media-holder.listview .thumbnail .select, .table_wrapper .overlay-detail .select, .table_wrapper.active .overlay-detail .select, .assets li .select { width: 40px; height: 40px; top: 10px; right: 10px; background: #1781E3; position: absolute; color: rgba(255, 255, 255, 0.75); border-radius: 3px; transition: all 200ms ease; display: block !important; opacity: 0; pointer-events: none; } .media-holder .thumbnail .select:hover, .media-holder.listview .thumbnail .select:hover, .table_wrapper .overlay-detail .select:hover, .table_wrapper.active .overlay-detail .select:hover, .assets li .select:hover { color: #fff !important; } .ui-selectable .media-holder .thumbnail:hover .select, .template-container ul.assets li:hover .select { opacity: 1; pointer-events: all; display: block !important; } .media-holder .thumbnail .select:after, .media-holder.listview .thumbnail .select:after, .table_wrapper .overlay-detail .select:after, .assets li .select:after { content: "\f00c"; position: absolute; font-size: 24px; font-family: FontAwesome; margin-top: 8px; margin-left: 10px; } body[data-module=media][data-view-type=single] .media-holder .thumbnail .select:after, body[data-module=media][data-view-type=single] .media-holder.listview .thumbnail .select:after, body[data-module=media][data-view-type=single] .table_wrapper .overlay-detail .select:after, body[data-module=media][data-view-type=single] .assets li .select:after { margin-left: -10px; } .media-holder.active .thumbnail .select, .media-holder.active .thumbnail:hover .select, .media-holder.listview.active .thumbnail .select, .table_wrapper.active .overlay-detail .select, .table_wrapper.active .overlay-detail .select:hover, .assets li.selected .select { color: #fff !important; width: 40px; height: 40px; background: #1781E3; opacity: 1; transition: all 200ms ease; } /* Asset metaproperties */ .media-holder dl { margin: 10px 0 0 0; padding: 5px 0 0 0; color: #666; font-size: 14px; border-top: 1px solid #e1e1e1; } .media-holder dl dt { margin-right: 2px; font-weight: 700; } .media-holder dl dd { word-break: break-all; font-weight: 400; } /* Single view */ #results-thumbs .media-holder.singleview { width: 50%; } #results-thumbs .media-holder.singleview .thumbnail { margin: 0; } #results-thumbs .media-holder.singleview .thumbnail p { max-width: 100% !important; } #results-thumbs .media-holder.singleview .thumbnail .media-status { position: relative; } /* List view */ #results-thumbs .listviewrow .media-holder.listview { width: 50%; min-width: 400px; padding: 0; margin: 0; } #results-thumbs .listviewrow .media-holder.listview .thumbnail .image-holder { width: 100%; height: 100%; } #results-thumbs .listviewrow .media-holder.listview ul.listview-info { margin-left: 230px; } #results-thumbs .listviewrow .media-holder.listview ul.listview-info li { padding-top: 0; } #results-thumbs .listviewrow .media-holder.listview a.tag { padding: 0 6px; } #results-thumbs .listviewrow .media-holder.listview a.thumbnail, #results-thumbs .listviewrow .media-holder.portrait.listview a.thumbnail { width: 200px; height: 150px; margin: 0; } ul.listview-info li strong { font-size: 14px; color: #44444e; font-weight: 400; } /* Duplicate finder view */ #results-thumbs .primary-duplicate .media-holder.listview { margin-top: 20px; } .primary-duplicate .media-holder.listview .thumbnail .image-holder { width: 100%; } .no-results .no-results-container { margin: 100px 20px 0 20px; padding: 20px; } .media-holder.duplicate .actions .duplicate-original-form { float: right; } body[data-module=media][data-view-type=duplicate] .media-holder .tags .tag { margin-right: 10px; } /* Maps view */ body[data-module=media] #media-container.content-container.media.ui-selectable.mapview { position: relative; width: 100%; max-width: 100%; margin: 0 auto; padding: 210px 20px 0 20px; } body[data-module=media] #media-container.content-container.media.ui-selectable.mapview .media-tools { margin: 0 0 20px 0; } body[data-module=media] #media-container.content-container.media.ui-selectable.mapview #results-thumbs .maps-container { position: relative; } body[data-module=media] #media-container.content-container.media.ui-selectable.mapview #results-thumbs .maps-container .mediaMapSearch { position: absolute; width: auto; } body[data-module=media] #media-container.content-container.media.ui-selectable.mapview #results-thumbs .maps-container .mediaMapSearch .searchInput { width: 230px; margin-right: 5px; } body[data-module=media] #media-container.content-container.media.ui-selectable.mapview #results-thumbs .maps-container #mediaMap { position: relative; height: 400px; top: 0; } /*======================= ASSET DETAIL PAGE =======================*/ #image_upload, #image_enlarger { background-color: rgba(56, 56, 56, 0.98); } #image_upload header, #image_upload .upload-container header, #image_enlarger header, #image_enlarger .upload-container header { background: transparent; padding-top: 0; padding-bottom: 0; } #image_upload .selected, #image_upload .bottom, #image_enlarger .selected, #image_enlarger .bottom { background: #fff !important; color: #666 !important; } /* Side */ #image_upload ul.media-info input, #image_upload ul.media-info textarea, #image_enlarger ul.media-info input, #image_enlarger ul.media-info textarea { border: 1px solid rgba(0, 0, 0, 0.2) !important; box-sizing: border-box; padding: 2px 5px !important; color: #333 !important; } #image_upload ul.media-info input:focus, #image_upload ul.media-info input:active, #image_upload ul.media-info textarea:focus, #image_upload ul.media-info textarea:active, #image_enlarger ul.media-info input:focus, #image_enlarger ul.media-info input:active, #image_enlarger ul.media-info textarea:focus, #image_enlarger ul.media-info textarea:active { border: 1px solid #1781E3 !important; } #image_upload ul.media-info li .control-group .controls textarea.description, #image_enlarger ul.meida-info li .control-group .controls textarea.description { min-width: 240px; } /* Side items / metaproperties */ #image_upload .media-info .media-info-extend .control-group li label, #image_enlarger ul.media-info li .control-group .controls label.checkbox, #image_upload ul.media-info li .control-group .controls label.checkbox, #image_enlarger ul.media-info li a.link, #image_upload ul.media-info li a.link, #image_enlarger > figure > div.table_wrapper .overlay-detail ul li span a, #image_enlarger > figure > div.table_wrapper .overlay-detail ul li time { color: #666; } #image_upload .media-info .media-info-extend .control-group li label:hover, #image_enlarger ul.media-info li .control-group .controls label.checkbox:hover, #image_upload ul.media-info li .control-group .controls label.checkbox:hover, #image_enlarger ul.media-info li a.link:hover, #image_upload ul.media-info li a.link:hover, #image_enlarger > figure > div.table_wrapper .overlay-detail ul li span a:hover, #image_enlarger > figure > div.table_wrapper .overlay-detail ul li time:hover { color: #1781E3 !important; background: transparent !important; } #image_enlarger ul.media-info > li.edited > a.action-btn, #image_upload ul.media-info > li.edited > a.action-btn, #image_enlarger ul.media-info > li > a.action-btn, #image_upload ul.media-info > li > a.action-btn, #image_enlarger ul.media-info > li.toggle-active > a.action-btn, #image_upload ul.media-info > li.toggle-active > a.action-btn, #image_enlarger ul.media-info > li.toggle-active.active > a.action-btn, #image_upload ul.media-info > li.toggle-active.active > a.action-btn { color: #666; } #image_enlarger ul.media-info > li.edited > a.action-btn:hover, #image_enlarger ul.media-info > li.edited > a.action-btn:focus, #image_upload ul.media-info > li.edited > a.action-btn:hover, #image_upload ul.media-info > li.edited > a.action-btn:focus, #image_enlarger ul.media-info > li > a.action-btn:hover, #image_enlarger ul.media-info > li > a.action-btn:focus, #image_upload ul.media-info > li > a.action-btn:hover, #image_upload ul.media-info > li > a.action-btn:focus, #image_enlarger ul.media-info > li.toggle-active > a.action-btn:hover, #image_enlarger ul.media-info > li.toggle-active > a.action-btn:focus, #image_upload ul.media-info > li.toggle-active > a.action-btn:hover, #image_upload ul.media-info > li.toggle-active > a.action-btn:focus, #image_enlarger ul.media-info > li.toggle-active.active > a.action-btn:hover, #image_enlarger ul.media-info > li.toggle-active.active > a.action-btn:focus, #image_upload ul.media-info > li.toggle-active.active > a.action-btn:hover, #image_upload ul.media-info > li.toggle-active.active > a.action-btn:focus { color: #1781E3 !important; background: transparent !important; } #image_enlarger ul.media-info > li.edited > a.action-btn:hover .fa, #image_enlarger ul.media-info > li.edited > a.action-btn:focus .fa, #image_upload ul.media-info > li.edited > a.action-btn:hover .fa, #image_upload ul.media-info > li.edited > a.action-btn:focus .fa, #image_enlarger ul.media-info > li > a.action-btn:hover .fa, #image_enlarger ul.media-info > li > a.action-btn:focus .fa, #image_upload ul.media-info > li > a.action-btn:hover .fa, #image_upload ul.media-info > li > a.action-btn:focus .fa, #image_enlarger ul.media-info > li.toggle-active > a.action-btn:hover .fa, #image_enlarger ul.media-info > li.toggle-active > a.action-btn:focus .fa, #image_upload ul.media-info > li.toggle-active > a.action-btn:hover .fa, #image_upload ul.media-info > li.toggle-active > a.action-btn:focus .fa, #image_enlarger ul.media-info > li.toggle-active.active > a.action-btn:hover .fa, #image_enlarger ul.media-info > li.toggle-active.active > a.action-btn:focus .fa, #image_upload ul.media-info > li.toggle-active.active > a.action-btn:hover .fa, #image_upload ul.media-info > li.toggle-active.active > a.action-btn:focus .fa { color: #1781E3 !important; } #image_upload ul.media-info ul, #image_upload ul.media-info li, #image_upload ul.media-info li b, #image_upload ul.media-info input, #image_upload ul.media-info label, #image_upload ul.media-info .fa, #image_enlarger ul.media-info ul, #image_enlarger ul.media-info li, #image_enlarger ul.media-info li b, #image_enlarger ul.media-info input, #image_enlarger ul.media-info label, #image_enlarger ul.media-info .fa { color: #666; background: transparent; } #image_upload ul.media-info a i.fa, #image_upload ul.media-info button i.fa, #image_enlarger ul.media-info a i.fa, #image_enlarger ul.media-info button i.fa { color: inherit; } #image_enlarger ul.media-info li .media-info-extend ul.advanced-categories { width: 100%; } .controls.meta-option label.meta-label, #image_upload .media-info .media-info-extend .control-group li label { margin-left: 5px; overflow: visible; } #image_upload > .upload-container nav.edit, #image_enlarger > figure > div.table_wrapper .overlay-detail { background: #fff; border: 0; border-radius: 0; color: #666 !important; } #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a .media-item-info, #image_enlarger ul.media-info li .media-info-extend.media-downloads ul .large-btn a .additional-name, #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a .fa { color: #fff !important; } #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a.action-btn:hover span { color: #fff !important; } #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a span.pull-right { line-height: 39px; } #image_enlarger > figure > div.table_wrapper .overlay-detail ul.media-info li .media-info-extend.media-downloads ul li a span.extension { height: 23px; line-height: 23px; } #image_enlarger ul.media-info button i.fa.fa-fw { line-height: 30px; color: #fff; vertical-align: top; } #image_enlarger ul.media-info a.action-btn.save-focus-point i.fa.fa-fw { color: #fff; } #image_enlarger > figure > div.table_wrapper .overlay-detail ul li span.child-options { float: none; margin-left: 10px; } #image_upload .media-info-extend .linkToAssets { color: #ccc; } #image_upload .media-info .media-info-extend .linkToAssets { color: #666; } /* Asset detail image */ #image_enlarger > figure { top: 0; right: 20px; bottom: 40px; left: 20px; overflow-y: auto; } #image_enlarger > figure > div.table_wrapper > div.cell_wrapper.top { text-align: center; vertical-align: middle; padding-right: 360px; padding-left: 20px; } #image_enlarger > figure img.detail-image { margin-top: 0; } /* Asset detail top */ #image_enlarger > figure > div.table_wrapper .overlay-stats, #image_enlarger > figure > div.table_wrapper .overlay-stats.bottom { color: #fff; } #image_enlarger > figure > div.table_wrapper .overlay-stats a.pull-right.addtocollection span:hover, #image_enlarger > figure > div.table_wrapper .overlay-stats a.pull-right.share span:hover, #image_enlarger > figure > div.table_wrapper .overlay-stats.bottom a.pull-right.addtocollection span:hover, #image_enlarger > figure > div.table_wrapper .overlay-stats.bottom a.pull-right.share span:hover { color: #1781E3; } #image_enlarger > figure > div.table_wrapper .cell_wrapper.top .overlay-stats { height: auto; margin: 20px 0; background-color: transparent; border-radius: 0; z-index: 100; } #image_enlarger > figure > div.table_wrapper .overlay-stats, #image_enlarger > figure > div.table_wrapper .overlay-stats.bottom { height: 38px; margin: 0; padding: 10px 20px 10px 20px; background: transparent !important; opacity: 1; text-align: center; box-sizing: border-box; border-radius: 0; } #image_enlarger > figure > div.table_wrapper .overlay-stats hr { margin: 5px 0 10px 0; } /* Asset detail controls */ #image_enlarger > a.nav, #image_enlarger > a.nav.right, #image_enlarger > span.detail-loader, #image_enlarger > span.detail-loader.right, #image_enlarger > span.detail-loader.left { width: 40px; color: #fff; } #image_enlarger > a.nav:hover, #image_enlarger > a.nav.right:hover, #image_enlarger > span.detail-loader:hover, #image_enlarger > span.detail-loader.right:hover, #image_enlarger > span.detail-loader.left:hover { color: #1781E3 !important; } #image_enlarger > a.nav .icon, #image_enlarger > a.nav.right .icon, #image_enlarger > span.detail-loader .icon, #image_enlarger > span.detail-loader.right .icon, #image_enlarger > span.detail-loader.left .icon { font-size: 45px; width: 40px; height: 40px; line-height: 40px; } #image_enlarger > a.nav .icon .fa, #image_enlarger > a.nav.right .icon .fa, #image_enlarger > span.detail-loader .icon .fa, #image_enlarger > span.detail-loader.right .icon .fa, #image_enlarger > span.detail-loader.left .icon .fa { line-height: 40px; } #image_enlarger > span.detail-loader .icon, #image_enlarger > span.detail-loader.right .icon, #image_enlarger > span.detail-loader.left .icon { font-size: 20px; } /* Asset detail side */ #image_enlarger > figure > div.table_wrapper .overlay-detail { top: 0; right: 0; bottom: 0; width: 340px; border-left: 1px solid #DCE3E7; border-radius: 0; } #image_enlarger ul.media-info { width: 300px; } #image_enlarger ul.media-info li.alert, #image_enlarger ul.media-info li#video-Converting, #image_enlarger ul.media-info li#image-Converting, #image_enlarger ul.media-info li.message { padding: 10px; color: #666; background: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #image_enlarger ul.media-info li.alert .fa, #image_enlarger ul.media-info li#video-Converting .fa, #image_enlarger ul.media-info li#image-Converting .fa, #image_enlarger ul.media-info li.message .fa { margin-right: 2px; } /* Asset detail side add related assets */ #image_enlarger .media-info-extend .linkToAssets, #image_upload ul li a.addCategoryText { color: #666; } /* Asset detail side header */ #image_enlarger > figure > div.table_wrapper .overlay-detail nav { width: 340px; } #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul { width: 340px; border-bottom: 1px solid #f2f2f2; } #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li, #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li a { color: #666; } #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li:hover, #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li a:hover { color: #1781E3 !important; } #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li.active { color: #1781E3; } #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li.active a { border-bottom: 1px solid rgba(207, 213, 217, 0.6); } /* Asset detail side content */ #image_enlarger .media-info-extend .control-group, .media-info-extend .control-group { color: #666; } .media-holder.edit input[type=select], .media-holder.edit input[type=text], .media-holder.edit textarea { line-height: 14px; } /* Asset detail side select2 input */ #image_enlarger .media-info .select2-container.select2-container-multi.input-tags.tags, #image_enlarger .media-info .select2-container.select2-container-multi.input-tags.tags .select2-input.select2-default, #image_enlarger .media-info .select2-container.select2-container-multi.input-tags.tags .select2-input.select2-focused, #image_enlarger .media-info .select2-container.select2-container-multi.input-tags.tags.select2-container-active, #image_enlarger .media-info .select2-container.select2-container-multi.input-tags.tags.select2-container-active .select2-input.select2-focused { width: 285px !important; } /* Asset detail asset selector */ #image_enlarger .media-holder .thumbnail .select, #image_enlarger .media-holder.listview .thumbnail .select, #image_enlarger .table_wrapper .overlay-detail .select, #image_enlarger .table_wrapper.active .overlay-detail .select { top: 61px; } #image_enlarger .media-holder .thumbnail .select:after, #image_enlarger .media-holder.listview .thumbnail .select:after, #image_enlarger .table_wrapper .overlay-detail .select:after, #image_enlarger .table_wrapper.active .overlay-detail .select:after { margin-left: 10px; } /* Asset detail top */ .table_wrapper .overlay-detail .select { display: block; opacity: 0; } .table_wrapper.active .overlay-detail .select, .table_wrapper .overlay-detail .select:hover { opacity: 1; } #image_enlarger .image-detail-toolbar { position: absolute; top: 0; right: 360px; left: auto; padding: 0; transition: all 200ms ease; } #image_enlarger > figure > div.table_wrapper .overlay-stats span, #image_enlarger > figure > div.table_wrapper .overlay-stats { color: #fff; } #image_enlarger a.overlay-resize, #image_enlarger a.close { width: auto; height: 60px; line-height: 60px; padding: 0 10px; color: #fff; font-size: 20px; } #image_enlarger a.overlay-resize:hover, #image_enlarger a.close:hover { color: #1781E3 !important; } #image_enlarger a.close { font-size: 0; } #image_enlarger a.close .times { width: auto; height: 60px; line-height: 60px; margin: 0; font-size: 0; } #image_enlarger a.close .times:before { content: "\f00d"; font-family: "FontAwesome"; font-size: 25px; } #image_enlarger ul.media-info > li.toggle-active, #image_enlarger ul.media-info > li.toggle-versions, #image_enlarger ul.media-info > li.toggle-additionals, #image_enlarger ul.media-info > li.toggle-derivatives, #image_enlarger ul.media-info > li.toggle-statistics, #image_upload ul.media-info > li.toggle-active { border-bottom: 1px solid #f2f2f2; } .fullscreen #image_enlarger .image-detail-toolbar { right: 0px; } #image_enlarger ul.media-info li .control-group .controls .archive-options, #image_enlarger ul.media-info li .control-group .controls .embargo-options, #image_enlarger ul.media-info li .control-group .controls .watermark-options, #image_enlarger ul.media-info li .control-group .controls textarea, #image_upload ul.media-info li .control-group .controls textarea, #image_enlarger ul.media-info li .control-group .controls input.title { margin-left: 0; } #image_enlarger ul.media-info li .control-group .controls input.title { border-color: transparent !important; } #image_enlarger ul.media-info li .control-group .controls input.title:focus { border: 1px solid #1781E3 !important; } #image_enlarger > a.nav.right, #image_enlarger > span.detail-loader.right { right: 340px; } #image_enlarger .tags.select2-container-multi .select2-search-choice-close, #image_upload .tags.select2-container-multi .select2-search-choice-close { color: #fff !important; } #image_enlarger .tags.select2-container-multi .select2-choices .select2-search-choice, #image_upload .tags.select2-container-multi .select2-choices .select2-search-choice { background: #1781E3; border-radius: 5px; color: #fff !important; box-shadow: none; } #image_enlarger .tags.select2-container-multi .select2-choices .select2-search-choice:hover, #image_upload .tags.select2-container-multi .select2-choices .select2-search-choice:hover { background: #1574cc; } #image_enlarger .tags.select2-container-multi .select2-choices .select2-search-choice:hover a, #image_upload .tags.select2-container-multi .select2-choices .select2-search-choice:hover a { color: #fff !important; } .tags.select2-container-multi .select2-choices, .tags.select2-container-multi .select2-choices { overflow: visible; } #image_enlarger ul.media-info li .media-info-extend .controls.action { background: #1781E3; } #image_enlarger ul.media-info li .media-info-extend .controls.action label { color: #fff; } #image_enlarger ul.media-info li .media-info-extend .controls.action label:hover { color: #fff !important; } #image_enlarger ul.media-info li .control-group .controls input[type=text] { border: 1px dotted rgba(0, 0, 0, 0.1) !important; } /* Asset detail bottom */ #image_enlarger > figure > div.table_wrapper .overlay-stats.bottom span { color: #fff; } /* Related assets */ .related-assets .row { padding-bottom: 40px; border-top: 1px solid #fff; } .related-assets h1, .related-assets h2, .related-assets h3 { color: #fff; } #image_enlarger .related-assets .media-holder { vertical-align: top; } #image_enlarger .related-assets .media-holder .thumbnail { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #image_enlarger .related-assets .media-holder .thumbnail:hover { border-color: #1781E3; } #image_enlarger .related-assets .media-holder .thumbnail:hover, #image_enlarger .related-assets .ui-selecting .thumbnail, #image_enlarger .related-assets .media-holder.active .thumbnail { padding: 5px; } #image_enlarger .related-assets .media-holder .thumbnail p { max-width: 120px; height: 20px; line-height: 20px; } #image_enlarger .related-assets .media-holder .thumbnail:hover p { height: auto; text-overflow: unset; word-break: break-word; white-space: normal; } #image_enlarger .related-assets .media-holder .thumbnail .extension { display: none !important; } .related-assets .media-holder .thumbnail:hover, .related-assets .ui-selecting .thumbnail, .related-assets .media-holder.active .thumbnail { padding: 5px; } /* Asset detail title */ #image_enlarger ul.media-info li .control-group .controls input[type=text].title { overflow: hidden; text-overflow: ellipsis; color: #000; } #image_enlarger ul.media-info li .control-group .controls input[type=text].title:focus { width: 100% !important; min-width: auto !important; text-overflow: clip; } #image_enlarger ul.media-info li .control-group .controls textarea { border: 1px dotted rgba(0, 0, 0, 0.2) !important; } #image_enlarger ul.media-info li .control-group .controls textarea:focus { border: 1px solid #1781E3 !important; } #image_enlarger ul.media-info li .control-group .controls textarea:focus { min-height: 56px; } #image_enlarger ul.media-info li .media-info-extend ul li a.stats .tip b { color: #fff; } #image_enlarger > figure > div.table_wrapper .overlay-detail ul li h2 { color: #666; } /* Asset detail checkbox and radiobutton */ #image_enlarger ul.media-info li .control-group .controls.meta-option input[type=checkbox] { position: relative; } #image_upload ul.media-info li .control-group .controls input[type=checkbox] { margin-top: 0; } #image_upload ul.media-info li .control-group .controls input[type=checkbox]:before { margin-top: 0; } @-moz-document url-prefix() { #image_upload ul.media-info li .control-group .controls input[type=checkbox] { margin-top: 5px; } } /* Select all checkbox */ #image_enlarger ul.media-info li .control-group.select-options .controls.meta-option.advanced-categories input[type=checkbox] { float: left; } .option-holder ul.advanced-categories > li { border-color: #DCE3E7; } .option-holder ul.advanced-categories > li label { color: #fff; } #image_upload .media-info .media-info-extend .control-group.select-options li.meta-select label { margin-right: 5px; } /* Versions tab */ #newFilesdropzone:hover, #newFilesdropzone:hover .fa { color: #1781E3 !important; } #image_enlarger ul.media-info li .control-group .controls span.input a.nofollow.tip-trigger input[type=text] { width: 220px !important; min-width: 220px !important; } #image_enlarger > figure > div.table_wrapper .overlay-detail nav ul li span { border-radius: 0; background-color: #CFD5D9; } /* Avaliable files */ #image_enlarger ul.media-info li .media-info-extend.media-downloads ul li a { padding-top: 10px; } #image_enlarger > figure > div.table_wrapper .overlay-detail ul.media-info li .media-info-extend.media-downloads ul li a span.extension { left: 10px; } /* CROP */ #image_enlarger ul.media-info .media-info-extend.crop input { margin-top: 5px; } .media-info-extend.crop input.number { width: 133px; } .media-info-extend.crop .size .input-mini input.number { width: 52px; } #image_enlarger ul.media-info li.active .cropSave .fa { line-height: normal; vertical-align: baseline; color: #fff !important; transition: all 200ms ease; } #image_enlarger ul.media-info li.active .cropSave:hover .fa { color: #fff !important; } #image_enlarger ul.media-info li .media-info-extend.crop .size .input-mini span .fa.fa-lock { background: #1781E3; color: #fff; } /* Asset detail PDF popup */ #pdf-container { top: 60px; } /*======================= ASSET UPLOAD / ASSET EDIT - UPLOAD MEDIA / EDIT MEDIA =======================*/ /* Sidebar */ #image_upload ul.media-info li, #image_upload ul.media-info li .media-info-extend { padding: 6px 0; } #image_upload ul.media-info li.description .heading { color: #666; } #image_upload .media-tools-left .media-reulsts.selected { border: none; height: 30px; } a.toggle-option.active, a.toggle-option-all.active, a.multi-edit-option.delete.reset, a.multi-edit-option.delete-all.reset { background-color: #1781E3 !important; color: #666; } a.toggle-option.active i.fa, a.toggle-option-all.active i.fa, a.multi-edit-option.delete.reset i.fa, a.multi-edit-option.delete-all.reset i.fa { color: #fff !important; } a.toggle-option-all.active:hover, a.multi-edit-option.toggle-option.active:hover, a.multi-edit-option.delete.reset:hover, a.multi-edit-option.delete-all.reset:hover { background: #1574cc !important; } a.toggle-option-all.active:hover .fa.fa-eye-slash, a.multi-edit-option.toggle-option.active:hover .fa.fa-eye-slash, a.multi-edit-option.delete.reset:hover .fa.fa-eye-slash, a.multi-edit-option.delete-all.reset:hover .fa.fa-eye-slash { color: #fff !important; } span.count-meta { color: #fff; background: #1781E3; border: 1px solid #fff; } span.count-meta ~ i.fa-times-circle { top: 50%; transform: translateY(-50%); } span.count-meta.disabled { color: #fff; background: #CFD5D9 !important; border: 0; } i.fa.fa-times-circle.remove-meta { color: #fff !important; } #image_upload ul.media-info input[type=radio], #image_upload ul.media-info input[type=checkbox] { width: 13px; height: 13px; } #image_upload ul.media-info li .control-group .controls input.use-filenames[type=checkbox], #image_upload ul.media-info li .control-group .controls input.make-unique[type=checkbox] { width: 13px; height: 13px; margin-top: 0; margin-left: 0; } /* Asset edit side / asset upload side */ #image_upload ul.media-info { top: 60px; padding: 0 20px 20px 20px; } #image_upload > .upload-container nav.edit .selected { padding: 20px 20px 0 20px; height: 30px; max-height: 30px; } #image_upload > .upload-container nav.edit .selected h2 { line-height: 30px; } #image_upload > .upload-container nav.edit .selected .multi-edit-options { position: static; float: right; height: 30px; line-height: 30px; margin: 0; transform: none; } #image_upload > .upload-container nav.edit .selected .multi-edit-options > a.multi-edit-option { height: 30px; line-height: 30px; margin: 0; } /* Asset detail/upload sidebar icons */ #image_enlarger ul.media-info i.fa { line-height: normal; vertical-align: middle; } #image_enlarger ul.media-info i.fa.fa-fw, #image_upload ul.media-info i.fa.fa-fw { line-height: 36px; } #image_enlarger ul.media-info i.fa.fa-plus-circle { line-height: normal; vertical-align: baseline; } /* Create new terms of use popup */ #custom-option-form.simple-edit-form .add-option button.action-btn { margin-top: 20px; } #custom-option-form.simple-edit-form .add-option button.action-btn.save-option { margin-left: 90px; } #custom-option-form.simple-edit-form .mce-btn button:hover, #custom-option-form.simple-edit-form .mce-btn button:active, #custom-option-form.simple-edit-form .mce-btn button:focus { background: transparent !important; } /* Asset upload tiles */ .media-holder .thumbnail .thumbnail-loader p.state { white-space: initial; text-overflow: ellipsis; overflow: visible; line-height: 1.2; } .media-holder .thumbnail .thumbnail-loader .state-converting { height: 100px; right: -1px; top: -160px; height: 130px; box-sizing: border-box; } .media-holder .thumbnail .thumbnail-loader .state-saving { height: 100px; right: -1px; top: -160px; height: 130px; box-sizing: border-box; } #image_upload > .upload-container .media-holder .thumbnail-loader .upload-progress { top: -30px; right: -1px; } .media-holder .thumbnail-loader .upload-progress .progress { background-color: #1781E3; } .media-holder .thumbnail-loader .state-uploading .percent { color: #1781E3; } .upload-media .media-holder.edit .thumbnail > span.upload-extension { margin-top: 5px; } .media-holder .thumbnail .thumbnail-loader .state-uploading .percent { width: 100%; height: 130px; top: -160px; left: 1px; margin-left: 0; padding-top: 38px; color: #1781E3; border-radius: 0; box-sizing: border-box; } #image_enlarger ul.media-info > li > a.action-btn i.fa, #image_upload ul.media-info > li > a.action-btn i.fa { color: #666 !important; } #image_upload .media-holder.edit textarea::-webkit-scrollbar { width: 0; } /* Asset edit */ #image_upload ul.media-info li .control-group.title .controls input.title { padding-right: 30px !important; text-overflow: ellipsis; } #image_enlarger ul.media-info .media-info-extend .control-group { margin: 0; } #image_enlarger ul.media-info .media-info-extend .controls label.checkbox { min-height: 20px; line-height: 20px; margin: 0; padding: 0; } #image_enlarger ul.media-info .media-info-extend .controls label.checkbox input[type=checkbox] { width: 14px; margin: 3px 2px 0 0; } #image_upload .media-info .media-info-extend.indented { margin-left: 0; } #image_upload ul.media-info li .control-group .controls input.make-unique[type=checkbox] { margin-left: 0; } /* Asset edit select all */ #image_upload header ul.actions-bar li.select a.group-btn.select-all { width: 35px; height: 30px; line-height: 30px; background: none; background-color: #fff; border: 0; border-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; box-sizing: border-box; } #image_upload header ul.actions-bar li.select a.group-btn.select-all:before { position: absolute; left: 50%; font-family: "FontAwesome"; font-size: 18px; color: #666; content: "\f096"; transform: translateX(-50%); } #image_upload header ul.actions-bar.active li.select a.group-btn.select-all:before { content: "\f046"; } #image_upload header ul.actions-bar li.select a.group-btn.select-dropdown { border: 0; border-left: 1px solid #DCE3E7; border-radius: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Asset detail side bottom */ #image_enlarger > figure > div.table_wrapper .overlay-detail .bottom, #image_upload > .upload-container .bottom { left: 1px; border-top: 1px solid #DCE3E7; border-radius: 0 0 0 0; box-shadow: none; } /* Asset upload */ #image_upload > .upload-container .upload-media-wrapper { margin-top: 50px; } #image_upload > .upload-container nav.edit { overflow: visible; } /* Eye icons */ #image_upload > .upload-container nav.edit .multi-edit-options { top: 10px; } #image_upload > .upload-container nav.edit .multi-edit-options > a.multi-edit-option { height: 30px; line-height: 30px; margin: 0; color: #666; } #image_upload > .upload-container nav.edit .multi-edit-options > a.multi-edit-option:hover .fa, #image_upload > .upload-container nav.edit .multi-edit-options > a.multi-edit-option:active .fa { color: #1781E3 !important; } #image_upload > .upload-container nav.edit .multi-edit-options > a.multi-edit-option.active .fa { color: #fff !important; } /* Eye icon title */ #image_upload > .upload-container nav.edit .media-info li:first-of-type .multi-edit-options { top: 6px; transform: none; } /* Eye icon description */ #image_upload > .upload-container .media-info .description .multi-edit-options { top: 10px; transform: none; } /* Eye icon for metaproperties sub items */ #image_upload > .upload-container nav.edit li.dropdown.toggle-active.metaoptions .multi-edit-options { top: 0; } #toggleBrandMethod:hover, #toggleCategoryMethod:hover span { color: #1781E3; } #image_upload .media-tools ul.media-tools-left li.media-results.selected { background: transparent !important; margin: 0; border: 0; } #image_upload .media-tools ul.media-tools-left li.media-results span.results { border-radius: 0 0 0 0; } #image_upload .option-holder, #image_upload .option-header, #image_upload .option-holder.option-categories .option-container, #image_upload .option-footer { color: #666; background: #fff; } #image_upload .option-holder.option-categories .option-container { width: auto; max-width: 100%; background-color: #484848; color: #fff; } #image_upload .option-header, #image_upload .option-holder .option-container, #image_upload .option-footer { padding: 10px; } #image_upload .option-header .action-btn, #image_upload .option-holder .option-container .action-btn, #image_upload .option-footer .action-btn { height: 22px; position: relative; display: table; } #image_upload .option-header .action-btn .fa, #image_upload .option-holder .option-container .action-btn .fa, #image_upload .option-footer .action-btn .fa { vertical-align: middle; display: table-cell; } #image_upload .option-holder { left: 0; max-width: 100%; color: #fff; background: #484848; } #image_upload .option-holder .option-header, #image_upload .option-holder .option-footer { color: #fff; background: #484848; } #image_upload .option-holder input[type=text] { border: 1px solid #DCE3E7; padding: 0 5px !important; } #image_upload .option-holder input[type=text].select2-focused { color: #fff !important; } #image_upload .option-holder .option-container form .control-group .property .controls select { max-width: 100%; } .option-holder .checkbox-checkbox { margin: 5px 2px 3px 0; } #image_upload header ul.actions-bar li.select:hover ul.auto-complete { top: 30px; } #image_upload .media-info-extend .control-group { list-style-type: none !important; } #image_enlarger ul.media-info li .media-info-extend ul li a.action-btn.blue, #image_upload ul.media-info li .media-info-extend ul li a.action-btn.blue { box-shadow: none; } #image_enlarger ul.media-info li .media-info-extend ul li a.action-btn.blue .fa, #image_upload ul.media-info li .media-info-extend ul li a.action-btn.blue .fa { color: #fff; } #image_enlarger ul.media-info li .media-info-extend ul li a.linked-asset-remove.thumbnail, #image_upload ul.media-info li .media-info-extend ul li a.linked-asset-remove.thumbnail { color: #666; background: transparent; } #image_enlarger ul.media-info li .media-info-extend ul li a.linked-asset-remove.thumbnail:hover .fa-trash-o, #image_upload ul.media-info li .media-info-extend ul li a.linked-asset-remove.thumbnail:hover .fa-trash-o { color: #c00; } #image_upload .option-holder .property_linked_assets ul.linked-assets-items li .thumbnail { width: 205px; border-radius: 0; } #image_upload .option-holder .property_linked_assets ul.linked-assets-items li .thumbnail:hover .pull-right .fa { color: #c00; } #image_upload .option-holder .pull-right { color: #fff; } #image_upload .option-holder .pull-right .fa { color: #fff; transition: all 200ms ease; } #image_upload .option-holder .pull-right .fa:hover { cursor: pointer; } #image_upload > .upload-container nav.edit ul li .control-group textarea.copyrightArea { width: 260px; min-width: 260px; } #image_upload > .upload-container .media-holder .thumbnail-loader .upload-progress .progress { background: #1781E3; transition: all 200ms ease; } /* Asset upload/edit selector and tiles */ #image_upload .media-holder .thumbnail { border: 2px solid transparent; box-shadow: none; } #image_upload .media-holder .thumbnail:hover { border: 2px solid #1781E3; box-shadow: none; } #image_upload .media-holder.active .thumbnail { border: 2px solid #1781E3; box-shadow: none; } #image_upload .media-holder.active .thumbnail .delete { color: #666; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #image_upload .media-holder.active .thumbnail .delete:hover { color: #1781E3; } #image_upload .media-holder .thumbnail .select, #image_upload .media-holder.active .thumbnail .select { top: -1px; right: -1px; } /* Asset detail miscellaneous */ #image_enlarger > figure > div.table_wrapper .overlay-detail ul.media-info li .media-info-extend ul li span.input .tip-trigger, #image_enlarger > figure > div.table_wrapper .overlay-detail ul.media-info li .media-info-extend ul li span.date .tip-trigger { color: #333; } /* Asset detail video preview icons */ .vjs-icon-pause, .video-js .vjs-play-control, .video-js button { font-family: "VideoJS" !important; font-size: unset; } .video-js button, .video-js button:hover, .video-js button:active, .video-js button:focus { background: transparent !important; } .video-js .vjs-big-play-button { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Asset upload Add option MCE editor */ .mce-btn button { background: transparent; } /*======================= COLLECTIONS PAGE =======================*/ body[data-module=collections] header .tool-bar { height: auto; min-height: 0; box-shadow: none; } body[data-module=collections].no-toolbar header .tool-bar { border-bottom: 1px solid #DCE3E7; } .content-container.collections { padding: 130px 0 0 0; } .collection-navigation { width: 220px; top: 150px; left: 20px; padding: 0 0 10px 0; border: 1px solid #DCE3E7; border-radius: 5px; box-shadow: none; box-sizing: border-box; overflow: hidden; transition: top 0.6s; } header.small ~ .collection-navigation { top: 103px; } .collection-navigation ul { padding: 0; } .collection-navigation ul li h3 { margin: 0; padding: 10px; color: #333; font-weight: 300; font-size: 24px; } .collection-navigation ul li a { max-height: 35px; line-height: 35px; padding: 0 45px 0 10px; font-weight: 400; font-size: 14px; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } .collection-navigation ul li a:hover .fa { color: #1781E3; } .collection-navigation ul li a .fa { margin-right: 5px; color: #666; transition: all 200ms ease; } .collection-navigation ul li span.count { position: absolute; right: 10px; font-weight: 400; font-size: 12px; color: #666; background-color: #f5f5f5; border: 0; border-radius: 3px; box-sizing: border-box; min-width: 20px; height: 20px; line-height: 20px; margin: 7px 0 0 0; padding: 0 4px; } .collection-navigation ul li.dropdown.alwaysopen ul li.active a, .collection-navigation ul li.dropdown.active ul li.active a { color: #1781E3; background-color: transparent; border: 0; border-radius: 0; } .collection-navigation ul li.dropdown.alwaysopen ul li.active a .fa, .collection-navigation ul li.dropdown.active ul li.active a .fa { color: #1781E3; } .collection-navigation ul li.dropdown.alwaysopen ul li.active a span.count, .collection-navigation ul li.dropdown.active ul li.active a span.count { color: #fff; background-color: #1781E3; } /* Media tools */ .content-container.collections .collections-container { padding-top: 20px; right: 20px; } .content-container.collections .collections-container .media-tools { margin: 0 0 20px 0; padding: 0; } .collections-container .media-tools-left, .collections-container .media-tools-left .media-sort { box-shadow: none; border: none; } .collections-container .media-tools-left .media-sort .dropdown-search { box-shadow: none; } .media-tools > .media-tools-left > li.media-sort p, .chosen-container-single .chosen-single span { margin: 0; font-weight: 400; font-size: 14px; color: #666; } .content-container.collections .collections-container .media-tools .media-tools-left .media-sort .dropdown-search a.chosen-single { font-weight: 400; font-size: 12px; color: #666; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } .content-container.collections .collections-container .media-tools .media-tools-left .media-sort .dropdown-search a.chosen-single ~ .chosen-drop { border: 1px solid #DCE3E7; box-shadow: none; } .chosen-container .chosen-results li.highlighted { background: #1781E3; } #collections-container ul.media-tools-right { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #collections-container ul.media-tools-right li.media-sort > a { font-weight: 400; font-size: 14px; color: #666; letter-spacing: 0; background-color: #fff; border: 0; border-radius: 5px; box-shadow: none; transition: all 200ms ease; } #collections-container ul.media-tools-right li.media-sort > a strong { font-weight: 700; } #collections-container ul.media-tools-right li.media-sort > a:hover strong { color: #1781E3; } #collections-container ul.media-tools-right li.media-sort ul.auto-complete { padding: 0; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #collections-container ul.media-tools-right li.media-sort ul.auto-complete li a { color: #666 !important; } #collections-container ul.media-tools-right li.media-sort ul.auto-complete li.active a { color: #fff !important; background: #1781E3; border-radius: 0; } /* Collection tiles */ #collections-container .collection-holder { width: 220px; height: 200px; margin: 0 20px 20px 0; border: 0; border-radius: 0; transition: all 200ms ease; } #collections-container .collection-holder:hover { z-index: 98; } .collection-holder:before, .collection-holder:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; width: auto; height: 195px; border: 1px solid #f5f7f9; border-radius: 4px; background: #f5f7f9; box-shadow: none; transition: all 200ms ease; } .collection-holder:after { position: absolute; z-index: 1; } .collection-holder:hover:before { transform: rotate(-5deg); } .collection-holder:hover:after { transform: rotate(3deg); } #collections-container .collection-holder .thumbnail { height: 175px; bottom: auto; left: auto; margin: 0; z-index: 3; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #collections-container .collection-holder .thumbnail > a { position: absolute; width: 220px; height: 205px; top: 0; left: 0; } #collections-container .collection-holder .thumbnail .image-holder { height: 125px; background: transparent; } .collection-holder .thumbnail .image-holder .empty-collections { top: 35px; left: 70px; margin: 0; } #collections-container .collection-holder .thumbnail h4 { max-width: 100%; position: static; margin: 145px 10px 0 10px; font-weight: 400; font-size: 14px; color: #333; word-break: break-all; white-space: nowrap; } #collections-container .collection-holder .thumbnail span.count { height: 20px; line-height: 20px; bottom: 10px; font-weight: 300; font-size: 12px; color: #666; } #collections-container .collection-holder .thumbnail .share-holder { height: 20px; line-height: 20px; right: 10px; bottom: 10px; } #collections-container .collection-holder .thumbnail .share-holder:hover .share > .fa { color: #1781E3; } #collections-container .collection-holder .thumbnail .share-holder .share { display: block; height: 20px; line-height: 20px; top: 0; right: 0; bottom: 0; padding: 0; border: 0; border-radius: 0; color: #666; } #collections-container .collection-holder .thumbnail .share-holder .share .fa { padding: 0 4px; } #collections-container .collection-holder .thumbnail .share-holder .share .auto-complete li a .fa { padding: 0; width: 14px; } .collection-holder .thumbnail .share:hover { border: 1px solid transparent; } #collections-container .collection-holder .thumbnail .share ul.auto-complete { min-width: 200px; top: 20px; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #collections-container .collection-holder .thumbnail .share ul.auto-complete li a { color: #666; } #copyEmbed { color: #1781E3 !important; } /* Collection detail section */ .content-container.single-collection { padding-top: 190px; padding-right: 0; transition: all 200ms ease; } .filterbar.show ~ .content-container.single-collection { padding-top: 230px; } #single-collection-top { min-height: 70px; position: relative; padding: 20px 0; background: transparent; border-bottom: 1px solid #DCE3E7; box-shadow: none; box-sizing: border-box; } #single-collection-top:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: transparent; border-bottom: 1px solid #DCE3E7; } #single-collection-top > h1, #single-collection-top.jobview-top h1 { height: 20px; line-height: normal; margin: 0 0 4px 0; padding-right: 340px; color: #666; font-size: 20px; word-break: break-all; } #single-collection-top > h1 a, #single-collection-top.jobview-top h1 a { color: #666; } #single-collection-top > h1 strong, #single-collection-top.jobview-top h1 strong { font-weight: 700; } #single-collection-top > time, #single-collection-top.jobview-top > time { height: auto; min-height: 0; line-height: normal; margin: 0; font-size: 12px; } #single-collection-top .cta-main-container { height: 40px; top: 50%; right: 20px; bottom: 0; transform: translateY(-50%); } #single-collection-top .cta-main-container > li > a, #single-collection-top .cta-main-container li.collection-delete a.action-btn { height: 40px !important; line-height: 40px !important; margin-right: 10px !important; color: #fff !important; } #single-collection-top .cta-main-container > li > a > .fa { line-height: 40px; vertical-align: baseline; font-size: 14px; } #single-collection-top .cta-main-container > li:last-of-type > a { margin-right: 0 !important; } #single-collection-top .cta-main-container > li > a.cta-dropdown-trigger { width: auto; margin: 0; padding: 0 5px; } #single-collection-top .cta-main-container li.show ul.cta-dropdown { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #single-collection-top .cta-main-container a.cta-main.cta-dropdown-trigger .fa { margin-left: 5px; } .cta-main-container ul.cta-dropdown li .switch-holder.active { background-color: #1781E3; } .cta-main-container ul.cta-dropdown li .switch-holder.active .switch .fa { position: absolute; top: 0; left: 0; width: 28px; height: 22px; line-height: 22px; color: #1781E3; } /* Collections sidebar */ #collection-detail { position: static; float: left; margin: 20px 0 0 0; padding: 0; box-sizing: border-box; } #collection-detail h2 { margin: 10px 0; } #collection-detail .description { margin: 0; border-bottom: 0; } #collection-detail .description textarea { width: 260px; margin-left: 0; background: #fff; border: 1px dotted rgba(0, 0, 0, 0.1); } #collection-detail .description textarea:focus { background: #fff; border-color: #1781E3; } /* Collection content */ #collection-media { margin: 0 0 0 300px; } #collection-media .media-tools { height: 35px; padding: 20px 0; } #collection-media .media-tools > .actions-bar { margin-right: 20px; } /*======================= STYLEGUIDE PAGE / GUIDELINES PAGE =======================*/ .filters-holder.styleguide #styleguide-save { margin: 15px 0 0 0; color: #333 !important; } .filters-holder.styleguide .filters .filter-level-container li a { padding: 0 20px 0 10px; line-height: 40px; } .filters-holder.styleguide .filters .filter-level-container li a label { height: 40px; max-height: 40px; line-height: 40px; } .filters-holder.styleguide .filters .filter-level-container li a.selected { background-color: #f3f3f3; color: #1781E3; } .filters-holder.styleguide .filters .filter-level-container li a.selected span.searchCount { display: none; } .filters-holder.styleguide .filters .filter-level-container li.sg-sub a:after { margin: 0; transform: translateY(-50%); } .filters-holder.styleguide .filters .filter-level-container li .image-container { height: 40px; } .filters-holder.styleguide .filters .filter-level-container li .image-container .fa { line-height: 40px; } .filters-holder.styleguide .filter-level.sub-category { border-radius: 0 0 0 0; box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2); } .filters-holder #styleguide-save.disabled { background-color: #CFD5D9; } #styleguide-container { max-width: none; padding: 210px 20px 50px 20px; } /* Styleguide siebar */ #styleguide-sidebar { width: 280px; padding: 0 0 50px 0; background: transparent; border: none; border-radius: 0; box-shadow: none; box-sizing: border-box; } #styleguide-sidebar-content { margin: 50px 0 0 0; } #styleguide-sidebar-content > div { margin: 60px 0 0 0 !important; } #styleguide-sidebar a.edit-sidebar { margin: 0 auto 15px auto; } #styleguide-sidebar .arrow-styleguide { right: 30px; } #styleguide-sidebar a.action-btn.edit-nav .fa { vertical-align: middle; } /* Styleguide sidebar chapter */ #styleguide-sidebar ul li.chapter { margin-bottom: 20px; padding: 20px 0; border: 1px solid #DCE3E7; border-radius: 0; background-color: #fff; } #styleguide-sidebar ul li.chapter:first-child { border-top: 1px solid #DCE3E7; } #styleguide-sidebar ul li.chapter > .title { padding: 0 20px; color: #CFD5D9; border: none; border-radius: 0; background: #fff; } #styleguide-sidebar ul li.chapter > .title:hover p { color: #1781E3; } #styleguide-sidebar ul li.chapter > .title .fa { display: none; } #styleguide-sidebar ul li.chapter.opened > .title { margin-bottom: 15px; } #styleguide-sidebar ul li.chapter > .title p { max-width: 210px; font-weight: 700; font-size: 16px; color: #666; line-height: 22px; outline: none; } #styleguide-sidebar ul li.chapter > .title p i.fa { line-height: 22px; } #styleguide-sidebar ul li.chapter.opened > .title p { color: #333; } #styleguide-sidebar ul li.chapter.opened > .title p i.fa { display: none; } /* Styleguide sidebar pages */ #styleguide-sidebar ul.pages li.page:hover .fa { color: #1781E3 !important; } #styleguide-sidebar ul.pages li.page span.page { max-width: 210px; margin: 0 20px; padding: 10px 20px 10px 0; font-size: 14px; color: #666; box-shadow: inset 0 -1px 0 0 #F5F5F5; overflow: hidden; word-break: break-word; transition: all 200ms ease; } #styleguide-sidebar ul.pages li.page span.page .fa { position: absolute; margin: 0; top: 50%; transform: translateY(-50%); color: #666; transition: all 200ms ease; } #styleguide-sidebar ul.pages li.page span.page:hover .fa { right: 28px; } #styleguide-sidebar ul.pages li.page.active span.page { margin: 0 20px; padding: 10px 20px 10px 0; color: #333; background-color: transparent; font-weight: 700; } #styleguide-sidebar ul.pages li.page.active span.page .fa { color: #333; } #styleguide-sidebar ul li.opened > ul li.active > span.page { font-weight: 400; } #styleguide-sidebar ul li.opened > ul li:hover > span.page { background-color: #fff; color: #1781E3; } #styleguide-sidebar ul li.chapter.opened > ul li:hover > span.page span, #styleguide-sidebar ul li.chapter.opened > ul li:hover > span.page i { color: #1781E3; } #styleguide-sidebar ul li.chapter.active ul.pages, #styleguide-sidebar ul li.chapter.opened ul.pages { border: none; } #styleguide-sidebar ul li.add { text-align: center; } #styleguide-sidebar li.add a.action-btn.add-page { margin: 10px auto 0 auto; line-height: 30px; } #styleguide-sidebar li.editmode li.add a.action-btn.add-page { width: 50%; } #styleguide-sidebar li.add a.action-btn.add-page .fa { vertical-align: baseline; } #styleguide-sidebar ul li.chapter > .title p[contenteditable=true], #styleguide-sidebar ul.pages li.page span.page span[contenteditable=true] { border: 0; border-radius: 0; padding: 0 !important; outline: none !important; box-shadow: none; } #styleguide-sidebar ul li.chapter > .title p[contenteditable=true] { margin: 0 20px !important; } #styleguide-sidebar ul li.chapter [contentEditable=true]:hover { box-shadow: none; } #styleguide-sidebar #styleguide-addchapter a.action-btn { margin: 0; } /* Styleguide header */ #styleguide-page-header { margin-left: 300px; padding: 20px 20px 0 20px; border: 1px solid #DCE3E7; border-bottom: 0; border-radius: 0 0 0 0; } #styleguide-page-header h1.header-title, #pdf-page-header h1.header-title { font-weight: 400; font-size: 31px; color: #333; } #styleguide-page-header .tableofcontents-check input { margin-right: 5px; } #styleguide-page-header .styleguide-controls li a.group-btn { font-size: 16px; color: #666; border: none; border-radius: 0; background-color: #fff; box-shadow: none; } #styleguide-page-header .styleguide-controls li a.group-btn:hover { color: #1781E3 !important; background: transparent !important; } #styleguide-page-header .styleguide-controls li a.group-btn { background: transparent !important; } #styleguide-page-header .styleguide-controls li a.group-btn .fa { height: 30px; margin: 0; line-height: 30px; vertical-align: top !important; } #styleguide-page-header .styleguide-controls li a.group-btn .fa-globe { color: #1781E3; } #styleguide-page-header .styleguide-controls li a.group-btn:hover .fa-globe { color: #1574cc; } #styleguide-page-content { margin-left: 300px; padding: 20px; border: 1px solid #DCE3E7; border-top: 0; border-radius: 0 0 0 0; } #styleguide-content.editmode .group { border: 0; } .editmode .header, .editmode .group > .header { height: 30px; margin: 0; background: linear-gradient(to bottom, #fdfbfb 0, #ebedee 100%); border: 1px solid #DCE3E7; } /* Styleguide paragraph formats */ #styleguide-container .content-text .paragraph { border-radius: 0; } #styleguide-container #styleguide-content .content-text .paragraph, #styleguide-container #styleguide-content p, #styleguide-container #styleguide-content p.paragraph, #styleguide-container #styleguide-content .content-title h2, #styleguide-container #styleguide-content h2.title { color: #333 !important; font-family: "TheSansBasic", Helvetica, Arial, sans-serif !important; font-weight: 400; } #styleguide-container #styleguide-content .content-title h2, #styleguide-container #styleguide-content h2.title { font-size: 30px; line-height: 30px; } #styleguide-container #styleguide-content .content-text .paragraph.intro, #styleguide-container #styleguide-content h3.intro { font-size: 22px; line-height: 22px; } #styleguide-container #styleguide-content .content-text .paragraph, #styleguide-container #styleguide-content p.paragraph { font-size: 14px; line-height: 22px; } #styleguide-container #styleguide-content .content-text .caption, #styleguide-container #styleguide-content p.caption { font-size: 14px; line-height: 14px; } #styleguide-container #styleguide-content .content-text button { padding: 5px 10px; } .editmode #styleguide-page-footer { margin-left: 300px; } #styleguide-container ul.group-btns.big li.new-embed-toolbar a.group-btn { font-size: 14px; color: #fff; letter-spacing: 0; border: 1px solid #DCE3E7; border-radius: 5px; background-color: #1781E3; box-shadow: none; } .draft-notification, .notcurrent-notification { margin: 0 0 10px 0; padding: 5px 20px; color: #666; background: #DCE3E7; border: 0; border-radius: 0; } .draft-notification p a.action-btn, .notcurrent-notification p a.action-btn { margin-left: 10px; } .editmode .between:after { content: "\f067"; font-family: FontAwesome; font-size: 14px; line-height: 30px; } #styleguide-version-history li { min-height: 35px; display: table; width: 100%; box-sizing: border-box; transition: all 200ms ease; } #styleguide-version-history li a { color: #666; margin: 0; display: table-cell; vertical-align: middle; float: none; width: 300px; transition: all 200ms ease; } #styleguide-version-history li a:hover { color: #1781E3 !important; } #styleguide-version-history li:not(.active):hover a { color: #1781E3 !important; } #styleguide-version-history li i.fa-angle-right { margin: 0; font-size: 22px; display: table-cell !important; vertical-align: middle; float: none; width: 20px; } #styleguide-version-history li .page-info { position: static; display: table-cell; vertical-align: middle; float: none; top: 0; width: 160px; } #styleguide-version-history li .page-info p { margin: 0; } #styleguide-version-history li .status { position: static; display: table-cell; vertical-align: middle; float: none; margin: 0; text-align: center; } #styleguide-version-history li .status.head { background: #1781E3; color: #fff; border: 0; border-radius: 5px; } #styleguide-version-history li div { position: static; display: table-cell; vertical-align: middle; float: none; } #styleguide-version-history li div.delete { visibility: visible; text-align: center; float: none; margin: 0; width: 30px; } #styleguide-version-history li div.delete .fa { color: #c00; margin-top: 0; vertical-align: middle; position: relative; z-index: 2; transition: all 200ms ease; } #styleguide-version-history li div.delete:before { content: ""; width: 28px; height: 28px; position: absolute; background: transparent; top: 50%; transform: translate3d(0, -50%, 0); right: 11px; border-radius: 3px; z-index: 1; transition: all 200ms ease; } #styleguide-version-history li div.delete:hover .fa { color: #fff; } #styleguide-version-history li div.delete:hover:before { background: #c00; } #styleguide-version-history li.active a { color: #333; font-weight: 700; } /* Styleguide featured collection / Styleguide content embed */ .bynder-widget-media-list { border: 1px solid #DCE3E7; } #styleguide-page-content .content-embed .embed { margin: 0; } #styleguide-page-content .bynder-widget-media-list .bynder-widget-header { background: #fff; border-bottom: 0; box-shadow: none; } #styleguide-page-content .bynder-widget-media-list .bynder-widget-header a.bynder-widget-link { color: #666; } #styleguide-page-content .bynder-widget-header a.bynder-widget-btn { box-shadow: none; text-shadow: none; background-image: none; } #styleguide-page-content .bynder-widget-header a.bynder-widget-btn .icon-download-white { width: 10px; margin: 0 6px 0 0; background: none; text-align: left; font-size: 14px; } #styleguide-page-content .bynder-widget-header a.bynder-widget-btn .icon-download-white:before { content: "\f019"; position: absolute; font-family: "FontAwesome"; color: #fff; } #styleguide-page-content .bynder-widget-content { height: auto !important; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li { width: auto; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li:hover a.bynder-widget-media-link { padding: 10px; border: 1px solid #1781E3; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li a.bynder-widget-media-link { width: 189px; margin: 0 10px 10px 0; color: #666; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li a .bynder-widget-mediaholder { width: 189px; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li a.bynder-widget-btn { opacity: 0; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li:hover a.bynder-widget-btn { opacity: 1; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li a.bynder-widget-btn, #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li:hover a.bynder-widget-btn { width: 170px; top: 93px; left: 10px; right: 10px; margin: 0; color: #fff; background: #1781E3; border: 0; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li a.bynder-widget-btn:hover, #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li:hover a.bynder-widget-btn:hover { color: #fff !important; } #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li a.bynder-widget-btn.active, #styleguide-page-content .bynder-widget-content ul.bynder-widget-media-items li:hover a.bynder-widget-btn.active { width: 170px !important; } a.bynder-widget-btn { text-shadow: none; } .bynder-widget .icon-download-white { height: 28px; line-height: 28px; margin: 0; background: transparent; } .bynder-widget .icon-download-white:before { content: "\f019"; font-family: "FontAwesome"; position: absolute; } /* Styleguide asset detail */ #bynder-widget-lightbox > .bynder-widget-figure > .bynder-widget-table-wrapper > .bynder-widget-overlay-detail ul li a.bynder-widget-btn { background: #1781E3; color: #fff; border: 0; box-shadow: none; } #bynder-widget-lightbox > .bynder-widget-figure > .bynder-widget-table-wrapper > .bynder-widget-overlay-detail ul li a.bynder-widget-btn:hover { background: #1574cc; color: #fff !important; } #bynder-widget-lightbox > .bynder-widget-figure > .bynder-widget-table-wrapper > .bynder-widget-overlay-detail ul li ul#fileList li i { margin-top: 0; } /*======================= STYLEGUIDE CATEGORIES PAGE / STYLEGUIDE OVERVIEW PAGE =======================*/ body[data-module=styleguide] header .tool-bar > .filters-holder > ul.filters > li.filter > a { border-right: 0; border-left: 0; } body[data-module=styleguide] header .tool-bar > .filters-holder > ul.filters > li.filter > a:before { display: none !important; } body[data-module=styleguide] header .tool-bar > .filters-holder > ul.filters > li.filter > a:after { display: none !important; } .guidelines-landing * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-container.guidelines { width: 100%; max-width: 1200px; padding: 210px 20px 60px 20px; } .content-container.guidelines .guideline-intro { margin: 0; } .content-container.guidelines .guideline-intro h1 { margin: 0 0 20px 0; padding: 0 20px 0 0; color: #333; } .content-container.guidelines .guideline-intro p { margin: 0 0 20px 0; padding: 0 20px 0 0; } .content-container.guidelines .guideline-blocks { display: flex; flex-wrap: wrap; margin-left: -20px; } .content-container.guidelines .guideline-block-holder { float: left; width: 220px; height: 220px; margin: 0 20px 20px 0; border: 0; border-radius: 0; box-sizing: border-box; } /* General guideline tiles styling */ .content-container.guidelines .guideline-blocks .guideline-block { display: flex; position: relative; margin: 0; padding: 0; width: 100%; height: auto; min-height: 240px; overflow: inherit; border: 1px solid #DCE3E7; transition: all 200ms ease; flex-grow: 1; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; -webkit-flex-direction: column; flex-direction: column; } .content-container.guidelines .guideline-blocks .guideline-block img { position: relative; object-fit: cover; margin: 0 auto; width: 100%; height: 240px; background: #fff; order: 1; } .content-container.guidelines .guideline-blocks .guideline-block h3 { position: relative; display: block; margin: 0; padding: 12px 20px; width: 100%; min-height: 50px; background: #fff; font-size: 18px; text-align: center; box-sizing: border-box; border-top: 1px solid #DCE3E7; transition: all 200ms ease; z-index: 31; overflow: hidden; color: #1781E3; order: 2; } .content-container.guidelines .guideline-blocks .guideline-block h3 .fa { position: absolute; margin-top: 3px; margin-left: 4px; font-size: 18px; transition: transform 200ms ease; } .content-container.guidelines .guideline-blocks .guideline-block h3 .fa.fa-chevron-right:before { content: "\f105"; } .content-container.guidelines .guideline-blocks .guideline-block h3 .guidelines-subcategories { width: 100%; float: left; text-align: center; } .content-container.guidelines .guideline-blocks .guideline-block:hover h3 .fa { transform: translateX(2px); } .content-container.guidelines .guideline-blocks .guideline-block p { position: relative; top: auto; margin: 0; padding: 10px 20px; width: 100%; color: #666; text-align: center; border-top: 1px solid #DCE3E7; background: #fff; transition: all 200ms ease; overflow: hidden; order: 3; } .content-container.guidelines .guideline-blocks .guideline-block p:empty, .content-container.guidelines .guideline-blocks .guideline-block h3:empty { display: none; } .content-container.guidelines .guideline-blocks .guideline-block:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 240px; background: rgba(9, 139, 199, 0); transition: all 200ms ease; z-index: 30; } .content-container.guidelines .guideline-blocks .guideline-block:hover { border: 1px solid #1781E3; box-shadow: 0 0 0 1px rgba(23, 129, 227, 0.95); } .content-container.guidelines .guideline-blocks .guideline-block:hover:before { background: rgba(0, 0, 0, 0.1); } /* Styleguide-subcategories disabled */ .content-container.guidelines .guideline-blocks > .guideline-block { float: left; margin: 0 0 20px 20px; padding: 0; max-width: calc(33% - 20px); background: transparent; transition: all 200ms ease; flex-grow: 1; } /* Styleguide-subcategories enabled */ .content-container.guidelines .guideline-blocks .guideline-block-holder { float: left; margin: 0 0 20px 20px; padding: 0; width: calc(33% - 20px); max-width: calc(33% - 20px); height: auto; border: 0; background: transparent; transition: all 200ms ease; flex-grow: 1; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block { margin: 0 0 20px 20px; width: calc(33.3333333333% - 20px); max-width: calc(33% - 20px); background: #fff; transition: all 200ms ease; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block h3 .fa { margin-left: 4px; font-size: 16px; vertical-align: middle; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block h3 .fa.fa-chevron-right:before { content: "\f105"; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block p { position: relative; top: auto; margin: 0; padding: 13px 20px; width: 100%; color: #666; text-align: center; font-weight: 400; border-top: 1px solid #DCE3E7; background: #fff; transition: all 200ms ease; order: 3; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block p:empty, .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block h3:empty { display: none; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 240px; background: rgba(9, 139, 199, 0); transition: all 200ms ease; z-index: 30; } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block:hover { border: 1px solid #1781E3; box-shadow: 0 0 0 1px rgba(23, 129, 227, 0.95); } .content-container.guidelines .guideline-blocks .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block:hover:before { background: rgba(0, 0, 0, 0.1); } .content-container.guidelines .guideline-blocks .category-info { margin: 0 0 20px 0; padding: 20px 0 0 0; } .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block h2 { margin: 0 20px 20px 20px; } .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block p { margin: 0 20px 20px 20px; } .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block .guideline-subcategories-holder { display: flex; flex-wrap: wrap; } .guidelines-main .content-container.guidelines .category-info .guideline-subcategories-block .guideline-subcategories-arrow { top: -50px; } /* IE fixes styleguide overview page */ html.ie11 .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block { border: 1px solid #DCE3E7; background: #fff; } html.ie11 .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block:hover { background: #1781E3; } html.ie11 .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block h3, html.ie11 .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block p { border: 0; border-top: 1px solid #DCE3E7; } html.ie11 .content-container.guidelines .guideline-blocks .category-info .guideline-subcategories-block .guideline-subcategories-holder a.guideline-block img { width: auto; border: 0; } html.ie11 .content-container.guidelines .guideline-blocks .guideline-block img { width: auto; } /*======================= WORKFLOW PAGE =======================*/ body[data-module=workflow] header .tool-bar { width: auto; max-height: 40px; line-height: 40px; background-color: #fff; } body[data-module=workflow] .single-collection .popover.popover-wide.top { left: 15px !important; } body[data-module=workflow] .single-collection .popover.popover-wide.top .arrow { left: 25%; margin-left: 0; } .content-container.brands.workflow.sub-navigation { width: 1180px; margin-top: 190px; padding-top: 0; } .modal-content .stage-management .stage-item .responsible { background-color: #1781E3; } .new-job .stage-management .stage-item .avatar { margin: 0; } .modal-content form.no-auto-submit .empty-value { color: #fff; } .wf-asset-activity.wf-stage-activity ul.auto-complete { right: 0; } .wf-asset-activity.wf-stage-activity .wf-message-options.left { margin-top: 10px; } .wf-asset-activity.wf-stage-activity .wf-message-options.left .private-group-select { height: 30px; line-height: 30px; } .wf-asset-activity.wf-stage-activity .wf-message-options.left .private-group-select .select2-container-multi .select2-choices .select2-search-field { padding: 0; } .wf-asset-activity.wf-stage-activity .wf-message-options.left .private-group-select .select2-container-multi .select2-choices .select2-search-field input { height: 30px; padding: 0 4px; } .wf-asset-activity.wf-stage-activity .wf-message-options.left .private-group-select .select2-container.select2-container-multi.multiuser-input { min-width: 124px; } .wf-message-options .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { background-image: none !important; } .wf-message-options .select2-container.select2-container-multi .select2-choices, .wf-message-options .select2-container-multi.select2-container-active .select2-choices, .wf-message-options .select2-container-active .select2-choice, .wf-message-options .select2-container-active .select2-choices { border: 1px solid #DCE3E7 !important; } .wf-asset-activity.wf-stage-activity .select2-container-multi .select2-choices .select2-search-field { padding-left: 5px; } span.wf-new-stage-progress.stage-progress-progress { background-color: #1781E3; } /* Workflow overview navigation section */ .content-container.workflow .module-navigation { position: absolute; left: 50%; margin: 0 10px 0 10px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: translateX(-50%); z-index: 89; } .content-container.workflow .module-navigation .module-nav { padding: 0; background-color: #fff; border: 0; border-radius: 0; overflow: hidden; } .content-container.workflow .module-navigation ul.module-nav li { height: 30px; line-height: 30px; padding: 0 15px; border: 1px solid #DCE3E7; border-radius: 0; background: rgba(255, 255, 255, 0.95); box-shadow: none; box-sizing: border-box; } .content-container.workflow .module-navigation ul.module-nav li:first-of-type { border-radius: 0 0 0 0; } .content-container.workflow .module-navigation ul.module-nav li:last-of-type { border-radius: 0 0 0 0; } .content-container.workflow .module-navigation ul.module-nav li:only-of-type { border-radius: 0; } .content-container.workflow .module-navigation ul.module-nav li a { padding: 0; font-size: 12px; color: #666; } ul.module-nav > li.active:after { background-color: #1781E3; } .workflow-header .list-buttons, .workflow-header .list-buttons a.action-btn { height: 30px; line-height: 30px; } .workflow-jobs-header .workflow-jobs-filter.filter-dropdown { margin-top: 21px; } .workflow-jobs-header .workflow-jobs-filter .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { background: none !important; color: #666; } /* Workflow view type section */ .workflow-header .media-results { margin: 0; } .workflow-header .viewtoggle-container .change-view-type { height: 30px; line-height: 30px; padding: 0 10px; } .workflow-header .viewtoggle-container .change-view-type.view-selected { color: #333; background-color: #f5f7f9; } .workflow-header .viewtoggle-container .change-view-type:first-child { border-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .workflow-header .viewtoggle-container .change-view-type:last-child { border-radius: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .content-container.workflow.dashboard.brands.sub-navigation .media-results, .content-container.workflow.dashboard.brands.sub-navigation .media-results span.selected-results, .content-container.workflow.dashboard.brands.sub-navigation .media-results span.results { top: 0; height: 30px; line-height: 30px; } .content-container.workflow.dashboard.brands.sub-navigation .media-results span.results { border: 1px solid #DCE3E7; border-left: 0; box-sizing: border-box; box-shadow: none; } .content-container.workflow .module-navigation ul.module-nav > li.active:after { display: none; } .workflow-header { width: 1180px; height: auto; margin: 0 auto; padding: 0 0 20px 0; } .workflow-header.header-overview > h1, .workflow-header h1 { max-width: 520px; height: 30px; line-height: 30px; font-weight: 400; font-size: 24px; color: #666; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; } .workflow-campaigns-header { padding: 10px 0 0 0; background: transparent; border: 0; border-radius: 0; } .workflow-campaigns-header .overview-filter label { color: #666; } .workflow-header .media-results.viewtoggle-container span { color: #666; border: 1px solid #DCE3E7; border-radius: 0; background-color: #fff; box-shadow: none; } .media-results span.results { margin: 0; background-color: #fff; } /* Workflow content */ .workflow-jobs-container { margin: 0; border-radius: 0; } .content-container.dashboard.workflow { max-width: none; position: relative; padding-top: 50px; } .content-container.dashboard.workflow.brands.sub-navigation { padding-top: 0; } .content-container.dashboard.workflow.sub-navigation .wf-dashboard-holder { margin-top: 0; } a.campaign-action, .campaign-action, .campaign-actions button.campaign-action { color: #666; box-shadow: none; transition: all 200ms ease; } a.campaign-action .fa, .campaign-action .fa, .campaign-actions button.campaign-action .fa { line-height: 20px; } a.campaign-action:hover, .campaign-action:hover, .campaign-actions button.campaign-action:hover { color: #fff !important; background-color: #1781E3; border-color: transparent; } .campaign-overview .grid-row-holder .brand-holder .campaign-actions { right: 30px; } .campaign-overview .grid-row-holder .brand-holder:hover .campaign-actions { opacity: 1; } .campaign-overview .grid-row-holder .brand-holder .campaign-actions a:hover .fa-pencil { color: #fff; } .brand-holder .campaign-info { transition: all 200ms ease; } .brand-holder:hover .campaign-info { margin-top: 0; padding-top: 5px; } .campaign-info strong { font-weight: 700; } .campaign-overview .grid-row-holder .brand-holder.show-all a { border: 1px solid #DCE3E7; border-radius: 0; } .campaign-overview .grid-row-holder .brand-holder.show-all a .campaign-img { background-color: #1781E3; } .campaign-overview .grid-row-holder .brand-holder.show-all a .campaign-img .fa { font-size: 0; } .campaign-img > i.fa-picture-o { position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); } .campaign-overview .grid-row-holder .brand-holder.show-all a .campaign-img .fa:before { content: "\f01c"; position: absolute; top: 50%; left: 50%; font-size: 40px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); transform: translate(-50%, -50%); } .campaign-overview .grid-row-holder .brand-holder.show-all a .campaign-data { height: 100px; color: #1781E3; border: none; background-color: #fff; } .campaign-overview > .grid-row-holder { width: 1200px; } .workflow .brand-holder { width: 25%; margin: 0; padding: 0 20px 20px 0; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; } .workflow .brand-holder .campaign-img { border-bottom: 1px solid #DCE3E7; border-radius: 0; } .workflow .brand-holder .hidden { display: none; } .campaign-overview .grid-row-holder .brand-holder > a { height: 250px; width: 100%; background-color: #fff; border: 1px solid #DCE3E7; box-shadow: none; } .campaign-overview .grid-row-holder .brand-holder a .campaign-img { height: 145px; background-position: top center; background-repeat: no-repeat; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data { height: 100px; padding: 20px 10px; overflow: visible; position: static; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-title p { max-width: 100%; max-height: 20px; overflow: hidden; font-size: 14px; font-weight: 600; color: #666; white-space: nowrap; text-overflow: ellipsis; } .campaign-overview .grid-row-holder .brand-holder.show-all a .campaign-data .campaign-title i, .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-title .span-link { color: #1781E3; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-title i { position: absolute; bottom: 20px; max-width: calc(100% - 100px); overflow: hidden; font-size: 10px; color: #666; white-space: nowrap; text-overflow: ellipsis; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-badges { position: absolute; top: auto; right: 10px; bottom: 20px; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-badges .fa-refresh { display: none; } .campaign-overview .grid-row-holder .brand-holder:hover a .campaign-data .campaign-badges { bottom: 43px; } .campaign-overview .grid-row-holder .brand-holder:hover a .campaign-data .campaign-title i { bottom: 40px; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-badges ul li span { min-width: 20px; height: auto; line-height: normal; padding: 4px; font-weight: 400; font-size: 9px; color: #fff; text-align: center; border-radius: 1px; } .workflow .brand-holder .campaign-badges > ul > li.campaign-progress > span { background-color: #1781E3; } .workflow .brand-holder .campaign-badges > ul > li.campaign-changes > span { background-color: #e67e22; } .workflow .brand-holder .campaign-badges > ul > li.campaign-complete > span { background-color: #2ecc71; } .workflow-header .media-results span.selected-results { background-color: #1781E3; border-radius: 3px 0 0 3px; box-shadow: none; } .workflow .brand-holder .progress { background: #fff; box-shadow: none; } .campaign-overview .grid-row-holder .brand-holder a .campaign-data .campaign-info .campaign-info-block { font-size: 9px; color: #1781E3; max-width: 140px; max-height: 25px; overflow: hidden; text-overflow: ellipsis; } .brand-holder .progress-bar { background-color: #1781E3; border-radius: 0; } .campaign-overview .grid-row-holder .brand-holder.show-closed .show-closed-container { width: 280px; height: 250px; border-radius: 2px; } .content-container.workflow.sub-navigation .campaign-collection-list .listview-collection { margin: 0; width: 100% !important; border: 0; } .campaign-collection-list { margin: 0; } body[data-module=workflow] .media-holder.portrait .thumbnail .image-holder { width: auto; } .mentions-input-box .mentions > div > strong { margin: -1px 0 -1px -4px; padding: 0 6px; } .mentions-input-box .mentions-autocomplete-list, .mentions-input-box .mentions-autocomplete-list li { color: #666; } .empty-value { color: #DCE3E7; } .campaign-overview .grid-row-holder .brand-holder.wf-no-campaigns-found .campaign-block { width: 280px; height: 250px; background-color: transparent; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } .campaign-overview .grid-row-holder .brand-holder.wf-no-campaigns-found .campaign-block .image-holder i { margin: 20px; color: #DCE3E7; } /* FTE Overview */ .availability-campaign-overview .content-container.single-collection.campaign-fte-overview { padding-top: 170px; } .availability-campaign-overview .content-container.single-collection.campaign-fte-overview .fte-container { padding: 0; } .availability-campaign-overview .campaign-fte-overview .fte-viewer { margin-top: 0; } .availability-campaign-overview .content-container.single-collection.campaign-fte-overview #single-collection-top { padding-top: 0; } .availability-campaign-overview .content-container.full-width.campaign-fte-overview { padding-top: 0; } .availability-campaign-overview .fte-viewer .table-right { margin-top: -1px; } .availability-campaign-overview .fte-viewer table.campaign-list.list-fte td { height: 44px; } .content-container.campaign-fte-overview table.campaign-list.list-fte td.fte-filled { background-color: #1781E3; } /* Calendar view */ .campaign-calendar #single-collection-top { position: fixed; padding-top: 170px; background-color: rgba(245, 245, 245, 0.95); border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); transition: all 200ms ease; } .campaign-calendar #single-collection-top.small { padding-top: 120px; } .campaign-calendar #single-collection-top h1 { margin: 0 20px; } /* Workflow detail */ .jobview-top#single-collection-top { padding: 190px 20px 20px 20px; } .jobview-top#single-collection-top .cta-main-container { top: 190px; bottom: auto; transform: none; } .jobview-top#single-collection-top .cta-main-container li.job-actions-dropdown.dropdown a.action-btn { margin-right: 0 !important; } .jobview-top#single-collection-top .cta-main-container li.job-actions-dropdown.dropdown a.action-btn .fa-caret-down { transition: all 200ms ease; } .jobview-top#single-collection-top .cta-main-container li.job-actions-dropdown.dropdown.open a.action-btn .fa-caret-down { transform: rotate(180deg); } .job-actions-dropdown a i.fa-cog, .job-actions-dropdown a i.fa-caret-down { top: 0; vertical-align: middle; } .job-detail#collection-detail { margin-left: 20px; } .job-detail#collection-media { margin-top: 20px; } .stage-number i { line-height: 34px; } .progress-done .stage-number, .stage-status.stage-approved { background-color: #5cb85c; } a.stage-item.progress-done { color: #5cb85c; } .progress-done.current span.stage-number { background: #fff; color: #5cb85c; box-shadow: 0 0 0 3px #5cb85c; } .job-detail .stage .stage-nav.stage-actions { height: 30px; } a.wf-stage-add.modal-link:hover { background: #1781E3; color: #fff !important; } .job-detail#collection-detail ul li a { color: #666; } /* Workflow detail header */ .job-detail .stage-responsible .stage-settings .fa-caret-down { transition: all 200ms ease; } .job-detail .stage-responsible .stage-settings.open .fa-caret-down { transform: rotate(180deg); } .responsible-avatar { position: relative; overflow: hidden; border-radius: 100px; } .responsible-avatar img { overflow: hidden; border-radius: 100px; position: absolute; top: 50%; left: 50%; width: auto; max-width: 120%; max-height: 120%; transform: translate(-50%, -50%); } /* Workflow detail side */ .job-detail#collection-detail { top: 0; left: 0; } .job-detail .job-attachment:hover .name { width: auto; } .job-detail#collection-detail .additional-info .job-link { color: #666; } /* Workflow timeline / Workflow stages*/ .stage-timeline, .stage-timeline > ul, .stage-timeline > ul > li { height: 100px; } .stage-timeline .timeline-button:hover { color: #fff !important; } a.stage-item:hover span.stage-number { box-shadow: 0 0 0 3px #DCE3E7; } .progress-current.current .stage-number { background-color: #1781E3; } a.stage-item.current.progress-current:hover span.stage-number { box-shadow: 0 0 0 3px #1781E3; } a.stage-item span.stage-number { background: #999; } a.stage-item:hover span.stage-number { box-shadow: 0 0 0 3px #8c8c8c; } /* Approved stage */ a.stage-item.progress-done.current { color: #5cb85c; } a.stage-item.progress-done span.stage-number { background-color: #5cb85c; } a.stage-item.progress-done:hover span.stage-number { box-shadow: 0 0 0 3px #4cae4c; } /* Rejected stage */ a.stage-item.progress-rejected.current { color: #c00; } a.stage-item.progress-rejected.current span.stage-number { background-color: #c00; } a.stage-item.progress-rejected.current:hover span.stage-number { box-shadow: 0 0 0 3px #b30000; } .stage-status.stage-needschanges { background-color: #c00; } /* Workflow form */ .wf-stage-order-form-container { padding: 20px; } .wf-stage-order-form-container { margin-right: -20px; margin-left: -20px; } .wf-stage-task-list .checlbox label input[type=checkbox] { margin-top: 1px; } .pod-batch button, .wf-stage-order-form-container form button { font-size: 14px; } .pod-batch button:focus, .pod-batch button:hover, .pod-batch button:active, .wf-stage-order-form-container form button:focus, .wf-stage-order-form-container form button:hover, .wf-stage-order-form-container form button:active { font-size: 14px; } /* Workflow media-tools */ .job-detail#collection-media .media-tools { z-index: auto; } .wf-stage-content-holder .media-tools ul.media-tools-left li.media-sort > a.sort:only-of-type { border-radius: 0 !important; } /* Workflow assets / workflow tiles */ .job-detail .stage { margin-right: 20px; } .job-detail .stage-body { padding: 20px; } .wf-stage-content-holder .wf-assets-container { height: auto; margin: 20px 0 0 0; } .wf-stage-content-holder .wf-assets-container .media-holder .thumbnail.add { top: 0; padding: 10px; } .wf-stage-content-holder .wf-assets-container .media-holder .thumbnail.add:hover { padding: 10px; } .wf-assets-container .media-holder.asset-placeholder { margin: 0; } .wf-assets-container .media-holder.asset-placeholder .wf-stage-asset-icon { height: 180px; overflow: hidden; } .wf-assets-container .media-holder.asset-placeholder i { margin-top: 0; color: #666; } .wf-assets-container .media-holder .add-asset-buttons { top: 170px; } .wf-assets-container .media-holder.asset-placeholder { height: 205px; vertical-align: top; } .wf-assets-container .asset-template.media-holder .thumbnail { height: 205px; bottom: auto; } .wf-assets-container .asset-template.media-holder .thumbnail:hover { border: 1px solid #DCE3E7; } .media-holder .thumbnail:hover .wf-stage-asset-remove { top: 10px; right: 10px; } .wf-assets-container .media-holder, .wf-assets-container .media-holder.asset.processing, .wf-assets-container .media-holder.asset.square, .wf-assets-container .media-holder.asset-upload, .wf-stage-content-holder.stage-download .media-holder.asset-download, .stage-download .asset-template.media-holder { display: block; float: left; width: 220px; height: auto !important; min-height: 205px !important; vertical-align: top; margin: 0 20px 20px 0 !important; } .wf-assets-container .media-holder .thumbnail-downloads, .wf-assets-container .media-holder.asset.processing .thumbnail-downloads, .wf-assets-container .media-holder.asset.square .thumbnail-downloads, .wf-assets-container .media-holder.asset-upload .thumbnail-downloads, .wf-stage-content-holder.stage-download .media-holder.asset-download .thumbnail-downloads, .stage-download .asset-template.media-holder .thumbnail-downloads { margin-right: -10px; margin-bottom: -10px; margin-left: -10px; background: transparent; } .media-holder.add-asset.templates { margin-top: 0; margin-right: 23px; } .wf-assets-container .media-holder .thumbnail { position: relative; width: 220px; min-height: 205px; padding: 10px; border: 1px solid #DCE3E7; box-shadow: none; } .wf-assets-container .media-holder .thumbnail:hover { padding: 10px; border: 1px solid #DCE3E7; box-shadow: 0 0 0 1px #1781e3; } .wf-assets-container .media-holder .thumbnail.add { height: 205px; border: 2px dashed #d5d5d5; } .wf-assets-container .media-holder .thumbnail.add:hover { box-shadow: none; border-color: #1781E3; cursor: pointer !important; } .wf-assets-container .media-holder .thumbnail.add p { line-height: 12px; } .wf-assets-container .media-holder .thumbnail p.asset-name { max-width: 160px; } .wf-assets-container .media-holder .thumbnail p.asset-name:hover { max-width: 100%; max-height: 50px; word-break: break-all; white-space: normal; } .wf-assets-container .media-holder .thumbnail span.extension { height: 20px; line-height: 20px; margin: 0; } .media-holder.asset-template .thumbnail span.wf-stage-asset-edit:hover, .media-holder .thumbnail > span.edit-name-button:hover { border-color: #DCE3E7; background-color: #1781E3; } .wf-assets-container .media-holder .thumbnail .wf-stage-asset-approve, .wf-assets-container .media-holder .thumbnail:hover .wf-stage-asset-approve { top: 10px; left: 10px; border: 1px solid #DCE3E7; } .wf-assets-container .media-holder .thumbnail > span.edit-name-button:hover { color: #fff; cursor: pointer; } .media-holder .thumbnail.add .image-holder { height: 120px; } .wf-assets-container .media-holder.asset.processing, .wf-assets-container .media-holder.asset.square { margin-top: 0 !important; } .media-holder .thumbnail > span.edit-name-button, .media-holder .thumbnail > span.new-stage-asset-remove { border: 1px solid #DCE3E7; border-radius: 0; box-sizing: border-box; transition: all 200ms ease; } .media-holder .thumbnail > span.edit-name-button:hover, .media-holder .thumbnail > span.new-stage-asset-remove:hover { border: 1px solid transparent; } .media-holder.asset-template .thumbnail span.wf-stage-asset-remove:hover, .media-holder .thumbnail > span.new-stage-asset-remove:hover { background-color: #c00; } .media-holder .thumbnail > span.edit-name-button { margin-right: 20px; } .wf-assets-container ul.thumbnail-badges li.thumb-annotations, .wf-assets-container ul.thumbnail-badges li.thumb-comments { color: #666; } .preset-attachments-upload.file-hover .job-attachments-dropbox, .job-attachments-upload.file-hover .job-attachments-dropbox, .job-attachments-dropbox:hover { border-color: #1781E3; } .wf-scroll-loader, .wf-assets-loader, .wf-activities-loader { display: none; background: transparent; border: 0; } .asset-edit-save { color: #fff; background-color: #1781E3; border-radius: 0; } .asset-edit-save:hover, .asset-edit-save:active { color: #fff; background-color: #1574cc; border-radius: 0; } /* Workflow assets portrait */ .wf-assets-container .media-holder.portrait { width: 220px; } .wf-assets-container .media-holder.portrait .thumbnail { width: 220px; height: 205px; top: 0; bottom: auto; left: 0; margin-left: 0; border: 1px solid #DCE3E7; box-shadow: none; } .wf-assets-container .media-holder.portrait .thumbnail:hover { border: 1px solid #DCE3E7; box-shadow: 0 0 0 1px #1781E3; } /* Workflow rejected / approved assets */ .wf-stage-content-holder .wf-assets-container .media-holder.rejected .thumbnail, .wf-stage-content-holder .wf-assets-container .media-holder.rejected .thumbnail:hover { border: 2px solid #c00; box-shadow: none; } .wf-stage-content-holder .wf-assets-container .media-holder.approved .thumbnail, .wf-stage-content-holder .wf-assets-container .media-holder.approved .thumbnail:hover { border: 2px solid #5cb85c; box-shadow: none; } /* Workflow asset detail */ .annotation-holder .save-annotation, .annotation-holder .edit-annotation, .annotation-holder .remove-annotation { padding: 2px 7px; } /* Workflow auto-complete dropdown */ .stage-body .wf-stage-content-holder .media-tools ul.media-tools-left { z-index: 80; } /* Workflow choose from asset bank tile */ .import-asset-button-container { top: 10px; right: 10px; left: 10px; z-index: 10; } .wf-stage-content-holder .wf-assets-container .media-holder.templates .thumbnail.add .image-holder { background: transparent; border: 0; } .wf-stage-content-holder .wf-assets-container .media-holder.templates .thumbnail.add .image-holder .fa-plus-circle { color: #1781E3; } .import-asset-button-container button#assetImportButton { max-width: 194px; min-height: 30px; line-height: 30px; margin: 40px 0 0 0; font-size: 12px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .wf-stage-content-holder .wf-assets-container .media-holder#assetAddContainer .thumbnail.add .image-holder { background: transparent; border: 0; cursor: pointer; } .wf-stage-content-holder .wf-assets-container .media-holder#assetAddContainer .thumbnail.add .image-holder:before { content: "\f0ee"; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); font-family: FontAwesome; font-size: 40px; color: #666; opacity: 1; transition: all 200ms ease; } .wf-stage-content-holder .wf-assets-container .media-holder#assetAddContainer .thumbnail.add .image-holder:hover:before { color: #1781E3; } .wf-stage-content-holder .wf-assets-container .media-holder#assetAddContainer .thumbnail.add .image-holder img { opacity: 0; margin-top: 30px; } .wf-stage-content-holder .wf-assets-container .media-holder#assetAddContainer .thumbnail.add .image-holder img { opacity: 0; margin-top: 30px; } .stage-btn.btn-link { height: 24px; line-height: 24px; padding: 0 5px; } .stage-btn.btn-link:hover { text-decoration: none; background-color: transparent !important; color: #1781E3 !important; } /* Workflow tasks */ .wf-stage-task-list .task .checkbox input[type=checkbox] { margin-top: 2px; } a.user-assign { color: #1781E3; border: 1px solid #DCE3E7; transition: all 200ms ease; } a.user-assign:hover { color: #fff !important; background: #1781E3; } a.user-assign.user-assigned { color: #fff !important; transition: all 200ms ease; } a.user-assign.user-assigned:hover { color: #fff !important; } .wf-stage-task-list li div.wf-stage-task-actions-container .wf-stage-task-actions a, .wf-stage-task-list li div.wf-stage-task-actions-container .wf-stage-task-actions span { color: #666; } .wf-stage-task-list li div.wf-stage-task-actions-container .wf-stage-task-actions a:hover, .wf-stage-task-list li div.wf-stage-task-actions-container .wf-stage-task-actions span:hover { color: #1781E3; } /* Workflow annotations */ .wf-wrapper.asset-view-wrapper .wf-asset-status { padding: 20px; } .wf-wrapper.asset-view-wrapper .wf-asset-status .container .row span.left { height: 40px; line-height: 40px; } .wf-wrapper.asset-view-wrapper .wf-asset-status .container .row .left { height: 40px; line-height: 40px; } .wf-wrapper.asset-view-wrapper .wf-asset-status .container .row button { margin: 0 0 0 10px; padding: 10px 20px; } /* Worflow review / notes */ .wf-wrapper.asset-view-wrapper { margin-top: 170px; } .wf-asset-notes ol > li { padding-right: 80px; } .wf-asset-notes ol > li span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } /* Workflow asset edit */ .wf-wrapper #media-view .wf-asset-name .editable h2 strong.editable-field { padding: 0 10px; } .wf-wrapper #media-view .wf-asset-name .editable h2 strong.editable-field:hover { padding: 0 10px; color: #1781E3; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons { right: -1px; border: 1px solid #DCE3E7; border-left: 0; border-radius: 0; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.save { background: #5cb85c; box-shadow: none; text-shadow: none; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.save:before { content: "\f00c"; position: absolute; top: 0; left: 0; width: 25px; height: 24px; line-height: 24px; font-family: FontAwesome; font-size: 14px; color: #fff; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.save:hover, .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.save:active, .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.save:focus { background: #4cae4c !important; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.exit { background: #c00; box-shadow: none; text-shadow: none; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.exit:before { content: "\f00d"; position: absolute; top: 0; left: 0; width: 25px; height: 24px; line-height: 24px; font-family: FontAwesome; font-size: 14px; color: #fff; } .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.exit:hover, .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.exit:active, .wf-wrapper #media-view .wf-asset-name .editable .edit-buttons .btn.exit:focus { background: #b30000 !important; } /* Workflow modals */ .wf-wrapper a:hover, .wf-wrapper a:focus { text-decoration: none; } .wf-wrapper .modal-header button.close, .wf-wrapper .modal-header button.close:hover, .wf-wrapper .modal-header button.close:active, .wf-wrapper .modal-header button.close:focus { height: 30px; line-height: 30px; text-shadow: none; opacity: 1 !important; padding: 0 10px; color: #CFD5D9 !important; background: transparent !important; -webkit-appearance: initial; transition: none; } .wf-wrapper .modal-header button.close:hover { color: #1781E3 !important; } #briefingroom-modal-container .modal-body .upload-btn > img { max-width: 78px; } /* Workflow Comments and activity */ .wf-asset-activity { padding: 0 20px 0 0; width: auto; } /* Template access management */ .template-container.assets-container ul.assets > li { transition: all 200ms ease; } .template-container ul.assets li:hover, .template-container ul.assets li.selected { border: 1px solid transparent; box-shadow: inset 0 0 0 2px rgba(23, 129, 227, 0.95); } .template-container .asset-info .template-button, .template-container .template-name { white-space: nowrap; } /* Workflow sidebar feature */ body .content-container.brands.workflow.sub-navigation.sidebar-feature { margin-top: 130px !important; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-navigation { height: calc(100% - 130px) !important; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-navigation:after { height: 130px !important; top: -130px !important; } /*======================= LOGIN PAGE =======================*/ #login header.base { background: transparent; } #login header > .admin-bar { background: transparent; } /* Login general */ #login ul.admin-options { background: transparent; } #login ul.admin-options > li > a { color: #fff; } #login .admin-right ul.badges li:hover > a, #login .admin-right ul.admin-options > li:hover > a { background-color: rgba(255, 255, 255, 0.2); } #login ul.admin-options > li > a i.fa { color: #fff; } #login header li .fa-globe { vertical-align: -3px; } #login header li a:hover .fa-globe { color: #1781E3; } #login header.base.small { top: 0; background: transparent; } #login .login-container { width: 360px; margin: 0 0 0 -180px; top: 150px; left: 50%; z-index: 80; } #login .login-container a.account-logo { width: 120px; height: 120px; margin: -60px 0 0 -60px; background-size: 100px auto !important; border: none; border-radius: 0; box-shadow: 0 5px 60px rgba(0, 0, 0, 0.1); transform: none; transition: none; z-index: 110; } #login .login-container .form-bottom button, #login .login-container a.action-btn.block { font-size: 16px; } #login .login-container .form-bottom button.login-btn { margin: 0 0 10px 0; padding: 0 15px; height: 40px; line-height: 40px; } #login .login-container .form { padding: 75px 40px 40px 40px; color: #666; border-radius: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: none; } .cbox_messagebox_info, .cbox_messagebox_error { background: #fff; color: #666; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); text-align: center; } #login .login-container .form .alt-login p { font-size: 14px; color: #666; } #login .login-container .form .alt-login p:first-of-type { margin-top: 0; } #login .login-container .form .alt-login button { font-size: 14px; color: #fff; letter-spacing: 0; } #login .login-container .form .alt-login button .fa-google { margin-right: 4px; } #login .login-container .form #regular-login input { width: 280px; height: 40px; color: #666; background: #fff; border: 1px solid #DEE2E4; border-radius: 0; box-sizing: border-box; } #login .login-container .form #regular-login .input-holder span i.fa { width: 40px; height: 40px; line-height: 40px; top: 0; color: #666; border: none; } #login .login-container .form #regular-login .input-holder span i.fa:after { position: absolute; top: 10px; left: 40px; width: 1px; height: 20px; background-color: #e6e6e6; content: ""; } #login .login-container .lost-password a { font-size: 14px; color: #666; opacity: 0.6; } #login .login-container .input-holder span i.fa { color: #666; } /* Login input fields */ #login .login-container .input-holder input { width: 217px; } #login .login-container .form #regular-login input:focus, #login #dashboard-dropbox-form input[type=text]:focus, #login #dashboard-dropbox-form input[type=email]:focus, #login #dashboard-dropbox-form textarea:focus { border: 1px solid #1781E3 !important; } /* Forgot password */ #login .captcha-holder > h1, #login .captcha-holder > p { margin: 0; } #login form .captcha-holder .captcha-image-holder { margin-bottom: 0; } /* Login dropbox */ #login .dashboard-dropbox { margin-bottom: 40px; background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 0; border-radius: 0; transition: none; } #login .dashboard-dropbox.open { background: #fff; } #login .dashboard-dropbox a.dropLink { color: #666; border-color: #666; border-radius: 0; } #login .dashboard-dropbox a.dropLink:hover { border-color: #1781E3; } #login .dashboard-dropbox .files ul li .loading { background: #1781E3; border-radius: 0; } #login .dashboard-dropbox .files ul li .loading.failed { background: #c00; } .dashboard-side .files ul li .loading[style="width: 100%;"] p, .dashboard-dropbox .files ul li .loading[style="width: 100%;"] p { color: #fff; } #login .login-container .dropbox-receiver label { color: #666; } #login .login-container .dropbox-receiver select { color: #666; background-color: #ccc; } #login .dropbox-input-holder .fa { margin-left: 10px; color: #cccccc; } #login .dropbox-input-holder .fa.icon-clear { right: 10px; } #login .dropbox-input-holder .fa.icon-clear:hover { color: #c00; } #login form .dropbox-input-holder .captcha-holder h1, #login form .dropbox-input-holder .captcha-holder p { color: #666; } #login form .captcha-holder input[name=captcha] { padding: 0; } #login #dashboard-dropbox-form input[type=text], #login #dashboard-dropbox-form input[type=email], #login #dashboard-dropbox-form textarea { width: 320px; padding: 0 30px; color: #666; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-sizing: border-box; } #login #dashboard-dropbox-form input[type=text], #login #dashboard-dropbox-form input[type=email] { height: 40px; line-height: 40px; } #login #dashboard-dropbox-form textarea { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; line-height: normal; word-break: break-all; } #login .dashboard-dropbox .send-form .help-inline { right: 320px; } #login .dashboard-dropbox .confirm h2 { color: #666; } #login .dashboard-dropbox .confirm .fa { color: #1781E3; } /* Register page */ #login .login-container .form.hide, #login .login-container .form.request-hide, #login .login-container .account-logo.hide { display: none; } #login .login-container .request-account { top: 0 !important; padding-top: 80px; } #account-request li a.action-btn.cancel-request { float: right; } #login .request-form input, #login .request-form textarea { width: 305px; } #login .request-form input.medium-input { width: 65%; } /* Login footer */ #login footer.login-footer { position: absolute; min-width: 360px; height: auto; bottom: 0; left: 50%; margin: 0 auto; padding: 0 20px; background: #fff; border-radius: 0 0 0 0; box-sizing: border-box; transform: translateX(-50%); z-index: 10; } #login footer.login-footer a, #login footer.login-footer h2, #login footer.login-footer p { margin: 20px 0 0 0; text-align: center; } #login footer.login-footer a:last-of-type, #login footer.login-footer h2:last-of-type, #login footer.login-footer p:last-of-type { margin-bottom: 20px; } /*======================= WAITINGROOM PAGE =======================*/ .content-container.single-collection#waitingroom-view { padding-top: 130px; } .content-container.single-collection#waitingroom-view #collection-media .media-tools > .actions-bar#bulk-actions { margin: 0; } .content-container.single-collection#waitingroom-view #collection-media .media-tools > .actions-bar a.group-btn.audit-request { font-size: 0; } .content-container.single-collection#waitingroom-view #collection-media .media-tools > .actions-bar a.group-btn.audit-request .fa { font-size: 16px; vertical-align: middle; } /* Waitingroom navigation */ .collection-navigation a:hover { cursor: pointer; } .collection-navigation .overall-count { padding-left: 18px; } .collection-navigation .overall-count .fa { margin-right: 3px; font-size: 14px; } .collection-navigation a .state-icon { width: 15px; height: 15px; line-height: 15px; } .collection-navigation a .state-icon .fa { width: 15px !important; font-size: 14px !important; } .collection-navigation a .state-icon.state-open { color: #666; border-color: #666; } .collection-navigation a .state-icon.state-open .fa { color: #666 !important; } .collection-navigation a .state-icon.state-accepted { color: #5cb85c; border-color: #5cb85c; } .collection-navigation a .state-icon.state-accepted .fa { color: #5cb85c !important; } .collection-navigation a .state-icon.state-denied { color: #c00; border-color: #c00; } .collection-navigation a .state-icon.state-denied .fa { color: #c00 !important; } /* Waitingroom content */ #waitingroom-container .tools-container { padding: 5px 0 0 0; } #waitingroom-container .tools-container ul li.tools-results span.results-part { background-color: #1781E3; border: 1px solid #DCE3E7; } #waitingroom-container .tools-container ul li.tools-results span.results-total { border: 1px solid #DCE3E7; border-left: 0; } #waitingroom-container .tools-container .tools-dropdown-container .btn { border: 1px solid #DCE3E7; } #waitingroom-container .tools-container .tools-dropdown-container .btn strong { color: #333; } #waitingroom-container .tools-container .tools-dropdown-container .btn:hover strong { color: #1781E3; } #waitingroom-container .tools-container .tools-dropdown-container .btn ~ .tools-dropdown { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #waitingroom-container .tools-container ul li.tools-dropdown-container.active > a:after { display: none; } #waitingroom-container .tools-container .tools-tab.active .tab { color: #1781E3; border-bottom: 2px solid #1781E3; font-weight: 400; } #waitingroom-container .collection-holder:before, #waitingroom-container .collection-holder:after { display: none; } #waitingroom-view a.group-btn.tip-trigger.audit-request .fa-inverse { color: #666; } #waitingroom-view a.group-btn.tip-trigger.audit-request:hover .fa-inverse { color: #1781E3; } /* Select all */ #waitingroom-view #collection-media .media-tools ul.actions-bar li.select a.group-btn.select-all, #waitingroom-view #collection-media .media-tools ul.actions-bar li.select a.group-btn.select-dropdown { width: 30px; height: 30px; line-height: 30px; background-color: transparent !important; border: 1px solid #DCE3E7; box-sizing: border-box; } #waitingroom-view #collection-media .media-tools li.select a.group-btn.select-all { margin: 0; border-right: none; border-radius: 0 0 0 0; background: transparent !important; transition: all 200ms ease; } #waitingroom-view #collection-media .media-tools li.select a.group-btn.select-all:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 12px; height: 12px; margin: auto; border: 1px solid #666; border-radius: 0; } #waitingroom-view #collection-media .media-tools li.select a.group-btn.select-all:hover:before { border-color: #1781E3; } #waitingroom-view #collection-media .media-tools li.select a.group-btn.select-all:hover:after { color: #1781E3; } #waitingroom-view #collection-media .media-tools ul.actions-bar li.select a.group-btn.select-dropdown { border-radius: 0 0 0 0; } #waitingroom-view #collection-media .media-tools ul.actions-bar.active li.select a.group-btn.select-all:after, #waitingroom-view #collection-media .media-tools ul.actions-bar.part li.select a.group-btn.select-all:after { content: "\f00c"; position: absolute; left: 9px; font-family: "FontAwesome"; font-size: 10px; color: #666; } #waitingroom-view #collection-media .media-tools ul#select-actions.active li.select a.group-btn.select-all .fa-refresh { display: none; } #waitingroom-view #collection-media .media-tools ul#select-actions.active li.select a.group-btn.select-all:hover:before { color: #1781E3; } #waitingroom-view #collection-media .media-tools ul.actions-bar li.select a.group-btn.select-all .fa-refresh { display: none !important; font-size: 10px; vertical-align: baseline; } #waitingroom-view #collection-media .media-tools ul.actions-bar li.select a.group-btn.select-dropdown .fa-caret-down { height: 30px; line-height: 30px; font-size: 16px; color: #666; transition: transform ease 0.3s; } #waitingroom-view #collection-media .media-tools ul.actions-bar li.select a.group-btn.select-dropdown:hover .fa-caret-down { transform: translateY(1px); color: #1781E3; } #waitingroom-view #collection-media .media-tools ul.actions-bar li.select:hover ul.auto-complete { top: 30px; background: #fff; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } /*======================= SELECT PAGE =======================*/ html.select-overflow .content-container.brands { width: 100%; margin: 0 auto; padding: 150px 20px 20px 20px; box-sizing: border-box; overflow: visible; } html.select-overflow .content-container.brands .brand-holder { margin: 0 20px 20px 0; width: 220px; float: left; } html.select-overflow .content-container.brands .brand-holder.show-all > .thumbnail { border: 1px solid #DCE3E7; background: #fff; color: #666; box-shadow: none; } html.select-overflow .content-container.brands .brand-holder.show-all > .thumbnail .image-holder .fa { color: #666; transition: all 200ms ease; } html.select-overflow .content-container.brands .brand-holder.show-all > .thumbnail:hover .image-holder .fa { color: #1781E3; } html.select-overflow .content-container.brands .brand-holder.show-all > .thumbnail p { padding-right: 10px; } html.select-overflow .content-container.brands .brand-holder .thumbnail { width: 100%; padding: 10px; border: 1px solid #DCE3E7; box-shadow: none; } html.select-overflow .content-container.brands .brand-holder .thumbnail:after { border-color: #DCE3E7; } html.select-overflow .content-container.brands .brand-holder .thumbnail:hover p, html.select-overflow .content-container.brands .brand-holder .thumbnail:hover .fa { color: #1781E3; } html.select-overflow .content-container.brands .brand-holder .thumbnail p { position: relative; width: 100%; color: #666; font-weight: 400; font-size: 14px; transition: all 200ms ease; box-sizing: border-box; } html.select-overflow .content-container.brands .brand-holder .thumbnail p:after { top: 0; right: 0; font-size: 12px; line-height: 20px; } html.select-overflow .content-container.brands .brand-holder .thumbnail p:hover:after { color: #1781E3; } html.select-overflow .content-container.brands .brand-holder .brand-bottom { height: 52px; line-height: 52px; background: #fff; margin: 0 -10px; padding: 10px; border-top: 1px solid #DCE3E7; box-shadow: none; box-sizing: border-box; } html.select-overflow .content-container.brands .brand-holder .brand-bottom .media-count { color: #666; font-size: 12px; } html.select-overflow .content-container.brands .brand-holder .brand-bottom .has-options.blue { font-size: 12px; text-shadow: none; } html.select-overflow .content-container.brands .brand-info { margin: 15px 0; } /*======================= SHOW PAGE / PIM PAGE =======================*/ #media-container.content-container.ui-selectable { margin: 0 auto; padding: 150px 0 20px 20px; box-sizing: border-box; } #media-container.content-container.ui-selectable .media-tools { margin-bottom: 20px; } #media-container.content-container.ui-selectable .media-tools .metaentity-header.small { margin: 0 20px 0 0; } #media-container.content-container.ui-selectable .media-tools .metaentity-header.small h1 { margin: 0; height: 30px; line-height: 30px; font-weight: 700; } #media-container.content-container.ui-selectable .brand-holder.entity-holder { margin: 0 20px 20px 0; width: 220px; min-height: 220px; } #media-container.content-container.ui-selectable .brand-holder.entity-holder > .thumbnail { width: 100%; padding: 10px; border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #media-container.content-container.ui-selectable .brand-holder.entity-holder > .thumbnail .image-holder { background-color: #e9eaec; } #media-container.content-container.ui-selectable .brand-holder.entity-holder > .thumbnail .metaentity-description { height: 50px; margin: 10px 0 0 0; line-height: normal; } #media-container.content-container.ui-selectable .brand-holder.entity-holder .action-btn.edit-brand { display: block; opacity: 0; transition: all 200ms ease; } #media-container.content-container.ui-selectable .brand-holder.entity-holder:hover .action-btn.edit-brand { opacity: 1; } /* Show detail page */ #pim-view.content-container.metaproperty-view.single-collection { padding-top: 130px; padding-right: 0; transition: all 200ms ease; } #pim-view.content-container.metaproperty-view.single-collection header { box-shadow: none; } #pim-view.content-container.metaproperty-view.single-collection header .tool-bar { padding: 0; } #pim-view.content-container.metaproperty-view.single-collection header .tool-bar .filters:before { content: ""; position: absolute; display: inline-block; width: 1px; height: 60px; top: 0; bottom: 12px; left: 0; background-color: #DCE3E7; } #pim-view.content-container.metaproperty-view.single-collection header .tool-bar .filter-navigation { float: left; } #pim-view.content-container.metaproperty-view.single-collection #single-collection-top { min-height: 0; margin-top: 0; padding: 20px; margin-right: 0; margin-left: -20px; } #pim-view.content-container.metaproperty-view.single-collection #single-collection-top h1 { padding: 0; } #pim-view.content-container.metaproperty-view.single-collection #single-collection-top .pim-breadcrumb-intro { font-weight: 700; } #pim-view.content-container.metaproperty-view.single-collection .media-tools { height: 60px; padding: 0; } #pim-view.content-container.metaproperty-view.single-collection .media-tools #select-actions, #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container { margin-right: 20px; } #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container, #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li, #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li .bulk-share, #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li .cta-main { height: 30px; margin: 0; font-weight: 700; } #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li .bulk-share, #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li .cta-main { line-height: 30px; } #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container { margin-top: 20px; } #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li .bulk-share { margin: 0 10px 0 0; } #pim-view.content-container.metaproperty-view.single-collection .media-tools .cta-main-container li .cta-main { margin-right: 20px; } #pim-view.content-container.metaproperty-view.single-collection .media-tools .media-tools-left { margin-top: 20px; } #pim-view.content-container.metaproperty-view.single-collection #collection-media #results-thumbs { margin-top: 100px; } .content-container#pim-view header .tool-bar ul.actions-bar li.select a.group-btn.select-all .fa-refresh { position: absolute; top: 10px; left: 10px; font-size: 9px; } .content-container#pim-view header .tool-bar ul.actions-bar li.select a.group-btn.select-all, .content-container#pim-view header .tool-bar ul.actions-bar li.select a.group-btn.select-dropdown { width: 30px; padding: 0; } .content-container#pim-view header .tool-bar ul.actions-bar li.select:hover ul.auto-complete { top: 45px; } .content-container.metaproperty-view.single-collection#pim-view .filterbar { padding: 0; } .content-container.metaproperty-view.single-collection#pim-view .media-tools-left { margin-top: 20px; } .content-container.metaproperty-view.single-collection#pim-view .cta-main-container { margin-top: 20px; } .content-container.metaproperty-view.single-collection#pim-view .cta-main-container li, .content-container.metaproperty-view.single-collection#pim-view .cta-main-container li a.cta-main, .content-container.metaproperty-view.single-collection#pim-view .cta-main-container li a.cta-main .fa, .content-container.metaproperty-view.single-collection#pim-view .cta-main-container .bulk-share { height: 30px; line-height: 30px; font-size: 14px; } .content-container.metaproperty-view.single-collection#pim-view .cta-main-container .bulk-share { margin: 0 10px 0 0; } /*======================= NEWS PAGE =======================*/ .content-container.dashboard.single .collection-stream { width: 1180px; margin-top: 0; } .content-container.dashboard.single .dashboard-side { margin: 0 0 0 20px; } .content-container.dashboard.single .collection-stream .collection.news { width: 100%; margin: 0 0 20px 0; padding: 0; box-sizing: border-box; } .content-container.dashboard.single .collection-stream .collection.news .news-content { padding: 20px; } /*======================= BRANDSTORE PAGE =======================*/ #brandstore-container .product-block:hover { border-color: #1781E3; } /*======================= VIDEOS PAGE =======================*/ .content-container.videos { width: 1180px; padding: 130px 20px 20px 20px; } /*======================= OPEN PAGES - OPEN DASHBOARD - OPEN ASSETBANK - OPEN STYLEGUIDE =======================*/ body.open-image-bank .admin-right .admin-dropdown .alt-login { padding: 0 10px; } body.open-image-bank .admin-right .admin-dropdown ul.single.public-sub li:hover > a { background-color: transparent; } body.open-image-bank ul.admin-options > li > a.profile:before { display: none; } /*======================= TRANSFER PAGE =======================*/ body.transfer .transfer-container .transfer-icon { border-color: #1781E3; } body.transfer .transfer-container .transfer-icon .icon-file, body.transfer .transfer-container .transfer-icon .fa { color: #1781E3; border-color: #1781E3; } body.transfer .transfer-container .transfer-box a.btn { height: 40px; line-height: 40px; } /*======================= LOOK & FEEL PAGE =======================*/ #lookAndFeelManagement .upload-box.accountlogo-box .remove-image:hover i.fa { color: #c00; } /*======================= PYBYNDER PAGES =======================*/ /* Pybynder header */ header.base nav.navbar-primary .notifications-nav span.badge { display: inline-block !important; min-width: 24px; height: 24px; line-height: 24px; padding: 0 4px; border-radius: 100px; box-sizing: border-box !important; } header.base nav.navbar-primary .avatar-holder { width: 30px; height: 30px; line-height: 30px; position: relative; overflow: hidden; } header.base nav.navbar-primary .avatar-holder img { position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: 150%; min-height: 100%; transform: translate(-50%, -50%); } header.base nav.navbar-primary .navbar-nav .dropdown-toggle.avatar .fa { transition: all 200ms ease; } /* Pybynder general */ .container .row ol.breadcrumb { border-bottom: 1px solid #DCE3E7; } .container .row ol.breadcrumb > li { font-size: 12px; } .container .row ol.breadcrumb > li a { color: #666; } .container .row ol.breadcrumb > li a:hover { color: #1781E3; } .container .row ol.breadcrumb > li.active { color: #666; } .container .row ol.breadcrumb > li + li:before { color: #DCE3E7; } #sidebar nav.nav-side { background-color: #ebeff1; box-shadow: inset -1px 0 0 #DCE3E7; } #sidebar nav.nav-side .btn-collapse:hover { transform: translateX(-2px); } #sidebar nav.nav-side .nav-side-content h3 { color: #333; } #sidebar nav.nav-side .nav-side-content .list-nav-side { border-top: 1px solid #DCE3E7; } #sidebar nav.nav-side .nav-side-content .list-nav-side li > a { color: #333; transition: all 200ms ease; } #sidebar nav.nav-side .nav-side-content .list-nav-side li > a:hover { color: #1781E3; } #sidebar nav.nav-side .nav-side-content .list-nav-side li > ul li.active a { background: #1781E3; color: #fff; } #sidebar nav.nav-side .nav-side-content .list-nav-side li > ul li.active a:hover { background: #419aec; color: #fff !important; } #sidebar.col-md-0 nav.nav-side { border-left: 0; } #sidebar.col-md-0 nav.nav-side .btn-collapse:hover { transform: translateX(2px); } #sidebar.col-md-0 nav.nav-side .btn-collapse:focus { background: #1781E3 !important; transform: translateX(2px); } .page-header h1, .page-header h2, .page-header h3, .page-header h4 { color: #333; font-weight: 600; } .page-header h1 strong, .page-header h2 strong, .page-header h3 strong, .page-header h4 strong { font-weight: 700; } .text-muted, .spotlight-preview .preview-info-container dl dd { color: #666; } .page-header h4 .text-muted, .page-header h4 .spotlight-preview .preview-info-container dl dd, .spotlight-preview .preview-info-container dl .page-header h4 dd { color: #666; } .text-primary { color: #1781E3; } .delta-negative { color: #c00; } .add-metric-button .btn-default { text-shadow: none !important; } .page-section .filters { border: 1px solid #DCE3E7; border-radius: 0; } select + .select2-container--default.select2-container--focus .select2-selection--single:not([readonly]).select2-selection, select + .select2-container--default.select2-container--focus .select2-selection--single:not([readonly]):focus, input + .select2-container--default.select2-container--focus .select2-selection--single:not([readonly]).select2-selection, input + .select2-container--default.select2-container--focus .select2-selection--single:not([readonly]):focus, .form-control:not([readonly]).select2-selection, .form-control:not([readonly]):focus { border-color: #1781E3; } .btn-dashed { font-weight: 600; color: #1781E3; background-color: transparent; border-color: #1781E3; transition: all 200ms ease; } .btn-dashed:hover { color: #1267b5 !important; border-color: #1267b5 !important; } table.editable thead#filters th > button.btn-default { background-color: #fff !important; } /* Pysettings */ .container #settings { /* Settings overview */ /* Settings edit */ } .container #settings table.account button.btn-link { background-color: transparent; color: #666; padding: 0; font-weight: 400 !important; } .container #settings table.account button.btn-link:hover, .container #settings table.account button.btn-link:active, .container #settings table.account button.btn-link:focus { background-color: transparent !important; color: #1781E3 !important; } .container #settings table.account .badge { padding: 4px 8px; font-weight: 400; border-radius: 0; } .container #settings table.account .btn-group a.btn.btn-sm.btn-default, .container #settings table.account .btn-group button.btn.btn-sm.btn-default.btn-danger { height: 30px; } .container #settings #content .btn-group button.btn.btn-primary { border: 1px solid transparent; } /* Pybynder transfer */ #transfer table.table { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #transfer table.table thead tr th { background-color: #ebeff1; color: #666; } #transfer table.table thead tr th span { color: #666; } #transfer table.table thead tr th:first-of-type { border-top-left-radius: 0; } #transfer table.table thead tr th:last-of-type { border-top-right-radius: 0; } #transfer table.table thead tr th:nth-last-of-type(2) { border-top-right-radius: 0; } #transfer table.table tbody tr td { color: #666; } #transfer table.table tbody tr td:only-of-type { width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #transfer table.table tbody tr td.transfer-actions .btn-group a.btn.btn-danger { border: 0; } #transfer table.table tbody tr td.transfer-actions .btn-group a.btn.btn-danger:hover { color: #fff !important; } #transfer table.table tbody tr td .transfer-status.transfer-active { background-color: #5cb85c; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: #ffffff; } .table-striped > tbody > tr:nth-of-type(even) { background-color: #f1f4f6; } /* Pybynder modals */ .bootbox.modal .modal-content .modal-header button.close { color: #666; } .bootbox.modal .modal-content .modal-header button.close:hover, .bootbox.modal .modal-content .modal-header button.close:active, .bootbox.modal .modal-content .modal-header button.close:focus { opacity: 1; background: transparent !important; color: #1781E3 !important; } .bootbox.modal .modal-content .modal-footer { margin: 0; } /* Pybynder Insights */ .container .page-header .pull-right #insights-daterange { margin-left: 20px; } .highcharts-legend-item path:last-of-type { fill: #666; } .highcharts-series-group > path { fill: #666; fill-opacity: 0.25; } .highcharts-series path, .highcharts-legend-item path:first-of-type { stroke: #666; stroke-width: 2px; } .highcharts-markers path { fill: #666; } .highcharts-legend-item text { font-family: "TheSansBasic", Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 400; color: #333 !important; fill: #333 !important; } .chart.download-chart { box-sizing: border-box; position: relative; } /* Pybynder Pymetaproperties */ #metaproperties #header .table-header { border: 1px solid #DCE3E7; border-bottom: 0; } #metaproperties #header .table-header h1 { border-right: 1px solid #DCE3E7; } #metaproperties table.editable thead tr th i.fa { color: #666; } #metaproperties table.editable thead#filters th > button.btn-default { background: transparent; } #metaproperties table.editable thead#filters th > button.btn-default:hover { background: transparent !important; color: #666 !important; } #metaproperties table.editable thead tr th, #metaproperties table.editable tbody tr td, #metaproperties table.editable tbody tr td .settings, #metaproperties table.editable .table-header .search i.fa { color: #666; } #metaproperties table.editable thead tr th, #metaproperties table.editable tbody tr td.active { background-color: #f9f9fa; } #metaproperties table.editable tbody tr:hover, #metaproperties table.editable tbody tr:hover .table-input input { background-color: #f9f9fa; } /* Pybynder Template settings */ #templateSettings .settings-preset-picker .input-group .input-group-btn button.btn-secondary.btn-default { border: 1px solid transparent; } #templateSettings .settings-preset-picker .input-group .input-group-btn button.btn-secondary.btn-default:hover { z-index: auto; } /* Pybynder Template settings detail */ #podEditor .settings-body .settings-row .btn-toolbar button.btn-default.btn-sm { color: #3c4858; background: #edeef0; border-color: #e0e4ea; } #podEditor .settings-body .settings-row .btn-toolbar button.btn-default.btn-sm:hover, #podEditor .settings-body .settings-row .btn-toolbar button.btn-default.btn-sm:active, #podEditor .settings-body .settings-row .btn-toolbar button.btn-default.btn-sm:focus { color: #13161b !important; background: #edeef0 !important; } /* Pybynder Template mass uploader */ #mass-uploader-pod .mass-uploader-dropzone .uploader-status-note { color: #666; } /* Pybynder mass uploader */ #mass-uploader-view #csv-upload-warning ul li { list-style: none; } /* Pybynder trash */ #settings table.table.account td a.btn.btn-default i.fa-recycle { vertical-align: middle; } /*======================= TERMS OF USE PAGE =======================*/ #page-terms { padding-top: 70px; } /*======================= COMPACTVIEW PAGE =======================*/ body#LayoutCompact .content-container.compact { padding-top: 80px; } #LayoutCompact .content-container.compact .filterbar ~ .media-tools { margin-top: 0; } #LayoutCompact .content-container.compact .filterbar.show ~ .media-tools { margin-top: 40px; } #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton { margin-right: 20px; } #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton:hover .fa, #LayoutCompact header .tool-bar ul#bulk-actions.actions-bar.group-btns > li > a#addMediaButton:active .fa { color: #fff; } /*======================= FOOTER SECTION =======================*/ footer.fixed { margin: 0 auto; padding: 0; right: 20px; left: 20px; box-sizing: border-box; } footer.fixed ul.footer-btns { height: auto; left: 0; padding: 0; } footer.fixed ul.footer-btns li:hover { transition: all 200ms ease; } footer.fixed ul.footer-btns li:hover li a:before { color: #1781E3; } footer.fixed ul.footer-btns li:hover span { color: #1781E3 !important; } footer.fixed .footer-btn { background: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; } footer.fixed .footer-btn .text, footer.fixed .footer-btn { font-size: 14px; color: #666; } footer.dashboard-footer { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 40px 20px; color: #666; background: #fff; border-top: 1px solid #DCE3E7; border-bottom: 0; box-sizing: border-box; } /*======================= COOKIE SECTION =======================*/ #cookie-container { padding: 0; } #cookie-container .cookie-wrapper { padding: 20px 0; } #cookie-container .cookie-wrapper .cookie-left { padding: 0; } #cookie-container .cookie-wrapper .cookie-left p { padding: 20px; } /*======================= SETUP WIZARD SECTION =======================*/ .setup-wizard nav .navigation ul li.checked .fa, .setup-wizard nav .navigation ul li.checked .check { color: #1781E3; } .content .add-brands .board .upload-btn .brand-thumb { height: auto; max-height: 45px; } .news-holder-content .icon.small { width: 30px; height: 30px; margin: 0 15px 0 0; } .news-holder-content .news-title { display: inline-block; max-height: 30px; } /*======================= GENERAL SECTION =======================*/ ::selection { background: rgba(23, 129, 227, 0.7); color: #fff; } ::-moz-selection { background: rgba(23, 129, 227, 0.7); color: #fff; } input, textarea { transition: all 200ms ease; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666 !important; transition: all 200ms ease; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666 !important; transition: all 200ms ease; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666 !important; transition: all 200ms ease; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666 !important; transition: all 200ms ease; } select, textarea, .transfer textarea, input[type=text], input[type=password], input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=number], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=color], .wf-wrapper .form-control, #briefingroom-modal-container .form-control.hover-edit:hover, #briefingroom-modal-container .form-control.hover-edit:focus, #briefingroom-modal-container .form-control { color: #666; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; box-shadow: none; transition: all 200ms ease; } select:focus, textarea:focus, .transfer textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, .wf-wrapper .form-control:focus, #briefingroom-modal-container .form-control.hover-edit:hover:focus, #briefingroom-modal-container .form-control.hover-edit:focus:focus, #briefingroom-modal-container .form-control:focus { box-shadow: none !important; border-color: #1781E3; } input:focus:invalid { border: 1px solid rgba(185, 74, 72, 0.5) !important; } textarea:focus:invalid { border: 1px solid rgba(185, 74, 72, 0.5) !important; } select:focus:invalid { border: 1px solid rgba(185, 74, 72, 0.5) !important; } pre, input, button, select, textarea, .ui-menu .ui-menu-item { outline: none !important; } span.label { background: #1781E3; } td.disabled, a.disabled { color: #cecece !important; } /* Overwrite transitions */ .open > span i.fa.fa-caret-down, .active > a i.fa.fa-caret-down, .show i.fa.fa-caret-down, .propertyHolder.active i.fa.fa-caret-down, .tools-container .fa, i.fa.fa-caret-down { transition: all 200ms ease; } /*======================= RADIOBUTTONS / CHECKBOXES =======================*/ .filter-level-container.advanced .filter-level li input[type=radio], .filter-level-container.advanced .filter-level li input[type=checkbox] { margin: 4px 4px 0 0; } .filter-level-container.advanced li.radio label input[type=radio], .filter-level-container.advanced .filter-level li input[type=radio] { margin-top: 2px; margin-left: 0; } /*======================= MISCELLANEOUS SECTION =======================*/ .content-container.no-toolbar { padding: 20px; } .tool-bar .actions-bar a.group-btn { background-color: #1781E3; } /* Breadcrumb */ header .tool-bar ul.breadcrumb { height: 40px; line-height: 40px; margin: 0; } header .tool-bar ul.breadcrumb li a, header .tool-bar ul.breadcrumb li > span { height: 40px; line-height: 40px; padding: 0 16px 0 0; max-width: 700px; color: #666; } header .tool-bar ul.breadcrumb li a span { position: static; font-size: 0; } header .tool-bar ul.breadcrumb li a span:after { content: "\f054"; position: absolute; top: 0; right: 0; height: 40px; line-height: 40px; font-family: FontAwesome; font-size: 10px; color: #666; } /* Pybynder breadcrumb */ #breadcrumb li, #breadcrumb li a { font-family: "TheSansBasic", Helvetica, Arial, sans-serif; font-weight: 400; } .scrollup { right: 20px; bottom: 20px; background: none #1781E3; border-radius: 0; color: #fff !important; font-size: 0; text-indent: -30px; } .scrollup:active { background-color: #1267b5; } .scrollup:before { transform: translate(0, 0); transition: transform 0.3s ease-in; } .scrollup:focus:before { transform: translate(0, -3px); } .scrollup:hover { color: #fff !important; background: none #1781E3; } .scrollup:before { content: "\f106"; position: absolute; bottom: 5px; right: 10px; font-family: "FontAwesome"; font-weight: 300; font-size: 45px; } .update.info, .update.warning { height: 50px; max-height: 50px; line-height: 50px; background: rgba(23, 129, 227, 0.9); } .update .notification, .update a.cancel, .update .notification h1 { height: 50px; line-height: 50px; } /* Moxie shim IE / Edge CTA button file uploader */ header #uploadContainer .moxie-shim { max-height: 48px !important; } .moxie-shim:hover, .moxie-shim > input:hover { cursor: pointer; } /* Asset selection / lasso */ #results-thumbs .media-holder.ui-selecting .thumbnail:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; border: 2px solid #1781E3; border-radius: 0; content: ""; } .ui-selectable-helper { border: 1px dotted #333; } .page-component fieldset .control-group .tip { margin-left: -30px; } .languages, #brandstore-container .table table tbody tr:hover, .content-container .table table tbody tr:hover { color: #1781E3; } /* Management pages */ .content-container { padding: 210px 20px 60px 20px; } .content-container.dashboard.single { padding-top: 150px; } .content-container .table.news { margin-top: 0; } .content-container#editNews { padding-top: 150px; } .content-container .table table tbody tr td a, .content-container .table table tbody tr td a.edit { display: inline-block; } .content-container .table a.action-btn.access-btn .fa { vertical-align: middle; } .content-container .table table#user-management tbody tr td a.edit { display: inline-block; position: relative; float: left; width: 20px; margin-top: -10px; } .content-container .table table#user-management tbody tr td a.edit button.edit.action-btn { margin-top: 15px; } /* User profile / user edit */ #frmUserDetail fieldset.left:nth-of-type(1) { padding-top: 0; } #frmProfileDetail .content-container .page-component { padding-bottom: 120px; } .page-component#single-user .upload-box .remove-image i { top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 11px; } .page-component#single-user .upload-box .remove-image i:hover { color: #c00; } /* Pager */ .pager ul.group-btns li a.group-btn { color: #666; background-color: #f9f9f9; line-height: 30px; } .pager ul.group-btns li.pages.active a.group-btn { padding: 1px 12px; color: #fff; background-color: #1781E3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } .pager ul.group-btns li.pages.active a.group-btn:hover { background-color: #1574cc !important; color: #fff !important; } #lookAndFeelManagement .upload-box.watermark-box { height: 160px; } a.dialogbutton.dialog-confirm { height: 30px; line-height: 30px; padding: 0 15px; } a.dialogbutton.dialog-cancel { height: 30px; line-height: 30px; padding: 0 15px; font-weight: 400; font-size: 14px; text-decoration: none; } a.dialogbutton.dialog-cancel span, a.dialogbutton.dialog-cancel:hover span.text { text-decoration: none; } a.delete:hover, a.delete:hover .fa-trash, .multi-edit-options a.multi-edit-option:hover .fa-trash { color: #c00 !important; } .table.news a.action-btn { display: inline-block; padding: 0 10px; } .table.news a.action-btn .fa { vertical-align: middle; font-size: 15px; } .filter-level ul.stand li.selected span.searchCount { background-color: #1781E3; } .workflow-header > h1 a { color: #1781E3; } /* Tag management */ .content-container .page-component button.delete-multiple.action-btn { position: absolute; left: 330px; } /* Permissions management */ .page-component .content nav ul li.active > a { background-color: #1781E3; } .page-component .content nav ul li.active > a:hover { color: #fff !important; } /* Modals */ #modal-container { overflow: auto; } #modal-container > .modal { margin-bottom: 20px; } #briefingroom-modal-container ul.groups li.group a:hover { background: transparent; } #modal-wrapper .settings-header a.modal-close { border-radius: 0; background: none; border: 0; padding: 0; margin: 0; width: auto; height: auto; line-height: 32px; font-size: 22px; } #modal-wrapper .settings-header a.modal-close:hover { background: none; color: #1781E3; } #modal-wrapper .settings-header a.modal-close .fa:before { content: "\f057"; } #frmshareBox .control-group input[type=checkbox] { margin-top: 2px; } body[data-module=styleguide] #modal-container .modal-overflow-box.large > a.close { background: none; } /* Workflow group management modal */ #briefingroom-modal-container .view-description.modal-description > a.close-description { top: 50%; right: 10px; transform: translateY(-50%); } /* Terms modal login page */ #login #terms { z-index: 999; } #login #terms .acceptTC { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-bottom: 60px; } #login #terms .acceptTC .reader { position: static; max-height: 355px; margin: 0; padding: 20px; overflow: auto; } /* Table settings/delete buttons */ .content-container .table a.action-btn.options { float: right; margin-right: 10px; } .content-container .table table tbody tr td button.edit { margin-right: 5px; } /* Settings */ #settings-wrapper { max-width: 100%; padding: 0 20px; margin: 150px 20px 0 20px; } #settings-wrapper .settings-container { margin-left: 280px; } #settings-wrapper .settings-block { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; box-sizing: border-box; } #settings-wrapper .side-navigation { border: 1px solid #DCE3E7; border-radius: 0; box-shadow: none; } #settings-wrapper .settings-block-content table tr td p { margin: 0; } #settings-wrapper .settings-header a.action-btn .fa { vertical-align: middle; } #settings-wrapper .settings-block-content table tr .action-btn, #settings-wrapper .settings-block-content table tr .action-btn.no-outline { color: #666; background-color: transparent !important; } #settings-wrapper .settings-block-content table tr .action-btn:hover, #settings-wrapper .settings-block-content table tr .action-btn:focus, #settings-wrapper .settings-block-content table tr .action-btn.no-outline:hover, #settings-wrapper .settings-block-content table tr .action-btn.no-outline:focus { color: #1781E3 !important; background-color: transparent !important; } #settings-wrapper .settings-block-content table tr .action-btn.tip-trigger .tip, #settings-wrapper .settings-block-content table tr .action-btn.no-outline.tip-trigger .tip { display: block; opacity: 0; pointer-events: none; transition: all 200ms ease; } #settings-wrapper .settings-block-content table tr .action-btn.tip-trigger:hover .tip, #settings-wrapper .settings-block-content table tr .action-btn.no-outline.tip-trigger:hover .tip { opacity: 1; pointer-events: all; } #settings-wrapper .settings-block-content table tr .action-btn.delete .tip, #settings-wrapper .settings-block-content table tr .action-btn.no-outline.delete .tip { right: 0; left: auto; } #settings-wrapper .settings-block-content table tr .action-btn.delete .tip:before, #settings-wrapper .settings-block-content table tr .action-btn.delete .tip:after, #settings-wrapper .settings-block-content table tr .action-btn.no-outline.delete .tip:before, #settings-wrapper .settings-block-content table tr .action-btn.no-outline.delete .tip:after { right: 8px; left: auto; } #settings-wrapper .side-navigation ul li a .fa { margin-right: 10px; } #settings-wrapper .settings-block-content table tr td { padding: 16px 15px; } /* Select2 input fields */ .select2-container .select2-choices .select2-search-field input, .select2-container .select2-choice, .select2-container .select2-choices { border-color: #DCE3E7; font-family: "TheSansBasic", Helvetica, Arial, sans-serif !important; color: #666; } .select2-default { color: #666 !important; } .select2-input, .select2-input:focus { margin: 0 !important; outline: 0 !important; left: 0 !important; top: 0 !important; color: #666; } .select2-container-multi .select2-choices, .select2-container-multi.select2-container-active .select2-choices { border: 1px solid #1781E3; outline: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .select2-container-multi .select2-search-choice-close { background-image: none !important; } .tags.select2-container-multi.select2-container-active .select2-choices { border: 0 !important; } .popover-content .checkbox label input[type=checkbox] { margin-top: 3px; } /* FTE manager */ .availability-management .fte-container { margin-top: 0; } .fte-container { padding: 25px; } #frmUserDetail .left .controls input#emailList { line-height: normal; } /* Permissions management */ #profileManagement .permissionRight .roles input { margin-top: 2px; } .chatlio-widget { right: 80px; } /* Maintenance popup */ .popup-notification { z-index: 200; } /* Edit current account */ .content-container .page-component { overflow-y: auto; border-radius: 0; } .filter-menu-holder > ul { border-top-right-radius: 3px; } .filter-menu-holder > ul > li:last-child { border-top-right-radius: 3px; } .filter-menu-holder > ul > li:last-child a.filter-menuitem { border: none; border-top-right-radius: 3px; } #podEditor .template-sidebar .template-frame li a.active:hover, #podEditor .template-sidebar .template-frame li a:focus:hover { color: #fff !important; } .content-container .page-component #adminAdditionalThumbs tbody td:nth-last-child(2) { display: inline-block; min-width: 200px; } .content-container .page-component #adminAdditionalThumbs tbody td:nth-last-child(2) button { float: left; } .content-container .page-component #adminAdditionalThumbs tbody td:nth-last-child(2) button:first-of-type { margin-right: 10px; } /* Select 2 input fields */ .select2-container-multi.select2-container-active .select2-choices, .select2-container-active .select2-choice, .select2-container-active .select2-choices { box-shadow: none; transition: all 200ms ease; } .select2-results .select2-highlighted { background: #1781E3; } .select2-drop-active, .select2-container-active .select2-choice, .select2-container-active .select2-choices { border-color: #1781E3; } .select2-drop-active { width: auto; max-width: 100%; box-sizing: border-box; } html.ie11 #styleguide-content table { table-layout: fixed; } /*======================= ANIMATIONS SECTION =======================*/ #carousel-holder { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; animation: fadein 2s; } #carousel-holder { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; animation: fadein 2s; } /* workflow available values fix */ .metaproperty-value-row { min-height: 20px; width: 100%; float: left; } .wf-stage-content-holder .wf-assets-container { height: auto; margin: 20px 0 0 0; width: 100%; float: left; } .wf-stage-order-form-container { margin-right: -20px; margin-left: -20px; display: block; min-height: 20px; float: left; width: 100%; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @media screen and (max-width: 1200px) { .content-container.dashboard, .content-container.dashboard .navigation-tiles { max-width: 1180px; } #carousel-holder .carousel-caption { width: 1180px; } .dashboard-side { width: 100%; margin-top: 0; margin-left: 0; } .dashboard-side > div { width: 100%; box-sizing: border-box; } .dashboard-side > .quicklinks { display: inline-block; } .dashboard-side > .quicklinks ul li { float: left; margin-right: 59px; } .dashboard-side > .quicklinks ul li:nth-of-type(3n) { margin-right: 0; } .dashboard-side .news .news-list { display: inline-block; width: 100%; } .dashboard-side .news .news-list .news-item { float: left; width: 265px; margin-right: 20px; } .dashboard-side .news .news-list .news-item:nth-of-type(3n) { margin-right: 0; } .dashboard-side #last-media-slider .carousel-inner .item a.img-responsive { background-size: contain; } /* Workflow */ .workflow-header { width: auto; max-width: 880px; } .content-container.brands.workflow.sub-navigation { width: auto; margin-right: 20px; margin-left: 20px; } .campaign-overview > .grid-row-holder { width: 880px; margin-right: auto; margin-left: auto; } .workflow .brand-holder { width: 33.3333%; } } @media screen and (max-width: 1140px) { #results-thumbs .listviewrow .media-holder.listview { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 20px 0 20px 0; margin: 0; border-radius: 0; } .row.listviewrow { border: 0; padding: 0; } } @media (max-width: 1024px) { .smart-filter-container { position: absolute; right: auto; left: auto; } } /* Smartfilter fix */ body[data-module=media] header.base .tool-bar .filters-holder ul.filters.clearfix li.filter.filter-meta.active .filter-level-container.smart-filter-container { overflow-y: scroll; } header.base { min-width: unset; } /* Asset detail - Asset Metaproperty Permissions */ #image_enlarger .toggle-additionals .media-info-extend #rootAssetMetapropertyPermissions button.action-btn.cta-main.blue.button-small { background: #1781E3 !important; border: 0 !important; border-radius: 5px !important; color: #fff !important; } #image_enlarger .toggle-additionals .media-info-extend #rootAssetMetapropertyPermissions button.action-btn.cta-main.blue.button-small:hover { background: #1574cc !important; color: #fff !important; } #image_enlarger .toggle-additionals .media-info-extend #rootAssetMetapropertyPermissions button.action-btn.cta-main.blue.button-small:active { background: #1267b5 !important; } /* Collection detail listview */ .single-collection #collection-media .row.listviewrow { float: left; } /* Workflow Sidebar Navigation */ body .content-container.brands.workflow.sub-navigation.sidebar-feature { width: 100%; margin-left: 0; margin-top: 150px; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-navigation { position: fixed; height: calc(100% - 110px); } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-navigation:after { content: " "; position: absolute; height: 110px; width: 281px; background: rgb(255, 255, 255); top: -110px; right: 0px; border-right: 1px solid rgb(230, 233, 235); } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature { flex: 1; margin: 24px 24px 0 296px; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .workflow-header { width: unset; max-width: unset; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .workflow-header .media-results { margin-right: 10px; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .workflow-header > h1 { max-width: calc(100% - 100px); } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .grid-row-holder .brand-holder, body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .grid-row-holder .brand-holder.show-all { width: calc(25% - 20px); } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .campaign-overview > .grid-row-holder { width: unset; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .campaign-collection-list, body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .workflow-jobs-container.job-overview .workflow-jobs-list { overflow-x: scroll; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-campaigns-header .overview-filter, body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-jobs-header .overview-filter { margin-bottom: 10px; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .campaign-collection-list { overflow-x: scroll; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .brand-holder { margin-right: 20px; padding-right: 0; } @media screen and (max-width: 1200px) { body .content-container.brands.workflow.sub-navigation.sidebar-feature { margin-left: 0; margin-right: 0; } body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .grid-row-holder .brand-holder, body .content-container.brands.workflow.sub-navigation.sidebar-feature .workflow-holder.sidebar-feature .grid-row-holder .brand-holder.show-all { width: calc(33% - 20px); } }