:root {
    --dtb-navy: #082f68;
    --dtb-blue: #176ad6;
    --dtb-orange: #ff8b00;
}

.navbar,
.web-footer,
footer.web-footer {
    display: none !important;
}

body[data-path="login"],
body.login-page {
    background:
        radial-gradient(circle at 15% 10%, rgba(23, 106, 214, .09), transparent 32%),
        linear-gradient(145deg, #f9fbff, #edf4fb) !important;
}

body[data-path="login"] .page-card,
.login-page .page-card {
    border: 1px solid #e1e8f2 !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(8, 47, 104, .13) !important;
}

body[data-path="login"] .app-logo,
.login-page .app-logo {
    width: 220px !important;
    max-height: 190px !important;
    object-fit: contain !important;
}

body[data-path="login"] .btn-primary,
.login-page .btn-primary {
    border-color: var(--dtb-blue) !important;
    background: var(--dtb-blue) !important;
}

body[data-path="login"] .page-card-head h4,
.login-page .page-card-head h4 {
    color: var(--dtb-navy) !important;
}


body[data-path="login"] .app-logo,
.login-page .app-logo {
    width: 250px !important;
    max-height: 215px !important;
}

body[data-path="login"] .page-card-head h4,
.login-page .page-card-head h4 {
    font-size: 1.15rem !important;
}

@media (max-width: 600px) {
    body[data-path="login"] .app-logo,
    .login-page .app-logo {
        width: 230px !important;
        max-height: 205px !important;
    }

    body[data-path="login"] .page-card,
    .login-page .page-card {
        margin: 18px 12px !important;
    }
}


/* MM REAL LOGIN LOGO CENTER */

html body .page-card-head {
    box-sizing: border-box !important;

    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


html body img.app-logo[
    src*="dt_beach_control_tower/images/the-beach-logo-login.png"
] {
    display: block !important;

    position: static !important;
    float: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    left: auto !important;
    right: auto !important;

    transform: translateX(1px) !important;

    object-fit: contain !important;
    object-position: center center !important;
}

/* END MM REAL LOGIN LOGO CENTER */



/* MM LOGIN EXACT DOM CENTER */

/*
Exact rendered DOM:

#page-login
  .login-content.page-card
    .page-card-head
      img.app-logo
*/

html body[data-path="login"]
#page-login
.login-content.page-card
> .page-card-head {

    box-sizing: border-box !important;

    width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr !important;

    place-items: center !important;

    justify-items: center !important;

    align-items: center !important;

    text-align: center !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


html body[data-path="login"]
#page-login
.login-content.page-card
> .page-card-head
> img.app-logo {

    display: block !important;

    position: static !important;

    float: none !important;

    width: 230px !important;
    max-width: 230px !important;

    height: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    justify-self: center !important;

    object-fit: contain !important;
    object-position: center center !important;
}



/* MM LOGIN VISUAL ALIGNMENT FINAL */

html body[data-path="login"]
#page-login
.login-content.page-card
> .page-card-head
> img.app-logo {

    transform: translateX(44px) !important;
}

/* END MM LOGIN VISUAL ALIGNMENT FINAL */



/* MM MOBILE LOGIN CARD CENTER FINAL */

@media (max-width: 600px) {

    html body[data-path="login"] #page-login main.container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    html body[data-path="login"]
    #page-login
    .login-content.page-card {

        width: calc(100vw - 32px) !important;
        max-width: 520px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        position: relative !important;
        left: 0 !important;
        right: 0 !important;

        transform: none !important;
        box-sizing: border-box !important;
    }
}