@posiwise/core-styles 1.0.0 → 1.0.2

package/scss/_dynamic-styles.scss

@@ -3,12 +3,68 @@
 :root {
     --titles: rgb(34 34 34);
     --tabs_bg: rgb(23, 105, 225);
+    --tabs_sub_bg: rgb(70, 136, 236);
     --tabs_text: rgb(255, 255, 255);
     --sidebar_bg: rgb(0, 48, 63);
     --sidebar_text: rgb(255, 255, 255);
     --first: rgb(23 105 225);
     --second: rgb(54 194 131);
     --text: rgb(34 34 34);
+
+    // PrimeNG Calendar icon CSS variables override
+    --p-datepicker-dropdown-color: var(--first);
+    --p-datepicker-trigger-color: var(--first);
+    --p-button-text-color: var(--first);
+
+    // PrimeNG Select option selected CSS variables override
+    --p-select-option-selected-background: var(--first);
+    --p-select-option-selected-color: #ffffff;
+
+    // PrimeNG Autocomplete option selected CSS variables override
+    --p-autocomplete-option-selected-background: var(--first);
+    --p-autocomplete-option-selected-color: #ffffff;
+
+    // PrimeNG Chip background CSS variables override
+    --p-chip-background: var(--first);
+    --p-chip-color: #ffffff;
+
+    // PrimeNG Autocomplete dropdown button CSS variables override
+    --p-autocomplete-dropdown-background: var(--first);
+    --p-autocomplete-dropdown-color: #ffffff;
+    --p-autocomplete-dropdown-border-color: var(--first);
+
+    // PrimeNG Autocomplete input border CSS variables override
+    --p-autocomplete-focus-border-color: var(--first);
+    --p-autocomplete-hover-border-color: var(--first);
+
+    // PrimeNG Checkbox checked CSS variables override
+    --p-checkbox-checked-background: var(--first);
+    --p-checkbox-checked-border-color: var(--first);
+
+    // PrimeNG Multiselect option selected CSS variables override
+    --p-multiselect-option-selected-background: var(--first);
+    --p-multiselect-option-selected-color: #ffffff;
+    --p-multiselect-option-selected-focus-background: var(--first);
+    --p-multiselect-option-selected-focus-color: #ffffff;
+
+    // PrimeNG Paginator selected page CSS variables override
+    --p-paginator-nav-button-selected-background: var(--tabs_bg);
+    --p-paginator-nav-button-selected-color: var(--tabs_text);
+    --p-paginator-nav-button-selected-border-color: var(--tabs_bg);
+
+    // PrimeNG Accordion toggle icon CSS variables override
+    --p-accordion-header-toggle-icon-color: rgb(111 111 111);
+    --p-accordion-header-toggle-icon-active-color: rgb(255 255 255);
+}
+
+.plot-container,
+.svg-container,
+.main-svg,
+.xy {
+    width: 100% !important;
+    height: 450px !important;
+    min-height: 450px !important;
+    max-height: 450px !important;
 }
 
 :root {
@@ -64,8 +120,12 @@
                     }
 
                     .p-menuitem-link.p-menuitem-link-active {
-                        background-color: var(--tabs_bg);
+                        background-color: var(--tabs_bg) !important;
                         color: var(--tabs_text);
+                        &:hover {
+                            background-color: var(--tabs_bg) !important;
+                            color: var(--tabs_text) !important;
+                        }
                     }
 
                     .p-menuitem-link {
@@ -84,10 +144,30 @@
                         }
                     }
                 }
+
+                .p-tabmenuitem-active {
+                    background-color: var(--tabs_bg) !important;
+                    color: var(--tabs_text) !important;
+
+                    a,
+                    .p-menuitem-link {
+                        background-color: var(--tabs_bg) !important;
+                        color: var(--tabs_text) !important;
+                    }
+                }
             }
         }
     }
 
+    .custom-tooltip .tooltip-inner {
+        /* Provides space at the bottom */
+        max-width: 500px !important; /* Width for readability */
+        max-height: 900px !important; /* Limits height for long content */
+        overflow-y: auto !important;
+        padding: 10px !important;
+        text-align: left !important;
+    }
+
     h1,
     h2,
     h3,
@@ -119,6 +199,10 @@
         }
     }
 
+    .btn-filter-primary {
+        color: var(--first) !important;
+    }
+
     .btn-primary {
         background-color: var(--first) !important;
         border-color: var(--first) !important;
@@ -134,19 +218,43 @@
         color: var(--tabs_text) !important;
     }
 
+    .analytics {
+        padding-bottom: 30px;
+
+        .primeng-datatable-container table thead tr th {
+            background-color: var(--tabs_bg) !important;
+            position: relative;
+            padding: 3px 10px;
+        }
+        .primeng-datatable-container table thead tr th::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-color: rgba(255, 255, 255, 0.2);
+            pointer-events: none;
+        }
+    }
+
     .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
         background-color: var(--tabs_bg) !important;
         border-color: var(--tabs_bg) !important;
         color: var(--tabs_text) !important;
     }
 
+    .p-paginator-page.p-paginator-page-selected,
+    .p-paginator-page.p-highlight {
+        background-color: var(--tabs_bg) !important;
+        border-color: var(--tabs_bg) !important;
+        color: var(--tabs_text) !important;
+    }
+
     pw-posts-list {
         ul.tags li {
             color: var(--titles);
         }
     }
 
-    // signin buttons
+    // sign in buttons
     .sign-btn {
         background-color: var(--first);
         color: #fff;
@@ -224,6 +332,19 @@
         color: #fff !important;
     }
 
+    .hopscotch-bubble-container {
+        width: 400px !important; /* Adjust the width as needed */
+        max-width: 100%; /* Ensure it does not exceed the viewport */
+    }
+
+    .hopscotch-bubble .hopscotch-bubble-content {
+        padding: 10px; /* Optional: Adjust padding for better spacing */
+    }
+    .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+        color: #ffffff;
+        background: var(--first) !important;
+    }
+
     .p-autocomplete {
         .p-button,
         .p-button:enabled:active,
@@ -233,7 +354,33 @@
         }
         .p-autocomplete-multiple-container {
             .p-autocomplete-token {
-                background: var(--first);
+                background: var(--first) !important;
+                color: #ffffff !important;
+            }
+        }
+        .p-autocomplete-dropdown {
+            background-color: var(--first) !important;
+            border-color: var(--first) !important;
+            color: #ffffff !important;
+
+            svg,
+            .p-icon,
+            i {
+                color: #ffffff !important;
+                fill: #ffffff !important;
+            }
+        }
+
+        .p-autocomplete-input-multiple,
+        .p-inputtext {
+            &:hover {
+                border-color: var(--first) !important;
+            }
+
+            &:focus,
+            &.p-focus {
+                border-color: var(--first) !important;
+                box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
             }
         }
     }
@@ -407,10 +554,21 @@
             }
         }
     }
+    .p-multiselect-header .p-checkbox .p-checkbox-box.p-highlight {
+        background: var(--first) !important;
+        border-color: var(--first);
+    }
+
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+        box-shadow: 0 0 0 0.2rem var(--first) (255, 0, 0, 0.5); // Adjusted to red
+        border-color: var(--first); // Red border
+    }
+
     .p-multiselect-item {
         .p-checkbox {
             .p-checkbox-box.p-highlight {
                 background: var(--first);
+                border-color: var(--first);
             }
         }
     }
@@ -422,11 +580,19 @@
         }
     }
 
-    //   spinner color
+    //   spinner color - PrimeNG 19 updated selectors
+    p-progressspinner .p-progressspinner-circle,
+    p-progressSpinner .p-progress-spinner-circle,
+    .p-progressspinner .p-progressspinner-circle {
+        animation:
+            custom-progress-spinner-dash 1.5s ease-in-out infinite,
+            custom-progress-spinner-color 6s ease-in-out infinite;
+    }
 
-    p-progressSpinner .p-progress-spinner-circle {
-       animation: custom-progress-spinner-dash 1.5s ease-in-out infinite,
-           custom-progress-spinner-color 6s ease-in-out infinite;
+    // Ensure spinner SVG uses custom colors
+    p-progressspinner svg circle,
+    p-progressSpinner svg circle {
+        stroke: var(--first) !important;
     }
 
     @keyframes custom-progress-spinner-color {
@@ -531,4 +697,704 @@
     .toast-container {
         position: fixed !important;
     }
+    i.fa-info-circle {
+        font-size: 16px;
+    }
+
+    p-radiobutton .p-highlight .p-radiobutton-icon {
+        background-color: var(--first) !important;
+    }
+
+    .badge.bg-light {
+        &:not(.text-dark) {
+            @extend .text-dark;
+        }
+    }
+    .badge.bg-white {
+        &:not(.text-dark) {
+            @extend .text-dark;
+        }
+    }
+    .btn.btn-primary {
+        &:not(.text-light) {
+            @extend .text-light;
+        }
+    }
+    .btn.btn-primary {
+        &:not(.text-light) {
+            @extend .text-light;
+        }
+    }
+    .btn.btn-secondary {
+        &:not(.text-light) {
+            @extend .text-light;
+        }
+    }
+    .btn.btn-secondary {
+        &:not(.text-light) {
+            @extend .text-light;
+        }
+    }
+    .btn.btn-primary:hover {
+        background-color: transparent !important;
+        color: var(--first) !important;
+    }
+    .btn.btn-secondary:hover {
+        background-color: transparent !important;
+        color: var(--first) !important;
+    }
+
+    // PrimeNG Datepicker - Selected date color (blue instead of green)
+    .p-datepicker {
+        table {
+            td {
+                span.p-highlight,
+                span.p-datepicker-day-selected,
+                &.p-highlight > span {
+                    background-color: var(--first) !important;
+                    color: #ffffff !important;
+                }
+
+                &.p-datepicker-today {
+                    > span.p-highlight {
+                        background-color: var(--first) !important;
+                        color: #ffffff !important;
+                    }
+                }
+
+                &.p-datepicker-current-day {
+                    > span {
+                        background-color: var(--first) !important;
+                        color: #ffffff !important;
+                    }
+                }
+            }
+        }
+    }
+
+    // PrimeNG Calendar icon color
+    .p-calendar {
+        .p-datepicker-trigger,
+        .p-datepicker-dropdown {
+            background-color: transparent !important;
+            border-color: var(--first) !important;
+            color: var(--first) !important;
+
+            &:hover {
+                background-color: rgba(23, 105, 225, 0.1) !important;
+                border-color: var(--first) !important;
+            }
+
+            // Icon/SVG color - target all possible icon elements
+            svg,
+            .p-icon,
+            i,
+            calendaricon {
+                color: var(--first) !important;
+                fill: var(--first) !important;
+            }
+
+            // Target SVG paths and elements specifically
+            svg path,
+            svg circle,
+            svg rect,
+            svg polygon,
+            svg * {
+                fill: var(--first) !important;
+                stroke: var(--first) !important;
+            }
+        }
+
+        .p-inputtext:enabled:hover {
+            border-color: var(--first) !important;
+        }
+
+        .p-inputtext:enabled:focus {
+            border-color: var(--first) !important;
+            box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
+        }
+    }
+
+    // PrimeNG Select option selected color
+    .p-select-option-selected,
+    .p-select-option.p-select-option-selected {
+        background-color: var(--first) !important;
+        color: #ffffff !important;
+
+        &.p-focus {
+            background-color: var(--first) !important;
+            color: #ffffff !important;
+        }
+    }
+
+    // PrimeNG Autocomplete option selected color
+    .p-autocomplete-option-selected {
+        background-color: var(--first) !important;
+        color: #ffffff !important;
+
+        &.p-focus {
+            background-color: var(--first) !important;
+            color: #ffffff !important;
+        }
+    }
+
+    // PrimeNG Chip/Token color
+    .p-chip,
+    .p-autocomplete-token {
+        background-color: var(--first) !important;
+        color: #ffffff !important;
+    }
+
+    // PrimeNG Multiselect option selected color
+    .p-multiselect-option-selected {
+        background-color: transparent !important;
+        color: black !important;
+
+        &.p-focus {
+            background: var(--p-multiselect-option-focus-background) !important;
+            color: var(--p-multiselect-option-focus-color) !important;
+        }
+    }
+
+    // PrimeNG Checkbox checked color
+    .p-checkbox-checked .p-checkbox-box {
+        background-color: var(--first) !important;
+        border-color: var(--first) !important;
+    }
+}
+
+// Global PrimeNG Calendar icon styles (outside :root for higher specificity)
+p-calendar,
+.p-calendar {
+    .p-datepicker-trigger,
+    .p-datepicker-dropdown,
+    button[class*='datepicker'] {
+        background-color: var(--first) !important;
+        border-color: var(--first) !important;
+        color: white !important;
+
+        svg,
+        .p-icon,
+        i,
+        calendaricon,
+        * {
+            color: white !important;
+            fill: white !important;
+            stroke: white !important;
+        }
+
+        svg path,
+        svg circle,
+        svg rect,
+        svg polygon,
+        svg * {
+            fill: white !important;
+            stroke: white !important;
+        }
+    }
+}
+
+button.p-datepicker-trigger,
+button.p-datepicker-dropdown {
+    background-color: transparent !important;
+    border-color: var(--first) !important;
+    color: var(--first) !important;
+
+    svg,
+    .p-icon,
+    i,
+    calendaricon,
+    * {
+        color: var(--first) !important;
+        fill: var(--first) !important;
+        stroke: var(--first) !important;
+    }
+
+    svg path,
+    svg * {
+        fill: var(--first) !important;
+        stroke: var(--first) !important;
+    }
+}
+
+.body-quill {
+    border-width: 0 !important;
+}
+
+.dropdown-menu .dropdown-item.active {
+    background-color: var(--tabs_bg) !important;
+    color: var(--tabs_text) !important;
+}
+
+.dropdown-menu .dropdown-item:focus {
+    background-color: var(--tabs_bg) !important;
+    color: var(--tabs_text) !important;
+}
+
+.p-dropdown-panel {
+    .p-dropdown-items {
+        .p-dropdown-item {
+            &.p-highlight {
+                background-color: var(--first) !important;
+                color: #ffffff !important;
+            }
+
+            &.p-focus {
+                background-color: var(--first) !important;
+                color: #ffffff !important;
+            }
+        }
+    }
+}
+
+// PrimeNG Select option selected (for p-select components)
+.p-select-option-selected,
+.p-select-option.p-select-option-selected {
+    background-color: var(--first) !important;
+    color: #ffffff !important;
+
+    &.p-focus {
+        background-color: var(--first) !important;
+        color: #ffffff !important;
+    }
+}
+
+// PrimeNG Autocomplete option selected (for p-autocomplete components)
+.p-autocomplete-option-selected {
+    background-color: var(--first) !important;
+    color: #ffffff !important;
+
+    &.p-focus {
+        background-color: var(--first) !important;
+        color: #ffffff !important;
+    }
+}
+
+// PrimeNG Chip/Token styles (for autocomplete chips)
+.p-chip,
+.p-autocomplete-token,
+p-chip {
+    background-color: var(--first) !important;
+    color: #ffffff !important;
+
+    .p-chip-remove-icon {
+        color: #ffffff !important;
+    }
+}
+
+// PrimeNG Autocomplete dropdown button
+.p-autocomplete-dropdown,
+button.p-autocomplete-dropdown {
+    background-color: var(--first) !important;
+    border-color: var(--first) !important;
+    color: #ffffff !important;
+
+    svg,
+    .p-icon,
+    i {
+        color: #ffffff !important;
+        fill: #ffffff !important;
+    }
+
+    &:hover {
+        background-color: var(--first) !important;
+        border-color: var(--first) !important;
+    }
+}
+
+// PrimeNG Autocomplete input border color
+.p-autocomplete {
+    .p-autocomplete-input-multiple,
+    .p-inputtext {
+        &:hover {
+            border-color: var(--first) !important;
+        }
+
+        &:focus,
+        &.p-focus {
+            border-color: var(--first) !important;
+            box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
+        }
+    }
+
+    &:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
+    &:not(.p-disabled):hover .p-autocomplete-input-multiple {
+        border-color: var(--first) !important;
+    }
+}
+
+// PrimeNG Multiselect option selected (for p-multiselect components)
+.p-multiselect-option-selected {
+    background-color: var(--first) !important;
+    color: #ffffff !important;
+
+    &.p-focus {
+        background-color: var(--first) !important;
+        color: #ffffff !important;
+    }
+}
+
+// PrimeNG Checkbox checked (for multiselect checkboxes)
+.p-checkbox-checked .p-checkbox-box,
+.p-checkbox.p-checkbox-checked .p-checkbox-box {
+    background-color: var(--first) !important;
+    border-color: var(--first) !important;
+}
+
+// PrimeNG Tab menu item active
+.p-tabmenuitem-active {
+    background-color: var(--tabs_bg) !important;
+    color: var(--tabs_text) !important;
+
+    a,
+    .p-menuitem-link {
+        background-color: var(--tabs_bg) !important;
+        color: var(--tabs_text) !important;
+    }
+}
+
+// PrimeNG Paginator page selected
+.p-paginator-page.p-paginator-page-selected,
+.p-paginator-page.p-highlight {
+    background-color: var(--tabs_bg) !important;
+    border-color: var(--tabs_bg) !important;
+    color: var(--tabs_text) !important;
+}
+
+// PrimeNG Datepicker day selected - direct global style
+.p-datepicker-day-selected {
+    background-color: var(--first) !important;
+    color: #ffffff !important;
+}
+
+.p-datepicker {
+    table {
+        td {
+            span.p-datepicker-day-selected,
+            &.p-datepicker-day-selected > span {
+                background-color: var(--first) !important;
+                color: #ffffff !important;
+            }
+        }
+    }
+}
+
+.list-action {
+    width: max-content !important;
+    @media (max-width: 425px) {
+        width: auto !important; // Override for mobile
+    }
+}
+
+.p-multiselect-filter {
+    border-color: var(--tabs_bg) !important; /* Change to your custom color */
+    box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important; /* Adjust as needed */
+    outline: none !important; /* Keep the outline removed */
+}
+
+.p-multiselect:not(.p-disabled).p-focus {
+    border-color: var(--tabs_bg) !important;
+    box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important;
+    outline: none !important;
+}
+.p-dropdown:not(.p-disabled).p-focus {
+    border-color: var(--tabs_bg) !important; /* Change to your custom color */
+    box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important; /* Adjust as needed */
+    outline: none !important; /* Keep the outline removed */
+}
+.ql-editor li,
+p {
+    font-size: 17px;
+}
+.ql-editor ol {
+    padding-left: 0.75em !important;
+}
+
+.ql-editor ul,
+.ql-editor ol {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.ql-editor {
+    li > .ql-ui::before {
+        font-size: 2rem; /* you can adjust size here */
+        line-height: 1;
+        position: relative;
+        top: 0.1rem;
+    }
+    ul {
+        padding-left: 20px; /* instead of default 40px */
+    }
+    li.ql-indent-1 {
+        padding-left: 3.6rem !important;
+        .ql-ui::before {
+            font-size: 1.1rem;
+            list-style-type: circle;
+            top: -0.1rem;
+            position: relative;
+            content: '\25CB' !important;
+            right: 0.15rem;
+        }
+    }
+
+    li.ql-indent-2 {
+        padding-left: 4.6rem !important;
+        top: -0.1rem;
+        .ql-ui::before {
+            font-size: 1.1rem;
+            list-style-type: circle;
+            top: -0.1rem;
+            position: relative;
+            content: '\25CB' !important;
+            right: 0.15rem;
+        }
+    }
+
+    li.ql-indent-3 {
+        padding-left: 5.6rem !important;
+        top: -0.1rem;
+        .ql-ui::before {
+            font-size: 1.1rem;
+            list-style-type: circle;
+            top: -0.1rem;
+            position: relative;
+            content: '\25CB' !important;
+            right: 0.15rem;
+        }
+    }
+
+    li.ql-indent-4 {
+        padding-left: 6.6rem !important;
+        top: -0.1rem;
+        .ql-ui::before {
+            font-size: 1.1rem;
+            list-style-type: circle;
+            top: -0.1rem;
+            position: relative;
+            content: '\25CB' !important;
+            right: 0.15rem;
+        }
+    }
+}
+
+.ql-editor ul {
+    padding-left: 1.2rem; /* reduce from default ~2.5rem */
+    margin-left: 0;
+}
+
+.ql-editor ul li {
+    padding-left: 0.3rem; /* optional: less gap between bullet and text */
+}
+
+.ql-editor {
+    line-height: 1.7 !important;
+
+    p,
+    li,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    blockquote,
+    pre {
+        line-height: inherit; // ensures all block types follow 1.6
+    }
+}
+
+.quill-container {
+    max-width: 1000px;
+    width: 100%;
+}
+
+.content-quill-wrapper {
+    margin: 0 auto;
+    max-width: 1000px;
+    background: map-get($white-color, base);
+    border: 1px solid rgb(238, 238, 238);
+
+    .content-quill-box {
+        padding: 3.5rem 3rem 3rem;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    .content-quill-wrapper {
+        padding: 1rem;
+        background: map-get($white-color, base);
+
+        .content-quill-box {
+            padding: 1rem;
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .content-quill-wrapper {
+        padding: 0.5rem;
+        background: map-get($white-color, base);
+
+        .content-quill-box {
+            padding: 0.5rem;
+        }
+    }
+}
+
+.expected-mrr,
+.mrr-header {
+    filter: saturate(0.5);
+}
+
+/* Specific styles for .expected-mrr */
+.expected-mrr {
+    background-color: #d8e8f1 !important;
+}
+
+.month-quarter-text {
+    color: green;
+}
+
+.hopscotch-title {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+}
+
+.hopscotch-title h2 {
+    margin: 0;
+}
+
+.hopscotch-content {
+    text-align: center;
+    padding: 20px;
+    margin: 0 !important;
+}
+
+.hopscotch-content img {
+    width: 150px;
+    margin: 20px 0;
+}
+
+.hopscotch-content p {
+    font-size: 16px;
+    color: #555;
+}
+
+.hopscotch-step-title {
+    text-align: left;
+    margin-bottom: 15px;
+}
+
+.hopscotch-step-content {
+    padding: 20px;
+    text-align: left !important;
+}
+
+.hopscotch-step-content p {
+    font-size: 14px;
+    color: #555;
+    margin-bottom: 10px;
+    text-align: left !important;
+}
+
+.left-field-tooltip {
+    right: -150px !important;
+}
+
+.left-info-circle .tooltiptext::after {
+    left: 45px !important;
+}
+
+.md-drppicker .btn {
+    background-color: var(--tabs_bg) !important;
+}
+
+.md-drppicker .ranges ul li button.active {
+    background-color: var(--tabs_bg) !important;
+}
+
+.md-drppicker td.active,
+.md-drppicker td.active:hover {
+    background-color: var(--tabs_bg) !important;
+}
+
+.sign-header-btn {
+    &:hover {
+        border: 1px solid;
+        box-shadow: none !important;
+        border-color: var(--first) !important;
+    }
+}
+
+::ng-deep .dropdown-item.active {
+    background-color: red !important;
+    color: white !important;
+}
+
+.product-header-color {
+    color: rgb(24, 37, 39) !important;
+}
+
+@media (min-width: 991px) {
+    .section-outer {
+        padding-top: 60px !important;
+        padding-bottom: 60px !important;
+    }
+}
+
+.view-all {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--titles) !important;
+    text-decoration: none;
+    margin-bottom: 2.5rem;
+
+    &:hover {
+        color: var(--first) !important;
+    }
+}
+
+.section-heading {
+    font-size: 3rem !important;
+    font-weight: 300 !important;
+    color: var(--text-color, black);
+}
+
+.resource-header {
+    .navbar-nav {
+        .nav-item {
+            .nav-link {
+                color: white;
+                font-size: 18px;
+                font-weight: 500;
+                letter-spacing: 1px;
+                padding: 1.1em 1em !important;
+            }
+        }
+    }
+}
+
+.domain-edit-icon {
+    bottom: 20px;
+    right: 20px;
+    cursor: pointer;
+    z-index: 5;
+}
+
+.in-page-edit-icon {
+    font-family: 'Font Awesome 6 Pro', sans-serif !important;
+    font-size: 1.5rem;
+    vertical-align: middle;
+    color: black;
+}
+
+.in-page-trash-icon,
+.in-page-bars-icon {
+    font-family: 'Font Awesome 6 Pro', sans-serif !important;
+    font-size: 1.1rem;
+}
+
+.trial-iframe-container {
+    min-height: 550px;
 }