div.top-header-left-login-icon {
    cursor: pointer;
}

.context-menu {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 0;
    margin: 0;
    min-width: 150px;
    z-index: 1000;
    display: none;
}

.myaccount-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.myaccount-menu-item {
    border-bottom: 1px solid #eee;
}

.myaccount-menu-item:last-child {
    border-bottom: none;
}

.myaccount-menu-item a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
}

.myaccount-menu-item a:hover {
    background-color: #f5f5f5;
}

  div.sidebar_popup_blocker {
    display: none;
    transform: scale(1);
    overflow: hidden;
    position: fixed;
    z-index: 11000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, .25);
    transition: background-color .4s, transform 0s;
    text-align: right;

    div.social_login_section {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 16px;
    }

    div.sidebar_popup {
      position: fixed;
      left: var(--side-cart-alignment-left, 0);
      right: var(--side-cart-alignment-right, auto);
      transform: translateX(0);
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      font-size: 14px;
      min-height: 200px;
      width: 540px;
      max-width: 100%;
      transition: .3s;
      /* padding: var(--cart-padding, 20px 30px); */
      background-color: var(--cart-background-color, #fff);
      box-shadow: 0 0 20px rgba(0, 0, 0, .2);
      border-style: var(--cart-border-style, none);
      border-color: var(--cart-border-color, initial);
      border-radius: var(--cart-border-radius, 0);
      margin-top: var(--mini-cart-spacing, 0);

      div.top_gradient_background {
        background: linear-gradient(to right, #EB6858, #D3208B);
        position: absolute;
        height: 368px;
        width: 100%;
        top: 0px;
        left: 0px;
      }
      div.close_sidebar_button button {
        position: absolute;
        top: 0px;
        color: white;
        font-size: 28px;
      }
    }

    div.sidebar_popup {
      div.sidebar_content {
        z-index: 11002;
        margin: 60px 40px;
        overflow-y: auto;
        div.main_content {
          padding-bottom: 80px;
          background-color: white;
          border-radius: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 32px;
          box-shadow: 0px 3px 15px 0px #0000001F;

          span.soft_message{
            font-weight: 300;
            font-size: 20px;
            margin-top: 56px;
            padding: 8px;
          }
          span.phone_bold, span.email_bold {
            font-size: 26px;
            margin-top: 12px;
            padding: 8px;
            word-break: break-all;
          }
          div.token_content{
            margin: 0px 96px;
            margin-top: 16px;
            display: flex;
            gap: 10px;
            flex-direction: row-reverse;
            input {
              font-size: 20px;
              border: 0px;
              border-bottom: 1px #A2A1A1 solid !important;
              text-align: center;
              appearance: textfield;
              padding: .5rem 0rem;
            }
          }
          span.valid_for_x_minutes {
            margin-top: 16px;
            /* margin-bottom: 56px; */
            font-size: 17px;
            display: flex;
            &:before {
              display: inline-block;
              margin-left: 8px;
              width: 21px;
              height: 21px;
              content: '';
              background-image: url('data:image/svg+xml;utf8,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_311_5557" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="21"><rect x="0.5" y="0.800781" width="20" height="20" fill="url(%23paint0_linear_311_5557)"/></mask><g mask="url(%23mask0_311_5557)"><path d="M8 3.30078V1.63411H13V3.30078H8ZM9.66667 12.4674H11.3333V7.46744H9.66667V12.4674ZM10.5 19.1341C9.47222 19.1341 8.50347 18.9362 7.59375 18.5404C6.68403 18.1445 5.88889 17.6063 5.20833 16.9258C4.52778 16.2452 3.98958 15.4501 3.59375 14.5404C3.19792 13.6306 3 12.6619 3 11.6341C3 10.6063 3.19792 9.63758 3.59375 8.72786C3.98958 7.81814 4.52778 7.023 5.20833 6.34244C5.88889 5.66189 6.68403 5.12369 7.59375 4.72786C8.50347 4.33203 9.47222 4.13411 10.5 4.13411C11.3611 4.13411 12.1875 4.273 12.9792 4.55078C13.7708 4.82855 14.5139 5.23133 15.2083 5.75911L16.375 4.59244L17.5417 5.75911L16.375 6.92578C16.9028 7.62022 17.3056 8.36328 17.5833 9.15494C17.8611 9.94661 18 10.773 18 11.6341C18 12.6619 17.8021 13.6306 17.4062 14.5404C17.0104 15.4501 16.4722 16.2452 15.7917 16.9258C15.1111 17.6063 14.316 18.1445 13.4062 18.5404C12.4965 18.9362 11.5278 19.1341 10.5 19.1341ZM10.5 17.4674C12.1111 17.4674 13.4861 16.898 14.625 15.7591C15.7639 14.6202 16.3333 13.2452 16.3333 11.6341C16.3333 10.023 15.7639 8.648 14.625 7.50911C13.4861 6.37022 12.1111 5.80078 10.5 5.80078C8.88889 5.80078 7.51389 6.37022 6.375 7.50911C5.23611 8.648 4.66667 10.023 4.66667 11.6341C4.66667 13.2452 5.23611 14.6202 6.375 15.7591C7.51389 16.898 8.88889 17.4674 10.5 17.4674Z" fill="url(%23paint1_linear_311_5557)"/></g><defs><linearGradient id="paint0_linear_311_5557" x1="1.62" y1="3.3781" x2="22.1906" y2="11.908" gradientUnits="userSpaceOnUse"><stop stop-color="%23EB6858"/><stop offset="1" stop-color="%23D3208B"/></linearGradient><linearGradient id="paint1_linear_311_5557" x1="3.84" y1="3.88926" x2="19.8928" y2="9.59485" gradientUnits="userSpaceOnUse"><stop stop-color="%23EB6858"/><stop offset="1" stop-color="%23D3208B"/></linearGradient></defs></svg>');
              background-repeat: no-repeat;
            }
          }
          input::placeholder{
            text-align: right;
          }
        }
        div.submit_section {
          margin-top: 24px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: 10px;
          
          span.request_another_token_message {
            color: darkgray;
          }
          button.send_again_message {
            font-size: 17px;
            display: flex;
            cursor: pointer;
            border: 0px;
            &:after {
              content: '';
              display: inline-block;
              width: 21px;
              height: 20px;
              background-image: url('data:image/svg+xml;utf8,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.4998 15.6667L4.6665 9.83333L10.4998 4" stroke="url(%23paint0_linear_2232_540)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_2232_540" x1="4.99317" y1="5.50344" x2="11.7348" y2="6.90118" gradientUnits="userSpaceOnUse"><stop stop-color="%23EB6858"/><stop offset="1" stop-color="%23D3208B"/></linearGradient></defs></svg>');
              background-repeat: no-repeat;
            }
            &:hover {
              background: none;
              color: black;
            }
            &:focus {
              background: none;
              color: black;
            }
          }
          button.enter_token_button {
            min-width: 205px;
          }
        }
      }
    }

    div.sidebar_header {
      display: flex;
      flex-direction: column;
      h3 {
        background-color: transparent;
        margin: 0px !important;
        padding: 0px !important;
        display: flex;
        flex-direction: column;
        &:before {
          content: '';
        }
      }
      span {
        color: white !important;
        align-self: center;
      }
      div {
        align-self: center;
      }
      div.top {
        display: flex;
      }
    }

    div.sidebar_popup.welcome_user_id_input {
        box-shadow: 0px 3px 15px 0px #0000001F;
    }

    div.sidebar_popup.known_user_login,
    div.sidebar_popup.user_email_input, 
    div.sidebar_popup.welcome_user_id_input {
      div.sidebar_content {
        overflow: auto;

        div.sidebar_header {
          span.top {
            font-size: 26px;
            font-weight: 400;
          }
          span.bottom_regular {
            font-size: 40px;
          }
          span.bottom_bold {
            font-weight: 600;
            font-size: 40px;
          }
        }
        div.main_content {
          background-color: white;
          border-radius: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
          padding: 0 8px 80px;
          
          input.please_enter_user_email {
            margin-bottom: 56px;
          }
          div.inputs_container {
            width: 100%;
            label {
              width: 100%;
              font-size: 15px;
              font-weight: 400;
              color: #545454;
              abbr.required {
                color: #545454;
              }
            }
            input {
              font-size: 17px;
            }
            input::placeholder {
                color: #171515;
            }
          }
          div.pink_msg_not_found{
            border-radius: 8px;
            padding: 16px;
            font-size: 16px;
            line-height: 24px;
            background: rgba(211, 32, 139, 0.05);
            display: flex;
            flex-wrap: wrap;
            svg {
              margin-left: 8px;
            }
            span.msg_bold {
              font-weight: 500;
            }
          }
          div.two_inputs_container {
            display: flex;
            gap: 24px;
          }
          input {
            border: 0px;
            border-bottom: 1px #A2A1A1 solid !important;
          }
        }
      }
    }
    div.sidebar_popup.known_user_login {
      span.soft_message {
        margin-top: 0px !important;
      }
      div.pink_msg_not_found {
        margin: 20px 20px 0px;
      }
    }
    div.sidebar_popup.unknown_user_register {
      box-shadow: 0px;
      div.sidebar_content {
        div.sidebar_header {
          span.top_regular {
            font-size: 40px;
          }
          span.top_bold {
            font-weight: 600;
            font-size: 40px;
          }
          div.top{
            flex-direction: row;
            gap: 8px;
          }
        }
        div.main_content {
          background-color: white;
          border-radius: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 30px 40px 30px 40px;
          gap: 28px;
          div.inputs_container {
            width: 100%;
            label {
              width: 100%;
              font-size: 15px;
              line-height: 18px;
              font-weight: 400;
              color: #545454;
              abbr.required {
                color: #545454;
              }
            }
            input {
              font-size: 17px;
              line-height: 20px;
            }
            input::placeholder {
                color: #171515;
            }
          }
          div.pink_msg_not_found{
            border-radius: 8px;
            padding: 16px;
            font-size: 16px;
            line-height: 24px;
            background: rgba(211, 32, 139, 0.05);
            display: flex;
            flex-wrap: wrap;
            svg {
              margin-left: 8px;
            }
            span.msg_bold {
              font-weight: 500;
            }
          }
          div.two_inputs_container {
            display: flex;
            gap: 24px;
          }
          input {
            border: 0px;
            border-bottom: 1px #A2A1A1 solid !important;
          }
        }
        div.submit_section {
          min-width: 305px;
        }
      }
    }
  }

@media screen and (max-width: 767px) {

  div.sidebar_popup_blocker {
    div.sidebar_popup.unknown_user_register {
      div.sidebar_content {
        div.sidebar_header {
          div.top {
              flex-direction: column;
          }
        }
      }
    }
  }

	div.token_content {
	    	margin: 0px 10px !important;
		gap:5px !important;
	}
	div.token_content input{
		font-size:18px !important
	}
	div.sidebar_content{
		margin: 30px 14px !important;
	}
  div.social_login_section {
    flex-direction: column;
  }
}