/* =========================================================
   CITY LIVE MCR LOGIN
   PROFESSIONAL RESPONSIVE PACKAGE
   Desktop + Mobile Portrait + Mobile Landscape
   Background: citylive-mcr-background.png
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}


/* =========================================================
   MAIN LOGIN SCREEN
   ========================================================= */

.cl-mcr-login {

    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding:
        42px
        8.5vw
        42px
        48vw;

    color: #10264a;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:
        #061738
        url("../images/citylive-mcr-background.png")
        center center / cover
        no-repeat;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND OVERLAY
   ========================================================= */

.cl-mcr-login::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 15, 45, .03) 0%,
            rgba(0, 12, 42, .08) 42%,
            rgba(0, 8, 30, .18) 100%
        );
}


/* Everything above overlay */

.cl-mcr-login > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.cl-mcr-topline {

    position: absolute !important;

    top: 34px;
    right: 9vw;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;

    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, .40);
}

.cl-mcr-topline b {

    margin:
        0 12px;

    opacity: .85;
}


/* =========================================================
   LEFT BRANDING
   ========================================================= */

.cl-mcr-brand {

    position: absolute !important;

    left: 5.5vw;
    top: 31%;

    color: #ffffff;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, .55);
}

.cl-mcr-logo {

    font-size: 62px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -4px;
}

.cl-mcr-logo .red {
    color: #e51d27;
}

.cl-mcr-logo .blue {
    color: #124ca3;
}

.cl-mcr-brand .cl-mcr-logo {

    filter:
        drop-shadow(
            0 2px 4px
            rgba(0, 0, 0, .85)
        );
}

.cl-mcr-tagline {

    margin:
        10px
        0
        28px;

    font-size: 20px;

    font-weight: 600;
}

.cl-mcr-sectors {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 5px;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.cl-mcr-card {

    position: relative !important;

    z-index: 5;

    width: min(620px, 100%);

    max-width: 620px;

    box-sizing: border-box;

    flex: 0 1 620px;

    padding:
        46px
        60px
        38px;

    background:
        rgba(255, 255, 255, .98);

    border:
        1px solid
        rgba(255, 255, 255, .70);

    border-radius: 26px;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .34),

        0 0 0 1px
        rgba(255, 255, 255, .35);

    transform-origin:
        center center;
}


/* =========================================================
   CARD TOP BRAND LINE
   ========================================================= */

.cl-mcr-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 35px;
    right: 35px;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ed1c24,
            #124ca3
        );

    border-radius:
        0
        0
        8px
        8px;
}


/* =========================================================
   CARD LOGO
   ========================================================= */

.card-logo {

    text-align: center;

    font-size: 52px;

    letter-spacing: -3px;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.cl-mcr-title {

    margin:
        10px
        0
        18px;

    text-align: center;

    color: #526886;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 500;
}


/* =========================================================
   MCR BADGE
   ========================================================= */

.cl-mcr-badge {

    width: max-content;

    max-width: 100%;

    margin:
        0
        auto
        34px;

    padding:
        11px
        25px;

    box-sizing: border-box;

    border-radius: 24px;

    background:
        #1047a0;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-align: center;
}


/* =========================================================
   ERROR
   ========================================================= */

.cl-mcr-error {

    width: 100%;

    box-sizing: border-box;

    margin:
        -8px
        0
        20px;

    padding:
        11px
        13px;

    border:
        1px solid
        #ffd0d3;

    border-radius: 10px;

    background:
        #fff0f1;

    color:
        #b3151d;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   FORM FIELD
   ========================================================= */

.cl-mcr-field {

    margin-bottom: 20px;
}

.cl-mcr-field label {

    display: block;

    margin:
        0
        0
        8px;

    color:
        #16355f;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;
}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.cl-mcr-input-wrap {

    position: relative;

    width: 100%;
}


/* =========================================================
   INPUT ICON
   ========================================================= */

.cl-mcr-icon {

    position: absolute;

    left: 15px;
    top: 50%;

    z-index: 2;

    transform:
        translateY(-50%);

    font-size: 17px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   INPUT
   ========================================================= */

.cl-mcr-input-wrap input {

    display: block;

    width: 100%;

    height: 50px;

    box-sizing: border-box;

    padding:
        13px
        16px
        13px
        47px;

    border:
        1px solid
        #c8d6eb;

    border-radius: 11px;

    outline: none;

    background:
        #eef5ff;

    color:
        #12233f;

    font-family: inherit;

    font-size: 16px;

    line-height: 1.2;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.cl-mcr-input-wrap input::placeholder {

    color:
        #7c91ad;

    opacity: 1;
}

.cl-mcr-input-wrap input:focus {

    border-color:
        #1656c1;

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(22, 86, 193, .13);
}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.cl-mcr-forgot {

    margin:
        -7px
        0
        25px;

    text-align: right;
}

.cl-mcr-forgot a {

    color:
        #0756c9;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;
}

.cl-mcr-forgot a:hover {
    text-decoration: underline;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.cl-mcr-submit {

    width: 100%;

    min-height: 56px;

    box-sizing: border-box;

    padding:
        14px
        20px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            90deg,
            #ed1c24,
            #d90912
        );

    color:
        #ffffff;

    font-family: inherit;

    font-size: 19px;

    line-height: 1.2;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(224, 20, 30, .23);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.cl-mcr-submit:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 26px
        rgba(224, 20, 30, .30);
}

.cl-mcr-submit:active {

    transform:
        translateY(0);
}

.cl-mcr-submit span {

    margin-right: 9px;

    font-size: 27px;

    line-height: 0;

    vertical-align: -2px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.cl-mcr-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin:
        30px
        0
        23px;

    color:
        #526886;

    font-size: 14px;

    line-height: 1.2;

    white-space: nowrap;
}

.cl-mcr-divider span {

    height: 1px;

    flex: 1;

    background:
        #d7dfeb;
}

.cl-mcr-divider em {

    font-style: normal;
}


/* =========================================================
   FEATURES
   ========================================================= */

.cl-mcr-features {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    width: 100%;
}

.cl-mcr-features > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 7px;

    min-width: 0;

    text-align: center;

    border-right:
        1px solid
        #dce3ed;

    color:
        #1e3d69;

    font-size: 13px;

    line-height: 1.25;
}

.cl-mcr-features > div:last-child {
    border-right: 0;
}

.cl-mcr-features strong {

    font-size: 25px;

    line-height: 1;

    color:
        #e31b23;
}

.cl-mcr-features > div:nth-child(2) strong,
.cl-mcr-features > div:nth-child(4) strong {

    color:
        #1254bb;
}


/* =========================================================
   BOTTOM BRAND
   ========================================================= */

.cl-mcr-bottom {

    position: absolute !important;

    left: 5.5vw;

    bottom: 42px;

    color: #ffffff;

    font-family: cursive;

    font-size: 28px;

    font-style: italic;

    line-height: 1;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, .40);
}

.cl-mcr-bottom span {

    display: block;

    margin-top: 5px;

    font-size: 11px;

    letter-spacing: 5px;

    text-align: center;

    font-style: normal;
}


/* =========================================================
   FULLSCREEN BUTTON
   ========================================================= */

.cl-mcr-fullscreen {

    position: fixed !important;

    right: 20px;

    bottom: 20px;

    z-index: 9999 !important;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .38);

    border-radius: 50%;

    background:
        rgba(3, 24, 62, .72);

    color:
        #ffffff;

    font-family: Arial, sans-serif;

    font-size: 21px;

    line-height: 1;

    cursor: pointer;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, .30);

    transition:
        transform .2s ease,
        background .2s ease;
}

.cl-mcr-fullscreen:hover {

    transform:
        scale(1.08);

    background:
        rgba(18, 76, 163, .95);
}

.cl-mcr-fullscreen:active {

    transform:
        scale(.94);
}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media screen
and (min-width: 821px)
and (max-width: 1200px) {

    .cl-mcr-login {

        padding-left:
            43vw;

        padding-right:
            5vw;
    }

    .cl-mcr-card {

        padding:
            38px
            42px
            32px;
    }

    .cl-mcr-brand {

        left: 4vw;

        transform:
            scale(.82);

        transform-origin:
            left center;
    }

    .cl-mcr-logo {
        font-size: 55px;
    }
}


/* =========================================================
   LANDSCAPE MODE
   IMPORTANT:
   JS automatically scales card according to viewport height.
   ========================================================= */

@media screen and (orientation: landscape) {

    html,
    body {

        width: 100%;

        overflow-x: hidden;

        overflow-y: hidden;
    }

    .cl-mcr-login {

        width: 100vw;

        height: 100vh;

        height: 100dvh;

        min-height: 100vh;

        min-height: 100dvh;

        max-height: 100vh;

        max-height: 100dvh;

        box-sizing: border-box;

        overflow: hidden;

        padding-top: 12px;

        padding-bottom: 12px;
    }

    .cl-mcr-card {

        flex-shrink: 0;

        /*
         * JavaScript changes only scale().
         */
        transform-origin:
            center center;
    }
}


/* =========================================================
   SMALL MOBILE LANDSCAPE
   Typical phone:
   360–480px height
   ========================================================= */

@media screen
and (orientation: landscape)
and (max-height: 450px) {

    .cl-mcr-login {

        padding-left:
            42vw;

        padding-right:
            3vw;
    }

    .cl-mcr-brand {

        left: 3vw;

        top: 29%;

        transform:
            scale(.55);

        transform-origin:
            left center;
    }

    .cl-mcr-topline {

        top: 9px;

        right: 3vw;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .cl-mcr-bottom {
        display: none;
    }

    .cl-mcr-fullscreen {

        width: 36px;

        height: 36px;

        right: 10px;

        bottom: 10px;

        font-size: 17px;
    }
}


/* =========================================================
   TABLET LANDSCAPE
   ========================================================= */

@media screen
and (orientation: landscape)
and (min-height: 451px)
and (max-height: 700px) {

    .cl-mcr-login {

        padding-left:
            44vw;

        padding-right:
            4vw;
    }

    .cl-mcr-brand {

        left: 4vw;

        top: 30%;

        transform:
            scale(.70);

        transform-origin:
            left center;
    }

    .cl-mcr-topline {

        top: 13px;

        right: 4vw;

        font-size: 9px;

        letter-spacing: 3px;
    }

    .cl-mcr-bottom {

        bottom: 12px;

        transform:
            scale(.75);

        transform-origin:
            left bottom;
    }
}


/* =========================================================
   MOBILE PORTRAIT
   ========================================================= */

@media screen
and (max-width: 820px)
and (orientation: portrait) {

    html,
    body {

        width: 100%;

        overflow-x: hidden;
    }

    .cl-mcr-login {

        width: 100%;

        min-height: 100vh;

        min-height: 100dvh;

        height: auto;

        box-sizing: border-box;

        padding:
            82px
            16px
            24px;

        display: flex;

        align-items: flex-start;

        justify-content: center;

        /*
         * Important:
         * Do not create an internal card scrollbar.
         */
        overflow: hidden;

        background:
            #061738
            url("../images/citylive-mcr-background.png")
            center center / cover
            no-repeat;
    }

    .cl-mcr-login::after {

        background:
            rgba(2, 15, 40, .38);
    }

    .cl-mcr-topline {

        top: 22px;

        left: 16px;

        right: 16px;

        text-align: center;

        font-size: 9px;

        letter-spacing: 2px;
    }

    .cl-mcr-topline b {

        margin:
            0 7px;
    }

    .cl-mcr-brand {

        display: none !important;
    }

    .cl-mcr-card {

        width: 100%;

        max-width: 600px;

        flex: none;

        padding:
            30px
            22px
            25px;

        margin: 0;

        border-radius: 20px;

        transform:
            none !important;
    }

    .cl-mcr-card::before {

        left: 20px;

        right: 20px;

        height: 4px;
    }

    .card-logo {

        font-size: 43px;

        letter-spacing:
            -2.5px;
    }

    .cl-mcr-title {

        margin:
            8px
            0
            16px;

        font-size: 17px;
    }

    .cl-mcr-badge {

        margin-bottom:
            24px;

        padding:
            9px
            18px;

        font-size: 11px;

        letter-spacing:
            1.5px;
    }

    .cl-mcr-field {

        margin-bottom:
            16px;
    }

    .cl-mcr-field label {

        margin-bottom:
            7px;

        font-size:
            14px;
    }

    .cl-mcr-input-wrap input {

        height:
            48px;

        padding:
            12px
            14px
            12px
            45px;

        font-size:
            15px;
    }

    .cl-mcr-forgot {

        margin:
            -3px
            0
            18px;
    }

    .cl-mcr-forgot a {

        font-size:
            13px;
    }

    .cl-mcr-submit {

        min-height:
            50px;

        padding:
            12px
            16px;

        font-size:
            17px;
    }

    .cl-mcr-submit span {

        font-size:
            23px;
    }

    .cl-mcr-divider {

        margin:
            22px
            0
            18px;

        gap:
            8px;

        font-size:
            11px;
    }

    .cl-mcr-features {

        grid-template-columns:
            repeat(4, 1fr);
    }

    .cl-mcr-features > div {

        font-size:
            10px;

        gap:
            5px;
    }

    .cl-mcr-features strong {

        font-size:
            20px;
    }

    .cl-mcr-bottom {

        display:
            none !important;
    }

    .cl-mcr-fullscreen {

        width:
            36px;

        height:
            36px;

        top:
            16px;

        right:
            14px;

        bottom:
            auto;

        font-size:
            17px;
    }
}


/* =========================================================
   SMALL PHONE PORTRAIT
   ========================================================= */

@media screen
and (max-width: 480px)
and (orientation: portrait) {

    .cl-mcr-login {

        padding:
            78px
            10px
            18px;
    }

    .cl-mcr-topline {

        top:
            19px;

        left:
            10px;

        right:
            10px;

        font-size:
            7px;

        letter-spacing:
            1.4px;
    }

    .cl-mcr-topline b {

        margin:
            0 5px;
    }

    .cl-mcr-card {

        width:
            100%;

        padding:
            25px
            17px
            20px;

        border-radius:
            18px;
    }

    .cl-mcr-card::before {

        left:
            17px;

        right:
            17px;
    }

    .card-logo {

        font-size:
            37px;

        letter-spacing:
            -2px;
    }

    .cl-mcr-title {

        margin:
            7px
            0
            13px;

        font-size:
            15px;
    }

    .cl-mcr-badge {

        margin-bottom:
            19px;

        padding:
            8px
            14px;

        font-size:
            9px;

        letter-spacing:
            1.2px;
    }

    .cl-mcr-field {

        margin-bottom:
            13px;
    }

    .cl-mcr-field label {

        margin-bottom:
            5px;

        font-size:
            13px;
    }

    .cl-mcr-input-wrap input {

        height:
            45px;

        padding:
            10px
            12px
            10px
            42px;

        font-size:
            14px;
    }

    .cl-mcr-icon {

        left:
            13px;

        font-size:
            15px;
    }

    .cl-mcr-forgot {

        margin:
            -2px
            0
            15px;
    }

    .cl-mcr-forgot a {

        font-size:
            12px;
    }

    .cl-mcr-submit {

        min-height:
            47px;

        padding:
            10px
            14px;

        font-size:
            16px;
    }

    .cl-mcr-submit span {

        font-size:
            21px;

        margin-right:
            6px;
    }

    .cl-mcr-divider {

        margin:
            19px
            0
            15px;

        gap:
            6px;

        font-size:
            9px;
    }

    .cl-mcr-features > div {

        font-size:
            9px;

        gap:
            4px;
    }

    .cl-mcr-features strong {

        font-size:
            18px;
    }

    .cl-mcr-fullscreen {

        width:
            34px;

        height:
            34px;

        top:
            10px;

        right:
            10px;

        bottom:
            auto;

        font-size:
            16px;
    }
}


/* =========================================================
   FULLSCREEN
   ========================================================= */

.cl-mcr-login:fullscreen {

    width:
        100vw;

    height:
        100vh;

    min-height:
        100vh;

    max-height:
        100vh;

    overflow:
        hidden;
}

.cl-mcr-login:-webkit-full-screen {

    width:
        100vw;

    height:
        100vh;

    min-height:
        100vh;

    max-height:
        100vh;

    overflow:
        hidden;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.cl-mcr-submit:focus-visible,
.cl-mcr-fullscreen:focus-visible,
.cl-mcr-forgot a:focus-visible,
.cl-mcr-input-wrap input:focus-visible {

    outline:
        3px solid
        rgba(18, 76, 163, .35);

    outline-offset:
        2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cl-mcr-submit,
    .cl-mcr-fullscreen,
    .cl-mcr-input-wrap input {

        transition:
            none !important;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .cl-mcr-fullscreen {

        display:
            none !important;
    }
}