.wrapper-auth {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-top: -1px;
    height: 100dvh;
    border-radius: 0 0 10px 10px;
    /* overflow: hidden; */
    /* width: 375px; */
    position: relative;
    padding: 0 10px;
}

.wrapper-auth h1.auth-title {
    padding: 0;
    text-align: center;
    color: rgb(22, 24, 35);
    font-size: 32px;
    margin: 7px auto;
    overflow-wrap: break-word;
    font-weight: 700;
    height: 40px;
    /* border-radius: 0 0 10px 10px; */
    /* overflow: hidden; */
}

.wrapper-auth .auth-form {
    flex: 1;
    padding: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    /* padding: unset; */
    max-width: 375px;
    /* background: #000; */
    /* justify-content: center; */
}

.wrapper-auth .auth-footer {
    color: rgb(22, 24, 35);
    height: 64px;
    border-top: 1px solid rgba(22, 24, 35, 0.12);
    margin: unset;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: 15px;
    line-height: 18px;
    /* border-radius: 0 0 50px 50px; */
    /* background: #f00; */
}

.wrapper-auth .form-group {
    position: relative;
    margin-bottom: 9px;
    width: 100%;
    background: #fff;
    padding: 0;
}

.wrapper-auth .form-group input {
    border-radius: 2px;
    background-color: rgba(22, 24, 35, 0.06);
    border: 1px solid rgba(22, 24, 35, 0.12);
    padding-inline-start: 12px;
    color: rgb(22, 24, 35);
    line-height: 100%;
    outline: none;
    font-size: 16px;
    height: 44px;
    caret-color: rgb(254, 44, 85);
    width: calc(100% - 2px);
    padding-inline-end: unset;
    /* width: 100%; */
    /* padding: 0; */
    box-shadow: none;
}

.wrapper-auth .form-group i.fa-warning {
    display: none;
}

.wrapper-auth .form-group.field-error i.fa-warning {
    display: block;
    position: absolute;
    top: 16px;
    right: 12px;
    font-size: 14px !important;
    color: rgb(255, 76, 58);
    /* display: none; */
}

.wrapper-auth .form-group.field-error i.fa-warning.fa-warning-pass {

    right: 38px;
}

.wrapper-auth .form-group.field-error input {
    color: rgb(255, 76, 58);
    border: 1px solid rgb(255, 76, 58);
}

.wrapper-auth .div-description {
    color: rgb(22, 24, 35);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 5px;
    width: 100%;
}

.auth-btn {
    border-radius: 4px;
    border: none;
    color: rgb(255, 255, 255);
    background-color: rgb(254, 44, 85);
    min-width: 120px;
    min-height: 46px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    font-family: TikTokFont, PingFangSC, sans-serif;
    display: flex;
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 6px 8px;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
}

.btn:disabled {
    border: none;
    color: rgba(22, 24, 35, 0.34);
    background-color: rgba(22, 24, 35, 0.06);
    pointer-events: none;
}
.auth-btn:hover {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(254, 44, 85) !important;
}
.fa-spin {
    font-size: 20px !important;
    font-weight: bold !important;
}

.show-pass {

    position: absolute;

    top: 14px;

    right: 10px;

    font-size: 20px !important;

    cursor: pointer;
}

.auth-footer span {
    margin-left: 5px;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: rgb(254, 44, 85);
}

.auth-footer span:hover {
    text-decoration: underline rgb(254, 44, 85);
    cursor:pointer
}

.forgot{
    color: rgba(22, 24, 35, 0.75);
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
    width: 100%;
}

.forgot span:hover {
    text-decoration: underline rgba(22, 24, 35, 0.75);
    color: rgba(22, 24, 35, 1);
    cursor:pointer
}

.agreement {
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 48px 0px 0px;
    margin-bottom: 20px;
    /* max-width: 375px; */
    /* margin: auto; */
}

.agreement p{
    text-align: center;
    max-width: 375px;
    margin: auto;
    color: rgba(22, 24, 35, 0.5);
    font-size: 12px;
    line-height: 15px;
    width: 375px;
}

.a-link {
    color: rgb(22, 24, 35);
    margin: 0 5px;
}

.agreement p a:hover{
    text-decoration: underline rgba(22, 24, 35, 0.75);
}
.div-text-container {
    font-size: 12px;
    line-height: 15px;
    margin: 4px 0;
    display: flex;
}
.div-text-container span{}
.div-text-container svg{
    margin-right: 8px;
    fill: #000000;
}

.div-text-container.pass {
    color: rgb(11, 224, 155);
}

.div-text-container.pass span{}
.div-text-container.pass svg{
    fill: rgba(11, 224, 155, 1.0)
}

.field-error .div-text-container.error {}
.field-error .div-text-container.error span{
    color: rgb(255, 76, 58);
}
.field-error .div-text-container.error svg{
    fill:rgb(255, 76, 58);
}

.wrapper-auth .back-button {
    position: absolute;
    top: -37px;
}
.login-facebook-button {
    border-radius: 4px;
    background: rgb(24, 119, 242);
    min-width: 120px;
    min-height: 46px;
    line-height: 22px;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
    margin-top: 10px;
    flex-grow: 1;
    font-weight: 500;
    text-overflow: ellipsis;
    border: 1px solid #dadce0;
    color: #fff;
    font-family: "Google Sans", arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 12px;

}
.login-facebook-button i{
    display: block;
    font-size: 20px;
    float: left;
}

.btnLoginApple {
    width: 100%;
    color: #000;
    background: #fff;
    position: relative;
    padding: 10px;
    border-radius: 3px;
    flex-grow: 1;
    font-family: "Google Sans", arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    border: 1px solid #ccc;
}
.btnLoginApple svg{
    position: absolute;
    fill: currentColor;
    left: 5px;
    top: 3px;
}
@media screen and (max-width: 480px) {
    .wrapper-auth {
        height: auto;
        margin: auto;
        width: 100%;
    }
}