.payment_page {
  .payment_title {
    display: inline-block;
    font-family: $main-font;
    font-size: 24px;
    line-height: 23px;
    color: $black-color;
    border-bottom: 3px solid $yellow-color;
    margin-bottom: 20px;
  }

  .payment_section {
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
    @media(min-width: 992px) {
      position: relative;
      flex-direction: row-reverse;
      justify-content: space-between;
      margin-bottom: 40px;
      padding-bottom: 100px;
    }

    .payment_popup_overlay {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1030;
    }

    .payment_popup_container {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      border: 1px solid #FFD503;
      padding: 12px 20px 20px 20px;
      width: 330px;
      height: 200px;
      background-color: #FFFFFF;
      z-index: 1031;
      transform: translate(-50%, -50%);

      .payment_popup_text {
        font-size: 18px;
        line-height: 17px;
        font-family: "Gotham Pro", sans-serif;
        color: #000000;
        font-weight: 400;
        text-align: center;
        margin-bottom: 40px;
        margin-top: 24px;
      }

      .payment_popup_btn_container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .payment_popup_log_in_btn {
          font-family: "Gotham Pro", sans-serif;
          color: #000000;
          padding: 21px;
          font-size: 16px;
          line-height: 106.2%;
          letter-spacing: 0.1em;
          font-weight: 400;
          border-radius: 0;
          cursor: pointer;
          background-color: transparent;
          border: 1px solid #FFD503;
          padding: 10px 10px;
        }

        .payment_popup_change_mail_btn {
          border: none;
          background-color: #FFD503;
          font-family: "Gotham Pro", sans-serif;
          color: #000000;
          padding: 21px;
          font-size: 16px;
          line-height: 106.2%;
          letter-spacing: 0.1em;
          font-weight: 400;
          border-radius: 0;
          padding: 10px 10px;
        }
      }

    }
  }

  .order_products_section {
    @media(max-width: 991px) {
      margin-bottom: 20px;
    }

    .order_products_list_container {
      max-width: 350px;
      border: 1px solid $yellow-color;

      .order_products_list {
        padding: 0 23px 0 10px;
        @media(min-width: 991px) {
          padding: 0 10px;
        }

        .order_products_item {
          padding: 20px 0;
          border-bottom: 1px solid #FCF5D3;

          .order_products_link {
            display: flex;
            justify-content: space-between;
            align-items: center;


            .order_products_img_container {
              width: 100px;
              height: 100px;
              margin-right: 20px;
              display: flex;
              align-items: center;
              justify-content: center;

              .order_products_img {
                display: block;
                max-width: 100%;
                max-height: 100%;
              }
            }

            .order_products_text_container {
              width: 177px;
              font-family: $main-font;
              color: $black-color;

              .order_products_name {
                font-size: 16px;
                line-height: 105.5%;
                display: inline;
                font-weight: 600;
              }

              .order_products_author {
                margin-top: 10px;
                font-size: 16px;
                line-height: 15px;
                white-space: nowrap;
              }
            }

            &:hover {
              text-decoration: none;

              .order_products_name {
                box-shadow: inset 0 -0.3em $yellow-color, inset 0 -0.2em $yellow-color;
              }
            }
          }
        }
      }

      .unvisible_orders_list {
        @media (max-width: 991px) {
          border: none;
          display: none;
        }
      }

      .border_none_class {
        border: none;
      }

      .coupon_container_div,
      .coupon_container {
        display: none !important;
      }
    }
  }

  #cart_total {
    .table {
      margin: 0;

      .no_border {
        @media (max-width: 991px) {
          border: none !important;
        }
      }

      #order_delivery,
      #order_total_undiscounted,
      #order_discount {
        display: flex;
        justify-content: space-between;


        .text-right,
        .text-xl-right {
          vertical-align: center;
          text-align: left !important;
          padding: 10px;
          font-size: 18px;
          line-height: 17px;
          font-weight: 400;
          color: #000000 !important;
        }

        .text-xl-right {
          vertical-align: center;
          text-align: right !important;
        }
      }

      .order_taxes_display {
        @media(max-width: 991px) {
          display: none !important;
        }
      }

      #order_total_untaxed {
        margin-top: 10px;
      }

      .discount {
        margin-bottom: 10px;
      }

      .total {
        display: flex !important;
        justify-content: space-between;
        align-content: center;
        width: 100%;
        border-top: 1px solid $yellow-color;
        @media(min-width: 992px) {
          background-color: $yellow-color;
          justify-content: space-around;
        }


        .text-right,
        .text-xl-right {
          vertical-align: center;
          text-align: center !important;
          padding: 32px 10px;
          font-size: 20px;
          line-height: 19px;
          @media(max-width: 991px) {
            padding: 12px 10px;
            font-size: 18px;
            line-height: 17px;
          }
        }


        .text-xl-right {
          text-align: left !important;
        }

        .svg_container {
          display: flex;
          align-items: center;
          @media(min-width: 992px) {
            display: none;
          }

          svg {
            margin-right: 16px;
          }
        }
      }
    }
  }

  .oe_cart {
    position: static;
    @media(min-width: 992px) and (max-width: 1199px) {
      width: 60%;
    }
    @media(min-width: 1200px) {
      width: 50%;
    }

    #delivery_carrier {
      .address_delivery_fields {
        flex-direction: column;
        margin-bottom: 20px;
        display: none;
        @media(min-width: 768px) {
          width: 278px;
          max-width: 278px;
        }
      }

      .delivery_methods_container {
        .delivery_methods_section_title {
          font-size: 20px;
          line-height: 19px;
          font-family: $main-font;
          color: #000000;
          font-weight: 700;
          margin-bottom: 20px;
        }

        .delivery_methods_div {
          margin-bottom: 20px;

          .delivery_type_label {
            font-weight: 400;
            font-size: 18px;
            line-height: 17px;
            color: #000000;

            .delivery_type_label_svg {
              margin-right: 20px;
              border: 1px solid #E6E6E6;
              border-radius: 50%;
            }
          }

          .delivery_type_input {
            display: none !important;
          }

          .delivery_type_input:checked + .delivery_type_label {
            .delivery_type_label_svg {
              circle {
                fill: #FFD503;
                stroke: #E6E6E6;
              }
            }
          }

          .badge {
            display: none;
          }
        }

        .type_method_delivery_container {
          .method_types_box_svg {
            margin-right: 20px;
            border: 1px solid #E6E6E6;
            border-radius: 50%;
          }
        }
      }

      .personal_user_info,
      .personal_delivery_info {
        @media(min-width: 992px) {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 100%;
        }

        .container_last_name,
        .container_first_name,
        .container_email,
        .container_phone,
        .container_city,
        .container_warehouse,
        .container_region {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
          @media(min-width: 768px) {
            width: 278px;
            max-width: 278px;
          }
        }
      }

      .input_label {
        font-size: 18px;
        line-height: 17px;
        font-family: $main-font;
        color: #000000;
        font-weight: 400;
        margin-bottom: 5px;
      }

      .user_info_input,
      #city_input,
      #city_input_disabled,
      #warehouse_input,
      #warehouse_input_disabled,
      #street_input,
      #street_input_disabled,
      #house_input,
      #flat_input,
      #region_input,
      #region_input_disabled {
        height: 40px;
        border: 1px solid #7C7C7C;
        padding: 2px 10px;
        font-size: 13px;
        color: #000000;

        &:focus {
          border: 2px solid #000000;
        }
      }

      .error_message {
        display: none;
        color: red;
        font-family: $main-font;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        margin-top: 5px;
      }

      .delivery_methods_section_title {
        font-size: 20px;
        line-height: 19px;
        font-family: $main-font;
        color: #000000;
        font-weight: 700;
        margin-bottom: 20px;
        margin-top: 20px;
      }

    }

    #payment_method {
      .delivery_methods_section_title {
        font-size: 20px;
        line-height: 19px;
        font-family: $main-font;
        color: #000000;
        font-weight: 700;
        margin-bottom: 20px;
        margin-top: 20px;
      }

      .o_payment_form {
        @media(max-width: 991px) {
          display: flex;
          flex-direction: column;
        }

        .card {
          border: none;
          border-radius: 0;
          @media(max-width: 991px) {
            order: 1;
          }

          .card-body {
            padding-top: 0 !important;

            label {
              .payment_option_name {
                color: #000000;
                font-size: 18px;
                line-height: 17px;
                font-family: $main-font;
              }
            }
          }

          .delivery_order_comment_container {
            display: flex;
            flex-direction: column;
            @media(min-width: 992px) {
              margin-bottom: 20px;
            }

            .delivery_order_comment_label {
              font-size: 18px;
              line-height: 17px;
              font-family: $main-font;
              font-weight: 700;
              color: #000000;
              margin-bottom: 5px;
            }

            .delivery_order_comment_textarea {
              border: 1px solid #E5E5E5;
              max-width: 330px;
              min-height: 90px;
              padding: 10px;
              resize: none;
            }
          }
        }

        .float-left,
        .float-right {
          @media(max-width: 991px) {
            float: none !important;
            display: flex;
            justify-content: center;
          }

          .btn-secondary,
          .btn-primary {
            border: none;
            background-color: $yellow-color;
            font-family: $main-font;
            color: #000000;
            padding: 21px;
            font-size: 16px;
            line-height: 106.2%;
            letter-spacing: 0.1em;
            font-weight: 400;
            border-radius: 0;
            @media(max-width: 991px) {
              margin-bottom: 20px;
            }

            &:active {
              box-shadow: none;
              outline: none;
            }
          }

          .btn-secondary {
            background-color: transparent;
            border: 1px solid $yellow-color;
          }
        }

        .float-left {
          @media(max-width: 991px) {
            order: 3;
          }
          @media(min-width: 992px) {
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }

        .float-right {
          @media(max-width: 991px) {
            order: 2;
            margin-top: 20px !important;
          }
          @media(min-width: 992px) {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }

        .o_payment_acquirer_select {
          .badge-pill {
            position: static;
          }
        }
      }
    }
  }

  .svg_rotate {
    transform: rotateX(180deg) !important;
  }
}

.container_warehouse, .container_city, .container_street, .container_region {
  position: relative;

  .list_city,
  .list_warehouse,
  .list_street,
  .region_list {
    position: absolute;
    top: 62px;
    left: 0;
    z-index: 11;
    background-color: #FFF;
    display: none;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    max-height: 280px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: #aaa;
    }

    .city_search,
    .warehouse_search,
    .street_search,
    .region_search {
      cursor: pointer;
      border-bottom: 1px solid black;
      padding: 2px 10px;

      &:hover {
        background-color: #FFD503;
      }
    }
  }
}


.spinner {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999999;
  display: flex;
  justify-content: center;
  align-items: center;

  .spinner_img {
    width: 200px;
    height: 200px;
    background-image: url(/web_cart/static/src/img/spinner.gif);
    background-position: center;
    background-repeat: no-repeat;
  }
}