.user-profile .container {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.14);
    max-width: 1400px;
    margin: 0 auto 20px;

}

button.createbtn.w-100.py-0 {
    font-size: 22px;
}

.relative {
    position: relative;
}

button.cross-btn-canadas {

    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 11px;

    position: absolute;
    display: block;
    right: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;


    text-align: center;
    line-height: 1em;
    cursor: pointer;
}

button.cross-btn-canadas span {
    font-size: 13px !important;
    font-weight: bold;
    position: relative;
    bottom: 1px;
    top: -26px;
    background: red;
    padding: 1px 5px;
    border-radius: 55%;
    right: 9px;
}

button.cross-btn-uks {

    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 11px;

    position: absolute;
    display: block;
    right: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;


    text-align: center;
    line-height: 1em;
    cursor: pointer;
}

button.cross-btn-uks span {
    font-size: 13px !important;
    font-weight: bold;
    position: relative;
    bottom: 1px;
    top: -26px;
    background: red;
    padding: 1px 5px;
    border-radius: 55%;
    right: 18px;
}

.r-25 {
    right: 21px !important;
}

button.cross-btn {
    position: absolute;
    top: 13.5px;
    right: 6px;
    width: 10px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: red;
    font-size: 11px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.cross-btn span {
    font-size: 13px !important;
    font-weight: bold;
    position: relative;
    bottom: 1px;
}

button.cross-btn-deduction {
    position: absolute;
    top: 12px;
    right: 22px;
    width: 10px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: red;
    font-size: 11px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.cross-btn-deduction span {
    font-size: 13px !important;
    font-weight: bold;
    position: relative;
    bottom: 1px;
}

.cross-btn-canada {
    position: relative;
    right: 0;
    bottom: 32px;
    left: 85%;
}


/* .left-sidebar{
    border-right:1px solid #ddd;
} */
.right-side-bar {
    padding: 10px;
}

.hover:hover {
    background-color: #e6eef9;
}

.hover {
    transition: all 0.3s ease-in-out;
    align-items: center;
}

i.fa.fa-envelope.profile-icon {
    font-size: 20px;
    color: #5a5858;
}

.user-text h4 {
    font-size: 17px;
    margin: 0;
}

button#menu1 {
    font-size: 14px;
    text-transform: capitalize;

}

.profile-icon-outer {
    width: 40px;
    height: 40px;
    background-color: rgb(128, 128, 128, 0.3);
    display: flex;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    margin-right: 25px;
}

.profile-outer:last-child {
    margin-bottom: 0;
}

.edit-icon {
    width: 30px;
    height: 30px;
    border: 1px solid blue;
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

.d-flex.input-left {
    width: calc(100% - 30px);
    justify-content: start;
}

.d-flex.trash-account {
    justify-content: start;
}

.profile-outer {
    display: flex;
    flex-wrap: wrap;
    width: 350px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.member-plan {
    padding-top: 30px;
    /* max-width: 260px; */
    text-align: center;
}

.member-plan h4 {
    color: #1a0cff;
    font-weight: 600;
    font-size: 20px;
}

.member-plan p {
    text-align: center;
    color: red;
    margin: 0;
    font-weight: 600;
}

button.renew-btn {
    background-color: #fcc700;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    border-radius: 15px;
    border: 1px solid #000;
    padding: 0px 15px;
    margin-top: 5px;
}

i.fa.fa-lock.lock {
    font-size: 25px;
    color: #5a5858;
}

input.contact-box {
    width: 93%;
    padding: 8px 12px;
    border-radius: 5px;
}

label.label-text {
    font-size: 10px;
    background-color: #fff;
    padding: 5px;
    position: relative;
    top: 20px;
    left: 5px;
}

input.contact-box:hover {
    background: #fff !important;
    color: black !important;
}

p.mail-text {
    margin: 15px 0px 0px;
    padding: 0;
}

i.fa.fa-eye-slash.eye-icon {
    font-size: 20px;
    position: relative;
    right: 30px;
}

i.eye-icon.fa.fa-eye {
    font-size: 20px;
    position: relative;
    right: 30px;
}

p.resend-otp {
    display: flex;
    justify-content: end;
    margin-top: -10px;
    margin-right: 45px;
    margin-bottom: 0px;
}

/* user profile css end */
.dropbtn {
    background-color: #fff;
    color: #000;
    padding: 0px 7px 0px 40px;
    font-size: 11px;
    border: 1px solid #e8e8e8;
    border-radius: 50px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    right: 0;
    width: 100%;
    margin-right: 6px;
}

.user-icon img {
    width: 100%;
}

.user-icon {
    max-width: 38px;
    position: relative;
    top: 38px;
    z-index: 1;
    left: 0;
}

.logout img {
    width: 100%;
}

.logout {
    max-width: 32px;
    position: relative;
    top: 38px;
    z-index: 1;
    left: 40px;
}

.dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: "";
}

.dropdown-menu.pull-right:before {
    right: 9px;
    left: auto;
}

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: "";
}

.dropdown-menu.pull-right:after {
    right: 10px;
    left: auto;
}

.navright-btn:focus {
    box-shadow: none;
}

ul.dropdown-menu.show {
    padding: 15px 12px;
    margin-top: 6px;
}

ul.dropdown-menu.show li {
    padding-bottom: 10px;
}

ul.dropdown-menu.show li a {
    color: #444;
    transition: all 0.2s ease-in-out;
}

ul.dropdown-menu.show li a:hover {
    color: #000;
    text-decoration: none;
}

.input-box-font {
    padding: 6px !important;
    text-align: left !important;
    border-radius: 0 !important;
    font-size: 17px;
    color: #000 !important;

}

.dropdown12 {
    border-radius: 6px !important;
}

.watermark-bg:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: -40px;
    left: 0px;
    right: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto;
    background-image: url("http://paystubx.com/user/watermark-bg2.png");
}

.watermark-bg {
    position: relative;
}

@media only screen and (min-width: 1025px) and (max-width: 1439px) {
    .col-set1 {
        margin: 0 !important;
    }
}

@media only screen and (min-width: 424px) and (max-width: 768px) {
    .margin-left {
        margin: 0px 30px 0px auto;
    }

    .input-box-font {
        font-size: 12px;
    }

    .margin-right {
        margin: 0px auto 0px 30px;
    }

    .mt-5.d-flex.pt-5.top-gogle {
        padding: 0 !important;
    }

    .direction-left {
        font-size: 10px !important;
    }

    .direction-left-canada {
        font-size: 10px !important;
    }


}

@media only screen and (min-width: 620px) and (max-width: 720px) {
    .col-md-4.text-center.vedio-box {
        max-width: 33.33%;
    }

    .d-flex.flex-wrap.justify-content-between.usa-btn-inner {
        display: inline-block !important;
    }

    .d-flex.flex-wrap.justify-content-between.canada-btn-inner {
        display: inline-block !important;
    }

    input.input-uk.text-center.taxes {
        width: 100% !important;
    }

    .uk-texs {
        width: 100% !important;
    }

    button.netpaybtn.net_pay {
        width: 100% !important;
    }

    .border-right-line {
        border-right: none !important;
    }
}



@media only screen and (min-width: 374px) and (max-width: 425px) {
    .input-box-font {
        font-size: 14px !important;
    }

    .margin-left {
        margin: 0 auto !important;
    }

    .margin-right {
        margin: 0 auto !important;
    }

    .col-md-4.mt-3.pl-0.padding-0 {
        padding: 0 !important;
    }

    .col-lg-12.center-btn {
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }

    .col-xl-4.col-lg-7.col-md-4.mt-2.margin-bottom.px-lg-2.px-0.center-btn {
        display: flex;
        justify-content: center;
    }


}

@media only screen and (min-width: 320px) and (max-width: 375px) {
    .col-md-4.mt-3.pl-0.padding-0 {
        padding: 0 !important;
    }

    .col-lg-12.center-btn {
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }

    .col-xl-4.col-lg-7.col-md-4.mt-2.margin-bottom.px-lg-2.px-0.center-btn {
        display: flex;
        justify-content: center;
    }

    input.input-pie-box.input {
        max-width: 83%;
    }



}

.createbtn {
    padding: 1px 40px;
    border-radius: 5px;
    background-color: #ef2d22;
    color: white;
    border: 1px solid rgb(232, 102, 102) "";
    font-size: 24px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
}

.createbtn2 {
    padding: 0px 58px;
    border-radius: 1px;
    background-color: #178a9380;
    color: white;
    border: 1px black;
    font-size: 24px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
}

.see-sample {
    padding: 4px 10px;
    font-size: 17px;
    border: 2px solid red;
    border-radius: 4px;
    /* background: #fed58e; */
    background-image: linear-gradient(109deg, #f5ca88, #feeaa0);
    color: #1c00f0;
    font-weight: 600;
    box-shadow: 1px 1px 4px 1px #00000096;
    position: absolute;
    z-index: 14;
    top: 212px;
    left: 173px;
}

.see-sample:hover {
    background-image: linear-gradient(360deg, #631b01, #efb9a7);
    color: white !important;
    border: 2px solid black !important;
}

.see-sample1 {
    padding: 4px 10px;
    font-size: 17px;
    border: 2px solid red;
    border-radius: 4px;
    /* background: #fed58e; */
    background-image: linear-gradient(109deg, #f5ca88, #feeaa0);
    color: #1c00f0;
    font-weight: 600;
    box-shadow: 1px 1px 4px 1px #00000096;
    position: absolute;
    z-index: 14;
    top: 184px;
    left: 508px;
}

.see-sample1:hover {
    background-image: linear-gradient(360deg, #631b01, #efb9a7);
    color: white !important;
    border: 2px solid black !important;
}

.see-sample2 {
    padding: 4px 10px;
    font-size: 17px;
    border: 2px solid red;
    border-radius: 4px;
    /* background: #fed58e; */
    background-image: linear-gradient(109deg, #f5ca88, #feeaa0);
    color: #1c00f0;
    font-weight: 600;
    box-shadow: 1px 1px 4px 1px #00000096;
    position: absolute;
    z-index: 14;
    top: 217px;
    /* left: 160px; */
    right: 187px;
}

.see-sample2:hover {
    background-image: linear-gradient(360deg, #631b01, #efb9a7);
    color: white !important;
    border: 2px solid black !important;
}

.see-img {
    position: relative;
}

.col-set {
    max-width: 559px;
    margin: 0 0 0 auto;
}

.col-set1 {
    display: flex;
    margin: 0 161px 0 0;
}

.CreatePaystub {
    width: 312px;
    height: 64px;
    border-radius: 63px;
    background-color: #ff4040;
    font-weight: 700;
    margin: auto;
    font-size: xx-large;
    font-family: "Futura LT";
    margin-bottom: 20px;
}

.box-h5 {
    padding-left: 14px;
}

.netimg {
    width: 181px;
    height: 172px;
    margin-right: 10px;
}

.netimg1 {
    width: 181px;
    height: 172px;
    margin-right: 10px;
}

.box-usa {
    border: 3px solid #ff6161;

    background: #e8e6e6;

    border-radius: 2px;
}

.box-usa1 {
    border: 2px solid #fe0f10;
    padding: 10px;
    background: #ffffff;
    padding: 32px 19px;
    border-radius: 10px;
    margin-left: 30px;
}

.lable {
    color: #000000;
    font-weight: 400;
    margin: 0;
    font: var(--font_2);
    font-weight: 600;
}

#fname {
    border: 1px solid #00000075;
}

#fname:hover {
    box-shadow: 5px 5px 1px 3px #0000002b;
    background: #244b1f;
}

.mmenu {
    width: 67%;
    margin: auto;
}

.uk-eye {
    font-size: 50px;
}

.ukbtn {
    font-size: 16px;
    width: 100%;
    padding: 4px 10px;
    color: #1608ea;
    border-radius: 5px;
    border: 2px solid #ff0000a3;
    text-align: left;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
    font-weight: 700;
}

.dropdown1 {
    width: 50% !important;
    padding: 6px;
    border: 1px solid #00000080;
    background: #ffffff;
    margin: auto;
    font-size: 20px;
    font-weight: 500;
    position: relative !important;
}

.down {
    position: absolute;
    right: 167px;
    top: 45px;
    font-size: 37px;
    font-weight: bold;
    z-index: 1223;
}

.down1 {
    position: absolute;
    right: 183px;
    top: 48px;
    font-size: 37px;
    font-weight: bold;
    z-index: 1223;
}

.dropdown11 {
    width: 100%;
    padding: 6px;
    border: 1px solid #00000080;
    background: #ffffff;
    margin: auto;
    font-size: 17px;
    border-radius: 2px;
}

.viewbtn {
    font-size: 14px;
    background: yellow;
    padding: 5px 20px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
}

.form-control-address {
    color: #000 !important;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.6em + 1rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* .formm:hover {
    color: #495057 !important;
} */

.hour_btn {
    padding: 8px 16px;
    border-radius: 3px;
    color: white;
    border: none;
    font-size: 15px;
    background-color: #f70303;
    margin-right: 5px;
}

.salary_btn {
    padding: 8px 16px;
    border-radius: 3px;
    color: white;
    border: none;
    font-size: 15px;
    background-color: #827f7f;
}

.statementbtn {
    font-size: 13px;
    width: 100%;
    padding: 8px 10px;
    background: #074151;
    color: white;
    border: none;
    border-radius: 2px;
}

.earnbtn {
    font-size: 15px;
    width: 100%;
    padding: 6px 0px 5px 0px;
    color: #1608ea;
    border-radius: 5px;
    border: 2px solid #ff0000a3;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
    font-weight: 700;
    background: #e9e6e6;
}

.earnbtn2 {
    font-size: 20px;
    position: absolute;
    padding-left: 15px;
    color: blue;
    top: 12px;
    left: 12px;
    appearance: none;
}

img.earnbtn2.lock {
    top: 10px;
    left: 12px;
}

.earnbtn3 {
    font-size: 20px !important;
    height: 17px;
    width: 17px;
    margin-top: 7px;
    padding-right: 1px;
}

.netpaybtn {
    font-size: 28px;
    width: 100%;
    padding: 0px 10px;
    background: #0ec23b;
    color: white;
    border: none;
    border-radius: 4px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
}

#name {
    border-radius: 12px;
    border: navajowhite;
    padding: 11px;
    box-shadow: 6px 6px 1px 3px #e4bfae;
}

.finame {
    font-size: 13px;
    padding: 0px 1px;
    margin: 5px;
    color: #000000ab;
}

.shd {
    box-shadow: 5px 0px #888888;
}

.sendbtn {
    padding: 6px 27px;
    border: none;
    margin-top: 30px;
    background: white;
    border-radius: 15px;
    /* box-shadow: 1px 2px 3px 4px; */
    box-shadow: 6px 6px 1px 1px #e4bfae;
}

.sendbtn:hover {
    background-color: #e4bfae;
    color: white;
    border: 1px solid white;
}

#name:hover {
    border: 1px solid black;
}

.previewbtn {
    font-size: 23px;
    color: #ffffff;
    background: #ef2e21 !important;
    padding: 0px 35px;
    border: none;
    border-radius: 4px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
    background-color: #8ebc42;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.5s ease-in-out;
    border: 1px solid transparent;
}

.bottom-close {
    font-size: 23px;
    color: #ffffff;
    background: #ef2e21 !important;
    padding: 0px 35px;
    border: none;
    border-radius: 4px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
    background-color: #8ebc42;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.5s ease-in-out;
    border: 1px solid transparent;
    margin-left: 5px;
}

.previewbtn:hover {
    background: white !important;
    color: #ef2e21;
    border: 1px solid #ef2e21;
    box-shadow: 6px 5px 4px 0px #00000066;
    text-decoration: none;
}

.bottom-close:hover {
    background: white !important;
    color: #ef2e21;
    border: 1px solid #ef2e21;
    box-shadow: 6px 5px 4px 0px #00000066;
    text-decoration: none;
}

.pay-box {
    border: 1px solid #0000008c;
    padding: 26px 27px;
    background: white;
    font-weight: 200;
    text-align: center;
    font-size: 19px;
}

.pay-box1 {
    border: 1px solid #0000008c;
    padding: 11px;
    background: white;
    font-weight: 200;
    text-align: center;
    font-size: 17px;
}

a#resendOtpButton,
#forgotPasswordButton {
    color: #e57a68;
    text-decoration: underline;
}


a#resendOtpChangeMailButton {
    color: #e57a68;
    text-decoration: underline;
}

.pointer-active {
    pointer-events: visible;
}

.pointer-disable {
    pointer-events: none;
}

i.fa.fa-trash-o.trash {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
}

i.fa.fa-clock-o.clock {
    font-size: 18px;
    color: #e57b68;
    position: relative;
    top: 2px;
    left: 3px;
}

.d-flex.trash-account {
    display: flex;
    align-items: center;
}

i.fa.fa-user.user {
    font-size: 22px;
    color: #5a5858;
}

span#resendTimeOut {
    color: #e57b68;
    padding-left: 5px;
}

/*style the arrow inside the select element:*/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select:after {
    position: absolute;
    content: "\2304";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 99;
}

.sidenav a {
    text-decoration: none;
    font-size: 20px;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #0b2f5b !important;
    background: white !important;
    font-size: 20px;
}

.sidebar .active a {
    color: #0b2f5b !important;
    background: #fff;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #0c2f62;
}

.sidenav button#menu1 {
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
}

.dropbtn.mobile {
    width: 100%;
    text-align: center;
    max-width: 150px;
    margin: 0 auto;
    border-radius: 0;
    padding: 7px 0px;
    background-color: #0b2f5b;
    box-shadow: 4px 4px 2px 1px #e9d1d3;
    border: 5px double #fff;
}

button.btn-danger.logout-btn {
    padding: 7.5px 38px;
    border-radius: 5px;
    font-size: 20px;
    position: relative;
    border: 4px double;
    bottom: 22px;
    box-shadow: 4px 4px 2px 1px #e9d1d3;
    min-width: 152px;
    right: 6px;
}

.user-icon.mobile {
    max-width: 32px;
    top: 64px;

    left: 0;
}


.nav-btn {
    box-shadow: 4px 4px 2px 1px #e9d1d3;
    width: 55%;
    color: white !important;
    background: #0b2f5b;
    font-size: 16px;
    font-family: emoji;
    padding: 3px;
    border-radius: 5px;
    margin: 0 auto 20px !important;
    text-align: center;
}

.toggle-logo {
    max-width: 170px;
    padding-bottom: 30px;
    margin: 0 0 0 10px !important;
}

.earnbtn1 {
    font-size: 18px;
    width: 60%;
    padding: 0px 4px;
    background: #e9e6e6;
    color: #141212;
    border-radius: 4px;
    border: 2px solid #ff6261;
}

.emailbtn {
    font-size: 21px;
    color: #ffffff;
    background: #12c23a !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 3px 80px;
    border: none;
    border-radius: 4px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
    transition: all 0.5s ease-in-out;
    border: 1px solid transparent;
}

.emailbtn2 {
    font-size: 19px;
    color: #ffffff;
    background: #12c23a;
    padding: 3px 53px;
    border: none;
    border-radius: 4px;
    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
}

.sidebtn:hover {
    border: 1px solid black;
}

input {
    transition: all 0.3s ease-in-out;
    border: 1px solid #444 !important;
}

input:hover {
    border: 1px solid #244b1f !important;
    background: #244b1f !important;
    color: white !important;
}

.dropdown1:hover {
    box-shadow: 5px 5px 1px 3px #0000002b;
    color: black !important;
    border: 1px solid #d82e2e !important;
    background: #df5b5b45;
}

.viewbtn a:hover {
    color: #027bff !important;
}

.earnbtn:hover {
    color: white;
    background-image: linear-gradient(360deg, #a70404d6, #ebc6c3);
    border: 2px solid #0b0a0a !important;
    border-radius: 4px;
    transition: all 05s ease-in-out;
}

.fa-lock:hover {
    color: black !important;
}

.earnbtn1:hover {
    color: white;
    background-image: linear-gradient(45deg, #a70404d6, #cd7570);
    border: 2px solid #0b0a0a;
    border-radius: 4px;
}

.statementbtn:hover {
    background-color: #064151a8;
    color: #ffffff;
    /* border: 2px solid #2c5781; */
    font-weight: 400;
}

.emailbtn:hover {
    background: white !important;
    color: #40924a;
    border: 1px solid green;
    box-shadow: 6px 5px 4px 0px #00000066;
    text-decoration: none;
}

.mainhead {
    padding: 0px 225px 2px 4px;
    font-family: "Outfit", sans-serif;
    font-weight: 500;
}

.basicpay {
    display: contents;
}

.google-icon-wrapper {
    position: absolute;
    margin-top: 1px;
    margin-left: 1px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: white;
}

.google-icon {
    position: absolute;
    margin-top: 11px;
    margin-left: 1px;
    width: 42px;
    height: 31px;
    border-right: 1px solid;
}

.btn-text {
    float: right;
    margin: 14px 11px 0 0;
    color: black;
    font-size: 16px;
    letter-spacing: 0.2px;
    font-family: "Roboto";
    margin-right: 3px;
}

:hover {
    box-shadow: 0 0 6px google-blue;
}

:active {
    background: button-active-blue;
}

.singup {
    border: 1px solid #bcd6f3;
    padding: 10px;
    border-radius: 9px;
    width: 60%;
}

.continue {
    padding: 5px 23px;
    border: none;
    border-radius: 5px;
    background: red;
    color: white;
    margin-top: 10px;
}

.icon {
    width: 152px;
}

.mail {
    padding: 10px;
    border-radius: 100%;
    text-align: center;
    width: 80px;
    height: 76px;
    box-shadow: 1px 2px 13px 8px #0303031a;
    text-align: center;
    margin: auto;
}

.mailpic {
    width: 62px;
    padding: 12px;
    height: 65px;
}

.singup1 {
    border: 2px solid #ff0000;
    padding: 10px;
    border-radius: 9px;
    width: 64%;
    font-size: 13px;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 12px;
    font-size: 11px;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:500);

h5 {
    font-size: 1.5rem;
    font-weight: 900;
    font-family: serif;
}

.recipt-box {
    border: 1px solid red;
}

.rec-box-border {
    /* padding: 1px 20px; */
    border: 2px solid red;
}

/* w2paystub */
.w2p {
    margin: 0;
    color: red;
    font-weight: 700;
    font-size: 17px;
}

.form-row {
    border: 1px solid red;
}

.box-p {
    font-size: 17px;
    margin-top: 23px;
    position: relative;
}

.tickbox {
    width: 39px;
    height: 39px;
    position: absolute;
    top: 12px;
    left: 90px;
}

.form-no {
    text-align: center;
    /* margin: auto; */
    margin-top: 24px;
}

.payimg {
    width: 315px;
    padding-bottom: 65px;
}

.payimg2 {
    width: 100%;
    padding-bottom: 59px;
    margin-left: -60px;
    margin-top: -156px;
}

.payyy {
    justify-content: center;
    display: flex;
}

.img2-p {
    font-size: 20px;
    font-family: "Futura LT";
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

.base {
    font-weight: 900;
}

.paytext {
    left: 54px !important;
    font-size: 7px;
    top: 475px !important;
    margin-top: -47px;
}

.box-usa2 {
    border: 4px solid black;
    padding: 2px;
}

.canadah4 {
    font-weight: 300;
    font-size: 42px;
    letter-spacing: 1.5px;
    font-family: "Futura LT";
}

.canadah2 {
    font-size: 40px;
    font-family: "Futura LT";
    font-weight: 600;
}

.canadah1 {
    font-size: -webkit-xx-large;
    font-family: "Futura LT";
    font-size: 52px;
}

.canadap {
    font-size: 25px;
    font-weight: 300;
}

.canadaheading {
    font-size: 34px;
    font-weight: 300;
    letter-spacing: 1.5px;
    display: flex;
    max-width: 312px;
    font-family: "Outfit", sans-serif;
    margin-top: 21px;
}

.paddingleft {
    display: inline-table;
    padding: 0px 0px 0px 240px;
}

.uktext {
    font-size: 42px;
    font-weight: 300;
    font-family: "Futura LT";
}

.create-p {
    font-size: 15px;
    font-weight: 200;
    padding: 0px 0px 20px;
}

.ukpaystubtext {
    font-size: 18px;
}

.globleImg {
    width: 100%;
}

.stubheading {
    font-size: 48px;
}

.formp1 {
    font-size: 17px;
    margin-top: 114px;
    font-weight: 400;
}

.row {
    width: 100%;
    margin: auto;
}

.space-between {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.payhead {
    margin-top: 30px;
    padding-top: 30px;
}

select {
    text-align: center;
}

.frame1 {
    width: 405px;
    height: 229px;
}

.payp {
    font-size: 14px;
    color: white;
    background: #537b9d;
    border: none;
    padding: 6px 4px;
    border-radius: 4px;
    font-weight: 200;
    font-family: "Futura LT";
    margin-top: 17px;
}

.payp:hover {
    font-size: 14px;
    color: black;
    background: none;
    border: none;
    padding: 6px 4px;
    border-radius: 4px;
    font-weight: 200;
}

.OnPaystub {
    font-size: 20px;
    color: #0e0e0e;
    position: absolute;
    bottom: -156px;
    left: 179px;
    font-weight: 200;
    line-height: 35.5px;
}

.footimg {
    width: 100%;
    max-width: 260px;
}

.youtubeimg {
    width: 418px;
    height: 234px;
}

.smallfont {
    font-size: 25px;
    font-family: "Futura LT";
}

.smallfont1 {
    font-size: 22px;
    color: #363636;
    line-height: 1em;
    font-family: "Futura LT";
}

.smallfont2 {
    font-size: 30px;
    line-height: 1em;
    font-family: "Futura LT";
}

.smallfont3 {
    font-size: 30px;
    line-height: 1.5em;
    font-family: "Futura LT";
}

.wrapper {
    max-width: 1500px;
}

.font {
    font-family: "Futura LT";
    font-size: 20px;
}

p.text-white.footer-text {
    font-size: 17px !important;
}

.three-box-section {
    padding: 0px 0px 60px;
}

.box-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0px 20px;
}

.box-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.num {
    margin-top: 33px;
}

.box-border-outer {
    width: calc(33.33% - 14px);
    margin-right: 20px;
    border: 4px solid #000;
}

.box-border-outer:last-child {
    margin-right: 0;
}

.box {
    padding: 15px 30px;
    border: 9px solid #b3dade;
    height: 100%;
}

.box-content h6 {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    padding: 0px 0px 35px;
}

.bottom-content p {
    font-size: 20px;
    font-weight: 600;
    color: #767672;
    text-align: center;
    line-height: 1.9;
}

.box-icon img {
    width: 100%;
}

.box-icon {
    max-width: 117px;
    margin: 0 auto;
    padding: 0px 0px 35px;
}

/* w2paystub end */

.sidenav {
    display: none;
}

.openbtn {
    display: none;
}

.text-center2 {
    color: white;
}

.employee-font {
    font-size: xx-large;
    font-weight: 600;
    font-family: Futura Md BT;
}

.emp-img {
    max-width: 176px;
}

/* .text-right {
    margin-right: 30px;
} */

.redcon {
    padding: 55px 115px;
}

.flash-icon {
    font-size: 39px;
    position: relative;
    left: 10px;
}

.head-font {
    font-size: 30px;
    font-family: "Futura LT";
    margin-bottom: 30px;
}

/* chnges after testing by interen */
ul.nav.nav-justified.navbar {
    margin-bottom: 35px;
}

.gennn {
    margin-bottom: 30px;
}

.foot:hover {
    padding: 12px;
    border: 1px solid #fff;
    border-radius: 5px;
    max-width: 220px;
    text-align: center;
    margin-bottom: 15px;
    text-decoration: none !important;
    background-color: white;
    transition: all 0.5s ease-in-out;
}

.foot:hover a {
    color: black;
    text-decoration: none;
}

/* chnges after testing by interen end*/

/* w2 form design start */

.form-p {
    font-size: 12px;
    font-weight: 500;
    color: red;
    padding: 0;
    margin: 0;
}

.form-input {
    border: 1px solid #00000096;
    padding: 5px 46px;
    text-align: center;
    background: #8080801f;
}

.form-input2 {
    border: 1px solid #00000096;
    text-align: right;
    background: #8080801f;
    width: 100%;
}

.form-input3 {
    border: 1px solid #00000096;
    text-align: left;
    background: #8080801f;
    width: 100%;
}

/* w2 form design end*/

.checkbox {
    width: 40px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid black;
}

.mobile {
    display: none !important;
}

.desktop {
    display: block !important;
}

.color-red {
    color: red;
    font-weight: 600;
    font-size: 12px;
}

.w2-form-number p {
    font-size: 20px;
    font-weight: 800;
}

.checkbox-outer p {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 800;
    color: red;
    padding-right: 30px !important;
}

.checkbox-outer {
    max-width: 200px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.left-text {
    max-width: 275px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.bottom-box-inner:first-child {
    max-width: 140px;
}

.input-feild-outer {
    max-width: 335px;
    width: 100%;
    margin-left: 20px;
    border: 5px solid red;
    text-align: center;
}

.input-feild-outer input {
    max-width: 270px;
    width: 100%;
    margin-bottom: 5px;
    background-color: #8080801f;
    border: 1px solid #00000096;
    padding: 5px;
}

.w2-form-number {
    max-width: 200px;
    width: 100%;
    border-right: 2px solid red;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-box input {
    max-width: 250px;
    width: 100%;
    border: 1px solid #00000096;
    background-color: #8080801f;
}

textarea#w3review {
    max-width: 580px;
    width: 100%;
    margin-bottom: 9.5px;
    margin-left: 10px;
    margin-right: 10px;
}

.w2form-left-box {
    width: 52%;
    position: relative;
}

.w2form-left-box:before {
    position: absolute;
    top: 0;
    content: "";
    right: 0;
    width: 2px;
    height: 100%;
    background-color: red;
}

.w2form-right-box {
    width: 48%;
}

.w2form-box-outer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 2px solid red;
}

.bottom-box-outer.a {
    display: none;
}

.inputbox2 input {
    width: 100%;
    max-width: 250px;
    border: 1px solid #00000096;
    background-color: #8080801f;
    text-align: right;
    margin-bottom: 5px;
}

.inputbox2 {
    width: 50%;
    padding: 0px 15px;
    position: relative;
}

.inputbox2:before {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    width: 2px;
    height: 100%;
    background-color: red;
}

.inputbox2:nth-child(2n):before {
    content: none;
}

.bottom-textarea1 {
    margin-left: 0 !important;
}

.input-box2-outer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-bottom: 2px solid red;
    justify-content: center;
}

input.pie-box.input {
    max-width: 30px;
    width: 100%;
    text-align: center;
}

input.input-pie-box.input {
    max-width: 195px;
    width: 100%;
    margin-left: 12px;
}

.pie-box-outer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.inputbox-outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    padding-bottom: 6px;
    border-bottom: 2px dashed red;
    margin-bottom: 10px;
}

.input-box input {
    max-width: 250px !important;
    width: 100%;
    background-color: #8080801f;
}

.checkbox-inner {
    width: 33.33%;
    display: flex;
    flex-direction: column-reverse;
}

.checkbox-inner p {
    text-align: center;
    padding-bottom: 3px !important;
}

.display {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.checkbox-inner p {
    width: calc(100% - 20px);
}

p.checkbox-sqaure input {
    max-width: 20px;
    width: 100%;
}

p.checkbox-sqaure {
    max-width: 20px;
}

.border-none {
    border-bottom: 2px solid red;
    padding-bottom: 5px;
    padding-left: 10px;
}

.textarea-w2.textarea-outer {
    border-bottom: 2px solid red;
    padding-top: 1.5px;
}

.bottom-box-outer.for-mobile {
    visibility: visible;
}

.input-box.width {
    max-width: 260px;
    width: 100%;
    margin-right: 20px;
}

.bottom-box-inner1 {
    max-width: 175px;
    width: 100%;
    padding: 0px 10px;
    border-right: 2px solid red;
    padding-bottom: 10px;
}

.bottom-box-inner1 input {
    width: 100%;
}

.bottom-box-inner1:last-child {
    border-right: 0;
}

.bottom-outer:last-child {
    border-bottom: none;
}

.bottom-box-inner {
    max-width: 170px;
    width: 100%;
    padding: 0px 10px;
    border-right: 2px solid red;
    padding-bottom: 10px;
}

.bottom-box-inner:nth-child(2) {
    max-width: 200px;
}

.bottom-box-outer:last-child {
    width: 44%;
}

.bottom-box-outer {
    width: 56%;
    display: flex;
}

.bottom-box-inner input {
    width: 100%;
}

.bottom-outer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-bottom: 2px dashed red;
}

.for-desktop {
    display: none;
}

.for-desktop1 {
    visibility: visible;
}

select#cars {
    max-width: 130px;
    width: 100%;
    border: 1px solid black;
    background-color: white;
    border-radius: 2px;
}

.text {
    max-width: 60px;
    width: 100%;
    text-align: r;
    text-align: right;
}

.mobile-img-desktop {
    display: block;
}

.mobile-img {
    display: none;
}

/* w2 form design end*/
/* bottom gradiant section style start*/
.bottom-graadiant-section {
    background: linear-gradient(to right,
            rgb(108, 129, 70) 0%,
            rgb(190, 205, 129) 33%,
            rgb(206, 199, 212) 63%,
            rgb(246, 174, 120) 99%);
    padding: 30px 0px;
}

.content p {
    line-height: 1.3;
    font-size: 20px;
}

/* bottom gradiant section style end*/
/* uk design again start */
.payst {
    border: 1px solid red;
    display: flex;
}

/* uk design again end */

/* template-view */
.view-temp {
    color: #0e866c;
    font-size: 24px;
}

.view-temp2 {
    color: #ffffff;
    background: #e827a5;
    font-size: 22px;
}

.prebtn {
    color: #0e866c;
    background: #ffffff;
    font-size: 15px;
    border: #0e866c 2px solid;
}

.list-outer {
    padding: 0px 20px;
    display: block;
}

ul.mt-4 {
    padding: 0px 16px;
}

.computer-img {
    max-width: 900px;
    margin-left: auto;
}

.mt-5.global-heading h2 {
    max-width: 500px;
}

.global-p {
    max-width: 500px;
}

.global-list {
    padding: 0px 16px !important;
}

.img-uk-outer img {
    width: 100%;
}

.img-uk-outer {
    max-width: 900px;
}

.mt-5.pt-3.d-flex.uk-goo {
    padding-left: 48px !important;
}

.global-padding {
    max-width: 800px;
}

.text-white.ml-2.w2-form-heading {
    max-width: 310px;
}

.w2-form-pcimg img {
    width: 100%;
}

.w2-form-pcimg {
    max-width: 900px;
}

.w2-form-container {
    max-width: 1100px;
}

img.earnbtn2.global-earnbtn {
    left: 15px;
    top: 10px;
}

label.lable.em-name {
    font-weight: 700;
}

img.earnbtn2.lockuk {
    top: 18px;
    left: 5px;
}

.couple-img img {
    width: 100%;
}

.couple-img {
    max-width: 700px;
    margin-left: auto;
}

/* template-view end */

/* uk paystub start*/

.margintop-5 {
    margin-top: 5em;
}

.input-uk {
    font-size: 14px;
    border: 2px solid #ff5722;
    border-radius: 5px;
    box-shadow: 0px 3px 7px 1px #0000004f;
    width: 100%;
    padding: 8px 9px;
    background: rgba(255, 255, 255, 0);
    text-align: center;
    font-weight: 600;
    color: blue;
}

.ukpay-inner {
    padding: 10px;
}

.ukpay-inner1 {
    padding: 0px 0px 24px 0;
    display: contents;
}

.uk-lable {
    font-size: 19px;
    font-weight: 300;
}

.pay-outer:hover {
    background: #f8eae0;
}

.input-uk:hover {
    color: white;
    background-image: linear-gradient(360deg, #a70404d6, #ebc6c3);
    border: 2px solid #000000 !important;
    border-radius: 5px;
    box-shadow: 0px 3px 7px 1px #0000004f;
    width: 100%;
    padding: 8px 9px;
}

.select-dropdown {
    color: #000 !important;
}

/* chnges after testing by interen */
@media screen and (max-width: 1440px) {
    .payyy {
        justify-content: flex-start;
        display: flex;
    }

    .mmenu {
        width: 100%;
    }

    .col-lg-3.display-none {
        display: none;
    }

    .container.bg-light.redcon {
        max-width: 1385px !important;
    }

    .container.btn-container {
        max-width: 1385px !important;
    }

    .down {
        position: absolute;
        right: 91px;
        top: 47px;
        font-size: 35px;
        font-weight: bold;
        z-index: 1223;
    }

    .down1 {
        position: absolute;
        right: 72px;
        top: 48px;
        font-size: 34px;
        font-weight: bold;
        z-index: 1223;
    }

    .Payslips {
        padding: 0px;
    }

    .storbtn {
        margin-bottom: 19px;
    }

    .paddingleft {
        padding: 0px 0px 0px 80px;
    }

    .uktext {
        font-size: 25px;
    }

    .payimg {
        position: relative;
        top: 40px;
        padding-bottom: 85px;
        width: 250px;
        left: 130px;
    }

    .paytext {
        margin-top: 0;
        margin-left: 80px;
    }

    .img2-p {
        margin-left: 80px;
    }

    .OnPaystub {
        font-size: 20px;
        color: #0e0e0e;
        position: absolute;
        bottom: -194px;
        left: 179px;
        font-weight: 200;
        line-height: 35.5px;
    }

    .payimg2 {
        width: 96%;
        padding-bottom: 2px;
        margin-left: -65px;
        margin-top: -97px;
    }

    .space-between {
        justify-content: center;
    }

    .padding {
        padding: 0px 20px !important;
    }

    .abc {
        display: none;
    }
}

@media screen and (min-width: 1155px) {
    .opennav {
        display: none;
    }
}

@media screen and (max-width: 1155px) {
    .Payslips {
        font-family: serif;
        font-size: 14px;
        line-height: 2em;
    }
}

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

    /* .navbar {
        display: none;

    } */
    .navbtn {
        font-size: 14px;
    }
}

.eyes1 {
    font-size: 39px;
    margin-left: 6px;
}

.basic {
    margin-left: 70px;
    font-weight: 900;
}

.basic1 {
    margin-left: -23px;
    font-weight: 400;
}

@media only screen and (min-width: 769px) and (max-width: 1025px) {
    img.mr-3.mt-5.header-logo {
        width: 185px !important;
        margin-right: 0;
    }

    .navbtn {
        max-width: 105px;
    }
}

@media screen and (max-width: 1024px) {
    .checkbox-inner {
        width: 100%;
        display: flex;
        flex-direction: inherit;
        align-items: flex-start;
    }

    .direction-left {
        border-radius: 0px !important;
    }

    .direction-left-canada {
        border-radius: 0px !important;
    }

    .formp {
        font-size: 15px;
    }

    p.top-heading {
        font-size: 20px;
    }

    .checkbox-inner p {
        text-align: left;
    }

    .container.bg-light.redcon {
        max-width: 978px !important;
    }

    .container.btn-container {
        max-width: 978px !important;
    }

    .checkbox-sqaure p {
        margin-left: 10px;
    }

    .display {
        display: inline-block;
    }

    .checkbox-sqaure {
        width: 20px !important;
    }

    img.w-100.global-mobile-img {
        margin-top: 45px;
    }

    .redcon {
        padding: 30px;
    }

    .address_book {
        border-radius: 0px !important;
    }

    .address_book_1 {
        border-radius: 0px !important;
    }

    .w2-form-number {
        max-width: 100px;
    }

    .bottom-box-outer.a {
        display: flex;
    }

    .bottom-box-outer.b {
        display: none;
    }

    .checkbox-outer {
        max-width: 135px;
    }

    .input-feild-outer {
        max-width: 315px;
    }

    .left-text {
        max-width: 175px;
    }

    textarea#w3review {
        max-width: 450px;
    }

    input.pie-box.input {
        max-width: 23px;
        height: 27px;
        width: 100%;
        font-size: 10px;
    }

    .QUICK {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .mt-5.pt-5.justify-content-center {
        margin: 0px !important;
        padding: 0px !important;
    }

    input.input-pie-box.input {
        max-width: 145px;
    }

    .bottom-box-outer {
        flex-wrap: wrap;
        width: 100%;
        border-bottom: 2px solid red;
        margin-right: 0;
    }

    .bottom-box-inner:last-child {
        border-right: none;
    }

    .bottom-box-outer:last-child {
        width: 100%;
        border-bottom: none;
    }

    .bottom-box-inner {
        max-width: 175px;
    }

    .bottom-box-inner1 {
        max-width: 175px;
    }

    .mobile {
        display: block !important;
    }

    .desktop {
        display: none;
    }

    .bottom-box-outer.for-mobile {
        visibility: hidden;
    }

    .bottom-box-outer.for-mobile .bottom-box-inner {
        padding: 0 !important;
    }

    .for-desktop {
        display: block;
    }

    .for-desktop1 {
        visibility: visible;
    }

    .num {
        margin-top: 0px;
    }

    .see-sample2 {
        top: 182px;
        right: 157px;
    }

    .see-sample1 {
        top: 156px;
        left: 415px;
    }

    .see-sample {
        top: 179px;
        left: 141px;
    }

    .col-set {
        max-width: 410px;
        margin: 0 0 0 auto;
    }

    .col-set1 {
        display: flex;
        margin: 0 auto 0 66px;
        max-width: 556px;
    }

    .statementbtn {
        font-size: 10px;
    }

    .lable {
        font-size: 10px;
    }

    .w-100 {
        width: 100% !important;
        padding: 6px !important;
        text-transform: capitalize;
        font-size: 12px;
    }

    .ukpaystubtext {
        font-size: 13px;
    }

    .earnbtn {
        font-size: 12px !important;
    }

    h1.display-4 {
        font-size: 30px;
    }

    .mb-4.canadah4 {
        font-size: 25px;
    }

    h2.ml-3.canadah2 {
        font-size: 30px;
    }

    h1.canadah1 {
        font-size: 35px;
    }

    .create-container li {
        font-size: 10px;
    }

    .mainhead {
        padding: 0px 225px 2px 4px;
        font-family: "Outfit", sans-serif;
        font-weight: 500;
    }

    .payimg2 {
        width: 100%;
        padding-bottom: 21px;
        margin-left: -10px;
        margin-top: -22px;
    }

    .payimg {
        width: 195px;
        left: 100px;
    }

    .smallfont {
        font-size: 20px;
    }

    .smallfont1 {
        font-size: 13px;
        margin-top: 25px;
    }

    .smallfont2 {
        font-size: 18px;
    }

    .smallfont3 {
        font-size: 18px;
    }

    .mt-5.ready {
        font-size: 25px !important;
    }

    li.mt-2 {
        font-size: 17px !important;
    }

    .Generate {
        font-size: 18px !important;
    }

    .youtubeimg {
        width: 320px;
        height: 180px;
    }

    .frame1 {
        width: 316px;
        height: 176px;
    }

    .paytext {
        left: 54px !important;
        font-size: 7px;
        top: 310px !important;
    }

    .storbtn {
        width: 125px;
        height: 44px;
    }

    .global-content p {
        font-size: 14px !important;
    }

    .global-content h4 {
        font-size: 16px !important;
    }

    .create-p {
        font-size: 8px;
    }

    .tickbox {
        width: 20px;
        height: 39px;
        position: absolute;
        top: 16px;
        left: 77px;
    }

    .globlebtn1 {
        display: flex;
    }

    .w2p {
        margin: 0;
        color: red;
        font-weight: 700;
        font-size: 11px;
    }

    .box-usa {
        border: 3px solid #ff6161;
        background: #e8e6e6;
        border-radius: 2px;
        padding: 15px 0px !important;
    }

    .dropdown1 {
        width: 75% !important;
        padding: 6px;
        border: 1px solid #00000080;
        background: #ffffff;
        margin: auto;
        font-size: 22px;
        font-weight: 600;
        position: relative !important;
    }

    .down {
        position: absolute;
        right: 84px;
        top: 46px;
        font-size: 26px;
        font-weight: bold;
        z-index: 1223;
    }

    .down1 {
        position: absolute;
        right: 67px;
        top: 46px;
        font-size: 29px;
        font-weight: bold;
        z-index: 1223;
    }

    .OnPaystub {
        font-size: 19px;
        color: #0e0e0e;
        position: absolute;
        bottom: -232px;
        left: 55px;
        font-weight: 200;
        font-weight: 200;
    }

    .basic {
        margin-left: 25px;
        font-weight: 900;
        font-size: 14px;
    }

    .eyes1 {
        font-size: 25px;
        margin-left: 6px;
    }

    .basic {
        margin-left: 27px;
        font-weight: 900;
    }

    .basic1 {
        margin-left: -23px;
        font-weight: 900;
    }

    .paddingleft {
        padding: 0px 0px 0px 35px;
    }

    .hour_btn {
        padding: 7px;
        font-size: 11px;
    }

    .salary_btn {
        padding: 7px;
        font-size: 11px;
    }

    .calcheading {
        font-size: 28px !important;
    }

    .WithPaystubX {
        font-size: 25px;
    }

    .Show {
        font-size: 25px;
    }

    .Createpay {
        font-size: 25px;
    }

    .font {
        font-size: 18px;
    }

    .footimg {
        max-width: 200px;
    }

    .createbtn2 {
        padding: 0px 6px;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .CreatePaystub {
        width: 312px;
        height: 64px;
        border-radius: 63px;
        background-color: #ff4040;
        font-weight: 700;
        margin: auto;
        font-size: xx-large;
        font-family: "Futura LT";
        margin-bottom: 20px;
    }

    .create-p {
        font-family: "Futura LT";
        font-size: 16px;
        line-height: 1.8;
    }
}

@media only screen and (min-width: 769px) and (max-width: 991px) {
    input.input-uk {
        width: 95%;
    }

    .netpaybtn {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .view-temp2 {
        color: #ffffff;
        background: #e827a5;
        font-size: 17px;
    }

    .text-center.w2-para {
        font-size: 25px !important;
    }

    .col-12.text-center.canada-btn-outer {
        padding: 0;
    }

    .earnbtn2 {
        top: 7px !important;
        appearance: none;
        left: 12px !important;
    }

    img.earnbtn2.lockuk {
        top: 18px !important;
    }

    .input-uk {
        width: 100%;
    }

    .uk-texs {
        width: 95%;
    }

    .d-flex.flex-wrap.justify-content-between.canada-btn-inner {
        justify-content: space-between !important;
    }

    .mt-5.pt-4.pr-3.mr-5.ml-3.d-flex.storehead.global {
        display: flex;
        justify-content: center;
        padding: 0 !important;
        margin: 0px !important;
    }

    .col-12.text-center.usa-btn {
        padding: 0;
    }

    .w2form-left-box:before {
        content: none;
    }

    .globleImg {
        margin: 0 auto !important;
        display: flex;
        justify-content: center;
        margin-top: 20px !important;
    }

    .col-lg-9.col-md-12.mt-5.py-5.pl-5.container.w2-form-container {
        margin: 0 !important;
    }

    .text-center.my-5.w2-form-text {
        margin-top: 0 !important;
    }

    .text-white.ml-2.w2-form-heading {
        font-size: 25px !important;
        text-align: left;
    }

    .text-left.pt-5.w2-form-content {
        padding: 0px !important;
    }

    a.btn.btn-lg.btn-danger.Generate1.w2-form-btn {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .formimg1 {
        margin: 0 auto !important;
        display: flex;
        justify-content: center;
    }

    .view-temp {
        color: #0e866c;
        font-size: 22px;
    }

    .storbtn {
        width: 120px !important;
        height: 40px !important;
        margin-bottom: 0;
    }

    .see-sample2 {
        top: 133px;
        right: 116px;
        padding: 4px 8px;
        font-size: 11px;
    }

    button.netpaybtn.net_pay {
        width: 95%;
        font-size: 25px;
    }

    .mobile-img-desktop {
        display: none;
    }

    .mobile-img {
        display: block;
    }

    .w2form-no {
        max-width: 100px;
    }

    .w2-checkbox-outer {
        max-width: 100px;
    }

    .w2form-left-box {
        width: 100%;
        border-right: 0;
    }

    .w2form-right-box {
        width: 100%;
        border-top: 2px solid red;
    }

    a.btn.btn-lg.w-100.navbtn.nav-btn.btn-logout.logout:hover {
        background-color: #fff !important;
        color: #d3230c !important;
    }

    input.input-uk.text-center.taxes {
        width: 95%;
    }

    button.netpaybtn.net_pay {
        width: 95%;
    }

    input.input-uk.text-center.taxePays {
        width: 95%;
    }

    img.payimg.mobile-img {
        width: 70%;
    }

    .payimg2 {
        width: 70% !important;
    }

    .inputbox2:before {
        right: 0;
    }

    input.input-pie-box.input {
        max-width: 87%;
    }

    .computer-img {
        margin-top: 30px;
    }

    textarea#w3review {
        max-width: 600px;
    }

    .inputbox2 {
        padding: 0px 15px 0px;
    }

    .inputbox2 input {
        max-width: 100%;
    }

    .bottom-box-inner {
        max-width: 165px;
    }

    .bottom-box-inner1 {
        max-width: 165px;
    }

    .see-sample1 {
        top: 114px;
        left: 312px;
        padding: 4px 9px;
        font-size: 11px;
    }

    .see-sample {
        top: 131px;
        left: 108px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .mainhead {
        text-align: center !important;
        padding: 0;
        font-size: 30px;
    }

    .mt-5.pt-3.pl-5.uk-btn {
        display: flex;
        justify-content: center;
        margin-top: 20px !important;
        padding: 0 !important;
        margin-bottom: 20px;
    }

    .mt-5.pt-3.d-flex.uk-goo {
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }

    .col-set1 {
        display: flex;
        margin: 0 auto;
        max-width: 580px;
    }

    .col-set {
        max-width: 594px;
        margin: auto;
    }

    .payp {
        font-size: 9px !important;
    }

    .gennn {
        margin-bottom: unset;
    }

    .go-ytd {
        font-size: 12px !important;
    }

    .usap {
        font-size: 12px !important;
    }

    .dropdown11 {
        width: 100%;
        border: 1px solid #00000080;
        background: #ffffff;
        margin: auto;
        font-size: 12px;

    }

    .list-img {
        width: 60px !important;
        height: 60px !important;
    }

    .uk-eye {
        font-size: 38px;
    }

    .Createpay {
        padding-top: 20px;
    }

    .can-p {
        font-size: 19px !important;
    }

    .pay-h2 {
        font-size: 23px !important;
    }

    .footimg {
        width: 55%;
    }

    .frame1 {
        width: 238px;
        height: 134px;
    }

    .tickbox {
        width: 20px;
        height: 39px;
        position: absolute;
        top: 16px;
        left: 77px;
    }

    .earnbtn {
        font-size: 12px;
    }

    .lable {
        color: #000000;
        margin: 0;
        font-size: 9px;
    }

    .globlebtn1 {
        display: flex;
        justify-content: center;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .text-white {
        text-align: center;
        margin-top: 4px;
    }

    .text-padding {
        padding: 0px 0px 0px 30px;
    }

    .formimg1 {
        margin-left: 10px;
    }

    .footer-text {
        text-align: center;
    }

    .flex-row {
        max-width: 210px;
        margin: 0 auto;
    }

    .box-usa {
        border: 3px solid #ff6161;
        /* padding: 10px 0px 12px 0px; */
        background: #e8e6e6;
        border-radius: 2px;
    }

    a.btn.btn-lg.p-2.btn-danger.Generate.global-btn {
        display: flex;
        justify-content: center !important;
        font-size: 16px !important;
        margin: 0 auto 20px !important;
        padding: 11px 20px !important;
    }

    .Generate {
        padding: 11px 20px !important;
        max-width: 300px !important;
        margin: 0 auto 15px !important;
    }

    .my-3.d-flex {
        justify-content: center;
    }

    .dropdown1 {
        width: 73% !important;
        padding: -11px;
        border: 1px solid #00000080;
        background: #ffffff;
        margin: auto;
        font-weight: 900;
        position: relative !important;
    }

    .down {
        position: absolute;
        right: 68px;
        top: 46px;
        font-size: 19px;
        font-weight: bold;
        z-index: 1223;
    }

    .down1 {
        position: absolute;
        right: 61px;
        top: 45px;
        font-size: 21px;
        font-weight: bold;
        z-index: 1223;
    }

    .viewbtn {
        background: yellow;
        padding: 5px 7px;

        border-radius: 4px;
        font-weight: 700;
    }

    button.viewbtn a {
        color: #010101 !important;
    }

    .globe-ul {
        margin: 0;
    }

    .eyes {
        font-size: 29px !important;
    }

    .OnPaystub {
        font-size: 18px;
        color: #0e0e0e;
        position: absolute;
        bottom: -115px;
        left: 115px;
        font-weight: 200;
    }

    .payimg {
        position: relative;
        width: 30%;
        top: 19px;
    }

    .payimg2 {
        margin-top: 0px;
        width: 60%;
        margin: 40px auto 0px 85px;
    }

    .paytext {
        margin-left: 0px !important;
    }

    .payimg {
        padding-bottom: 50px;
    }

    .youtubeimg {
        width: 230px;
        height: 131px;
    }

    .storbtn {
        width: 106px;
        height: 39px;
    }

    .storehead {
        padding: 0px 0px 0px 12px;
    }

    .pay-p {
        font-size: 13px !important;
    }

    .hour_btn {
        padding: 8px;
        border-radius: 3px;
    }

    .salary_btn {
        padding: 8px;
        border-radius: 3px;
    }

    .justifycenter {
        justify-content: center;
    }

    .stubheading {
        font-size: 35px;
    }

    .formp1 {
        font-size: 15px;
        margin-top: 20px;
        font-weight: 400;
    }

    .box-border-outer {
        width: 55%;
        margin-bottom: 20px;
        margin-right: 0px;
    }

    .box-row {
        justify-content: center;
    }

    .navbar {
        display: none;
    }

    .sidenav {
        display: block;
    }

    .openbtn {
        display: block;
    }

    .canadaheading {
        text-align: center !important;
        max-width: 100%;
        font-size: 27px;
        margin-top: 0px;
    }

    .text-center2 {
        text-align: center;
    }

    .display-4 {
        font-size: 1.5rem;
    }

    .employee-font {
        font-size: 20px;
    }

    .emp-img {
        max-width: 150px;
    }

    .canadah4 {
        font-size: 25px;
    }

    .canadah2 {
        font-size: 25px;
        margin-left: 0 !important;
    }

    .canadah1 {
        font-size: 30px;
    }

    .createbtn2 {
        padding: 0px 62px;
    }

    .redcon {
        padding: unset;
    }

    .tickbox {
        width: 20px;
        height: 39px;
        position: absolute;
        top: -3px;
        left: 77px;
    }

    .flash-icon {
        font-size: 20px;
    }

    .small {
        font-size: 14px;
    }

    .base {
        font-size: 14px;
    }


    .earnbtn {
        padding: 6px 13px 5px 13px;
    }

    .how_p {
        font-size: 13px !important;
    }

    .statementbtn {
        padding: 10px 2px;
    }

    .uk-lable {
        font-size: 18px;
    }

    .emailbtn {
        padding: 3px 23px;
        max-width: 305px;
        width: 100%;
        margin: 0 auto;
    }

    .previewbtn {
        padding: 0px 23px;
        margin: 0 auto;
        max-width: 305px;
    }

    .continue {
        padding: 0px 23px;
        border-radius: 5px;
    }

    p.resend-otp {
        margin-right: 0;
    }

    .form-control {
        margin: 0 auto 20px 0px;
    }

    .checkbox-outer {
        max-width: 105px;
    }

    .checkbox-outer p {
        padding-right: 18px !important;
    }

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

    .address_book_1 {
        font-size: 12px;
    }

    .address_book {
        font-size: 12px;
    }

    /* .address_book{
        width: 20% !important;
    }
    .address_book_1{
        width: 20% !important;
    } */
}

@media screen and (max-height: 450px) {
    .margintop-5 {
        margin-top: 0em;
    }

    .w-sm-100 {
        width: 100%;
    }

    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }

    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}



@media screen and (max-width: 720px) {
    .text-center.sh {
        display: none;
    }

    .d-flex.justify-content-between.mb-3.flex.w-100 {
        display: inline-block !important;
    }

    .margin-left {
        margin: 0 auto;
    }

    .margin-right {
        margin: 0 auto;
    }
}

@media (max-width: 425px) {
    .select-dropdown {
        text-align: left !important;
    }

    .storehead a img {
        margin-left: 0px !important;
    }

    input#cname {
        text-align: left !important;
    }

    .dropdown11 {
        padding: 6px !important;
        text-align: left !important;

    }

    .statementbtn {
        border-radius: 0;
    }

    select {

        text-align: center !important;

    }

    .hour_btn {
        width: 100%;
        max-width: 180px;
    }

    ul.dropdown-menu.show li a {
        font-size: 15px;
    }

    .salary_btn {
        width: 100%;
        max-width: 180px;
    }

    .input-box-font {
        font-size: 12px !important;
        height: 32px !important;
        text-transform: capitalize;
    }

    .createbtn {
        border: none;
    }

    .subscription-text {
        font-size: 13px;
    }

    .input-uk {
        width: 100%;
    }

    button.netpaybtn.net_pay {
        width: 100%;
    }

    .previewbtn {
        margin-right: 0px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        max-width: 300px;
        padding: 0px 7px;
    }

    input.pie-box.input {
        max-width: 25px;
        height: 28px;
    }

    img.earnbtn2.lockuk {
        top: 18px !important;
    }

    .profile-icon-outer {
        margin-right: 12px;
    }

    .edit-icon {
        width: 25px;
        height: 25px;
        position: relative;
        right: 20px;
    }

    .d-flex.input-left {
        width: calc(100% - 25px);
    }

    .d-flex.flex-wrap.justify-content-between.usa-btn-inner {
        justify-content: center !important;
    }

    .col-12.text-center.usa-btn {
        padding: 0px 20px;
    }

    .col-lg-9.col-md-12.mt-5.py-5.pl-5.container.w2-form-container {
        padding: 0px 20px !important;
    }

    .container.py-5.w2-form-containerpadding {
        padding: 0 !important;
    }

    .container.m-auto.justify-content-center.w2-form-containerpadding {
        padding: 0;
    }

    .container.m-auto.justify-content-center.w2-form-containerpadding p {
        text-align: center;
        padding: 0 !important;
        font-size: 15px !important;
        margin-top: 0;
    }

    .d-flex.flex-wrap.justify-content-between.canada-btn-inner {
        justify-content: center !important;
    }

    .text-center.my-5.w2-form-text {
        margin-bottom: 15px !important;
    }

    a.btn.btn-lg.btn-danger.Generate.w2-form-btn {
        font-size: 16px !important;
        max-width: 215px !important;
    }

    .col-lg-6.col-sm-12.col-md-12.pr-2.w2-form-img {
        padding: 0px !important;
    }

    ul.w2-form-list li {
        font-size: 15px;
    }

    p.text-left {
        font-size: 15px !important;
    }

    .d-flex.flex-wrap.justify-content-between.w2-form-row {
        justify-content: center !important;
    }

    .previewbtn {
        margin-left: 0;
        max-width: 100% !important;
    }

    .emailbtn {
        margin-right: 0;
    }

    p.para-w2 {
        font-size: 15px !important;
    }

    ul.justify-content-center.w2-form-list2 {
        padding: 0px 15px;
    }

    ul.justify-content-center.w2-form-list2 li {
        font-size: 15px;
    }

    .text-left {
        font-size: 15px !important;
    }

    .col-lg-9.col-md-12.mt-5.py-5.pl-5.container.w2-form-container h1 {
        font-size: 20px;
    }

    .text-justify.text-center.text-white.w2-form-bottom h1 {
        font-size: 18px;
    }

    .text-justify.text-center.text-white.w2-form-bottom h2 {
        font-size: 18px;
    }

    a.btn.btn-lg.btn-danger.Generate1.w2-form-btn {
        font-size: 17px;
    }

    .col-lg-5.col-sm-12.text-center.p-4.m-auto {
        padding: 15px 0px !important;
    }

    .text-white.PayslipsGlo.ml-4.text-white2 {
        font-size: 14px !important;
    }

    .text-white.Payslips {
        font-size: 14px !important;
    }

    .bottom-box-inner:first-child {
        max-width: 100%;
    }

    select#cars {
        max-width: 100%;
        height: 26.5px;
        padding: 1px 2px;
    }

    .oo {
        display: flex;
    }

    .direction-left {
        direction: ltr;
        padding: 0px 65px !important;
        appearance: none;
        -webkit-appearance: none;

    }

    .direction-left-canada {

        padding: 0px 75px !important;

    }

    .direction-left-canada-edit {
        padding: 0px 60px !important;
    }

    label.lable.text-center.uk-paystub-text {
        font-size: 9px !important;
    }

    p.top-heading {
        font-size: 16px;
    }

    .mt-5.justify-content-center.d-flex.w2-form-btn {
        margin-bottom: 20px;
    }

    a.btn.btn-lg.mt-5.p-2.btn-danger.Generate.canada-btn {
        max-width: 250px !important;
    }

    .three-box-section {
        padding-bottom: 0px;
    }

    .payst {
        border: unset;
        display: unset;
    }

    .fromimg {
        width: 80px;
    }

    .text-white.ml-2.w2-form-heading {
        font-size: 21px !important;
    }

    .basic1 {
        margin-left: 0px;
        font-weight: 900;
    }

    p.text-white.pay-p.head-font.home-p {
        font-size: 15px !important;
    }

    .box {
        padding: 10px !important;
    }

    .box-icon {
        padding-bottom: 10px !important;
    }

    .box-content h6 {
        padding-bottom: 10px !important;
    }

    .bottom-content p {
        font-size: 15px;
    }

    .ukp {
        font-size: 22px;
    }

    .uktext {
        font-size: 22px !important;
    }

    li.mt-1.ukli {
        font-size: 16px;
    }

    .col-set1 {
        margin: 30px auto 0px;
    }

    .mt-5.pt-5.justify-content-center {
        margin: 0 !important;
    }

    p.QUICK {
        font-size: 15px;
        text-align: center;
    }

    .mt-5.d-flex.pt-5.top-gogle {
        margin: 0 !important;
    }

    li.mt-2 {
        font-size: 13px !important;
    }

    .mt-5.pt-3 {
        margin-top: 0 !important;
        padding-left: 0 !important;
    }

    .mt-5 {
        margin-top: 15px !important;
    }

    .col-md-6.text-left.mb-5 {
        margin-bottom: 10px !important;
    }

    .mt-5.d-flex.pt-5.goggle {
        padding: 0 !important;
    }

    .row.py-5.justify-content-center {
        padding-bottom: 10px !important;
    }

    .pay-outer {
        padding: 0;
    }

    .margintop-5 {
        margin-top: 0em;
    }

    .w-sm-100 {
        width: 100%;
    }

    .text-white.PayslipsGlo.ml-4.text-white2 {
        font-size: 15px !important;
        margin-left: 0 !important;
    }

    h1.pt-5 {
        text-align: center;
        font-size: 20px !important;
    }

    .textarea-w2 textarea {
        max-width: 400px;
    }

    .text-left p {
        font-size: 15px !important;
    }

    h1.global-heading {
        font-size: 20px !important;
    }

    h2.global-heading {
        font-size: 20px !important;
    }

    .col-md-4.mt-3.text-center h2 {
        font-size: 20px !important;
    }

    img.storbtn.ml-5 {
        margin-left: 20px !important;
    }

    .mt-5.d-flex.pt-5.top-gogle {
        justify-content: center;
    }

    img.image-no {
        width: 60px !important;
        height: 60px !important;
    }

    p.w2p span {
        font-size: 30px !important;
    }

    p.w2p span {
        font-size: 18px !important;
    }

    h3.w2p {
        font-size: 19px !important;
    }

    .fbicon {
        width: 42px;
        font-size: 17px;
        padding: 10px;
    }

    .socialicon {
        width: 42px;
        font-size: 17px;
        padding: 10px;
    }

    button.previewbtn.mobile-logout-btn {
        max-width: 100px !important;
    }

    button.previewbtn.delete-item {
        max-width: 100px !important;
    }

    button.previewbtn.bottom-close {
        max-width: 100px !important;
    }

    button.previewbtn.mt-4.px-3.mobile-login-btn {
        max-width: 100px !important;
    }

    button.previewbtn.continue {
        max-width: 110px !important;
    }

    .mobile-verify-btn {
        max-width: 100px !important;
    }

    input.contact-box {
        width: 92%;
    }

    h1.display-4 {
        font-size: 23px !important;
        text-align: center;
    }

    p.paragraph {
        font-size: 16px !important;
        text-align: center;
        line-height: 1.3;
    }

    .mb-4.canadah4 {
        font-size: 20px;
        line-height: 1.4;
        text-align: center;
    }

    h2.ml-3.canadah2 {
        font-size: 23px;
        text-align: center;
    }

    h2.ml-3.canadah2 {
        font-size: 15px !important;
    }

    .code {
        padding: 0px;
    }

    .canada-btn {
        position: relative;
        top: 20px;
        padding: 10px 20px !important;
        max-width: 210px !important;
    }

    ul.mt-2 {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    h1.canadah1 {
        font-size: 23px;
    }

    p.canadap {
        font-size: 16px;
    }

    h2.mb-5 {
        font-size: 25px;
    }

    .box-usa2 {
        max-width: 300px !important;
        margin: 0 auto;
    }

    .d-flex {
        justify-content: center;
        width: 100%;
    }

    .d-flex.justify-content-between.mb-3 {
        display: inline-block !important;
    }

    .bottom-textarea textarea {
        max-width: 400px;
    }

    .checkbox-outer {
        padding: 13px 0px;
    }

    .left-text {
        max-width: 100%;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .input-box input {
        max-width: 98% !important;
    }

    .input-box.width {
        max-width: 98%;
        margin-right: 0px;
    }

    .text {
        text-align: left;
        padding-bottom: 35px;
    }

    .w2-form-row {
        padding: 0px 12px;
    }

    .input-feild-outer {
        max-width: 360px;
        margin: 0 auto;
    }

    .bottom-box-inner {
        max-width: 100%;
        border-right: none;
    }

    .bottom-box-inner1 {
        max-width: 100%;
        border-right: none;
    }

    .bottom-box-outer:last-child {
        margin-right: 0;
    }

    .bottom-box-inner:nth-child(2) {
        max-width: 100%;
    }

    textarea#w3review {
        max-width: 390px;
    }

    .input-box input {
        max-width: 100%;
    }

    .inputbox2 {
        width: 100%;
        margin-right: 0;
    }

    .inputbox2:before {
        content: none;
    }

    .input-box {
        max-width: 100%;
        margin-right: 0;
    }

    .w2-lefttext {
        padding-left: 10px;
    }

    .input-box input {
        margin: 0;
    }

    .width {
        width: 100% !important;
        margin-right: 0;
        border-right: none;
    }

    .text {
        padding-left: 10px;
    }

    .mt-5.global-heading h2 {
        font-size: 20px;
    }

    .global-p {
        font-size: 16px !important;
    }

    .mt-5.global-heading {
        font-size: 22px !important;
        text-align: left;
        padding-top: 20px;
    }

    .see-sample2 {
        top: 78px;
        right: 76px;
        padding: 1px 0px;
        font-size: 7px;
        border: 1px solid red;
        border-radius: 2px;
    }

    button.btnCommon.addEarningField {
        width: 92%;
        padding: 4px 20px;
        margin: 0 7px;
        font-size: 14px;
        text-align: center;
        border-radius: 0;

    }

    button.btnCommon.addTaxField {
        width: 100%;
        padding: 4px 20px;
        margin: 0 7px;
        font-size: 14px;
        text-align: center;
        position: relative;
        border-radius: 0;
        left: 7px;
    }

    button.btnCommon.addEarningField.uk-add-btn {
        width: 100%;
        margin: 0;
    }

    .mt-5.global-heading {
        font-size: 22px !important;
        text-align: left;
    }

    p.mt-4.bottom-p {
        font-size: 15px !important;
    }

    .mt-5.thousand h2 {
        font-size: 18px !important;
    }

    .mt-2.mb-4.stubheading {
        font-size: 20px;
    }

    a.btn.btn-lg.mt-2.mb-4.p-2.btn-danger.Generate.global-btn {
        margin-bottom: 20px !important;
    }

    ol.global-list-outer {
        padding: 0px 16px;
        font-size: 13px !important;
    }

    img.w-100.global-mobile-img {
        margin-top: 0;
    }

    .col-lg-6.pt-2.container.justify-content-center.pl-5.global-content {
        padding: 10px !important;
    }

    h1.global-heading {
        font-size: 25px;
    }

    h2.global-heading {
        font-size: 25px;
    }

    .mt-2.global-heading {
        font-size: 20px !important;
    }

    .col-lg-9.col-md-12.pl-5.global-padding {
        padding: 0px !important;
    }

    ul.global-list li {
        font-size: 14px;
    }

    .see-sample1 {
        top: 66px;
        left: 190px;
        padding: 2px 1px;
        font-size: 7px;
        border: 1px solid red;
        border-radius: 2px;
    }

    .see-sample {
        top: 75px;
        left: 73px;
        padding: 2px 2px;
        font-size: 6px;
        border: 1px solid red;
        border-radius: 2px;
    }

    input.input-pie-box.input {
        max-width: 86%;
    }

    .basicpay {
        display: flex;
        width: 100%;
    }

    .thousand {
        font-size: large !important;
        padding-left: 15px;
    }

    .globleImg {
        position: relative;
        top: 10px;
        left: 0px;
        height: auto;
    }

    .uk-goo {
        padding: 0 !important;
    }

    .text-white {
        margin-bottom: 10px;
        margin-top: 4px;
        line-height: 1.5 !important;
        font-size: 20px !important;
    }

    .box-border-outer {
        width: 100%;
    }

    .createbtn2 {
        padding: 0px 57px;
    }

    .globe-ul {
        font-size: 16px !important;
        text-align: left !important;
        padding: 23px;
        margin: 0;
    }

    input.input-uk.text-center.taxes {
        width: 100%;
    }

    .mmenu {
        width: 100%;
    }

    .sh {
        display: none;
    }

    .base {
        margin-left: -16px;
    }

    .dropdown1 {
        font-size: 9px !important;
    }

    .payimg {
        position: relative;
        width: 67%;
        top: 19px;
        left: 50px;
    }

    .down {
        position: absolute;
        right: 58px;
        top: 48px;
        font-size: 15px;
        font-weight: bold;
        z-index: 1223;
    }

    .down1 {
        position: absolute;
        right: 69px;
        top: 66px;
        font-size: 16px;
        font-weight: bold;
        z-index: 1223;
    }

    .viewbtn {
        font-size: 8px;
        background: yellow;
        padding: 4px 0px;
        border-radius: 4px;
        font-weight: 700;
    }

    .previewbtn {
        font-size: 21px;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
        padding: 4.5px 1px;
    }

    .emailbtn {
        color: #ffffff;
        background: #12c23a;
        padding: 6px 1px;
        border: none;
        border-radius: 4px;
        box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
        font-size: 18px;
        max-width: 100% !important;
    }

    .OnPaystub {
        font-size: 13px;
        color: #0e0e0e;
        position: absolute;
        bottom: -252px;
        left: 52px;
        font-weight: 200;
    }

    .paytext {
        left: 161px;
        font-size: 15px;
        top: -17px;
    }

    .img2-p {
        font-size: 17px;
        font-weight: 200;
        margin-top: 0px;
        margin-left: 0;
        padding-bottom: 100px;
    }

    .CreatePaystub {
        font-family: serif;
        width: 210px;
        height: 47px;
        border-radius: 63px;
        background-color: #ff4040;
        font-weight: 700;
        margin: auto;
        font-size: 20px;
    }

    .textarea {
        max-width: 300px;
    }

    .storehead {
        padding: 0px 0px 0px 0px;
    }

    .payhead {
        margin-top: -52px;
    }

    .formimg1 {
        width: 421px;
    }

    .Generate {
        padding: 11px 60px;
        margin-bottom: 10px;
        width: 100%;

        max-width: 400px;
        display: flex;
        justify-content: center;

    }

    .paytext {
        margin-left: 0;
    }

    .flex {
        display: inline-block !important;
    }

    .small-font {
        font-size: 14px;
    }

    .payimg2 {
        width: 100% !important;
        margin: 10px auto 0px 0px;
        height: auto;
    }

    .tickbox {
        width: 20px;
        height: 39px;
        position: absolute;
        top: -8px;
        left: 77px;
    }

    .col-md-6.border-right-line {
        border-right: none !important;
    }

    .earnbtn {
        border-radius: 0px !important;
        font-size: 13px !important;
    }

    .statementbtn {
        padding: 6px !important;
        font-size: 13.4px !important;
    }

    i.fa.fa-plus-circle.pr-2 {
        font-size: 18px !important;
    }

    button.netpaybtn.net_pay {
        padding: 2.5px;
        height: 42px;
    }

    .canada-padding {
        padding: 0px;
    }

    .head-font {
        text-align: center;
    }

    .can-p {
        font-size: 14px !important;
        padding-top: 20px;
    }

    .can-p1 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .text-white.text-padding.globe-p {
        font-size: 25px !important;
        padding-left: 0;
    }

    .gen {
        font-size: 24px !important;
        font-family: "Futura LT";
        text-align: center;
    }

    ol.w2-form-list {
        padding: 0px 16px;
    }

    .ready {
        font-size: 24px !important;
    }

    .goggle {
        justify-content: center;
    }

    .paytext {
        margin-left: 30px;
    }

    .box-h5 {
        padding-left: 14px;
        width: 100%;
    }

    .address_book {
        width: 86.3% !important;
        top: 0px !important;
        font-size: 12px !important;
        border-radius: 0;
        text-align: left !important;
        padding-left: 5px;

    }

    .address_book_1 {
        width: 87% !important;
        top: 0px !important;
        font-size: 12px !important;
        text-align: left !important;
        padding-left: 5px;
    }

    .ukbtn1 {
        display: flex;
        justify-content: center;
        border: none;
        box-shadow: none;
    }

    .createbtn2 {
        padding: 0px 30px;
    }

    .add {
        font-size: 12px !important;
    }

    .base {
        font-size: 12px;
    }

    .uk-eye {
        font-size: 25px !important;
    }

    .uk-lable {
        font-size: 18px;
    }

    .ukpay-inner {
        padding: 5px;
    }

    .input-uk {
        padding: 6px;
        border-radius: 0px !important;
        height: 33px !important;
        font-size: 13px;
    }

    .img-uk-outer {
        max-width: 325px;
    }
}

@media (max-width: 375px) {
    .uk-lable {
        font-size: 18px;
    }

    p.mainhead {
        font-size: 20px;
    }

    .w-sm-100 {
        width: 100%;
    }

    .input-feild-outer {
        max-width: 310px;
    }

    .input-box input {
        max-width: 96% !important;
    }

    img.earnbtn2.lockuk {
        top: 9px !important;
        left: 0px !important;
    }

    .gen {
        font-size: 18px !important;
    }

    .text-white.ml-2.w2-form-heading {
        font-size: 17px !important;
    }

    .box-content h6 {
        font-size: 17px;
    }

    b.bottom-c {
        font-size: 17px !important;
    }

    .bottom-content p {
        font-size: 15px;
    }

    h2.text-center.text-light.pb-3 {
        font-size: 20px;
    }

    p.w2p span {
        font-size: 12px !important;
    }

    p.QUICK {
        font-size: 13px;
    }

    p.w2p {
        font-size: 12px !important;
    }

    h3.w2p {
        font-size: 12px !important;
        padding-bottom: 10px;
    }

    textarea#w3review {
        max-width: 350px;
    }

    .bottom-textarea textarea {
        max-width: 350px;
    }

    .textarea-w2 textarea {
        max-width: 350px;
    }

    .see-sample2 {
        top: 70px;
        right: 65px;
        padding: 1px 1px;
        font-size: 5px;
        border: 1px solid red;
        border-radius: 2px;
    }

    .see-sample1 {
        top: 59px;
        left: 162px;
        padding: 1px 1px;
        font-size: 5px;
        border: 1px solid red;
        border-radius: 2px;
    }

    .col-md-5.mt-5.text-center.template-text {
        margin-top: 10px !important;
    }

    .see-sample {
        top: 67px;
        left: 64px;
        padding: 1px 1px;
        font-size: 5px;
        border: 1px solid red;
        border-radius: 2px;
    }

    .small {
        font-size: 12px !important;
    }

    .earnbtn1 {
        font-size: 16px !important;
    }

    .small {
        font-size: 11px;
    }

    .text-white {
        margin-bottom: 10px;
        margin-top: 4px;
    }

    .OnPaystub {
        font-size: 13px;
        color: #0e0e0e;
        position: absolute;
        bottom: -253px;
        left: 4px;
        font-weight: 200;
    }

    .fbicon {
        width: 35px;
        font-size: 14px;
        padding: 8px;
    }

    .socialicon {
        width: 35px;
        font-size: 14px;
        padding: 8px;
    }

    .add {
        font-size: 11px !important;
    }

    .down {
        position: absolute;
        right: 39px;
        top: 63px;
        font-size: 15px;
        font-weight: bold;
        z-index: 1223;
    }

    .can-p {
        font-size: 17px !important;
    }

    .can-p1 {
        font-size: 16px !important;
    }

    .down1 {
        position: absolute;
        right: 53px;
        top: 63px;
        font-size: 16px;
        font-weight: bold;
        z-index: 1223;
    }

    .eyes {
        font-size: 20px !important;
    }

    .statementbtn {
        font-size: 14px;
        width: 100%;
        padding: 5px 10px;
        background: #074151;
        color: white;
        border: none;
        border-radius: 2px;
        margin-top: 6px;
    }

    .earnbtn {
        margin-top: 8px;
    }

    .emailbtn {
        color: #ffffff;
        background: #12c23a;
        padding: 6px 10px;
        border: none;
        border-radius: 4px;
        box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6));
    }

    .canadah4 {
        font-weight: 300;
        font-size: 17px;
        letter-spacing: 1.5px;
        padding-left: 26px;
    }

    .canadah2 {
        font-size: 24px;
        font-family: avenir-lt-w01_35-light1475496, sans-serif;
        padding-left: 6px;
    }

    .canadah1 {
        font-size: 26px;
        font-weight: 600;
    }

    .canadap {
        font-size: 15px;
        font-weight: none;
    }

    .statementbtn {
        margin-top: 7px;
    }

    h1.display-4 {
        font-size: 16px !important;
    }

    h2.mb-5 {
        font-size: 15px;
    }

    .mb-4.canadah4 {
        font-size: 17px;
    }

    .mb-4.canadah4 {
        font-size: 17px;
    }

    .mb-4.canadah4 {
        font-size: 17px;
    }

    h1.canadah1 {
        font-size: 15px;
    }

    .earnbtn2 {
        font-size: 24px;
        margin: 12px;
        position: absolute;
        padding-left: 2px;
        color: blue;
        top: 3px !important;
        left: 12px;
    }

    .formimg1 {
        width: 362px;
        margin-left: 16px;
    }

    .payimg2 {
        position: relative;
        width: 100% !important;
        left: 0px;
        height: auto;
    }

    .img2-p {
        font-size: 14px;
        font-weight: 200;
        margin-top: 20px;
        line-height: 1.6;
        padding-bottom: 35px;
    }

    a.btn.btn-lg.mt-2.p-2.btn-danger.Generate {
        max-width: 230px !important;
        font-size: 15px !important;
    }

    a.btn.btn-lg.mt-5.p-2.btn-danger.Generate {
        max-width: 230px !important;
        font-size: 15px !important;
    }

    a.btn.btn-lg.btn-danger.Generate {
        max-width: 230px !important;
        font-size: 15px !important;
    }

    .paytext {
        left: 163px;
        top: 33px;
    }

    .youtubeimg {
        width: 361px;
        height: 204px;
    }

    .earnbtn1 {
        width: 100%;
    }

    .earnbtn {
        padding: 6px 22px 5px 27px;
    }

    .createbtn2 {
        padding: 0px 30px;
    }

    .textarea {
        max-width: 275px;
    }

    .box-usa {
        border: 3px solid #ff6161;
        background: #e8e6e6;
        border-radius: 2px;
    }

    .thousand {
        font-size: large !important;
        padding-left: 15px;
    }

    .ready {
        font-size: 26px !important;
    }

    .storbtn {
        width: 120px !important;
        height: 44px !important;
        margin-bottom: 0;
    }

    .col-md-6.text-left.mb-5 {
        padding: 0;
    }

    .mt-5 {
        margin-top: 0 !important;
    }

    li.mt-2 {
        font-size: 12px !important;
    }

    .WithPaystubX {
        font-size: 17px !important;
    }

    .Createpay {
        font-size: 17px !important;
    }

    .Show {
        font-size: 17px !important;
    }

    .smallfont {
        font-size: 17px !important;
    }

    .mt-5.ready {
        font-size: 16px !important;
        padding-top: 20px;
    }

    .text-left p {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .goggle {
        justify-content: center;
    }

    .paytext {
        margin-left: 18px;
    }

    .uk-eye {
        font-size: 34px;
    }

    .payp {
        font-size: 12px !important;
        color: white;
        background: #537b9d;
        border: none;
        padding: 6px 4px;
        border-radius: 4px;
        font-weight: 200;
        font-family: "Futura LT";
        margin-top: 4px !important;
    }

    .earnbtn3 {
        font-size: 20px !important;
        height: 17px;
        width: 17px;
        margin-top: 14px;
        padding-right: 1px;
    }

    .ukpay-inner {
        padding: 4px;
    }

    .oo {
        display: flex;
    }

    .direction-left {

        padding: 0px 43px !important;

    }

    .direction-left-canada-edit {
        padding: 0px 40px !important;
    }

    .direction-left-canada {

        padding: 0px 48px !important;

    }

    .address_book {
        width: 85.5% !important;
    }

    .address_book_1 {
        width: 85.5% !important;
    }



}

.btnCommon {
    padding: 3px 15px;
    font-size: 18px;
    align-items: center;
    box-sizing: border-box;
    justify-content: var(--label-align);
    width: -moz-max-content;
    width: max-content;
    background: #e9e6e6;
    color: #141212;
    border-radius: 4px;
    border: 2px solid #ff6261;
    font-weight: 600;
}

@media (max-width: 320px) {
    .textarea-w2 textarea {
        max-width: 295px;
    }

    label.lable.em-name {
        font-weight: 500;
    }

    .textarea-w2 textarea {
        max-width: 295px;
    }

    p.mt-1.b-p {
        font-size: 13px !important;
    }

    .text-center.w2-para {
        font-size: 20px !important;
    }

    button.netpaybtn.net_pay {
        font-size: 21px;
    }

    .text-left h1 {
        font-size: 30px;
        font-weight: 500;
    }

    .text-white.ml-2.w2-form-heading {
        font-size: 15px !important;
    }

    p.color-red {
        font-size: 12px !important;
    }

    .input-feild-outer {
        max-width: 255px;
    }

    input.input-uk.text-center {
        font-size: 13px !important;
    }

    .input-feild-outer input {
        max-width: 230px;
    }

    textarea#w3review {
        max-width: 290px;
    }

    input.input-pie-box.input {
        max-width: 83%;
    }

    .padding {
        padding: 0px !important;
    }

    .fbicon {
        border: 2px solid white;
        border-radius: 60%;
        padding: 11px;
        font-size: 15px;
        width: 50px;
        color: white;
        width: 38px;
    }

    b.bottom-c {
        font-size: 15px !important;
    }

    .socialicon {
        border: 2px solid white;
        border-radius: 60%;
        padding: 11px;
        font-size: 15px;
        width: 50px;
        color: white;
        width: 38px;
    }

    .fbicon {
        width: 33px;
        font-size: 13px;
        padding: 8px;
    }

    .socialicon {
        width: 33px;
        font-size: 13px;
        padding: 8px;
    }

    .container.footer-icons {
        padding: 0;
    }

    .text-left.mt-4 p {
        font-size: 13px !important;
    }

    .direction-left {

        padding: 0px 25px !important;

    }

    .direction-left-canada {

        padding: 0px 29px !important;


    }

    .direction-left-canada-edit {
        padding: 0px 12px !important;
    }

    .address_book {
        width: 82% !important;
    }

    .address_book_1 {
        width: 82% !important;
    }

    input.contact-box {
        width: 89%;
    }

    /* .select-dropdown{
        padding: 6px 70px !important;
    } */

}