/* Smartphones, portrait iPhone, portrait 480x320 phones (Android) (320px) (20em) --------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 20em) {
    .div_search {
        width: 55vw;
    }

    .item__title-modal-popup {
        padding: 10px 10px 0px 10px;
    }

    .custommer_table-orderconfirm {
        border-bottom: 6px solid var(--background-gray);
    }

    .border-line-item {
        border: none;
    }

    .img_selected {
        border: 2px solid var(--border-img-choosed) !important;
    }

    .scrollbar_table {
        height: calc(95vh - 170px);
    }

    .scrollbar {
        border-radius: 12px;
    }

    .discount-price_table_item-total-price-final {
        padding: 5px 16px 5px 10px;
    }

    .discount-price_table_item-title-total-final {
        padding: 0px 0px 0px 16px;
    }

    .header_navbar-Catalog-Column img {
        height: 40px;
        width: 40px;
        border: 2px solid var(--border-img);
    }

    .header_navbar-Catalog {
        height: 100px;
    }

    .container__table tr {
        height: 90px;
        border-bottom: 1px solid var(--background-gray);
    }

    .product__container_table tr {
        height: 108px;
        border-bottom: 1px solid var(--background-gray) !important;
    }

    .custommer__container_table {
        padding: 0 0 0 16px;
    }

    .header {
        display: block;
    }

    .modal__body-popup {
        border-radius: 8px;
    }

    .auth-form__footer-popup {
        border-radius: 8px;
    }

    .auth-form__footer-popup-cancel {
        min-width: 100px;
    }

    .order_container {
        margin-top: 0px;
    }

    .div_log_out {
        padding: 0 2px 0 0;
    }

    .modal__body-product {
        height: 520px;
    }

    .modal__inner-product {
        margin: 0;
    }

    .Order__toggle-switch-total-money {
        padding: 0px 0px 0px 20px;
    }

    .span_left_input_PC {
        height: 18px;
        margin: 0 0 2px 0;
    }

    .span_left_input_CS {
        height: 18px;
        margin: 0 0 2px 0;
    }

    .div_input_PC {
        height: 18px;
    }

    .div_input_CS {
        height: 18px;
    }

    .footer {
        padding: 0 15px;
        height: 40px;
    }

    .footer_btn-order,
    .footer_btn-back,
    .footer_btn-confirm,
    .footer_btn-promotion {
        width: 18rem;
        display: block;
        /*height: 88%;*/
        height: 3rem;
        font-size: 1.2rem;
    }

    .Order__total-money {
        padding: 0 0 0 8px;
        font-size: 14px;
    }

    .Order__toggle-tilte {
        font-size: 14px;

    }

    .div_button_plus_minus {
        margin: 0;
    }

    .form-product-control {
        height: 20px;
        font-size: 12px;
        width: 20px;
    }

    .item__title {
        font-size: 1.2rem;
        padding: 0;
        margin: 0;
    }

    .container__table_item--left {
        padding: 0px 12px 0px 0px;
    }

    .item__Total_Price {
        font-size: 1.2rem;
        color: var(--deep-red-color);
    }

    .is-form-product {
        width: 24px;
        height: 24px;
    }

    .item__Price {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 0;
        margin: 0;
    }

    .item_image {
        width: 70px;
        height: 70px;
    }

    .header_navbar-Catalog-Column-title {
        font-size: 1.2rem;
    }

    .header_navbar-Catalog-Column {
        width: 20%;
        padding: 0;
        margin: 0;
    }

    .header_navbar-Catalog-Column-wrapper {
        margin: 2px 0 0 0;
        width: 70px;
    }

    .img_Logout {
        height: 24px;
        width: 24px;
    }

    .searchTerm {
        font-size: 1.4rem;
        /*width: 233px;*/
        color: var(--text-color-black);
        margin: 4px 4px;
        padding: 1px 2px 1px 2px;
        height: 24px;
        padding-left: 20px;
        background-size: 20px;
        max-width: 253px;
    }

    .header {
        height: 42px;
        float: none;
    }

    .div_catalogue {
        margin-top: 42px;
    }

    .header-catalog {
        margin-top: 84px !important;
        MARGIN-BOTTOM: 80PX;
    }

    .form__register_title {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .icon_left_header {
        width: 28px;
        font-size: 16px;
    }

    .register_text {
        font-size: 16px;
    }

    .div_center_middle {
        width: 90%;
    }

    .img_logo_5s {
        width: 80px;
    }

    .text_version {
        font-size: 8px;
    }

    .div_header_center {
        /*margin: 10px 0 0 0;*/
        width: 90%;
    }

    .btn_register {
        width: 220px;
        font-size: 20px;
    }

    .btn_login {
        width: 220px;
        font-size: 20px;
    }

    .mess_hint {
        font-size: 16px;
    }

    .image_header {
        width: 170px;
        height: 170px;
    }

    .txtPhoneNumber {
        font-size: 14px;
    }

        .txtPhoneNumber::placeholder {
            font-size: 14px;
        }

    .text__login_phone {
        font-size: 16px;
    }

    .div_center {
        width: 84%;
    }

    .div_left {
        width: 5%;
    }

    .div_right {
        width: 5%;
    }

    .header_text {
        font-size: 30px;
        /*margin-left: 5vw;*/
    }

    .header_text_below {
        font-size: 16px;
        /*margin-left: 5vw;*/
    }

    .footer_btn-order {
        width: 200px;
    }

    .mess_hint {
        font-size: 20px;
    }

    .div_show_pass {
        /*transform: translate(-30px, -2px);*/
    }

    .tabcontent-cell-title {
        font-size: 1.2rem;
        margin: 1.0rem 0;
    }

    .img_load_more_order {
        height: 25px;
        width: 25px;
    }

    .load_more_order {
        font-size: 18px;
    }
}

/* Smartphones, Android phones, landscape iPhone (321px - 480px) (20.0625em - 30em) -----------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 20.0625em) and (max-width: 30em) {
    .div_search {
        width: 55vw;
    }

    .item__title-modal-popup {
        padding: 10px 10px 0px 10px;
    }

    .custommer_table-orderconfirm {
        border-bottom: 6px solid var(--background-gray);
    }

    .border-line-item {
        border:none;
    }

    .img_selected {
        border: 2px solid var(--border-img-choosed) !important;
    }

    .scrollbar_table {
        height: calc(95vh - 170px);
    }

    .scrollbar {
        border-radius: 12px;
    }

    .discount-price_table_item-total-price-final {
        padding: 5px 16px 5px 10px;
    }

    .discount-price_table_item-title-total-final {
        padding: 0px 0px 0px 16px;
    }

    .header_navbar-Catalog-Column img {
        height: 40px;
        width: 40px;
        border: 2px solid var(--border-img);
    }

    .header_navbar-Catalog {
        height: 100px;
    }

    .container__table tr {
        height: 108px;
        border-bottom: 1px solid var(--background-gray);
    }

    .product__container_table tr {
        height: 108px;
        border-bottom: 1px solid var(--background-gray) !important;
    }

    .custommer__container_table {
        padding: 0px 0px 0px 16px;
    }

    .header {
        display: block;
    }

    .modal__body-popup {
        border-radius: 8px;
    }

    .auth-form__footer-popup {
        border-radius: 8px;
    }

    .auth-form__footer-popup-cancel {
        min-width: 110px;
    }

    .order_container {
        margin-top: 0px;
    }

    .div_log_out {
        padding: 0 2px 0 0;
    }

    .modal__inner-product {
        margin: 0;
        height: 100%;
    }

    .Order__toggle-switch-total-money {
        padding: 0px 0px 0px 24px;
    }

    .span_left_input_PC {
        height: 22px;
        margin: 0 0 4px 0;
    }

    .span_left_input_CS {
        height: 22px;
        margin: 0 0 4px 0;
    }

    .div_input_PC {
        height: 22px;
    }

    .div_input_CS {
        height: 22px;
    }

    .footer {
        padding: 0 15px;
        height: 55px;
    }

    .footer_btn-order,
    .footer_btn-back,
    .footer_btn-confirm,
    .footer_btn-promotion {
        width: 110px;
        display: block;
        /*height: 88%;*/
    }

    .Order__total-money {
        padding: 0 0 0 12px;
        font-size: 16px;
    }

    .Order__toggle-tilte {
        font-size: 16px;
    }

    .div_button_plus_minus {
        margin: 0;
    }

    .form-product-control {
        height: 24px;
        font-size: 14px;
        width: 24px;
    }

    .item__title {
        font-size: 1.2rem;
        padding: 0;
        margin: 0;
    }

    .container__table_item--left {
        padding: 0px 16px 0px 8px;
    }

    .item__Total_Price {
        font-size: 1.4rem;
        color: var(--deep-red-color);
    }

    .is-form-product {
        width: 24px;
        height: 24px;
    }

    .item__Price {
        font-size: 1.4rem;
        font-weight: bold;
        padding: 0;
        margin: 0;
    }

    .item_image {
        width: 90px;
        height: 90px;
    }

    .header_navbar-Catalog-Column-title {
        font-size: 1.4rem;
    }

    .header_navbar-Catalog-Column {
        width: 30%;
        padding: 0;
        margin: 0;
    }

    .header_navbar-Catalog-Column-wrapper {
        margin: 2px 0 0 0;
        width: 80px;
    }

    .img_Logout {
        height: 28px;
        width: 28px;
    }

    .searchTerm {
        font-size: 1.6rem;
        /*width: 253px;*/
        color: var(--text-color-black);
        margin: 8px 8px;
        padding: 1px 2px 1px 2px;
        height: 30px;
        background-size: 20px;
        padding-left: 20px;
        background-size: 20px;
        padding-left: 20px;
        max-width: 253px;
    }

    .header {
        height: 46px;
        float: none;
    }

    .div_catalogue {
        margin-top: 46px;
    }

    .header-catalog {
        margin-top: 140px !important;
        MARGIN-BOTTOM: 80PX;
    }

    .form__register_title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .icon_left_header {
        width: 30px;
        font-size: 18px;
    }

    .register_text {
        font-size: 20px;
    }

    .div_footer_left {
        width: 42%;
    }

    .div_footer_right {
        width: 42%;
    }

    .div_center_middle {
        width: 84%;
    }

    .img_logo_5s {
        width: 100px;
    }

    .text_version {
        font-size: 8px;
    }

    .div_header_center {
        /*margin: 16px 0 0 0;*/
        width: 84%;
    }

    .btn_register {
        width: 220px;
        font-size: 20px;
        height: 52px;
    }

    .btn_login {
        width: 220px;
        font-size: 20px;
        height: 52px;
    }

    .mess_hint {
        font-size: 16px;
    }

    .txtPhoneNumber {
        font-size: 14px;
    }

        .txtPhoneNumber::placeholder {
            font-size: 14px;
        }

    .text__login_phone {
        font-size: 16px;
    }

    .div_center {
        width: 84%;
    }

    .div_left {
        width: 8%;
    }

    .div_right {
        width: 8%;
    }

    .header_text {
        font-size: 30px;
        /*margin-left: 3vw;*/
    }

    .header_text_below {
        font-size: 16px;
        /*margin-left: 5vw;*/
    }

    .Pannel_Zoom {
        zoom: 100%;
    }

    .image_header {
        width: 170px;
        height: 170px;
    }

    .footer_btn-order {
        width: 200px;
    }

    .mess_hint {
        font-size: 14px;
    }

    .div_show_pass {
        /*transform: translate(-30px, -2px);*/
    }

    .tabcontent-cell-title {
        font-size: 1.2rem;
        margin: 1.0rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 2px;
    }
    .tabcontent-cell-button {
        justify-items: center;
        align-items: center;
        display: flex;
    }

    .tablinks {
        font-size: 1.4rem;
        padding: 8px 16px;
        width: auto;
        height: 32px;
    }

    .tabcontent-cell-img {
        width: 80px;
    }
    .tabcontent-cell-info {
        max-width: calc(100% - 80px);
    }

    .tab-header {
        height: 32px;
    }

    .img_load_more_order {
        height: 25px;
        width: 25px;
    }

    .load_more_order {
        font-size: 18px;
    }
}