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

:root {
	--base-color: 31.25, 100%;
	--base-color-lightness: 47.06%;

	--color-primary: var(--base-color), var(--base-color-lightness);
}


/**************** Style default ****************/

/* Default font family and font size. Use !important to override colors and font.*/
body{
	font-size:10pt;
	font-family: "Inter", "sans-serif";
	/*color: black !important;*/ /* Change text color on all text. */
}

/* Default background color. */
html, body {
	background: #FFF;
}



/**************** Style header ****************/

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

.logout-option{
	color: hsl(var(--color-primary));
	fill: hsl(var(--color-primary));
	stroke: hsl(var(--color-primary));
}

.system-option:hover{
	color: hsl(var(--color-primary));
	fill: hsl(var(--color-primary));
	stroke: hsl(var(--color-primary));
}

.logout-option:hover{
	transform: rotate(90deg);
}

/**************** Header: Style buttons ****************/

.topmenu .topButton {
	font-family: "Inter", "sans-serif";
	font-weight: 500;
	font-size: 16px;
	fill: #757575;
	stroke: #757575;
}

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

.topmenu .topButton:active.enabled{
}

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

/* Upload and download progress buttons*/

.uploadingbutton, .workingbutton{
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: #FFFFFF;
	font-family: "Inter", "sans-serif";
}

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

input:hover + .slider:before {
	background-color: hsla(var(--color-primary), 0.6);
}

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

/**************** Header: Style uploading progress box ****************/

.uploadingbox {
	background: #fff;
}

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

#uploadProgressBackground {
	background-color: hsl(var(--color-primary));
	width: 0%; /* Adjust with JavaScript */
	height: 10px;
}

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

.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: Style dropdown menu (small screen size) ****************/
.submenu {
	background: #fff;
	border: 1px solid #cccccc;
}

.dropdown li .menubutton  {
	color: #aaaaaa;
}

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

.enabledbuttons.submenu .enabled {
    color: #3e3e3e;
}

/**************** Style and change logo ****************/

/* Large screen size. */
#imagelarge {
	background-image: url("/EWYCXdkCJAqFygfF/svg/steens_logo.svg");
    flex: 0 0 148px;
    height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	margin-left: 28px;
}

/* Small screen size. */
#imagesmall {
	background-image: url("/EWYCXdkCJAqFygfF/svg/steens_logo.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 2.75em;
	height: 2.75em;
}

/* Logo in login/logoutpage. */
#imagelogo {
	background-image: url("/EWYCXdkCJAqFygfF/svg/steens_logo.svg");
    width: 244px;
	height: 64px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Logo in receive/share page. */
#imagelogoorange {
	background-image: url("/EWYCXdkCJAqFygfF/svg/steens_logo.svg");
    width: 152px;
	height: 40px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
/* Logo on initial settings dialog. */
#imagewelcome {
	background-image: url("/EWYCXdkCJAqFygfF/svg/steens_logo.svg");
    flex: 0 0 148px;
	height: 1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	/*margin-left: 28px;*/
}

.progress{
	display: contents;
}

#login:hover {
	background: hsl(var(--color-primary));
}

.login-page  #backtologin:hover {
	background: hsl(var(--color-primary));
}

/**************** Style accordions in folder tree ****************/

.accordion-button {
	color: #757575;
	fill: #757575;
	stroke: #757575;
}

.accordion-button.open {
	color: #000000;
	fill: #000000;
	stroke: #000000;
}

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

.rootfolder-title:hover{
	text-decoration: underline;
	color: hsl(var(--color-primary));
}

#clearsearchbutton:hover {
	fill: hsl(var(--color-primary));
}

#foldertree li{
	color: #616161;
	fill: #616161;
	stroke: #616161;
}

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

#foldertree li.sel{
	color: hsl(var(--color-primary));
	fill: hsl(var(--color-primary));
	stroke: hsl(var(--color-primary));
}

.favorite_list_item, .share_list_item, .receive_list_item, .collaborate_list_item{
	color: #616161;
	fill: #616161;
	stroke: #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);
	fill: hsla(var(--color-primary), 0.85);
	stroke: hsla(var(--color-primary), 0.85);
}

#favoritelist .clickedtr, #sharelist .clickedtr, #collaboratelist .clickedtr, #receivelist .clickedtr{
	color: hsl(var(--color-primary));
	fill: hsl(var(--color-primary));
	stroke: hsl(var(--color-primary));
}

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

.receiveicon:hover, .shareicon:hover, .collaborateicon:hover{
    fill: hsl(var(--color-primary));
}

/**************** Style folder tree ****************/

#left-wrap {
    border-right: 1px solid #E0E0E0;
    background-color: #F8F8F8;
}

.left-navigation{
	/* background: #181059;
	border-radius: 0px 40px 0px 0px; */
}

						  
							  
							
						   
 

.listbutton:hover{
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	height:25px;
	background: hsla(var(--color-primary), 0.85);
	border-radius: 2px;
	margin-left: 6px;
	color: #FFFFFF;
	fill: #FFFFFF;
	stroke: #FFFFFF;
}

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

#left .rightsel{
	color: hsl(var(--color-primary));
	fill: hsl(var(--color-primary));
	stroke: hsl(var(--color-primary));
}

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

.generateButton:hover{
	color: hsl(var(--color-primary));
	background-color: white;
}

.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));
}

.breadcrumb{
	margin-right: 8px;
	font-size: 12px;
	color: hsl(var(--color-primary));
	height: 14px;
	display: flex;
	align-items: center;
}

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

/**************** Style file tree ****************/

#filetable .clickedtr td {
    background-color: #bbbbbb;
}

#filetable .filetable_hover.clickedtr:hover td, #filetable .filetable_hover.clickedtr.hovered td {
	background-color:#d2d2d2;
}

#filetable .droppable td {
    background-color: #d2d2d2;
}

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

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

.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;
	fill: white;
	transition: 0.25s;
}

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

.refresh:hover{
	color: hsla(var(--color-primary), 0.85);
	fill: hsla(var(--color-primary), 0.85);
}

#filetable th {
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #000000;
}

#filetable #filetablebody {
	font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    color: #676767;
}

#filetable #filetablebody.layoutsmall {
	font-weight: 400;
    font-size: 13px;
    line-height: 8px;
}

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

#filetable .filetable_hover:hover td, #filetable .hovered td {
	background-color:#d2d2d2;
}

#filetable td.cellfiletype, #filetable td.celllastchanged, #filetable td.cellsize {
    font-weight: 400;
    font-size: 0.8em;
    line-height: 2em;
    color: #757575;
}

/**************** Style dialogs ****************/

.dialogtable {
	background-color: #ffffff;
	color: #333333;
}

.dialogheader {
	font-weight: bold;
	align-items: end;
}

.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;
	fill: hsl(var(--color-primary));
	width: min-content;  
	margin-top: 6px;
	margin-left: auto;
	margin-right: auto;
}

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

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

.textButton label{
	display: block;
	width: max-content;
	font-size: 16px;
	margin-top: 16px;
	color: hsl(var(--color-primary));
}