@import "https://fonts.googleapis.com/css2?family=Dosis&display=swap";
@import "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";

html, body, #app {
    width: 100%;
    height: 100%;
    overflow-x:hidden;
    background: #2f2f2f;
    padding-top:5px;
    font-family: montserrat,roboto!important;
}

.notification {
    background: #48ff6f8c;
    color: #fff;
    line-height: 35px;
    /* height: 35px; */
    text-align: center;
    margin-bottom: 8px;
    font-size: 13px;
 }

 a, button{
   cursor:pointer
 }
 .loader {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     width: 100%;
 }
.notification i.material-icons {
    position: absolute;
    left: 0px;
    font-size: 25px;
    margin-left: 11px;
    top: 10px;
}
i.material-icons.favourites {
    color: #FFD700;
}

.wrapper {
    display: flex;
    /* width: 75%; */
    margin: 0 auto;
    /* flex-wrap: wrap; */
    padding: 0px 30px;
}

.left-pane, .right-pane {
    width: 325px;
    position: relative;
}

.centar {
    width: calc(100% - 650px);
    margin-top: 5px;
    margin: 5px 15px;
}

img.logo {
    width: 55px;
    height: 55px;
}

.branding {
    display: flex;
    line-height: 55px;
    align-items: center;
}

.brand {
    font-size: 22px;
    color: #c14849;
    font-weight: 500;
    letter-spacing: -1px;
    margin-left: 5px;
}

.centar .search-bar input {
    border: none!important;
    font-family: inherit;
    font-size: 15px;
    background: #383838;
    border-radius: 4px;
    color: white;
    display: flex;
    width: 100%;
    margin-bottom: 0;
    border-bottom: none!important;
    padding-left: 15px;
    height: 45px;
    box-shadow: none!important;
}
.centar .search-bar input::placeholder {
    color: #7b7b7b;

    font-size:13px;
    font-weight:500;
}

.user-account img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
}

.user-account {
    display: flex;
    line-height: 55px;
    height: 55px;
    position: relative;
    /* margin-left: 14px; */
    text-align: left;
    margin-bottom: 10px;
    align-items: center;
}

.username {
    font-size: 15px;
    color: #b9b9b9;
    margin-left: 10px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 60px);
}

.right-pane {
    text-align: right;
    padding-left: 35px;
}

.balance {
    font-size: 21px;
    font-weight: 300;
    color: white;
}

.user-balance {
    font-size: 12px;
    color: #8c8c8c;
    padding: 10px;
    position: relative;
    background: #383838;
    margin-bottom: 10px;
    text-align: right;
}

.deposit-button button {
    font-size: 12px;
    background: #c14849;
    color: white;
    font-weight: 700;
    font-family: inherit;
    border: none;
    padding: 6px 4px;
    width: 100%;
}

.left-pane {
    padding-right: 35px;
}

.user-balance i {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 40px;
    color: #c14849;
}

.loyalty-status {
    padding: 4 10px;
    font-size: 12px;
    width: 100%;
    text-align: center;
    background: #cea42d;
    font-weight: 700;
    color: white;
}

.deposit-button {
    margin-bottom: 5px;
}

.user-settings {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.user-settings i {
    color: white;
}

.user-nav a.subheader {
    font-size: 13px;
    color: #8c8c8c;
}

.user-nav li {
    display: flex;
    align-items: center;
    /* background: white; */
    justify-content: flex-end;
    padding: 10px;
    margin-bottom: 5px;
}

.user-nav li i {
    position: absolute;
    left: 10px;
    font-size: 20px;
    display: flex;
    align-items: center;
    color: #c14849;
}

ul.user-nav {
    position: relative;
}

.left-pane .user-nav li {
    justify-content: flex-start;
}

.left-pane .user-nav li i {
    left: unset!important;
    right: 0;
}

.product-image img {
    width: 100%;
    border-radius: 5px;
}

.product {
    border-radius: 5px;
    position: relative;
    background: #383838;
    margin-bottom: 15px;
    display: flex;
    padding: 0px 10px;
}

.product-name {
    width: 91%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ffffff;
    font-size: 14px;
}

.product-category {
    width: 91%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #8c8c8c;
    font-size: 11px;
    /* margin-bottom: 10px; */
}

.product-details {
    padding: 15px 15px;
    padding-left: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: wrap;
    align-items: center;
}

.search-bar {
    margin-bottom: 10px;
    background: #3d3939;
    display: flex;
    align-items: center;
    margin: 0 .75rem;
}
.filter-bar {
    margin-bottom: 10px;
    display: flex;
    margin-top: 10px;
}

.checkboxes [type="checkbox"].filled-in:not(:checked)+span:not(.lever):after {
    height: 19px;
    width: 19px;
}

.checkboxes [type="checkbox"]+span:not(.lever) {
    height: 20px;
    line-height: 20px;
    padding-left: 25px;
    font-size: 11px;
    width: 82px;
}

.checkboxes label {
    margin-right: 12px;
}

.checkboxes {
    display: flex;
    padding: 0 10px;
    margin-right: 10px;
    width: 50%;
    align-items: center;
}

.search-bar button {
    height: 30px;
    width: 82px;
    font-family: inherit;
    background: #c14849;
    color: white;
    border: none;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 700;
    margin-right: 15px;
}

.pages {
    float: right;
    width: 50%;
    text-align: right;
    color: #9e9e9e;
    font-size: 13px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.pages button {
    border-radius: 2px;
    border: none;
    width: 35px;
    text-align: center;
    color: white;
    background: #c14849;
    padding: 2px;
}

.pages button i {
    font-size: 20px;
}

.pages span {
    margin: 0 15px;
}
.product-image {
}

.product-pins {
    width: 46px;
    display: flex;
}

.pin-pin {
    font-size: 9px;
    margin-right: 5px;
    border-radius: 2px;
    color: white;
    font-weight: 600;
    padding: 0px 6px;
    text-align: center;
    height: 18px;
    display:none;
    background:grey;
    line-height: 18px;
}

.pin-pin.pdf {
    background: #c14849!important;
    display:block!important;
}

.pin-pin.pin {
    background: #dab03a!important;
            display:block!important;
}

.pin-pin.sale {
    background: green!important;

            display:block!important;
}

ul#slide-out {
    background: #2f2f2f;
    padding: 10px;
}

.sidenav li {
    line-height: unset!Important;
}

li.nav-av {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.nav-av i {
    position: absolute;
    left: 10px;
    font-size: 20px;
    display: flex;
    align-items: center;
    color: #c14849;
}

.nav-av a.subheader {
    font-size: 13px;
    color: #8c8c8c!important;
    padding: unset!important;
    font-weight: 400;
    height: unset!Important;
    line-height: 40px;
    pointer-events:unset!important;
    cursor:pointer!important;
}
.buy-button:before {/* content: ""; */width: 100%;position: absolute;top: 0;background: white;border-top: 1px solid #444444;}

.buy-button {
    font-size: 12px;
    position: relative;
    width: 100%;
    color: #8c8c8c;
    font-size: 11px;
    margin-top: 9px;
    display: flex;
    align-items: center;
}

.buy-button span {
    font-size: 12px;
    color: #9ade92;
    font-weight: 500;
}

.buy-button button {
    border: none;
    padding: 5px;
    background: #c14849;
    color: white;
    font-weight: 600;
    font-family: inherit;
    font-size: 10px;
    float: right;
    right: 0;
    margin-left: auto;
}

.product .row.valign-wrapper {
    margin-bottom: 0;
}

.product .col.s10 {
    padding: 0;
}
.product-image {
}

.product-pins {
    width: 46px;
    display: flex;
}



.buy-button:before {/* content: ""; */width: 100%;position: absolute;top: 0;background: white;border-top: 1px solid #444444;}

.buy-button {
    font-size: 12px;
    position: relative;
    width: 100%;
    color: #8c8c8c;
    font-size: 11px;
    margin-top: 9px;
    display: flex;
    align-items: center;
}

.buy-button span {
    font-size: 12px;
    color: #9ade92;
    font-weight: 500;
}

.buy-button button {
    border: none;
    padding: 5px;
    background: #c14849;
    color: white;
    font-weight: 600;
    font-family: inherit;
    font-size: 10px;
    float: right;
    right: 0;
    margin-left: auto;
}

.product .row.valign-wrapper {
    margin-bottom: 0;
}

.product .col.s10 {
    padding: 0;
}

.favourite {
    position: absolute;
    top: 15px;
    right: 15px;
}

.favourite i {
    color: #8c8c8c;
}
.back-arrow {
    color: #8c8c8c;
    font-size: 13px;
    display: flex;
    height: 45px;
    align-items: center;
}

.back-arrow i {
    margin-right: 7px;
}

.back-arrow a {
    display: flex;
    align-items: center;
    color: inherit;
}


.product-list .product {
    display: flex;
    background: #2f2f2f!important;
    border-radius: 5px;
    position: relative;
    margin-bottom: 5px!important;
    align-items: center;
    padding: 10px;
}

.product-list .product img {

width: 80px;

height: 50px;

border-radius: 5px;
}

.products {
    background: #383838;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding-bottom: 5px;
}

.products .product-list .details {
    margin-left: 14px;
}

.product-list .details .product-price {
    color: #8c8c8c;
    font-size: 11px;
}

.product-list .details .product-name {
    width: unset!important;
    margin-bottom: 3px;
    font-size: 13px;
}

.product-list .input {
    float: right;
    margin-left: auto;
}

.input label span {
    padding-left: 25px!important;
}

.input [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border-color: #c14849;
}

.input [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
    background-color: #c14849;
}
.cart-actions span {
    margin-right: 9px;
}
.products h5 {
    font-size: 19px;
    padding-top: 10px;
    padding-bottom: 0px;
    color: #8c8c8c;
    margin-left: 5px;
}

.prodinfo {
    font-size: 13px;
    color: #9c9c9c;
    margin-bottom: 8px;
}

.prodinfo div {
    padding-left: 25px;
    margin-bottom: 6px;
    color: #797979;
}

.product-adder .pages {
    float: unset!important;
    width: unset;
    flex-direction: row-reverse;
}

.product-adder {
    display: flex;
    padding: 0 10px;
    align-items: center;
}

.product-adder .pages button {
    font-family: inherit;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    border: none;
    background: #c14849;
    margin-right: unset!important;
}

.product-list {
    margin-bottom: 10px;
}

.product-adder .pages button {
    width: 35px;
    height: 30px;
}

.product-adder .pages span {
    font-size: 13px;
    color: white;
    margin: 0 12px;
}

.product-adder .pages button i {
    font-size: 18px;
    margin-right: unset!important;
}

.product-adder button i {
    font-size: 13px;
    margin-right: 5px;
}
.login-lol {
    width: 380px;
    margin-top: 10px;
    font-size: 14px;
    color: #b7b7b7
}

.login-lol a {
    text-decoration: none;
    color: #c14849;
    font-weight: 700;
    text-transform: uppercase;
}
@media only screen and (max-width: 992px) {
  html, body, #app {
    padding-top:0px!important;
  }

  .wrapper{
    /* margin-top:10px; */
  }
    .deposit-amt input{
        margin-bottom:8px!important;
    }
    .row.deposit{
      display:block!important;
    }
    .deposit-buttons a{
      margin-bottom:0px!important;
      margin-top: 9px;
      margin-left: 5px;
      padding: 4px!important;
text-align: center;
font-size: 11px!important;
    }

    .deposit-buttons {
    display: flex;
    justify-content: center;
}
    .method img{
      width:95px!important;
    }
  .deposit-details{
    font-size:11px
  }
    .deposit-image img{
        width:120px!important;
    }
  .filter-bar{
    display:block!important;
    }
    .checkboxes{
        margin-top:10px;
     width: 100%;
    justify-content: center;
    }
    .pages{
        width:100%;
        margin-top:10px;
        margin-bottom:10px;
        justify-content:center;
        display:flex;
        padding-right:unset;
        padding:0 0.75rem

    }
    .checkboxes label {
    margin: auto;
}
    .pages span{
        margin:auto;
    }
  .left-pane, .right-pane{
    display:none;
  }
  .heading{
    display:flex!important;
  }
  .cart-table table.responsive-table tbody {
    display: flex!important;
    flex-wrap: wrap!important;
    justify-content: center!important;
    align-items: center!important;
}
  .centar{
      width:100%!important;
      margin FONT-VARIANT: JIS04;
  }
  .wrapper{
    padding:unset!important;
  }
}

.product-adder button {
    border: none;
    background: #c14849;
    color: white;
    display: flex;
    align-items: center;
    font-size: 12px;
    float: right;
    margin-left: auto;
    border-radius: 2px;
    font-family: inherit;
    height: 35px;
}
.navbar {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.navbar .pages {
    width: unset!important;
    margin-left: auto;
}
.collapsible li {
    margin-bottom: 10px;
}

ul.collapsible {
    border: none;
    box-shadow: none;
}

.collapsible-header {
    border-radius: 3px;
    background: #383838;
    border: none;
    color: #8c8c8c;
    align-items: center;
    /* line-height: 0!important; */
    font-size: 14px;
}

.transaction-id {
    color: #585858;
    font-size: 10px;
    margin-left: auto;
}

.collapsible-header i.material-icons {
    color: #c14849;
}

.collapsible-header {
    border: 0;
    position: relative;
    padding: .8rem
}

ul.collapsible {
    border: 0;
    box-shadow: none;
    margin-top: 0
}


.collapsible-header i.material-icons {
    font-size: 1.5rem;
}

.collapsible-header:focus {
    background: #414141!important
}

.collapsible-body {
    border-bottom: 0;
    background: #343434;
    padding: 1rem;
}

.card-type-header img {
    width: 45px;
    margin-right: 10px;
    margin-left: 10px
}

.card-type-header {
    background: #383838;
    color: #fff;
    display: flex;
    line-height: 50px;
    align-items: center;
    position: relative;
    font-size: 12px;
}

.card-type-cards {
    background: #525151;
    color: #b0b0b0!important;
}

.card-type-cards tr {
    border-bottom: none
}

.card-type-cards thead {
    background: #434343;
}

.card-type-cards th {
    font-weight: 400
}

.card-type-header span {
    position: absolute;
    right: 10px;
    color: #82cbff;
    cursor: pointer
}

.card-type {
    margin-bottom: 10px
}

.card-type-cards td,.card-type-cards th {
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    color: #c2c2c2;
}

.transaction-detail {
    color: #8c8c8c;
    margin-bottom: 7px;
    font-size: 11px;
}

.transaction-detail.transaction-ide {
    font-size: 12px;
    color: #8c8c8c;
}

.transaction-ide span {
    color: white;
    font-weight: 700;
    margin-left: 5px;
    text-transform: uppercase;
    font-size: 11px;
    cursor: pointer;
    background: #c14849;
    padding: 5px;
}
.deposit-details {font-size: 12px;color: #747474;}

.method img {
    width: 100px;
    position: relative;
    left: -5px;
}

.row.deposit {
    background: #383838;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-left: 3px solid;
}

.method {
    margin-bottom: 5px;
}


.deposit-buttons a {
    display: block;
    width: 100%;
    padding: 5px;
    text-align:center;
    font-size: 12px;
    color: white;
    float: right;
    font-weight: 700;
    font-family: inherit;
    border: none;
    background: #c14849;
    position: relative;
    top: 2.5px;
}

.row.deposit.success {
    border-color: #31a254;
}

.row.deposit.failed {
    border-color: #c14849;
}

.row.deposit.pending {
    border-color: #ff8100;
}

.deposit-buttons .status {text-transform: capitalize;color: #c14849;font-weight: 700;font-size: 14px;text-align: right;}

.deposit-buttons .status.success {
    color: #31a254!important;
}

.cart-table {
    color: #b5b5b5;
    background: #383838;
}

.cart-actions {
    padding: 9px;
    background: #383838;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #8c8c8c;
    font-size: 13px;
}

.cart-actions a {
    padding: 7px;
    height: 25px;
    margin-left: 10px;
    box-shadow: none;
    line-height: 11px;
    font-size: 12px
}

.table-holder i.material-icons {
    font-size: 35px;
    background: -webkit-linear-gradient(#4f52bd,#8c25aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    top: 2px
}

.table-holder {
    color: #9b9b9b;
    background: #434343
}
.cart-table img {
    width: 80px;
}

.cart-table td {
    font-size: 14px;
    color: #8c8c8c;
    padding: 10px 5px;
}

.cart-table a {
    padding: 7px;
    background: #c14849;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    font-size: 12px;
    border-radius: 4px;
    color: white;
}

.cart-table a i.material-icons {
    font-size: 18px;
}

.cart-table tr {
    border-bottom: 0;
    border-bottom: 5px solid #2f2f2f;
}
.heading {
    background: #363636;
    height: 60px;
    display: none;
    align-items: center;
    padding-left: 5px;
}

.heading img.logo {
    height: 45px;
    width: 45px;
}

.heading .brand {
    font-size: 20px;
}
#cashapp li span {
    font-weight: 700;
    color: #ece5e5;
    font-size: 18px
}

.cashapp-text {
    font-size: 16px
}

.cashapp-text2 {
    font-size: 15px;
    color: #818181
}
.modal {
    background: #3a3a3a;
    color: #aaa;
}
.cashapp-text3 {
    font-size: 13px;
    color: #777
}
.heading a {
    color: white;
    font-size: 40px!important;
    margin-left: auto;
    margin-right: 10px;
}
.modal {
    background: #2f2f2f;
}

.modal h4 {
    color: white;
    font-size: 1.8rem;
    text-transform: capitalize;
}

.state-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.modal-footer {
    background-color: #2f2f2f!important;
}

a.modal-close.waves-effect.waves-green.btn-flat {
    color: white;
    background: rgb(49, 162, 84);
}
.baton-state {
    height: 50px;
    width: 50px;
    color: #d1d1d1;
    border: 1px solid #4d4d4d;
    text-align: center;
    line-height: 50px;
    margin-bottom: 10px;
    margin-right: 19px;
}

.baton-state.selected {
    border-color: white;
    border-width: 2px;
}
.heading a i.material-icons {
    font-size: 27px;
}
::-webkit-scrollbar {
    width: 2px
}

::-webkit-scrollbar-track {
    background: #414141
}

::-webkit-scrollbar-thumb {
    background: #6e6e6e
}

::-webkit-scrollbar-thumb:hover {
    background: #555
}
.deposit-image img {
    width: 135px;
    padding: 11px;
}

.deposit-method {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #363636;
    margin-bottom: 5px;
}

.deposit-method div {
    margin-left: auto;
    color: #909090;
    font-size: 13px;
}

.deposit-image {
    margin-left: unset!important;
}

.deposit-name {
    margin-left: 25px!important;
}

.deposit-method .input {
    margin-right: 6px;
}

.centar {}

.deposit-detail {
    display: none;
}

.row.deposit-amt {
    align-items: center;
    margin-bottom: 10px;
}

.deposit-amt input {
    border: none!important;
    font-family: inherit;
    font-size: 12px;
    background: #363636;
    border-radius: 2px;
    color: white;
    display: flex;
    width: 100%;
    margin-bottom: 0;
    border-bottom: none!important;
    padding-left: 15px;
    height: 35px;
    box-shadow: none!important;
    margin-left: -7.5px;
}

.deposit-amt button {
    width: 100%;
    height: 30px;
    background: #c14849;
    font-family: inherit;
    font-size: 12px;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 2px;
    margin-top: 2px;
}

.deposit-methods {margin-bottom: 10px;}

.deposit-info {
    text-align: center;
    color: white;
    font-size: 13px;
}
.swal2-popup {
    background: #2f2f2f!important;
}

.swal2-title {
    color: white!important;
}

.swal2-content {
    color: #8c8c8c!important;
}

.swal2-styled.swal2-confirm {
    background-color: rgb(49, 162, 84)!important;
    border: none!important;
}

button {
  font-family:inherit!important;
}
a.sidenavact.btn-floating.nigo.btn-large.waves-effect.waves-light.lightblue {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #579aff;
}
.ploader {
    position: fixed;
    z-index: 1000000000;
    background: #363636;
    height: 100%;
    width: 100%;
    display: flex;
    top:0;
    align-items: center;
    justify-content: center;
}

.ploader .spinner-layer.spinner-blue-only {
    border-color: #c14849;
}
.row.deposit.check {
    border-color: #ff8100;
}
.product.discounted{
  background:#1e553b66!important;
}
td.discounted{
  color: #8bf88b;
font-weight: 700;
}


.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  padding: 0;
  pointer-events: none;
  width: 100%;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0px;
  top: -12px;
  height: 74px;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 21px;
  border-radius: 50%;
  margin: 12px;
  top: 5px;
  display: inline-block;
  background: #21cd46;
  box-shadow: 0px 4.6666666667px 12px 3px #21cd46;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
  background: aqua;
  box-shadow: 10px 4.6666666667px 12px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 12px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.lightrope li:nth-child(6n+5) {
  background: #ffec63;
  box-shadow: 0px 4.6666666667px 12px 3px #ffec63;
  -webkit-animation-name: flash-4;
          animation-name: flash-4;
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #282828;
  width: 9px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1.4px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 33px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #21cd46;
    box-shadow: 0px 4.6666666667px 24px 3px #21cd46;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%, 100% {
    background: #21cd46;
    box-shadow: 0px 4.6666666667px 24px 3px #21cd46;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: #2700ff;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #c14849;
    box-shadow: 0px 4.6666666667px 24px 3px #c14849;
  }
  50% {
    background: rgba(192, 72, 73, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(192, 72, 73, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #c14849;
    box-shadow: 0px 4.6666666667px 24px 3px #c14849;
  }
  50% {
    background: rgba(192, 72, 73, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(192, 72, 73, 0.2);
  }
}

@-webkit-keyframes flash-4 {
  0%, 100% {
    background: #ffec63;
   box-shadow: 0px 4.6666666667px 24px 3px rgb(255 236 99);
  50% {
      background: rgba(255, 236, 99, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 99, 0.2);
  }
}
@keyframes flash-4 {
  0%, 100% {
    background: #ffec63;
    box-shadow: 0px 4.6666666667px 24px 3px rgb(255 236 99);
  }
  50% {
  background: rgba(255, 236, 99, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 99, 0.2);
  }
}