chrome.css

/* popup page zoom control */

#browser > footer .page-zoom-controls input[type=range] {position: absolute; background-image: linear-gradient(90deg, #0000 0 calc(22% - 2px), var(--colorBg) 0 22%, #0000 0 calc(40% - 2px), var(--colorBg) 0 40%, #0000 0 calc(58% - 2px), var(--colorBg) 0 58%, #0000 0 calc(77% - 2px), var(--colorBg) 0 77%, #0000 0 100%); box-shadow: 0 0 0 7px var(--colorAccentBgAlphaHeavy), 0 0 0 8px var(--colorBorder), 0 2px 12px hsl(0deg 0% 0% / 25%); visibility: hidden; opacity:0; transform: translate(-25px, -20px); transition: visibility .6s, opacity .2s ease-out .4s, transform .25s ease-in .36s !important;}
#browser > footer .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {visibility: visible; opacity: 1; transform: translate(-25px, -25px); transition: opacity: .1s ease-out .12s, transform .1s ease .1s !important;}
#browser > footer .page-zoom-controls input[type=range]::before {content: ''; position: absolute; pointer-events: none; border: 6px solid hsl(0deg 0% 0% / 0%); z-index: inherit; filter: drop-shadow(0 1px var(--colorBorder)); bottom: -19px; left: 50%; margin-left: -6px; border-top-color: var(--colorBgLight);}
#browser > footer .page-zoom-controls .zoom-percent {order:-1;} /* move % to left */

/* ###################################################################################################################################### */

/* Secure domain green highlighter  */
.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {-webkit-text-stroke-width: 0px; text-shadow: none;}
.UrlBar-AddressField > .SiteInfoButton:is(.secure, .certified) + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD, .UrlFragment-Wrapper ) {color: LightGreen; transition: 0.5s ease-out; -webkit-text-stroke: 0.1px #64ff64; } /*.UrlFragment-Wrapper is for ellipsis dot, dont use this on full URL */

/* warning domain pink highlighter */
.UrlBar-AddressField > .SiteInfoButton.warning + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD, .UrlFragment-Wrapper) {color: var(--colorImageFg, var(--colorAccentFg)); }

.SiteInfoButton.warning {
	color: var(--colorImageFg, var(--colorAccentFg));
	font-weight: bold;
animation: leftfade 700ms ease-out;
	opacity: 1;
	background-color:var(--colorAccentBgFadedMost);
	height: 24px;
	border-radius: var(--radiusHalf);
	min-width:fit-content;
	margin-left:-1px
}
.UrlBar-UrlFieldWrapper {
	min-width:50px;
}
.UrlBar-AddressField:has(.SiteInfoButton.warning) {
	background: var(--colorAccentBgDarker);
}
@keyframes bounce {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-5px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-2px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
    }
@keyframes blink {
  0% {
    opacity: 1;
  }
  
  20% {
    opacity: 0.5;
  }
 100% {
    opacity: 1;
  }
}
.UrlFragment-HostFragment-Subdomain:has([data-value="www*"]){ 
color:var(--colorImageFg, var(--colorAccentFg)); 
display:none;
}
.UrlFragment-Wrapper {
	/*color:var(--colorImageFg, var(--colorAccentFg));*/
	text-shadow: none;
	opacity:1;
	filter: saturate(140%);
	height: 24px;
}
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input {
color:var(--colorImageFg, var(--colorAccentFg));
background: transparent;
border-radius: var(--radius);
height: 24px;
animation: none !important;
}

/* ###################################################################################################################################### */

/* Fix some color? idk what i did here before */

 #tabs-container.top {
	transition: 0.3s;

}


.toolbar-mainbar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	 border-radius: var(--radiusHalf)!important;
	 transition: background-color 0.7s ease-out;
	 background: transparent;
	 border: none !important;
}
#main, #browser {
    background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker)!important;
	transition: background-color  0.7s ease-out; 
}
.mainbar {
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker)!important;
	border-radius: var(--radiusHalf)!important;
	transition: background-color  0.7s ease-out; 
}
.color-behind-tabs-on#browser.tabs-top #header {
	transition:0.7s ease-out;
}

.toolbar-extensions {
    background-color: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker) !important;
	transition: background-color 0.7s ease-out;
	border-radius: var(--radiusHalf)!important;
}
.toolbar-mainbar .toolbar-extensions {
	background-color: transparent;
}

#switch .addwebpanel-wrapper > button:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover, #switch > .button-toolbar:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover, #switch > * > .button-toolbar:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover, #switch > button:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover, #switch .addwebpanel-wrapper > button:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):active, #switch > .button-toolbar:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):active, #switch > * > .button-toolbar:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):active, #switch > button:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):active {
	background-color: transparent !important;
}
#switch .addwebpanel-wrapper > button.active:not(:focus), #switch > .button-toolbar.active:not(:focus), #switch > * > .button-toolbar.active:not(:focus), #switch > button.active:not(:focus) {
	color:var(--colorAccentBgFadedMost) ;
}
#switch .addwebpanel-wrapper > button.active, #switch > .button-toolbar.active, #switch > * > .button-toolbar.active, #switch > button.active {
    box-shadow: inset 2px 0 0 var(--colorAccentBgAlpha);
}
 #header, #main {
    position: unset;
}

 #header {
    height: unset;
	min-height:30px;
	background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
#titlebar #pagetitle {
	justify-items: center;
	overflow: hidden;
}
.color-behind-tabs-on#browser:not(.tabs-top) #header {
	color: var(--colorImageFg, var(--colorAccentFg));
}




	
.color-behind-tabs-on#browser:not(.tabs-top) #header {
	background-color: var(--colorAccentBg);
}
 .toolbar-tabbar.sync-and-trash-container {
	margin-right: -55px;
	transition: 0.3s;
}
.tabs-left .toolbar-tabbar.sync-and-trash-container, .tabs-right .toolbar-tabbar.sync-and-trash-container {
	Margin: 0px !important;
}
	

/* ###################################################################################################################################### */

/* Change toolbar button and extension button color same as tab bar's button */
.toolbar-mainbar > .button-toolbar > button, .BookmarkButton, .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button:not(:hover):not(:active):not(:focus):not(.button-pressed) { 
color: var(--colorImageFg, var(--colorAccentFg));
opacity:0.8;
}
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity:0.85;
}

.toolbar-mainbar .toolbar-extensions > .button-toolbar > button {
    filter: opacity(1);
}
.SiteInfoButton.secure svg path, .SiteInfoButton.certified svg path{
    fill: var(--colorImageFg, var(--colorAccentFg));
}
}
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button.button-pressed, .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button.button-pressed {
	background-image: linear-gradient(var(--colorBgAlphaHeavy), var(--colorBgAlpha));
    border-radius: var(--radiusHalf);
	opacity: 0.65;
}
	
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input {
color:var(--colorImageFg, var(--colorAccentFg));
}
.SiteInfoButton-Favicon, .SiteInfoButton-SearchEngineFavicon, .SiteInfoButton-SecurityBadge {
	color:var(--colorImageFg, var(--colorAccentFg));
}

/* ###################################################################################################################################### */


/* Colorful Pageload indicator */
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator { /* Progress bar background before load */
	border-radius: var(--radiusHalf) !important;  /* Progress bar background before load roundness */
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), var(--colorAccentBgAlpha);
	opacity:0.8;
	top: 0px;
	height:24px;
	left: 0px;
	right: 0px;
	border:none;
}
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value { /* the progressbar */
        background-color: var(--colorAccentBgAlpha);
		border-radius:var(--radiusHalf);
		opacity: 1;
		top:1px;

}
.SearchField, .UrlBar-AddressField {
    border-radius: 8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBg);
	opacity:1;
	border:  none;
	height:24px;
	top: 0px;
}
 .UrlBar-AddressField .pageload .pageload-ticker {
	 color: var(--colorImageFg, var(--colorAccentFg));
	 Display:none;
 }
/* Disable page load ticket */


/* background-color: linear-gradient(to right, rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBgAlpha); */
/* ###################################################################################################################################### */


/* Stylish toolbar button animation */
.button-toolbar > button:hover {border-radius: var(--radius); background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important; transform: scale(1.05);}
.button-toolbar:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.3); transition: transform .15s ease-in-out !important;}
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover {border-radius: 30%; background: transparent; transition: .3s ease-out !important;}
.vivaldi:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.vivaldi:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.1); transition: transform .15s ease-in-out !important;} 
.icons #switch > button:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.icons #switch > button:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.3); transition: transform .3s ease-in-out !important;}
.button-toolbar > button {
	border: none;
}
.menubar button:hover {border-radius: var(--radius); background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important; transform: scale(1.05);}
	
.BookmarkButton {
	border: none;
}
.toolbar.toolbar-vertical > .button-toolbar > button:hover {
    border-radius: 0 var(--radius) var(--radius) 0;
}
/* ###################################################################################################################################### */

/* Tab stack frame border color fixer */
.tabs-top .tab-position.is-substack .tab:not(.active) .svg-tab-stack{
	padding-bottom: 0px !important;
}
.svg-tab-stack .stack-frame {
    stroke: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.3;
}
.tabs-subcontainer {
	height:30px;
}

.tabs-top .tab-position.is-substack .tab {
	border-radius: var(--radiusHalf);
}
	
.tabs-subcontainer {
	height:30px;
}
/* Tab acordion fixer */
.tabs-top .tab-accordion:not(.active) {
    border-bottom-left-radius: var(--radiusHalf);
}
.tab.tab-accordion.active:after, .tab.tab-accordion.active:before {
	display:none !important;
}
/* Fix round corner 1px line tab bar */
.tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):before {
    left: calc(0.9px - var(--radiusHalf));
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
.tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after {
    right: calc(1.7px - var(--radiusHalf));
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
#browser.color-behind-tabs-off .tab-position .tab.active.active:before { /* Fix color for private theme */
	background: var(--colorAccentBg);
}
#browser.color-behind-tabs-off .tab-position .tab.active.active:after {	/* Fix color for private theme */
background: var(--colorAccentBg);
}
.tab.active.uifocusstop.insubstrip:before {
	left: calc(1.2px - var(--radiusHalf)) !important;
}
.tab.active.uifocusstop.insubstrip:after {
	right: calc(1.8px - var(--radiusHalf)) !important;
}
/* ###################################################################################################################################### */

/* Stylish Animate tab highlight on hover*/
.tab-position .tab:not(.active):hover {
    background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBg);
	border-radius: var(--radiusHalf) var(--radiusHalf) 0 0;
	transition: .2s ease-out !important;
}
.tab-position .tab:not(.active):hover .tab-header {
	transform: scale(1.05);
	transition: .2s ease-out !important;
}

.tabs-top .tab-position.is-substack .tab:hover {
	background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBgAlpha);
	border-radius: var(--radiusHalf)!important;
	transition: .2s ease-out !important;
}
	
.tabs-subcontainer {
	height:30px;
}

	
#browser .tab-position .tab.active:hover {
	transform: scale(1.05);
	transition: .2s ease-out !important;
}
#browser .tab-position:has(.tab-title-edit) .tab.active:hover { /*disable scale on when editting tab title */
	transform: none !important;
	transition: .2s ease-out !important;
}
#browser .tab-position:has(.tab-title-edit) .tab:not(.active):hover .tab-header { /*disable scale on when editting tab title */
	transform: none !important;
	transition: .2s ease-out !important;
}
.tab-position.is-substack > .tab.active {
	margin-bottom: 0px !important;
}
#browser.color-behind-tabs-on .tab-position .tab.active.active{
    background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
    color: var(--colorFg);
	transition: 0.3s ease-out !important;
}

/* ###################################################################################################################################### */

/* Change address bar text selection follow Accent*/

::selection {
  background-color: var(--colorAccentBgAlpha);
  color: var(--colorImageFg, var(--colorAccentFg));
}
/* ###################################################################################################################################### */

/* Change bookmark bar color follow Accent*/
.color-behind-tabs-on .bookmark-bar button {
   background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
.color-behind-tabs-on .bookmark-bar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
     transition: background-color 0.7s ease-out;
}
}
.bookmark-bar .observer {
	background: transparent;
}

.bookmark-bar button:hover {
	border-radius: 5px; background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBg) !important; 
	transition: .3s ease-out !important;
	transform: scale(1.05); transition: transform .2s ease-in-out !important;
	}
.bookmark-bar button {
	border-radius: 0px 0px var(--radiusHalf) var(--radiusHalf);
    border: 1px solid;
    border-color: var(--colorAccentBgDarker);
}
.bookmark-bar button .title {
	color:var(--colorImageFg, var(--colorAccentFg));
}
/* ###################################################################################################################################### */

/*Auto hide panel bar 
#panels-container {
position: fixed;
height: 100%;
max-width: 0vw;
opacity: 0;
z-index: 1;
transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s;
}
#panels-container:hover {
max-width: 99vw;
opacity: 1;
transition-delay: 0.3s;
}

/*Panel are overlays instead of resizing the page 
#main .inner {
	position: relative;
}
#panels-container {
    position: absolute !important;
    z-index: 15;
    height: 100%;
}
#panels-container.right {
	right: 0;
}
/* 

/* ###################################################################################################################################### */
/*Colorful extension popup*/

#browser > div.extensionIconPopupMenu.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-left.button-popup-below.button-popup-arrow-light {
    box-shadow: 0 0 0 1px var(--colorAccentBgAlphaHeavy), 0 2px 6px rgba(0, 0, 0, 0.25);
	border-radius: var(--radiusHalf);
	background: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: blur(1.2em) brightness(85%)
	

}
.toolbar-mainbar {
	background:transparent;
}
#main { 
	background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	transition: background-color 0.7s ease-out;
}
.button-popup-below.button-popup-arrow-light:before {
    border-bottom-color: var(--colorAccentBgAlphaHeavy);
}
.button-popup-below:before {
    filter: drop-shadow(0 -1px var(--colorAccentBg));
}

.color-behind-tabs-on .toolbar-mainbar .toolbar-extensions > .button-toolbar > button.button-pressed, .color-behind-tabs-on .toolbar-mainbar > .button-toolbar > button.button-pressed {
	background-image: linear-gradient(var(--colorBgAlphaHeavy), var(--colorBgAlpha));
    border-radius: var(--radiusHalf);
}

/* ###################################################################################################################################### */

/*Auto hide bookmark bar*/

/* Simple Automate Bookmark-bar */

/* top bookmark-bar 
.bookmark-bar-top .bookmark-bar {
	margin-bottom: -28px; z-index: 1; 
	transform: translateY(0);
	transition: transform .3s ease-out;
	transition-delay: 0.5s;
	}
.bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 20px; width: 100%; top: 100%;}

/* option A: trigger zone below lowest TOP bar 
.bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {
	transform: translateY(-100%);  
	transition: transform .2s ; 
	transition-delay: 1.5s;

	}
/*
animation: dropfade 2s ease-out;
animation-delay: 1s;
} */

	
.bookmark-bar-top .bookmark-bar {
	border:none;
}


/* Beautify adblocker content */


#app .ContentBlocker-Header {
	background: var(--colorAccentBgAlphaHeavy);
    border-bottom-color: transparent;
}
.button-popup {
	top:36px !important;
}

button.privacy-btn-icon, #app .ContentBlocker-Field input[type=button], #app .ContentBlocker-Blocked {
    background-image: none;
    backdrop-filter: blur(1.5em) brightness(0.5);
    background-color: transparent;
    border: none;
}
.button-popup {
	color:var(--colorImageFg, var(--colorAccentFg));
}
button.privacy-btn-icon:hover {
	background-color: var(--colorAccentBgAlpha);
	transform: scale(1.05);
	transition: 0.3s ease-out;
}
#app .ContentBlocker-Blocked ul {
	background-color: var(--colorAccentBgAlpha);
}
#browser > div.ContentBlocker.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-left.button-popup-below.button-popup-arrow-dark {
		background: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: blur(1.2em) brightness(0.75);
}
/* Beautify status bar */
:not(.tabs-bottom)#browser > footer {
    background: var(--colorAccentBgDarker);
	box-shadow: inset -1px 0 5 var(--colorBorder);
	backdrop-filter: var(--backgroundBlur);
	transition: 0.7s
}
#browser > footer > .toolbar-statusbar {
	background-color: var(--colorBgAlphaBlur);
}

#app .ContentBlocker-Label:hover {
	background: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: blur(1.2em) brightness(0.75);
	transform: scale(1.05);
	transition: 0.3s ease-out;
}
/* Beautify panel */



#panels-container.overlay .panel-group {
background-color: var(--colorAccentBgAlpha);
}
.panel-group {
	background-color: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: blur(1.2em) brightness(0.55);

}

.toolbar.toolbar-default.toolbar-wrap > input[type=search] {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
}
.toolbar.toolbar-default.toolbar-medium.toolbar-wrap > input[type=search] {
	background-color: var(--colorAccentBgAlphaHeavy);
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(2) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.manager-editor .fieldset textarea, .manager-editor .fieldset > input[type=text] {
	background: var(--colorBgAlphaHeavier);
}
.manager-editor .fieldset textarea:is(:hover, :focus), .manager-editor .fieldset > input[type=text]:is(:hover, :focus) {
	 background: var(--colorAccentBgAlphaHeavy);
}
	
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(1) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(3) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(4) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar-default .button-toolbar, .toolbar.toolbar-default.toolbar-wrap > input[type=search] {
	color:var(--colorImageFg, var(--colorAccentFg));
}

.toolbar.toolbar-default.toolbar-wrap > div > div.button-toolbar > button,  {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
}

.panel-group .sortselector.sortselector-compact, .download-popout .sortselector.sortselector-compact {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
}
.sortselector .sortselector-button:hover:not(:disabled), .sortselector .sortselector-dropdown:hover:not(:disabled), .sortselector .sortselector-button:focus-visible, .sortselector .sortselector-dropdown:focus-visible {
	background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;
	transform: scale(1); transition: transform .15s ease-in-out !important;
	border: none;
	}
.sortselector-button.direction-ascending {
	border-color: var(--colorAccentBgAlpha);
}
.sortselector-dropdown {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
.panel .tree-row {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.9;
}

 
.toolbar.toolbar-default.toolbar-align-top {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}
.sortselector.sortselector-compact .sortselector-button {
	fill: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
.panel.downloads .download-editor .data, .popout.downloads-popout .download-editor .data {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
.panel-timefield > .container {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}
.cardview input[type=text].downloads, .cardview input[type=email].downloads, .cardview input[type=tel].downloads, .panel.downloads .panel-timefield .started, .popout.downloads-popout .panel-timefield .started, .panel.downloads .panel-timefield .completed, .popout.downloads-popout .panel-timefield .completed, .panel.downloads .panel-pathfield .speed, .popout.downloads-popout .panel-pathfield .speed, .panel.downloads {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}
select:not([multiple]):not([size]), input[type=date] {
	backdrop-filter: blur(1.2em) brightness (0.5);
	background-color: var(--colorAccentBgAlpha);
	background-image: conic-gradient(at 50% 50%,var(--colorImageFg, var(--colorAccentFg)) 45deg,transparent 0, transparent 315deg, var(--colorImageFg, var(--colorAccentFg)) 0);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 92% 10px;
}
select {
	color: var(--colorImageFg, var(--colorAccentFg));
    opacity: 0.75;
}
.panel-pathfield .speed span svg, .popout.downloads-popout .panel-pathfield .speed span svg {
	fill: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}


.toolbar-default .button-toolbar > button:disabled {
	background-color: var(--colorAccentBgAlphaHeavy);
	border: none;
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
    
}
select:not([multiple]):not([size]) option {
    color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.85;
    background: var(--colorAccentBg) !important;
	
}

#history-panel > header > div.toolbar.toolbar-default.toolbar-wrap > select {
	background-color: var(--colorAccentBgAlpha);
	color: var(--colorImageFg, var(--colorAccentFg));
}


.history .vivaldi-tree .tree-row.folder, #history-panel .vivaldi-tree .tree-row.folder {
	color:var(--colorImageFg, var(--colorAccentFg));
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
	border-radius: var(--radiusHalf);
	backdrop-filter: blur(1.2em);
}
.sortselector.sortselector-compact .sortselector-button {
	border-color:var(--colorAccentBgFadedMost);
}

.toolbar-default .button-toolbar > button:enabled {
	background-image: none;
	background: var(--colorAccentBgAlpha);
}
.NotesEditor-Editor-Background {
	color:var(--colorImageFg, var(--colorAccentFg));
    background-color: transparent;
    border: none;
	border-radius: var(--radiusHalf);
	backdrop-filter: blur(1.2em);
}
.textarea.NotesEditor-Editor {
	color:var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
    background-color: transparent;
    border: none;
	border-radius: var(--radiusHalf);
	backdrop-filter: blur(1.2em);
}
.cardview.cardview .NotesEditor-Editor {
	color:var(--colorImageFg, var(--colorAccentFg));
    background-color: transparent;
    border: none;
	border-radius: var(--radiusHalf);
	backdrop-filter: blur(1.2em);
}
.NotesEditor-Editor-Background:after {
	background-color: transparent;
	backdrop-filter: blur(1.2em) brightness(65%);
    border: none;
	border-radius: var(--radiusHalf);
}
.NotesEditor-EmptyPlaceholder:hover {
	background-color: var(--colorAccentBgAlphaHeavy);
	transition: 0.3s ease-out;
}

.panel.downloads .panel-pathfield .action-button, .popout.downloads-popout .panel-pathfield .action-button { 
	background-color: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: blur(1.2em) brightness(85%);
    border: none;
}
.panel.downloads .panel-pathfield .action-button:hover, .popout.downloads-popout .panel-pathfield .action-button:hover { 
background-color: var(--colorAccentBg);
transition: 0.3s ease-out;
transform: scale(1.1);
}
input[type=button]:not(.circular), input[type=submit], input[type=color], .FormButton,  {
	color:var(--colorImageFg, var(--colorAccentFg));
	background-image:none;
	background-color: var(--colorAccentBgAlphaHeavy);
	border: none;
}
}
input[type=button]:not(.circular):hover, input[type=submit]:hover, input[type=color]:hover, .FormButton:hover {
	background-image:none;
}

.addwebpanel-wrapper .addwebpanelcallout {
	background: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.75)), var(--colorAccentBgFadedMore);
    border: none;
	border-radius: var(--radiusHalf);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0%), 0 2px 6px rgb(0 0 0 / 20%);
    border-radius: var(--radius);
	backdrop-filter: blur(1.2em);
}

#switch .addwebpanel-wrapper > button.addwebpanel:hover {
border-radius: 30%; background: var(--colorAccentBgAlpha) !important; transform: scale(1.1); transition: .3s ease-out !important;}
#panels.leak #switch .addwebpanel {
	margin-bottom: 1px;
}
.right .addwebpanel-wrapper .addwebpanelcallout:before, .right .addwebpanel-wrapper .addwebpanelcallout:after {
	border-left-color: var(--colorAccentBgDarker);
	filter:brightness(0.5);
}

textarea {
    background: var(--colorAccentBgAlphaHeavy);
    border: 1px solid var(--colorAccentBgFadedMore);
color:var(--colorImageFg, var(--colorAccentFg));
}
.panel .TranslatePanel-SrcText, .panel .TranslatePanel-TranslatedText {
	color:var(--colorImageFg, var(--colorAccentFg));
	background-color: var(--colorAccentBgAlphaHeavy);
}


.theme-dark input[type=radio], .theme-dark input[type=checkbox] {
    background-image: linear-gradient(180deg, transparent -150%, var(--colorAccentBgFadedMost) 200%);
    border-color: var(--colorFgAlpha);
}
input[type=button]:not(.circular):hover, input[type=submit]:hover, input[type=color]:hover, .FormButton:hover {
	background-color: var(--colorAccentBgAlpha) !important;
	transform: scale(1.1);
	transition: 0.3s ease-out;
	background-image: none;
}
.panel .tree-row:hover {
	background-color: var(--colorAccentBgAlpha);
	transition: 0.3s ease-out;
	background-image: none;
	border-radius:var(--radius);
}
#history-panel > section > div > div > div > * > div > label:hover {
	transform: scale(1.02);
	transition: 0.3s ease-out;
}
.panel-bookmarks > section.outerScrollbar > div > div > div > * > div > label:hover, #mail_panel > section > div > div > div > * > div > label:hover {
	transform: scale(1.02);
	transition: 0.3s ease-out;
}
.notes-cardwrapper .upper-half .preview, .addbookmark-cardwrapper .upper-half .preview {
    border: 1px solid var(--colorAccentBgAlphaHeavy);
}

.panel.downloads .DownloadItem:hover, .popout.downloads-popout .DownloadItem:hover {
	transform: scale(1.05);
	transition: 0.3s ease-out;
}

	
#translate-panel > form > div.TranslatePanel-FromTo.toolbar.toolbar-default {
	color:var(--colorImageFg, var(--colorAccentFg));
}
input[type=button]:not(.circular), input[type=submit], input[type=color], .FormButton {
	background-image: none;
	color:var(--colorImageFg, var(--colorAccentFg));
	background-color: var(--colorAccentFgAlpha);
}

#switch .addwebpanel-wrapper > button, #switch > button {
	Color:var(--colorFg);
	opacity:0.9;
}

#translate-panel > form > div.TranslatePanel-FromTo.toolbar.toolbar-default > input[type=button] {
    padding-bottom: 4px;
	}
.cardview input[type=text]{
	background-color:var(--colorBgAlphaHeavier);
}
.cardview input[type=text]:hover, .cardview input[type=text]:focus {
background-color: var(--colorAccentBgAlphaHeavy);
}
/* Beautify Omni dropdown */

.OmniDropdown {
	background-color: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: blur(1.2em) brightness(0.7);
	animation: dropfade 400ms ease-out;
	transition: 0.4s;
}

.omni-clickable.OmniLinkItem:hover {
    background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
	color: var(--colorImageFg, var(--colorAccentFg));
	
}
.OmniLinkItem-Url, .OmniLinkItem-Details, .OmniLinkItem-Favicon, .OmniLinkItem-EraseButton {
	color: var(--colorImageFg, var(--colorAccentFg));
}
	
	
/*Beautify Translate popup*/	

	
.button-popup-left.button-popup-below {
    border-top-right-radius: 0;
}

#modal-bg.slide > div {
    border: none;
	border-radius: var(--radiusHalf);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0%), 0 2px 6px rgb(0 0 0 / 20%);
    border-radius: var(--radius);
	background-color:var(--colorAccentBgAlphaHeavy);
	animation: dropfade 300ms ease-out;
	backdrop-filter: blur(1.2em) brightness(0.85);
}
.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-center.button-popup-below.button-popup-arrow-dark:has(#modal-bg.slide) {
	backdrop-filter:none;
}
.TranslatePopup {
    background-color: transparent;
}

.TranslatePopup-Buttons-MenuButton:hover {
    background-color: var(--colorAccentBgAlpha);
	transform: scale(1.05);
	transition: 0.3s ease-out;
	background-image: none;
}

.TranslatePopup .dialog-content {
	color: var(--colorImageFg, var(--colorAccentFg));
}

.TranslatePopup-Header h3 {
	color: var(--colorImageFg, var(--colorAccentFg));
}
input[type=button]:not(.circular)[type=submit], input[type=submit][type=submit], input[type=color][type=submit], .FormButton[type=submit], input[type=button]:not(.circular).primary, input[type=submit].primary, input[type=color].primary, .FormButton.primary {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
input[type=button]:not(.circular).primary:hover {
	transform: scale(1.02);
	transition: 0.3s ease-out;
}
	
.button-popup.ToolbarButtonPopup-DefaultStyles label span, .TranslatePopup-FooterText {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
	}
input[type=button]:not(.circular).primary:not([disabled]) {
border-color: var(--colorAccentBgAlpha);
}

.TranslatePopup-Buttons-MenuButton {
	background-color: var(--colorAccentBgAlphaHeavy);
	border-color: var(--colorAccentBgAlphaHeavy) !important;
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}

input, select, textarea, input[type=text], input[type=search], input[type=password], input[type=email], input[type=url], input[type=number], input[type=radio], input[type=date], input[type=time], input[type=checkbox], input[type=button], input[type=submit] {
    border-color: var(--colorAccentBgAlpha);
    background-color: none;
	color: var(--colorImageFg, var(--colorAccentFg));
}
.BookmarkLocationSelector-SearchInput-Input:not(:focus) {
    background: var(--colorAccentBgAlphaHeavy);
}
.BookmarkLocationSelector-SearchInput-Input:focus {
    background: var(--colorAccentBgAlphaHeavy);
}
#modal-bg > div > div > footer {
	background-color: var(--colorAccentBgAlphaHeavy);
	border-color: var(--colorAccentBgAlpha);
}
#browser > div.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-center.button-popup-below.button-popup-arrow-dark > div > footer {
	background-color: var(--colorAccentBgAlphaHeavy);
	border-color: var(--colorAccentBgAlpha);
}



/*Beautify bookmark popup*/
#browser > div.button-popup.button-popup-left.button-popup-below.button-popup-arrow-dark {
	background-color:var(--colorAccentBgAlphaHeavy);
	animation: none;
}
.BookmarkPopup {
    background-color: var(--colorAccentBgAlphaHeavy);
	border-radius:var(--radiusHalf);
    backdrop-filter: blur(1.2em) brightness(0.85);
color: var(--colorImageFg, var(--colorAccentFg));
animation: dropfade 300ms ease-out;
}
#browser > div.button-popup.button-popup-center.button-popup-below.button-popup-arrow-dark > form > header {
 background: var(--colorAccentBgAlphaHeavy);
 }
#browser > div.button-popup.button-popup-left.button-popup-below.button-popup-arrow-dark > form > header {
	background: var(--colorAccentBgAlphaHeavy);
}
.DialogContent {
  background-color: transparent; 
  backdrop-filter: blur(1.2em) brightness(0.2);
}

.BookmarkLocationSelector-ToggleButtonGroup-Button:focus-visible, .BookmarkLocationSelector-ToggleButtonGroup-Button--Pressed {
	 background-color: var(--colorAccentBgAlpha);
	 color: var(--colorImageFg, var(--colorAccentFg));
}

.BookmarkInputField-Input {
	    padding: 10px !important;
}
.BookmarkInputField {
    border-bottom: 1px solid var(--colorAccentBgAlpha);
}
	
#browser > div.button-popup.button-popup-left.button-popup-below.button-popup-arrow-dark > form > footer {
	background-color: var(--colorAccentBgAlphaHeavy);
	border-color: var(--colorAccentBgAlpha);
	backdrop-filter: brightness(0.1);
}
.DialogHeader-HeaderText, .DialogHeader.BookmarkPopup-Header {
	color: var(--colorImageFg, var(--colorAccentFg));
}
.BookmarkLocationSelector-SearchInput-Button {
	border-color: var(--colorImageFg, var(--colorAccentFg));
}
svg.folder-icon .fill-override {
	fill:var(--colorImageFg, var(--colorAccentFg));
}

.BookmarkInputField-Title {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}

.BookmarkLocationSelector-ToggleButtonGroup-Button {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.65;
}
.BookmarkLocationSelector-ToggleButtonGroup-Button:focus-visible, .BookmarkLocationSelector-ToggleButtonGroup-Button--Pressed {
	box-shadow: inset 0 -2px 0 0 var(--colorHighlightBg) !important;
    backdrop-filter: brightness(0.1);
}
.BookmarkButton-Button .ToolbarButton-Button {
}

.BookmarkButton-Button .ToolbarButton-Button.button-pressed {
    background-color: var(--colorAccentBgDark);
}
.BookmarkButton--Active {
    background-color: transparent;
}

#browser > div.button-popup.button-popup-center.button-popup-pos-below.button-popup-arrow-dark.button-popup-enter-done > form > header {
	background-color: var(--colorAccentBgAlphaHeavy);
}
.DialogHeader {
	background-color: var(--colorAccentBgAlphaHeavy);
}
.BookmarkInputField:focus-within {
	border-bottom-color: var(--colorAccentBgAlpha);
    box-shadow: 0px 1px 0px 0px var(--colorAccentBgAlpha);
}
/*Beautify QR share popup*/

.qr-share-dialog {
	border-radius: var(--radiusHalf);
	border: none;
    animation: dropfade 0.3s ease-out;
}
#browser > div.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-center.button-popup-below.button-popup-arrow-dark {
	width:300px;
}

#browser > div.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-left.button-popup-below.button-popup-arrow-dark > div > div.dialog-header {
	background:var(--colorAccentBgAlphaHeavy);
}

.button-popup-center {
	background:var(--colorAccentBgAlphaHeavy);
	backdrop-filter: blur(1.2em) brightness(0.75);
	border:none;
}
.button-popup {
    box-shadow: 0 0 0 0px var(--colorAccentBgAlpha), 0 2px 6px rgba(0, 0, 0, 0.25);
}
#browser > div.ToolbarButtonPopup-DefaultStyles.button-popup.button-popup-left.button-popup-below.button-popup-arrow-dark > div > footer {
background: transparent;
border-color: var(--colorAccentBgAlpha);
background-color: var(--colorAccentBgAlpha);
}

}
.dialog-header, .dialog-footer {
	color: var(--colorImageFg, var(--colorAccentFg));
	border-top: 1px solid var(--colorAccentBgAlpha);
	
}

.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button.button-pressed:not(:active), .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button.button-pressed:not(:active) {
    box-shadow: unset;
    background: var(--colorAccentBgAlphaHeavy);
}

.button-popup-below.button-popup-arrow-dark:before {
    border-bottom-color: var(--colorAccentBgAlphaHeavy);
}
.button-popup-arrow-dark:before {
    border-bottom-color: var(--colorAccentBgAlphaHeavy) !important;
}
.button-popup-arrow-light:before {
    border-bottom-color: var(--colorAccentBgAlphaHeavy);
}
.button-popup:before {
    filter: drop-shadow(0 -1px var(--colorAccentBgAlpha));
}

/* Only show domain and centered on addressbar */

.UrlFragment-HostFragment-Subdomain {
	display:unset;
 /*Hide sub domain, the www stuff if you want*/
} 
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div { /* only affect address bar url field */
    justify-content: center; /*center url domain*/
	overflow:hidden;
	height: fit-content;
    align-content: center;
}



#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div > div > span > span:not(:first-child) {
	display:none; /*hide all part of URL except domain*/

}

input.UrlBar-UrlField.url.vivaldi-addressfield.uifocusstop {
	background: none;
	color:var(--colorImageFg, var(--colorAccentFg));
	
}

#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div > input:is(:hover):not(:focus)  {
	transition: 0.3s ease-out;
	opacity:1 !important;
	background:transparent;
	text-align: center;  /* center url text */
	transition-delay: 0.5s;
	
}
input.UrlBar-UrlField.url.vivaldi-addressfield.uifocusstop:is(:focus)  {
	opacity:1 !important;
	background:transparent;
	animation: rightfade 300ms ease-out;
	text-align:left !important;
	
}
@keyframes rightfade {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.UrlBar-UrlField:is(:hover):not(:focus) + .UrlFragment-Wrapper { /* Hide domain on hover */
	opacity:0 !important;
	transition: opacity 0.3s ease-out;
	transition-delay: 0.5s;
	animation: none !important;
}

.UrlBar-UrlField:is(:focus) + .UrlFragment-Wrapper { /* Hide domain on focus */
	opacity:0 !important;
	background:transparent;
}
/*.UrlBar-UrlField:not(:focus) + .UrlFragment-Wrapper { /* Show domain on not focus 
	animation: fadeleft 300ms ;
}
*/



.UrlFragment-Wrapper {
	padding: 6px 6px 6px 6px; /*Fix some buggy padding on resize*/
}


@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div > input {
	background: none;
	padding: 6px 6px 6px 6px;
	bottom: 1px;
}
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input:hover {
	animation: none !important; /* No repeating animation on hover while editting text */
	text-align: left;
}
	
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input + .UrlFragment-Wrapper, #main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--IsEmpty > input + .UrlFragment-Wrapper {
	animation: none !important; /* No repeating animation on input then unfocus */
}
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--IsEmpty > input:hover {
	text-align: left;
}
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--IsEmpty > input:is(:focus, :hover) {
	animation:none;  /* No repeating animation on focus empty text field */
}

/* Colorful addressbar on focus */

.UrlBar-AddressField:hover, .UrlBar-SearchField:hover {

background-color: var(--colorAccentBgFadedMore) !important;
backdrop-filter: brightness (120%);
border: none !important;
transition: 0.5s ease-out;
transition-delay: 0.3s;
}

.UrlBar-AddressField:is(:focus-visible, :focus-within) {
    outline:2px solid  var(--colorAccentBgAlpha) !important;
	transition: 0.3s ease-out;
	background-color: var(--colorAccentBgFadedMost) !important;
	backdrop-filter: brightness (120%);
}

/* Fix bookmark button in setting */

.bookmark-folder-picker input[type=text] {
	max-width:100%;
	width: 100%;
	text-overflow: ellipsis;
	opacity:0;
}
select option {
    background: var(--colorAccentBgDark);
}
#webpage-stack > div.webpageview.active.internal.visible.pagefocusstop > div.row-wrapper > div > div.internal-page > div > div.settings-content > section > div:nth-child(2) > div:nth-child(3) > div > span > select {
    width: 120px;
	background-color: var(--colorAccentBgAlpha);
}

#browser .max-bookmarks input[type='number'] {
	padding: 2px 1px 2px 10px;
}

select {
	width: fit-content;
	text-overflow: ellipsis;
	border: none !important;
	border-radius: var(--radius);
}


.dialog-download {
	background-color: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: brightness(0.01);
}

/* Beautify Privacy statistic */

.Privacy-Stats-Modal {
	    background: var(--colorAccentBgAlphaHeavy);
}

.TabbedView-List {
	background: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: brightness (0.7);
}
.TabbedView-List button.active {
    background-color: var(--colorAccentBgAlpha);
	
}

.sortselector {
	background: var(--colorAccentBgAlpha);
	border-color: var(--colorAccentBgAlpha);
}

 .TabbedView-List button, .sortselector, .Privacy-Stats-Modal .Modal-Header .Header-Title, .dialog-content p, .Privacy-Stats-Modal .Blocked-Stats-Container p {
	color: var(--colorImageFg, var(--colorAccentFg)) !important;
	opacity: 0.8;
}
.Modal-Shield {
    fill: var(--colorImageFg, var(--colorAccentFg)) !important;
}
#modal-bg > div {
	color: var(--colorImageFg, var(--colorAccentFg)) !important;
}
.TabbedView {
	    border: 1px solid var(--colorAccentBgDark);
}
.dialog-footer {
    background-color: var(--colorAccentBgAlphaHeavy) !important;
	border-top: 1px solid var(--colorAccentBgAlpha);
}
.TabbedView-List button:hover {
    border-radius: var(--radius); background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important; transform: scale(1.1);
}

/* move adblock to the right*/

.toolbar-insideinput:first-of-type {order: 1;} 
.SiteInfoButton-Favicon, .SiteInfoButton-SearchEngineFavicon, .SiteInfoButton-SecurityBadge {
	margin-left: 3px;
    margin-right: -3px;
}

/*Beautify calendar, mail and feed */

#calendar_panel .PeriodPicker.PeriodPicker {
	background: var(--colorAccentBgAlphaHeavy);
	border: none;
	color: var(--colorImageFg, var(--colorAccentFg));
    min-width: auto;
	width: fit-content;
    overflow: hidden;
    white-space: nowrap;
}

.toolbar-default .button-toolbar > button:enabled.button-pressed {
	background-image:none;
	background-color: var(--colorAccentBgAlphaHeavy);
}

.calendar-grid .calendar-background-day {
	background-color: var(--colorAccentBgAlphaHeavy);
	backdrop-filter: brightness(0.2);
	border-radius: 0 var(--radiusHalf) var(--radiusHalf) 0;
	border-color: var(--colorAccentBgAlpha);
}

.calendar-add-event-button.selected, .calendar-add-event-button:hover {
    background: var(--colorAccentFgAlpha);
    border: none;
	color: var(--colorAccentBgFadedMost);
	border-radius: var(--radiusHalf);
}

.calendar-grid-hours .hour-track {
    background-color: var(--colorAccentBgAlpha);
    border-radius: var(--radiusHalf) 0 0 var(--radiusHalf);
	border-color: var(--colorAccentBgAlpha);
}

.calendar-grid-hours .hour, .calendar-event .cal-edit-tabs  {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity:0.8;
}

.calendar-event.editing {
    background: var(--colorBgAlphaHeavier);
    outline: none;
}

.calendar-event .cal-edit-tabs > .cal-edit-tab:hover {
    background-color: var(--colorAccentBgAlphaHeavy);
}

.calendar-grid:focus-visible .calendar-add-event-button:not(.is-dragging).active, .calendar-grid:focus-within .calendar-add-event-button:not(.is-dragging).active, .calendar-grid-agenda:focus-visible .calendar-add-event-button:not(.is-dragging).active, .calendar-grid-agenda:focus-within .calendar-add-event-button:not(.is-dragging).active {
background: var(--colorAccentFgAlpha);
}

.calendar-grid-hours:hover .calendar-grid-hover {
	background: var(--colorAccentBgAlpha)
}

.calendar-event input[type=text], .calendar-event p[contenteditable=true], .calendar-event p[contenteditable=plaintext-only], .calendar-event input[type=time], .calendar-event input[type=number], .calendar-event input[type=date], .calendar-event .dateInput .dateInputHidden {
	    border-bottom: 2px solid var(--colorAccentBgDarker);
}

p.editable[contenteditable=true]:empty:before, p.editable[contenteditable=plaintext-only]:empty:before {
    opacity: 0.7;
	color: var(--colorImageFg, var(--colorAccentFg));
}

#calendar_panel > header > div:nth-child(2) > div.PeriodPicker.no-page-focus > div > button {
	background:none;
}

#calendar_panel > header > div.toolbar.toolbar-default.toolbar-align-top, .calendar-event .edit-group > * {
color: var(--colorImageFg, var(--colorAccentFg));
opacity:0.8;
}

#calendar_panel > div > div > div.calendar-add-event-button.selected.with-event {
	display:none;
}

.CalendarSelector .ToolbarButton-Button {
	background-color: var(--colorAccentBgAlphaHeavy);
    background-image: conic-gradient(at 50% 50%,var(--colorImageFg, var(--colorAccentFg)) 45deg,transparent 0, transparent 315deg, var(--colorImageFg, var(--colorAccentFg)) 0);
    background-size: 10px 10px;
    background-position: 95% 8px;
	opacity: 0.7;
	width: 150px;
}

.calendar-event input[type=button].circular {
   color: var(--colorImageFg, var(--colorAccentFg));
opacity:0.8;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorAccentBgAlphaHeavy);
	border:none;
}

.calendar-grid .calendar-drop-target.dragged-over, .calendar-grid .calendar-drop-target:active, .calendar-grid .calendar-drop-target:hover {
	background-color: var(--colorAccentBgAlpha);

}

.calendar-grid .calendar-drop-target {
	background-color: var(--colorBgAlphaHeavier);
}

.calendar-grid .calendar-drop-target.weekend {
	background-color: var(--colorAccentBgAlphaHeavy);
}

.calendar-day-picker {
		background-color: var(--colorBgAlphaHeavier);
}

.calendar-grid-agenda {
	    background-color: var(--colorBgAlphaHeavier);
}

}
.calendar-event.solid, .calendar-event.all-day {
	border: 1px solid var(--colorAccentBgAlpha);
}

#calendar_panel > div > div > div.calendar-event.selected.editing.solid, #calendar_panel > div > div > div.calendar-event.selected.solid {
	width: 105%;
	padding-left: 5%;
}

.calendar-grid-week .calendar-event.editing, .calendar-grid-multiweek .calendar-event.editing, .calendar-grid-month .calendar-event.editing {
	max-width: -webkit-fill-available;
}

.calendar-grid-agenda .cal-tasks-row .cal-tasks-row-date.current {
    width: 100%;
    color: var(--colorImageFg, var(--colorAccentFg));
    border-radius: var(--radiusHalf) var(--radiusHalf) 0 0;
    background: var(--colorAccentBg);
    margin: 6px -1px 0 0;
    padding: 3px 0 3px 0;
	font-size:14px;
	font-weight:bold;
}

#calendar_panel > div > div > div:nth-child(1) > div.cal-tasks-row-events {
	background-color: var(--colorAccentBgAlpha);
    border-radius: 0 0 var(--radiusHalf) var(--radiusHalf);
	margin-bottom: 5px;
}

#panels #calendar_panel .cal-tasks-row, #panels #tasks_panel .cal-tasks-row {
    border-bottom: 1px solid var(--colorAccentBgAlphaHeavy);
	}
	
/* Mail button */
.toolbar-group > hr {
    border-color: var(--colorAccentBgAlpha);
}
.panel#mail_panel .tree-item:not([data-selected]) .mail-panel-category:hover {
    background-color: var(--colorAccentBgAlphaHeavy);
}
/*Beautify status bar mail and cal */

.button-popup.button-popup-above {
    background: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: brightness(0.7) blur(1.2em);
	border-radius: var(--radius);
}

.StatusPopup-Header {
background-color: var(--colorAccentBgAlphaHeavy);
    border-bottom: 1px solid var(--colorAccentBgFadedMost);
	border-radius: var(--radius) var(--radius) 0 0;
	}

.StatusPopup-Mail, .StatusPopup-Event, .StatusPopup-Account {
	    background-color: var(--colorAccentBgAlphaHeavy);
		  backdrop-filter: brightness(0.7) blur(1.2em);
		  border-color: var(--colorBgAlphaHeavier);
}
.StatusPopup-Mail:hover {
	    background-color: var(--colorAccentBgAlpha);
}
.StatusPopup-Footer {
	background-color: var(--colorAccentBgAlphaHeavy);
    border-top: 1px solid var(--colorAccentBgFadedMost);
	border-radius: 0 0 var(--radius) var(--radius) ;
}

.button-popup-above.button-popup-arrow-dark:before {
    border-top-color: var(--colorAccentBgAlphaHeavy);
}

.StatusPopup-MailReceiver, .StatusPopup-EventDate, .StatusPopup-AccountStatus, .StatusPopup-AccountPoll  {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.8;
}
.StatusPopup-Account .button-toolbar .ToolbarButton-Button {
    background: var(--colorAccentBgAlpha);
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.8;
}

/* Coloring the scroll bar */
.theme-dark ::-webkit-scrollbar-thumb {
    background-color: var(--colorAccentFgAlpha);
}

/*Beautify icon badge */

.button-badge {
    animation-iteration-count: 3;
	background-color: var(--colorAccentBgFadedMost);
	transition: background-color 300ms ease-out;
	color: var(--colorImageFg, var(--colorAccentFg));
}

/*Colored the spinning loading favicon */
.favicon.spinner svg {
 fill: var(--colorAccentBgFadedMost);
 filter:saturate(150%);

}


/*Animated trashbin */
.toggle-trash:hover .trashicon-lid {
    transform: rotateZ(30deg) translate(-1px, -1px);
}
/* Color stack counter */

.tab-position .tab .stack-counter {
	    background: var(--colorAccentBgAlpha);
}
.tab-position .tab.active .stack-counter {
    background-color: var(--colorBgAlphaHeavier);
}

/* color clock */

.button-popup.ToolbarButtonPopup-DefaultStyles h2, .ClockPopup-Header {
	background: var(--colorAccentBgAlphaHeavy);
	border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
	border-bottom: 1px solid var(--colorAccentBgFadedMore);
	color: var(--colorImageFg, var(--colorAccentFg));
}

.ClockPopup .toolbar, .ClockPopup-Alarms, .ClockPopup-Countdowns, .ClockPopup-Preset, .ClockPopup-Preset-Clear, .ClockPopup-DateInputField.ClockPopup-DateInputField, .ClockPopup-Name.ClockPopup-Name  {
    background-color: var(--colorAccentBgAlphaHeavy);
	color: var(--colorImageFg, var(--colorAccentFg));
}
.ClockPopup-Preset-Clear > svg {
    margin: 2px;
}
.ClockPopup-TimeField.ClockPopup-TimeField.ClockPopup-TimeField {
	color: var(--colorImageFg, var(--colorAccentFg));
}
.ClockPopup-Spinner--up {
    background-image: linear-gradient(55deg, transparent 53%, var(--colorAccentBgFadedMore) 55%), linear-gradient(125deg, var(--colorAccentBgFadedMore) 43%, transparent 45%), linear-gradient(var(--colorFg) 70%, var(--colorAccentBgFadedMore) 70%);
	opacity:0.6;
}
.ClockPopup-Spinner--down {
    background-image: linear-gradient(55deg, var(--colorAccentBgFadedMore) 43%, transparent 45%), linear-gradient(125deg, transparent 53%, var(--colorAccentBgFadedMore) 55%), linear-gradient(180deg, var(--colorAccentBgFadedMore) 30%, var(--colorFg) 30%);
}


/* Darken QR image */

.qr-share-dialog .qr-image {
	filter: invert(0.8) !important;
}


/* Fix audio icon on tab */
.tab-audio {
    margin-top: 1.5px;
	left:10px;
}

/*Fix shadow of tab favion not align center */

.transparent-tabbar .tab-position .tab.active .tab-header .favicon:not(.svg), .theme-dark .tab-position .tab.active .tab-header .favicon:not(.svg), .acc-dark.color-behind-tabs-off .tab-position .tab.active .tab-header .favicon:not(.svg) {
    filter: drop-shadow(2px 0 0 rgba(246, 246, 246, 0.75)) drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.75)) drop-shadow(0 2px 0 rgba(246, 246, 246, 0.75)) drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.75));
}

/* Smaller trash icon*/
#tabs-container > div.toolbar.toolbar-tabbar.sync-and-trash-container > div.button-toolbar.toggle-trash > button > span {
transform: Scale(0.9);
}

/* fix panel header */
#panels .webpanel-stack .webpanel .webpanel-header {
border-bottom: none;
}

/* fix vivaldi icon on title bar */
.tabs-left .vivaldi svg, .tabs-right .vivaldi svg, .tabs-bottom .vivaldi svg, .tabs-off .vivaldi svg {
    width: 22px;
    height: 22px;
	margin-top: 0px;
}

/* Beautify toolbar editor */

.toolbar-editor {
	background: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: blur(1.2em) brightness(0.5);
}
.toolbar-editor section.dialog-preview {
	background: var(--colorAccentBgAlphaHeavy);
	background-color: var(--colorBgAlphaHeavier);
    border: solid var(--colorAccentBgAlphaHeavy);
}


/* Merge tab bar and addressbar */
.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}

.maximized #tabs-container:not(.none).top {
    padding-left: calc(24vw + 150px) !important;   /* Adjust acording to left button, 35px each */
	padding-right: 170px !important;  /* Adjust acording to number of extension, 35px each*/
	padding-top: 0px !important;
	margin-top: 0px;
	min-height: 30px;
	transition: 0.3s;
}
.maximized#browser:not(:has(.vivaldi)) #tabs-container:not(.none).top {
    padding-left: calc(24vw + 115px) !important;
    padding-right: 90px !important;
}
.maximized#browser:has(.UrlBar-PrivateWindowIndicator) #tabs-container:not(.none).top { /*fix private icon in private tab - need to enable experimental web platform feature in vivaldi://flags for the :has() selector to work */
	 padding-left: calc(24vw + 178px) !important; 
}

.maximized #tabs-container .resize {
    min-height: 30px;
    margin-top: 0px;
}
.maximized .tab-group-indicator {
    top: 0 !important;
}

.win.normal #titlebar {
    top: 0px;
}

.maximized#browser:has(.top) .UrlBar-AddressField {
    width: 24vw !important;
    top: 0px !important;
	border-radius: var(--radiusHalf);
}

.maximized .win.normal .UrlBar-AddressField {
    top: 0px;
}

.maximized .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  /* move the addressbar and extension bar to tab bar */
    position: absolute;
    top: unset; /* dont set it to 0 */
    left: 35px !important;
    height: 29.99px;
    background: transparent !important;
	border: none !important;
	transform: translate(0, -30px); /* use instead of top =0 to fix showing or not showing empty space above tab */
}
.maximized#browser:not(:has(.vivaldi)) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  
    Left: 0px !important;
}

.maximized#browser:has(#tabs-subcontainer.top) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) { /* Fix tab stack bar on one liner */
transform: translateY(-60px); 
transition:all 0.2s cubic-bezier(0.37, 0.16, 1, 1) 0s !important;
} 
.maximized .extension-popup.top { /*fix weird glitch of extension popup when transform toolbar */
    transform: translateX(-35px);
}
.maximized .toolbar-mainbar {
	background:transparent;
	border-radius: var(--radiusHalf);
}
.toolbar-mainbar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	 transition: background-color 2s ease-out;
}

.maximized .win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
	border-radius: var(--radiusHalf)!important;
}

.color-behind-tabs-on#browser.tabs-top #header {
	transition:1s ease-out;
}

.color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred header, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred footer, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred .panel-group, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred .bookmark-bar, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred .manager-editor, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred .vivaldi-settings, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred .toolbar, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred:not(.is-settingspage) #header, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred #switch, .color-behind-tabs-on:not(.transparent-tabbar)#browser.isblurred.dim-blurred #tabs-tabbar-container {
     transition: background-color 2s ease;
}

.maximized #main > div.mainbar > div > div.toolbar-extensions { /* Only affect extension button on mainbar */
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorAccentBgAlphaHeavy) !important;
	transition: background-color 0.7s ease-out;
    left: calc(100vw - 125px) !important;   /* Adjust acordingly*/
	right: unset !important;
    height: 30px !important;
	border-radius: var(--radiusHalf)!important;
}
.maximized#browser:not(:has(.vivaldi)) #main > div.mainbar > div > div.toolbar-extensions {
	Left:100vw !important;
}
.toolbar-mainbar .toolbar-extensions {
	background-color: transparent;
}
.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}
.maximized .toolbar-mainbar .toolbar-extensions > .button-toolbar > button{
	height:30px;
}
	
.maximized .toolbar-mainbar > .button-toolbar > button {
   height:30px;
}

/*.vivaldi {
    margin-top: -6px !important;  /* Adjust acordingly*/
}
.maximized .vivaldi {
    margin-top: 0px !important;
}
.maximized #header, #main {
    position: unset;
}

.maximized #header {
    height: unset;
}

.maximized .toolbar-tabbar.sync-and-trash-container {
	top: 0px !important;
	margin-right: -5px;
}
.maximized#browser:has(.tabs-left .toolbar-tabbar.sync-and-trash-container, .tabs-right .toolbar-tabbar.sync-and-trash-container) .toolbar-tabbar.sync-and-trash-container {
	margin-right: unset;
}

.maximized .window-buttongroup { 
	height: 30px !important;
	Top: 0px !important;
}
.maximized #browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) {
    height: unset;
}
.maximized .tabs-at-edge.fullscreen#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi), .tabs-at-edge.maximized#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) {
    height: 30px;
}
.maximized .win10.normal #tabs-tabbar-container.top {
	padding-top: 0px !IMPORTANT;
}

.maximized .UrlBar-PrivateWindowIndicator {
  /*Fix in private mode indicator when merge bar*/
	font-size: 0;	
	padding: 0 6px 0 6px;
}

.tabs-right#browser.win.win10 .tabs-bottom#browser.win.win10 .tabs-left#browser.win.win10, #browser.win.win10 #header #titlebar .window-buttongroup button {
    height: 30px;  /* fix some weird window button group height bug on different tab style */
}
#browser:not(.tabs-top) .vivaldi {
    height: 30px;
    padding: 0;
}


.maximized.win #titlebar #pagetitle > span, .linux #titlebar #pagetitle > span {
    text-align: center;   /* fix page title alignment on different tab mode */
    margin-left: 0%;
    width: 42vw;
}
.maximized#browser.win.win10 #titlebar #pagetitle {
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    width: 750px;
    position: absolute;
    left: 35vw;
}
.win10.normal #tabs-tabbar-container.top {  /* Fix super huge header on window mode */
    padding-top: 6px;
}

/* Fix mail tab display */

.maximized#browser:has(.toolbar-mailbar.toolbar-large) #tabs-container:not(.none).top {
	padding-left: 35px !important; 
}
.maximized#browser:has(.toolbar-mailbar.toolbar-large) .mainbar {
	    top: unset;
		position:relative;
}
.maximized .toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large {
    width: 100vw;
	left:0px;
}

.maximized#browser:has(.toolbar-mailbar.toolbar-large) .toolbar-tabbar.sync-and-trash-container {
	margin-right:-85px !important;
}
	

/* automate tabbar columns */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {flex-basis: 30px !important; flex-grow: 1; z-index: 0; transition: flex-basis .1s linear .15s, min-width .1s linear .2s, background-color .1s linear !important;}
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not([style='width: 30px;']):not([style='width: 31px;']):not([style='width: 32px;']):not([style='width: 33px;']):not([style='width: 34px;']):not([style='width: 35px;']):not([style='width: 36px;']):not([style='width: 37px;']):not([style='width: 38px;']):not([style='width: 39px;']):not([style^='width: 4']):not([style^='width: 5']):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style='width: 90px;']) > #tabs-container:not(:focus-within):not(:hover) {flex-basis: 60px !important;}
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover) > #tabs-container:is(:focus-within, :hover) {flex-basis: calc(100% - 30px) !important; z-index:3;}
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 60px) !important; z-index:3;}

/* option B: asymmetry - minimized parent column when inactive  */
 .substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style='width: 90px;']) > #tabs-subcontainer.visible {flex-grow: 99999;}

/* optional: expand vertical tabbar's width on focus/mouseover */
/#tabs-tabbar-container:is(.left, .right) {min-width: 60px; transition: width .1s linear .4s !important;}
/#tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover) {width: 399px !important; will-change: width; transition: width .1s linear .1s !important;}


/*Fix tab title edit on tab stack */
.color-behind-tabs-on .tab-position .tab.active .tab-header input.tab-title-edit {
  color: var(--colorImageFg, var(--colorAccentFg));
  background-color: var(--colorAccentBgDark);
  border-color: var(--colorAccentBgAlpha);
  padding-left: 6px;
}

.color-behind-tabs-on .tab-position:not( .tab.active) .tab-header input.tab-title-edit {
  color: var(--colorImageFg, var(--colorAccentFg));
  background-color: var(--colorAccentBgDarker);
  border-color: var(--colorAccentBgAlpha);
  padding-left: 6px;
}

/*Fix audio icon on small tab */

#browser:not(.alt-tabs) #tabs-container .tab:not(.pinned).audio-on .favicon {
	transition-delay: 0ms;
transform: scale(0);
}

#tabs-container .tab.tab-small.audio-on .tab-audio, #tabs-container .tab.pinned.audio-on .tab-audio, #tabs-container .tab.tab-small.audio-muted .tab-audio, #tabs-container .tab.pinned.audio-muted .tab-audio, #tabs-container .tab.tab-small.tab-captured .tab-audio, #tabs-container .tab.pinned.tab-captured .tab-audio {
    left: 6px;
	margin-top:-1px;
}

/* Beautify find in page */

.find-in-page-wrapper {
    left: 30vw;
    color: var(--colorFg);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: 0px solid var(--colorAccentBgAlpha);
    /* height: 30px; */
    display: flex;
    justify-content: center;
    align-items: center;
	width: 35vw;
    position: absolute;
    z-index: 10;
    /* justify-self: center; */
    border-radius: var(--radiusHalf);
    backdrop-filter: blur(1.2em);
}

.fip-nomatches.find-in-page .fip-input-container > input {
    background-color: var(--colorAccentBgFadedMost);
}
.find-in-page .fip-input-label, .find-in-page .fip-checkbox-label  {
	color:var(--colorImageFg, var(--colorAccentFg));
}


/* MacOS style for wwindow button group */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#browser.win {
	font-family: 'Roboto', sans-serif !important;
}
body {
	font-family: 'Roboto', sans-serif !important;
}



/** /
Mac Colors: 
Close Color: #EB5A55
Minimize Color: #F6BC3D
Maximize Color: #64CC44
/**/
button.close {
	background-color: transparent !important;
	border-radius: 50%;
}
button.close:hover {
	background-color: transparent !important;
}
button.close:hover svg path {
	fill: #ff9591 !important;
	transition: 0.3s;
}
button.close svg path {
	d: path('M2,8a6,6 0 1,0 12,0a6,6 0 1,0 -12,0');
	fill: #f85953;
}

button.window-maximize,
button.window-minimize,
button.window-close {
	border-radius: 50% !important;
	height: 16px !important;
	width: 16px !important;
	margin: 5px !important;
}
button.window-maximize {
	background-color: #64CC44 !important;
}
button.window-maximize:hover {
	filter:brightness(1.5);
	border-radius: var(--radius); transition: .3s ease-out !important; transform: scale(1.2);}
button.window-minimize {
	background-color: #F6BC3D !important;
}
button.window-minimize:hover {
	filter:brightness(1.5);
	border-radius: var(--radius); transition: .3s ease-out !important; transform: scale(1.2);}
button.window-close {
	background-color: #EB5A55 !important;
}
button.window-close:hover {
	filter:brightness(1.5);
	border-radius: var(--radius); transition: .3s ease-out !important; transform: scale(1.2);}
button.window-maximize svg,
button.window-minimize svg,
button.window-close svg {
	height: 20px !important;
	width: 20px !important;
}
button.window-minimize svg path {
	d: path('');
}
button.window-maximize svg path {
	d: path('');
}
button.window-close svg path {
	d: path('');
}

.window-buttongroup {
    overflow: hidden;
    display: flex;
    height: 30px;
    align-content: center;
    align-items: center;
}
#browser.win.win10:is(.tabs-top) .window-buttongroup {
	top: 6px;
	right:4px;
}
#browser:not(:has(.vivaldi)) .window-buttongroup {
	top: 0px !important;
}
/* Enlare URL text */
.UrlField, .OmniDropdown, .SearchField {
  font-size: 14px;
}
.UrlFragment-Wrapper {
	line-height: 13px;
}


/*Fix top menu in horizon */

.maximized.win10 .topmenu {
    margin-top: 4px !important;
}
.win10 .topmenu {
    margin-top: 4px;
	margin-right:75px;
}

.menubar button.highlighted {
  border-radius: var(--radius); background: var(--colorAccentBgAlpha) !important; transform: scale(1.05);
 }
.topmenu .horizontal-menu-pagetitle {
    margin-top: 0px;
	line-height:24px;
	padding-right: 12px;
}
.stacks-dotted.tabs-top.maximized.horizontal-menu.win .topmenu, .substrip-tabs-on.tabs-top.maximized.horizontal-menu.win .topmenu {
    margin-bottom: 0px;
}
.maximized#browser:has(.topmenu) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  /* move the addressbar and extension bar to tab bar */
     position: unset;
    top: unset; /* dont set it to 0 */
    left: unset !important;
    height: unset;
    background: unset !important;
	border: unset !important;
	width: 94.7%;

}
.maximized#browser:has(.topmenu + .top) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  /* move the addressbar and extension bar to tab bar */
    position: absolute;
    top: unset; /* dont set it to 0 */
    left: 0px !important;
    height: 30px;
    background: var(--colorAccentBg) !important;
	border: none !important;
	transform: translate(0, -30px); /* use instead of top =0 to fix showing or not showing empty space above tab */
	width: unset;
}
/* Fix for native window */

.maximized#browser:is(.native.win ) #main > div.mainbar > div > div.toolbar-extensions {
	left:97.4vw !important;
}

.maximized#browser:is(.native.win ) #tabs-container:not(.none).top {
    padding-left: calc(24vw + 115px) !important;
    padding-right: 90px !important;
}

#browser:is(.native.win) #header {
	min-height:30px;
}



.maximized#browser.native.win:has(.bottom, .left, .right) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {
	width: 92%;
}
.maximized#browser.native.win:has(.top) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {
	width: unset;
}

#browser.native.win:has(.bottom, .left, .right) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  /* move the addressbar and extension bar to tab bar */
    position: absolute;
    top: unset; /* dont set it to 0 */
    left: 35px !important;
    height: 30px;
    background: var(--colorAccentBg) !important;
	border: none !important;
	transform: translate(0, -30px); /* use instead of top =0 to fix showing or not showing empty space above tab */
	width: 95.7%;

}
#browser.native.win:has(.top) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  /* move the addressbar and extension bar to tab bar */
    position: unset;
    top: unset; /* dont set it to 0 */
    left: unset !important;
    height: unset;
    background: unset !important;
	border: unset !important;
	transform: unset; /* use instead of top =0 to fix showing or not showing empty space above tab */
	width: unset;
}


/* Remove line under address bar and extensions bar */
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:before,
.address-top .mainbar > .toolbar-mainbar:before {

  display:none;
}
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:before, .address-top .mainbar > .toolbar-mainbar:before {
	 display:none;
}
	
/* Centered speedial title */
.speeddial .dial > .thumbnail-title { justify-content: center; }


/* ADD BOOKMARK DIALOG */
.BookmarkButton svg > g > path.bookmark-animated-fill {fill: var(--colorAccentBgFadedMore) !important;} /* Added bookmark button hightlight */

.address-top .button-popup:has(.BookmarkPopup) {max-height: 99vh; margin-top: 0px; z-index: 99; box-shadow: 0 0 0 0px var(--colorAccentBgAlpha), 0 2px 2px rgba(0, 0, 0, 0.7);} /* enable full height popup dialog */

.address-top .BookmarkPopup > header > h1 {font-size:0;} /* hide header */
.address-top .BookmarkPopup > header > p {text-indent: -22px; clip-path: inset(0 0 0 -7px); font-size: 16px;} /* adjust selected folder title, might need adjustment for non-English language GUI */

.BookmarkPopup-TextInputWrapper {gap: 3px; /* order:1; */} /* compact bookmark form, u can relocate FORM to bottom by enabled "order:1;" */

.BookmarkLocationSelector-ToggleButtonGroup-Button {font-size: 0; padding: 9px 6px 10px;} /* no text compact folder/SD selection tabs */
.BookmarkLocationSelector-ToggleButtonGroup-Button svg {margin-left: 6px;} /* tab icon adjustment */
.BookmarkLocationSelector-ToggleButtonGroup-Button:is(:hover, :focus-within) svg.folder-icon .fill-override {fill: var(--colorAccentBgFadedMore); transform-origin: center; transform: scale(1.2);} /* improved tab icon hover/focus effect */
.BookmarkLocationSelector-ToggleButtonGroup-Button:is(:hover, :focus-within) {background:var(--colorAccentBgAlphaHeavy);}
.BookmarkLocationSelector-ToggleButtonGroup-Button:not(.BookmarkLocationSelector-ToggleButtonGroup-Button--Pressed) {box-shadow: unset !important;} /* fix: confusing focus effect */

.BookmarkLocationSelector-SearchInput {transform: translateY(-46px); padding: 0; margin: 0 9px 0 85px;} /* compact searchbox */
.BookmarkLocationSelector-FolderList {margin-top: -48px;} /* tree list adjustment */
.DialogFooter {background: var(--colorAccentBgAlphaHeavy); border-top: none;}
@media only screen and (min-height: 450px) {
.address-top .BookmarkLocationSelector.BookmarkPopup-LocationSelector {height: calc(100vh - 330px);} /* extend folder selection list */
}

.theme-dark .BookmarkPopup > footer > input.danger {color: var(--colorImageFg, var(--colorAccentFg));background:#db45379c; border-color: var(--colorErrorBgAlpha);} /* fix: dark theme REMOVE button color */
.theme-dark .BookmarkPopup > footer > input.danger:hover {background-color: #db4537 !important;}
.address-top .BookmarkPopup > footer > input[type="submit"] {width:100%;background: var(--colorAccentBgAlpha); border: 1px solid var(--colorAccentBgFadedMore);} /* big DONE button */
.address-top .BookmarkPopup > footer > input[type="submit"]:hover {transform: scale(1.05); background-color: #5252ffb0 !important;} 


/* compact mode for small height window */
@media only screen and (max-height: 450px) { 
.address-top .DialogContent.BookmarkPopup-Content {overflow: auto; max-height: calc(100vh - 110px);} /* transform popup to scrollable */
.address-top .BookmarkLocationSelector.BookmarkPopup-LocationSelector {height: calc(100vh - 114px);} /* optional: limit scrollable content to 2 pages */
.address-top .BookmarkPopup {grid-template-rows: auto auto 0;} /* exclude footer height from popup dialog */
.address-top .BookmarkPopup > footer {visibility: hidden; margin-top: -63px;} /* hide footer */
.address-top .button-popup.button-popup-enter-done .BookmarkPopup > footer > input.danger {visibility: visible;} /* adjust REMOVE button when hide footer */
}


/* Weird address bar border */

.dim-blurred:not(.hasfocus) .SearchField, .dim-blurred:not(.hasfocus) .UrlBar-AddressField {
	border:none;
}


button{
	border-width:0px;
}


.UrlBar-AddressField .pageload .pageload-indicator {
	height:24px;
	background-color: var(--colorAccentBgDark);
	top: -1px;
	border-radius: var(--radiusHalf);
}


/*Fix sub tab line */
.color-behind-tabs-on #tabs-subcontainer.top {
box-shadow:none;
}

/* Subtab animation */

#tabs-subcontainer.visible {
    animation: dropfade 0.4s;
}
#tabs-tabbar-container {
	background:transparent;
	transition: all 0.2s cubic-bezier(0.48, 0.45, 1, 1) 0s;
}

/* Fix button in ták panel */

.FormButton.FormButton--WithIcon {
	background: var(--colorAccentBgAlphaHeavy);
	padding: 12px;
}

.FilterAndSearch-Input.FilterAndSearch-Input {
	    border-radius: var(--radius);
}


input, select, textarea {
    background-color: var(--colorBgAlphaHeavier);
}


#modal-bg.default-browser .SuggestDefault {
	Background:var(--colorAccentBgAlphaHeavy);
	height: 34px;
}


#modal-bg.default-browser > div {
	Border-radius: 0px;
}

/*Beautify calendar event panel*/

.panel .calendar-event .cal-event-body {
    overflow-wrap: anywhere;
    height: fit-content;
    align-content: center;
}
#tasks_panel .calendar-event:not(.editing) .cal-event-body .cal-event-header {
    padding-left: 22px;
    text-indent: -22px;
    padding-top: 12px;
	padding-bottom:12px;
}

.panel .calendar-event .cal-event-body:not(:has(.sentry)):hover {
	transform: scale(1.05);
	transition: 0.3s ease-out;
}
.panel .calendar-event .cal-event-body {
	    padding-left: 16px;
}
.calendar-event.solid:hover, .calendar-event.all-day:hover {
	background-color: var(--colorCalendarBg);
}
.calendar-event.editing:hover {
	background-color:var(--colorBgAlphaHeavier) !important;
	transform: none !important;
}
.calendar-event .cal-event-body-edit.selected:hover {
	transform: none !important;
}
.calendar-event .cal-event-body-edit {
	max-width:100%
}

.calendar-event select:not([multiple]):not([size]) {
	background-position: 92% 8px;
}


.calendar-event .cal-edit-tabs {
	flex-wrap: nowrap;
}
.button-toolbar > button span + .button-title {
    min-width: 3ch;
}
/* Beautify focus color */

*:focus-visible {
    outline: 2px solid var(--colorAccentBg);
	border-radius:var(--radius);
}

/*Fix calendar panel flex */

#calendar_panel > header > div:nth-child(2) {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: flex-end;
}

.button-toolbar > button span + .button-title {
    min-width: 3ch;
	}
.CalendarSelector.CalendarSelector.CalendarSelector.button-toolbar {
    flex: 1 1 auto;
	max-width: 210px;
}
#calendar_panel > header > div.toolbar.toolbar-default.toolbar-wrap {
	flex-wrap: nowrap;
}
.toolbar-default .button-toolbar {
    min-width: 32px;
}

.toolbar-group {
    display: flex;
    white-space: nowrap;
    --ToolbarItemGap: 0;
    align-items: center;
    min-width: inherit;
}

#calendar_panel .PeriodPicker h1 {
    min-width: 50px;
    overflow: hidden;
}
#calendar_panel .PeriodPicker.PeriodPicker .button-toolbar {
    height: 26px;
    margin-left: 4px;
}

#calendar_panel > header > div:nth-child(2) > div.PeriodPicker.no-page-focus > h1 {
	display: inline-block;
    flex: 0 1 auto;
    min-width: 3ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.toolbar-default .button-toolbar.button-narrow {
    min-width: fit-content;
	width: 30px;
	
}

/* Beautify date picker popup */

.DatePickerPopup {
	backdrop-filter: brightness(70%) blur(1em);
	background-color: var(--colorAccentBgAlphaHeavy);
	border-radius: var(--radiusCap);
}

.DatePickerPopup .toolbar {
	background-color: var(--colorAccentBgAlphaHeavy);
	border-radius: var(--radiusCap);
}

.CalendarMonth-Day--Weekend {
    background-color: var(--colorAccentBgAlpha);
}

.CalendarMonth-Day {
    outline: 1px solid var(--colorAccentBgDarker);
}

.DatePickerPopup h1.button:hover {
    background-image: linear-gradient(var(--colorAccentBgAlphaHeavy), var(--colorAccentFgAlpha));
    border-color: var(--colorAccentBgAlpha);
}

.CalendarMonth-Day:hover {
	background-color: var(--colorAccentBgAlpha);
	transform: scale(1.1);
	transition: 0.3s ease-out;
	
}