/* #0B5FBF, not the CTA green (#4caf50 is the "Emprego"/"Ad" badge) and not the
   site blue: white 14px bold on #228ECF is 3.6:1, under AA.
   main.css has * { border-radius: 5px !important }, hence the !important radii. */

@media (min-width: 768px) {
    /* Bootstrap's -15px left the button 8px from the edge against 15px on the left */
    .navbar-user ul.navbar-right {
        margin-right: 0;
    }

    /* 12 + 40 + 10 keeps master's 62px list and both centres on the search input's */
    .navbar-user-anon .navbar-right .items_bar {
        background-color: transparent;
        border: none;
        margin: 12px 8px 10px 0;
    }

    .navbar-user-anon .navbar-right .items_bar:last-child {
        margin-right: 0;
    }

    .navbar-user-anon .navbar-right .items_bar > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

    .navbar-user-anon .navbar-right .items_bar:nth-child(1) > a {
        color: #4a5568;
        font-weight: 600;
        padding: 0 10px;
    }

    .navbar-user-anon .navbar-right .items_bar:nth-child(1) > a:hover,
    .navbar-user-anon .navbar-right .items_bar:nth-child(1) > a:focus {
        color: #22262b;
        background-color: transparent;
    }

    .navbar-user-anon .navbar-right .items_bar:nth-child(2) > a {
        padding: 0 18px;
        border-radius: 22px !important;
        background-color: #0b5fbf;
        font-weight: 700;
        transition: background-color .15s ease;
    }

    .navbar-user-anon .navbar-right .items_bar:nth-child(2) > a:hover,
    .navbar-user-anon .navbar-right .items_bar:nth-child(2) > a:focus {
        background-color: #094c99;
    }

    /* main.css zeroes the outline, so nothing painted without this */
    .navbar-user-anon .navbar-right .items_bar > a:focus-visible {
        outline: 2px solid #0b5fbf;
        outline-offset: 2px;
    }
}

.side-menu,
.side-menu .navbar,
.side-menu .navbar .navbar-header,
.side-menu .brand-name-wrapper.logo,
.side-menu-container,
.navbar-user,
.navbar-user .navbar-header {
    border-radius: 0 !important;
}


/* .search-bar-side is a col-lg-6, so below 1200px it drops out of the float row
   and starts 16px lower, taking the auth pair with it */
@media (min-width: 768px) and (max-width: 1199px) {
    .navbar-user ul.navbar-right {
        margin-top: -16px;
    }
}

/* hidden by default: from 768px up this nav is the vertical sidebar */
.tl-bar-actions {
    display: none;
}

/* the extra class and the element are needed: (0,2,0) loses to main.css's
   .side-menu .navbar-nav li */
.side-menu .side-menu-container li.tl-menu-auth {
    display: none;
}

.dropdown-menu.preferences .fa { width: 16px; text-align: center; }

/* main.css paints every .fa-trophy white, for the dark sidebar */
.dropdown-menu.preferences .fa-trophy { color: inherit; }

.dropdown-menu.preferences .tl-menu-logo { width: 22px; height: 22px; margin-right: 8px; border: 1px solid #e7e7e7; object-fit: contain; vertical-align: middle; }

/* the menu is z-index 10000 and a Bootstrap modal 1050, so a modal opened over it
   rendered underneath */
body.modal-open .side-menu .side-menu-container > .navbar-nav {
    z-index: 1030;
}

@media (max-width: 767px) {

    .side-menu .navbar .navbar-header {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 0 15px;
        /* .brand-name-wrapper paints the black today, and as a flex item it would
           only cover the wordmark */
        background-color: #000;
    }

    /* clearfix pseudo-elements become flex items */
    .side-menu .navbar .navbar-header::before,
    .side-menu .navbar .navbar-header::after {
        content: none;
    }

    .side-menu .navbar .brand-wrapper {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    .side-menu .navbar .brand-name-wrapper.logo {
        background-color: transparent;
        float: none;
        margin: 0;
        min-width: 0;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .side-menu .navbar .brand-name-wrapper.logo > a {
        display: block;
    }

    .side-menu .navbar .brand-name-wrapper.logo img.opc_logo {
        height: 26px;
        width: auto;
        display: block;
        margin: 0;
    }

    .side-menu .navbar .navbar-toggle.left_side_menu {
        float: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        /* -11px keeps the icon on the 15px gutter while the 44px target spills left */
        margin: 0 12px 0 -11px;
    }

    .tl-bar-actions {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    /* margin, not gap: flex gap needs Chrome 84 / Safari 14.1 */
    .tl-bar-actions > * + * {
        margin-left: 10px;
    }

    /* main.css pads .side-menu .fa 5px on the right, off the centre of the button */
    .tl-bar-actions .fa { padding-right: 0; }

    .tl-bar-search {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: 4px !important;
        background: transparent;
        color: rgba(255, 255, 255, .9);
        font-size: 18px;
        line-height: 1;
    }

    .tl-bar-search:hover,
    .tl-bar-search:focus {
        color: #fff;
        background-color: rgba(255, 255, 255, .12);
        outline: none;
    }

    .tl-bar-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: 22px !important;
        background-color: #0b5fbf;
        /* !important: main.css has .side_bar a { color: white !important } */
        color: #fff !important;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        transition: background-color .15s ease;
    }

    .tl-bar-cta:hover,
    .tl-bar-cta:focus {
        background-color: #094c99;
        color: #fff;
        text-decoration: none;
    }

    /* Bootstrap zeroes the outline on the toggle and the brand link */
    .tl-bar-search:focus-visible,
    .tl-bar-cta:focus-visible,
    .side-menu .navbar .navbar-toggle.left_side_menu:focus-visible,
    .side-menu .navbar .brand-name-wrapper.logo > a:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .9);
        outline-offset: 2px;
    }

    /* main.css pins this at top 53px plus Bootstrap's 7.5px nav margin. Only
       margin-top is zeroed: the -15px on the left cancels the keyframes' left: 10px. */
    .side-menu .side-menu-container > .navbar-nav {
        top: 56px;
        margin-top: 0;
        /* min-height resolves after max-height, and main.css sets it to 100vh !important */
        min-height: calc(100vh - 56px) !important;
        max-height: calc(100vh - 56px);
    }

    .navbar-user-anon {
        display: none;
    }

    .side-body.side-body-onebar { margin-top: 76px; }

    .side-menu .side-menu-container li.tl-menu-auth {
        display: block;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding-bottom: 8px;
    }

    .navbar-user { display: none; }

    .tl-bar-user { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 4px !important; background: transparent; color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1; }

    .tl-bar-user:hover,
    .tl-bar-user:focus { color: #fff; background-color: rgba(255, 255, 255, .12); outline: none; }

    .tl-bar-user:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }

    .tl-bar-user-dot { display: none; position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50% !important; background-color: #e2574c; }
}

.tl-backdrop,
.tl-account-drawer { display: none; }

@media (max-width: 767px) {
    .tl-backdrop { display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); border-radius: 0 !important; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 1034; }

    body.tl-menu-open,
    body.tl-account-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

    .tl-account-drawer { display: block; position: fixed; top: 56px; right: 0; width: 84%; max-width: 320px; height: calc(100vh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: #111; border-radius: 0 !important; transform: translateX(100%); transition: transform .2s ease; z-index: 1035; }

    body.tl-account-open .tl-backdrop,
    body.tl-menu-open .tl-backdrop { opacity: 1; visibility: visible; }

    body.tl-account-open .tl-account-drawer { transform: translateX(0); }

    .tl-account-id,
    .tl-account-id:hover,
    .tl-account-id:focus { display: flex; align-items: center; padding: 20px 12px; border-bottom: 1px solid rgba(255, 255, 255, .10); text-decoration: none; }

    .tl-account-id:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -2px; }

    .tl-account-avatar { flex: 0 0 auto; width: 52px; height: 52px; margin-right: 12px; border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); object-fit: cover; }

    .tl-account-who { min-width: 0; }

    .tl-account-who strong { display: block; color: #fff; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .tl-account-who small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .62); font-size: 13px; }

    .tl-account-eyebrow { margin: 0; padding: 18px 12px 6px; color: rgba(255, 255, 255, .38); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

    .tl-account-list { margin: 0; padding: 0; list-style: none; }

    .tl-account-list > li > a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; color: #fff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .tl-account-list > li > a:hover,
    .tl-account-list > li > a:focus { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

    .tl-account-list > li > a:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -2px; }

    .tl-account-list .fa { flex: 0 0 22px; color: rgba(255, 255, 255, .55); font-size: 15px; }

    .tl-account-signout { margin-top: 8px; padding-bottom: 16px; border-top: 1px solid rgba(255, 255, 255, .10); }

    .tl-account-list .badge { margin-left: 8px; background: #e2574c; color: #fff; font-size: 12px; }
    .tl-account-list .badge:empty { display: none; }

    .tl-account-list .tl-account-logo { flex: 0 0 26px; height: 26px; margin-right: 8px; object-fit: contain; }

    .tl-account-list > li > a > .fa:first-child + * ,
    .tl-account-list > li > a { min-width: 0; }

    .tl-account-list .fa.tl-account-verified { flex: 0 0 auto; margin-left: 6px; color: #31B51B; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-backdrop,
    .tl-account-drawer { transition: none; }
}