/* Monzo UK-specific styles and overrides for monuk-main.css */

.hero-image {
    background-image: url('../images/monuk/hero-desktop.jpg');
}

.not-signed-image {
    background-image: url('/images/monuk/not-signed.jpg');
}

.footer-image {
    width: 20%;
    float: left;
}

.row-footer-images {
    padding-top: 20px;
}

.infoIcon, .infoIcon:hover, .infoIcon:visited {
    color: inherit;
    text-decoration: none;
    margin-right: -10px;
}

.fa-info {
    color: #fff;
    font-size: 10px;
}

.pop-foot, .pop-foot:hover, .pop-foot:visited {
    margin-right: 0;
}

.bg-image {
    background-image: url(../images/monuk/login-bg.jpg);
}

.dropdown-toggle.chevron::before, .dropdown-toggle.chevron::after {
    background-image: url(../images/monuk/chevron_down.png);
}

.dropup .dropdown-toggle.chevron::before, .dropup .dropdown-toggle.chevron::after {
    background-image: url(../images/monuk/chevron_down.png);
}

.dropright .dropdown-toggle.chevron::before, .dropright .dropdown-toggle.chevron::after {
    background-image: url(../images/monuk/chevron_down.png);
}

.dropleft .dropdown-toggle.chevron::before, .dropleft .dropdown-toggle.chevron::after {
    background-image: url(../images/monuk/chevron_down.png);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url(../images/monuk/check-white.png);
}

@media only screen and (max-width: 991px) {
    .navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
        background-image: url(../images/monuk/mob-menu.png);
    }

    .navbar-light .navbar-toggler .navbar-toggler-icon {
        background-image: url(../images/monuk/hamburger-close.png);
    }
}

.nav-logo-left {
    width: 160px;
    height: 34px;
}

.nav-logo-right {
    width: 160px;
    height: 36px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

    .alert-success hr {
        border-top-color: #b1dfbb;
    }

    .alert-success .alert-link {
        color: #0b2e13;
    }

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

    .alert-info hr {
        border-top-color: #abdde5;
    }

    .alert-info .alert-link {
        color: #062c33;
    }

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

    .alert-warning hr {
        border-top-color: #ffe8a1;
    }

    .alert-warning .alert-link {
        color: #533f03;
    }

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

    .alert-danger hr {
        border-top-color: #f1b0b7;
    }

    .alert-danger .alert-link {
        color: #491217;
    }

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

    .alert-light hr {
        border-top-color: #ececf6;
    }

    .alert-light .alert-link {
        color: #686868;
    }

.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

    .alert-dark hr {
        border-top-color: #b9bbbe;
    }

    .alert-dark .alert-link {
        color: #040505;
    }

.table-in-card h5 {
    white-space: normal;
}

/* Status color for Claim Status Codes */
.AU_status, .SE_status, .FI_status, .IW_status {
    color: green;
}
/*Authorised, Settled, Final, In Warranty*/
.NO_status, .RF_status, .UI_status, .AI_status {
    color: Orange;
}
/*Notified, Referred, Under Investigation, Awaitig Information */
.RJ_status, .NC_status, .CW_status, .AB_status {
    color: grey;
}
/*Rejected, No Claim, Client Withdrew, Abandoned */

/* Status color for policy Status Codes */
.LI_policystatus {
    color: green;
}
/* Live */
.NE_policystatus, .SU_policystatus, .SPE_policystatus, .RF_policystatus {
    color: Orange;
}
/*New, Suspended, Excess Suspended, Referred */
.LA_policystatus, .CA_policystatus, .IN_policystatus, .DE_policystatus, .RE_policystatus {
    color: red;
}

p a, p a:visited, .card-accordion a, .card-accordion a:visited {
    color: #007bff
}

    p a:hover, .card-accordion a:hover {
        color: #007bff;
        text-decoration: underline;
    }

.opacityBlinker {
    animation: opacityBlinkerKeyframes 1s linear infinite;
    color: #007bff;
}

ul.navbar-nav {
    min-height: 70px;
}

.register-dropdown {
    background-image: url(../images/MONUK/chevron-down-large.png);
    background-repeat: no-repeat;
}

.custom-file .custom-file-input:lang(es) ~ .custom-file-label::after {
    background-image: url(../images/MONUK/upload.png);
}

.custom-file .custom-file-label::after {
    top: -2px;
    right: -2px;
}


/* #region 4 steps (well, 3 actually) CSS copied from vfes-main.css, to handle the current HTML with icons that we got from the VFES design but wasn't accounted for in Monzo HTML/CSS */

.four-steps-element {
    position: relative;
    padding-bottom: 60px;
}

    .four-steps-element .top-icons {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: calc(600px + 40px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

        .four-steps-element .top-icons .icon-1 {
            width: 40px;
        }

        .four-steps-element .top-icons .icon-2 {
            width: 37px;
        }

        .four-steps-element .top-icons .icon-3 {
            width: 40px;
        }

    .four-steps-element .line-bullet-wrap {
        position: relative;
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        height: 18px;
    }

    .four-steps-element .line {
        height: 2px;
        background-color: #007bff;
        top: 50%;
        position: absolute;
        left: 0;
        -webkit-transform: translate(0, -1px);
        transform: translate(0, -1px);
        width: 100%;
    }

    .four-steps-element .bullet {
        width: 18px;
        height: 18px;
        background-color: #007bff;
        border-radius: 100%;
        position: absolute;
        top: 0;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

        .four-steps-element .bullet.bullet-1 {
            left: 0;
        }

        .four-steps-element .bullet.bullet-3 {
            left: 50%;
        }

        .four-steps-element .bullet.bullet-4 {
            left: 100%;
        }

        .four-steps-element .bullet.active:after {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            width: 24px;
            height: 24px;
            border: 1px solid #4A4D4E;
            border-radius: 100%;
        }

    .four-steps-element .bullet-text {
        font-size: 18px;
        position: absolute;
        top: 30px;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        white-space: nowrap;
    }

        .four-steps-element .bullet-text.bullet-1 {
            left: 0;
        }

        .four-steps-element .bullet-text.bullet-3 {
            left: 50%;
        }

        .four-steps-element .bullet-text.bullet-4 {
            left: 100%;
        }

@media only screen and (max-width: 1023px) {
    .four-steps-element {
        padding-bottom: 0;
    }

        .four-steps-element .top-icons {
            display: block;
            width: auto;
            margin-right: 20px;
        }

            .four-steps-element .top-icons img {
                display: block;
            }

            .four-steps-element .top-icons .icon-1 {
                margin-top: -10px;
            }

            .four-steps-element .top-icons .icon-2 {
                margin-top: 20px;
            }

            .four-steps-element .top-icons .icon-3 {
                margin-top: 20px;
            }

        .four-steps-element .mobile-line-bullet-wrap {
            position: relative;
            height: 140px;
            width: 18px;
        }

            .four-steps-element .mobile-line-bullet-wrap .line {
                width: 2px;
                height: 100%;
                top: 0;
                left: 50%;
                -webkit-transform: translate(-1px, 0);
                transform: translate(-1px, 0);
            }

            .four-steps-element .mobile-line-bullet-wrap .bullet {
                left: 0 !important;
                -webkit-transform: none;
                transform: none;
                top: 0;
            }

                .four-steps-element .mobile-line-bullet-wrap .bullet.bullet-3 {
                    top: 61px;
                }

                .four-steps-element .mobile-line-bullet-wrap .bullet.bullet-4 {
                    top: 122px;
                }

        .four-steps-element .mobile-text-wrap {
            padding-left: 20px;
            margin-top: -5px;
            text-align: left;
        }

            .four-steps-element .mobile-text-wrap .bullet-text {
                position: relative;
                left: 0;
                top: 0;
                -webkit-transform: none;
                transform: none;
            }

                .four-steps-element .mobile-text-wrap .bullet-text.bullet-3, .four-steps-element .mobile-text-wrap .bullet-text.bullet-4 {
                    margin-top: 34px;
                }

        .four-steps-element .mobile-flex-wrap {
            display: -webkit-inline-box;
            display: inline-flex;
        }

        .four-steps-element .outer-mobile-wrap {
            text-align: center;
        }
}

.four-steps-element .top-icons {
    display: none;
}

/* #endregion End 4 steps CSS copied from vfes-main.css */

.privacy-checkbox {
    width: 50px;
    height: 50px;
}

p a, p a:visited, .card-accordion a, .card-accordion a:visited {
    color: #fff;
}

/*#region Claim Chat*/

.chatQuestion {
    padding: 4px;
}

.chat-right .pl-5 {
    padding-left: 0.50rem !important;
}

.chat-right h5 {
    padding: 4px;
    color: #fff;
}

.chatbot-nav a[role=button] {
    color: #fff;
}

.chatbot-nav td.day {
    text-align: center;
}

.chatbot-nav td.active.day {
    color: #fff;
}

.chatbot-nav th.datepicker-switch {
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .datepicker table th[colspan] {
        width: auto;
    }

    .datepicker td {
        font-size: 1.4rem;
    }
}

.datepicker td.disabled.day {
    color: #cccccc;
}

.datepicker table tr th.next, .datepicker table tr th.next:hover {
    background-image: url(../images/MONUK/right.png);
    cursor: pointer;
}

.datepicker table tr th.prev, .datepicker table tr th.prev:hover {
    background-image: url(../images/MONUK/left.png);
    cursor: pointer;
}

.chat-left .chat-icon {
    background-image: url(../images/MONUK/left-chat-icon.png);
    background-size: 38px;
    width: 38px;
    height: 38px;
}

.chat-left .card-header {
    background-color: #fff;
    color: #212529;
}

html .chatTyping > i {
    border-color: #007bff;
}

html .cbigblue {
    background-color: #007bff !important;
}

html #claim-nav.header-claim {
    display: none !important;
}

.invisible {
    visibility: visible !important;
    display: none;
}

.radio-button-list {
    text-align: left;
}

[data-id="selectDeviceMake"], [data-id="selectDeviceModel"], [data-id="selectDeviceVariant"] {
    border-radius: 2px;
    border: solid 1px #007bff;
}

.dropdown-menu.open.show {
    border: solid 1px #007bff;
}

/*#endregion Claim Chat*/

.table.table-in-card h5, .card-text {
    font-size: 1.125rem;
}

.btn.disabled, .btn:disabled {
    cursor: not-allowed;
}

a.text-dark, a.text-dark:visited {
    color: #0070b9 !important;
}

    a.text-dark:hover {
        color: #007bff !important;
    }

ul.ticks li:before {
    content: '✓ ';
}

ul.ticks li {
    list-style-type: none;
}


ul.bullets li:before {
    content: '\2022  ';
}

ul.bullets li {
    list-style-type: none;
}


ul.exclamations li:before {
    content: '\0021  ';
}

ul.exclamations li {
    list-style-type: none;
}

.date-input-sm {
    min-height: 30px;
    min-width: 200px
}

.custom-file .custom-file-label {
    padding: 10px 12px;
    line-height: 2;
    overflow: hidden;
}

.faq-info-icon {
    height: 40px;
}

.card-time-stamp {
    font-size: 0.8rem;
}

@keyframes opacityBlinkerKeyframes {
    50% {
        opacity: 0;
    }
}

@font-face {
    font-family: "VodafoneLtRegular";
    src: url(../fonts/vodafone_lt_w.eot);
    src: url(../fonts/vodafone_lt_w.eot?#iefix) format("embedded-opentype"), url(../fonts/vodafone_lt_w.woff) format("woff"), url(../fonts/vodafone_lt_w.ttf) format("truetype"), url(../fonts/vodafonelt-webfont.svg#VodafoneLtRegular) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "VodafoneRegularBold";
    src: url(../fonts/VodafoneRg_Bd.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trebuchet';
    src: url(../fonts/TrebuchetMS.eot?#iefix) format("embedded-opentype"),url(../fonts/TrebuchetMS.woff) format("woff"),url(../fonts/TrebuchetMS.ttf) format("truetype"),url(../fonts/TrebuchetMS.svg#TrebuchetMS) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Trebuchet';
    src: url(../fonts/Trebuchet-BoldItalic.eot?#iefix) format("embedded-opentype"),url(../fonts/Trebuchet-BoldItalic.woff) format("woff"),url(../fonts/Trebuchet-BoldItalic.ttf) format("truetype"),url(../fonts/Trebuchet-BoldItalic.svg#Trebuchet-BoldItalic) format("svg");
    font-weight: bold;
    font-style: italic
}

@font-face {
    font-family: 'Trebuchet';
    src: url(../fonts/TrebuchetMS-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/TrebuchetMS-Bold.woff) format("woff"),url(../fonts/TrebuchetMS-Bold.ttf) format("truetype"),url(../fonts/TrebuchetMS-Bold.svg#TrebuchetMS-Bold) format("svg");
    font-weight: bold;
    font-style: normal
}

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

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

.ulTooltip {
    margin-left: 1em !important;
    margin-bottom: 0em !important;
    padding: 0.3em !important;
}

.liTooltip {
    padding-left: 0em !important;
    text-align: left !important;
}

html .tooltip * {
    text-align: left !important;
}

/*Header size overrides for _DeviceCard.cshtml*/
@media (max-width: 576px) {
    .device-card .responsive-headers h4 {
        font-size: 1.5rem !important;
    }

    .device-card .responsive-headers h5 {
        font-size: 1rem !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .device-card .responsive-headers h4 {
        font-size: 2rem !important;
    }

    .device-card .responsive-headers h5 {
        font-size: 1.5rem !important;
    }
}

.cookie-policy-table {
    width: 100%;
}

.cookie-policy-header-row {
    padding: 25px 0;
}

.cookie-policy-header-column-1 {
    width: 25%;
}

.cookie-policy-header-column-2 {
    width: 75%;
}

.cookie-policy-column-1 {
    width: 25%;
    padding: 10px 0;
}

.cookie-policy-column-2 {
    width: 75%;
    padding: 10px 0;
}

.privacy-policy-data-disclosures {
    padding-top: 20px;
}

.blue-text {
    color:blue;
}