.container_wideboxes {
    /*    margin: 0px 0px 0px 20px;
    width: 98%;*/
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container_wideboxes:before,
.container_wideboxes:after {
    content: " ";
    display: table;
}

.container_wideboxes:after {
    clear: both;
}

@media (min-width: 768px) {
    .container_wideboxes {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container_wideboxes {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container_wideboxes {
        width: 1300px;
    }
}

.container_wideboxes-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container_wideboxes-fluid:before,
.container_wideboxes-fluid:after {
    content: " ";
    display: table;
}

.container_wideboxes-fluid:after {
    clear: both;
}





.widebox {
    width: 400px;
    height: 120px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .widebox {
        width: 350px;
    }
}





.widebox2 {
    width: 400px;
    height: 160px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .widebox2 {
        width: 350px;
    }
}



.widebox3 {
    width: 400px;
    height: 160px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .widebox3 {
        width: 350px;
        height: 180px;
    }
}


.widebox4 {
    width: 400px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .widebox4 {
        width: 350px;
    }
}





@media screen and (max-width: 768px) {
    .img {
        margin-top: 5px;
    }
}

.detail_widebox {
    width: 900px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}




.widebox_vertical {
    width: 300px;
    height: 310px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}

.img_withoutid {
    width: 280px;
    height: 260px;
    margin-left: -20px;
}


@media screen and (max-width: 768px) {
    .widebox_vertical {
        display: inline;
        float: left;
        width: 150px;
        height: 200px;
    }

    .img_withoutid {
        width: 130px;
        height: 150px;
    }
}

/*.img_offer_id{
    width: 100px;
    height: 100px;
}
*/



.desc h4 {
    line-height: 0.1px;
}

.desc span {
    line-height: 0.1px;
}

.desc p {
    line-height: 0.1px;
}

.h5_style {
    border: none;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    /*font-size: inherit;*/
    color: inherit;
    background: none;
    padding: 1px 1px;
    display: inline-block;
    margin: 1px 1px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 1000;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}


@media screen and (max-width: 768px) {
    .h5_style {
        margin-top: 15px;
    }
}


.headings {
    position: absolute;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    padding-top: 10px;
    font-size: 30px;
    color: #000;
    font-weight: 1000;
}

@media screen and (max-width: 768px) {
    .headings {
        font-size: 25px;
    }
}


.headings_small {
    position: absolute;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    padding-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    color: #000;
    font-weight: 1000;
}

@media screen and (max-width: 768px) {
    .headings_small {
        font-size: 15px;
    }
}






.orderwidebox {
    width: 840px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}

@media screen and (max-width: 768px) {
    .orderwidebox {
        margin-left: 5px;
        width: 350px;
    }
}



.order_image {
    padding: 20px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
    .order_image {
        padding: 20px 0px 0px 0px;
    }
}



.order_imagestatus {
    padding: 20px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
    .order_imagestatus {
        display: none;
    }
}


.order_imagestatus_mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .order_imagestatus_mobile {
        display: flex;
    }
}





.cartwidebox {
    width: 640px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .cartwidebox {
        margin-left: -10px;
        width: 350px;
    }
}



.mybag_boxes {
    width: 420px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px -50px;
}


@media screen and (max-width: 768px) {
    .mybag_boxes {
        margin-left: 5px;
        width: 350px;
    }
}


.mybag_boxes2 {
    width: 420px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .mybag_boxes2 {
        margin-left: 5px;
        width: 350px;
    }
}





@media screen and (max-width: 768px) {
    .mobile_feedback {
        width: 350px;
    }

    .mobile_notifications {
        margin-left: -20px;
        width: 350px;
    }
}





.profile_widebox {
    width: 850px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 25px 0px;
    border-radius: 25px;
}


@media screen and (max-width: 768px) {
    .profile_widebox {
        margin: 5px -5px;
        width: 350px;
    }
}


.profilepic_box {
    margin-top: 20px;
    margin-left: -20px;
    height: 250px;
    width: 250px;
    position: absolute;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 4px solid #fff;
}

.profilepic_box img {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    border: 4px solid #fff;

}


.adharpic_box {
    margin-top: 20px;
    margin-left: 10px;
    height: 250px;
    width: 90%;
    position: absolute;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 4px solid #fff;
}

.adharpic_box img {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    border: 4px solid #fff;

}








.h5_style_big {
    border: none;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    /*font-size: inherit;*/
    color: #000;
    ;
    background: none;
    padding: 1px 1px;
    display: inline-block;
    margin: 1px 1px;
    letter-spacing: 1px;
    line-height: 20px;
    font-weight: 1000;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}


.h5_profile_style_mobile1 {
    margin-left: -15px;
}



@media screen and (max-width: 768px) {
    .h5_style_big {
        font-size: 12px;
        left: 20px;
    }

    .h5_profile_style_mobile1 {
        margin-left: 6px;
    }

    .h5_profile_style_mobile2 {
        margin-left: 6px;
    }

    .h5_style_big_p {
        margin-left: 20px;
        font-size: 11px;
    }
}

.h5_profile_style {
    border: none;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    /*font-size: inherit;*/
    color: inherit;
    background: none;
    padding: 1px 1px;
    display: inline-block;
    margin: 1px 1px;
    letter-spacing: 1px;
    line-height: 20px;
    font-weight: 1000;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}







.edit_profile_button {
    cursor: pointer;
    align-items: center;
    right: -450px;
    top: 5px;
    position: relative;

}

@media screen and (max-width: 768px) {
    .edit_profile_button {
        margin-left: -250px;
    }
}



.admin_profileedit_form {
    width: 700px;
    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: #fff;
    margin: 20px -150px;
    display: none;
    z-index: 99;
}

@media screen and (max-width: 768px) {
    .admin_profileedit_form {
        width: 350px;
        margin: -950px -5px;
    }
}




.user_profileedit_form {
    width: 700px;
    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: #fff;
    display: none;
    z-index: 99;
    margin-left: -290px;
    margin-top: -20px;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .user_profileedit_form {
        width: 350px;
        margin-left: -20px;
        margin-top: -900px;
        position: absolute;
    }
}




.detailuser_sendform {
    height: auto;
    width: 800px;
    margin: 25px 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media screen and (max-width: 768px) {
    .detailuser_sendform {
        margin-left: 10px;
        width: 350px;
    }
}




.wallet-form {
    height: auto;
    width: 370px;
    margin: 25px 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 25px;

}

.wallet-formProfile {
    display: none;
    height: auto;
    width: 370px;
    margin: 25px 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 25px;
}

@media screen and (max-width: 768px) {
    .wallet-form {
        margin-left: -10px;
        width: 350px;
    }
}



.sendmoney_form {
    background: #fff;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    margin-top: 30px;
    margin-left: 150px;
    height: auto;
    /* display: none; */
}

.table_sendmoney {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .sendmoney_form {
        width: 350px;
        margin-left: 20px;
        margin-top: 30px;
    }

    .sendmoney_form_inner {
        margin-left: -25px;
        width: 340px;
    }

    .table_sendmoney {
        width: 350px;
        margin-left: -40px;
    }

    .no_display {
        display: none;
    }
}

.search_form_profile {
    margin-top: 50px;
    width: 100%;

}



.closesendmoney {
    cursor: pointer;
    margin-left: -5px;
    margin-top: 5px;

}



.table-users {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 900px;
    line-height: 1;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

@media screen and (max-width: 768px) {
    .table-users {
        width: 370px;
        margin-left: 10px;
    }
}



td {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}



.header {
    background-color: rgb(43, 117, 237);
    color: #fff;
    height: 40px;
    font-size: 17px;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    text-align: center;
    align-items: center;
    padding: 10px;

}




.address_widebox {
    color: #585858;
    background-color: #f9f9f9;
    height: auto;
    margin: 10px 10px;
    border-radius: 25px;
}


@media screen and (max-width: 768px) {
    .address_widebox {
        margin-left: -10px;
        width: 350px;
    }
}

.nationalIdProfilePic_widebox {
    color: #585858;
    background-color: #f9f9f9;
    height: auto;
    margin: 5px 5px;
    border-radius: 25px;
}


@media screen and (max-width: 768px) {
    .nationalIdProfilePic_widebox {
        margin-left: -25px;
        width: 350px;
    }
}


.nationalId_widebox {
    color: #585858;
    background-color: #f9f9f9;
    height: auto;
    /* width: 500px; */
    margin: 5px -10px;
    border-radius: 25px;
}


@media screen and (max-width: 768px) {
    .nationalId_widebox {
        margin-left: -25px;
        width: 350px;
    }
}









.address-form {
    fill: all;
    height: all;
    margin-left: 800px;
    margin-top: 10px;
    width: 60%;
    color: #000;
    font-size: 18px;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;


}

.add_address {
    display: flex;
    cursor: pointer;
    align-items: center;
    position: absolute;

}



.user_address_form {
    /*    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: #fff;*/
    /*    margin-top: 250px;
    margin-left: 20px;*/
    /*    width: 40%;*/
    /*    height: auto;*/
    margin: 100px -50px 20px;
    display: none;
}

.userAddressDetails {
    padding: 20px 30px 20px;
    background-color: #ffffff;
    margin: 10px 0px;
    color: #585858;
    line-height: 5px;
    letter-spacing: 0px;
    justify-content: center;
    align-items: center;
    background-position: center center;
    border-radius: 10px;
}

.addressCountText {
    width: 700px;
    border-radius: 10px;
    color: #189aa1;
}

.whiteSpace {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .user_address_form {
        width: 370px;
        margin: 30px 0px;
    }
}


.closeaddress {
    cursor: pointer;
    margin-left: -5px;
    margin-top: 5px;
}




.user_payment_box {
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .user_payment_box {
        width: 350px;
    }
}


.forgot_password_box {
    height: auto;
    align-items: center;
    margin: 20px 700px;
}


@media screen and (max-width: 768px) {
    .forgot_password_box {
        width: 350px;
        margin-left: 30px;
    }
}

.forgot_passwordText {
    position: absolute;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    padding-top: 10px;
    font-size: 15px;
    color: #000;
    font-weight: 500;

}


.addbutton {
    margin: -30px 25px;
    width: 50px;
    height: 60px;
    position: fixed;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    font-size: 20px;
    color: #189aa1;
    font-weight: 100;
    position: absolute;
    transition: all 0.3s ease-out;

}

.addbutton:hover {
    transform: scale(1.1);
}


@media screen and (max-width: 768px) {
    .addbutton {
        font-size: 15px;
        margin: -15px 25px;
        width: 370px;
        height: 150px;
    }

    .addbutton:hover {
        transform: scale(1.05);
    }
}




.search_tab_form {
    display: none;
}


.searchbutton {
    margin: -45px 430px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    font-size: 20px;
    color: #189aa1;
    font-weight: 100;
    position: absolute;
    transition: all 0.3s ease-out;

}

.searchbutton:hover {
    transform: scale(1.1);
}


@media screen and (max-width: 768px) {
    .searchbutton {
        font-size: 15px;
        margin: -50px 280px;
        width: 30px;
        height: 30px;
    }

    .searchbutton:hover {
        transform: scale(1.05);
    }
}





.searchbuttonUserData {
    margin: -40px 120px;
    width: 30px;
    height: 30;
    border-radius: 50%;
    position: fixed;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    font-size: 20px;
    color: #189aa1;
    font-weight: 100;
    position: absolute;
    transition: all 0.3s ease-out;

}

.searchbuttonUserData:hover {
    transform: scale(1.1);
}


@media screen and (max-width: 768px) {
    .searchbuttonUserData {
        font-size: 15px;
        margin: -35px 320px;
        width: 30px;
        height: 30px;
    }

    .searchbuttonUserData:hover {
        transform: scale(1.05);
    }
}









.deals-pic-circle {
    height: 200px;
    width: 200px;
    margin: 0px 30px;
    position: absolute;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 2px solid #a8a7a7;
    /* -webkit-border-radrgb(145, 145, 145) 50%; */
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;

}



.deals-pic-circle img {
    background-color: #fff;
    height: 200px;
    width: 200px;
    margin: 0px -20px;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    position: absolute;
}




@media screen and (max-width: 768px) {
    .deals-pic-circle {
        height: 150px;
        width: 150px;
        margin: 0px 70px;
        position: absolute;
        overflow: hidden;
        border: 1px solid grey;
        transform: translateX(-50%, -50%);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        border: 2px solid #a8a7a7;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
    }

    .deals-pic-circle img {
        height: 150px;
        width: 150px;
        margin: 0px -20px;
        border-radius: 50%;
        overflow: hidden;
        transform: translateX(-50%, -50%);
        position: absolute;
    }
}







.additem-form {
    transition: opacity 500ms;
    width: 900px;
    height: 940px;
    position: absolute;
    z-index: 99;
    margin: 0px 150px;
    padding: 0px 0px;
    visibility: hidden;
    height: auto;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    transition: all 0.3s ease-out;
}


@media screen and (max-width: 768px) {
    .additem-form {
        width: 350px;
        margin: 5px 5px;
    }
}


.additem-form select {
    width: 300px;
}


@media screen and (max-width: 768px) {
    .additem-form select {
        width: 300px;
    }
}


.closeitem-form {
    cursor: pointer;
    top: 5px;
    position: relative;
    z-index: 99;
}



.additem-form-offer {
    transition: opacity 500ms;
    width: 400px;
    /* height: 940px; */
    position: absolute;
    z-index: 99;
    margin: 0px 350px;
    padding: 0px 0px;
    display: none;
    height: auto;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    transition: all 0.3s ease-out;
}


.additem-form-offer .deals-pic-circle {
    margin-left: 70px;
}


@media screen and (max-width: 768px) {
    .additem-form-offer {
        width: 350px;
        margin: 5px 5px;
    }

    .mobileNone {
        display: none;
    }

    .additem-form-offer .deals-pic-circle {
        margin-left: 70px;
    }
}


/*.left_form_deal{
    background:#a8b1e3;
    margin: 0px -15px;
}

.right_form_deal{
    background:whitesmoke;
}*/



.wrapper-class input[type="radio"] {
    width: 15px;
}

.wrapper-class label {
    display: inline;
    margin-left: 5px;
}








.edititem_container {
    width: 800px;
    height: auto;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 25px 5px;
}


@media screen and (max-width: 768px) {
    .edititem_container {
        width: 350px;
    }
}




.offeredit_form {
    height: auto;
    width: 370px;
    margin-left: 20px;
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media screen and (max-width: 768px) {
    .offeredit_form {
        width: 350px;
        margin: 0px 5px;
    }
}




.attachment_form {
    height: auto;
    width: 370px;
    margin: 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media screen and (max-width: 768px) {
    .attachment_form {
        width: 350px;
        margin: 0px 5px;
    }
}


.fsimage {
    height: 600px;
    width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .fsimage {
        object-fit: fill;
        margin-left: -30px;
        height: 550px;
        width: 120%;
    }
}



.xxxlimage {
    height: 400px;
    width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .xxxlimage {
        height: 250px;
        width: 350px;
    }
}



.xxlimage {
    height: 400px;
    width: 620px;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .xxlimage {
        height: 250px;
        width: 350px;
    }
}

.xlimage {
    height: 400px;
    width: 420px;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .xlimage {
        height: 150px;
        width: 350px;
        margin: 0px 0px;
    }
}


.limage {
    height: 350px;
    width: 315px;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .limage {
        height: 150px;
        width: 155px;
    }
}

.simage {
    height: 350px;
    width: 157px;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .simage {
        height: 150px;
        width: 70px;
    }
}









/*####################################################################################################*/
/*admin phase*/

.add_ad_form {
    width: 1320px;
    height: 150px;
    position: absolute;
    z-index: 99;
    margin: 10px -20px;
    padding: 0px 0px;
    /*background-color: #fff; */
    /*box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;*/

}


.ad_list_form {
    width: 90%;
    margin: 10px 10px;
}

@media screen and (max-width: 768px) {
    .add_ad_form {
        height: auto;
        width: 370px;
    }

    .none {
        display: none;
    }
}


.deal_list_form {
    width: 100%;
    margin: -10px 20px;
}

@media screen and (max-width: 768px) {
    .deal_list_form {
        margin: -10px -10px;
        height: auto;
        width: 370px;
    }

    .none {
        display: none;
    }
}



.row_height {
    align-items: center;
    height: 50px;
}

.row_height_small {
    align-items: center;
    height: 10px;
}




/*style="margin-left: 10px;width: 98%;height: 25%; font-style:font-family: 'Antonio', sans-serif;font-family: 'Ubuntu', sans-serif;background-color: rgb(43, 117, 237);"*/




.table_userdata {
    width: 100%;
    margin: 0px 0px;
}

@media screen and (max-width: 768px) {
    .table_userdata {
        margin: 10px -30px;
        height: auto;
        width: 370px;
    }
}


.table1_userdata {
    width: 30%;
    /*	background: #000;*/
}


.table3_userdata {
    width: 40%;
    /*	background: #000;*/
}



.table3_userdata {
    width: 20%;
    /*	background: #000;*/
}


@media screen and (max-width: 768px) {
    .table1_userdata {
        width: 370px;
        margin: 10px 0px;
    }

    .table2_userdata {
        width: 370px;
        margin: 10px 0px;
    }

    .table3_userdata {
        width: 370px;
        margin: 10px 0px;
    }
}






.category_box {
    width: 420px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .category_box {
        margin-left: -25px;
        width: 370px;
    }
}




.userlist_box {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .userlist_box {
        margin-left: -25px;
        width: 370px;
    }
}







.adduser {
    margin: 10px -10px;
    width: 50px;
    height: 60px;
    position: fixed;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    font-size: 20px;
    color: #189aa1;
    font-weight: 100;
    position: absolute;

}

.adduser:hover {
    transform: scale(1.1);
}





@media screen and (max-width: 768px) {
    .adduser {
        font-size: 18px;
        margin: 10px -10px;
        width: 370px;
    }

    .adduser:hover {
        transform: scale(1.1);
    }
}




.adduser-form {
    width: 900px;
    height: auto;
    position: absolute;
    z-index: 99;
    margin: 0px 150px;
    padding: 0px 0px;
    display: none;
    height: auto;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}



.closeuser {
    cursor: pointer;
    top: 5px;
    position: relative;
    z-index: 99;
}




@media screen and (max-width: 768px) {
    .adduser-form {
        width: 350px;
        margin: -525px 0px;
    }
}






.user_list_table {
    width: 100%;
    margin: 10px 0px;
}


.scrollit {
    overflow: scroll;
    height: 500px;
}







.category_edit_box {
    width: 420px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}

@media screen and (max-width: 768px) {
    .category_edit_box {
        margin-left: -15px;
        width: 370px;
    }
}






.subcategory_edit_box {
    width: 800px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .subcategory_edit_box {
        margin-left: 0px;
        width: 370px;
    }
}







.scrollit_myads {
    overflow: scroll;
    height: 300px;
}



.myads_list_table {
    width: 100%;
    margin: 10px 0px;
}




@media screen and (max-width: 768px) {
    .myads_list_box {
        margin: 10px -10px;
        width: 370px;
    }
}




.payments_list_table {
    width: 98%;
    margin: 10px 0px;
}

@media screen and (max-width: 768px) {
    .payments_list_box {
        margin: 10px -25px;
        width: 370px;
    }
}



.scrollit_payments {
    overflow: scroll;
    height: 500px;
}







.payment_detail_widebox {
    width: 800px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .payment_detail_widebox {
        margin-left: 0px;
        width: 350px;
    }

    .payment_details_text_mobile {
        margin: 0px 15px;
    }
}



.delivery_edit_form {
    height: auto;
    width: 370px;
    margin: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media screen and (max-width: 768px) {
    .delivery_edit_form {
        margin: 0px 0px;
        width: 350px;
    }
}








.notifications_box {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .notifications_box {
        margin-left: -25px;
        width: 370px;
    }
}

.notifications_list_table {
    width: 100%;
    margin: 0px 0px;
}

@media screen and (max-width: 768px) {
    .notifications_list_table {
        margin-left: -15px;
        width: 350px;
    }
}




.feedbackslist_box {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .feedbackslist_box {
        margin-left: 0px;
        width: 370px;
    }
}





.datalist_box {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .datalist_box {
        margin: 0px 0px;
        width: 350px;
    }
}



.scrolluserlist {
    overflow: scroll;
    height: 470px;
}




.databuttons_box {
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    margin: 5px 5px;
}


@media screen and (max-width: 768px) {
    .databuttons_box {
        margin-left: -15px;
        width: 350px;
    }
}




.checkbox-wrapper {
    white-space: nowrap;
}






.video_size {
    margin: 10px;
    width: 500px;
    height: 200px;
}

@media screen and (max-width: 768px) {
    .video_size {
        width: 360px;
        height: 200px;
    }
}

/*###############################################################################*/
/*admin phase*/
.edit_admin_form {
    visibility: hidden;
}



/*#########################################################################*/
/*home pages mobile view*/
















/*//################################################################
//ads xxl styles*/
/*
* {box-sizing:border-box}*/

/* Slideshow container */
/*.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: 0px 0px;
}*/



/* Next & previous buttons */
/*.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}*/

/* Position the "next button" to the right */
/*.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}*/

/* On hover, add a black background color with a little bit see-through */
/*.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}*/

/* Caption text */
/*.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}*/

/* Number text (1/3 etc) */
/*.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}*/

/* The dots/bullets/indicators */
/*.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}
*/
/* Fading animation */
/*.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
*/

/*#####################################################################################################*/




/* @media screen and (max-width: 768px) {
    .request_deal{
        top: 50px; } } */


.mobile_sold {
    display: none;
}

.web_sold {
    display: flex;
}


@media screen and (max-width: 768px) {
    .web_sold {
        display: none;
    }

    .mobile_sold {
        width: 90px;
        height: 40px;
        margin-top: -40px;
        margin-left: 250px;
        display: flex;
    }
}


.select_custom {
    background-color: #302939;
    border: 6px solid #d5d1db;
    border-radius: 20%;
    border-width: thick;
}




/* select custom */
:root {
    --background-gradient: linear-gradient(178deg, #ffff33 10%, #3333ff);
    --gray: #34495e;
    --darkgray: #473f52;
}

select {
    border: 5px solid #d5d1db;
    border-width: thick;
    /* Reset Select */
    appearance: none;
    outline: 10px red;
    border: 0;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0 1em;
    color: #fff;
    background-color: var(--darkgray);
    background-image: none;
    cursor: pointer;
}

/* Remove IE arrow */
select::-ms-expand {
    display: none;
}

/* Custom Select wrapper */
.select {
    position: relative;
    display: flex;
    width: 10em;
    height: 1.7em;
    border-radius: .25em;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .select {
        position: relative;
        display: flex;
        width: 24em;
        height: 1.7em;
        border-radius: .25em;
        overflow: hidden;
    }
}

/* Arrow */
.select::after {
    content: '\25BC';
    position: absolute;
    top: -15;
    right: 0;
    padding: 1em;
    background-color: #34495e;
    transition: .25s all ease;
    pointer-events: none;
}

/* Transition */
.select:hover::after {
    color: #6d757e;
}

.mobile_display_only {
    visibility: hidden;
}

@media screen and (max-width: 768px) {
    .mobile_display_only {
        visibility: visible;
    }
}

/* body {
    color: #fff;
    background: var(--background-gradient);
  } */

/* a {
    font-weight: bold;
    color: var(--gray);
    text-decoration: drop-shadow;
    padding: .25em;
    border-radius: .50em;
    background: pink;
  } */

/* 가운데정렬 - position,transform*/
/* .container {
    position : absolute;
    top: 50%;
    left : 50%;
    transform :
    translate(-50%,-50%); 
  } */

/* 가운데정렬 - flexbox*/
/* 근데 이건 1행 정렬이된다. */
/* .container {
    display: flex;
    justify-content: center;
    align-items: absolute;
  } */

.down_note {
    display: flex;
    justify-content: center;

}


/* sliding ads images */



/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


/* Fading animation */
.fadeoffers {
    animation-name: fade;
    animation-duration: 1.5s;
}


.fadefs {
    animation-name: fade;
    animation-duration: 1.5s;
}

.fadexxxl {
    animation-name: fade;
    animation-duration: 1.5s;
}

.fadexxl {
    animation-name: fade;
    animation-duration: 1.5s;
}

.fadexl {
    animation-name: fade;
    animation-duration: 1.5s;
}

.fadel {
    animation-name: fade;
    animation-duration: 1.5s;
}

.fades {
    animation-name: fade;
    animation-duration: 1.5s;
}

.fadead {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}






/* Modal Images */

/* Styles for the overlay */
.overlayPopup {
    display: none;
    position: fixed;
    top: 110px;
    left: 90px;
    width: 90%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 99;
    opacity: 100%;
}

@media screen and (max-width: 768px) {
    .overlayPopup {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;

    }
}

/* Styles for the enlarged image */
.enlarged-image {
    background-color: #fff;
    width: 70%;
    height: 70%;
}

/* Styles for the close button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
}


.homeLinks {
    display: none;
    background-color: #4d504e;
    /* Green */
    border: none;
    color: white;
    padding: 3px 15px 0px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    border-radius: 25px
}

@media screen and (max-width: 768px) {
    .homeLinks {
        display: inline-block;
        margin-top: 15px;
        margin-left: 5px;

    }
}


/* old overlay */
#imageContainer {
    display: flex;
    flex-wrap: wrap;
}

.slideshow-image {
    width: 250px;
    /* Adjust as needed */
    height: 250px;
    /* Adjust as needed */
    margin: 10px;
    margin-top: 10px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .slideshow-image {
        width: 120px;
        height: 140px;
        margin-left: 0px;
    }
}

.slideshow-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* To maintain aspect ratio */
}

#enlargeOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#enlargedImage {
    max-width: 90%;
    max-height: 90%;
}

/* old overlay */



/* pop up image style */
.popupContainer {
    position: relative;
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.popupContainer-content {
    background-color: #fefefe;
    margin: 5% 10%;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}


.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    text-decoration: none;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}



.close {
    color: rgb(255, 255, 255);
    float: right;
    margin-right: 50px;
    margin-top: 10px;
    font-size: 70px;
    font-weight: bold;
    z-index: 9999;
}

.close:hover,
.close:focus {
    color: rgb(255, 255, 255);
    text-decoration: none;
    cursor: pointer;
}

.slideshow-container {
    max-width: 800px;
    position: relative;
    margin: auto;
}

.mySlides {
    display: none;
    width: 100%;
}

.slideshow-container img {
    margin-top: 50px;
    width: 80%;
    height: 80%;
}

@media screen and (max-width: 768px) {
    .close {
        float: left;
        margin-left: 30px;
        margin-top: 20px;
        z-index: 9999px;
        color: #fff;
    }

    .slideshow-container img {
        margin-top: 150px;
        width: 400px;
        height: 400px;
    }

}

/* pop up image style */



/* Add button */
.addButtonStyle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    opacity: 999;
    /* visibility: hidden; */
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.addButtonStyle.active {
    opacity: 1;
    visibility: visible;
}

.addButtonStyle a {
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    font-size: 20px;
    padding: 10px;
    width: 150px;
    height: 50px;
    display: table;
    background: #f96d00;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.addButtonStyle a i {
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

.addButtonStyle a:hover,
.addButtonStyle a:active,
.addButtonStyle a:focus {
    text-decoration: none;
    outline: none;
}

/* Add button */


/* Add Button Profile Style */
.addButtonProfileStyle {
    /* position: fixed; */
    /* bottom: 20px; */
    /* right: 20px; */
    z-index: 999;
    opacity: 999;
    margin: 20px -10px;
    /* visibility: hidden; */
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.addButtonProfileStyle.active {
    opacity: 1;
    visibility: visible;
}

.addButtonProfileStyle a {
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
    font-size: 20px;
    padding: 10px;
    width: 350px;
    height: 50px;
    display: table;
    background: #f96d00;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.addButtonProfileStyle a i {
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

.addButtonProfileStyle a:hover,
.addButtonProfileStyle a:active,
.addButtonProfileStyle a:focus {
    text-decoration: none;
    outline: none;
}

/* Add Button Profile Style */


/* firsthalf container profile page */
.firstHalfContainerProfile {
    color: #fff;
    margin: 10px 10;
    justify-content: center;
    align-items: center;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    border-radius: 10px;
    /* background-color: #189aa1; */
}

/* firsthalf container profile page */

/* secondhalf container profile page */
.secondHalfContainerProfile {
    width: 350px;
}

/* secondhalf container profile page */

/* walletContainer */
.walletContainer {
    /* display: flex; */
    width: 350px;
    color: #fff;
    margin: 10px -10;
    line-height: 10px;
    justify-content: center;
    align-items: center;
    font-family: 'Antonio', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    text-align: center;
    border-radius: 10px;
    padding: 35px 0px;
    background-color: #949494;
    opacity: 0.8;
    background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #6b6b6b 10px), repeating-linear-gradient(#444cf755, #444cf7);
}

/* walletContainer */

.sendRetrieveButton {
    padding: 15px 30px;
    margin: 10px 10px;
    border-radius: 10px;
    background-color: #e40f00;
    color: #fff;
}

.buttonCart {
    padding: 15px 100px;
    margin: 10px -20px;
    border-radius: 8px;
    background-color: #e4e4e4;
    color: #000000;
}

.buttonLike {
    padding: 15px 50px;
    margin: 0px -20px;
    border-radius: 8px;
    background-color: #e4e4e4;
    color: #000000;
}

.buttonView {
    padding: 15px 30px;
    margin: 0px -55px;
    border-radius: 8px;
    background-color: #e4e4e4;
    color: #000000;
}

@media screen and (max-width: 768px) {
    .buttonCart {
        padding: 15px 100px;
        margin: 10px -10px;
        border-radius: 8px;
        background-color: #e4e4e4;
        color: #000000;
    }

    .buttonLike {
        padding: 15px 40px;
        margin: 0px -10px;
        border-radius: 8px;
        background-color: #e4e4e4;
        color: #000000;
    }

    .buttonView {
        padding: 15px 20px;
        margin: 0px 30px;
        border-radius: 8px;
        background-color: #e4e4e4;
        color: #000000;
    }
}

.topup_form {
    position: absolute;
    top: 10px;
    right: 200px;
    background-color: #ffffff;
    width: 700px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px;
    margin-top: 50px;
    margin-left: 20px;
    height: auto;
    display: none;
    opacity: 0.99;
}

.topup_form .innerInputs {
    width: 600px;
}

.withdraw_form {
    position: absolute;
    top: 10px;
    right: 200px;
    background-color: #ffffff;
    width: 700px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px;
    margin-top: 50px;
    margin-left: 20px;
    height: auto;
    display: none;
    opacity: 0.99;
}

.withdraw_form .innerInputs {
    width: 600px;
}

.buttonSubmit {
    width: 580px;
    padding: 10px 70px;
    margin: 10px 10px;
    border-radius: 10px;
    background-color: #f3483c;
    color: #fff;
    border: 0;
}

.buttonSubmitRetrieve {
    width: 500px;
    padding: 10px 70px;
    margin: 10px 10px;
    border-radius: 10px;
    background-color: #f3483c;
    color: #fff;
    border: 0;
}

.closewithdraw {
    cursor: pointer;
    margin-left: 10px;
    margin-top: 5px;
}

@media screen and (max-width: 768px) {
    .topup_form {
        top: -50px;
        right: 10px;
        width: 350px;
    }

    .topup_form .innerInputs {
        width: 250px;
    }

    .buttonSubmit {
        width: 230px;
    }

    .withdraw_form {
        top: 90px;
        right: 10px;
        width: 350px;
    }

    .withdraw_form .innerInputs {
        width: 250px;
    }

    .buttonSubmitRetrieve {
        width: 300px;
    }
}


.buttonUpdate {
    padding: 5px 50px;
    margin: 20px 20px;
    border-radius: 10px;
    background-color: #f3483c;
    color: #fff;
    border: 0;
}

.profilePicImage {
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 20px 10px;
    position: absolute;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 4px solid #000000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
}

.profilePicImage img {
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.nationalProfilePicImage {
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 20px 10px;
    position: absolute;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 4px solid #000000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
}

.nationalProfilePicImage img {
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.nationalIdImage {
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 200px;
    margin: 20px 10px;
    position: absolute;
    overflow: hidden;
    transform: translateX(-50%, -50%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 4px solid #000000;
    /* -webkit-border-radius: 50%; */
    /* -moz-border-radius: 50%;
    -ms-border-radius: 50%; */
    /* border-radius: 50%;  */
    background-color: #fff;
}

.nationalIdImage img {
    background-color: #fff;
    /* border-radius: 50%; */
    overflow: hidden;
    transform: translateX(-50%, -50%);
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.updateButton {
    display: none;
}

.nationalIdHeadText {
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: large;
    line-height: normal;
    margin: 0px 10px;

}

@media screen and (max-width: 768px) {
    .nationalIdImage {
        height: 150px;
        width: 300px;
    }

    .nationalIdImage img {
        width: 300px;
    }

    .profilePicImage {
        width: 150;
        height: 150;
        margin-left: 60px;
    }

    .nationalProfilePicImage {
        width: 150;
        height: 150;
        margin-left: 70px;
    }

    .updateButton {
        margin-top: -10px;
        margin-left: 40px;
    }
}

.subDetails {
    margin: 30px;
    color: #585858;
    line-height: 0px;
    letter-spacing: 0px;
    justify-content: center;
    align-items: center;
    background-position: center center;
    text-align: center;
}

.labelPersonalDetails {
    font-weight: 600;
    font-size: small;
    color: #585858;
}

.textPersonalDetails {
    height: 35px !important;
    padding: -10px 12px;
    line-height: 0px;
    font-size: medium;
    color: #585858;
}

.personaldetailsContainer {
    background-color: #f9f9f9;
    margin: 20px 0px;
    padding: 20px 0px;
    border-radius: 10px;
}

.summaryBio {
    width: 87%;
}

.summaryBio .textPersonalDetails {
    font-size: 12px;
    height: 50px !important;
}

.editButtonPersonalDetails {
    font-size: 40px;
    color: rgb(85, 85, 85);
    margin-left: 10px;
}

.buttonUpdateProfile {
    justify-content: center;
    align-items: center;
    padding: 5px 200px;
    margin: 20px 100px;
    border-radius: 10px;
    background-color: #f3483c;
    color: #fff;
    border: 0;
}

@media screen and (max-width: 768px) {
    .summaryBio {
        width: 100%;
    }

    .summaryBio .textPersonalDetails {
        font-size: 10px;
    }

    .editButtonPersonalDetails {
        font-size: 30px;
        margin-left: 250px;
    }

    .buttonUpdateProfile {
        padding: 5px 100px;
        margin: 20px 40px;
    }
}

.refferalsContainer {
    width: 350px;
    background-color: #f9f9f9;
    margin: 20px -10px;
    padding: 20px 10px;
    border-radius: 10px;
}

.refferalImage {
    background-color: #d1d1d1;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.refferalText {
    margin: 10px 5px;
}

/* loginButton */
.loginButton {
    color: #fff;
    background: #677ed7;
    justify-content: center;
    align-items: center;
    padding: 10px 40px;
    margin: 20px 100px;
    border-radius: 5px;
    border-width: 0;
    font-family: 'Abril Fatface', cursive;
    font-family: 'Do Hyeon', sans-serif;
    font-family: 'Staatliches', cursive;
}

.loginButton a {
    font-size: 18px;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .loginButton {
        padding: 4px 15px;
        margin: 5px -70px;
        width: 110px;
        height: 30px;
        font-size: 30px;
    }

    .loginButton a {
        font-size: 13px;
        color: #fff;
    }
}

/* loginButton */

/* login popup */
.login-form-user-popup {
    display: none;
    top: 100px;
    left: 40%;
    width: 450px;
    height: auto;
    position: absolute;
    z-index: 99;
    margin-top: 150px;
    margin-left: 700px;
    text-align: center;
    background-color: #f9f9f9;
    margin: 20px -10px;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.signup-form-user-popup {
    display: none;
    top: 100px;
    left: 40%;
    width: 450px;
    height: auto;
    position: absolute;
    z-index: 99;
    margin-top: 150px;
    margin-left: 700px;
    text-align: center;
    background-color: #f9f9f9;
    margin: 20px -10px;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.buttonSigninup {
    justify-content: center;
    align-items: center;
    padding: 10px 40px;
    margin: 20px 100px;
    border-radius: 5px;
    background-color: #f3483c;
    border-width: 0;
    color: #fff;
}

.closeButtonPopup {
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    margin: 5px -10px;
    border-radius: 5px;
    background-color: #b8b8b8;
    border-width: 0;
    color: #000000;
    left: 25px;
    top: 10px;
    position: absolute;
    width: 30px;
    height: 30px;
}

.closeButtonPopup2 {
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    margin: 5px -10px;
    border-radius: 5px;
    background-color: #b8b8b8;
    border-width: 0;
    color: #000000;
    left: 25px;
    top: 10px;
    position: absolute;
    width: 30px;
    height: 30px;
}

.signinTab {
    padding: 20px 20px;
    background-color: #dfdede;
    margin: 20px 10px;
    width: 175;
    height: 20;
    border-radius: 10px;

}

.signupTab {
    padding: 20px 20px;
    background-color: #dfdede;
    margin: 20px 10px;
    width: 175;
    height: 20;
    border-radius: 10px;
}

.signinForm {
    display: flex;
    margin: 0px -150px;
    width: 100%;
}

.signupForm {
    display: none;

    width: 100%;
}

.signupForm .row {
    margin-left: 5px;
}

@media screen and (max-width: 768px) {
    .signupForm .row {
        margin-left: 20px;
        width: 320px;
    }

    .signinForm {
        margin: 0px -170px;
    }
}


.selectDiv {
    background-color: #eeeeee;
    color: #917063;
    width: 100%;
    height: 50px;

}

@media screen and (max-width: 768px) {
    .login-form-user-popup {
        width: 350px;
        height: auto;
        margin: 10px -140px;
        padding: 0px 10px;
    }

    .signup-form-user-popup {
        width: 300px;
        height: auto;
        margin: 10px -140px;
        padding: 20px 0px;
    }

    .inputLogin {
        width: 250px;
    }

    .buttonSigninup {
        width: 150px;
    }

    .closeButtonPopup {
        /* width: 30px;
        height: 30px;
        padding: 0px 0px; */
    }
}

.signupForm {
    margin: 0px -170px;
}

/* login popup */


/* font custom styles */
.fontSizeXXsmall {
    font-size: xx-small;
}

.fontSizeXsmall {
    font-size: x-small;
}

.fontSizeSmaller {
    font-size: smaller;
}

.fontSizeSmall {
    font-size: small;
}

.fontSizeMedium {
    font-size: medium;
}

.fontSizeLarge {
    font-size: large;
}

.fontSizeLarger {
    font-size: larger;
}

.fontSizeXlarge {
    font-size: x-large;
}

.fontSizeXXlarge {
    font-size: xx-large;
}

.boldXX {
    font-weight: bolder;
}

.boldX {
    font-weight: bold;
}

.bold900 {
    font-weight: 900;
}

.bold800 {
    font-weight: 800;
}

.bold700 {
    font-weight: 700;
}

.bold600 {
    font-weight: 600;
}

.bold500 {
    font-weight: 500;
}

.bold400 {
    font-weight: 400;
}

.bold300 {
    font-weight: 300;
}

.bold200 {
    font-weight: 200;
}

.bold100 {
    font-weight: 100;
}

/* font custom styles */


.youtubeVideo {
    width: 900px;
}



::selection {
    background: #1a75ff;
    color: #fff;
}

.wrapper {
    margin: 10px 30px;
    /* overflow: hidden; */
    /* max-width: 990px; */
    /* background: #fff; */
    /* padding: 30px; */
    /* border-radius: 15px; */
    /* box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
}

.wrapper .title-text {
    display: flex;
    width: 200%;
}

.wrapper .title {
    width: 50%;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .slide-controls {
    position: relative;
    display: flex;
    height: 50px;
    width: 300%;
    overflow: hidden;
    margin: 30px 0 10px 0;
    justify-content: space-between;
    border: 1px solid lightgrey;
    border-radius: 15px;
}

.slide-controls .slide {
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.6s ease;
}

.slide-controls label.signup {
    color: #000;
}

.slide-controls .slider-tab {
    position: absolute;
    height: 100%;
    width: 50%;
    left: 0;
    z-index: 0;
    border-radius: 15px;
    background: -webkit-linear-gradient(left, #003366, #004080, #0059b3, #0073e6);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@media screen and (max-width: 768px) {
    .wrapper .slide-controls {
        width: 220%;
        height: 30px;
        margin-left: 25px;
        margin-top: 50px;
    }

    .slide-controls .slide {
        font-size: 12px;
        text-align: center;
        line-height: 28px;
    }
}

input[type="radio"] {
    display: none;
}

#signup:checked~.slider-tab {
    left: 50%;
}

#signup:checked~label.signup {
    color: #fff;
    cursor: default;
    user-select: none;
}

#signup:checked~label.login {
    color: #000;
}

#login:checked~label.signup {
    color: #000;
}

#login:checked~label.login {
    cursor: default;
    user-select: none;
}

.form-inner form .field {
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.form-inner form .field input {
    height: 100%;
    width: 100%;
    outline: none;
    padding-left: 15px;
    border-radius: 15px;
    border: 1px solid lightgrey;
    border-bottom-width: 2px;
    font-size: 17px;
    transition: all 0.3s ease;
}

.form-inner form .field input:focus {
    border-color: #1a75ff;
    /* box-shadow: inset 0 0 3px #fb6aae; */
}

.form-inner form .field input::placeholder {
    color: #999;
    transition: all 0.3s ease;
}

form .field input:focus::placeholder {
    color: #1a75ff;
}

.form-inner form .pass-link {
    margin-top: 5px;
}

.form-inner form .signup-link {
    text-align: center;
    margin-top: 30px;
}

.form-inner form .pass-link a,
.form-inner form .signup-link a {
    color: #1a75ff;
    text-decoration: none;
}

.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover {
    text-decoration: underline;
}

form .btn {
    height: 50px;
    width: 100%;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

form .btn .btn-layer {
    height: 100%;
    width: 300%;
    position: absolute;
    left: -100%;
    background: -webkit-linear-gradient(right, #003366, #004080, #0059b3, #0073e6);
    border-radius: 15px;
    transition: all 0.4s ease;
    ;
}

form .btn:hover .btn-layer {
    left: 0;
}

form .btn input[type="submit"] {
    height: 100%;
    width: 100%;
    z-index: 1;
    position: relative;
    background: none;
    border: none;
    color: #fff;
    padding-left: 0;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

/* slideshow product,deal,job detail */
.slideshowdetail-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}

.slides {
    display: none;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.slides.active {
    display: block;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 18px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}


.row-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 340px;
}