@font-face {
    font-family: "NotoSansJP-Bold";
    src: url("../../../font/NotoSansJP-Bold.ttf");
}

@font-face {
    font-family: "NotoSansJP-Medium";
    src: url("../../../font/NotoSansJP-Medium.ttf");
}

.noto-sans-jp-medium {
    font-family: "NotoSansJP-Medium" !important;
    font-optical-sizing: auto !important;
    font-weight: 100 !important;
    font-style: normal !important;
}

.noto-sans-jp-bold {
    font-family: "NotoSansJP-Bold" !important;
    font-optical-sizing: auto !important;
    font-weight: 100 !important;
    font-style: normal !important;
}

.auth-fluid .auth-fluid-form-box {
    padding: 3rem 1rem;
}

.text-coffee{
    color: #522318 !important;
}

.text-mcom{
    color: #333333;
}

.text-red-500{
    color: rgb(239 68 68) !important;
}

.bg-coffee-600{
    background-color: #ded1b4 !important;
}

.bg-24karat-600{
    background-color: #b6b0f5 !important;
}

.bg-mcom{
    background-color: white;
}

.bg-coffee-500{
    background-color: #e2d4b5 !important;
}

.bg-coffee-300{
    background-color: #efebe7 !important;
}

.fsize-xxxl{
    font-size: xxx-large;
}

.btn-coffee{
    background-color: #522318 !important;
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
    width: 100%;
}

.btn-mcom{
    background-color: #4D8AEE !important;
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
    width: 100%;
    border-color: #00A596 !important;
}

.btn-coffee-2{
    background-color: #522318 !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
}

.font-weight-700{
    font-weight: 700;
}

.font-size-12{
    font-size: 0.75rem;
}

.display-title-header-mobile-login {
    display: none !important;
}

@media (max-width: 992px) {
    .display-title-header-mobile-login {
        display: flex !important;
    }
}

@media (max-width: 991px) {
    #img-login-area {
        width: unset !important;
    }

    #img-login {
        width: 50% !important;
    }
}
