Merge branch '8.2RC'8.2

2 files changed, 149 insertions, 219 deletions

diff --git a/view/theme/redbasic/css/narrow_navbar.css b/view/theme/redbasic/css/narrow_navbar.css
index 99f083638..7a48fc71e 100644
--- a/view/theme/redbasic/css/narrow_navbar.css
+++ b/view/theme/redbasic/css/narrow_navbar.css
@@ -1,24 +1,16 @@
 @media screen and (min-width: 767px) {
 
-	nav.navbar {
-		padding-top: 1px;
-		padding-bottom: 1px
-	}
-
-	nav .badge {
-		top: 0px;
-		left: -0.25rem;
+	.navbar {
+		--bs-navbar-padding-y: 1px;
 	}
 
 	.contextual-help-content-open {
 		top: 2.5rem;
 	}
 
-	aside {
-		padding-top: 3.5rem;
-	}
-
-	section {
+	#region_1,
+	#region_2,
+	#region_3 {
 		padding-top: 3.5rem;
 	}
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 9069500d9..480e951a9 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -5,31 +5,37 @@
  * Originally by Fabio Comuni <fabrix.xm@gmail.com>
  */
 
-
-/* bootstrap variable */
+/* bootstrap variables */
 
 :root {
 	--bs-border-radius: $radius;
-	--bs-link-color: $link_colour;
-	--bs-link-hover-color: $link_hover_colour;
-	--bs-body-bg: $bgcolour;
-	--bs-highlight-bg: yellow;
+	--bs-highlight-bg: var(--bs-warning);
 }
 
-.nav-tabs {
-	--bs-nav-tabs-border-radius: $radius;
+[data-bs-theme=light] {
+	--bs-link-color: $link_color;
+	--bs-link-hover-color: $link_hover_color;
+	--hz-body-bg: $bgcolor;
+	--hz-body-bg-image: url('$background_image');
 }
 
-.nav-pills {
-	--bs-nav-pills-border-radius: $radius;
+[data-bs-theme=dark] {
+	--bs-link-color: $link_color_dark;
+	--bs-link-hover-color: $link_hover_color_dark;
+	--hz-body-bg: $bgcolor_dark;
+	--hz-body-bg-image: url('$background_image_dark');
 }
 
-.btn {
-	--bs-btn-border-radius: $radius;
+[data-bs-theme=light] .navbar.bg-body-tertiary {
+	background-color: $nav_bg !important;
 }
 
-.card {
-	--bs-card-border-radius: $radius;
+[data-bs-theme=dark] .navbar.bg-body-tertiary {
+	background-color: $nav_bg_dark !important;
+}
+
+.btn {
+	--bs-btn-border-radius: $radius;
 }
 
 
@@ -41,12 +47,12 @@ html {
 
 body {
 	font-size: 0.9rem;
-	background-color: var(--bs-body-bg);
-	background-image: url('$background_image');
+	background-color: var(--hz-body-bg);
+	background-image: var(--hz-body-bg-image);
 	background-attachment: fixed;
 	background-size: cover;
-	color: $font_colour;
-	margin: 0px;
+	color: var(--bs-body-color);
+	margin: 0;
 }
 
 aside#region_1 {
@@ -58,7 +64,7 @@ aside#region_1 {
 
 aside#region_3 {
 	width: $right_aside_widthrem;
-	min-width: $left_aside_widthrem;
+	min-width: $right_aside_widthrem;
 	max-width: $right_aside_widthrem;
 }
 
@@ -107,15 +113,15 @@ h6, .h6 {
 	font-size: 0.75rem;
 }
 
-#banner {
-	color: $banner_colour;
+.navbar-banner {
 	font-weight: bold;
+	color: var(--bs-emphasis-color);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-#banner img {
+.navbar-banner img {
 	max-height: 1.35rem;
 	width: auto;
 }
@@ -154,8 +160,8 @@ input, optgroup, select, textarea {
 
 input[type=text], textarea {
 	resize: vertical;
-	background-color: $comment_item_colour;
-	color: $font_colour;
+	background-color: var(--bs-body-bg);
+	color: var(--bs-body-color);
 }
 
 .selected-doco-nav {
@@ -176,11 +182,6 @@ input[type=text], textarea {
 	color: #FF0000;
 }
 
-nav {
-	opacity: $nav_float_min_opacity;
-	filter:alpha(opacity=$nav_percent_min_opacity);
-}
-
 #powered-by {
 	font-size: 0.5rem;
 	position: absolute;
@@ -217,7 +218,7 @@ nav {
 	left: 0px;
 	width: 100%;
 	max-height: 50%;
-	background: $comment_item_colour;
+	background: var(--bs-body-bg);
 	padding: 1rem;
 	border-bottom: #e0e0e0 1px solid;
 	overflow: auto;
@@ -243,7 +244,6 @@ nav {
 }
 
 .contextual-help-tool i {
-	color: $font_colour;
 	font-size: 1.05rem;
 }
 
@@ -279,10 +279,10 @@ nav {
 	-moz-animation: rotation 1s infinite linear;
 	-o-animation: rotation 1s infinite linear;
 	animation: rotation 1s infinite linear;
-	border-left: .2rem solid rgba(77, 77, 77, .15);
-	border-right: .2rem solid rgba(77, 77, 77, .15);
-	border-bottom: .2rem solid rgba(77, 77, 77, .15);
-	border-top: .2rem solid rgba(77, 77, 77, .5);
+	border-left: .2rem solid var(--bs-border-color);
+	border-right: .2rem solid var(--bs-border-color);
+	border-bottom: .2rem solid var(--bs-border-color);
+	border-top: .2rem solid var(--bs-tertiary-color);
 	border-radius: 100%;
 }
 
@@ -410,7 +410,7 @@ footer {
 }
 
 .vcard-card {
-	background-color: rgba(254,254,254,0.5);
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
 }
 
 .vcard {
@@ -465,7 +465,7 @@ footer {
 .pager-prev,
 .pager-next,
 .pager_n {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	background: transparent;
 	padding: 4px;
 }
@@ -479,7 +479,6 @@ footer {
 .photo,
 .contact-block-img {
 	border-radius: $radius;
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 #side-bar-photos-albums {
@@ -493,7 +492,6 @@ footer {
 .profile-match-photo img,
 .directory-photo-img {
 	border-radius: $radius;
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 .profile-match-photo img {
@@ -502,7 +500,7 @@ footer {
 }
 
 #photo-view-wrapper {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .pmenu.horizontal {
@@ -573,10 +571,6 @@ footer {
 	margin-left: 15px;
 }
 
-.wall-item-conv {
-	background-color: $comment_item_colour;
-}
-
 #nav-notifications-template,
 #nav-notifications-forums-template {
 	display: none;
@@ -631,7 +625,7 @@ nav .acpopup {
 
 #cboxContent {
 	padding: 3px;
-	border: 0px solid #fff;
+	border: 0px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	background-color: #fff;
 	z-index: 1052;
@@ -682,7 +676,7 @@ nav .acpopup {
 	padding: 10px;
 	height: 250px;
 	overflow: auto;
-	border: 1px solid #ddd;
+	border: 1px solid var(--bs-border-color);
 }
 
 #prof-separator {
@@ -694,7 +688,7 @@ nav .acpopup {
 	padding: 10px;
 	height: 450px;
 	overflow: auto;
-	border: 1px solid #ddd;
+	border: 1px solid var(--bs-border-color);
 }
 
 #prof-edit-desc {
@@ -774,32 +768,12 @@ div.jGrowl div.jGrowl-notification {
 	text-align: center;
 }
 
-.conv-participants {
-	color: $font_colour;
-}
-
 .contactname {
 	display: block;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.dropdown-notification,
-.notification,
-.member-item {
-	line-height: 1.2em;
-	font-size: 0.75rem;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: block;
-	white-space: nowrap;
-}
-
-.notification.notification-forum {
-	font-size: 0.9rem;
-	color: $font_colour;
-}
-
 #acl-search::-webkit-input-placeholder {
 	/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
 	font-family: ForkAwesome, sans-serif, arial, freesans;
@@ -920,20 +894,11 @@ margin-right: 50px;
 a .generic-icons {
 	font-size: 1rem;
 	margin-right: 0.5rem;
-	color: $font_colour;
 }
 
 .generic-icons-right {
 	font-size: 1rem;
 	margin-left: 0.5rem;
-	color: $font_colour;
-}
-
-.generic-icons:hover,
-a .generic-icons:hover,
-.generic-icons-right:hover,
-a .generic-icons-right:hover {
-	color: $font_colour;
 }
 
 .generic-icons-nav {
@@ -949,7 +914,6 @@ a .generic-icons-right:hover {
 .drop-icons,
 a .drop-icons {
 	font-size: 1rem;
-	color: $font_colour;
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -1018,8 +982,8 @@ img.mail-conv-sender-photo {
 }
 
 #profile-jot-wrapper {
-	background-color: rgba(254, 254, 254, 1);
-	border: 1px solid rgba(0, 0, 0, .2);
+	background-color: var(--bs-body-bg);
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 
 }
@@ -1053,12 +1017,6 @@ img.mail-conv-sender-photo {
 
 
 /* conversation */
-
-.top-radius {
-	border-top-right-radius: var(--bs-border-radius);
-	border-top-left-radius: var(--bs-border-radius);
-}
-
 .wall-event-item {
 	padding: 10px;
 	color: #fff;
@@ -1079,19 +1037,19 @@ img.mail-conv-sender-photo {
 }
 
 .wall-item-content-wrapper {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-top-right-radius: var(--bs-border-radius);
 	border-top-left-radius: var(--bs-border-radius);
 }
 
 .wall-item-content-wrapper.comment {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-top-right-radius: 0px;
 	border-top-left-radius: 0px;
 }
 
 .hide-comments-outer {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-top-color: #e0e0e0;
 	border-style: solid;
 	border-top-style: dashed;
@@ -1106,15 +1064,15 @@ img.mail-conv-sender-photo {
 
 .wall-item-comment-wrapper {
 	padding: 7px 10px;
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-radius: 0px;
 	border-bottom-right-radius: var(--bs-border-radius);
 	border-bottom-left-radius: var(--bs-border-radius);
-	border-top: 3px solid $comment_item_colour;
+	border-top: 3px solid var(--bs-body-bg);
 }
 
 .wall-item-comment-wrapper-wc {
-	border-top: 0px solid $comment_item_colour;
+	border-top: 0px solid var(--bs-body-bg);
 }
 
 
@@ -1123,7 +1081,6 @@ img.mail-conv-sender-photo {
 	height: $top_photo;
 	border: none;
 	border-radius: var(--bs-border-radius);
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 .comment .wall-item-photo {
@@ -1131,11 +1088,6 @@ img.mail-conv-sender-photo {
 	height: $reply_photo;
 }
 
-.wall-item-ago,
-.dropdown-sub-text {
-	color: #777;
-}
-
 .wall-item-content,
 .mail-conv-body,
 .page-body,
@@ -1144,9 +1096,8 @@ img.mail-conv-sender-photo {
 	font-size: 1rem;
 }
 
-
 .comment-edit-text {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1161,13 +1112,13 @@ img.mail-conv-sender-photo {
 }
 
 .directory-item .divgrow-showmore {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 }
 
 /* widgets */
 
 .widget {
-	background-color: rgba(254,254,254,.5);
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1186,7 +1137,7 @@ img.mail-conv-sender-photo {
 }
 
 #datebrowse-sidebar select {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1215,7 +1166,7 @@ img.mail-conv-sender-photo {
 .chat-item-title,
 .chat-item-title-self {
 	border-radius: var(--bs-border-radius);
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 #chatMembers img {
@@ -1223,17 +1174,17 @@ img.mail-conv-sender-photo {
 }
 
 .menu-img-3 {
-	width: 2.7rem;
-	height: 2.7rem;
-	margin-right: 5px;
+	width: 3rem;
+	height: 3rem;
+	margin-right: .5rem;
 	border-radius: var(--bs-border-radius);
 	float: left;
 }
 
 .menu-img-2 {
-	height: 1.8rem;
-	width: 1.8rem;
-	margin-right: 5px;
+	height: 2.3rem;
+	width: 2.3rem;
+	margin-right: .5rem;
 	border-radius: var(--bs-border-radius);
 	float: left;
 }
@@ -1271,17 +1222,17 @@ img.mail-conv-sender-photo {
 }
 
 .generic-content-wrapper {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	margin-bottom: 1.5rem;
 }
 
 .section-title-wrapper {
 	padding: 7px 10px;
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-top-left-radius: var(--bs-border-radius);
 	border-top-right-radius: var(--bs-border-radius);
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-title-wrapper h2,
@@ -1299,21 +1250,21 @@ img.mail-conv-sender-photo {
 
 .section-subtitle-wrapper {
 	padding: 4px 10px;
-	background-color: $item_colour;
-	border-bottom: 3px solid $comment_item_colour;
+	background-color: var(--bs-tertiary-bg);
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-content-tools-wrapper {
 	padding: 7px 10px;
-	background-color: $comment_item_colour;
-	border-bottom: 3px solid $comment_item_colour;
+	background-color: var(--bs-body-bg);
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-content-success-wrapper {
 	padding: 21px 10px;
 	color: #155724;
 	background-color: #d4edda;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1321,7 +1272,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #0c5460;
 	background-color: #d1ecf1;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1329,7 +1280,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #856404;
 	background-color: #fff3cd;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1337,7 +1288,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #721c24;
 	background-color: #f8d7da;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 .section-content-tools-wrapper .section-content-success-wrapper,
@@ -1356,14 +1307,14 @@ img.mail-conv-sender-photo {
 
 .section-content-wrapper {
 	padding: 7px 10px;
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-bottom-left-radius: var(--bs-border-radius);
 	border-bottom-right-radius: var(--bs-border-radius);
 	word-wrap: break-word;
 }
 
 .section-content-wrapper-np {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-bottom-left-radius: var(--bs-border-radius);
 	border-bottom-right-radius: var(--bs-border-radius);
 	word-wrap: break-word;
@@ -1408,7 +1359,7 @@ main.fullscreen .section-content-wrapper-np {
 .locs-index-row:hover td,
 [id^="cloud-index-"]:hover td,
 .cloud-index-active {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 [id^="webpage-list-item-"]:hover td,
@@ -1416,15 +1367,15 @@ main.fullscreen .section-content-wrapper-np {
 [id^="layout-list-item-"]:hover td,
 [id^="menu-list-item-"]:hover td,
 [id^="mitem-list-item-"]:hover td {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 #perms-tool-table .highlight:hover {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .notify-seen {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 /* bootstrap overrides */
@@ -1436,67 +1387,32 @@ main.fullscreen .section-content-wrapper-np {
 blockquote {
 	font-size: 1rem;
 	font-style: italic;
-	border-left: 3px solid #e0e0e0;
+	border-left: 3px solid var(--bs-border-color);
 	padding: 1em 0px 1em 1.5em;
 	margin: 0px;
 }
 
-.dropdown-menu {
-	color: $font_colour;
-}
-
-.dropdown-item {
-	color: $font_colour;
-}
-
-.dropdown-item:active,
-.dropdown-item:focus,
-.dropdown-item:hover,
-.textcomplete-item:focus .dropdown-item,
-.textcomplete-item:hover .dropdown-item,
-.textcomplete-item.active .dropdown-item,
-.textcomplete-item:active .dropdown-item {
-	color: $font_colour;
-	background-color: $item_colour;
-}
-
 .textcomplete-dropdown {
-	max-height: 300px;
-	max-width: 250px;
+	max-height: 20rem;
+	max-width: 17rem;
+	min-width: 15rem;
 	overflow: auto;
 }
 
-.dropdown-item.active {
+.dropdown-item.active,
+.textcomplete-item.active {
 	color: #fff;
-	background-color: #007bff;
-}
-
-.bg-dark {
-	background-color: $nav_bg !important;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .navbar {
 	z-index:1030;
 }
 
-.navbar-dark .navbar-nav .nav-link,
-.usermenu i {
-	color: $nav_icon_colour;
-}
 
-.navbar-dark .navbar-nav .nav-link:focus,
-.navbar-dark .navbar-nav .nav-link:hover,
-.usermenu:focus i,
-.usermenu:hover i {
-	color: $nav_active_icon_colour;
-}
 
 @media screen and (max-width: 992px) {
 
-	aside#region_1 {
-		border-right: 1px solid $nav_bd;
-	}
-
 	main {
 		left: -$left_aside_widthrem;
 		width: calc( 100% + $left_aside_widthrem );
@@ -1578,8 +1494,9 @@ dl.bb-dl > dd > li {
 	display: inline-block;
 	border-radius: var(--bs-border-radius);
 	cursor: text;
-	padding: 0px 10px;
-	width: 100%;
+	border-radius: 0px;
+	background-color: var(--bs-body-bg);
+
 }
 
 .bootstrap-tagsinput .label {
@@ -1588,6 +1505,13 @@ dl.bb-dl > dd > li {
 
 .bootstrap-tagsinput input {
 	height: 2.5rem;
+	margin: 0;
+	max-width: 30%;
+}
+
+.bootstrap-tagsinput {
+	width: 100%;
+	padding: 0 .5rem;
 }
 
 /* Abusing theme-green is less work than makeing a new new one */
@@ -1599,23 +1523,20 @@ dl.bb-dl > dd > li {
 
 /* Turn checkboxes into switches */
 .onoffswitch.checkbox > div {
-    position: relative; width: 60px;
-    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
-    display:inline-block;
+	position: relative; width: 60px;
+	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+	display:inline-block;
 }
 
 .onoffswitch.checkbox input {
-    display: none;
+	display: none;
 }
 
 .onoffswitch.checkbox > div label {
 	display: block; overflow: hidden; cursor: pointer;
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: 12px;
 	margin:0px;
-	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 	font-weight: normal;
 }
 
@@ -1628,47 +1549,45 @@ dl.bb-dl > dd > li {
 }
 
 .onoffswitch-inner {
-    display: block; width: 200%; margin-left: -100%;
-    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
+	display: block; width: 200%; margin-left: -100%;
+	transition: margin 0.19s ease-in-out;
 }
 
 .onoffswitch-inner:before, .onoffswitch-inner:after {
-    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
-    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+	display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
+	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
 .onoffswitch-inner:before {
-    content: attr(data-on);
-    padding-right: 21px;
-    background-color: $item_colour;
-	color: $font_colour;
-    text-align: right;
+	content: attr(data-on);
+	padding-right: 21px;
+	background-color: rgba(var(--bs-body-color-rgb), 0);
+	text-align: right;
 }
 
 .onoffswitch-inner:after {
-    content: attr(data-off);
-    padding-left: 21px;
-    background-color: $item_colour; color: #e0e0e0;
-    text-align: left;
+	content: attr(data-off);
+	padding-left: 21px;
+	background-color: rgba(var(--bs-body-color-rgb), 0);
+	color: var(--bs-border-color);
+	text-align: left;
 }
 
 .onoffswitch-switch {
-    display: block; width: 15px; margin:4px;
-    background: #e0e0e0;
-    border-radius: 10px;
-    position: absolute; top: 0; bottom: 0; right: 36px;
-    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
+	display: block; width: 15px; margin:4px;
+	background: var(--bs-secondary-bg);
+	border-radius: 10px;
+	position: absolute; top: 0; bottom: 0; right: 36px;
+	transition: right 0.2s ease-in-out;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner {
-    margin-left: 0px;
+	margin-left: 0px;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
-    right: 0px;
-    background-color: var(--bs-link-color);
+	right: 0px;
+	background-color: var(--bs-link-color);
 }
 
 
@@ -1747,7 +1666,7 @@ dl.bb-dl > dd > li {
 .cloud-icon-container {
 	width: 64px;
 	height: 64px;
-	border: 1px solid #eee;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1791,10 +1710,29 @@ dl.bb-dl > dd > li {
 	opacity: 1;
 }
 
-.bootstrap-tagsinput {
-	width: 100%;
-}
-
 .jg-entry img {
 	border-radius: var(--bs-border-radius);
 }
+
+.disable-transition {
+	transition: none !important;
+}
+
+.page-loader {
+	z-index: 10000;
+	width: 20vw;
+	height: 3px;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	animation: pageloader_move 2s ease-out infinite;
+}
+
+@keyframes pageloader_move {
+	0% {
+		transform: translateX(0px);
+	}
+	50% {
+		transform: translateX(80vw);
+	}
+}