tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/gallery/gallery.component.scss

@@ -0,0 +1,930 @@
+.gallery-card {
+    padding: 24px;
+    border-radius: 12px;
+    background: #FFF;
+
+    .header {
+        color: #101828;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 28px;
+    }
+}
+
+.img {
+
+    border-radius: 10px;
+    border: 1px solid var(--Gray-500, #667085);
+    background: var(--Gray-100, #F2F4F7) ;
+    width: 100%;
+    height: 230px;
+}
+
+.prvtxt {
+    color: var(--Gray-500, #667085);
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px;
+    /* 100% */
+    letter-spacing: -0.4px;
+}
+
+.refreshtxt {
+    color: var(--Gray-400, #98A2B3);
+    /* Text xs/Medium */
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+}
+
+::ng-deep .applyBtn {
+    display: none !important;
+   
+}
+::ng-deep.custom-height-modal .modal-dialog {
+    max-height: 80vh; 
+    height: 80vh;    
+  }
+  
+  ::ng-deep.custom-height-modal .modal-content {
+    overflow: auto; 
+    max-height: 100%; 
+  }
+:host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+    .md-drppicker.shown.drops-down-right {
+        transform-origin: 0 0;
+        width: 560px !important;
+    }
+
+    .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+        display: none;
+    }
+
+    .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+        top: 65px !important;
+    }
+
+    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+        top: 65px !important;
+        right: -475px !important;
+        left: unset !important;
+        height: 400px !important;
+    }
+
+    .md-drppicker .btn {
+        border-radius: 8px !important;
+        border: 1px solid var(--Primary-600, #00A3FF) !important;
+        background: var(--Primary-600, #00A3FF) !important;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+        color: var(--White, #FFF) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        line-height: 20px;
+        text-transform: capitalize;
+    }
+
+    .md-drppicker .ranges ul li button {
+        padding: 12px 16px;
+        width: 160px;
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        background: none;
+        border: none;
+        text-align: left;
+        cursor: pointer;
+    }
+
+    .md-drppicker td.active,
+    .md-drppicker td.active:hover {
+        background-color: #029cf4 !important;
+        border-radius: 20px !important;
+        color: var(--White, #FFF) !important;
+        text-align: center !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px;
+    }
+
+    .md-drppicker.ltr .ranges {
+        float: left;
+        margin-top: 10px !important;
+    }
+
+    .md-drppicker td.in-range {
+        background: var(--Primary-50, #EAF8FF);
+    }
+
+    .md-drppicker .ranges ul li button.active {
+        background: var(--Primary-50, #EAF8FF) !important;
+        border-radius: 8px !important;
+        color: var(--Primary-700, #009BF3);
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px !important;
+    }
+
+    table th,
+    table td {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 10px 8px !important;
+    }
+
+    .md-drppicker td.available.prev,
+    .md-drppicker th.available.prev {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker td.available.next,
+    .md-drppicker th.available.next {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    table th {
+        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+        background: transparent !important;
+        color: var(--Gray-700, #344054) !important;
+        text-align: center;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
+
+    .md-drppicker .btn.btn-default {
+        border-radius: 8px !important;
+        border: 1px solid var(--Gray-300, #D0D5DD) !important;
+        background: var(--White, #FFF) !important;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+        color: var(--Gray-700, #344054) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        line-height: 20px;
+        text-transform: capitalize;
+        margin-right: 10px !important;
+    }
+
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+}
+
+.btn-primary {
+    line-height: 18px !important;
+}
+
+.checkbox-label {
+    color: #344054;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    cursor: pointer;
+}
+
+.checklist-left {
+    .checklist-title {
+        overflow: hidden;
+        color: var(--Black, #101828) !important;
+        text-overflow: ellipsis;
+        font-size: 18px !important;
+        font-weight: 500;
+        line-height: 28px;
+    }
+
+    .checklist-text {
+        overflow: hidden;
+        color: var(--Black, #101828) !important;
+        text-overflow: ellipsis;
+        font-size: 12px !important;
+        font-weight: 400 !important;
+        line-height: 18px;
+    }
+}
+
+.section {
+    display: inline-block;
+    width: 600px;
+    white-space: nowrap;
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    color: var(--Black, #101828) !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+}
+
+.card hr {
+    width: -webkit-fill-available
+}
+
+.editablecontent {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    line-height: 24px;
+}
+
+.rotate {
+    transform: rotate(180deg);
+    transition: 1s;
+}
+
+.question-left {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.view-all {
+    padding: 12px !important;
+    border-radius: 6px !important;
+    background: var(--Primary-50, #EAF8FF) !important;
+    color: var(--Primary-500, #33B5FF) !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    line-height: 24px;
+    text-decoration-line: underline !important;
+}
+.view-questions{
+    padding: 12px !important;
+    border-radius: 6px !important;   
+    color: var(--Primary-500, #33B5FF) !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    line-height: 24px;
+    text-decoration-line: underline !important;
+}
+.iconsize{
+    width: 110px;
+    height: 110px;
+}
+.margin-left-side{
+    margin-left: -35px;
+}
+.margin-top-side{
+    margin-top: -15px;
+}
+input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 0px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-300, #D0D5DD);
+    box-shadow: none;
+    font-size: 0.8em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+
+
+/* Styles for checked state of the 'form-check-input' checkbox */
+input[type='checkbox']:checked {
+    outline: 1px solid var(--primary-600, #00A3FF);
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+/* Styles for the checked state with the specific class */
+input[type='checkbox']:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: .5em;
+    padding-left: 0px !important;
+    padding-top: 8px;
+    padding-right: 5px;
+}
+
+.uni-title {
+    color: #000 !important;
+    font-size: 17px !important;
+    font-weight: 600 !important;
+    line-height: 30px;
+}
+
+.uni-subtitle {
+    color: #000 !important;
+    font-size: 17px !important;
+    font-weight: 400 !important;
+    line-height: 28px;
+}
+
+.qa-heading {
+    color: var(--Black, #101828) !important;
+    font-size: 18px !important;
+    font-weight: 700 !important;
+    line-height: 28px;
+    list-style: none;
+}
+
+.qa-bodrer {
+    padding: 16px !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--Gray-200, #EAECF0) !important;
+    background: var(--text-primary, #FFF) !important;
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06) !important;
+}
+
+.title-ref {
+    color: var(--Gray-900, #101828) !important;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    line-height: 24px;
+}
+
+.btn-outline-primary {
+    border-radius: 8px !important;
+    border: 1px solid var(--Primary-500, #33B5FF) !important;
+    background: var(--Primary-50, #EAF8FF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    padding: calc(0.7rem + 0px) calc(1.5rem + 1px) !important;
+}
+
+.Partially {
+    color: #000;
+    font-size: 18px !important;
+    font-style: italic !important;
+    font-weight: 500;
+    line-height: 28px;
+}
+
+.task-remarks {
+    color: #000 !important;
+    font-size: 18px !important;
+    font-weight: 400 !important;
+    line-height: 28px;
+}
+
+.backButtonright {
+    border-radius: 1000px !important;
+    background: var(--text-primary, #FFF) !important;
+    padding: 12px !important;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
+    box-shadow: 0px 8.727px 11.636px -2.909px rgba(16, 24, 40, 0.08), 0px 2.909px 4.364px -1.455px rgba(16, 24, 40, 0.03) !important;
+    position: absolute;
+    top: 30px;
+    right: -10px;
+    z-index: 0;
+}
+.backButtonleft{
+    border-radius: 1000px !important;
+    background: #FFF;
+    padding: 14px !important;
+    border: var(--Gray-300, #D0D5DD);
+    box-shadow: 0px 8.727px 11.636px -2.909px rgba(16, 24, 40, 0.08), 0px 2.909px 4.364px -1.455px rgba(16, 24, 40, 0.03);
+    position: absolute;
+    top: 30px;
+    left:-20px;
+    z-index: 5;
+}
+img.img-logo {
+    width: 100%;
+    height: 400px !important;
+}
+
+.recap-img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover !important;
+}
+
+.img-src {
+    width: 30% !important;
+    height: 20% !important;
+}
+
+.dropdownselect {
+    padding: 20px 10px;
+}
+
+.dropdownbg {
+    width: Fill(372px) px;
+    height: Hug(40px) px;
+    padding: 8px 16px 8px 16px;
+    gap: 0px;
+    border-radius: 6px 0px 0px 0px;
+    justify-content: space-between;
+    opacity: 0px;
+    background: #EAF8FF;
+}
+
+.detectionright {
+    color: var(--Primary-700, #009BF3) !important;
+text-align: center;
+font-size: 14px !important;
+font-weight: 500;
+line-height: 14px;
+    float: right !important;
+    mix-blend-mode: multiply;
+}
+
+.backgroundBorder {
+    background: #EAF8FF !important;
+    color: #00A3FF !important;
+    padding: 12px;
+    border-radius: 8px;
+    font-weight: 500;
+    line-height: 10px;
+}
+.withoutbackground{
+    padding: 8px;
+    font-weight: 500;
+    line-height: 10px;
+}
+
+.snapcard{
+    display: flex;
+padding: 16px;
+flex-direction: column;
+align-items: flex-start;
+gap: 16px;
+align-self: stretch;
+border-radius: 8px;
+border: 1px solid var(--Gray-200, #EAECF0);
+background: var(--White, #FFF);
+ 
+/* Shadow/sm */
+box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+}
+.snapheader{
+    color: var(--Black, #101828);
+font-size: 16px;
+font-style: normal;
+font-weight: 600;
+line-height: 24px; /* 150% */
+}
+.snaptext{
+    color: var(--Gray-900, #101828);
+font-size: 16px !important;
+font-style: normal;
+font-weight: 600 !important;
+line-height: 24px; /* 150% */
+}
+.snaptime{
+    color: var(--Gray-900, #101828);
+font-size: 12px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 22px; 
+}
+.snapbadge{
+text-align: center;
+font-size: 14px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 20px; /* 142.857% */
+}
+.btn-resize{
+    font-size: 13px !important;
+    height: 29px !important;
+    line-height: 11px !important;
+    padding: 1px !important;
+}
+
+.preview{
+    position: absolute;
+    top: 30%;
+    left: 14%;
+}
+.w-25 {
+    width: 17% !important;
+}
+.w-40{
+    width: 40% !important;
+}
+.usage-detection{
+color: var(--Primary-700, #009BF3);
+text-overflow: ellipsis !important;
+font-size: 16px !important;
+font-style: normal;
+font-weight: 400;
+line-height: 16px; 
+width: 220Px;
+}
+
+.usage-text{
+color: var(--Gray-700, #344054);
+text-overflow: ellipsis;
+font-size: 16px;
+font-style: normal;
+font-weight: 400;
+line-height: 17px; 
+}
+.h-450px{
+    object-fit: contain !important;  
+}
+.store-title{
+    color: var(--Black, #101828) !important;
+font-size: 18px;
+font-weight: 700;
+line-height: 28px; 
+}
+
+.img-opc{
+    width:100% !important;
+    height:300px !important;
+    border-radius: 12px !important;
+}
+
+.h-900px {
+    min-height: auto !important;
+max-height: 2800px !important;
+    
+}
+
+.select-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Ensure it takes the same width as select */
+  }
+  
+  .placeholder-overlay {
+    position: absolute;
+    color: var(--Gray-500, #667085);
+    font-family: "Inter";
+    font-size: 16px !important;
+    font-style: normal;
+    font-weight: 400;
+    top: 10px; /* Adjust to align text with select component */
+    left: 15px; /* Adjust for horizontal alignment */
+    pointer-events: none; /* Allows interaction with select even if overlay is visible */
+    font-size: 1.1rem;
+    z-index: 1;
+  }
+//   .w-50{
+//     width:75% !important;
+//   }
+
+.flagclour{
+    color: red;
+}
+  .remarksTxt{
+    margin-top: 10px;
+    font-family: Inter;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 28px;
+    text-align: left;
+    white-space: pre-line;
+
+  }
+
+  .no-text-transform {
+    text-transform: none !important;
+  }
+
+  .border-val1{
+    padding: 8px 14px !important;
+    border-radius: 8px !important;
+border: 1px solid var(--Primary-500, #33B5FF) !important;
+background: var(--Primary-50, #EAF8FF) !important;
+box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+  }
+  .font-task{
+    color: var(--Primary-700, #009BF3) !important;
+font-size: 14px !important;
+font-weight: 600 !important;
+line-height: 20px; 
+text-transform: capitalize;
+  }
+
+  .border-default{
+    padding: 8px 14px !important;
+    border-radius: 8px !important;
+border: 1px solid var(--Gray-300, #D0D5DD) !important;
+background: var(--White, #FFF) !important;
+box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+  }
+
+  .font-defult-task{
+    color: var(--Gray-700, #344054) !important;
+font-size: 14px !important;
+font-weight: 600 !important;
+line-height: 20px; 
+text-transform: capitalize;
+  }
+  .nav-item .nav-link.active{
+    border:none;
+    border-radius: 6px;
+    background: var(--Primary-50, #EAF8FF);
+    padding: 8px 12px;
+ }
+ .nav-item .nav-link:hover{
+     border: none;
+ }
+ .badge-num-primary {
+     border-radius: 16px !important;
+     background: var(--Primary-50, #EAF8FF) !important;
+     color: var(--Primary-700, #009BF3) !important;
+     text-align: center;
+     font-size: 14px !important;
+     font-style: normal;
+     font-weight: 500;
+     line-height: 20px;
+     padding: 2px 10px !important;
+     mix-blend-mode: multiply !important;
+ }
+
+ .badge-num-muted {
+    border-radius: 16px !important;
+    background: var(--Primary-50, #F2F4F7) !important;
+    color: var(--Gray-700, #344054) !important;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 2px 10px !important;
+    mix-blend-mode: multiply !important;
+}
+  .text-title {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: rgba(16, 24, 40, 1) !important;
+    line-height: 24px;
+  }    
+  .title-description{
+    font-size: 14px !important;
+font-weight: 400;
+color: rgba(16, 24, 40, 1) !important;
+line-height: 24px !important;
+  }
+
+  .border-primary1{
+    border-radius: 8px !important;
+    border: 1px solid var(--Primary-600, #00A3FF) !important;
+    background: var(--Primary-600, #00A3FF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    color: var(--White, #FFF) !important;
+font-size: 16px !important;
+font-weight: 600;
+line-height: 24px;
+text-transform: capitalize;
+  }
+
+.scroll-y{
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+.totalsize{
+    width: 18%;
+}
+.view-detail{
+    color: var(--Primary-700, #009BF3) !important;
+font-size: 14px !important;
+font-weight: 600 !important;
+line-height: 20px;
+text-transform: capitalize;
+}
+.left-sidebar {
+    position: sticky;
+    top: 0;
+    // height: 100vh; 
+    width: 33%; 
+    overflow-y: auto; 
+}
+
+.main-container {
+    display: flex;
+    align-items: flex-start;
+}
+
+.right-content {
+    flex-grow: 1; 
+    width: 67%; 
+}
+
+// ::ng-deep.custom-modal-height .modal-dialog {
+//     height: 90%; 
+//   }
+  
+//   ::ng-deep.custom-modal-height .modal-content {
+//     height: 100%;
+//     overflow: auto; 
+//   }
+
+
+.bordercolor{
+    border: 1px solid var(--Gray-300, #D0D5DD) !important;
+}
+.toastcard{
+    border-radius: 8px;
+background: var(--Primary-50, #EAF8FF);
+// display: flex;
+padding: 8px 16px;
+// justify-content: space-between;
+// align-items: center;
+// align-self: stretch;
+}
+.toasttext{
+    overflow: hidden;
+color: var(--Primary-700, #009BF3);
+text-overflow: ellipsis;
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px; /* 150% */
+}
+.btn-outline{
+    border-radius: 8px;
+border: 1px solid var(--Gray-300, #D0D5DD);
+background: var(--White, #FFF);
+box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.refreshtext{
+    color: var(--Gray-700, #344054);
+font-size: 14px;
+font-style: normal;
+font-weight: 600;
+line-height: 20px; /* 142.857% */
+text-transform: capitalize;
+}
+
+
+.collage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+  height: 450px;
+  overflow-y: auto;
+  grid-auto-rows: auto;
+
+}
+
+
+
+
+.collage-tile {
+  width: 100%;
+  height: 100%;
+//   overflow: hidden;
+}
+
+.collage-tile img {
+  width: 100%;
+  height: 100% !important;
+//   object-fit: cover;
+  border-radius: 6px;
+}
+
+::ng-deep.my-own-styles .modal-dialog {
+   max-width:600px !important;
+    // height: 80vh;    
+  }
+
+.bgDanger {
+    color: var(--Error-700, #B42318);
+    text-align: center;
+    /* Text xs/Medium */
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    border-radius: 16px;
+    background: var(--Error-50, #FEF3F2);
+}
+
+.bgSuccess {
+    color: var(--Success-700, #027A48);
+    text-align: center;
+    /* Text xs/Medium */
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    border-radius: 16px;
+    background: var(--Success-50, #ECFDF3);
+}
+
+.openclosesnapIMG {
+    width: 100% !important;
+    height: 205px !important;
+    border-radius: 30px !important;
+}
+
+.openclosesnapLiveIMG {
+    width: 100% !important;
+    height: 400px !important;
+    border-radius: 30px !important;
+}
+
+.backgroundGray{
+    background: #F2F4F7 !important;
+}
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.7s ease;
+  overflow: hidden;
+}
+
+/* Hidden text by default */
+.icon-btn .btn-text {
+  max-width: 0;
+  opacity: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: all 0.7s ease;
+  color: #344054;
+  font-size: 14px;
+}
+
+/* On hover, expand and show text */
+.icon-btn:hover .btn-text {
+  max-width: 120px; /* enough to fit the text */
+  opacity: 1;
+  margin-left: 6px;
+}
+
+.video-wrapper {
+  width: 100%;
+  height: 450px;
+  background: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: all 20s ease;
+  }
+
+  &.fullscreen-active {
+    width: 100vw !important;
+    height: 100vh !important;
+    background: black !important;
+    overflow: hidden;
+
+    video {
+      width: 100vw !important;
+      height: 100vh !important;
+      object-fit: contain !important;
+      transform: none !important;
+      background: black !important;
+    }
+  }
+
+  // Ensure proper reset when not in fullscreen - override any lingering styles
+  &:not(.fullscreen-active) {
+    width: 100%;
+    height: 450px;
+    
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.badge.scoreBadge {
+  background: #eaecf5;
+  color: #363f72;
+}
+
+.heightImage {
+    height:218px !important
+}