Move helpers to be prefixed with `gt-` (#22879)

As discussed in #22847 the helpers in helpers.less need to have a
separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the `.gt-hidden { display:none !important; }`
style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict
with at least one chroma style which this PR now avoids.

I've also added in the `gt-hidden` style that matches the tailwind one
and switched the code that needed it to use that.

Signed-off-by: Andrew Thornton <art27@cantab.net>

---------

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

16 files changed, 207 insertions, 206 deletions

diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index f95f28528d..32919156b8 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -1,19 +1,19 @@
 <template>
-  <ol class="diff-detail-box diff-stats m-0" ref="root" v-if="fileListIsVisible">
+  <ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="fileListIsVisible">
     <li v-for="file in files" :key="file.NameHash">
-      <div class="bold df ac pull-right">
-        <span v-if="file.IsBin" class="ml-1 mr-3">{{ binaryFileMessage }}</span>
+      <div class="gt-bold gt-df gt-ac pull-right">
+        <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
         {{ file.IsBin ? '' : file.Addition + file.Deletion }}
-        <span v-if="!file.IsBin" class="diff-stats-bar tooltip mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
+        <span v-if="!file.IsBin" class="diff-stats-bar tooltip gt-mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
           <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }" />
         </span>
       </div>
       <!-- todo finish all file status, now modify, add, delete and rename -->
       <span :class="['status', diffTypeToString(file.Type), 'tooltip']" :data-content="diffTypeToString(file.Type)" data-position="right center">&nbsp;</span>
-      <a class="file mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
+      <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
     </li>
-    <li v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
-      <span class="file df ac sb">{{ tooManyFilesMessage }}
+    <li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
+      <span class="file gt-df gt-ac gt-sb">{{ tooManyFilesMessage }}
         <a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
       </span>
     </li>
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 6d77b20241..3742f3a53f 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="fileTreeIsVisible"
-    class="mr-3 mt-3 diff-detail-box"
+    class="gt-mr-3 gt-mt-3 diff-detail-box"
   >
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <div class="ui list">
       <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
     </div>
-    <div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
-      <span class="mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
+    <div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
+      <span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
     </div>
   </div>
 </template>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 40d56b2262..245286dded 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-show="show">
-    <div class="item" :class="item.isFile ? 'filewrapper p-1' : ''">
+    <div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
       <!-- Files -->
       <SvgIcon
         v-if="item.isFile"
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file ellipsis muted"
+        class="file gt-ellipsis muted"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -21,7 +21,7 @@
       />
 
       <!-- Directories -->
-      <div v-if="!item.isFile" class="directory p-1" @click.stop="handleClick(item.isFile)">
+      <div v-if="!item.isFile" class="directory gt-p-1" @click.stop="handleClick(item.isFile)">
         <SvgIcon
           class="svg-icon"
           :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
@@ -30,7 +30,7 @@
           class="svg-icon directory"
           name="octicon-file-directory-fill"
         />
-        <span class="ellipsis">{{ item.name }}</span>
+        <span class="gt-ellipsis">{{ item.name }}</span>
       </div>
       <div v-show="!collapsed">
         <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 1e0ebc5a47..2e10ce2531 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -47,14 +47,14 @@
           {{ mergeForm.textCancel }}
         </button>
 
-        <div class="ui checkbox ml-2" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed">
+        <div class="ui checkbox gt-ml-2" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed">
           <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
           <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
         </div>
       </form>
     </div>
 
-    <div v-if="!showActionForm" class="df">
+    <div v-if="!showActionForm" class="gt-df">
       <!-- the merge button -->
       <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)" >
         <button class="ui button">
@@ -95,7 +95,7 @@
       </div>
 
       <!-- the cancel auto merge button -->
-      <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="ml-4">
+      <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="gt-ml-4">
         <input type="hidden" name="_csrf" :value="csrfToken">
         <button class="ui button">
           {{ mergeForm.textAutoMergeCancelSchedule }}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 58019e9df1..deb071da5a 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -42,15 +42,15 @@
         <div class="job-step-container">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
             <div class="job-step-summary" @click.stop="toggleStepLogs(i)">
-              <SvgIcon name="octicon-chevron-down" class="mr-3" v-show="currentJobStepsStates[i].expanded"/>
-              <SvgIcon name="octicon-chevron-right" class="mr-3" v-show="!currentJobStepsStates[i].expanded"/>
-
-              <SvgIcon name="octicon-check-circle-fill" class="green mr-3" v-if="jobStep.status === 'success'"/>
-              <SvgIcon name="octicon-skip" class="ui text grey mr-3" v-else-if="jobStep.status === 'skipped'"/>
-              <SvgIcon name="octicon-clock" class="ui text yellow mr-3" v-else-if="jobStep.status === 'waiting'"/>
-              <SvgIcon name="octicon-blocked" class="ui text yellow mr-3" v-else-if="jobStep.status === 'blocked'"/>
-              <SvgIcon name="octicon-meter" class="ui text yellow mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
-              <SvgIcon name="octicon-x-circle-fill" class="red mr-3 " v-else/>
+              <SvgIcon name="octicon-chevron-down" class="gt-mr-3" v-show="currentJobStepsStates[i].expanded"/>
+              <SvgIcon name="octicon-chevron-right" class="gt-mr-3" v-show="!currentJobStepsStates[i].expanded"/>
+
+              <SvgIcon name="octicon-check-circle-fill" class="green gt-mr-3" v-if="jobStep.status === 'success'"/>
+              <SvgIcon name="octicon-skip" class="ui text grey gt-mr-3" v-else-if="jobStep.status === 'skipped'"/>
+              <SvgIcon name="octicon-clock" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'waiting'"/>
+              <SvgIcon name="octicon-blocked" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'blocked'"/>
+              <SvgIcon name="octicon-meter" class="ui text yellow gt-mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
+              <SvgIcon name="octicon-x-circle-fill" class="red gt-mr-3 " v-else/>
 
               <span class="step-summary-msg">{{ jobStep.summary }}</span>
               <span class="step-summary-dur">{{ jobStep.duration }}</span>
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index f2edf31249..c0acf091c7 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -172,7 +172,7 @@ export function initGlobalDropzone() {
           // Create a "Copy Link" element, to conveniently copy the image
           // or file link as Markdown to the clipboard
           const copyLinkElement = document.createElement('div');
-          copyLinkElement.className = 'tc';
+          copyLinkElement.className = 'gt-tc';
           // The a element has a hardcoded cursor: pointer because the default is overridden by .dropzone
           copyLinkElement.innerHTML = `<a href="#" style="cursor: pointer;">${svg('octicon-copy', 14, 'copy link')} Copy link</a>`;
           copyLinkElement.addEventListener('click', (e) => {
diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 405b92d7e1..6c056c6d14 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -29,7 +29,7 @@ async function receiveUpdateCount(event) {
     const data = JSON.parse(event.data);
 
     for (const count of document.querySelectorAll('.notification_count')) {
-      count.classList.toggle('hidden', data.Count === 0);
+      count.classList.toggle('gt-hidden', data.Count === 0);
       count.textContent = `${data.Count}`;
     }
     await updateNotificationTable();
@@ -165,9 +165,9 @@ async function updateNotificationCount() {
 
   const notificationCount = $('.notification_count');
   if (data.new === 0) {
-    notificationCount.addClass('hidden');
+    notificationCount.addClass('gt-hidden');
   } else {
-    notificationCount.removeClass('hidden');
+    notificationCount.removeClass('gt-hidden');
   }
 
   notificationCount.text(`${data.new}`);
diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
index ee0da03005..a218c5b307 100644
--- a/web_src/js/features/repo-common.js
+++ b/web_src/js/features/repo-common.js
@@ -54,8 +54,8 @@ export function initRepoCloneLink() {
 
   // restore animation after first init
   setTimeout(() => {
-    $repoCloneSsh.removeClass('no-transition');
-    $repoCloneHttps.removeClass('no-transition');
+    $repoCloneSsh.removeClass('gt-no-transition');
+    $repoCloneHttps.removeClass('gt-no-transition');
   }, 100);
 
   $repoCloneSsh.on('click', () => {
diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js
index f279dfeeb7..0eae4a75db 100644
--- a/web_src/js/features/repo-findfile.js
+++ b/web_src/js/features/repo-findfile.js
@@ -88,7 +88,7 @@ function filterRepoFiles(filter) {
     const $row = $(tmplRow);
     const $a = $row.find('a');
     $a.attr('href', `${treeLink}/${escapePath(r.matchResult.join(''))}`);
-    const $octiconFile = $(svg('octicon-file')).addClass('mr-3');
+    const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3');
     $a.append($octiconFile);
     // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
     // the matchResult[odd] is matched and highlighted to red.
diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index 37801d2ad4..a96da53f24 100644
--- a/web_src/js/features/repo-issue-content.js
+++ b/web_src/js/features/repo-issue-content.js
@@ -14,16 +14,16 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
   $dialog = $(`
 <div class="ui modal content-history-detail-dialog">
   ${svg('octicon-x', 16, 'close icon inside')}
-  <div class="header df ac sb">
+  <div class="header gt-df gt-ac gt-sb">
     <div>${itemTitleHtml}</div>
-    <div class="ui dropdown dialog-header-options df ac mr-5 hide">
+    <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide">
       ${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
       <div class="menu">
         <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
       </div>
     </div>
   </div>
-  <div class="comment-diff-data tl p-3 is-loading"></div>
+  <div class="comment-diff-data gt-tl gt-p-3 is-loading"></div>
 </div>`);
   $dialog.appendTo($('body'));
   $dialog.find('.dialog-header-options').dropdown({
@@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
   const $headerLeft = $item.find('.comment-header-left');
   const menuHtml = `
   <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
-    &bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon ml-1 mt-1')}</a>
+    &bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
     <div class="menu">
     </div>
   </div>`;
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 37366578e2..07c67ba5da 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -219,11 +219,11 @@ export function initRepoCommentForm() {
 
       let icon = '';
       if (input_id === '#milestone_id') {
-        icon = svg('octicon-milestone', 18, 'mr-3');
+        icon = svg('octicon-milestone', 18, 'gt-mr-3');
       } else if (input_id === '#project_id') {
-        icon = svg('octicon-project', 18, 'mr-3');
+        icon = svg('octicon-project', 18, 'gt-mr-3');
       } else if (input_id === '#assignee_id') {
-        icon = `<img class="ui avatar image mr-3" src=${$(this).data('avatar')}>`;
+        icon = `<img class="ui avatar image gt-mr-3" src=${$(this).data('avatar')}>`;
       }
 
       $list.find('.selected').html(`
diff --git a/web_src/js/features/stopwatch.js b/web_src/js/features/stopwatch.js
index 33915a1d83..f43014fec5 100644
--- a/web_src/js/features/stopwatch.js
+++ b/web_src/js/features/stopwatch.js
@@ -125,7 +125,7 @@ function updateStopwatchData(data) {
   const btnEl = $('.active-stopwatch-trigger');
   if (!watch) {
     clearStopwatchTimer();
-    btnEl.addClass('hidden');
+    btnEl.addClass('gt-hidden');
   } else {
     const {repo_owner_name, repo_name, issue_index, seconds} = watch;
     const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`;
@@ -134,7 +134,7 @@ function updateStopwatchData(data) {
     $('.stopwatch-cancel').attr('action', `${issueUrl}/times/stopwatch/cancel`);
     $('.stopwatch-issue').text(`${repo_owner_name}/${repo_name}#${issue_index}`);
     updateStopwatchTime(seconds);
-    btnEl.removeClass('hidden');
+    btnEl.removeClass('gt-hidden');
   }
   return Boolean(data.length);
 }
diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js
index cfd058c93c..dcc656ea82 100644
--- a/web_src/js/markup/math.js
+++ b/web_src/js/markup/math.js
@@ -2,7 +2,7 @@ function displayError(el, err) {
   const target = targetElement(el);
   target.classList.remove('is-loading');
   const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
+  errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
   errorNode.textContent = err.str || err.message || String(err);
   target.before(errorNode);
 }
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
index 29fa92552d..60f53d2b34 100644
--- a/web_src/js/markup/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@@ -12,7 +12,7 @@ const iframeCss = `
 function displayError(el, err) {
   el.closest('pre').classList.remove('is-loading');
   const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
+  errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
   errorNode.textContent = err.str || err.message || String(err);
   el.closest('pre').before(errorNode);
 }
diff --git a/web_src/less/_runner.less b/web_src/less/_runner.less
index 74d917fc87..cebe345b0c 100644
--- a/web_src/less/_runner.less
+++ b/web_src/less/_runner.less
@@ -8,7 +8,7 @@
   .runner-ops-delete {
     color: var(--color-red-light);
   }
-  .runner-basic-info .dib {
+  .runner-basic-info .gt-dib {
     margin-right: 1em;
   }
   .runner-status-online {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 20670a3786..74c34007e9 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -1,182 +1,183 @@
-.df { display: flex !important; }
-.di { display: inline !important; }
-.dif { display: inline-flex !important; }
-.dib { display: inline-block !important; }
-.pr { position: relative !important; }
-.ac { align-items: center !important; }
-.tc { text-align: center !important; }
-.tl { text-align: left !important; }
-.tdn { text-decoration: none !important; }
-.jc { justify-content: center !important; }
-.js { justify-content: flex-start !important; }
-.je { justify-content: flex-end !important; }
-.sb { justify-content: space-between !important; }
-.fc { flex-direction: column !important; }
-.f1 { flex: 1 !important; }
-.fw { flex-wrap: wrap !important; }
-.vm { vertical-align: middle !important; }
-.w-100 { width: 100% !important; }
-.h-100 { height: 100% !important; }
-.br-0 { border-radius: 0 !important; }
+.gt-df { display: flex !important; }
+.gt-di { display: inline !important; }
+.gt-dif { display: inline-flex !important; }
+.gt-dib { display: inline-block !important; }
+.gt-pr { position: relative !important; }
+.gt-ac { align-items: center !important; }
+.gt-tc { text-align: center !important; }
+.gt-tl { text-align: left !important; }
+.gt-tdn { text-decoration: none !important; }
+.gt-jc { justify-content: center !important; }
+.gt-js { justify-content: flex-start !important; }
+.gt-je { justify-content: flex-end !important; }
+.gt-sb { justify-content: space-between !important; }
+.gt-fc { flex-direction: column !important; }
+.gt-f1 { flex: 1 !important; }
+.gt-fw { flex-wrap: wrap !important; }
+.gt-vm { vertical-align: middle !important; }
+.gt-w-100 { width: 100% !important; }
+.gt-h-100 { height: 100% !important; }
+.gt-br-0 { border-radius: 0 !important; }
 
 /* below class names match Tailwind CSS */
-.pointer-events-none { pointer-events: none !important; }
-.relative { position: relative !important; }
+.gt-pointer-events-none { pointer-events: none !important; }
+.gt-relative { position: relative !important; }
+.gt-hidden { display: none !important; }
 
-.mono {
+.gt-mono {
   font-family: var(--fonts-monospace) !important;
   font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */
 }
 
-.bold { font-weight: 600 !important; }
+.gt-bold { font-weight: 600 !important; }
 
-.word-break {
+.gt-word-break {
   word-wrap: break-word !important;
   word-break: break-word; /* compat: Safari */
   overflow-wrap: anywhere;
 }
 
-.ellipsis {
+.gt-ellipsis {
   overflow: hidden !important;
   white-space: nowrap !important;
   text-overflow: ellipsis !important;
 }
 
-.full-screen-width { width: 100vw !important; }
-.full-screen-height { height: 100vh !important; }
-
-.rounded { border-radius: var(--border-radius) !important; }
-.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
-.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
-.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
-.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
-
-.border-secondary { border: 1px solid var(--color-secondary) !important; }
-.border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
-.border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
-.border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
-.border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
-
-.no-transition { transition: none !important; }
-
-.bg-red { background: var(--color-red) !important; }
-.bg-orange { background: var(--color-orange) !important; }
-.bg-yellow { background: var(--color-yellow) !important; }
-.bg-olive { background: var(--color-olive) !important; }
-.bg-green { background: var(--color-green) !important; }
-.bg-teal { background: var(--color-teal) !important; }
-.bg-blue { background: var(--color-blue) !important; }
-.bg-violet { background: var(--color-violet) !important; }
-.bg-purple { background: var(--color-purple) !important; }
-.bg-pink { background: var(--color-pink) !important; }
-.bg-brown { background: var(--color-brown) !important; }
-.bg-grey { background: var(--color-grey) !important; }
-.bg-gold { background: var(--color-gold) !important; }
-
-.text-white { color: var(--color-white) !important; }
-
-.m-0 { margin: 0 !important; }
-.m-1 { margin: .125rem !important; }
-.m-2 { margin: .25rem !important; }
-.m-3 { margin: .5rem !important; }
-.m-4 { margin: 1rem !important; }
-.m-5 { margin: 2rem !important; }
-
-.ml-0 { margin-left: 0 !important; }
-.ml-1 { margin-left: .125rem !important; }
-.ml-2 { margin-left: .25rem !important; }
-.ml-3 { margin-left: .5rem !important; }
-.ml-4 { margin-left: 1rem !important; }
-.ml-5 { margin-left: 2rem !important; }
-
-.mr-0 { margin-right: 0 !important; }
-.mr-1 { margin-right: .125rem !important; }
-.mr-2 { margin-right: .25rem !important; }
-.mr-3 { margin-right: .5rem !important; }
-.mr-4 { margin-right: 1rem !important; }
-.mr-5 { margin-right: 2rem !important; }
-
-.mt-0 { margin-top: 0 !important; }
-.mt-1 { margin-top: .125rem !important; }
-.mt-2 { margin-top: .25rem !important; }
-.mt-3 { margin-top: .5rem !important; }
-.mt-4 { margin-top: 1rem !important; }
-.mt-5 { margin-top: 2rem !important; }
-
-.mb-0 { margin-bottom: 0 !important; }
-.mb-1 { margin-bottom: .125rem !important; }
-.mb-2 { margin-bottom: .25rem !important; }
-.mb-3 { margin-bottom: .5rem !important; }
-.mb-4 { margin-bottom: 1rem !important; }
-.mb-5 { margin-bottom: 2rem !important; }
-
-.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
-.mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
-.mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
-.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
-.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
-.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
-
-.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
-.my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
-.my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
-.my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
-.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
-.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
-
-.p-0 { padding: 0 !important; }
-.p-1 { padding: .125rem !important; }
-.p-2 { padding: .25rem !important; }
-.p-3 { padding: .5rem !important; }
-.p-4 { padding: 1rem !important; }
-.p-5 { padding: 2rem !important; }
-
-.pl-0 { padding-left: 0 !important; }
-.pl-1 { padding-left: .125rem !important; }
-.pl-2 { padding-left: .25rem !important; }
-.pl-3 { padding-left: .5rem !important; }
-.pl-4 { padding-left: 1rem !important; }
-.pl-5 { padding-left: 2rem !important; }
-
-.pr-0 { padding-right: 0 !important; }
-.pr-1 { padding-right: .125rem !important; }
-.pr-2 { padding-right: .25rem !important; }
-.pr-3 { padding-right: .5rem !important; }
-.pr-4 { padding-right: 1rem !important; }
-.pr-5 { padding-right: 2rem !important; }
-
-.pt-0 { padding-top: 0 !important; }
-.pt-1 { padding-top: .125rem !important; }
-.pt-2 { padding-top: .25rem !important; }
-.pt-3 { padding-top: .5rem !important; }
-.pt-4 { padding-top: 1rem !important; }
-.pt-5 { padding-top: 2rem !important; }
-
-.pb-0 { padding-bottom: 0 !important; }
-.pb-1 { padding-bottom: .125rem !important; }
-.pb-2 { padding-bottom: .25rem !important; }
-.pb-3 { padding-bottom: .5rem !important; }
-.pb-4 { padding-bottom: 1rem !important; }
-.pb-5 { padding-bottom: 2rem !important; }
-
-.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
-.px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
-.px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
-.px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
-.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
-.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
-
-.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
-.py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
-.py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
-.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
-.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
-.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
-
-.content-center { align-content: center !important; }
+.gt-full-screen-width { width: 100vw !important; }
+.gt-full-screen-height { height: 100vh !important; }
+
+.gt-rounded { border-radius: var(--border-radius) !important; }
+.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
+.gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
+.gt-rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
+.gt-rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
+
+.gt-border-secondary { border: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
+.gt-border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
+
+.gt-no-transition { transition: none !important; }
+
+.gt-bg-red { background: var(--color-red) !important; }
+.gt-bg-orange { background: var(--color-orange) !important; }
+.gt-bg-yellow { background: var(--color-yellow) !important; }
+.gt-bg-olive { background: var(--color-olive) !important; }
+.gt-bg-green { background: var(--color-green) !important; }
+.gt-bg-teal { background: var(--color-teal) !important; }
+.gt-bg-blue { background: var(--color-blue) !important; }
+.gt-bg-violet { background: var(--color-violet) !important; }
+.gt-bg-purple { background: var(--color-purple) !important; }
+.gt-bg-pink { background: var(--color-pink) !important; }
+.gt-bg-brown { background: var(--color-brown) !important; }
+.gt-bg-grey { background: var(--color-grey) !important; }
+.gt-bg-gold { background: var(--color-gold) !important; }
+
+.gt-text-white { color: var(--color-white) !important; }
+
+.gt-m-0 { margin: 0 !important; }
+.gt-m-1 { margin: .125rem !important; }
+.gt-m-2 { margin: .25rem !important; }
+.gt-m-3 { margin: .5rem !important; }
+.gt-m-4 { margin: 1rem !important; }
+.gt-m-5 { margin: 2rem !important; }
+
+.gt-ml-0 { margin-left: 0 !important; }
+.gt-ml-1 { margin-left: .125rem !important; }
+.gt-ml-2 { margin-left: .25rem !important; }
+.gt-ml-3 { margin-left: .5rem !important; }
+.gt-ml-4 { margin-left: 1rem !important; }
+.gt-ml-5 { margin-left: 2rem !important; }
+
+.gt-mr-0 { margin-right: 0 !important; }
+.gt-mr-1 { margin-right: .125rem !important; }
+.gt-mr-2 { margin-right: .25rem !important; }
+.gt-mr-3 { margin-right: .5rem !important; }
+.gt-mr-4 { margin-right: 1rem !important; }
+.gt-mr-5 { margin-right: 2rem !important; }
+
+.gt-mt-0 { margin-top: 0 !important; }
+.gt-mt-1 { margin-top: .125rem !important; }
+.gt-mt-2 { margin-top: .25rem !important; }
+.gt-mt-3 { margin-top: .5rem !important; }
+.gt-mt-4 { margin-top: 1rem !important; }
+.gt-mt-5 { margin-top: 2rem !important; }
+
+.gt-mb-0 { margin-bottom: 0 !important; }
+.gt-mb-1 { margin-bottom: .125rem !important; }
+.gt-mb-2 { margin-bottom: .25rem !important; }
+.gt-mb-3 { margin-bottom: .5rem !important; }
+.gt-mb-4 { margin-bottom: 1rem !important; }
+.gt-mb-5 { margin-bottom: 2rem !important; }
+
+.gt-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
+.gt-mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
+.gt-mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
+.gt-mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
+.gt-mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
+.gt-mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
+
+.gt-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.gt-my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
+.gt-my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
+.gt-my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
+.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
+.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
+
+.gt-p-0 { padding: 0 !important; }
+.gt-p-1 { padding: .125rem !important; }
+.gt-p-2 { padding: .25rem !important; }
+.gt-p-3 { padding: .5rem !important; }
+.gt-p-4 { padding: 1rem !important; }
+.gt-p-5 { padding: 2rem !important; }
+
+.gt-pl-0 { padding-left: 0 !important; }
+.gt-pl-1 { padding-left: .125rem !important; }
+.gt-pl-2 { padding-left: .25rem !important; }
+.gt-pl-3 { padding-left: .5rem !important; }
+.gt-pl-4 { padding-left: 1rem !important; }
+.gt-pl-5 { padding-left: 2rem !important; }
+
+.gt-pr-0 { padding-right: 0 !important; }
+.gt-pr-1 { padding-right: .125rem !important; }
+.gt-pr-2 { padding-right: .25rem !important; }
+.gt-pr-3 { padding-right: .5rem !important; }
+.gt-pr-4 { padding-right: 1rem !important; }
+.gt-pr-5 { padding-right: 2rem !important; }
+
+.gt-pt-0 { padding-top: 0 !important; }
+.gt-pt-1 { padding-top: .125rem !important; }
+.gt-pt-2 { padding-top: .25rem !important; }
+.gt-pt-3 { padding-top: .5rem !important; }
+.gt-pt-4 { padding-top: 1rem !important; }
+.gt-pt-5 { padding-top: 2rem !important; }
+
+.gt-pb-0 { padding-bottom: 0 !important; }
+.gt-pb-1 { padding-bottom: .125rem !important; }
+.gt-pb-2 { padding-bottom: .25rem !important; }
+.gt-pb-3 { padding-bottom: .5rem !important; }
+.gt-pb-4 { padding-bottom: 1rem !important; }
+.gt-pb-5 { padding-bottom: 2rem !important; }
+
+.gt-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
+.gt-px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
+.gt-px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
+.gt-px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
+.gt-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
+.gt-px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
+
+.gt-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+.gt-py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
+.gt-py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
+.gt-py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
+.gt-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.gt-py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
+
+.gt-content-center { align-content: center !important; }
 
 @media @mediaSm {
-  .db-small { display: block !important; }
-  .w-100-small { width: 100% !important; }
-  .js-small { justify-content: flex-start !important; }
+  .gt-db-small { display: block !important; }
+  .gt-w-100-small { width: 100% !important; }
+  .gt-js-small { justify-content: flex-start !important; }
 }