Move sematic ui css into a file for better performance (#4520)

app/assets/stylesheets/application.bootstrap.scss

@@ -8,7 +8,7 @@
 @import 'shared_accesses';
 @import 'presentation';
 @import 'admin_panel';
-@import '//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/components/menu.min.css';
+@import 'pagination';
 
 html,
 body {
@@ -392,57 +392,6 @@ input[type='checkbox'] {
   border-color: var(--brand-color) !important;
 }
 
-
-//Semantic UI pagination
-.pagination-wrapper {
-  border-bottom: 2px solid whitesmoke;
-  border-right: 2px solid whitesmoke;
-  border-left: 2px solid whitesmoke;
-}
-
-.semantic-ui-pagination {
-  .ui.menu {
-    position: relative;
-    padding: 8px 12px 8px 16px;
-  }
-
-  .ui.menu .item {
-    justify-content: center;
-  }
-
-  .ui.secondary.menu .active.item {
-    color: var(--brand-color);
-    border-radius: $border-radius;
-  }
-
-  .ui.secondary.menu .item {
-    border-radius: $border-radius;
-
-    &:hover {
-      color: var(--brand-color) !important;
-    }
-  }
-
-  .ui.menu > .item:first-child {
-    display: block;
-    margin-right: auto;
-    padding: 0 !important;
-  }
-
-  .ui.menu > .item:last-child {
-    display: block;
-    margin-left: auto;
-    margin-right: 0 !important;
-    padding: 0 !important;
-  }
-
-  .ui.pagination {
-    width: 100%;
-    border: none;
-    box-shadow: none;
-  }
-}
-
 //Logo
 .small-logo {
   max-width: 200px;