/* 	To revert to default style and look for the HTTPS interface simply remove the customize folder. */

/* ── Brand colours ────────────────────────────────────────────────────────────
   Change --base-color to shift every primary-colour accent at once.
   Values are HSL hue (0–360) and saturation; lightness is set separately.
   Example: blue  →  --base-color: 210, 80%;  --base-color-lightness: 45%;
            green →  --base-color: 140, 60%;  --base-color-lightness: 38%;  */

:root {
	--base-color: 223, 100%;        /* hue, saturation */
	--base-color-lightness: 47.06%;   /* lightness — tweak for lighter/darker accent */

	--color-primary: var(--base-color), var(--base-color-lightness);
	--ext-folder-color: #858585;      /* Folder & zip icon colour in file list. */
}


/**************** General typography & background ****************/

body {
	font-size: 10pt;
	font-family: "Inter", "sans-serif";
	/*color: black !important;*/ /* Uncomment to force text color everywhere. */
}

html, body {
	background: #FFF; /* Page background behind all panels. */
}


/**************** Header ****************/

#header {
	background-color: #FFFFFF; /* Top bar background. */
	font-family: "Inter", "sans-serif";
	font-size: 10pt;
}

/* Logout icon colour (uses primary by default). */
.logout-option {
	color: hsl(var(--color-primary));
}

/* Logout icon spins on hover — remove transform to disable. */
.logout-option:hover {
	transform: rotate(90deg);
}

/* Settings / help icons on hover. */
.system-option:hover {
	color: hsl(var(--color-primary));
}


/**************** Header: toolbar buttons ****************/

/* The row of action buttons (download, rename, copy…). */
.topmenu .topButton {
	font-family: "Inter", "sans-serif";
	font-weight: 500;
	font-size: 16px;
	fill: #757575;   /* Icon colour at rest. */
}

.topmenu .topButton:hover.enabled {
	background-color: #d4d4d4; /* Button hover background. */
}

/* "Upload" button label. */
.qq-upload-button {
	color: #000;
	font-family: "Inter", "sans-serif";
}

/* Active upload / download progress bar header strip. */
.uploadingbutton, .workingbutton {
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: #FFFFFF;
	font-family: "Inter", "sans-serif";
}

.uploadingbutton svg:hover {
	color: hsla(var(--color-primary), 0.85);
}

/* Toggle slider (used in share/receive dialogs). */
input:hover + .slider:before {
	background-color: #FFFFFF;
}

input:checked + .slider:before {
	-webkit-transform: translateX(22px);
	-ms-transform: translateX(22px);
	transform: translateX(22px);
	background-color: #FFFFFF;
}


/**************** Header: upload progress box ****************/

.uploadingbox {
	background: #fff; /* Background of the collapsible upload list panel. */
}

.uploadheader {
	font-family: "Inter", "sans-serif";
	font-size: 13px;
	font-weight: bold;
	color: #000;
}

/* The coloured progress bar inside the upload panel. */
#uploadProgressBackground {
	background-color: hsl(var(--color-primary));
	width: 0%; /* Adjusted by JavaScript — do not change. */
	height: 10px;
}

.qq-upload-cancelbutton-all:hover {
	color: hsl(var(--color-primary));
	transition: 0.25s;
}

/* "Overwrite?" prompt buttons inside the upload panel. */
.qq-upload-overwrite-prompt .button, .uploadingOverwriteAll .button {
	background-color: #000000;
	color: #FFFFFF;
}

.qq-upload-overwrite-prompt .button:hover, .uploadingOverwriteAll .button:hover {
	background-color: hsl(var(--color-primary));
}


/**************** Header: dropdown menu (small screens) ****************/

.submenu {
	background: #fff;
	border: 1px solid #cccccc;
}

/* Disabled / inactive menu item text colour. */
.dropdown .menubutton {
	color: #aaaaaa;
}

.dropdown .menubutton:hover {
	background: #d9e0ea;
	text-decoration: none;
}

/* Enabled menu item text colour. */
.enabledbuttons.submenu .enabled {
	color: #3e3e3e;
}


/**************** Logos ****************/

/* To use a custom logo, replace the url() value with your own file path.
   Supported: SVG or PNG. Keep background-size: contain for SVG.            */

/* Large screen logo in header. */
#imagelarge {
	background-image: url("/BbhiLv252VR7CPwP/svg/provide_logo.svg");
	flex: 0 0 148px;   /* Reserved width — increase if your logo is wider. */
	height: 38px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 28px;
}

/* Small screen logo in header (shown on mobile). */
#imagesmall {
	background-image: url("/BbhiLv252VR7CPwP/img/logosmall.png");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 2.75em;
	height: 2.75em;
}

/* Logo on the login / logout page. */
#imagelogo {
	/*background-image: url("/BbhiLv252VR7CPwP/svg/provide_logo.svg");*/
	width: 244px;
	height: 64px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Logo on receive / share link pages. */
#imagelogoorange {
	background-image: url("/BbhiLv252VR7CPwP/svg/provide_logo.svg");
	width: 152px;
	height: 40px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Logo on the initial welcome / settings dialog. */
#imagewelcome {
	background-image: url("/BbhiLv252VR7CPwP/svg/provide_logo.svg");
	flex: 0 0 148px;
	height: 1.5em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/*margin-left: 28px;*/
}


/**************** Login page ****************/

#login:hover {
	background: hsl(var(--color-primary)); /* Login button hover. */
}

.login-page #backtologin:hover {
	background: hsl(var(--color-primary)); /* "Back to login" button hover. */
}


/**************** Sidebar: accordion buttons ****************/

/* The expandable section headers (Folders, Shares, Favourites…). */
.accordion-button {
	color: #757575; /* Collapsed state. */
}

.accordion-button.open {
	color: #000000; /* Expanded state. */
}

.accordion-button:hover {
	color: rgba(0, 0, 0, 0.85);
}

/* Folder path link in the breadcrumb / panel heading. */
.rootfolder-title:hover {
	text-decoration: underline;
	color: hsl(var(--color-primary));
}

/* ✕ button that clears the search field. */
#clearsearchbutton:hover {
	color: hsl(var(--color-primary));
}


/**************** Sidebar: folder tree ****************/

/* color controls both text and SVG icons (via fill="currentColor" in SVGs). */

#foldertree li {
	color: #616161;
}

#foldertree li:hover {
	color: hsla(var(--color-primary), 0.85);
}

#foldertree li.sel {
	color: hsl(var(--color-primary)); /* Currently selected folder. */
}

/* Favourites / shares / receive / collaborate list items. */
.favorite_list_item, .share_list_item, .receive_list_item, .collaborate_list_item {
	color: #616161;
}

.favorite_list_item:hover, .share_list_item:hover, .receive_list_item:hover, .collaborate_list_item:hover {
	cursor: pointer;
	color: hsla(var(--color-primary), 0.85);
}

/* Active (selected) link in a list. */
#favoritelist .clickedtr, #sharelist .clickedtr, #collaboratelist .clickedtr, #receivelist .clickedtr {
	color: hsl(var(--color-primary));
}

#favoritelist .clickedtr:hover, #collaboratelist .clickedtr:hover, #receivelist .clickedtr:hover, #sharelist .clickedtr:hover {
	color: hsla(var(--color-primary), 0.85);
}

/* Share / receive / collaborate icons in the file table row. */
.receiveicon:hover, .shareicon:hover, .collaborateicon:hover {
	color: hsl(var(--color-primary));
}


/**************** Sidebar panel ****************/

/* Left panel background and divider. */
#left-wrap {
	border-right: 1px solid #E0E0E0;
	background-color: #F8F8F8;
}

/* List / gallery / thumbnail view-toggle buttons. */
.listbutton:hover {
	background: hsla(var(--color-primary), 0.85);
	color: #FFFFFF;
}

.listbutton.selected {
	background: hsl(var(--color-primary));
	color: #FFFFFF;
}

/* Currently open folder / selected item highlight in the left panel. */
#left .rightsel {
	color: hsl(var(--color-primary));
}

#left svg + .rightsel {
	color: hsl(var(--color-primary));
}

/* "Generate link" text button inside share/receive panels. */
.generateButton:hover {
	color: hsl(var(--color-primary));
	background-color: white;
}

/* Action buttons at the bottom of share/receive/collaborate dialogs. */
.link-buttons button:hover {
	background: hsl(var(--color-primary));
}

.link-buttons button:focus {
	background: hsla(var(--color-primary), 0.85);
}

.receiveButtons button:hover,
.collaborateButtons button:hover,
.shareButtons button:hover,
.welcomeButtons button:hover
{
	background: hsl(var(--color-primary));
}

.receiveButtons button:focus,
.collaborateButtons button:focus,
.shareButtons button:focus,
.welcomeButtons button:focus
{
	background: hsl(var(--color-primary));
}


/**************** Breadcrumbs & share/receive inputs ****************/

/* Path breadcrumb chips above the file list. */
.breadcrumb {
	margin-right: 8px;
	font-size: 12px;
	color: hsl(var(--color-primary));
	height: 14px;
	display: flex;
	align-items: center;
}

/* Copy-link / open-link input button on share/receive pages. */
.sharereceiveinput:hover {
	background-color: hsl(var(--color-primary));
}

.sharereceiveinput:active {
	background-color: hsl(var(--color-primary));
}


/**************** File table ****************/

/* Selected row background. */
#filetable .clickedtr:not(.processing) td {
	background-color: #bbbbbb;
}

/* Selected row background while hovering. */
#filetable .filetable_hover.clickedtr:hover td, #filetable .filetable_hover.clickedtr.hovered td {
	background-color: #d2d2d2;
}

/* Row highlighted as a drag-and-drop target. */
#filetable .droppable td {
	background-color: #d2d2d2;
}

/* Folder tree item highlighted as a drag-and-drop target. */
#foldertree .droppable {
	color: hsl(var(--color-primary));
}

a.droppable {
	color: hsl(var(--color-primary));
}

/* "Upload to folder" button in the folder info panel. */
.uploadtofolder {
	background: hsl(var(--color-primary));
	border-radius: 8px;
	height: 40px;
	min-width: 126px;
	margin-right: 20px;
	justify-content: center;
	display: flex;
	align-items: center;
	color: white;
	transition: 0.25s;
}

.uploadtofolder:hover {
	background: hsla(var(--color-primary), 0.85);
}

/* Refresh button beside the folder name. */
.refresh:hover {
	color: hsla(var(--color-primary), 0.85);
}

/* Column header row. */
#filetable th {
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #000000;
}

#filetable th.sortbyname:hover, #filetable th#tablelastchanged:hover, #filetable th#tablesize:hover {
	color: hsla(var(--color-primary), 0.85);
}

/* File list rows — main text. */
#filetable #filetablebody {
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	color: #676767;
}

/* Compact ("small") layout row text. */
#filetable #filetablebody.layoutsmall {
	font-weight: 400;
	font-size: 14px;
	line-height: 8px;
}

/* Hover / keyboard-focus row highlight. */
#filetable .filetable_hover:hover td, #filetable .hovered td {
	background-color: #d2d2d2;
}

/* Secondary metadata columns (type, date, size). */
#filetable td.cellfiletype, #filetable td.celllastchanged, #filetable td.cellsize {
	font-weight: 400;
	font-size: 0.8em;
	line-height: 2em;
	color: #757575;
}


/**************** Dialogs ****************/

/* Background and text colour of all modal dialog boxes. */
.dialogtable {
	background-color: #ffffff;
	color: #333333;
}

/* Option cards (used in the share/receive type-selection step). */
.option-card:has(input:checked) .border-title {
	border-color: hsl(var(--color-primary));
	background-color: hsl(var(--base-color), calc(var(--base-color-lightness) + 42%));
	color: hsl(var(--color-primary));
}

.option-card:has(input:checked) {
	background-color: hsla(var(--color-primary), 0.05);
	border-color: hsl(var(--color-primary));
}

.left-click-option .check-mark {
	visibility: hidden;
	color: hsl(var(--color-primary));
	width: min-content;
	margin-top: 6px;
	margin-left: auto;
	margin-right: auto;
}

.option-card:has(input:checked) .check-bullet {
	color: hsl(var(--color-primary));
}

.option-card:has(input:checked) .option-card-title {
	color: hsl(var(--color-primary));
}

/* "Advanced options" / text-link style button in dialogs. */
.textButton label {
	display: block;
	width: max-content;
	font-size: 16px;
	margin-top: 16px;
	color: hsl(var(--color-primary));
}


/**************** Secret folder dialog ****************/

.secret-folder-input:focus {
	border-color: hsl(var(--color-primary));
	box-shadow: 0 0 0 2px hsla(var(--color-primary), 0.2);
}

.secret-folder-toggle-pw:hover {
	border-color: hsl(var(--color-primary)); /* Show-password toggle button. */
}


/* ── Icon color overrides ─────────────────────────────────────────────────────
   Uncomment and adjust any of these to re-theme individual icon colors.
   Defaults are defined in browse.css and apply when a rule below is commented. */

/* Upload "done" checkmark circle (default: #38A700) */
/* .qq-done-icon { color: #38A700; } */

/* Search and refresh-search magnifier (default: #757575) */
/* #searchbutton,
   #refreshsearchbutton { color: #757575; } */

/* Arrow inside the filled-circle receive icon (default: white) */
/* :root { --icon-receive-fg: white; } */


/* ── Icon size overrides (uncomment to customise) ────────────────────────────
/* .ic-xs   { width: 16px; height: 16px; } */
/* .ic-sm   { width: 22px; height: 22px; } */
/* .ic-md   { width: 26px; height: 26px; } */
/* .ic-lg   { width: 30px; height: 30px; } */
/* .ic-xl   { width: 36px; height: 36px; } */
/* .ic-menu { width: 30px; height: 20px; } */