/* ==============================================================================
   VERSION: 9.1 FR21 (2026-05)
   ============================================================================== */

/* ==============================================================================
   TABLE OF CONTENTS
	
   - DESIGN VARIABLES (*)
   - FOTOWARE PROF-SERVICES TEMPLATE
     - LOGIN/SIGNUP/PASSWORD
     - HEADER
     - HOMEPAGE-BANNER
     - ARCHIVE/ALBUM-OVERVIEW-PAGE
     - TAB-NAVIGATION (ARCHIVE-PAGE)
     - BREADCRUMP (ARCHIVE-PAGE)
     - SIDEBAR (ARCHIVE-PAGE)
     - FOLDERS (ARCHIVE-PAGE)
     - TAXONOMY (ARCHIVE-PAGE)
     - THUMBNAIL (ARCHIVE-PAGE)
     - SORTING (ARCHIVE-PAGE)
     - DETAIL-PAGE
     - BADGE/PIN
     - LINK/TAXONOMY/FOLDER
     - TAG
     - BUTTON
     - POPUP/MODAL
     - HIDDEN ELEMENTS
   - CUSTOM OVERRIDES (*)

   (*) Editable sections
   ============================================================================== */



/* ==============================================================================
   DESIGN VARIABLES
   
   UPDATE THE VALUES OF THE VARIABLES TO CUSTOMIZE THE DESIGN
   DO NOT CHANGE THE VARIABLE NAMES
   FOR CUSTOM CHANGES, USE THE CUSTOM OVERRIDES SECTION BELOW
   ============================================================================== */

/* :root defines the default color scheme for the Fotoweb interface */ 
:root {

	/* General */
	--link-text: #005950;
	--link-text-hover: #c4541d;
	--text: #000000;

	/* Login/Signup/Password */
	--login-page-form-background-color: rgba(255,255,255,1);

	/* Header */
	--header-bg: #DFE4E3;
	--header-text: #005950;
	--header-text-hover: #00423c;
	--header-usermenu-hover-bg: #DFE4E3;
	--navbar-logo-height: 27px;
	--form-control-border: #ced4da;
	--searchfield-select: #c4541d;

	/* Homepage-Banner */
	--home-page-search-bg: #f4f4f4;
	--home-page-title-text: #ffffff;

	/* Button */
	--btn-bg: #c4541d;
	--btn-bg-hover: #a3400f;
	--btn-text: #ffffff;
	--btn-text-hover: #ffffff;
	--btn-bg-disabled: #888888;
	--btn-bg-hover-disabled: #666666;
	--btn-text-disabled: #ffffff;
	--btn-text-hover-disabled: #ffffff;

	/* Badge/Pin */
	--badge-count-bg: #c4541d;
	--badge-count-text: #ffffff;
	--pin-icon: #c4541d;

	/* Archive/Album-Overview */
	--collection-item-title-text: #005950;
	--collection-item-title-bg: rgba(255,255,255,0.8);
	--collection-item-pin: rgba(0,0,0,0.5);
	--collection-item-pin-active: #c4541d;

	/* Archive-Page */
	--marker-bg: #f4f4f4;
	--scrollbar-color-bg: #fff;
	--scrollbar-color-bar: #aaa;
	--sorting-active-bg: #eeeeee;
	--taxonomy-separator: #999999;
	--taxonomy-select-border: #c4541d;
	--thumbnail-select: #c4541d;
	--thumbnail-border: #e8e8e8;
	--thumbnail-text: #ffffff;

	/* Archive Tab-Navigation */
	--archive-tab-bg: #f3f3f3;
	--archive-tab-active-bg: #ffffff;
	--archive-tab-active-border: #dddddd;
	--archive-tab-active-border-bottom: #ffffff;
	--archive-tab-icon-mark: rgba(0,0,0,0.5);

	/* Detail-Page */
	--preview-sidebar-bg: #f2f2f2;
	--preview-markers-bg: #ffffff;
	--preview-informationtabs-bg: #f4f6f5;
	--preview-informationtabs-hover-bg: #fafafa;
	--preview-informationtabs-active-bg: #ffffff;
	--preview-informationtabs-active-border: #dddddd;
	--preview-informationtabs-active-border-bottom: #ffffff;
	--sidebar-width: 300px;
	--sidebar-hover-bg: rgba(216,216,216,0.25);
	--tag-bg: #c4541d;
	--tag-text: #ffffff;

	/* Popup/Modal */
	--popup-modal-header-text: #005950;
	--popup-modal-header-border: #808080;

	/* Font/Box */
	--border-radius: 4px;
	--font-size-md: 1.2rem;
	--font-size-xd: 1.4rem;

}

/* .fotoweb-dark selector overrides :root variables when the dark mode is activated. */
html.fotoweb-dark {
	
	/* General */
	--link-text: #d3d3d3;
	--link-text-hover: #ffffff;
	--text: #ebebeb;

	/* Login/Signup/Password */
	--login-page-form-background-color: #191d21;
	
	/* Header */
	--header-bg: #303437;
	--header-text: #aaaaaa;
	--header-text-hover: #ffffff;
	--searchfield-select: #21b3ec;
	--form-control-border: #3d4347;

	/* Homepage-Banner */
	--home-page-search-bg: #f4f4f4;
	--home-page-title-text: #000000;
	
	/* Button */
	--btn-bg: #21b3ec;
	--btn-bg-hover: #129ed5;
	--btn-text: #000000;
	--btn-text-hover: #000000;
	--btn-bg-disabled: #888888;
	--btn-bg-hover-disabled: #0058A1;
	--btn-text-disabled: #ffffff;
	--btn-text-hover-disabled: #ffffff;

	/* Badge/Pin */
	--badge-count-bg: #d5001c;
	--badge-count-text: #ffffff;
	--pin-icon: #ebebeb;

	/* Archive/Album-Overview */
	--collection-item-title-text: #ebebeb;
	--collection-item-title-bg: rgba(0,0,0,0.6);
	--collection-item-pin: rgba(255,255,255,0.5);
	--collection-item-pin-active: #ff7171;

	/* Archive-Page */
	--marker-bg: #303437;
	--scrollbar-color-bg: #222;
	--scrollbar-color-bar: #333;
	--sorting-active-bg: #eeeeee;
	--taxonomy-separator: #999999;
	--taxonomy-select-border: #e74c3c;
	--thumbnail-select: #21b3ec;
	--thumbnail-border: #474a4d;
	--thumbnail-text: #ebebeb;
	
	/* Archive Tab-Navigation */
	--archive-tab-bg: #2b2e31;
	--archive-tab-active-bg: #191d21;
	--archive-tab-active-border: #5e6164;
	--archive-tab-active-border-bottom: #191d21;
	--archive-tab-icon-mark: rgba(255,255,255,0.5);

	/* Detail-Page */
	--preview-sidebar-bg: #303437;
	--preview-markers-bg: #191d21;
	--preview-informationtabs-bg: #2b2e31;
	--preview-informationtabs-hover-bg: #55595d;
	--preview-informationtabs-active-bg: #191d21;
	--preview-informationtabs-active-border: #6c6c6c;
	--preview-informationtabs-active-border-bottom: #191d21;
	--sidebar-hover-bg: rgba(216,216,216,0.25);
	--tag-bg: #21b3ec;
	--tag-text: #ffffff;

}



/* ==============================================================================
   FOTOWARE PROF-SERVICES TEMPLATE
   
   DON'T CHANGE ANYTHING HERE - USE CUSTOM OVERRIDES SECTION FOR CHANGES
   ============================================================================== */

body {
	color: var(--text);
}


/* ==============================================================================
   LOGIN/SIGNUP/PASSWORD
   ============================================================================== */

.fotoweb-default .login-type-page-content a,
.fotoweb-default .login-type-page-content .form-check label,
.login-type-page-content .form-item,
.login-type-page-form,
.signup-terms-and-conditions-modal .modal-header,
.signup-terms-and-conditions-modal .modal-content,
.signup-terms-and-conditions-modal .modal-footer {
	color: var(--text);
}

.login-type-page-form,
.signup-terms-and-conditions-modal .modal-header,
.signup-terms-and-conditions-modal .modal-content,
.signup-terms-and-conditions-modal .modal-footer {
    background-color: var(--login-page-form-background-color);
}

html:not(.fotoweb-dark) .login-type-page-content .form-text {
    border: 1px solid #cccccc;
}



/* ==============================================================================
   HEADER
   ============================================================================== */

.navbar-inner {
    background-color: var(--header-bg);
}

.navbar-logo img {
	height: var(--navbar-logo-height);
	vertical-align: middle;
}

.main-menu-item-link,
.intranetextra-item .intranetextra-link,
.extended-nav .settings-link,
.extended-nav #userMenuButton .user-button-arrow-down,
.extended-nav #userMenuButton .offlineAvatarSmall {
    color: var(--header-text);
}

.main-menu-item-link:hover,
.main-menu-item-link.active,
.intranetextra-link:hover,
.intranetextra-link.active,
.extended-nav .menu-icon:hover,
.extended-nav .menu-icon:active,
.nav-link.intranetextra-link:hover,
.nav-link.intranetextra-link:active,
#navigation #userMenuButton:hover .user-button-arrow-down,
#navigation #userMenuButton:hover .offlineAvatarSmall {
	color: var(--header-text-hover) !important;
}

.extended-nav #userMenuButton:hover {
	background-color: var(--header-usermenu-hover-bg);
	cursor: pointer;
}

html.fotoweb-dark .extended-nav #userMenuButton:hover  {
	background-color: inherit;
}

.header-search .form-control {
	border-color: var(--form-control-border);
}

@media screen and (max-width: 1225px) {
  .searchBarPositionOverride .navbar-custom-fixed-top .navbar-search {
	  background-color: transparent;
  }
}



/* ==============================================================================
   HOMEPAGE-BANNER
   ============================================================================== */

.home-page-search {
    background-color: var(--home-page-search-bg);
}

.home-page-search .content-title {
	color: var(--home-page-title-text);
}

.navbar-search .main-search-field:focus {
	border-color: var(--searchfield-select);
	box-shadow: 0 0 0 1px var(--searchfield-select), 0 0 10px 1px rgba(0, 0, 0, 0.3);
}



/* ==============================================================================
   ARCHIVE/ALBUM-OVERVIEW-PAGE
   ============================================================================== */

.collections-list {
	justify-content: center;
}

.collections-list .collections-list-item {
    border-radius: var(--border-radius);
}

.collections-list .collections-list-item-in {
    border-radius: var(--border-radius);
    text-align: left;
}

.collections-list-item-in:focus {
	outline-color: var(--thumbnail-select);
}

.collections-list .collections-list-item-title {
	background: var(--collection-item-title-bg);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	color: var(--collection-item-title-text);
	font-size: var(--font-size-md);
	font-weight: bold;
	height: auto;
	padding: 1px 9px 4px 9px;
	text-align: center;
}

.collections-list-item .collections-list-item-pin {
	border-radius: var(--border-radius);
	color: var(--collection-item-pin);
	font-size: var(--font-size-md);
	height: 26px;
	line-height: 26px;
    padding: 0 7px;
	position: absolute;
	right: 2px;
    top: 2px;
	width: auto;
}

.collections-list-item .collections-list-item-pin.active {
	color: var(--collection-item-pin-active);
}

.add-archive-element .add-archive-cover {
	width: max-content;
}

.add-archive-element .add-archive-title {
	margin: 0;
	padding-right: 7px;
}



/* ==============================================================================
   TAB-NAVIGATION (ARCHIVE-PAGE)
   ============================================================================== */

.collections-tabs.collections-tabs.nav-tabs .nav-item .nav-link,
.collections-dropdown .add-archive,
.collections-dropdown .dropdown-toggle {
    background-color: var(--archive-tab-bg);
    border: 0;
}

.collections-tabs.collections-tabs.nav-tabs .nav-item.active .nav-link,
.collections-tabs.collections-tabs.nav-tabs .nav-item.active .nav-link:hover {
	background-color: var(--archive-tab-active-bg);
	border: 1px solid var(--archive-tab-active-border);
	border-bottom-color: var(--archive-tab-active-border-bottom);
	font-weight: bold;
}

.collections-tabs.collections-tabs.nav-tabs .icon-mark ,
.collections-tabs-wrapper .collections-dropdown .icon-mark {
	color: var(--archive-tab-icon-mark);
}

.collections-dropdown .nav-icon {
	margin-right: 4px;
}



/* ==============================================================================
   BREADCRUMP (ARCHIVE-PAGE)
   ============================================================================== */

.breadcrumb .inactive .breadcrumb-name {
    max-width: 100%;
}

.breadcrumb .search-for-quotes {
	display: none !important;
}

.breadcrumb .search-for-content {
	font-weight: bold;
}



/* ==============================================================================
   SIDEBAR (ARCHIVE-PAGE)
   ============================================================================== */

.scroll-sidebar #sidebar:not(:empty) {
	overflow: hidden;
	padding-right: 20px;
	scrollbar-color: var(--scrollbar-color-bar) var(--scrollbar-color-bg);
    scrollbar-width: thin;
    width: var(--sidebar-width);
}

.scroll-sidebar #sidebar:not(:empty):hover {
	overflow-y: scroll;
    padding-right: 10px;
}



/* ==============================================================================
   FOLDER/SMART FOLDER (ARCHIVE-PAGE)
   ============================================================================== */

.folders-list-item,
.folders-list-item-name,
.folders-list-item-pin {
	height: 30px;
	line-height: 25px;
}

.folders-list-element:hover,
.folders-list-create-item:hover {
	background-color: var(--sidebar-hover-bg);
}



/* ==============================================================================
   TAXONOMY (ARCHIVE-PAGE)
   ============================================================================== */

.taxonomy .taxonomy-items {
	padding-top: 10px;
}

.taxonomy .expandable-block-header:after {
	background: var(--taxonomy-separator);	
}

.taxonomy .taxonomy-item-base {
	padding-left: 2px;
}

.taxonomy .taxonomy-search-wrapper {
	padding-top: 0;
}

.taxonomy .form-control {
	border-color: var(--form-control-border);
}

.taxonomy .taxonomy-item-title,
.taxonomy .taxonomy-action {
	height: inherit;
	line-height: inherit;
}

.taxonomy .taxonomy-item .taxonomy-item-title {
    white-space: normal;
}

.taxonomy .taxonomy-item:hover {
    background-color: var(--sidebar-hover-bg);
}

.taxonomy .taxonomy-item.selected {
    border-color: var(--taxonomy-select-border);
}



/* ==============================================================================
   THUMBNAIL (ARCHIVE-PAGE)
   ============================================================================== */

.thumbnail {
    border-color: var(--thumbnail-border);
    border-radius: var(--border-radius);
}

.thumbnails .thumbnail:hover,
.selected .thumbnail,
.selected .thumbnail:hover {
	border-color: var(--thumbnail-select);
	box-shadow: 0 0 0 1px var(--thumbnail-select), 0 0 10px 1px rgba(0, 0, 0, 0.3);
}

.selected .thumbnail .infobar {
	background-color: var(--thumbnail-select);
	color: var(--thumbnail-text);
}

.selected .thumbnail .asset-pin {
	color: var(--thumbnail-text);
}

.thumbnail .thumb-label {
	font-size: 0.9rem;
	text-align: center;
}

.thumbnail .asset-pin {
	font-size: 1rem;
}

.thumbnail .imageContainer {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.thumbnail .status-bar {
    border-radius: 0 0 0 var(--border-radius);
}

.thumbnail .icon-fa-check,
.thumbnail .shopping-cart-thumb-icon,
.thumbnail .shopping-cart-thumb-spinner {
	font-size: var(--font-size-xd);
}

.thumb-tooltip {
	font-size: 0.9rem;
}

.thumb-tooltip .rating-info {
	font-size: var(--font-size-md);
}

.markers-container.markers-hide {
    display: block !important;
}

.marker.interactive:hover,
.marker.interactive:active {
	border-bottom: 0;
}

.marker-wrapper-all .marker-wrapper {
	background-color: var(--marker-bg);
	border: 0;
}

.markers-container .marker-wrapper-all {
   display: none;
}

.markers-container .marker-wrapper-part {
   display: block;
}

.marker-wrapper-left-single,
.marker-wrapper.marker-wrapper-left,
.marker-wrapper.marker-wrapper-left .marker,
.marker-wrapper.marker-wrapper-left-single .marker,
.marker-wrapper.marker-wrapper-left .marker.interactive:hover,
.marker-wrapper.marker-wrapper-left .marker.interactive:active {
    border: 0;
    border-radius: var(--border-radius) 0;
}

.marker-wrapper.marker-wrapper-right,
.marker-wrapper.marker-wrapper-right .marker,
.marker-wrapper.marker-wrapper-right-single .marker,
.marker-wrapper.marker-wrapper-right .marker.interactive:hover,
.marker-wrapper.marker-wrapper-right .marker.interactive:active {
    border: 0;
    border-radius: 0 var(--border-radius);
}



/* ==============================================================================
   SORTING (ARCHIVE-PAGE)
   ============================================================================== */

.sorting-list-item-active,
.sorting-variants-item-active {
	background-color: var(--sorting-active-bg);
}



/* ==============================================================================
   DETAIL-PAGE
   ============================================================================== */

.sidebarBox {
	background-color: var(--preview-sidebar-bg);
    border-radius: var(--border-radius);
    margin-bottom: 6px;
    padding: 8px;
}

.sidebarBox:empty {
	display: none;
}

.sidebarBox .metadata-label,
#headerCaptionWrapper div:nth-of-type(3) .metadataRegion__field__label {
	font-size: 0.85rem;
	font-weight: 700;
    text-transform: uppercase;
}

.preview-title .metadataField.inputField .editMarkup,
.preview-title .metadataField.bagField .editMarkup,
.preview-title .metadataField.inputField .viewMarkup,
.preview-title .metadataField.bagField .viewMarkup {
	font-size: 2rem;
    line-height: 1.2;
}

.preview-title-with-pin .image-note {
    right: -7px;
    top: -7px;
}

.preview-title-with-pin .asset-pin {
	font-size: var(--font-size-xd);
    right: 0;
    top: 3px;
}

.preview-title .rating-info .fa {
	font-size: var(--font-size-md);
}

.preview-markers-container {
    background: var(--preview-markers-bg);
    border: 0;
    margin-top: 8px;
	padding: 3px;
}

#previewPage #metadata h2 {
    border-top: none;
	font-size: 1.1rem;
    font-weight: bold;
    margin-top: 0;
    padding-top: 0;
    text-transform: uppercase;
}

.preview-title .mini-preview img {
	border: 0;
	height: 100px;
    width: 100px;
}

.preview-title-with-preview .metadataField.inputField,
.preview-title-with-preview .metadataField.bagField {
    width: calc(100% - 123px);
}

.previewTab {
    background: none;
    border: 0;
}

#previewPage .informationTabs .nav-link {
    background-color: var(--preview-informationtabs-bg);
    border: 0;
	margin-top: 6px;
	padding: 5px 15px;
}

#previewPage .informationTabs .nav-link:hover {
	background-color: var(--preview-informationtabs-hover-bg);
}

#previewPage .informationTabs .nav-link.active,
#previewPage .informationTabs .nav-link.active:hover {
	background-color: var(--preview-informationtabs-active-bg);
	border: 1px solid var(--preview-informationtabs-active-border);
	border-bottom-color: var(--preview-informationtabs-active-border-bottom);
	font-weight: bold;
	margin-top: 0;
	padding-top: 8px;
	padding-bottom: 8px;
}

.previewTab .tab-pane {
	padding: 5px 0;
}

#previewInformationTabContent .metadatarow {
    padding-top: 8px;
}

.preview-content-wrapper .metadataRegion .metadata-row .metadata-label,
#previewInformationTabContent .metadatarow .metalabel {
	font-size: 0.85rem;
    text-transform: uppercase; 
}

.drag-and-drop-container .fa {
	float: left;
	padding: 4px 4px 0 0;
}



/* ==============================================================================
   BADGE/PIN
   ============================================================================== */

.asset-pin-active,
.collections-tabs .favorite-active .icon-mark,
.collections-list-item .collections-list-item-pin.active,
.folders-list-item-pin-active,
.is-pin,
.navbar-search .clear-icon {
    color: var(--pin-icon) !important;
}

.archiveTabs > li .count,
.archiveDropdown > li .count,
.breadcrumb .hit-count,
.breadcrumb .asset-count,
.collections-tabs > li .matches-count,
.collections-dropdown .matches-count,
.number-badge,
.taxonomy .taxonomy-count {
    background-color: var(--badge-count-bg) !important;
	color: var(--badge-count-text);
}



/* ==============================================================================
   LINK/TAXONOMY/FOLDER
   ============================================================================== */

a,
.breadcrumb a,
.folder-navigation .add-smart-folder,
.fotoweb-dark a,
.preview-navigation-item,
.selection-panel .unselect-all,
#sidebar .collapse-all,
.sorting-controler .sorting-name,
.sorting-controler .sorting-direction,
.taxonomy-navigation .taxonomy-item-title:not([href]),
.taxonomy .taxonomy-clear-all,
.taxonomy .icon-add,
.taxonomy .btn-input-control .btn-input {
	color: var(--link-text);
}

a:hover,
.breadcrumb a:hover,
.folder-navigation .add-smart-folder:hover,
.selection-panel .unselect-all:hover,
.sorting-controler .sorting-name:hover,
.sorting-controler .sorting-direction:hover,
.preview-navigation-item:hover,
.taxonomy-navigation .taxonomy-item-title:not([href]):hover,
.taxonomy .icon-add:hover,
.taxonomy .btn-input-control .btn-input:hover {
	color: var(--link-text-hover);
}



/* ==============================================================================
   TAG
   ============================================================================== */

.bagItemEditMode,
.bagItemViewMode {
	background-color: var(--tag-bg);
	border-color: var(--tag-bg);
	color: var(--tag-text);
}

.bagItemEditMode::after,
.bagItemEditMode::before,
.bagItemViewMode::after,
.bagItemViewMode::before {
	border-left-color: var(--tag-bg);
}



/* ==============================================================================
   BUTTON
   ============================================================================== */

.btn-primary,
.btn-upload,
.navbar-search .main-search-btn,
#quickBtnDropdown .more-actions {
	background-color: var(--btn-bg);
	border-color: var(--btn-bg);
	color: var(--btn-text);
}

.btn-primary:hover,
.btn-upload:hover,
.navbar-search .main-search-btn:hover,
#quickBtnDropdown .more-actions:hover {
	background-color: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
	color: var(--btn-text-hover);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: var(--btn-bg-disabled);
	border-color: var(--btn-bg-disabled);
	color: var(--btn-text-disabled);
}

.btn-primary.disabled:hover {
	background-color: var(--btn-bg-hover-disabled);
	border-color: var(--btn-bg-hover-disabled);
	color: var(--btn-text-hover-disabled);
}

html.fotoweb-dark .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--btn-bg);
	border-color: var(--btn-bg);
	color: var(--btn-text);
}



/* ==============================================================================
   POPUP/MODAL
   ============================================================================== */

.modal-header,
.popover-title {
	border-color: var(--popup-modal-header-border);
	color: var(--popup-modal-header-text);
}

.grid-action-panel .popover-content {
    max-height: 100%;
}



/* ==============================================================================
   HIDDEN ELEMENTS
   ============================================================================== */

.drag-and-drop-container {
	display: none !important;
}



/* ===============================================================================
   CUSTOM OVERRIDES
   
   UPDATE OR ADD CUSTOM CSS BELOW THIS LINE
 ================================================================================= */
 /* ===============================================================================
archive Tab color
 ===============================================================================*/
 
 .nav-link{color:#005950;}

/* Change ARCHIVES link to COLLECTIONS */
#archivesLink .main-menu-item-text
{
font-size: 0;
}
#archivesLink .main-menu-item-text::before
{
content: "COLLECTIONS";
font-size: 12px;
}