holygrail2 1.1.16 → 1.1.18

package/dist/style.css

@@ -1,7 +1,7 @@
 
 /*
   Paquete: holygrail2
-  Versión: 1.1.15
+  Versión: 1.1.17
 */
 @charset "UTF-8";
 *,
@@ -207,6 +207,68 @@ button {
     transform: rotate(-360deg);
   }
 }
+.duration-50 {
+  animation-duration: 50ms;
+}
+
+.duration-150 {
+  animation-duration: 150ms;
+}
+
+.duration-300 {
+  animation-duration: 300ms;
+}
+
+.duration-400 {
+  animation-duration: 400ms;
+}
+
+.duration-500 {
+  animation-duration: 500ms;
+}
+
+.duration-700 {
+  animation-duration: 700ms;
+}
+
+.duration-800 {
+  animation-duration: 800ms;
+}
+
+.duration-1000 {
+  animation-duration: 1000ms;
+}
+
+.slide-in {
+  -webkit-animation: slide-right 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slide-right 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+.slide-out {
+  -webkit-animation: slide-left 300ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: slide-left 300ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+
+.fade-in {
+  -webkit-animation: fade-in 300ms ease-in-out both;
+  animation: fade-in 300ms ease-in-out both;
+}
+
+.fade-out {
+  -webkit-animation: fade-out 150ms ease-in-out both;
+  animation: fade-out 150ms ease-in-out both;
+}
+
+.expand-top {
+  -webkit-animation: scale-up-top 700ms ease-in-out both;
+  animation: scale-up-top 700ms ease-in-out both;
+}
+
+.collapse-top {
+  -webkit-animation: scale-down-top 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: scale-down-top 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1554,7 +1616,7 @@ button {
   width: 48px;
   height: 48px;
   padding: 10px;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   box-sizing: border-box;
   border-radius: 50%;
 }
@@ -1586,7 +1648,7 @@ svg-icon.ico-success path {
   fill: #76ae4a;
 }
 svg-icon.ico-feel path {
-  fill: #c94c07;
+  fill: #a9a9a9;
 }
 
 .icon-white svg-icon path {
@@ -1612,7 +1674,7 @@ svg-icon.ico-feel path {
 }
 
 .has-feel svg path {
-  fill: #c94c07;
+  fill: #a9a9a9;
 }
 
 .has-success svg path {
@@ -1628,7 +1690,7 @@ svg-icon.ico-feel path {
   align-content: center;
   justify-content: center;
   align-items: center;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
   flex: 0 0 40px;
 }
 .ico-ball .ico-count {
@@ -2270,7 +2332,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 3/4;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_3-4::marker {
   display: none;
@@ -2285,7 +2347,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 2/3;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_2-3::marker {
   display: none;
@@ -2300,7 +2362,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 1/1;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_1-1::marker {
   display: none;
@@ -2315,7 +2377,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 2/1;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_2-1::marker {
   display: none;
@@ -2330,7 +2392,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 4/3;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_4-3::marker {
   display: none;
@@ -2345,7 +2407,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 3/2;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_3-2::marker {
   display: none;
@@ -2360,7 +2422,7 @@ svg-icon.ico-pre {
   content: "";
   width: 100%;
   aspect-ratio: 16/9;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .sk-load_16-9::marker {
   display: none;
@@ -4481,11 +4543,11 @@ mark {
 }
 
 .c-dark-grey {
-  color: #8e8e8e;
+  color: #666666;
 }
 
 .c-middle-grey {
-  color: #e3e3e3;
+  color: #a9a9a9;
 }
 
 .c-light-grey {
@@ -4497,7 +4559,7 @@ mark {
 }
 
 .second-color {
-  color: #8e8e8e;
+  color: #666666;
 }
 
 .is-info {
@@ -4529,15 +4591,15 @@ mark {
 }
 
 .c-feel {
-  color: #fb9962;
+  color: #000000;
 }
 
 .c-feel-dark {
-  color: #c94c07;
+  color: #a9a9a9;
 }
 
 .c-feel-light {
-  color: #fccbb0;
+  color: #f0f0f0;
 }
 
 .c-tier-silver {
@@ -4545,11 +4607,11 @@ mark {
 }
 
 .c-tier-platinum {
-  color: #9dbddc;
+  color: #99b0c5;
 }
 
 .c-tier-gold {
-  color: #e0b279;
+  color: #dcbe99;
 }
 
 .c-limited {
@@ -4570,19 +4632,19 @@ mark {
 }
 
 .bg-feel-light {
-  background-color: #fccbb0;
+  background-color: #f0f0f0;
 }
 
 .bg-feel-dark {
-  background-color: #c94c07;
+  background-color: #a9a9a9;
 }
 
 .bg-dark-grey {
-  background-color: #8e8e8e;
+  background-color: #666666;
 }
 
 .bg-middle-grey {
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 
 .bg-light-grey {
@@ -4632,7 +4694,7 @@ mark {
 }
 
 .bg-feel {
-  background-color: #fb9962;
+  background-color: #000000;
 }
 
 .bg-dark {
@@ -4645,11 +4707,11 @@ mark {
 }
 
 .bg-tier-platinum {
-  background-color: #9dbddc;
+  background-color: #99b0c5;
 }
 
 .bg-tier-gold {
-  background-color: #e0b279;
+  background-color: #dcbe99;
 }
 
 .bg-cover {
@@ -4777,7 +4839,7 @@ b {
 hr {
   width: 100%;
   margin: 0;
-  border-top: 1px solid #e3e3e3;
+  border-top: 1px solid #a9a9a9;
   border-bottom: 1px solid transparent;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
@@ -4850,10 +4912,10 @@ hr {
 }
 
 .hg-status-d {
-  color: #8e8e8e;
+  color: #666666;
 }
 .hg-status-d::before {
-  background-color: #8e8e8e;
+  background-color: #666666;
 }
 
 .block-right {
@@ -5012,7 +5074,7 @@ strong {
 }
 
 .bb-line {
-  border-bottom: var(--line-width) solid #e3e3e3;
+  border-bottom: var(--line-width) solid #a9a9a9;
 }
 
 .border-1 {
@@ -5020,7 +5082,7 @@ strong {
 }
 
 .border-1-grey {
-  border: var(--line-width) solid #e3e3e3;
+  border: var(--line-width) solid #a9a9a9;
 }
 
 .border-1-light {
@@ -5161,12 +5223,12 @@ strong {
   background-color: #f0f0f0;
 }
 .ov-custom::-webkit-scrollbar-thumb {
-  background-color: #8e8e8e;
+  background-color: #666666;
   border-radius: 16px;
   border: 3px solid #fff;
 }
 .ov-custom::-webkit-scrollbar-thumb:hover {
-  background-color: #8e8e8e;
+  background-color: #666666;
   border: 2px solid #f0f0f0;
 }
 .ov-custom::-webkit-scrollbar-button {
@@ -5484,26 +5546,26 @@ strong {
   }
 }
 
-.min-scrollcustom {
+.scrollcustom {
   overflow: auto;
   /* Track */
   /* Handle */
 }
-.min-scrollcustom::-webkit-scrollbar {
+.scrollcustom::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }
-.min-scrollcustom::-webkit-scrollbar-track {
+.scrollcustom::-webkit-scrollbar-track {
   background: #fff;
   -webkit-border-radius: 10px;
   border-radius: 0;
 }
-.min-scrollcustom::-webkit-scrollbar-thumb {
+.scrollcustom::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #999;
 }
-.min-scrollcustom::-webkit-scrollbar-thumb:window-inactive {
+.scrollcustom::-webkit-scrollbar-thumb:window-inactive {
   background: #999;
 }
 
@@ -5560,7 +5622,7 @@ strong {
   height: 5px;
 }
 .min-scrollcustom-x.has-dark::-webkit-scrollbar-track {
-  background: #e3e3e3;
+  background: #a9a9a9;
   -webkit-border-radius: 10px;
   border-radius: 0;
 }
@@ -5618,6 +5680,10 @@ strong {
   text-decoration: line-through;
 }
 
+.gap-16 {
+  gap: 16px;
+}
+
 .guide section {
   padding-bottom: 20px;
 }
@@ -6009,7 +6075,7 @@ strong {
   padding: 24px 16px;
   margin-top: 16px;
   text-align: center;
-  background-color: #fb9962;
+  background-color: #000000;
   color: #000;
 }
 
@@ -6045,7 +6111,7 @@ button {
   border: none;
   white-space: nowrap;
   cursor: pointer;
-  padding: 12px;
+  padding: 16px 8px;
   background-color: transparent;
   height: 40px;
   font-family: arial, sans-serif;
@@ -6055,13 +6121,14 @@ button {
   text-decoration: none;
   opacity: 0.6;
   outline: none;
+  cursor: pointer;
 }
 .btn[disabled], .btn:disabled, .btn.disabled {
   pointer-events: none;
   filter: grayscale(1);
-  background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  background-color: #f0f0f0;
+  border: 1px solid #f0f0f0;
+  color: #666666;
   opacity: 1;
   cursor: not-allowed;
 }
@@ -6075,26 +6142,23 @@ button {
 }
 .has-light .btn:focus, .has-light .btn.focus, .has-light .btn:hover, .has-light .btn.hover, .has-light .btn:visited, .has-light .btn:active, .has-light .btn.active {
   color: #fff;
-  background-color: #e3e3e3;
-  border-color: #e3e3e3;
+  background-color: #a9a9a9;
+  border-color: #a9a9a9;
 }
 .has-light .btn[disabled], .has-light .btn:disabled, .has-light .btn.disabled {
   cursor: default;
   pointer-events: none;
   filter: grayscale(1);
-  background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  background-color: #f0f0f0;
+  border: 1px solid #f0f0f0;
+  color: #666666;
   opacity: 1;
 }
 .btn.btn-separate {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px;
-}
-.btn.btn-separate svg {
-  margin-left: 8px;
+  padding: 16px 32px;
 }
 .btn.btn-separate.btn--mini, .btn.btn-separate.btn--small {
   width: max-content;
@@ -6102,7 +6166,7 @@ button {
 .btn.btn-feel-invert {
   color: #000;
   background-color: transparent;
-  border: 1px solid #fb9962;
+  border: 1px solid #000000;
 }
 .btn.btn-feel-invert svg g {
   fill: #000;
@@ -6114,12 +6178,12 @@ button {
 .btn.btn-feel-invert:focus, .btn.btn-feel-invert.focus, .btn.btn-feel-invert:hover, .btn.btn-feel-invert.hover, .btn.btn-feel-invert:active, .btn.btn-feel-invert.active {
   color: #000;
   opacity: 1;
-  border-color: rgba(251, 153, 98, 0.5);
+  border-color: rgba(0, 0, 0, 0.5);
 }
 .btn.btn-feel-invert[disabled], .btn.btn-feel-invert:disabled, .btn.btn-feel-invert.disabled {
   opacity: 1;
   border-color: #f0f0f0;
-  color: #8e8e8e;
+  color: #666666;
   cursor: default;
 }
 .btn.has-ico-center {
@@ -6263,26 +6327,26 @@ button {
 }
 .btn-primary:focus, .btn-primary.focus, .btn-primary:hover, .btn-primary.hover, .btn-primary:active, .btn-primary.active {
   color: #fff;
-  background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  background-color: #666666;
+  border: 1px solid #666666;
   opacity: 1;
   cursor: pointer;
 }
 .btn-primary[disabled], .btn-primary:disabled, .btn-primary.disabled {
-  background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  background-color: #a9a9a9;
+  border: 1px solid #a9a9a9;
+  color: #666666;
   opacity: 1;
 }
 .btn-primary[disabled] svg g, .btn-primary:disabled svg g, .btn-primary.disabled svg g {
-  fill: #8e8e8e;
-  stroke: #8e8e8e;
+  fill: #666666;
+  stroke: #666666;
 }
 .btn-primary[disabled] svg circle, .btn-primary:disabled svg circle, .btn-primary.disabled svg circle {
-  stroke: #8e8e8e;
+  stroke: #666666;
 }
 .btn-primary[disabled] svg path, .btn-primary:disabled svg path, .btn-primary.disabled svg path {
-  fill: #8e8e8e;
+  fill: #666666;
 }
 .has-light .btn-primary {
   color: #000;
@@ -6301,8 +6365,8 @@ button {
 }
 .has-light .btn-primary:focus, .has-light .btn-primary.focus, .has-light .btn-primary:hover, .has-light .btn-primary.hover, .has-light .btn-primary:active, .has-light .btn-primary.active {
   color: #fff;
-  background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  background-color: #666666;
+  border: 1px solid #666666;
   opacity: 1;
 }
 .has-light .btn-primary:focus svg g, .has-light .btn-primary.focus svg g, .has-light .btn-primary:hover svg g, .has-light .btn-primary.hover svg g, .has-light .btn-primary:active svg g, .has-light .btn-primary.active svg g {
@@ -6316,9 +6380,9 @@ button {
   fill: #fff;
 }
 .has-light .btn-primary[disabled], .has-light .btn-primary:disabled, .has-light .btn-primary.disabled {
-  background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  background-color: #a9a9a9;
+  border: 1px solid #a9a9a9;
+  color: #666666;
   opacity: 1;
 }
 
@@ -6340,24 +6404,24 @@ button {
 .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary.hover, .btn-secondary:active, .btn-secondary.active {
   color: #000;
   background-color: #fff;
-  border: 1px solid #8e8e8e;
+  border: 1px solid #666666;
   opacity: 1;
 }
 .btn-secondary[disabled], .btn-secondary:disabled, .btn-secondary.disabled {
   background-color: #fff;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  border: 1px solid #a9a9a9;
+  color: #666666;
   opacity: 1;
 }
 .btn-secondary[disabled] svg g, .btn-secondary:disabled svg g, .btn-secondary.disabled svg g {
-  fill: #e3e3e3;
-  stroke: #e3e3e3;
+  fill: #a9a9a9;
+  stroke: #a9a9a9;
 }
 .btn-secondary[disabled] svg circle, .btn-secondary:disabled svg circle, .btn-secondary.disabled svg circle {
-  stroke: #e3e3e3;
+  stroke: #a9a9a9;
 }
 .btn-secondary[disabled] svg path, .btn-secondary:disabled svg path, .btn-secondary.disabled svg path {
-  fill: #e3e3e3;
+  fill: #a9a9a9;
 }
 .has-light .btn-secondary {
   color: #fff;
@@ -6376,8 +6440,8 @@ button {
 }
 .has-light .btn-secondary:focus, .has-light .btn-secondary.focus, .has-light .btn-secondary:hover, .has-light .btn-secondary.hover, .has-light .btn-secondary:active, .has-light .btn-secondary.active {
   color: #fff;
-  background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  background-color: #666666;
+  border: 1px solid #666666;
   opacity: 1;
 }
 .has-light .btn-secondary:focus svg g, .has-light .btn-secondary.focus svg g, .has-light .btn-secondary:hover svg g, .has-light .btn-secondary.hover svg g, .has-light .btn-secondary:active svg g, .has-light .btn-secondary.active svg g {
@@ -6392,8 +6456,8 @@ button {
 }
 .has-light .btn-secondary[disabled], .has-light .btn-secondary:disabled, .has-light .btn-secondary.disabled {
   background-color: transparent;
-  border: 1px solid #8e8e8e;
-  color: #8e8e8e;
+  border: 1px solid #666666;
+  color: #666666;
   opacity: 1;
 }
 
@@ -6415,7 +6479,7 @@ button {
 .btn-phantom:focus, .btn-phantom.focus, .btn-phantom:hover, .btn-phantom.hover, .btn-phantom:active, .btn-phantom.active {
   color: #000;
   background-color: transparent;
-  border: 1px solid #8e8e8e;
+  border: 1px solid #666666;
   opacity: 1;
 }
 
@@ -6438,7 +6502,7 @@ button {
 
 .btn-primary-feel {
   color: #000;
-  background-color: #fb9962;
+  background-color: #000000;
 }
 .btn-primary-feel svg g {
   fill: #000;
@@ -6453,20 +6517,20 @@ button {
 .btn-primary-feel:focus, .btn-primary-feel.focus, .btn-primary-feel:hover, .btn-primary-feel.hover, .btn-primary-feel:active, .btn-primary-feel.active {
   color: #000;
   opacity: 1;
-  background-color: rgba(251, 153, 98, 0.6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .btn-primary-feel:disabled, .btn-primary-feel[disabled], .btn-primary-feel.disabled {
   pointer-events: none;
   cursor: default;
-  border: 1px solid #e3e3e3 !important;
-  color: #8e8e8e !important;
-  background-color: #e3e3e3 !important;
+  border: 1px solid #a9a9a9 !important;
+  color: #666666 !important;
+  background-color: #a9a9a9 !important;
   filter: none;
   opacity: 1;
 }
 .btn-primary-feel:disabled svg-icon, .btn-primary-feel[disabled] svg-icon, .btn-primary-feel.disabled svg-icon {
-  background-color: #e3e3e3 !important;
-  border: 1px solid #e3e3e3 !important;
+  background-color: #a9a9a9 !important;
+  border: 1px solid #a9a9a9 !important;
 }
 
 .btn-secondary-feel {
@@ -6484,21 +6548,21 @@ button {
 .btn-secondary-feel:focus, .btn-secondary-feel.focus, .btn-secondary-feel:hover, .btn-secondary-feel.hover, .btn-secondary-feel:active, .btn-secondary-feel.active {
   opacity: 1;
   color: #000;
-  border: 1px solid #8e8e8e;
+  border: 1px solid #666666;
   background-color: #fff;
 }
 .btn-secondary-feel:disabled, .btn-secondary-feel[disabled], .btn-secondary-feel.disabled {
   pointer-events: none;
   cursor: default;
-  border: 1px solid #e3e3e3 !important;
-  color: #8e8e8e !important;
-  background-color: #e3e3e3 !important;
+  border: 1px solid #a9a9a9 !important;
+  color: #666666 !important;
+  background-color: #a9a9a9 !important;
   filter: none;
   opacity: 1;
 }
 .btn-secondary-feel:disabled svg-icon, .btn-secondary-feel[disabled] svg-icon, .btn-secondary-feel.disabled svg-icon {
-  background-color: #e3e3e3 !important;
-  border: 1px solid #e3e3e3 !important;
+  background-color: #a9a9a9 !important;
+  border: 1px solid #a9a9a9 !important;
 }
 .has-light .btn-secondary-feel {
   color: #fff;
@@ -6508,8 +6572,8 @@ button {
 .has-light .btn-secondary-feel:focus, .has-light .btn-secondary-feel.focus, .has-light .btn-secondary-feel:hover, .has-light .btn-secondary-feel.hover, .has-light .btn-secondary-feel:active, .has-light .btn-secondary-feel.active {
   opacity: 1;
   color: #fff;
-  border: 1px solid #8e8e8e;
-  background-color: #8e8e8e;
+  border: 1px solid #666666;
+  background-color: #666666;
 }
 
 .btn-tertiary {
@@ -6534,7 +6598,7 @@ button {
   pointer-events: none;
   cursor: default;
   border: 0 solid transparent !important;
-  color: #8e8e8e !important;
+  color: #666666 !important;
   background-color: transparent !important;
   filter: none;
   opacity: 1;
@@ -6572,7 +6636,7 @@ button {
 .btn-invert-light {
   color: #000;
   background-color: transparent;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
 }
 .btn-invert-light:focus, .btn-invert-light.focus, .btn-invert-light:hover, .btn-invert-light:active, .btn-invert-light.active {
   opacity: 0.6;
@@ -6667,8 +6731,7 @@ button {
   justify-content: center;
   align-items: center;
   border-radius: 0;
-  margin-top: -3px;
-  margin-right: 12px;
+  margin-top: -2px;
   top: 0;
   left: 1px;
 }
@@ -6681,7 +6744,7 @@ button {
   opacity: 1;
 }
 .btn-social:disabled svg path, .btn-social[disabled] svg path, .btn-social.disabled svg path {
-  fill: #8e8e8e;
+  fill: #666666;
 }
 
 .btn-google,
@@ -6743,8 +6806,12 @@ button {
 .has-light .btn-apple:active,
 .has-light .btn-apple.active {
   opacity: 1;
-  background-color: #8e8e8e;
-  border: 1px solid #8e8e8e;
+  background-color: #666666;
+  border: 1px solid #666666;
+}
+.btn-apple svg-icon path,
+.has-light .btn-apple svg-icon path {
+  fill: #fff;
 }
 
 .btn-apple-secondary,
@@ -6763,7 +6830,7 @@ button {
 .has-light .btn-apple-secondary.active {
   opacity: 1;
   background-color: #fff;
-  border: 1px solid #8e8e8e;
+  border: 1px solid #666666;
 }
 
 .btn-naver,
@@ -6785,6 +6852,10 @@ button {
   background-color: #03cf5d;
   border: 1px solid #03cf5d;
 }
+.btn-naver svg-icon path,
+.has-light .btn-naver svg-icon path {
+  fill: #fff;
+}
 
 .btn-wechat,
 .has-light .btn-wechat {
@@ -6805,6 +6876,10 @@ button {
   background-color: #03cf5d;
   border: 1px solid #2dc100;
 }
+.btn-wechat svg-icon path,
+.has-light .btn-wechat svg-icon path {
+  fill: #fff;
+}
 
 .btn-block {
   display: block;
@@ -6895,7 +6970,7 @@ button {
   transform: translateY(40px);
 }
 .btn-anim:disabled, .btn-anim[disabled], .btn-anim.disabled {
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
   border-color: transparent;
   opacity: 1;
 }
@@ -6937,7 +7012,7 @@ button {
   color: #fff;
 }
 .btn-social-login.btn-outline-login {
-  border: #e3e3e3 solid 1px;
+  border: #a9a9a9 solid 1px;
 }
 .btn-social-login.disabled {
   filter: invert(1);
@@ -6950,37 +7025,37 @@ button {
 }
 
 .btn-feel {
-  background-color: #fb9962;
-  border: 1px solid #fb9962;
+  background-color: #000000;
+  border: 1px solid #000000;
   color: #000;
 }
 .btn-feel:hover, .btn-feel.hover, .btn-feel:focus, .btn-feel.focus {
-  background-color: #fccbb0;
-  border: 1px solid #fccbb0;
+  background-color: #f0f0f0;
+  border: 1px solid #f0f0f0;
   color: #000;
   opacity: 1;
 }
 .btn-feel[disabled], .btn-feel:disabled, .btn-feel.disabled {
-  background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  background-color: #a9a9a9;
+  border: 1px solid #a9a9a9;
+  color: #666666;
   opacity: 1;
 }
 .has-light .btn-feel {
-  background-color: #fb9962;
-  border: 1px solid #fb9962;
+  background-color: #000000;
+  border: 1px solid #000000;
   color: #000;
 }
 .has-light .btn-feel:hover, .has-light .btn-feel.hover, .has-light .btn-feel:focus, .has-light .btn-feel.focus {
-  background-color: #fccbb0;
-  border: 1px solid #fccbb0;
+  background-color: #f0f0f0;
+  border: 1px solid #f0f0f0;
   color: #000;
   opacity: 1;
 }
 .has-light .btn-feel[disabled], .has-light .btn-feel:disabled, .has-light .btn-feel.disabled {
-  background-color: #e3e3e3;
-  border: 1px solid #e3e3e3;
-  color: #8e8e8e;
+  background-color: #a9a9a9;
+  border: 1px solid #a9a9a9;
+  color: #666666;
   opacity: 1;
 }
 
@@ -6989,7 +7064,7 @@ button {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 12px;
+  padding: 16px 32px;
   border: none;
   background-color: rgba(0, 0, 0, 0.4);
   color: #fff;
@@ -7058,14 +7133,14 @@ button {
   border: 1px solid #fff;
 }
 .has-light .btn-primary-feel:hover, .has-light .btn-primary-feel.hover, .has-light .btn-primary-feel:focus, .has-light .btn-primary-feel.focus {
-  background-color: rgba(251, 153, 98, 0.6);
-  color: #8e8e8e;
-  border-color: rgba(251, 153, 98, 0.6);
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #666666;
+  border-color: rgba(0, 0, 0, 0.6);
 }
 .has-light .btn-primary-feel[disabled], .has-light .btn-primary-feel:disabled, .has-light .btn-primary-feel.disabled {
   opacity: 1;
   background-color: #f0f0f0;
-  color: #8e8e8e;
+  color: #666666;
   cursor: default;
 }
 .has-light .btn-google svg path {
@@ -7607,7 +7682,7 @@ button {
 .checkbox-card .checkbox-card-label {
   border-radius: 0;
   overflow: hidden;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   background: #fff;
   flex-direction: column;
   display: flex;
@@ -7629,7 +7704,7 @@ button {
   color: #fff;
 }
 .has-light .checkbox-card .checkbox-card-label {
-  border: 1px solid #8e8e8e;
+  border: 1px solid #666666;
   background: #000;
 }
 .has-light .checkbox-card [type=radio]:checked + .checkbox-card-label, .has-light .checkbox-card :hover + .checkbox-card-label {
@@ -7758,7 +7833,7 @@ fieldset[disabled] .form-control {
 }
 
 input::input-placeholder {
-  color: #e3e3e3;
+  color: #a9a9a9;
   transform: translate3d(0, 0, 0);
 }
 
@@ -7995,12 +8070,12 @@ input::input-placeholder {
   font-family: arial, sans-serif;
   font-weight: 500;
   pointer-events: none;
-  border-color: #e3e3e3;
+  border-color: #a9a9a9;
   padding: 24px 0;
 }
 
 .info-text {
-  color: #8e8e8e;
+  color: #666666;
   margin-top: 4px;
   width: 100%;
   float: left;
@@ -8058,13 +8133,13 @@ input::input-placeholder {
 }
 .form-input-label-2 .input-text,
 .error-zone .input-text {
-  color: #8e8e8e;
+  color: #666666;
   margin-top: 4px;
   line-height: 1;
 }
 .form-input-label-2 .info-text,
 .error-zone .info-text {
-  color: #8e8e8e;
+  color: #666666;
   margin-top: 4px;
   width: auto;
   position: absolute;
@@ -8118,7 +8193,7 @@ input::input-placeholder {
   padding-top: 1px;
   padding-bottom: calc(14px / 3);
   font-size: 9px;
-  color: #8e8e8e;
+  color: #666666;
 }
 .form-input-label-2 input:focus,
 .error-zone input:focus {
@@ -8130,7 +8205,7 @@ input::input-placeholder {
   padding-top: 1px;
   padding-bottom: calc(14px / 3);
   font-size: 9px;
-  color: #8e8e8e;
+  color: #666666;
 }
 .form-input-label-2 input::-webkit-list-button, .form-input-label-2 input::-webkit-calendar-picker-indicator,
 .error-zone input::-webkit-list-button,
@@ -8167,7 +8242,7 @@ input::input-placeholder {
 }
 .form-input-label-2 input:-ms-input-placeholder,
 .error-zone input:-ms-input-placeholder {
-  color: #8e8e8e !important;
+  color: #666666 !important;
 }
 .form-input-label-2 input,
 .error-zone input {
@@ -8454,7 +8529,7 @@ input::input-placeholder {
     display: none;
   }
   .formlabel input:-ms-input-placeholder {
-    color: #8e8e8e;
+    color: #666666;
   }
 }
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -8462,7 +8537,7 @@ input::input-placeholder {
     display: none;
   }
   .formlabel input:-ms-input-placeholder {
-    color: #8e8e8e !important;
+    color: #666666 !important;
   }
 }
 a:hover {
@@ -8500,7 +8575,7 @@ a:hover {
   z-index: 1;
   cursor: pointer;
   border-radius: 50%;
-  border: var(--line-width) solid #e3e3e3;
+  border: var(--line-width) solid #a9a9a9;
 }
 
 .inner-button {
@@ -8542,19 +8617,19 @@ a:hover {
   transition: background-size 0.4s;
 }
 .c-dark-grey .link-line {
-  background-image: linear-gradient(transparent calc(100% - 1px), #8e8e8e 10px);
+  background-image: linear-gradient(transparent calc(100% - 1px), #666666 10px);
 }
 .link-line:hover {
   opacity: 0.6;
 }
 .link-line.c-feel-dark {
-  background-image: linear-gradient(transparent calc(100% - 1px), #c94c07 10px);
+  background-image: linear-gradient(transparent calc(100% - 1px), #a9a9a9 10px);
 }
 .link-line.c-dark-grey {
-  background-image: linear-gradient(transparent calc(100% - 1px), #8e8e8e 10px);
+  background-image: linear-gradient(transparent calc(100% - 1px), #666666 10px);
 }
 .link-line.c-feel {
-  background-image: linear-gradient(transparent calc(100% - 1px), #fb9962 10px);
+  background-image: linear-gradient(transparent calc(100% - 1px), #000000 10px);
 }
 .link-line.is-error, .link-line.c-error {
   background-image: linear-gradient(transparent calc(100% - 1px), #b40016 10px);
@@ -8830,7 +8905,7 @@ ul.list-mini > li::after {
 .list-box {
   display: table-cell;
   box-sizing: border-box;
-  border: 1px solid #8e8e8e;
+  border: 1px solid #666666;
   transition: all 0.2s ease;
   opacity: 0.5;
   left: -1px;
@@ -8920,7 +8995,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   width: 100%;
   height: 8px;
   border-radius: 0;
-  background-color: #e3e3e3;
+  background-color: #f0f0f0;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -8958,7 +9033,8 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   align-items: center;
   vertical-align: top;
   cursor: pointer;
-  padding: 0 20px 8px;
+  padding: 0 20px 0;
+  line-height: 1;
 }
 .tabs li.is-active a, .tabs li.is-active span, .tabs li.is-active .tab {
   position: relative;
@@ -8969,13 +9045,13 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   width: 4px;
   height: 4px;
   background-color: #000;
-  bottom: 0;
+  bottom: -8px;
 }
 .tabs li::after {
   display: none;
 }
 .tabs.tabs-resetfirst ul li:first-child a {
-  padding: 0 20px 8px 0;
+  padding: 0 20px 0 0;
 }
 .tabs.is-center ul {
   justify-content: center;
@@ -9110,7 +9186,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
 }
 .tabs-gray a,
 .tabs-gray span {
-  color: #8e8e8e;
+  color: #666666;
   border-color: #f0f0f0;
 }
 
@@ -9135,7 +9211,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   right: 0;
   width: 1px;
   height: 20px;
-  background-color: #e3e3e3;
+  background-color: #a9a9a9;
 }
 .tabs-mini li.is-active a {
   opacity: 1;
@@ -9147,7 +9223,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   max-width: 450px;
 }
 .tabs-mini.tabs-map ul {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
 }
 
 .tag-warning {
@@ -9183,7 +9259,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
 }
 
 .tag-feel {
-  background-color: #fb9962;
+  background-color: #000000;
   color: #000;
   padding: 6px;
   line-height: 1;
@@ -9212,7 +9288,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   transform: translateY(100%) translateY(10px);
   right: calc(50% - 16px);
   background-color: #fff;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   position: absolute;
   width: max-content;
   max-width: 320px;
@@ -9226,8 +9302,8 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   top: -6px;
   right: 10px;
   position: absolute;
-  border-top: 1px solid #e3e3e3;
-  border-left: 1px solid #e3e3e3;
+  border-top: 1px solid #a9a9a9;
+  border-left: 1px solid #a9a9a9;
   width: 10px;
   height: 10px;
   background: #fff;
@@ -9283,7 +9359,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   transform: translateY(100%) translateY(10px);
   right: -8px;
   background-color: #fff;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   position: absolute;
   width: 240px;
   z-index: 10;
@@ -9296,8 +9372,8 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   top: -6px;
   right: 10px;
   position: absolute;
-  border-top: 1px solid #e3e3e3;
-  border-left: 1px solid #e3e3e3;
+  border-top: 1px solid #a9a9a9;
+  border-left: 1px solid #a9a9a9;
   width: 10px;
   height: 10px;
   background: #fff;
@@ -9326,7 +9402,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   top: 36px;
   right: 0;
   background-color: #fff;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   position: absolute;
   width: 100%;
   max-width: 327px;
@@ -9338,8 +9414,8 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   right: 3px;
   content: "";
   position: absolute;
-  border-top: 1px solid #e3e3e3;
-  border-left: 1px solid #e3e3e3;
+  border-top: 1px solid #a9a9a9;
+  border-left: 1px solid #a9a9a9;
   width: 10px;
   height: 10px;
   background: #fff;
@@ -9456,7 +9532,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   display: inline-flex;
   justify-content: center;
   white-space: nowrap;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
 }
 
 .ico-round-sm {
@@ -9467,7 +9543,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   display: inline-flex;
   justify-content: center;
   white-space: nowrap;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
 }
 
 .checkbox-ico {
@@ -9476,7 +9552,7 @@ ul.list-breadcrumb li.list-breadcrumb-divider {
   width: 24px;
   height: 24px;
   left: auto;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   outline: 0;
   vertical-align: top;
   margin: 0;
@@ -9687,7 +9763,7 @@ ul.list-clear li.list-box:last-child {
   width: 100%;
 }
 .color-wrap button .color-selector::before {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   content: "";
   height: 100%;
   left: 0;
@@ -9699,7 +9775,7 @@ ul.list-clear li.list-box:last-child {
 }
 .color-wrap button .color-selector img,
 .color-wrap button .color-selector .color-plain {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   height: 10px;
   left: 50%;
   margin-left: -5px;
@@ -9710,7 +9786,7 @@ ul.list-clear li.list-box:last-child {
   width: 10px;
 }
 .color-wrap button .color-selector span {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   height: 12px;
   left: 50%;
   margin-left: -6px;
@@ -9728,7 +9804,7 @@ ul.list-clear li.list-box:last-child {
   border-radius: 0;
 }
 .color-wrap button .color-square::before {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   border-radius: 0;
 }
 .color-wrap button .color-square:hover {
@@ -9736,7 +9812,7 @@ ul.list-clear li.list-box:last-child {
 }
 .color-wrap button .color-square img,
 .color-wrap button .color-square .color-plain {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
   border-radius: 0;
 }
 .color-wrap button .color-square span {
@@ -9747,7 +9823,7 @@ ul.list-clear li.list-box:last-child {
   margin-left: 5px;
 }
 .color-wrap .color-more span {
-  border-bottom: 1px dotted #8e8e8e;
+  border-bottom: 1px dotted #666666;
 }
 
 .modalx-transparent.modalx-backdrop {
@@ -9758,7 +9834,7 @@ ul.list-clear li.list-box:last-child {
   pointer-events: none;
 }
 .modalx-transparent.modalx-backdrop .modalx-content {
-  border: 1px solid #e3e3e3;
+  border: 1px solid #a9a9a9;
 }
 
 .modalx-xxs {
@@ -10036,16 +10112,16 @@ ul.list-clear li.list-box:last-child {
   display: inline-flex;
 }
 .card9 .card9-sizes:last-child {
-  border-right: 1px solid #e3e3e3;
+  border-right: 1px solid #a9a9a9;
 }
 .card9 .card9-sizes button {
   font-family: arial, sans-serif;
   font-weight: 500;
   border: none;
   background-color: #fff;
-  border-top: 1px solid #e3e3e3;
-  border-bottom: 1px solid #e3e3e3;
-  border-left: 1px solid #e3e3e3;
+  border-top: 1px solid #a9a9a9;
+  border-bottom: 1px solid #a9a9a9;
+  border-left: 1px solid #a9a9a9;
   border-right: none;
   padding: 10px 0;
   min-width: 48px;
@@ -10087,7 +10163,7 @@ ul.list-clear li.list-box:last-child {
   margin-bottom: 0;
 }
 .card9 .js-card9-inner .content {
-  background: #e3e3e3;
+  background: #a9a9a9;
 }
 .card9 .card9-slider {
   position: absolute;
@@ -10233,7 +10309,7 @@ ul.list-clear li.list-box:last-child {
 .product-tag {
   font-family: arial, sans-serif;
   font-weight: 500;
-  color: #8e8e8e;
+  color: #666666;
   letter-spacing: 0;
   line-height: 1;
 }
@@ -10366,7 +10442,7 @@ div.card9-wrap .rat-content:hover .card9-add {
   height: calc(100% - 48px);
   content: "";
   position: absolute;
-  background-color: #8e8e8e;
+  background-color: #666666;
   top: 44px;
   left: 20px;
 }
@@ -10389,7 +10465,7 @@ div.card9-wrap .rat-content:hover .card9-add {
   overflow: hidden;
   background-color: #fff;
   z-index: 1002;
-  border-bottom: var(--line-width) solid #8e8e8e;
+  border-bottom: var(--line-width) solid #666666;
 }
 @media (min-width: 768px) {
   .header-account-head {
@@ -10510,7 +10586,7 @@ div.card9-wrap .rat-content:hover .card9-add {
 .hg-bread {
   background-color: #fff;
   padding: 0;
-  border-bottom: var(--line-width) solid #8e8e8e;
+  border-bottom: var(--line-width) solid #666666;
 }
 .hg-bread .hg-bread-inner {
   display: table;
@@ -11269,8 +11345,6 @@ div.card9-wrap .rat-content:hover .card9-add {
 }
 .is-rtl .btn.btn-separate svg-icon {
   transform: scaleX(-1);
-  margin-left: 0;
-  margin-right: 8px;
 }
 .is-rtl .btn.btn-world .btn-world-center {
   text-align: right;