header { background: #ffffff }

.dropdown .user-nav-toggle, .dropdown .account span { color: black }

#drop-bg, .navbar-default {
    background: #333f48 !important;
    border-color: #333f48 !important;
}

li > .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #d7d2cb; }

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .subnav, #hover-dropdown > ul, #click-dropdown > ul,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { background-color: #7a8288; }

.flexible-mobile { height: 10.4rem !important; }

#btn-save-sms-notification-settings { margin-left: 0 !important; }

#btnCancelITMAccount { margin-left: 1.5% !important; }

#sms-notifications-stopped-msg { font-weight: bold; }

#accountClosureSuccessModal.modal-body { white-space: pre-line; }

#toast-container > div > div.toast-title > a {
    color: #ffffff;
    text-decoration: underline;
}

@media only screen and (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        background-color: #7a8288;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        background-color: #d7d2cb;
    }
}

@media only screen and (min-width: 741px) {
    header {
        position: relative;
        padding: 1rem 0;
        display: block;
    }
}


@media only screen and (max-width: 740px) {
    .flexible-mobile {
        width: 75%;
        height: 10.4rem !important;
        word-break: break-all;
    }
    .navbar-default { padding: 1.5rem 0 !important; }

    img.user-circle.img-responsive { margin-left: 9px; }

    .navbar-nav { margin: 14.5px -20px; }

    .name, .account, .company-name {
        font-size: 91% !important;
        margin-top: 4px;
    }

    #itmLogo { display: none; }

    #user-nav { margin-top: 26px !important; }
}

@media only screen and (min-width: 0) and (max-width: 280px) {
    .flexible-mobile { width: 70%; }

    .name, .account, .company-name {
        font-size: 78% !important;
        margin-top: 6px;
    }
}

@media only screen and (min-width: 280px) and (max-width: 320px) {
    .name, .account, .company-name {
        font-size: 78% !important;
        margin-top: 6px;
    }
}

@media only screen and (min-width: 540px) and (max-width: 740px) {
    .flexible-mobile { padding: 3rem 0; }

    #user-nav { margin-top: 0 !important; }
}