From 1996d0f05b4d7ec856173de943e01a672a02e12e Mon Sep 17 00:00:00 2001
From: jia-deriv <jiawei@regentmarkets.com>
Date: Mon, 5 Aug 2024 13:21:19 +0800
Subject: [PATCH] fix: color

---
 .../app/pages/trade/not-available.jsx         |    4 +-
 src/sass/_common/reskin.scss                  | 1647 ++++++++---------
 2 files changed, 818 insertions(+), 833 deletions(-)

diff --git a/src/javascript/app/pages/trade/not-available.jsx b/src/javascript/app/pages/trade/not-available.jsx
index 4faa99225c8..116c7ceda64 100644
--- a/src/javascript/app/pages/trade/not-available.jsx
+++ b/src/javascript/app/pages/trade/not-available.jsx
@@ -8,10 +8,10 @@ import contractManager from '../../common/contract_manager.js';
 const NotAvailable = ({ title, body }) => (
     <div className='not-available-container'>
         <section className='not-available-section'>
-            <Text size='xl' bold centered>
+            <Text size='xl' bold centered color='not-available-section-text'>
                 {title}
             </Text>
-            <Text size='lg' centered>
+            <Text size='lg' centered color='not-available-section-text'>
                 {body}
             </Text>
             <Button
diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss
index 581b6a2c8d9..d8c4ad41f23 100644
--- a/src/sass/_common/reskin.scss
+++ b/src/sass/_common/reskin.scss
@@ -1,39 +1,39 @@
 body {
-    &.DE {
-        .quill-purchase-section {
-            .purchase-box {
-                .purchase-header {
-                    .purchase-icon-box{ 
-                        .contract_heading {
-                            background-size: 35% !important;
-                        }
-                    }
-                }
+  &.DE {
+    .quill-purchase-section {
+      .purchase-box {
+        .purchase-header {
+          .purchase-icon-box {
+            .contract_heading {
+              background-size: 35% !important;
             }
+          }
         }
+      }
     }
+  }
 }
 
 .quill {
-    &-container {
-        &-centered {
-            width: 100%;
-            position: sticky;
-            display: flex;
-            justify-content: center;
-            padding-bottom: 24px;
-        }
+  &-container {
+    &-centered {
+      width: 100%;
+      position: sticky;
+      display: flex;
+      justify-content: center;
+      padding-bottom: 24px;
     }
+  }
 }
 
 .tab-explanation {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 
-    h3 {
-        font-weight: 700;
-    }
+  h3 {
+    font-weight: 700;
+  }
 }
 
 .secondary-heading {
@@ -41,1026 +41,1011 @@ body {
 }
 
 .hint {
-    line-height: 22px;
+  line-height: 22px;
 }
 
 .chart-section {
-    padding-block: 32px;
+  padding-block: 32px;
 }
 
-
 .contained-section {
-    width: 100%;
-    max-width: 940px;
-    margin: 0 auto;
-    padding-block: 40px;
-
-    @media(max-width: 940px){
-        padding-inline: 16px;
-    }
+  width: 100%;
+  max-width: 940px;
+  margin: 0 auto;
+  padding-block: 40px;
+
+  @media (max-width: 940px) {
+    padding-inline: 16px;
+  }
 }
 
 .trading-container {
-    background: var(--core-color-solid-slate-75);
+  background: var(--core-color-solid-slate-75);
 }
 
 .market-navigation-container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--core-size-800);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--core-size-800);
 
-    @media(max-width: 768px){
-        flex-direction: column-reverse;
-    }
+  @media (max-width: 768px) {
+    flex-direction: column-reverse;
+  }
 
-    div#markets-dropdown-container {
-        @media(max-width: 768px){
-            width: 100%;
-        }
+  div#markets-dropdown-container {
+    @media (max-width: 768px) {
+      width: 100%;
     }
-    div#underlying_details {
-        display: flex;
-        flex-direction: column;
-        transform: scale(0.88);
+  }
+  div#underlying_details {
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.88);
 
-        @media(max-width: 768px){
-           flex-direction: row;
-        }
+    @media (max-width: 768px) {
+      flex-direction: row;
+    }
 
-        #spot{
-            margin-top:  5px;
-        }
+    #spot {
+      margin-top: 5px;
     }
-    div#onboarding-container {
-        margin-left: auto;
+  }
+  div#onboarding-container {
+    margin-left: auto;
 
-        @media (max-width: 768px) {
-           display: none;
-            
-        }
+    @media (max-width: 768px) {
+      display: none;
     }
-    .sub-navigation-container {
-        display: flex;
-        justify-content: space-between;
-        flex-grow: 1;
-        align-items: center;
+  }
+  .sub-navigation-container {
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+    align-items: center;
 
-        @media(max-width: 768px){
-            width: 100%;
-        }
+    @media (max-width: 768px) {
+      width: 100%;
     }
+  }
 }
 
 .trade-container {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-    margin: 16px 0 0;
-
-    #contract_forms_wrapper {
-        .quill-form-container {
-            border-radius: 16px;
-            background: var(--core-color-solid-slate-50);
-            width: 100%;
-            height: 100%;
-            align-items: center;
-        }
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin: 16px 0 0;
+
+  #contract_forms_wrapper {
+    .quill-form-container {
+      border-radius: 16px;
+      background: var(--core-color-solid-slate-50);
+      width: 100%;
+      height: 100%;
+      align-items: center;
     }
+  }
 }
 
 .trade-parameter-block {
-    max-width: 462px;
-    width: 100%;
+  max-width: 462px;
+  width: 100%;
 
-    @media (max-width: 940px){
-        max-width: none;
-        width: 100%;
-    }
+  @media (max-width: 940px) {
+    max-width: none;
+    width: 100%;
+  }
 }
 
 .quill-market-selector {
-    &-container {
-        display: flex;
-        flex-wrap: wrap;
-        width: 100%;
-        position: relative;
-        z-index: 100;
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    position: relative;
+    z-index: 100;
 
-        @media(max-width: 768px){
-           gap: var(--core-size-800);
-        }
+    @media (max-width: 768px) {
+      gap: var(--core-size-800);
     }
-    &-dropdown {
-        width: 100%;
-        max-width: 222px !important;
-        margin: 0 10px 0 0;
-        flex: none;
+  }
+  &-dropdown {
+    width: 100%;
+    max-width: 222px !important;
+    margin: 0 10px 0 0;
+    flex: none;
 
-        @media(max-width: 768px){
-            max-width: 100% !important;
+    @media (max-width: 768px) {
+      max-width: 100% !important;
 
-            .quill-custom-dropdown__container {
-                max-width: 100% !important;
-            }
-        }
+      .quill-custom-dropdown__container {
+        max-width: 100% !important;
+      }
     }
+  }
 }
 
 .quill-market-dropdown {
-    &-container {
-        width: 360px;
-        padding: 8px 0 0;
-        background: var(--core-color-solid-slate-50);
-        margin: 10px 0px;
-        border-radius: 8px;
-        border: 1px solid rgba(0, 0, 0, 0.04);
+  &-container {
+    width: 360px;
+    padding: 8px 0 0;
+    background: var(--core-color-solid-slate-50);
+    margin: 10px 0px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.04);
 
-        @media(max-width: 768px){
-            width: 100%;
-            margin: 0px;
-        }
+    @media (max-width: 768px) {
+      width: 100%;
+      margin: 0px;
     }
-    &-search-container {
-        padding: var(--core-spacing-400) var(--core-spacing-800);
+  }
+  &-search-container {
+    padding: var(--core-spacing-400) var(--core-spacing-800);
+  }
+  &-tab-container {
+    .tab-list--item-hug-content {
+      height: 48px; // Needs to be fixed from Quill side.
     }
-    &-tab-container {
-        .tab-list--item-hug-content {
-            height: 48px; // Needs to be fixed from Quill side. 
-        }
+  }
+  &-item-container {
+    height: fit-content;
+    max-height: 420px;
+    overflow-y: auto;
+    padding: 0 var(--core-spacing-400);
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+    border-radius: var(--core-borderRadius-500);
+
+    &::-webkit-scrollbar {
+      scrollbar-width: thin;
+      width: var(--core-size-200);
+      background-color: transparent;
+      border-radius: var(--core-borderRadius-500);
     }
-    &-item-container {
-        height: fit-content;
-        max-height: 420px;
-        overflow-y: auto;
-        padding: 0 var(--core-spacing-400);
+    &::-webkit-scrollbar-track {
+      scrollbar-width: thin;
+      background-color: transparent !important;
+    }
+    &:hover {
+      scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+      border-radius: var(--core-borderRadius-500);
+
+      &::-webkit-scrollbar-thumb {
         scrollbar-width: thin;
-        scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+        display: unset;
         border-radius: var(--core-borderRadius-500);
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+    &.market-item-container {
+      max-height: 320px;
 
-        &::-webkit-scrollbar {
-            scrollbar-width: thin;
-            width: var(--core-size-200);
-            background-color: transparent;
-            border-radius: var(--core-borderRadius-500);
-        }
-        &::-webkit-scrollbar-track {
-            scrollbar-width: thin;
-            background-color: transparent !important;
-        }
-        &:hover {
-            scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
-            border-radius: var(--core-borderRadius-500);
-    
-            &::-webkit-scrollbar-thumb {
-                scrollbar-width: thin;
-                display: unset;
-                border-radius: var(--core-borderRadius-500);
-                background-color: rgba(0, 0, 0, 0.08);
-            }  
-        } 
-        &.market-item-container {
-            max-height: 320px;
-
-            @media(max-width: 768px){
-                max-height: calc(100vh - 300px);
-            }
-        }
+      @media (max-width: 768px) {
+        max-height: calc(100vh - 300px);
+      }
     }
+  }
 }
 
-
 div#tradetype-dropdown {
-    #contract_component {
-        display: none;
-    }
+  #contract_component {
+    display: none;
+  }
 }
 
 div#contract-injection-container {
-    #contract_component {
-        display: block;
+  #contract_component {
+    display: block;
 
-        @media(max-width: 768px){
-           width: 100%;
-           max-height: none;
-           
-        }
+    @media (max-width: 768px) {
+      width: 100%;
+      max-height: none;
     }
+  }
 }
 
 .quill-purchase-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--core-spacing-800);
+
+  @media (max-width: 940px) {
+    flex-direction: row;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+
+  p {
+    margin: 0px;
+  }
+  &-results {
     display: flex;
     flex-direction: column;
-    gap: var(--core-spacing-800);
+    background: var(--core-color-solid-slate-50);
+    border-radius: var(--core-borderRadius-800);
+    width: 100%;
+    height: 100%;
 
-    @media (max-width: 940px) {
-       flex-direction: row;    
+    p {
+      margin: 0px;
     }
+    .top-box {
+      display: flex;
+      flex-direction: column;
+      padding: var(--core-spacing-1200) 0;
 
-    @media (max-width: 768px) {
-        flex-direction: column;
-        
-    }
+      .header-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 var(--core-size-800);
+        margin-bottom: var(--core-size-800);
+        position: relative;
 
-    p {
-        margin: 0px;
-    }
-    &-results {
+        .close-btn {
+          position: absolute;
+          right: 16px;
+          display: flex;
+          width: 48px;
+          height: 48px;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+      }
+      .body-box {
         display: flex;
         flex-direction: column;
-        background: var(--core-color-solid-slate-50);
-        border-radius: var(--core-borderRadius-800);
-        width: 100%;
-        height: 100%;
-
-        p {
-            margin: 0px;
+        padding: 0 var(--core-size-800);
+        gap: var(--core-size-800);
+
+        .description-box {
+          display: flex;
+          border-radius: var(--core-borderRadius-200);
+          border: solid 1px var(--core-color-opacity-slate-100);
+          padding: var(--core-size-800);
+          background-color: var(--core-color-opacity-slate-75);
         }
-        .top-box {
-            display: flex;
+        .table-box {
+          display: flex;
+          @media (max-width: 319px) {
             flex-direction: column;
-            padding: var(--core-spacing-1200) 0;
+          }
 
-            .header-box {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                padding: 0 var(--core-size-800);
-                margin-bottom: var(--core-size-800);
-                position: relative;
-
-                .close-btn {
-                    position: absolute;
-                    right: 16px;
-                    display: flex;
-                    width: 48px;
-                    height: 48px;
-                    justify-content: center;
-                    align-items: center;
-                    cursor: pointer;
-                }
-            }
-            .body-box {
-                display: flex;
-                flex-direction: column;
-                padding: 0 var(--core-size-800);
-                gap: var(--core-size-800);
-
-                .description-box {
-                    display: flex;
-                    border-radius: var(--core-borderRadius-200);
-                    border: solid 1px var( --core-color-opacity-slate-100);
-                    padding: var(--core-size-800);
-                    background-color: var(--core-color-opacity-slate-75);
-                }
-                .table-box {
-                    display: flex;
-                    @media (max-width: 319px) {
-                        flex-direction: column;
-                        
-                    }
-        
-                    .table-item {
-                        display: flex;
-                        flex-direction: column;
-                        width: 100%;
-                        align-items: center;
-                    }
-                }
-                .info-box {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-
-                    .view-btn {
-                        margin-top: var(--core-size-400);
-                    }
-                }
-                .error-box {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    gap: var(--core-size-800);
-
-                    .error-message {
-                        padding: var(--core-size-800);
-                    }
-                    button {
-                        width: fit-content;
-                    }
-                }
+          .table-item {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            align-items: center;
+          }
+        }
+        .info-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .view-btn {
+            margin-top: var(--core-size-400);
+          }
+        }
+        .error-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: var(--core-size-800);
+
+          .error-message {
+            padding: var(--core-size-800);
+          }
+          button {
+            width: fit-content;
+          }
+        }
+      }
+      .analysis-box {
+        margin-top: var(--core-spacing-800);
+
+        .digit-tick-epoch {
+          position: relative !important;
+          margin-bottom: var(--core-spacing-800);
+          top: 0 !important;
+          right: 0 !important;
+        }
+        .digit-trade {
+          .quote {
+            font-weight: bold;
+          }
+        }
+        .digit-ticker {
+          margin-top: var(--core-spacing-800);
+
+          .mask {
+            font-size: 10px;
+            text-align: center;
+            border: none;
+            font-weight: bold;
+          }
+          .digit {
+            &.digit-winning {
+              background-color: var(--core-color-solid-emerald-100);
+              color: var(--core-color-solid-emerald-700);
             }
-            .analysis-box {
-                margin-top: var(--core-spacing-800);
-
-                .digit-tick-epoch {
-                    position: relative !important;
-                    margin-bottom: var(--core-spacing-800);
-                    top: 0 !important;
-                    right: 0 !important;
-                }
-                .digit-trade {
-                    .quote {
-                        font-weight: bold;
-                    }
-                }
-                .digit-ticker {
-                    margin-top: var(--core-spacing-800);
-
-                    .mask {
-                        font-size: 10px;
-                        text-align: center;
-                        border: none;
-                        font-weight: bold;
-                    }
-                    .digit {
-                        &.digit-winning {
-                            background-color: var(--core-color-solid-emerald-100);
-                            color: var(--core-color-solid-emerald-700);
-                        }
-                    }
-                    .peek-box {
-                        &.digit-winning {
-                            .peek {
-                                border: none;
-                            }
-                        }
-                    }
-                }
+          }
+          .peek-box {
+            &.digit-winning {
+              .peek {
+                border: none;
+              }
             }
+          }
         }
-        .footer-box {
-            display: flex;
-            justify-content: center;
-            background-color: var(--core-color-opacity-slate-100);
-            padding: var(--core-spacing-400);
-            border-radius: 0 0 var(--core-borderRadius-800) var(--core-borderRadius-800);
-            gap: 4px;
-            margin-top: auto;
-        }
+      }
     }
-    &.disabled {
-        opacity: 0.5;
+    .footer-box {
+      display: flex;
+      justify-content: center;
+      background-color: var(--core-color-opacity-slate-100);
+      padding: var(--core-spacing-400);
+      border-radius: 0 0 var(--core-borderRadius-800)
+        var(--core-borderRadius-800);
+      gap: 4px;
+      margin-top: auto;
     }
-    .purchase-box {
+  }
+  &.disabled {
+    opacity: 0.5;
+  }
+  .purchase-box {
+    display: flex;
+    flex-direction: column;
+    background: var(--core-color-solid-slate-50);
+    border-radius: var(--core-borderRadius-800);
+    height: fit-content;
+    min-height: 50px;
+    width: 100%;
+
+    .purchase-header {
+      display: flex;
+      padding: var(--core-spacing-800);
+      gap: var(--core-spacing-800);
+
+      .purchase-icon-box {
         display: flex;
         flex-direction: column;
-        background: var(--core-color-solid-slate-50);
-        border-radius: var(--core-borderRadius-800);
-        height: fit-content;
-        min-height: 50px;
+        justify-content: center;
+        align-items: center;
+        max-width: 80px;
+
+        .contract_heading {
+          height: 48px;
+          width: 48px;
+          background-size: 75% !important;
+        }
+      }
+      .purchase-body-box {
+        display: flex;
+        flex-direction: column;
+        gap: var(--core-spacing-800);
         width: 100%;
-        
-       
-        .purchase-header {
+
+        .purchase-amount-box {
+          display: flex;
+          gap: var(--core-spacing-400);
+          justify-content: center;
+          flex-wrap: wrap;
+
+          .purchase-amount-info-box {
             display: flex;
-            padding: var(--core-spacing-800);
-            gap: var(--core-spacing-800);
-           
-            .purchase-icon-box {
-                display:flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                max-width: 80px;
+            flex-direction: column;
+            flex: 1;
+            align-items: center;
 
-                .contract_heading {
-                    height: 48px;
-                    width: 48px;
-                    background-size: 75% !important;
-                }
+            p {
+              transition: 100ms color ease-in-out;
             }
-            .purchase-body-box {
-                display: flex;
-                flex-direction: column;
-                gap: var(--core-spacing-800);
-                width: 100%;
-
-                .purchase-amount-box {
-                    display: flex;
-                    gap: var(--core-spacing-400);
-                    justify-content: center;
-                    flex-wrap: wrap;
-
-                    .purchase-amount-info-box {
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1;
-                        align-items: center;
-
-                        p {
-                            transition: 100ms color ease-in-out;
-                        }
-                        .price_moved_up,.price_moved_down{
-                            background: unset;
-                        }
-                        .price_moved_up {
-                            color: var(--semantic-color-emerald-solid-surface-normal-highest);
-                        }
-                        .price_moved_down {
-                            color: var(--semantic-color-cherry-solid-surface-normal-highest);
-                        }
-                    }   
-                }
+            .price_moved_up,
+            .price_moved_down {
+              background: unset;
             }
+            .price_moved_up {
+              color: var(--semantic-color-emerald-solid-surface-normal-highest);
+            }
+            .price_moved_down {
+              color: var(--semantic-color-cherry-solid-surface-normal-highest);
+            }
+          }
         }
-        .purchase-footer {
-            display: flex;
-            width: 100%;
-            min-height: 32px;
-            border-radius: 0 0 var(--core-borderRadius-800) var(--core-borderRadius-800);
-            background: var(--core-color-opacity-slate-100);
-            justify-content: center;
-            padding: var(--core-spacing-400) var(--core-spacing-800);
-        }
-        
+      }
+    }
+    .purchase-footer {
+      display: flex;
+      width: 100%;
+      min-height: 32px;
+      border-radius: 0 0 var(--core-borderRadius-800)
+        var(--core-borderRadius-800);
+      background: var(--core-color-opacity-slate-100);
+      justify-content: center;
+      padding: var(--core-spacing-400) var(--core-spacing-800);
     }
+  }
 }
 
 .quill-purchase-popup,
 .quill-generic-popup {
-    position: fixed;
-    top: 48px;
-    left: 0;
+  position: fixed;
+  top: 48px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 84px);
+  background: var(--core-color-solid-slate-75);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (max-width: 940px) {
+    top: 40px;
+    height: calc(100% - 40px);
+  }
+
+  .popup-scroller {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    height: calc(100% - 48px);
     width: 100%;
-    height: calc(100% - 84px);
-    background: var(--core-color-solid-slate-75);
+  }
+  .header-box {
+    display: flex;
+    width: 100%;
+    height: 48px;
+    background: var(--core-color-opacity-white-800);
+
+    .title-box {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .body-box {
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
+    max-width: 940px;
 
-    @media (max-width: 940px) {
-        top: 40px;   
-        height: calc(100% - 40px);   
+    .purchase-details-box {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      gap: var(--core-spacing-1200);
+      flex-direction: column;
+      padding: var(--core-spacing-1200) 0;
+      @media (max-width: 940px) {
+        padding: var(--core-spacing-1200) var(--core-spacing-800);
+      }
     }
- 
-    .popup-scroller {
+    .loader-box {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      gap: var(--core-spacing-1200);
+      padding: 40px 0 var(--core-spacing-1200) 0;
+
+      .body-loader {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow-y: auto;
-        height: calc(100% - 48px);
-        width: 100%;
+        gap: var(--core-size-800);
+      }
     }
-    .header-box {
-        display: flex;
-        width: 100%;
-        height: 48px;
-        background: var(--core-color-opacity-white-800);
+    .details-title {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+    }
+    .details-column {
+      display: flex;
+      width: 100%;
+      gap: var(--core-spacing-800);
+      @media (max-width: 940px) {
+        flex-direction: column;
+      }
 
-        .title-box {
-            display: flex;
+      .chart-wrapper {
+        background: var(--core-color-solid-slate-50);
+        padding: 16px;
+        border-radius: 8px;
+        width: fit-content;
+        height: fit-content;
+
+        &:first-child {
+          width: 620px;
+        }
+
+        @media (max-width: 940px) {
+          &:first-child {
             width: 100%;
-            justify-content: center;
-            align-items: center;
+          }
         }
-    }
-    .body-box {
+      }
+      .contract-info-wrapper {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        width: 100%;
-        max-width: 940px;
- 
+        max-width: 360px;
+        background: var(--core-color-solid-slate-50);
+        border-radius: 8px;
+        height: fit-content;
+        @media (max-width: 940px) {
+          max-width: 100%;
+        }
 
-        .purchase-details-box {
-            display: flex;
-            width: 100%;
-            justify-content: center;
-            gap: var(--core-spacing-1200);
-            flex-direction: column;
-            padding: var(--core-spacing-1200) 0;
-            @media (max-width: 940px){
-                padding: var(--core-spacing-1200) var(--core-spacing-800);
-            
-            }
+        &.full {
+          max-width: none;
+          min-width: 564px;
 
+          @media (max-width: 940px) {
+            min-width: 100%;
+          }
         }
-        .loader-box {
-            display: flex;
+        .table-box {
+          width: 100%;
+          height: fit-content;
+          display: flex;
+          padding: 8px 16px;
+          border-bottom: solid 1px var(--core-color-opacity-slate-100);
+          gap: var(--core-spacing-400);
+          @media (max-width: 319px) {
             flex-direction: column;
-            width: 100%;
-            gap: var(--core-spacing-1200);
-            padding: 40px 0 var(--core-spacing-1200) 0;
+          }
 
-            .body-loader {
-                display: flex;
-                gap: var(--core-size-800);
-            }
-        }
-        .details-title {
-            display: flex;
-            width: 100%;
+          &.lg {
+            flex-direction: column;
+            border-bottom: none;
             justify-content: center;
-        }
-        .details-column {
-            display: flex;
+            padding: var(--core-spacing-800);
+            margin: var(--core-spacing-800) 0 0 0;
+          }
+          p,
+          .info-msg {
             width: 100%;
-            gap: var(--core-spacing-800);
-            @media (max-width: 940px) {
-                flex-direction: column;
-                
-            }
+            white-space: normal;
+          }
+          .table-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            min-width: 140px;
+            width: fit-content;
+            word-break: break-word;
 
-            .chart-wrapper {
-                background: var(--core-color-solid-slate-50);
-                padding: 16px;
-                border-radius: 8px;
-                width: fit-content;        
-                height: fit-content;
+            &:last-child {
+              min-width: 180px;
+            }
 
-                &:first-child {
-                    width: 620px ;
-                }
+            @media (max-width: 940px) {
+              word-break: break-word;
 
-                @media (max-width: 940px) {
-                    &:first-child {
-                        width: 100%;
-                    }
-                    
-                }
+              &:first-child,
+              &:last-child {
+                min-width: 120px;
+              }
             }
-            .contract-info-wrapper {
-                display: flex;
-                flex-direction: column;
-                max-width: 360px;
-                background: var(--core-color-solid-slate-50);
-                border-radius: 8px;
-                height: fit-content;
-                @media (max-width: 940px) {
-                    max-width: 100%;
-                    
-                }
 
-                &.full {
-                    max-width: none;
-                    min-width: 564px;
+            &.profit-loss {
+              p {
+                font-weight: bold;
 
-                    @media (max-width: 940px) {
-                        min-width: 100%;
-                        
-                    }
+                &.profit {
+                  color: var(
+                    --semantic-color-emerald-solid-surface-normal-highest
+                  );
+                }
+                &.loss {
+                  color: var(
+                    --semantic-color-cherry-solid-surface-normal-highest
+                  );
                 }
-                .table-box {
-                    width: 100%;
-                    height: fit-content;
-                    display: flex;
-                    padding: 8px 16px;
-                    border-bottom: solid 1px var(--core-color-opacity-slate-100);
-                    gap: var(--core-spacing-400);
-                    @media (max-width: 319px) {
-                        flex-direction: column;
-                        
-                    }
-
-                    &.lg {
-                        flex-direction: column;
-                        border-bottom: none;
-                        justify-content: center;
-                        padding: var(--core-spacing-800);
-                        margin: var(--core-spacing-800) 0 0 0;
-                    }
-                    p, .info-msg {
-                        width: 100%;
-                        white-space: normal;
-                    }
-                    .table-item {
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: center;
-                        min-width: 140px;
-                        width: fit-content;
-                        word-break: break-word;
-
-                        &:last-child {
-                            min-width: 180px;
-                        }
-
-                        @media (max-width: 940px) {
-                            word-break: break-word;
-
-                            &:first-child, &:last-child {
-                                min-width: 120px;
-                            }
-                        }
-
-                        
-                        &.profit-loss {
-                            p {
-                                font-weight: bold;
-
-                                &.profit {
-                                    color: var(--semantic-color-emerald-solid-surface-normal-highest);
-                                }
-                                &.loss {
-                                    color: var(--semantic-color-cherry-solid-surface-normal-highest);
-                                }
-                                .symbols {
-                                    margin-right: 5px;
-                                }
-                                .percent {
-                                    font-weight: normal;
-                                }
-                            }
-                        }
-                    }
+                .symbols {
+                  margin-right: 5px;
                 }
-                .table-container {
-                    display: flex;
-                    flex-direction: column;
-                    padding: var(--core-spacing-800);
-                    gap: var(--core-spacing-400);
-                    border-bottom: solid 1px var(--core-color-opacity-slate-100);
-
-                    .table-item {
-                        display: flex;
-                        gap: var(--core-spacing-800);
-
-                        .item-header {
-                            display: flex;
-                            width: 100%;
-                            max-width: 120px;
-                            padding: var(--core-spacing-400);
-                        }
-                        .item-content {
-                            display: flex;
-                            padding: var(--core-spacing-400);
-                            width: 100%;
-                            text-align: center;
-
-                            &.highlighted {
-                                background: var(--core-color-solid-slate-100);
-                            }
-                            &.selected {
-                                background: var(--core-color-solid-slate-700);
-                                
-                                p {
-                                    color: var(--core-color-solid-slate-50);
-                                }
-                            }
-                            .item-inner {
-                                display: flex;
-                                width: 100%;
-                                align-items: center;
-                                justify-content: center;
-                            }
-                        }
-                    }
+                .percent {
+                  font-weight: normal;
                 }
+              }
             }
+          }
         }
+        .table-container {
+          display: flex;
+          flex-direction: column;
+          padding: var(--core-spacing-800);
+          gap: var(--core-spacing-400);
+          border-bottom: solid 1px var(--core-color-opacity-slate-100);
+
+          .table-item {
+            display: flex;
+            gap: var(--core-spacing-800);
+
+            .item-header {
+              display: flex;
+              width: 100%;
+              max-width: 120px;
+              padding: var(--core-spacing-400);
+            }
+            .item-content {
+              display: flex;
+              padding: var(--core-spacing-400);
+              width: 100%;
+              text-align: center;
+
+              &.highlighted {
+                background: var(--core-color-solid-slate-100);
+              }
+              &.selected {
+                background: var(--core-color-solid-slate-700);
+
+                p {
+                  color: var(--core-color-solid-slate-50);
+                }
+              }
+              .item-inner {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                justify-content: center;
+              }
+            }
+          }
+        }
+      }
     }
+  }
 }
 
-// Hide old containers 
+// Hide old containers
 // This is to allow QA to disable this quickly
 html:not(.test) {
-    #trading_init_progress, 
-    #contract_container,
-    #contract_symbol_container,
-    #contract_prices_container, 
-    .popup_page_overlay, 
-    .inpage_popup_container {
-        position: absolute !important;
-        top: -999px !important;
-    }
+  #trading_init_progress,
+  #contract_container,
+  #contract_symbol_container,
+  #contract_prices_container,
+  .popup_page_overlay,
+  .inpage_popup_container {
+    position: absolute !important;
+    top: -999px !important;
+  }
 }
 
 html.test {
-    .inpage_popup_container {
-        z-index: 9999 !important;
-    }
-    .quill-purchase-popup {
-        z-index: 12;
-    }
+  .inpage_popup_container {
+    z-index: 9999 !important;
+  }
+  .quill-purchase-popup {
+    z-index: 12;
+  }
 }
 
 .purchase-tooltip {
-    display: block;
-    width: 100%;
-    max-width: 200px;
+  display: block;
+  width: 100%;
+  max-width: 200px;
 }
 
 #react-tiny-popover-container {
-    z-index: 999;
+  z-index: 999;
 }
 
 .explanation-container-loader {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .section-loaders {
     display: flex;
-    flex-direction: column;
     gap: 16px;
-
-    .section-loaders {
-        display: flex;
-        gap: 16px;
-        justify-content: center;
-        width: 100%;
-        flex-wrap: wrap;
-    }
+    justify-content: center;
+    width: 100%;
+    flex-wrap: wrap;
+  }
 }
 
 .explanation-heading {
-   padding-bottom: 8px;
+  padding-bottom: 8px;
 }
 
 .explanation-content {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .quill-form {
-    &-container {
-        display: flex;
-        position: relative;
-        z-index: 99;
-        padding: 16px;
-        flex-direction: column;
-        gap: 16px;
-        min-height: 290px;
+  &-container {
+    display: flex;
+    position: relative;
+    z-index: 99;
+    padding: 16px;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 290px;
 
-        @media(max-width: 940px){
-            padding: 32px 16px;
-        }
+    @media (max-width: 940px) {
+      padding: 32px 16px;
+    }
 
-        .section-msg-container {
-            width: 100%;
-        }
+    .section-msg-container {
+      width: 100%;
     }
-    &-rows {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        gap: 16px;
+  }
+  &-rows {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 16px;
 
-        @media(max-width: 768px){
-            gap: 8px;
-        }
+    @media (max-width: 768px) {
+      gap: 8px;
     }
-    &-row {
-        display: flex;
-        gap: 8px;
+  }
+  &-row {
+    display: flex;
+    gap: 8px;
 
-        @media(max-width: 768px){
-            flex-direction: column;
-            gap: 8px;
-        }
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: 8px;
+    }
 
-        .form_field {
-            flex: 1;
+    .form_field {
+      flex: 1;
 
-            &.field-pb {
-                padding-bottom: 20px;
-            }
+      &.field-pb {
+        padding-bottom: 20px;
+      }
 
-            @media(max-width: 768px){
-                width: 100%;
-            }
+      @media (max-width: 768px) {
+        width: 100%;
+      }
+
+      .dropdown__wrapper {
+        max-width: unset !important;
+      }
+      .dropdown__container {
+        width: 100% !important;
+        min-width: unset !important;
+      }
+      .custom-dropdown-wrapper {
+        padding: 8px 0 0;
+        background: var(--core-color-solid-slate-50);
+        margin: 10px 0px;
+        border-radius: 8px;
+        border: 1px solid rgba(0, 0, 0, 0.04);
+        max-height: 320px;
+        overflow-y: auto;
 
-            .dropdown__wrapper {
-                max-width: unset !important;
-            }
-            .dropdown__container {
-                width: 100% !important;
-                min-width: unset !important;
-            }
-            .custom-dropdown-wrapper {
-                padding: 8px 0 0;
-                background: var(--core-color-solid-slate-50);
-                margin: 10px 0px;
-                border-radius: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.04);
-                max-height: 320px;
-                overflow-y: auto;
-
-                &::-webkit-scrollbar {
-                    scrollbar-width: thin;
-                    width: var(--core-size-200);
-                    background-color: transparent;
-                    border-radius: var(--core-borderRadius-500);
-                }
-                &::-webkit-scrollbar-track {
-                    scrollbar-width: thin;
-                    background-color: transparent !important;
-                }
-                &:hover {
-                    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
-                    border-radius: var(--core-borderRadius-500);
-            
-                    &::-webkit-scrollbar-thumb {
-                        scrollbar-width: thin;
-                        display: unset;
-                        border-radius: var(--core-borderRadius-500);
-                        background-color: rgba(0, 0, 0, 0.08);
-                    } 
-                }     
-            }
-            .quill-custom-dropdown__container {
-                max-width: unset !important;
-            }
-            .datepicker__wrapper {
-                max-width: unset !important;
-            }
+        &::-webkit-scrollbar {
+          scrollbar-width: thin;
+          width: var(--core-size-200);
+          background-color: transparent;
+          border-radius: var(--core-borderRadius-500);
         }
-        &.allow-equals {
-            justify-content: center;
-            align-items: center;
+        &::-webkit-scrollbar-track {
+          scrollbar-width: thin;
+          background-color: transparent !important;
+        }
+        &:hover {
+          scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+          border-radius: var(--core-borderRadius-500);
+
+          &::-webkit-scrollbar-thumb {
+            scrollbar-width: thin;
+            display: unset;
+            border-radius: var(--core-borderRadius-500);
+            background-color: rgba(0, 0, 0, 0.08);
+          }
         }
+      }
+      .quill-custom-dropdown__container {
+        max-width: unset !important;
+      }
+      .datepicker__wrapper {
+        max-width: unset !important;
+      }
     }
+    &.allow-equals {
+      justify-content: center;
+      align-items: center;
+    }
+  }
 }
 
 .barrier-tooltip {
-    display: block;
-    width: 100%;
-    max-width: 300px;
+  display: block;
+  width: 100%;
+  max-width: 300px;
 }
 
 .barrier-indicator {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .datepicker-dropdown__menu {
-    position: absolute;
+  position: absolute;
 }
 
 .deriv-dropdown__menu--open {
-    position: relative;
-    z-index: 99;
+  position: relative;
+  z-index: 99;
 }
 
 .bottom-content-section {
-    min-height: 400px;
-    padding: 16px;
+  min-height: 400px;
+  padding: 16px;
 
-    @media(max-width: 768px){
-        min-height: fit-content;
-    }
-   
+  @media (max-width: 768px) {
+    min-height: fit-content;
+  }
 }
 
 .not-available-container {
-    height: calc(100vh - 48px - 37px);
-    padding: var(--core-spacing-1600) var(--core-spacing-800);
-    display: flex;
-    justify-content: center;
-
-    button:focus {
-        background-color: var(--core-color-solid-coral-700);
-    }
+  height: calc(100vh - 48px - 37px);
+  padding: var(--core-spacing-1600) var(--core-spacing-800);
+  display: flex;
+  justify-content: center;
+
+  button:focus {
+    background-color: var(--core-color-solid-coral-700);
+  }
 }
 
 .not-available-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--core-spacing-1600);
-    max-width: 940px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--core-spacing-1600);
+  max-width: 940px;
+}
+
+.not-available-section-text {
+  color: var(--component-textIcon-normal-prominent);
 }
 
 .main-loader {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 942px;
-    margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 942px;
+  margin: 0 auto;
+
+  @media (max-width: 768px) {
+    padding: 16px;
+  }
 
+  .header-loader {
+    display: flex;
+    margin-top: 42px;
+    gap: 26px;
 
     @media (max-width: 768px) {
-        padding: 16px;
-        
+      flex-direction: column-reverse;
+      gap: 16px;
     }
-    
-    .header-loader {
-        display: flex;
-        margin-top: 42px;
-        gap: 26px;
 
-        @media (max-width: 768px) {
-           flex-direction: column-reverse;
-           gap: 16px;
-            
-        }
+    .dropdown-loader-container {
+      display: flex;
+      gap: 12px;
 
-        .dropdown-loader-container {
-            display: flex;
-            gap: 12px;
-
-            @media (max-width: 768px) {
-                flex-direction: column;
-                   
-            }
+      @media (max-width: 768px) {
+        flex-direction: column;
+      }
 
-            .dropdown-loader {
-                width: 220px;
-
-                @media (max-width: 768px) {
-                    width: 100%;
-                       
-                }
-            }
-        }
-        .other-header-loader-container {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-        }
-    }
-    .body-loader {
-        display: flex;
-        margin-top: 18px;
-        width: 100%;
-        gap: 16px;
+      .dropdown-loader {
+        width: 220px;
 
         @media (max-width: 768px) {
-            flex-direction: column;
-               
+          width: 100%;
         }
+      }
+    }
+    .other-header-loader-container {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .body-loader {
+    display: flex;
+    margin-top: 18px;
+    width: 100%;
+    gap: 16px;
 
-        .trade-section-loader {
-            display: flex;
-            width: 100%;
-            max-width: 462px;
+    @media (max-width: 768px) {
+      flex-direction: column;
+    }
 
-            @media (max-width: 768px) {
-                max-width: 100%;
-                   
-            }
-        }
-        .purchase-section-loader {
-            display: flex;
-            flex-direction: column;
-            gap: var(--core-spacing-800);
-            width: 100%;
-            max-width: 490px;
+    .trade-section-loader {
+      display: flex;
+      width: 100%;
+      max-width: 462px;
 
-            @media (max-width: 768px) {
-                max-width: 100%;
-                   
-            }
-        }
+      @media (max-width: 768px) {
+        max-width: 100%;
+      }
     }
-    .footer-loader {
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        margin-top: 132px;
+    .purchase-section-loader {
+      display: flex;
+      flex-direction: column;
+      gap: var(--core-spacing-800);
+      width: 100%;
+      max-width: 490px;
+
+      @media (max-width: 768px) {
+        max-width: 100%;
+      }
     }
+  }
+  .footer-loader {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    margin-top: 132px;
+  }
 }
 
 .static-page-layout {
-    margin-top: 40px;
-    margin-bottom: 20px;
+  margin-top: 40px;
+  margin-bottom: 20px;
 
-    @media (max-width: 768px) {
-        margin-top: 25px;
-        
-    }
+  @media (max-width: 768px) {
+    margin-top: 25px;
+  }
 }
 
 .static-content {
-    margin : 0 auto;
-    max-width: 960px;
-    padding-inline: 10px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 960px;
+  padding-inline: 10px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-.input-class{
-    width: 346px !important;
-    padding: 10px 12px;
-    border: 1px solid var(--core-color-solid-slate-400);
-    font-size: 14px;
-    height: 40px; 
-
-    @media (max-width: 768px) {
-        height: 48px !important;
-        width: 312px !important;
-        
-    }
+.input-class {
+  width: 346px !important;
+  padding: 10px 12px;
+  border: 1px solid var(--core-color-solid-slate-400);
+  font-size: 14px;
+  height: 40px;
+
+  @media (max-width: 768px) {
+    height: 48px !important;
+    width: 312px !important;
+  }
 }
 
 .submit-button {
-    background: var(--core-color-solid-green-700);
-    text-decoration: none;
-    text-align: center;
-    line-height: 100%;
-    padding: 10px 25px;
-    display: inline-block;
-    font-weight: 400;
-    font-family: inherit;
-    border-radius: 4px;
-    overflow: visible;
-    border: 0;
-    color: var(--core-color-solid-slate-50);
-
-    &:hover {
-        background: var(--core-color-solid-green-1100);
-    }
+  background: var(--core-color-solid-green-700);
+  text-decoration: none;
+  text-align: center;
+  line-height: 100%;
+  padding: 10px 25px;
+  display: inline-block;
+  font-weight: 400;
+  font-family: inherit;
+  border-radius: 4px;
+  overflow: visible;
+  border: 0;
+  color: var(--core-color-solid-slate-50);
+
+  &:hover {
+    background: var(--core-color-solid-green-1100);
+  }
 }
 
 .header__hamburger {
-    box-sizing: content-box;
-}
\ No newline at end of file
+  box-sizing: content-box;
+}