:root {
	--text-color: #1a202c;
	--text-color-sec: #1a202c;
	--text-gray-color: #676767;
	--upper-background: #fff;
	--upper-background-rgb: 255, 255, 255;
	--upper-gradient: linear-gradient(to right, var(--upper-background), #fcfcfc, #fafafa, #f7f7f7, var(--down-background));
	--leftbar-background: #e5e5e5;
	--leftbar-btn-hover: rgba(0, 0, 0, .075);
	--text-color-button: #0D47A1;
	--contrast-background: #e1e1e1;
	--dropdown-hover-background: #ececec;
	--sites-background: #fff;
	--down-background: #f5f5f5;
	--loading-background: rgba(255, 255, 255, .7);
	--button-background: #e4e4e4;
	--button-hover-background: #e6e6e6;
	--button-bottom-border: #d8d8d8;
	--active-tab: #186cd9;
	--active-tab-hover: #ababab;
	--icon-hover: #888;
	--oddelovac: #ccc;
	--action-color: #e2e2e2;

	--red-color: #E02401 /*#f0776e*/;
	--red-hover: #FF5151;
	--green-color: #42D458;
	--green-cool: #a6e6ac;
	--green-trans: #b8dbae;
	--orange-color: #FF9F45;

	--navbar-height: 64px;
	--upper-height: 230px /*178px*/;
}

body.darkMode {
	--text-color: #d6d6d6;
	--text-color-sec: #fff;
	--upper-background: #0b0d0f /*#121417 #222831*/;
	--upper-background-rgb: 11, 13, 15;
	--upper-gradient: linear-gradient(to right, var(--upper-background), #0b0d0f, #0c0e10, #0c0e10, var(--down-background));
	--leftbar-background: #101214;
	--leftbar-btn-hover: rgba(255, 255, 255, .06);
	--contrast-background: #212428;
	--dropdown-hover-background: #2a2e33;
	--sites-background: #111;
	--down-background: #0c0e10;
	--loading-background: rgba(0, 0, 0, .5);
	--button-background: #1c1c1c;
	--button-hover-background: #202020;
	--button-bottom-border: #191919;
	--oddelovac: azure;
	--action-color: #21242888;
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--contrast-background); 
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--dropdown-hover-background); 
}

* {
	outline: none;
	scroll-behavior: smooth;
}

body {
	margin: 0;
    background: var(--down-background);
    font-family: 'Catamaran', sans-serif;
	overflow: hidden;
}

#loadingscreen {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
   top: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
	user-select: none;
	z-index: 1000;
	background: var(--loading-background);
	backdrop-filter: blur(3px);
}

#loadingscreen circle {
	fill: none;
	stroke-width: 5px;
	stroke: #555555;
	stroke-linecap: round;
	stroke-dashoffset: 0;
	stroke-dasharray: 100;
	transform-origin: 50px 50px;
	animation: loading 1.75s infinite;
}

#loadingscreen > svg {
	height: 64px;
	width: 64px;
}

form {
	display: inline-block;
}

input {
	border-radius: 8px;
	padding: 4px 12px;
	height: 27px;
	background: var(--sites-background);
	border: 2px solid transparent;
	color: var(--text-color);
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	transition: all .25s;
}

input:focus, input:not(:placeholder-shown) {
	border: 2px solid var(--active-tab);
}

input:not(:placeholder-shown) {
	opacity: .9;
}

input:focus {
	background: var(--sites-background);
	border-radius: 6px;
}

p {
    margin: 0;
	letter-spacing: 1px;
	color: var(--text-color);
}

a {
	color: var(--text-color);
	text-decoration: none;
	font-weight: 600;
}

a:hover {
	color: var(--active-tab);
}

i {
	margin-top: 1px;
}

i.hover:hover {
    cursor: pointer;
    color: var(--icon-hover);
	transition: all .3s;
}

#scrollbar {
	position: absolute;
	top: calc(var(--navbar-height) + var(--upper-height) + 5%);
	right: 4px;
	padding: 2px;
	height: 100%;
	display: none;
	background: var(--contrast-background);
	border-radius: 4px;
	z-index: 9999999999999;
}

.flex {
	display: flex;
}

.grid {
	display: grid;
}

.semiopacity {
	opacity: .5;
}

.inner {
	padding: 15px 70px;
	color: var(--text-color);
}

.contentinner {
	margin: 0 42px;
	flex-grow: 1;
	position: relative;
	height: 65vh;
	overflow: auto;
}

.upper {
	/* background: linear-gradient(to right, #0b0d0f, #0b0d0f, #0c0e10, #0c0e10, #0c0e10); */
	/* background: var(--upper-gradient) url(./xmark-solid.svg); */
	background: var(--upper-background);
	margin: calc(var(--navbar-height)) auto 0;
	padding: 16px 100px 16px;
	height: var(--upper-height);
}

.line {
	border-radius: 4px;
	width: 512px;
	height: 2px;
	background: var(--oddelovac);
}

.subtitle {
    margin: 32px 0 4px;
	font-family: 'Source Sans Pro', sans-serif;
	display: flex;
	flex-direction: column;
   position: relative;
}

.subtitle .top {
	text-transform: uppercase;
	background: linear-gradient(315deg, var(--text-gray-color) 50%, var(--text-color-sec));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-weight: 800;
	font-size: 18px;
}

.subtitle .bottom {
	margin-left: 3px;
	opacity: .7;
	color: var(--text-gray-color);
	font-weight: 600;
}

.subtitle .left {
	position: absolute;
   top: 50%;
	right: 0;
   transform: translateY(-50%);
}

.subtitle .left button {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-grow: 1;
}

pre.textarea {
	margin: 0;
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 600;
	background: var(--loading-background);
	border-radius: 8px;
}

.shadow {
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.modernshadow, button, pre.textarea {
	box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .05), 0 0 0 0 #091e4240;
}

.tw-shadow {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1),0 4px 6px -2px rgba(0, 0, 0, .05);
}

.welcome {
    line-height: 1;
    margin: 12px;
    font-size: 38px;
	user-select: none;
	gap: 16px;
}

.welcome > .welcomecircle {
	height: 76px;
	aspect-ratio: 1;
	background: var(--contrast-background);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
}

.dropdown {
	margin-top: 42px !important;
	margin-left: -134px;
	padding: 6px 0;
	background: var(--contrast-background);
	border-bottom: 1px solid var(--button-bottom-border);
	position: fixed;
	display: none;
	flex-direction: column;
	width: 164px;
	border-radius: 6px;
	transition: all .3s;
	transform-origin: right top;
	z-index: 100;
	user-select: none;
}

.dropdown > div {
	padding: .35rem 1rem;
}

.dropdown > div:not(.ignoreDropdownHover) {
	cursor: pointer;
	transition: all .25s;
}

.dropdown > div:not(.ignoreDropdownHover):hover {
	background: var(--dropdown-hover-background);
}

.dropdown .logoutInDropdown:hover {
	color: var(--red-hover);
	font-weight: 700;
}

.profileBundler img:hover {
	opacity: .7;
	cursor: pointer;
}

.upper .upperStatuses > div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.upper .upperButtons {
	margin-top: -38px;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
}

.upper .upperButtons button {
	display: none;
	align-items: center;
	gap: 8px;
	transition: all .4s;
}

.upper .upperButtons button:hover {
	margin-right: 10px;
}

.allowedUsersDisplayOnUpper {
	margin: 16px 0 0;
	display: flex;
	align-items: center;
	gap: 26px;
	position: relative;
	z-index: 1;
}

.allowedUsersDisplayOnUpper:hover > .allowedUsersImages img {
	margin-right: 2px;
}

.allowedUsersDisplayOnUpper > .allowedUsersImages {
	display: flex;
	align-items: center;
}

.allowedUsersDisplayOnUpper > .allowedUsersImages:hover img {
	margin-right: 4px;
}

.allowedUsersDisplayOnUpper > .allowedUsersImages img {
	margin-right: -11px;
	width: 32px;
	height: 32px;
	background: var(--contrast-background);
	border: 2px solid var(--upper-background);
	border-radius: 50%;
	transition: all .15s;
}

.allowedUsersDisplayOnUpper > .allowedUsersImages img:hover {
	opacity: .7;
	cursor: pointer;
}

.allowedUsersDisplayOnUpper > .allowedUsersText {
	display: flex;
	align-items: center;
	font-size: 18px;
}

#topbar {
	padding: 0 32px;
	position: fixed;
	left: 0;
	top: 0;
	width: calc(100% - 32px);
	height: var(--navbar-height);
	background: var(--loading-background);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	color: var(--text-color);
	padding: 0 18px;
}

#topbar > .left {
	margin-right: auto;
	position: relative;
	z-index: 11;
}

#topbar > .right {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 32px;
}

#topbar > i {
	transform: scale(1.2);
}

#topbar .profileImg {
	margin-top: 1px;
	padding: 4px;
	border-radius: 50%;
	background: var(--leftbar-background);
	height: 30px;
	aspect-ratio: 1;
}

#leftbar {
	padding: 10px 20px;
	width: 250px;
	height: calc(100vh - var(--navbar-height) - var(--upper-height) - 5.2vh);
	color: var(--text-color);
	background: var(--leftbar-background);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#leftbar div:last-child {
	font-size: 14px;
	margin-top: auto;
}

#leftbar #instanceInfoInLeftBar > div {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 6px;
}

#leftbar #instanceInfoInLeftBar > div > i {
	width: 16px;
}

#leftbar > .sectionseparator {
	margin: 12px 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#leftbar .leftbarbtn.sub {
	flex-direction: column;
	align-items: flex-start;
	border-left: 1px solid lightslategray;
	border-radius: 0;
	margin-left: 2px;
}

#leftbar .leftbarbtn.sub:hover, #leftbar .leftbarbtn.sub.active {
	background: none;
	color: lightslategray;
	border-left: 1px solid #3a444d;
}

#leftbar .leftbarbtn {
	padding: 6px 12px;
	font-family: 'Nunito', sans-serif;
	font-size: 17px;
	border-radius: 6px;
	cursor: pointer;
	transition: all .35s;
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
	transition: all .2s;
}

#leftbar .leftbarbtn > i, #leftbar .leftbarbtn > svg {
	transform: scale(0.95);
	width: 22px;
}

#leftbar .leftbarbtn > span {
	margin-top: 2px;
	flex-grow: 1;
}

#leftbar .leftbarbtn:hover, #leftbar .leftbarbtn.active {
	background: var(--leftbar-btn-hover);
	color: var(--text-color-sec);
	font-weight: 700;
}

#leftsidebar {
	margin: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 100%;
}

#leftsidebar > #activator {
	position: absolute;
	top: .5rem;
	left: -1rem;
	width: .5rem;
	height: 100%;
	background: #ccc;
	border-radius: 8px;
	height: calc(100vh - 3rem);
	z-index: 10;
}

#leftsidebar > #content {
	padding: .5rem 1rem;
	position: relative;
	background: var(--upper-background);
	height: calc(100vh - 3rem);
	border-radius: 8px;
	z-index: 10;
}

.logoutbtn {
	padding: 6px 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 10px;
	transition: all .4s;
}

.logoutbtn:hover {
	background: var(--leftbar-btn-hover);
}

#searchbar {
	width: 30%;
	transition: all .3s;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#searchbar:focus {
	background: var(--sites-background);
}

#navtitle {
	font-family: 'Palanquin Dark', sans-serif;
	font-size: 32px;
	cursor: pointer;
	transition: all .2s;
   user-select: none;
}

#navtitle:hover {
	color: var(--active-tab-hover);
}

.welcome .name {
	font-weight: 700;
	margin-left: 12px;
	/*background: linear-gradient(315deg,#42d392 25%,#647eff);*/
	background: linear-gradient(315deg, var(--text-gray-color) -15%, var(--text-color));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.stats {
	display: flex;
	justify-content: flex-start;
	gap: 12px;
}

.stats .stat {
	width: 190px;
	height: 64px;
	background: var(--contrast-background);
	padding: 6px 12px;
	border-radius: 8px;
	transition: all .4s;
}

.stats .stat {
	font-weight: 600;
	font-size: 18px;
}

.statsicons {
	margin: 12px 0;
	grid-row-gap: 4px;
	grid-template-columns: repeat(3, 104px) 7fr;
	gap: .25rem .75rem;
}

.statsicons > .statsicon {
	padding: .2rem .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--sites-background);
	border: 1px solid var(--contrast-background);
	border-radius: 50px;
}

.statsicons > .statsicon > span {
	flex-grow: 1;
}

.statistic {
	font-weight: 500;
	font-size: 24px;
	margin-left: 8px;
	font-family: 'Source Sans Pro', sans-serif;
}

.sites {
	padding-left: 12px;
	margin: 0;
	list-style: none;
	grid-template-columns: repeat(2, 1fr);
	flex-direction: column;
	gap: 8px;
}

.sites > li {
	padding: 4px 8px 4px 16px;
	border-radius: 8px;
	border: 1px solid var(--contrast-background);
	background: var(--sites-background);
	height: 48px;
	cursor: pointer;
	align-items: center;
	gap: 16px;
	transition: all .4s;
}

.sites > li > img {
	height: 36px;
	transform: rotate(5deg);
	user-select: none;
}

.sites > li > div.site-name {
	flex-direction: column;
	transition: all .2s;
}

.sites > li:hover > div.site-name.flex {
	transform: translateX(10px);
}

.sites > li:hover > img {
	transform: rotate(15deg);
}

.calculation {
   font-size: 20px;
   font-weight: 800;
}

.userCountOnSiteItem {
	margin-left: auto;
	align-items: center;
}

.unsaved-changes::before {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background-color: var(--contrast-background);
	content: '';
  	opacity: .6;
	z-index: -1;
}

.unsaved-changes {
	position: fixed;
	padding: 2px 40px;
	width: 612px;
	height: 58px;
	bottom: 16px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	display: none;
}

.webid {
	font-size: 20px;
	font-weight: 700;
	font-family: 'Source Sans Pro', sans-serif;
	opacity: .5;
}

.webname {
	margin-top: 2px;
	font-size: 42px;
	font-weight: 700;
}

.webnameSubStatus {
	margin-top: 1px;
	font-size: 17px;
	opacity: .95;
}

.webnameSubStatus > div {
	margin-left: 4px;
}

.webnameSubStatus > div span {
	margin-left: 8px;
}

td {
	padding: 0 0 2px 8px;
}

.fa-trash, .fa-right-from-bracket {
	color: var(--red-color);
	cursor: pointer;
	margin-right: 12px;
}

.fa-trash:hover, .fa-right-from-bracket:hover {
	color: var(--red-hover);
}

.icons {
	justify-content: flex-start;
	align-items: center;
	position: relative;
	z-index: 1;
}

.icons > i {
	transform: scale(.5);
}

@media only screen and (max-width: 280px) {
	.rootPathOfWebsite {
		display: none;
	}
}

@media only screen and (max-width: 332px) {
	.upper .statsiconsParent {
		margin-left: 0px !important;
	}

	.name {
		margin-left: 0px !important;
	}

	.subtitle .left button {
		margin: 0 auto;
	}

	#leftbar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		height: 79px !important;
		padding: 8px !important;
	}
}

@media only screen and (max-width: 392px) {
	.statsicons {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.upper .upperStatuses {
		display: none;
		position: absolute;
		top: 0;
	}

	body {
		overflow-y: hidden;
	}
}

@media only screen and (max-width: 432px) {
	#leftbar {
		padding-left: 0px;
		flex-direction: row;
		justify-content: center;
		width: 100% !important;
		height: 40px;
	}

	#leftbar > .flex {
		display: none;
	}

	.site-tabs {
		transform: translateX(-18%);
	}

	.downSection {
		flex-direction: column;
	}
}

@media only screen and (max-width: 540px) {
	.site-tabs {
		margin: 2px 48px !important;
	}

	#leftbar > .sectionseparator {
		display: none;
	}

	#leftbar .leftbarbtn > span {
		display: none;
	}
	
	#leftbar .leftbarbtn {
		width: 18px;
		height: 26px;
	}

	#leftbar .leftbarbtn.sub {
		display: none;
	}

	#leftbar > .userleftbarbtn > i {
		margin-left: 1px !important;
	}

	#leftbar > div:not(.leftbarbtn):not(.flex) {
		position: absolute;
		top: 0;
	}

	#leftbar > .flex {
		margin-left: -6px;
	}

	#leftbar #instanceInfoInLeftBar > div > i {
		display: none;
	}

	#leftbar {
		width: 44px;
		min-width: initial;
	}

	#leftbar #instanceInfoInLeftBar {
		font-size: 12px;
	}
}

@media only screen and (max-width: 616px) {
	.site-status-flex > span {
		display: none;
	}

	.site-status-flex > i.fa-xmark {
		margin-left: 4px;
	}

	.site-status-flex {
		width: 18px !important;
	}
}

@media only screen and (max-width: 692px) {
	#searchbar {
		display: none;
	}

	.rootPathOfWebsite {
		margin-top: -8px !important;
		font-size: 11px;
	}

	.userCountOnSiteItem {
		display: none;
	}

	.site-status-flex {
		margin-left: auto;
	}
}

@media only screen and (max-width: 716px) {
	.site-tabs p i {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.subtitle .left {
		position: initial;
		margin-top: 6px;
	}

   .statsicons > .statsicon:last-child {
		display: none;
	}

   .welcome .welcomecircle {
		display: none;
	}

	.sites img {
		display: none;
	}

   .upper > div > div {
      margin: 0;
   }
}

@media only screen and (max-width: 930px) {
	.upper .upperButtons {
		display: none;
	}
}

@media only screen and (max-width: 1044px) {
	.sites {
		display: flex;
	}
}

.site-tabs {
	display: flex;
	justify-content: center;
	gap: 24px;
	/* margin-top: 3px; */
	font-size: 17px;
	font-weight: 500;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, calc(70% + 6px));
}

.site-tabs p {
	/* padding: 6px 0 0; */
	cursor: pointer;
	font-weight: 500;
	user-select: none;
   text-wrap: nowrap;
}

.site-tabs p i {
	margin-right: 8px;
}

.site-tabs p.active {
	color: var(--active-tab);
	font-weight: 700;
}

.site-tabs p.active::after {
	display: block;
	content: '';
	height: 2px;
	background: var(--active-tab);
	margin: 6px auto 0;
}

.site-tabs p:not(.blocked):not(.active):hover {
	color: var(--active-tab-hover);
}

.site-tabs p.blocked {
	color: var(--text-gray-color);
	cursor: no-drop;
	opacity: .8;
}

.site-status-flex {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--contrast-background);
}

.site-status-flex > span {
	margin-top: 3px;
}

button, .button {
	font-weight: 900;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	padding: 8px 16px;
	color: var(--text-color-button);
	border: none;
	border-bottom: 1px solid var(--button-bottom-border);
	background: var(--button-background);
	border-radius: 3px;
	cursor: pointer;
	line-height: 1.25rem;
	transition: all .2s;
}

button.blocked, .button.blocked {
	cursor: no-drop;
	pointer-events: none;
	opacity: .5;
}

button:hover, .button:hover {
	color: #0069d2;
	background: var(--button-hover-background);
}

.table {
	margin-top: 2px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.table > .tableHeader {
	margin: 0 0 -5px;
	padding: 0 12px;
	font-size: 16px;
	font-weight: 700;
	cursor: initial;
	color: var(--text-gray-color);
	background: transparent;
	border: none;
}

.table > div {
	padding: 6px 8px 6px 12px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	cursor: pointer;
	gap: 22px;
	background: var(--sites-background);
	border: 1px solid var(--contrast-background);
	border-radius: 6px;
}

.table > div:not(.tableHeader):hover {
	background: var(--dropdown-hover-background);
	border-radius: 6px;
}

.table div.actions {
	display: flex;
	align-items: center;
}

.table div.actions i {
	margin-right: 12px;
}

.fileBrowserRow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 32px;
	width: 100%;
}

.verified-domain-on-subdomains {
	cursor: pointer;
}

.verified-domain-on-subdomains:hover {
	color: var(--active-tab);
}

.clickableSubdomain {
	cursor: pointer;
	font-weight: 600;
}

.clickableSubdomain:hover {
	color: var(--active-tab-hover);
}

.otvoritftphoverdesign:hover {
	color: var(--active-tab);
	cursor: pointer;
}

.errormodal {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 6px;
	color: azure;
	margin-bottom: 12px;
}

.errormodal::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--red-hover);
	border-radius: 6px;
	opacity: .35;
	z-index: -1;
}

.errormodal svg {
	height: 20px;
	aspect-ratio: 1;
}

.errormodal > .errorbadge {
	padding: 0 12px;
	font-weight: 700;
	background: var(--red-hover);
	font-size: 16px;
	border-radius: 12px;
}

.errormodal > i {
	margin-left: auto;
}

div#cookie-save-info {
	border-left: 2px solid var(--text-gray-color);
	border-radius: 3px;
	padding: 2px 12px;
	background: var(--button-hover-background);
}

footer {
	padding-top: 0 !important;
	color: var(--text-gray-color);
}

footer > span::before {
	margin: 0 0 6px;
	display: block;
	border-bottom: 1px solid var(--contrast-background);
	width: 150px;
	content: '';
}

@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	
	1% {
		stroke-dashoffset: 0;
	}
	
	50% {
		stroke-dashoffset: 50;
	}
	
	to {
		transform: rotate(360deg);
		stroke-dashoffset: 0;
	}
}

.pulse-circle {
	width: 18px;
	aspect-ratio: 1;
	border-radius: 50%; 
}

.success-banner {
	padding: 6px 18px;
	margin-bottom: 16px;
	background: var(--green-trans);
	border-top: 2px solid var(--green-color);
	border-radius: 0 0 8px 8px;
	color: #222831;
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 700;
}

.success-banner.info {
	background: #4b8cf0;
	border-top: 2px solid var(--active-tab);
}

.success-banner.err {
	background: #f0776e;
	border-top: 2px solid var(--red-color);
}

.success-banner > div:not(.svgBundler) {
	width: 100%;
}

.success-banner > .svgBundler svg {
	height: 32px;
	display: flex;
	align-items: center;
	stroke: var(--green-color);
}

.success-banner > .svgBundler svg:not(.ignorePulseAnimation) {
	animation: only-scale-pulse 2s infinite;
}

.redirectsDiv {
	flex-direction: column;
	gap: 4px;
}

.redirectsDiv div {
	display: flex;
	gap: 8px;
}

.activity-row {
	margin-bottom: 3px;
	padding: 4px 8px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	cursor: pointer;
}

.activity-row:last-child {
	margin-bottom: 15px;
}

.activity-row img {
	width: 32px;
	height: 32px;
	background: var(--leftbar-background);
	border-radius: 50%;
}

.activity-row:hover {
	background: var(--sites-background);
}

.activity-row > .activity-date {
	margin-left: auto;
	opacity: .8;
	font-weight: 700;
}

.activity-row > .site-status-flex {
	padding: 0 8px;
	border-radius: 10px;
	gap: 10px;
}

.activity-row > .site-status-flex:hover {
	border-radius: 6px;
	cursor: pointer;
	background: var(--leftbar-background);
}

.action-panel {
	padding: 20px;
	background: linear-gradient(to right, var(--action-color), transparent);
	color: var(--text-color);
	border-radius: 10px;
	cursor: pointer;
}

.action-panel:hover {
	border-radius: 8px;
	opacity: .8;
}

.action-panel:hover .action-title {
	gap: 10px;
}

.action-panel .action-title {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	transition: all .2s;
}

.action-panel .action-title i {
	margin-top: -2.5px;
	transform: scale(.65);
}

.action-panel .action-text {
	margin: -6px 0 0 2px;
	font-size: 17px;
}

.green-pulse {
	animation: green-pulse-animation 2s infinite;
}

.red-pulse {
	animation: red-pulse-animation 2s infinite;
}

.orange-pulse {
	animation: orange-pulse-animation 2s infinite;
}

@keyframes green-pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(66, 212, 88, .3);
	}

	15% {
		transform: scale(1.05);
	}

	30% {
		transform: scale(1);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(66, 212, 88, 0);
	}
}

@keyframes red-pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(224, 36, 1, .3);
	}

	15% {
		transform: scale(1.05);
	}

	30% {
		transform: scale(1);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(224, 36, 1, 0);
	}
}

@keyframes orange-pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(255, 159, 69, .3);
	}

	15% {
		transform: scale(1.05);
	}

	30% {
		transform: scale(1);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 159, 69, 0);
	}
}

@keyframes only-scale-pulse {
	15% {
		transform: scale(1.15);
	}

	35% {
		transform: scale(1);
	}
}