@transferwise/neptune-css 14.8.0 → 14.8.2

package/dist/css/sequences.css

@@ -1 +1,855 @@
-.sequence{border-color:#0000001a;border-color:var(--color-border-neutral);font-size:.875rem;font-size:var(--font-size-14);margin-bottom:0;margin-left:25px;margin-top:0;padding-left:24px;position:relative}.sequence>li{padding-bottom:2px;padding-top:2px}.sequence>li:first-child{margin-top:16px}.sequence>li:last-child{margin-bottom:16px}@media (min-width:768px){.sequence>li{padding-bottom:4px;padding-top:4px}}.sequence>li:before{margin-top:8px}.sequence>li:after{top:16px}.sequence>li:first-child:after{height:100%}.sequence>li:last-child:after{height:0}.sequence.sequence-top>li:first-child{margin-top:0;padding-top:20px}.sequence.sequence-top>li:first-child:after{height:calc(100% + 16px)}.sequence.sequence-bottom>li:last-child{margin-bottom:0;padding-bottom:20px}.sequence.sequence-bottom>li:last-child:after{height:calc(100% - 16px)}.sequence.sequence-top.sequence-bottom>li:first-child:last-child:after{height:100%}.sequence .sequence-icon{top:2px}@media (min-width:768px){.sequence .sequence-icon{top:4px}}.sequence.sequence-top>li:first-child .sequence-icon{top:20px}[dir=rtl] .sequence{padding-left:0;padding-right:24px}.sequence>li:before{margin-left:-27px}[dir=rtl] .sequence>li:before{margin-left:0;margin-right:-27px}.sequence>li:after{left:-24px}[dir=rtl] .sequence>li:after{left:auto;right:-24px}.sequence .sequence-icon{margin-left:-35px}[dir=rtl] .sequence .sequence-icon{margin-left:0;margin-right:-35px}.sequence .sequence-icon-md{margin-left:-39px}[dir=rtl] .sequence .sequence-icon-md{margin-left:0;margin-right:-39px}.sequence .sequence-icon-lg{margin-left:-43px}[dir=rtl] .sequence .sequence-icon-lg{margin-left:0;margin-right:-43px}[dir=rtl] .sequence{margin-left:0;margin-right:25px}@media (min-width:768px){.sequence{font-size:1rem;font-size:var(--font-size-16);padding-right:24px}[dir=rtl] .sequence{padding-left:24px;padding-right:0}}.sequence>li{border-color:#0000001a;border-color:var(--color-border-neutral);display:block;line-height:24px;position:relative}.sequence>li>a{color:#0097c7;color:var(--color-content-accent);display:block;font-weight:400;font-weight:var(--font-weight-regular);outline-offset:-1px;text-decoration:none}.sequence>li>a:focus,.sequence>li>a:hover{color:#0084b3;color:var(--color-content-accent-hover);text-decoration:none}.sequence>li>a:active{color:#0077a5;color:var(--color-content-accent-active)}.sequence>li p{margin-bottom:0;max-width:600px;padding-bottom:8px}.sequence>li p:last-child{padding-bottom:0}.sequence>li .btn-toolbar,.sequence>li .h1,.sequence>li .h2,.sequence>li .h3,.sequence>li .h4,.sequence>li h1,.sequence>li h2,.sequence>li h3,.sequence>li h4{margin-bottom:16px}.sequence>li:before{border:4px solid;border-color:inherit;border-radius:50%;content:"";display:block;height:8px;outline:0;position:absolute;width:8px;z-index:2}.sequence>li:after{background-color:#0000001a;background-color:var(--color-border-neutral);background-position:0 0;background-size:200% 200%;border:0 solid;border-color:inherit;content:"";height:100%;outline:0;position:absolute;width:2px}.sequence .sequence-item-no-pip:before{display:none}.sequence>.active>a{font-weight:600;font-weight:var(--font-weight-semi-bold)}.sequence>.active>a,.sequence>.active>a:focus,.sequence>.active>a:hover{color:#37517e;color:var(--color-content-primary);text-decoration:none}.sequence>.active>a:active{color:#37517e;color:var(--color-content-primary)}.sequence>.active:before{border-color:#0097c7;border-color:var(--color-content-accent)}.sequence>.active:after,.sequence>.active~li:after{background-color:#0000001a;background-color:var(--color-border-neutral);background-image:none}.sequence>.active~li:before{border-color:#0000001a;border-color:var(--color-border-neutral)}.sequence a{font-weight:400;font-weight:var(--font-weight-regular);text-decoration:none}.sequence-top>li:first-child:after{top:0}.sequence-inverse>li{border-color:#0000001a;border-color:var(--color-border-neutral)}.sequence-inverse>li>a{color:#fff}.sequence-inverse>li:after{background-color:#37517e}.sequence-inverse>.active>a{color:#fff}.sequence-inverse>.active .body-2,.sequence-inverse>.active .np-text-body-default,.sequence-inverse>.active .small{color:#5d7079;color:var(--color-content-secondary)}.sequence-inverse>.active:after,.sequence-inverse>.active~li:after{background-color:#37517e;background-image:none!important}.sequence-inverse>.active~li:before{border-color:#37517e}.sequence-info>li{border-color:#00a2dd;border-color:var(--color-interactive-accent)}.sequence-info>li:after{background-image:linear-gradient(#00a2dd,#00a2dd 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-accent) 0,var(--color-interactive-accent) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-info.sequence-inverse>li:after{background-image:linear-gradient(#00a2dd,#00a2dd 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-accent) 0,var(--color-interactive-accent) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-info>.active:before{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent)}@keyframes sequence-pip-info{0%{border-color:#ffffff1a}to{border-color:#00a2dd;border-color:var(--color-interactive-accent)}}.sequence-primary>li{border-color:#37517e}.sequence-primary>li:after{background-image:linear-gradient(#37517e,#37517e 50%,#0000001a 0,#0000001a);background-image:linear-gradient(#37517e 0,#37517e 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-primary.sequence-inverse>li:after{background-image:linear-gradient(#37517e,#37517e 50%,#ffffff1a 0,#ffffff1a)}.sequence-primary>.active:before{background-color:#37517e;border-color:#37517e}@keyframes sequence-pip-primary{0%{border-color:#ffffff1a}to{border-color:#37517e}}.sequence-success>li{border-color:#2ead4b;border-color:var(--color-interactive-positive)}.sequence-success>li:after{background-image:linear-gradient(#2ead4b,#2ead4b 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-positive) 0,var(--color-interactive-positive) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-success.sequence-inverse>li:after{background-image:linear-gradient(#2ead4b,#2ead4b 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-positive) 0,var(--color-interactive-positive) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-success>.active:before{background-color:#2ead4b;background-color:var(--color-interactive-positive);border-color:#2ead4b;border-color:var(--color-interactive-positive)}@keyframes sequence-pip-success{0%{border-color:#ffffff1a}to{border-color:#2ead4b;border-color:var(--color-interactive-positive)}}.sequence-warning>li{border-color:#df8700;border-color:var(--color-interactive-warning)}.sequence-warning>li:after{background-image:linear-gradient(#df8700,#df8700 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-warning) 0,var(--color-interactive-warning) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-warning.sequence-inverse>li:after{background-image:linear-gradient(#df8700,#df8700 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-warning) 0,var(--color-interactive-warning) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-warning>.active:before{background-color:#df8700;background-color:var(--color-interactive-warning);border-color:#df8700;border-color:var(--color-interactive-warning)}@keyframes sequence-pip-warning{0%{border-color:#ffffff1a}to{border-color:#df8700;border-color:var(--color-interactive-warning)}}.sequence-danger>li{border-color:#e74848;border-color:var(--color-interactive-negative)}.sequence-danger>li:after{background-image:linear-gradient(#e74848,#e74848 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-negative) 0,var(--color-interactive-negative) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-danger.sequence-inverse>li:after{background-image:linear-gradient(#e74848,#e74848 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-negative) 0,var(--color-interactive-negative) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-danger>.active:before{background-color:#e74848;background-color:var(--color-interactive-negative);border-color:#e74848;border-color:var(--color-interactive-negative)}@keyframes sequence-pip-danger{0%{border-color:#ffffff1a}to{border-color:#e74848;border-color:var(--color-interactive-negative)}}.sequence-hollow>li:before{background-color:#fff;background-color:var(--color-background-screen);border-width:2px}.sequence-hollow>.active:before{border-width:4px}.sequence-hollow>.active~li:before{background-color:#fff;background-color:var(--color-background-screen)}.sequence-hollow.sequence-inverse>li:before{background-color:#37517e}.sequence-icon{background-color:#fff;background-color:var(--color-background-screen);border:1px solid #0000001a;border-color:var(--color-border-neutral);border-radius:50%;display:block;font-size:.75rem;font-size:var(--font-size-12);height:24px;margin-left:-35px;position:absolute;text-align:center;text-decoration:none!important;top:4px;width:24px;z-index:2}[dir=rtl] .sequence-icon{margin-left:0;margin-right:-35px}.sequence-icon .icon{font-size:1rem;font-size:var(--font-size-16);line-height:23px}.sequence-inverse .sequence-icon{background-color:#37517e;border-color:#fff}.sequence a .sequence-icon{border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#0097c7;color:var(--color-content-accent)}.sequence a:focus .sequence-icon,.sequence a:hover .sequence-icon{border-color:#008fc9;border-color:var(--color-interactive-accent-hover);color:#0084b3;color:var(--color-content-accent-hover)}.sequence-table{display:table}.sequence-table>li{display:table-row}.sequence-table>li>a{position:absolute}.sequence-table>li>.sequence-table-td,.sequence-table>li>.sequence-table-th{display:table-cell;padding:4px 12px;padding:var(--size-4) var(--size-12);padding-left:0}[dir=rtl] .sequence-table>li>.sequence-table-td,[dir=rtl] .sequence-table>li>.sequence-table-th{padding-left:0;padding-right:0}.sequence-table>li>.sequence-table-td:last-child,.sequence-table>li>.sequence-table-th:last-child{padding-right:0}[dir=rtl] .sequence-table>li>.sequence-table-td:last-child,[dir=rtl] .sequence-table>li>.sequence-table-th:last-child{padding-left:0;padding-right:0}.sequence-table>li>.sequence-table-th{color:#37517e;color:var(--color-content-primary);white-space:nowrap}.sequence-table>li:before{position:static}.sequence-table>li:after{display:none}.sequence-table>li .sequence-icon{margin-top:-17px;position:static}.sequence-table>li:first-child .sequence-table-td,.sequence-table>li:first-child .sequence-table-th{padding-top:17px}.sequence-table>li:last-child .sequence-table-td,.sequence-table>li:last-child .sequence-table-th{padding-bottom:15px}.sequence-table:before{border:1px solid;border-color:inherit;content:" ";display:block;height:calc(100% - 56px);left:0;margin-top:28px;position:absolute;width:2px}[dir=rtl] .sequence-table:before{left:auto;right:0}.sequence-table.sequence-top:before{height:calc(100% - 28px);margin-top:0}.sequence-table.sequence-bottom:before{height:calc(100% - 28px)}.sequence-table.sequence-top.sequence-bottom:before{height:100%}.sequence-inverse>li>.sequence-table-td,.sequence-inverse>li>.sequence-table-th{color:#5d7079;color:var(--color-content-secondary)}.sequence-icon-md{font-size:.875rem;font-size:var(--font-size-14);height:32px;line-height:30px;margin-top:-6px;width:32px}.sequence-icon-lg{font-size:1rem;font-size:var(--font-size-16);height:40px;line-height:38px;margin-top:-6px;width:40px}.sequence-icon-lg .icon{font-size:22px;line-height:35px}.sequence-lg{padding-left:40px}.sequence-lg>li{padding-bottom:8px;padding-top:8px}.sequence-lg>li:first-child{margin-top:24px}.sequence-lg>li:last-child{margin-bottom:24px}@media (min-width:768px){.sequence-lg>li{padding-bottom:8px;padding-top:8px}}.sequence-lg>li:before{margin-top:8px}.sequence-lg>li:after{top:20px}.sequence-lg>li:first-child:after{height:100%}.sequence-lg>li:last-child:after{height:0}.sequence-lg.sequence-top>li:first-child{margin-top:0;padding-top:32px}.sequence-lg.sequence-top>li:first-child:after{height:calc(100% + 20px)}.sequence-lg.sequence-bottom>li:last-child{margin-bottom:0;padding-bottom:32px}.sequence-lg.sequence-bottom>li:last-child:after{height:calc(100% - 20px)}.sequence-lg.sequence-top.sequence-bottom>li:first-child:last-child:after{height:100%}.sequence-lg .sequence-icon{top:8px}@media (min-width:768px){.sequence-lg .sequence-icon{top:8px}}.sequence-lg.sequence-top>li:first-child .sequence-icon{top:32px}[dir=rtl] .sequence-lg{padding-left:0;padding-right:40px}.sequence-lg>li:before{margin-left:-43px}[dir=rtl] .sequence-lg>li:before{margin-left:0;margin-right:-43px}.sequence-lg>li:after{left:-40px}[dir=rtl] .sequence-lg>li:after{left:auto;right:-40px}.sequence-lg .sequence-icon{margin-left:-51px}[dir=rtl] .sequence-lg .sequence-icon{margin-left:0;margin-right:-51px}.sequence-lg .sequence-icon-md{margin-left:-55px}[dir=rtl] .sequence-lg .sequence-icon-md{margin-left:0;margin-right:-55px}.sequence-lg .sequence-icon-lg{margin-left:-59px}[dir=rtl] .sequence-lg .sequence-icon-lg{margin-left:0;margin-right:-59px}@media (min-width:768px){.sequence-lg{padding-left:48px}[dir=rtl] .sequence-lg{padding-left:0;padding-right:48px}.sequence-lg>li:before{margin-left:-51px}[dir=rtl] .sequence-lg>li:before{margin-left:0;margin-right:-51px}.sequence-lg>li:after{left:-48px}[dir=rtl] .sequence-lg>li:after{left:auto;right:-48px}.sequence-lg .sequence-icon{margin-left:-59px}[dir=rtl] .sequence-lg .sequence-icon{margin-left:0;margin-right:-59px}.sequence-lg .sequence-icon-md{margin-left:-63px}[dir=rtl] .sequence-lg .sequence-icon-md{margin-left:0;margin-right:-63px}.sequence-lg .sequence-icon-lg{margin-left:-67px}[dir=rtl] .sequence-lg .sequence-icon-lg{margin-left:0;margin-right:-67px}}.sequence-animate>li:after{animation:sequence-fill .3s linear 0s both;background-size:200% 200%}.sequence-animate.sequence-info>li:before{animation:sequence-pip-info .3s linear .3s both,sequence-pulse-info 3s linear .3s forwards}.sequence-animate.sequence-info>.active:before{animation:sequence-pip-info .3s linear .3s both,sequence-pulse-info 3s linear .3s infinite}.sequence-animate.sequence-warning>li:before{animation:sequence-pip-warning .3s linear .3s both,sequence-pulse-warning 3s linear .3s forwards}.sequence-animate.sequence-warning>.active:before{animation:sequence-pip-warning .3s linear .3s both,sequence-pulse-warning 3s linear .3s infinite}.sequence-animate.sequence-success>li:before{animation:sequence-pip-success .3s linear .3s both,sequence-pulse-success 3s linear .3s forwards}.sequence-animate.sequence-success>.active:before{animation:sequence-pip-success .3s linear .3s both,sequence-pulse-success 3s linear .3s infinite}.sequence-animate.sequence-danger>li:before{animation:sequence-pip-danger .3s linear .3s both,sequence-pulse-danger 3s linear .3s forwards}.sequence-animate.sequence-danger>.active:before{animation:sequence-pip-danger .3s linear .3s both,sequence-pulse-danger 3s linear .3s infinite}.sequence-animate>li:first-child:after,.sequence-animate>li:first-child:before{animation-delay:.3s!important}.sequence-animate>li:nth-child(2):after,.sequence-animate>li:nth-child(2):before{animation-delay:.6s!important}.sequence-animate>li:nth-child(3):after,.sequence-animate>li:nth-child(3):before{animation-delay:.9s!important}.sequence-animate>li:nth-child(4):after,.sequence-animate>li:nth-child(4):before{animation-delay:1.2s!important}.sequence-animate>li:nth-child(5):after,.sequence-animate>li:nth-child(5):before{animation-delay:1.5s!important}.sequence-animate>li:nth-child(6):after,.sequence-animate>li:nth-child(6):before{animation-delay:1.8s!important}.sequence-animate>li:nth-child(7):after,.sequence-animate>li:nth-child(7):before{animation-delay:2.1s!important}.sequence-animate>li:nth-child(8):after,.sequence-animate>li:nth-child(8):before{animation-delay:2.4s!important}.sequence-animate>li:nth-child(9):after,.sequence-animate>li:nth-child(9):before{animation-delay:2.7s!important}.sequence-animate>li:nth-child(10):after,.sequence-animate>li:nth-child(10):before{animation-delay:3s!important}.sequence-animate>.active~li:after,.sequence-animate>.active~li:before{animation:none}@keyframes sequence-fill{0%{background-position:0 100%}to{background-position:0 0}}@keyframes sequence-pulse-info{0%{box-shadow:0 0 0 0 rgba(0,185,255,.3)}50%{box-shadow:0 0 0 16px rgba(0,185,255,0)}to{box-shadow:0 0 0 0 rgba(0,185,255,0)}}@keyframes sequence-pulse-warning{0%{box-shadow:0 0 0 0 rgba(255,166,0,.3)}50%{box-shadow:0 0 0 16px rgba(255,166,0,0)}to{box-shadow:0 0 0 0 rgba(255,166,0,0)}}@keyframes sequence-pulse-success{0%{box-shadow:0 0 0 0 rgba(26,208,110,.3)}50%{box-shadow:0 0 0 16px rgba(26,208,110,0)}to{box-shadow:0 0 0 0 hsla(51,67%,66%,0)}}@keyframes sequence-pulse-danger{0%{box-shadow:0 0 0 0 rgba(245,54,54,.3)}50%{box-shadow:0 0 0 16px rgba(245,54,54,0)}to{box-shadow:0 0 0 0 rgba(245,54,54,0)}}
+.sequence {
+  padding-left: 24px;
+  position: relative;
+  margin-left: 25px;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence > li {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.sequence > li:first-child {
+  margin-top: 16px;
+}
+.sequence > li:last-child {
+  margin-bottom: 16px;
+}
+@media (min-width: 768px) {
+  .sequence > li {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+.sequence > li::before {
+  margin-top: 8px;
+}
+.sequence > li::after {
+  top: 16px;
+}
+.sequence > li:first-child::after {
+  height: 100%;
+}
+.sequence > li:last-child::after {
+  height: 0;
+}
+.sequence.sequence-top > li:first-child {
+  padding-top: 20px;
+  margin-top: 0;
+}
+.sequence.sequence-top > li:first-child::after {
+  height: calc(100% + 16px);
+}
+.sequence.sequence-bottom > li:last-child {
+  padding-bottom: 20px;
+  margin-bottom: 0;
+}
+.sequence.sequence-bottom > li:last-child::after {
+  height: calc(100% - 16px);
+}
+.sequence.sequence-top.sequence-bottom > li:first-child:last-child::after {
+  height: 100%;
+}
+.sequence .sequence-icon {
+  top: 2px;
+}
+@media (min-width: 768px) {
+  .sequence .sequence-icon {
+    top: 4px;
+  }
+}
+.sequence.sequence-top > li:first-child .sequence-icon {
+  top: 20px;
+}
+[dir="rtl"] .sequence {
+  padding-right: 24px;
+  padding-left: 0;
+  padding-left: initial;
+}
+.sequence > li::before {
+  margin-left: -27px;
+}
+[dir="rtl"] .sequence > li::before {
+  margin-right: -27px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence > li::after {
+  left: -24px;
+}
+[dir="rtl"] .sequence > li::after {
+  right: -24px;
+  left: auto;
+  left: initial;
+}
+.sequence .sequence-icon {
+  margin-left: -35px;
+}
+[dir="rtl"] .sequence .sequence-icon {
+  margin-right: -35px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence .sequence-icon-md {
+  margin-left: -39px;
+}
+[dir="rtl"] .sequence .sequence-icon-md {
+  margin-right: -39px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence .sequence-icon-lg {
+  margin-left: -43px;
+}
+[dir="rtl"] .sequence .sequence-icon-lg {
+  margin-right: -43px;
+  margin-left: 0;
+  margin-left: initial;
+}
+[dir="rtl"] .sequence {
+  margin-right: 25px;
+  margin-left: 0;
+  margin-left: initial;
+}
+@media (min-width: 768px) {
+  .sequence {
+    padding-right: 24px;
+    font-size: 1rem;
+    font-size: var(--font-size-16);
+  }
+  [dir="rtl"] .sequence {
+    padding-left: 24px;
+    padding-right: 0;
+    padding-right: initial;
+  }
+}
+.sequence > li {
+  display: block;
+  line-height: 24px;
+  position: relative;
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence > li > a {
+  display: block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  color: #0097c7;
+  color: var(--color-content-accent);
+  outline-offset: -1px;
+}
+.sequence > li > a:hover,
+.sequence > li > a:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+}
+.sequence > li > a:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+.sequence > li p {
+  margin-bottom: 0;
+  padding-bottom: 8px;
+  max-width: 600px;
+}
+.sequence > li p:last-child {
+  padding-bottom: 0;
+}
+.sequence > li h1,
+.sequence > li h2,
+.sequence > li h3,
+.sequence > li h4,
+.sequence > li .h1,
+.sequence > li .h2,
+.sequence > li .h3,
+.sequence > li .h4,
+.sequence > li .btn-toolbar {
+  margin-bottom: 16px;
+}
+.sequence > li::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  z-index: 2;
+  border-width: 4px;
+  border-style: solid;
+  border-color: inherit;
+  outline: 0;
+}
+.sequence > li::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 100%;
+  border-style: solid;
+  border-color: inherit;
+  outline: 0;
+  border-width: 0;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  background-size: 200% 200%;
+  background-position: 0 0%;
+}
+.sequence .sequence-item-no-pip::before {
+  display: none;
+}
+.sequence > .active > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #37517e;
+  color: var(--color-content-primary);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+.sequence > .active > a:hover,
+.sequence > .active > a:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.sequence > .active > a:active {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.sequence > .active::before {
+  border-color: #0097c7;
+  border-color: var(--color-content-accent);
+}
+.sequence > .active::after,
+.sequence > .active ~ li::after {
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  background-image: none;
+}
+.sequence > .active ~ li::before {
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
+.sequence-top > li:first-child::after {
+  top: 0;
+}
+.sequence-inverse > li {
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence-inverse > li > a {
+  color: #ffffff;
+}
+.sequence-inverse > li::after {
+  background-color: #37517e;
+}
+.sequence-inverse > .active > a {
+  color: #ffffff;
+}
+.sequence-inverse > .active .small,
+.sequence-inverse > .active .body-2,
+.sequence-inverse > .active .np-text-body-default {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.sequence-inverse > .active::after,
+.sequence-inverse > .active ~ li::after {
+  background-color: #37517e;
+  background-image: none !important;
+}
+.sequence-inverse > .active ~ li::before {
+  border-color: #37517e;
+}
+.sequence-info > li {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+}
+.sequence-info > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-info.sequence-inverse > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-info > .active::before {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+@keyframes sequence-pip-info {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #00a2dd;
+    border-color: var(--color-interactive-accent);
+  }
+}
+.sequence-primary > li {
+  border-color: #37517e;
+}
+.sequence-primary > li::after {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-primary.sequence-inverse > li::after {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-primary > .active::before {
+  border-color: #37517e;
+  background-color: #37517e;
+}
+@keyframes sequence-pip-primary {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #37517e;
+  }
+}
+.sequence-success > li {
+  border-color: #2ead4b;
+  border-color: var(--color-interactive-positive);
+}
+.sequence-success > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-success.sequence-inverse > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-success > .active::before {
+  border-color: #2ead4b;
+  border-color: var(--color-interactive-positive);
+  background-color: #2ead4b;
+  background-color: var(--color-interactive-positive);
+}
+@keyframes sequence-pip-success {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #2ead4b;
+    border-color: var(--color-interactive-positive);
+  }
+}
+.sequence-warning > li {
+  border-color: #df8700;
+  border-color: var(--color-interactive-warning);
+}
+.sequence-warning > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-warning.sequence-inverse > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-warning > .active::before {
+  border-color: #df8700;
+  border-color: var(--color-interactive-warning);
+  background-color: #df8700;
+  background-color: var(--color-interactive-warning);
+}
+@keyframes sequence-pip-warning {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #df8700;
+    border-color: var(--color-interactive-warning);
+  }
+}
+.sequence-danger > li {
+  border-color: #e74848;
+  border-color: var(--color-interactive-negative);
+}
+.sequence-danger > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-danger.sequence-inverse > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-danger > .active::before {
+  border-color: #e74848;
+  border-color: var(--color-interactive-negative);
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
+@keyframes sequence-pip-danger {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #e74848;
+    border-color: var(--color-interactive-negative);
+  }
+}
+.sequence-hollow > li::before {
+  border-width: 2px;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.sequence-hollow > .active::before {
+  border-width: 4px;
+}
+.sequence-hollow > .active ~ li::before {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.sequence-hollow.sequence-inverse > li::before {
+  background-color: #37517e;
+}
+.sequence-icon {
+  position: absolute;
+  display: block;
+  margin-left: -35px;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  z-index: 2;
+  text-align: center;
+  -webkit-text-decoration: none !important;
+  text-decoration: none !important;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+  top: 4px;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+}
+[dir="rtl"] .sequence-icon {
+  margin-right: -35px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-icon .icon {
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 23px;
+}
+.sequence-inverse .sequence-icon {
+  background-color: #37517e;
+  border-color: #ffffff;
+}
+.sequence a .sequence-icon {
+  color: #0097c7;
+  color: var(--color-content-accent);
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+}
+.sequence a:hover .sequence-icon,
+.sequence a:focus .sequence-icon {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  border-color: #008fc9;
+  border-color: var(--color-interactive-accent-hover);
+}
+.sequence-table {
+  display: table;
+}
+.sequence-table > li {
+  display: table-row;
+}
+.sequence-table > li > a {
+  position: absolute;
+}
+.sequence-table > li > .sequence-table-td,
+.sequence-table > li > .sequence-table-th {
+  display: table-cell;
+  padding: 4px 12px;
+  padding: var(--size-4) var(--size-12);
+  padding-left: 0;
+}
+[dir="rtl"] .sequence-table > li > .sequence-table-td,
+[dir="rtl"] .sequence-table > li > .sequence-table-th {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
+}
+.sequence-table > li > .sequence-table-td:last-child,
+.sequence-table > li > .sequence-table-th:last-child {
+  padding-right: 0;
+}
+[dir="rtl"] .sequence-table > li > .sequence-table-td:last-child,
+[dir="rtl"] .sequence-table > li > .sequence-table-th:last-child {
+  padding-left: 0;
+  padding-right: 0;
+  padding-right: initial;
+}
+.sequence-table > li > .sequence-table-th {
+  color: #37517e;
+  color: var(--color-content-primary);
+  white-space: nowrap;
+}
+.sequence-table > li::before {
+  position: static;
+  position: initial;
+}
+.sequence-table > li::after {
+  display: none;
+}
+.sequence-table > li .sequence-icon {
+  position: static;
+  position: initial;
+  margin-top: -17px;
+}
+.sequence-table > li:first-child .sequence-table-td,
+.sequence-table > li:first-child .sequence-table-th {
+  padding-top: 17px;
+}
+.sequence-table > li:last-child .sequence-table-td,
+.sequence-table > li:last-child .sequence-table-th {
+  padding-bottom: 15px;
+}
+.sequence-table::before {
+  content: " ";
+  width: 2px;
+  left: 0;
+  position: absolute;
+  border-width: 1px;
+  border-style: solid;
+  border-color: inherit;
+  height: calc(100% - 56px);
+  margin-top: 28px;
+  display: block;
+}
+[dir="rtl"] .sequence-table::before {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+.sequence-table.sequence-top::before {
+  height: calc(100% - 28px);
+  margin-top: 0;
+}
+.sequence-table.sequence-bottom::before {
+  height: calc(100% - 28px);
+}
+.sequence-table.sequence-top.sequence-bottom::before {
+  height: 100%;
+}
+.sequence-inverse > li > .sequence-table-th,
+.sequence-inverse > li > .sequence-table-td {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.sequence-icon-md {
+  width: 32px;
+  height: 32px;
+  line-height: 30px;
+  margin-top: -6px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+}
+.sequence-icon-lg {
+  width: 40px;
+  height: 40px;
+  line-height: 38px;
+  margin-top: -6px;
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+}
+.sequence-icon-lg .icon {
+  font-size: 22px;
+  line-height: 35px;
+}
+.sequence-lg {
+  padding-left: 40px;
+}
+.sequence-lg > li {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.sequence-lg > li:first-child {
+  margin-top: 24px;
+}
+.sequence-lg > li:last-child {
+  margin-bottom: 24px;
+}
+@media (min-width: 768px) {
+  .sequence-lg > li {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+.sequence-lg > li::before {
+  margin-top: 8px;
+}
+.sequence-lg > li::after {
+  top: 20px;
+}
+.sequence-lg > li:first-child::after {
+  height: 100%;
+}
+.sequence-lg > li:last-child::after {
+  height: 0;
+}
+.sequence-lg.sequence-top > li:first-child {
+  padding-top: 32px;
+  margin-top: 0;
+}
+.sequence-lg.sequence-top > li:first-child::after {
+  height: calc(100% + 20px);
+}
+.sequence-lg.sequence-bottom > li:last-child {
+  padding-bottom: 32px;
+  margin-bottom: 0;
+}
+.sequence-lg.sequence-bottom > li:last-child::after {
+  height: calc(100% - 20px);
+}
+.sequence-lg.sequence-top.sequence-bottom > li:first-child:last-child::after {
+  height: 100%;
+}
+.sequence-lg .sequence-icon {
+  top: 8px;
+}
+@media (min-width: 768px) {
+  .sequence-lg .sequence-icon {
+    top: 8px;
+  }
+}
+.sequence-lg.sequence-top > li:first-child .sequence-icon {
+  top: 32px;
+}
+[dir="rtl"] .sequence-lg {
+  padding-right: 40px;
+  padding-left: 0;
+  padding-left: initial;
+}
+.sequence-lg > li::before {
+  margin-left: -43px;
+}
+[dir="rtl"] .sequence-lg > li::before {
+  margin-right: -43px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-lg > li::after {
+  left: -40px;
+}
+[dir="rtl"] .sequence-lg > li::after {
+  right: -40px;
+  left: auto;
+  left: initial;
+}
+.sequence-lg .sequence-icon {
+  margin-left: -51px;
+}
+[dir="rtl"] .sequence-lg .sequence-icon {
+  margin-right: -51px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-lg .sequence-icon-md {
+  margin-left: -55px;
+}
+[dir="rtl"] .sequence-lg .sequence-icon-md {
+  margin-right: -55px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-lg .sequence-icon-lg {
+  margin-left: -59px;
+}
+[dir="rtl"] .sequence-lg .sequence-icon-lg {
+  margin-right: -59px;
+  margin-left: 0;
+  margin-left: initial;
+}
+@media (min-width: 768px) {
+  .sequence-lg {
+    padding-left: 48px;
+  }
+  [dir="rtl"] .sequence-lg {
+    padding-right: 48px;
+    padding-left: 0;
+    padding-left: initial;
+  }
+  .sequence-lg > li::before {
+    margin-left: -51px;
+  }
+  [dir="rtl"] .sequence-lg > li::before {
+    margin-right: -51px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+  .sequence-lg > li::after {
+    left: -48px;
+  }
+  [dir="rtl"] .sequence-lg > li::after {
+    right: -48px;
+    left: auto;
+    left: initial;
+  }
+  .sequence-lg .sequence-icon {
+    margin-left: -59px;
+  }
+  [dir="rtl"] .sequence-lg .sequence-icon {
+    margin-right: -59px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+  .sequence-lg .sequence-icon-md {
+    margin-left: -63px;
+  }
+  [dir="rtl"] .sequence-lg .sequence-icon-md {
+    margin-right: -63px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+  .sequence-lg .sequence-icon-lg {
+    margin-left: -67px;
+  }
+  [dir="rtl"] .sequence-lg .sequence-icon-lg {
+    margin-right: -67px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+}
+.sequence-animate > li::after {
+  background-size: 200% 200%;
+  animation: 0.3s linear 0s both sequence-fill;
+}
+.sequence-animate.sequence-info > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s forwards sequence-pulse-info;
+}
+.sequence-animate.sequence-info > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s infinite sequence-pulse-info;
+}
+.sequence-animate.sequence-warning > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s forwards sequence-pulse-warning;
+}
+.sequence-animate.sequence-warning > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s infinite sequence-pulse-warning;
+}
+.sequence-animate.sequence-success > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s forwards sequence-pulse-success;
+}
+.sequence-animate.sequence-success > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s infinite sequence-pulse-success;
+}
+.sequence-animate.sequence-danger > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s forwards sequence-pulse-danger;
+}
+.sequence-animate.sequence-danger > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s infinite sequence-pulse-danger;
+}
+.sequence-animate > li:nth-child(1):before,
+.sequence-animate > li:nth-child(1):after {
+  animation-delay: 0.3s !important;
+}
+.sequence-animate > li:nth-child(2):before,
+.sequence-animate > li:nth-child(2):after {
+  animation-delay: 0.6s !important;
+}
+.sequence-animate > li:nth-child(3):before,
+.sequence-animate > li:nth-child(3):after {
+  animation-delay: 0.9s !important;
+}
+.sequence-animate > li:nth-child(4):before,
+.sequence-animate > li:nth-child(4):after {
+  animation-delay: 1.2s !important;
+}
+.sequence-animate > li:nth-child(5):before,
+.sequence-animate > li:nth-child(5):after {
+  animation-delay: 1.5s !important;
+}
+.sequence-animate > li:nth-child(6):before,
+.sequence-animate > li:nth-child(6):after {
+  animation-delay: 1.8s !important;
+}
+.sequence-animate > li:nth-child(7):before,
+.sequence-animate > li:nth-child(7):after {
+  animation-delay: 2.1s !important;
+}
+.sequence-animate > li:nth-child(8):before,
+.sequence-animate > li:nth-child(8):after {
+  animation-delay: 2.4s !important;
+}
+.sequence-animate > li:nth-child(9):before,
+.sequence-animate > li:nth-child(9):after {
+  animation-delay: 2.7s !important;
+}
+.sequence-animate > li:nth-child(10):before,
+.sequence-animate > li:nth-child(10):after {
+  animation-delay: 3s !important;
+}
+.sequence-animate > .active ~ li::before,
+.sequence-animate > .active ~ li::after {
+  animation: none;
+}
+@keyframes sequence-fill {
+  from {
+    background-position: 0 100%;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes sequence-pulse-info {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 185, 255, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 16px rgba(0, 185, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 185, 255, 0);
+  }
+}
+@keyframes sequence-pulse-warning {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 16px rgba(255, 166, 0, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 166, 0, 0);
+  }
+}
+@keyframes sequence-pulse-success {
+  0% {
+    box-shadow: 0 0 0 0 rgba(26, 208, 110, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 16px rgba(26, 208, 110, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(226, 208, 110, 0);
+  }
+}
+@keyframes sequence-pulse-danger {
+  0% {
+    box-shadow: 0 0 0 0 rgba(245, 54, 54, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 16px rgba(245, 54, 54, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 54, 54, 0);
+  }
+}