@import "variables";

.view-list-tours {
  font-family: @font-family-nunito-serif;
  font-size: @font-size-base;
  font-weight: @font-weight-normal;
  color: @text-color-1;

  .wrapper-search-tour {
    width: 100%;
    border: @border-gray;
    border-radius: @border-radius-base;
    margin-bottom: 30px;

    form.form-search-tour {
      width: 100%;

      .block-title-search-tour {
        padding: 15px 0;

        h4 {
          font-size: @font-size-h4;
          font-weight: @font-weight-semibold;
          text-transform: uppercase;
          padding: 5px 0 5px 10px;
          border-left: 3px solid #5191FA;
        }
      }

      .block-select-destination {
        border-top: @border-gray;
        position: relative;
        width: 100%;
        height: 90px;

        i {
          font-size: @font-size-large;
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          z-index: 1;
          color: @text-color-2;
        }

        label {
          position: absolute;
          top: 10px;
          left: 40px;
          z-index: 1;
          color: @text-color-2;
          font-weight: @font-weight-normal;
          @media (min-width: 576px) and (max-width: 767.98px) {
            left: 50px;
          }
        }

        select.select-destination {
          outline: none;

          &:active, &:focus {
            outline: none;
          }
        }

        .select2-container--default {
          width: 100% !important;
          height: 100%;

          .selection {
            .select2-selection--single {
              width: 100%;
              height: 100%;
              border: none;

              .select2-selection__rendered {
                line-height: 90px;
                padding-left: 40px;
                color: #5191FA;
                font-size: @font-size-medium;
                font-weight: @font-weight-semibold;
                @media (min-width: 576px) and (max-width: 767.98px) {
                  padding-left: 50px;
                }
              }

              .select2-selection__arrow {
                display: none;
              }
            }
          }
        }
      }

      .block-select-date {
        position: relative;
        width: 100%;
        height: 90px;
        border-top: @border-gray;

        i {
          font-size: @font-size-large;
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          z-index: 1;
          color: @text-color-2;
        }

        label {
          position: absolute;
          top: 10px;
          left: 40px;
          z-index: 1;
          color: @text-color-2;
          font-weight: @font-weight-normal;
          @media (min-width: 576px) and (max-width: 767.98px) {
            left: 50px;
          }
        }

        input[name="datetimes"] {
          border: none;
          height: 100%;
          padding-left: 40px;
          outline: none;
          color: #5191FA;
          font-weight: @font-weight-semibold;
          @media (min-width: 576px) and (max-width: 767.98px) {
            padding-left: 50px;
          }

          &:active {
            outline: none;
          }
        }
      }

      .block-more-option {
        border-top: @border-gray;
        padding-top: 20px;

        .title-more-option {
          p {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            color: #5191FA;
            cursor: pointer;
            padding-right: 15px;

            span {
              font-size: @font-size-medium;
              font-weight: @font-weight-semibold;
              display: inline-block;
              margin-right: 10px;
            }

            i {
              font-size: @font-size-base;
            }
          }
        }

        .block-filter-price {
          padding: 15px;

          h5 {
            font-size: @font-size-h5;
            font-weight: @font-weight-semibold;
          }

          input#amount_1 {
            text-align: center;
            font-size: @font-size-base;
            border: none;
            padding: 10px 0 10px 0;
            outline: none;

            &:active {
              outline: none;
            }
          }

          #slider-container-1 {
            height: 6px;
            background-color: #ced0d3;

            .ui-slider-range {
              background: none;
              background-color: #5191fa;
              border: none;
            }

            .ui-slider-handle {
              top: 50%;
              transform: translateY(-50%);
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: none;
              background-color: #5191fa;
              border: none;
              margin-left: -5px;
            }
          }
        }

        .block-tour-categories {
          padding: 15px;
          display: flex;
          flex-flow: column wrap;
          justify-content: flex-start;
          align-items: flex-start;

          h5 {
            font-size: @font-size-h5;
            font-weight: @font-weight-semibold;
            margin-bottom: 15px;
          }

          .block-tour-type-item {
            display: flex;
            flex-flow: column wrap;
            align-items: flex-start;
            @media (min-width: 768px) and (max-width: 991.98px) {
              display: grid;
              grid-column-gap: 20px;
              grid-row-gap: 20px;
              grid-template-columns: 1fr 1fr;
            }

            label {
              font-size: @font-size-base;
              font-weight: @font-weight-normal;

              input[name="tour_type[]"] {
                margin-right: 10px;
                outline: none;

                &:active {
                  outline: none;
                }
              }
            }
          }
        }
      }

      .block-button-search {
        width: 100%;
        padding: 15px;

        button {
          width: 100%;
          text-transform: uppercase;
          font-size: @font-size-base;
          font-weight: @font-weight-semibold;
        }
      }
    }
  }

  .wrapper-filter-tour {
    width: 100%;
    border: @border-gray;
    border-radius: @border-radius-base;

    form.form-filter-tour {
      .block-tilte-filter {
        padding: 15px 0;

        h4 {
          font-size: @font-size-h4;
          font-weight: @font-weight-semibold;
          text-transform: uppercase;
          padding: 5px 0 5px 10px;
          border-left: 3px solid #5191FA;
        }
      }

      .block-filter-price {
        &.price-filter {
          padding: 15px;

          h5.title-item {
            font-size: @font-size-h5;
            font-weight: @font-weight-semibold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            i {
              transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            &.slide-up {
              i {
                transform: rotate(180deg);
                display: inline-block !important;
              }
            }
          }

          .block-filter-price-inner {
            input#amount_2 {
              text-align: center;
              font-size: @font-size-base;
              border: none;
              padding: 10px 0 10px 0;
              outline: none;

              &:active {
                outline: none;
              }
            }

            #slider-container-2 {
              height: 6px;
              background-color: #5191fa;
              margin-bottom: 15px;

              .ui-slider-range {
                background: none;
                background-color: #5191fa;
                border: none;
              }

              .ui-slider-handle {
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: none;
                background-color: #5191fa;
                border: none;
                margin-left: -5px;
              }
            }

            a {
              font-weight: @font-weight-bold;
            }
          }
        }
      }

      .block-review-score {
        padding: 15px;
        border-top: @border-gray;

        h5.title-item {
          font-size: @font-size-h5;
          font-weight: @font-weight-semibold;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;

          i {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          }

          &.slide-up {
            i {
              transform: rotate(180deg);
              display: inline-block !important;
            }
          }
        }

        .block-select-rating {
          margin-top: 15px;

          .block-rating-item {
            label {
              display: flex;
              justify-content: flex-start;
              align-items: center;

              ul.list-star-rating {
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                li.star-icon {
                  margin-left: 10px;

                  i {
                    &.fas {
                      color: #FFDC00;
                    }

                    &.far {
                      color: #D7DBE3;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .block-tour-type {
        padding: 15px;
        border-top: @border-gray;

        h5.title-item {
          font-size: @font-size-h5;
          font-weight: @font-weight-semibold;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;

          i {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          }

          &.slide-up {
            i {
              transform: rotate(180deg);
              display: inline-block !important;
            }
          }
        }

        .block-select-tour-type {
          display: flex;
          flex-flow: column wrap;
          justify-content: flex-start;
          align-items: flex-start;

          label {
            font-size: @font-size-base;
            font-weight: @font-weight-normal;

            input[name="tour_type"] {
              margin-right: 15px;
              outline: none;

              &:active {
                outline: none;
              }
            }
          }
        }
      }

      .block-duration {
        padding: 15px;
        border-top: @border-gray;

        h5.title-item {
          font-size: @font-size-h5;
          font-weight: @font-weight-semibold;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;

          i {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          }

          &.slide-up {
            i {
              transform: rotate(180deg);
              display: inline-block !important;
            }
          }
        }

        .block-select-duration {
          display: flex;
          flex-flow: column wrap;
          justify-content: flex-start;
          align-items: flex-start;

          label {
            font-size: @font-size-base;
            font-weight: @font-weight-normal;

            input[name="duration"] {
              margin-right: 15px;
              outline: none;

              &:active {
                outline: none;
              }
            }
          }
        }
      }

      .block-language {
        padding: 15px;
        border-top: @border-gray;

        h5.title-item {
          font-size: @font-size-h5;
          font-weight: @font-weight-semibold;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          i {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          }

          &.slide-up {
            i {
              transform: rotate(180deg);
              display: inline-block !important;
            }
          }
        }

        .block-select-language {
          display: flex;
          flex-flow: column wrap;
          justify-content: flex-start;
          align-items: flex-start;

          label {
            font-size: @font-size-base;
            font-weight: @font-weight-normal;

            input[name="language"] {
              margin-right: 15px;
              outline: none;

              &:active {
                outline: none;
              }
            }
          }
        }
      }
    }
  }

  .wrapper-block-result {
    .block-top-result {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;

      .result-title {
        h3 {
          font-size: @font-size-h3;
          font-weight: @font-weight-semibold;
        }
      }

      .block-sorting-display {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;

        .block-sorting-dropdown {
          margin-right: 20px;

          .dropdown {
            a.dropdown-toggle {
              color: @text-color-1;
              font-size: @font-size-medium;
              font-weight: @font-weight-semibold;
            }

            .dropdown-menu {
              padding: 15px;
              left: unset;
              right: 0;

              h4 {
                font-size: @font-size-h4;
                font-weight: @font-weight-semibold;
                margin-bottom: 10px;
              }

              label {
                font-size: @font-size-base;
                font-weight: @font-weight-normal;

                span {
                  display: inline-block;
                  margin-left: 10px;
                }
              }

              .sort-by-price, .sort-by-name {
                display: flex;
                flex-flow: column wrap;
                align-items: flex-start;
                justify-content: flex-start;

                p {
                  font-size: @font-size-base;
                  font-weight: @font-weight-semibold;
                  color: @text-color-2;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }

        .block-display-button {
          ul {
            border: none;

            li {
              margin: 0;

              &.active {
                a {
                  color: #5191fa;
                }
              }

              &:last-child {
                @media (max-width: 575.98px) {
                  display: none;
                }
              }

              a {
                border: none;
                padding: 5px;
                color: @text-color-1;

                i {
                  font-size: @font-size-large;
                }
              }
            }
          }
        }
      }
    }

    .wrapper-result-body {
      #grid-display {
        .block-tour-item {
          width: 100%;
          border: @border-gray;
          border-radius: @border-radius-base;
          overflow: hidden;
          margin-bottom: 30px;
          @media (min-width: 992px) and (max-width: 1199.98px) {
            min-height: 436px;
          }

          .content-top {
            width: 100%;
            height: 204px;
            position: relative;
            overflow: hidden;

            &:hover {
              .block-img {
                transform: scale(1.2);
              }
            }

            .block-img {
              width: 100%;
              height: 100%;
              transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);

              div {
                width: 100%;
                height: 100%;
                padding-bottom: calc(100% * 204 / 277);
                position: relative;

                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  object-fit: cover;
                  object-position: center;
                }
              }
            }

            .block-feature {
              position: absolute;
              top: 30px;
              left: 0;
              z-index: 10;
              width: 100%;
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              align-items: center;

              .label-feature {
                width: 80px;
                text-align: center;
                padding: 6px 10px;
                background-color: #19A1E5;
                visibility: hidden;

                &.visible {
                  visibility: visible;
                }

                span {
                  color: #ffffff;
                  font-size: 14px;
                  font-weight: @font-weight-semibold;
                }
              }

              i {
                display: inline-block;
                font-size: @font-size-large;
                color: @text-color-4;
                margin-right: 30px;
              }
            }

            span.box-sale {
              position: absolute;
              width: 80px;
              height: 48px;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              right: -30px;
              top: -13px;
              line-height: 65px;
              text-align: center;
              color: #fff;
              font-size: 15px;
              z-index: 8;
              background-color: #cc0033;
            }
          }

          .content-bottom {
            padding: 15px;
            min-height: 186px;

            .place-tour {
              font-size: @font-size-base;
              color: #5e6d77;
              margin-bottom: 15px;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;

              i {
                font-size: @font-size-base;
                display: inline-block;
                margin-right: 10px;
              }
            }

            h4.name-tour {
              font-size: @font-size-h4;
              font-weight: @font-weight-semibold;
              margin-bottom: 10px;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;

              a {
                color: @text-color-1;
              }
            }

            .block-rating {
              display: flex;
              flex-flow: row wrap;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 20px;

              ul.list-rating-star {
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: 0 20px 0 0;

                .item-star {
                  margin: 0;

                  & + .item-star {
                    margin-left: 5px;
                  }

                  i {
                    font-size: @font-size-base;

                    &.fas {
                      color: #FFDC00;;
                    }

                    &.far {
                      color: #D7DBE3;
                    }
                  }
                }
              }

              .rating-review {
                span {
                  color: #768092;
                }
              }
            }

            .block-price-sale {
              width: 100%;
              text-align: right;
              min-height: 20px;

              span {
                font-size: @font-size-base;
                color: #cc0033;
                text-decoration: line-through;
              }
            }

            .block-trip-price {
              display: flex;
              flex-flow: row wrap;
              justify-content: space-between;
              align-items: center;

              .time-trip {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                span {
                  font-size: @font-size-base;
                  color: #768092;
                  display: inline-block;
                  margin-left: 10px;
                }

                i {
                  font-size: @font-size-base;
                  color: #768092;
                }
              }

              .price-tour {
                & > span {
                  &:first-child {
                    font-size: @font-size-base;
                    color: #768092;
                    display: inline-block;
                    margin-right: 10px;

                    i {
                      color: #FA5636;
                    }

                    span {
                      display: inline-block;
                      margin-left: 5px;
                    }
                  }

                  &:last-child {
                    font-size: @font-size-medium;
                    font-weight: @font-weight-bold;
                    color: @text-color-1;
                  }
                }
              }
            }
          }
        }

        .alert-block {
          width: 100%;
          padding: 10px 20px;
          background-color: #fcf8e3;
          border: 1px solid #8a6d3b;
          border-radius: @border-radius-base;

          span {
            font-size: @font-size-base;
            color: @text-color-2;
          }
        }
      }

      #list-display {
        @media (max-width: 575.98px) {
          display: none;
        }

        .block-tour-item-display-list {
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 250px;
          border: @border-gray;
          border-radius: @border-radius-base;
          overflow: hidden;
          margin-bottom: 30px;
          @media (min-width: 992px) and (max-width: 1199.98px) {
            height: 275px;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            height: 275px;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            flex-flow: row wrap;
            height: unset;
          }

          .block-info-content {
            width: 270px;
            height: 100%;
            overflow: hidden;
            position: relative;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              width: 35%;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              width: 35%;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              width: 100%;
            }

            .img-block {
              width: 100%;
              height: 100%;
              transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
              @media (min-width: 576px) and (max-width: 767.98px) {
                height: 50%;
              }

              &:hover {
                transform: scale(1.2);
              }

              div {
                width: 100%;
                height: 100%;
                padding-bottom: calc(100% * 250 / 270);
                position: relative;
                @media (min-width: 768px) and (max-width: 991.98px) {
                  padding-bottom: calc(100% * 273 / 217);
                }
                @media (min-width: 576px) and (max-width: 767.98px) {
                  padding-bottom: calc(100% * 1 / 2);
                }

                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  object-fit: cover;
                  object-position: center;
                }
              }
            }

            .block-feature {
              position: absolute;
              top: 30px;
              left: 0;
              z-index: 10;
              width: 100%;
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              align-items: center;

              .label-feature {
                width: 80px;
                text-align: center;
                padding: 6px 10px;
                background-color: #19A1E5;
                visibility: hidden;

                &.visible {
                  visibility: visible;
                }

                span {
                  color: #ffffff;
                  font-size: @font-size-base;
                  font-weight: @font-weight-semibold;
                }
              }

              i {
                display: inline-block;
                font-size: @font-size-large;
                color: @text-color-4;
                margin-right: 30px;
              }
            }
          }

          .content-infor-tour {
            width: 442px;
            height: 100%;
            padding: 30px;
            border-right: 1px solid #DCD7D7;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              width: 40%;
              padding: 30px 15px;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              width: 40%;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              width: 50%;
            }

            .place-tour {
              font-size: @font-size-base;
              color: #5e6d77;
              margin-bottom: 15px;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;

              i {
                font-size: @font-size-base;
                display: inline-block;
                margin-right: 10px;
              }
            }

            h4.name-tour {
              font-size: @font-size-h4;
              font-weight: @font-weight-semibold;
              margin-bottom: 10px;

              a {
                color: @text-color-1;
              }
            }

            .block-rating {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 20px;

              ul.list-rating-star {
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: 0 20px 0 0;

                .item-star {
                  margin: 0;

                  & + .item-star {
                    margin-left: 5px;
                  }

                  i {
                    font-size: @font-size-base;

                    &.fas {
                      color: #FFDC00;;
                    }

                    &.far {
                      color: #D7DBE3;
                    }
                  }
                }
              }

              .rating-review {
                span {
                  color: #768092;
                }
              }
            }

            div.description {
              font-size: @font-size-base;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              height: 68px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .content-right {
            width: 20%;
            height: 100%;
            position: relative;
            padding: 30px 20px;
            overflow: hidden;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              width: 25%;
              padding: 30px 15px;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              width: 25%;
              padding: 30px 15px;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              width: 50%;
              padding: 30px;
            }

            span.box-sale {
              position: absolute;
              width: 80px;
              height: 48px;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              right: -30px;
              top: -13px;
              line-height: 65px;
              text-align: center;
              color: #fff;
              font-size: 15px;
              z-index: 8;
              background-color: #cc0033;
            }

            .price-tour {
              display: flex;
              flex-flow: column wrap;
              align-items: flex-end;
              margin-bottom: 20px;

              .old-price {
                min-height: 22px;
                color: #A9AEB8;
                font-size: @font-size-base;
                font-weight: @font-weight-semibold;
                text-decoration: line-through;
              }

              .new-price {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                @media (min-width: 576px) and (max-width: 767.98px) {
                  justify-content: flex-end;
                }

                & > span {
                  &:first-child {
                    font-size: @font-size-base;
                    color: #768092;
                    display: inline-block;
                    margin-right: 10px;
                    @media (min-width: 992px) and (max-width: 1199.98px) {
                      margin-right: 3px;
                    }
                    @media (min-width: 768px) and (max-width: 991.98px) {
                      margin-right: 5px;
                    }
                    @media (min-width: 576px) and (max-width: 767.98px) {
                      margin-right: 30px;
                    }

                    i {
                      color: #FA5636;
                    }

                    span {
                      display: inline-block;
                      margin-left: 5px;
                    }
                  }

                  &:last-child {
                    font-size: @font-size-medium;
                    font-weight: @font-weight-bold;
                    color: @text-color-1;
                  }
                }
              }
            }

            .trip-time, .tour-type-detail {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 15px;
              padding-left: 5px;

              span {
                width: 100%;
                font-size: @font-size-base;
                color: #768092;
                display: inline-block;
                margin-left: 10px;
              }

              i {
                font-size: @font-size-base;
                color: #768092;
              }
            }

            .tour-type-detail {
              span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .view-more {
              width: 100%;
              text-align: center;

              button {
                font-size: @font-size-base;
                font-weight: @font-weight-semibold;
                text-transform: uppercase;
                padding: 5px 15px;
              }

              .btn-primary:hover {
                font-weight: bold;
              }
            }
          }
        }

        .alert-block {
          width: 100%;
          padding: 10px 20px;
          background-color: #fcf8e3;
          border: 1px solid #8a6d3b;
          border-radius: @border-radius-base;

          span {
            font-size: @font-size-base;
            color: @text-color-2;
          }
        }
      }
    }
  }

  ul.pagination-tour {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      margin: 0;

      &.prev, &.next {
        margin: 0;
      }
    }
  }
}

.select2-container--default {
  .select2-dropdown {
    .select2-results {
      ul.select2-results__options {
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
          background-color: #F5F5F5;
        }

        &::-webkit-scrollbar {
          width: 5px;
          background-color: #F5F5F5;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #F90;
          background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, .2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, .2) 50%,
          rgba(255, 255, 255, .2) 75%,
          transparent 75%,
          transparent)
        }
      }
    }
  }
}

.field_change_symols {

  .form-inline {
    .currency-addon {
      font-size: 20px;
      font-weight: 600;
    }
    .currency-symbol{
      font-size: 20px;
      font-weight: 600;
    }
  }
}