/* glue: 0.13 hash: 2aeebccbab */
        .sprite-logos-universidade-nova-de-lisboa-faculdade-de-ciencias-e-tecnologia,
.sprite-logos-universidade-nova-de-lisboa-escola-de-gestao-de-informacao-nova-ims,
.sprite-logos-universidade-lusofona-do-porto,
.sprite-logos-universidade-lusofona-de-humanidades-e-tecnologias,
.sprite-logos-universidade-lusiada,
.sprite-logos-universidade-fernando-pessoa,
.sprite-logos-universidade-europeia,
.sprite-logos-universidade-do-porto-faculdade-de-engenharia,
.sprite-logos-universidade-do-porto-faculdade-de-ciencias,
.sprite-logos-universidade-do-minho,
.sprite-logos-universidade-do-algarve-faculdade-de-ciencias-e-tecnologia,
.sprite-logos-universidade-de-tras-os-montes-e-alto-douro-escola-de-ciencias-e-tecnologia,
.sprite-logos-universidade-de-lisboa-instituto-superior-tecnico,
.sprite-logos-universidade-de-lisboa-faculdade-de-ciencias,
.sprite-logos-universidade-de-evora-escola-de-ciencias-e-tecnologia,
.sprite-logos-universidade-de-coimbra-faculdade-de-ciencias-e-tecnologia,
.sprite-logos-universidade-de-aveiro,
.sprite-logos-universidade-da-madeira-faculdade-de-ciencias-exatas-e-da-engenharia,
.sprite-logos-universidade-da-beira-interior,
.sprite-logos-universidade-catolica-portuguesa,
.sprite-logos-universidade-autonoma-de-lisboa-luis-de-camoes,
.sprite-logos-universidade-aberta,
.sprite-logos-iscte-instituto-universitario-de-lisboa,
.sprite-logos-instituto-superior-politecnico-gaya-escola-superior-de-ciencia-e-tecnologia,
.sprite-logos-instituto-superior-manuel-teixeira-gomes,
.sprite-logos-instituto-superior-de-tecnologias-avancadas,
.sprite-logos-instituto-superior-de-economia-e-gestao,
.sprite-logos-instituto-politecnico-jean-piaget-do-sul-escola-superior-de-tecnologia-e-gestao-jean-piaget,
.sprite-logos-instituto-politecnico-do-porto-instituto-superior-de-engenharia-do-porto,
.sprite-logos-instituto-politecnico-do-porto-escola-superior-de-tecnologia-e-gestao,
.sprite-logos-instituto-politecnico-do-cavado-e-do-ave,
.sprite-logos-instituto-politecnico-de-viseu-escola-superior-de-tecnologia-e-gestao-de-viseu,
.sprite-logos-instituto-politecnico-de-viseu-escola-superior-de-tecnologia-e-gestao-de-lamego,
.sprite-logos-instituto-politecnico-de-viana-do-castelo-escola-superior-de-tecnologia-e-gestao,
.sprite-logos-instituto-politecnico-de-tomar-escola-superior-de-tecnologia-de-tomar,
.sprite-logos-instituto-politecnico-de-setubal-escola-superior-de-tecnologia-de-setubal,
.sprite-logos-instituto-politecnico-de-santarem,
.sprite-logos-instituto-politecnico-de-portalegre-escola-superior-de-tecnologia-e-gestao,
.sprite-logos-instituto-politecnico-de-lisboa-instituto-superior-de-engenharia-de-lisboa,
.sprite-logos-instituto-politecnico-de-leiria-escola-superior-de-tecnologia-e-gestao,
.sprite-logos-instituto-politecnico-de-coimbra-instituto-superior-de-engenharia-de-coimbra,
.sprite-logos-instituto-politecnico-de-coimbra-escola-superior-de-tecnologia-e-gestao-de-oliveira-do-hospital,
.sprite-logos-instituto-politecnico-de-castelo-branco-escola-superior-de-tecnologia-de-castelo-branco,
.sprite-logos-instituto-politecnico-de-braganca-escola-superior-de-tecnologia-e-de-gestao-de-braganca,
.sprite-logos-instituto-politecnico-de-beja-escola-superior-de-tecnologia-e-de-gestao,
.sprite-logos-instituto-politecnico-da-maia,
.sprite-logos-instituto-politecnico-da-lusofonia,
.sprite-logos-instituto-politecnico-da-guarda-escola-superior-de-tecnologia-e-gestao,
.sprite-logos-escola-superior-de-media-artes-e-design {
            background-image: url('/static/uploads/universities_small_logos.png');
            background-repeat: no-repeat;
        }
        
        .sprite-logos-universidade-nova-de-lisboa-faculdade-de-ciencias-e-tecnologia {
            background-position: 0 0;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-nova-de-lisboa-escola-de-gestao-de-informacao-nova-ims {
            background-position: 0 -30px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-lusofona-do-porto {
            background-position: -60px 0;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-lusofona-de-humanidades-e-tecnologias {
            background-position: -60px -30px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-lusiada {
            background-position: 0 -60px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-fernando-pessoa {
            background-position: -60px -60px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-europeia {
            background-position: 0 -90px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-do-porto-faculdade-de-engenharia {
            background-position: -60px -90px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-do-porto-faculdade-de-ciencias {
            background-position: -120px 0;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-do-minho {
            background-position: -120px -30px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-do-algarve-faculdade-de-ciencias-e-tecnologia {
            background-position: -120px -60px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-de-tras-os-montes-e-alto-douro-escola-de-ciencias-e-tecnologia {
            background-position: -120px -90px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-de-lisboa-instituto-superior-tecnico {
            background-position: 0 -120px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-de-lisboa-faculdade-de-ciencias {
            background-position: -60px -120px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-de-evora-escola-de-ciencias-e-tecnologia {
            background-position: -120px -120px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-de-coimbra-faculdade-de-ciencias-e-tecnologia {
            background-position: 0 -150px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-de-aveiro {
            background-position: -60px -150px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-da-madeira-faculdade-de-ciencias-exatas-e-da-engenharia {
            background-position: -120px -150px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-da-beira-interior {
            background-position: -180px 0;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-catolica-portuguesa {
            background-position: -180px -30px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-autonoma-de-lisboa-luis-de-camoes {
            background-position: -180px -60px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-universidade-aberta {
            background-position: -180px -90px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-iscte-instituto-universitario-de-lisboa {
            background-position: -180px -120px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-superior-politecnico-gaya-escola-superior-de-ciencia-e-tecnologia {
            background-position: -180px -150px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-superior-manuel-teixeira-gomes {
            background-position: 0 -180px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-superior-de-tecnologias-avancadas {
            background-position: -60px -180px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-superior-de-economia-e-gestao {
            background-position: -120px -180px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-jean-piaget-do-sul-escola-superior-de-tecnologia-e-gestao-jean-piaget {
            background-position: -180px -180px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-do-porto-instituto-superior-de-engenharia-do-porto {
            background-position: 0 -210px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-do-porto-escola-superior-de-tecnologia-e-gestao {
            background-position: -60px -210px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-do-cavado-e-do-ave {
            background-position: -120px -210px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-viseu-escola-superior-de-tecnologia-e-gestao-de-viseu {
            background-position: -180px -210px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-viseu-escola-superior-de-tecnologia-e-gestao-de-lamego {
            background-position: -240px 0;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-viana-do-castelo-escola-superior-de-tecnologia-e-gestao {
            background-position: -240px -30px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-tomar-escola-superior-de-tecnologia-de-tomar {
            background-position: -240px -60px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-setubal-escola-superior-de-tecnologia-de-setubal {
            background-position: -240px -90px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-santarem {
            background-position: -240px -120px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-portalegre-escola-superior-de-tecnologia-e-gestao {
            background-position: -240px -150px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-lisboa-instituto-superior-de-engenharia-de-lisboa {
            background-position: -240px -180px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-leiria-escola-superior-de-tecnologia-e-gestao {
            background-position: -240px -210px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-coimbra-instituto-superior-de-engenharia-de-coimbra {
            background-position: 0 -240px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-coimbra-escola-superior-de-tecnologia-e-gestao-de-oliveira-do-hospital {
            background-position: -60px -240px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-castelo-branco-escola-superior-de-tecnologia-de-castelo-branco {
            background-position: -120px -240px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-braganca-escola-superior-de-tecnologia-e-de-gestao-de-braganca {
            background-position: -180px -240px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-de-beja-escola-superior-de-tecnologia-e-de-gestao {
            background-position: -240px -240px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-da-maia {
            background-position: 0 -270px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-da-lusofonia {
            background-position: -60px -270px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-instituto-politecnico-da-guarda-escola-superior-de-tecnologia-e-gestao {
            background-position: -120px -270px;
            width: 60px;
            height: 30px;
        }
        
        .sprite-logos-escola-superior-de-media-artes-e-design {
            background-position: -180px -270px;
            width: 60px;
            height: 30px;
        }
        
        @media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (-o-min-device-pixel-ratio: 100/100), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) {
            .sprite-logos-universidade-nova-de-lisboa-faculdade-de-ciencias-e-tecnologia,
    .sprite-logos-universidade-nova-de-lisboa-escola-de-gestao-de-informacao-nova-ims,
    .sprite-logos-universidade-lusofona-do-porto,
    .sprite-logos-universidade-lusofona-de-humanidades-e-tecnologias,
    .sprite-logos-universidade-lusiada,
    .sprite-logos-universidade-fernando-pessoa,
    .sprite-logos-universidade-europeia,
    .sprite-logos-universidade-do-porto-faculdade-de-engenharia,
    .sprite-logos-universidade-do-porto-faculdade-de-ciencias,
    .sprite-logos-universidade-do-minho,
    .sprite-logos-universidade-do-algarve-faculdade-de-ciencias-e-tecnologia,
    .sprite-logos-universidade-de-tras-os-montes-e-alto-douro-escola-de-ciencias-e-tecnologia,
    .sprite-logos-universidade-de-lisboa-instituto-superior-tecnico,
    .sprite-logos-universidade-de-lisboa-faculdade-de-ciencias,
    .sprite-logos-universidade-de-evora-escola-de-ciencias-e-tecnologia,
    .sprite-logos-universidade-de-coimbra-faculdade-de-ciencias-e-tecnologia,
    .sprite-logos-universidade-de-aveiro,
    .sprite-logos-universidade-da-madeira-faculdade-de-ciencias-exatas-e-da-engenharia,
    .sprite-logos-universidade-da-beira-interior,
    .sprite-logos-universidade-catolica-portuguesa,
    .sprite-logos-universidade-autonoma-de-lisboa-luis-de-camoes,
    .sprite-logos-universidade-aberta,
    .sprite-logos-iscte-instituto-universitario-de-lisboa,
    .sprite-logos-instituto-superior-politecnico-gaya-escola-superior-de-ciencia-e-tecnologia,
    .sprite-logos-instituto-superior-manuel-teixeira-gomes,
    .sprite-logos-instituto-superior-de-tecnologias-avancadas,
    .sprite-logos-instituto-superior-de-economia-e-gestao,
    .sprite-logos-instituto-politecnico-jean-piaget-do-sul-escola-superior-de-tecnologia-e-gestao-jean-piaget,
    .sprite-logos-instituto-politecnico-do-porto-instituto-superior-de-engenharia-do-porto,
    .sprite-logos-instituto-politecnico-do-porto-escola-superior-de-tecnologia-e-gestao,
    .sprite-logos-instituto-politecnico-do-cavado-e-do-ave,
    .sprite-logos-instituto-politecnico-de-viseu-escola-superior-de-tecnologia-e-gestao-de-viseu,
    .sprite-logos-instituto-politecnico-de-viseu-escola-superior-de-tecnologia-e-gestao-de-lamego,
    .sprite-logos-instituto-politecnico-de-viana-do-castelo-escola-superior-de-tecnologia-e-gestao,
    .sprite-logos-instituto-politecnico-de-tomar-escola-superior-de-tecnologia-de-tomar,
    .sprite-logos-instituto-politecnico-de-setubal-escola-superior-de-tecnologia-de-setubal,
    .sprite-logos-instituto-politecnico-de-santarem,
    .sprite-logos-instituto-politecnico-de-portalegre-escola-superior-de-tecnologia-e-gestao,
    .sprite-logos-instituto-politecnico-de-lisboa-instituto-superior-de-engenharia-de-lisboa,
    .sprite-logos-instituto-politecnico-de-leiria-escola-superior-de-tecnologia-e-gestao,
    .sprite-logos-instituto-politecnico-de-coimbra-instituto-superior-de-engenharia-de-coimbra,
    .sprite-logos-instituto-politecnico-de-coimbra-escola-superior-de-tecnologia-e-gestao-de-oliveira-do-hospital,
    .sprite-logos-instituto-politecnico-de-castelo-branco-escola-superior-de-tecnologia-de-castelo-branco,
    .sprite-logos-instituto-politecnico-de-braganca-escola-superior-de-tecnologia-e-de-gestao-de-braganca,
    .sprite-logos-instituto-politecnico-de-beja-escola-superior-de-tecnologia-e-de-gestao,
    .sprite-logos-instituto-politecnico-da-maia,
    .sprite-logos-instituto-politecnico-da-lusofonia,
    .sprite-logos-instituto-politecnico-da-guarda-escola-superior-de-tecnologia-e-gestao,
    .sprite-logos-escola-superior-de-media-artes-e-design {
                background-image: url('/static/uploads/universities_small_logos.png');
                -webkit-background-size: 300px 300px;
                -moz-background-size: 300px 300px;
                background-size: 300px 300px;
            }
        }
        
/* Shared look of the authentication block, used by the login and register pages
   (styled by landing.css) and by the auth modal (styled by main.css). Loaded
   last by both bases so it wins over the global button, nav and panel rules
   that each of those files carries. */

.auth-box {
    padding: 40px;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
}

/* the line-separator rules live in main.css, which the auth pages do not load */
.auth-box .line-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #777;
    margin-bottom: 20px;
}

.auth-box .line-separator::before,
.auth-box .line-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #777;
}

.auth-box .line-separator::before {
    margin-right: .5em;
}

.auth-box .line-separator::after {
    margin-left: .5em;
}

.auth-box .main-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.3;
}

.auth-box .social-login-container {
    margin: 40px 0 20px;
    display: flow-root;
}

/* flush with the form inputs: undo the bootstrap column side padding */
.auth-box .social-login-container [class*="col-lg-"] {
    padding-left: 0;
    padding-right: 0;
}

.auth-box .footer-text {
    font-size: 14px;
    color: #888;
}

.auth-box form {
    text-align: left;
}

.auth-box .g-recaptcha > div {
    margin: 0 auto;
}

.auth-box .modal-auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-box .modal-auth-remember {
    margin: 0;
    font-weight: normal;
}

/* which of the three forms shows: the wrapper carries auth-box plus
   modal-auth-register or modal-auth-reset */
.auth-box .modal-auth-error,
.auth-box .modal-auth-success,
.auth-box #modal-register-form,
.auth-box #modal-reset-form,
.auth-box .modal-auth-register-footer,
.auth-box .modal-auth-register-title,
.auth-box .modal-auth-reset-title,
.auth-box .modal-auth-tos,
.auth-box .modal-auth-student-note,
.auth-box.modal-auth-register #modal-auth-form,
.auth-box.modal-auth-register .modal-auth-login-title,
.auth-box.modal-auth-register .modal-auth-login-footer,
.auth-box.modal-auth-register.modal-auth-student .social-login-container,
.auth-box.modal-auth-register.modal-auth-student .line-separator,
.auth-box.modal-auth-reset #modal-auth-form,
.auth-box.modal-auth-reset .modal-auth-login-title,
.auth-box.modal-auth-reset .modal-auth-login-footer,
.auth-box.modal-auth-reset .social-login-container,
.auth-box.modal-auth-reset .line-separator {
    display: none;
}

.auth-box.modal-auth-register #modal-register-form,
.auth-box.modal-auth-register .modal-auth-register-footer,
.auth-box.modal-auth-register .modal-auth-register-title,
.auth-box.modal-auth-register .modal-auth-tos,
.auth-box.modal-auth-register.modal-auth-student .modal-auth-student-note,
.auth-box.modal-auth-reset #modal-reset-form,
.auth-box.modal-auth-reset .modal-auth-reset-title,
.auth-box.modal-auth-reset .modal-auth-register-footer {
    display: block;
}

.auth-box ul.nav.custom_menu_signup {
    margin-bottom: 40px;
}

.auth-box.modal-auth-student ul.nav.custom_menu_signup {
    margin-top: 20px;
    margin-bottom: 20px;
}

.auth-box .btn {
    font-size: 14px !important;
}

.auth-box .company_logo_default {
    padding: 4px 8px;
    background: white;
    border: 1px solid #e4e4e4;
}

.auth-box ul.nav.custom_menu_signup {
    display: flex;
}

.auth-box ul.nav.custom_menu_signup li {
    width: 50%;
}

.auth-box .custom_menu_signup li a {
    padding: 8px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
}

.auth-box .custom_menu_signup li a:hover {
    background-color: #eee !important;
    border-color: #adadad;
}

.auth-box .custom_menu_signup li a:focus {
    background-color: #eee !important;
    border-color: #8c8c8c;
}

.auth-box .custom_menu_signup li a:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* after the states above on purpose: same specificity, so the chosen tab wins */
.auth-box .custom_menu_signup li.active a {
    background: #e0e0e0 !important;
}

.auth-box .panel-success {
    border-color: #d6e9c6;
    border-radius: 4px;
}

.auth-box .panel-body {
    padding: 15px !important;
}

.auth-box .fa-green {
    color: #00c500;
    float: left;
    height: 20px;
    padding: 0px 6px;
    margin-top: 5px;
}
/* the company's jobs tab as two panes: the list, and the open job beside it */

.jobs-split {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.jobs-split__list {
    flex: 1 1 auto;
    min-width: 0;
}

.jobs-split__detail {
    display: none;
}

/* with a job open the list gives up the right half of the tab */
.jobs-split--open .jobs-split__list {
    flex: 0 0 41%;
    max-width: 41%;
}

.jobs-split--open .jobs-split__detail {
    display: block;
    flex: 1 1 59%;
    min-width: 0;
}

/* sticks only when the list can hold the page up, or the clamp shrinks the document
   and it flickers; job_detail.js sets the class */
.jobs-split--open .jobs-split__detail.can-stick {
    position: sticky;
    top: 76px;
}

/* inner scroll only once stuck: before that the box hangs below the fold */
.jobs-split--open .jobs-split__detail.can-stick.is-stuck {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

/* out of the flow: as a flex item it kept a 16px gap beside it with the panel closed */
.jobs-split__sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
}

/* a role name never wraps and a card is a table cell: at 41% the list kept its own
   width and slid under the panel. the column floats, so auto shrinks it to the
   content and leaves a wider gap than the split's own */
.jobs-split--open .company_area_list {
    display: block;
    float: none;
    width: 100%;
}

.jobs-split--open .role-tag {
    white-space: normal;
    word-break: break-word;
}

/* at 41% the sort control came out cut: heading and control take the full width */
.jobs-split--open .jobboard-sort-section > .row > .jobboard-h3-jobs-found,
.jobs-split--open .jobboard-sort-section > .row > .col-lg-3 {
    float: none;
    width: 100%;
    max-width: none;
}

.jobs-split--open .jobboard-sort-section > .row > .col-lg-3 .form-control {
    width: 100%;
}

/* one sheet with the blocks as sections, not a pile of cards */
.jobs-split--open .jobs-split__detail {
    background: #fff;
    border: 1px solid #e6eaf0;
}

/* the board's list makes every .panel a flex row (a grid on phones) */
.jobdetail > .panel,
.jobdetail > .col-lg-12 {
    display: block !important;
    background: transparent;
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 18px 20px;
    width: auto;
    float: none;
}

.jobdetail > * + * {
    border-top: 1px solid #eef1f5;
}

.jobdetail > .jobdetail__note {
    border-top: 0;
    padding-top: 0;
    margin-top: -10px;
}

.jobs-split--open .jobcard--open {
    background: #f5f8ff;
    box-shadow: inset 3px 0 0 #2f6fed;
}

/* main.js marks the first card as .clicked; with a job open only the open one is marked */
.jobs-split--open .panel.jobcard.clicked:not(.jobcard--open) {
    background: #fff;
    border-left: 0 !important;
    box-shadow: none;
}

.jobs-split--open .jobboard-ad--promoted .panel.jobcard.clicked:not(.jobcard--open) {
    background: #fffdf5;
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* in half the width the cards stop being a wall of chips */
.jobs-split--open .jobcard__tags .jobcard__tag:nth-of-type(n+4) {
    display: none;
}

/* --- the job card ------------------------------------------------------------ */

.jobdetail__job {
    position: relative;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* the board's sheet: the company above the title */
.jobdetail__company {
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    gap: 10px;
    margin: 0 34px 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #46525f;
}

.jobdetail__company-logo {
    width: 46px;
    height: 36px;
    object-fit: contain;
    border: 1px solid #e6eaf0;
    background: #fff;
}

.jobdetail__about {
    font-size: 14px;
    line-height: 1.55;
    color: #46525f;
    margin: 0 0 8px;
}

.jobdetail__title {
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.2px;
    color: #101418;
    margin: 0 34px 10px 0;
    padding: 0;
}

.jobdetail__close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    color: #b6bfcc;
    text-decoration: none;
    padding: 2px 4px;
}

.jobdetail__close:hover,
.jobdetail__close:focus {
    color: #5f6b7a;
    text-decoration: none;
}

.jobdetail__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 24px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #46525f;
}

.jobdetail__facts .fa {
    color: #aab4c0;
    font-size: 12px;
    margin-right: 5px;
}

.jobdetail__pay {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 12px 0 0;
}

.jobdetail__salary {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #047857;
}

.jobdetail__salary small {
    margin-left: 7px;
    font-size: 12.5px;
    font-weight: 400;
    color: #6b7280;
}

.jobdetail__fresh {
    color: #6b7684;
}

.jobdetail__fresh--new {
    padding: 1px 8px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 600;
}

.jobdetail__alert {
    margin: 12px 0 0;
    font-size: 13px;
}

.jobdetail__alert a {
    color: #2f6fed;
    text-decoration: none;
}

/* one of the two is shown: the offer, or the state of an offer already accepted */
.jobdetail__alert-on {
    display: none;
    color: #1a7f37;
}

.jobdetail__alert-on a {
    margin-left: 8px;
    color: #6b7684;
    text-decoration: underline;
}

.jobdetail__alert.is-following .jobdetail__alert-ask {
    display: none;
}

.jobdetail__alert.is-following .jobdetail__alert-on {
    display: inline;
}

.jobdetail__alert a:hover,
.jobdetail__alert a:focus {
    color: #2559c9;
    text-decoration: underline;
}

/* the offer as a bar fixed at the foot of the window: the list can be shorter than the panel */
.job-alert-popover--fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    /* above a fixed bottom navbar (1030), below the modal (1040) */
    z-index: 1035;
    width: 680px;
    max-width: calc(100% - 24px);
    margin: 0;
}

@media (max-width: 768px) {
    .job-alert-popover--fixed {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        transform: none;
    }
}

.jobdetail__demand {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #b5751c;
}

.jobdetail__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.jobdetail__apply {
    display: inline-block;
    padding: 11px 32px;
    background: #22c55e;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.jobdetail__apply:hover,
.jobdetail__apply:focus {
    background: #16a34a;
    color: #fff;
    text-decoration: none;
}

.jobdetail__cta-note {
    font-size: 12px;
    color: #98a2b3;
    max-width: 280px;
    line-height: 1.55;
}

.jobdetail__clicks {
    color: #46525f;
    font-weight: 600;
}

.jobdetail__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #eef1f5;
}

.jobdetail__tags a {
    display: inline-block;
    padding: 3px 10px;
    background: #eff4ff;
    color: #2f6fed;
    font-size: 12px;
    text-decoration: none;
}

.jobdetail__tags a:hover {
    background: #e0eaff;
}

/* the heading takes focus on swap; it is not a control */
.jobdetail__title:focus,
.jobdetail__title:focus-visible {
    outline: none;
}

/* --- the lines that say where a number comes from --------------------------- */

.jobdetail__note {
    margin: -6px 0 12px;
}

.jobdetail__source {
    margin: 10px 0 0;
    line-height: 1.6;
}

/* --- similar jobs ----------------------------------------------------------- */

/* a row is a grid, not a line of flex items: the company used to sit wherever the
   title ended, so no two rows lined up, and a long name ate the title's width */
.jobdetail__similar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.jobdetail__similar-criteria {
    margin: 2px 0 8px;
    font-size: 12.5px;
    color: #98a2b3;
}

.jobdetail__similar-all {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #2f6fed;
    white-space: nowrap;
}

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

.jobdetail__similar li + li {
    border-top: 1px solid #f2f4f7;
}

.jobdetail__similar-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 11px 8px;
    margin: 0 -8px;
    color: inherit;
    text-decoration: none;
}

.jobdetail__similar-row:hover,
.jobdetail__similar-row:focus {
    background: #f7f9fc;
    text-decoration: none;
}

.jobdetail__similar-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px !important;
}

.jobdetail__similar-title {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* the name is what gets cut, so the badge beside it survives a long title */
.jobdetail__similar-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: #2f6fed;
}

.jobdetail__similar-row:hover .jobdetail__similar-name {
    text-decoration: underline;
}

.jobdetail__similar-new {
    flex: 0 0 auto;
    padding: 1px 7px;
    background: #e7f7ee;
    color: #1a7f4b;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.jobdetail__similar-meta {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: #6b7684;
}

.jobdetail__similar-meta b {
    font-weight: 600;
    color: #2f3742;
}

/* the separator belongs to the value after it, so a wrap never leaves it hanging
   at the end of a line */
.jobdetail__similar-meta span:before {
    content: '·';
    /* a margin, not a space: a space inside the dot lets the line break after it */
    margin-right: 5px;
    color: #c4ccd6;
}

/* their own column, so the numbers read down the list */
.jobdetail__similar-salary,
.jobdetail__similar-age {
    grid-column: 3;
    padding-left: 12px;
    text-align: right;
    white-space: nowrap;
}

.jobdetail__similar-salary {
    grid-row: 1;
    font-size: 13px;
    font-weight: 700;
    color: #047857;
}

.jobdetail__similar-age {
    grid-row: 2;
    margin-top: 3px;
    font-size: 12px;
    color: #98a2b3;
}

/* --- the salary scale of the review panel (salary_benchmark.css) -------------
   the radii need !important because of the global * { border-radius: 5px !important } */

.jobpay {
    margin-top: 4px;
}

.jobpay__headline {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #2F3742;
}

.jobpay__chips {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.jobpay__chips span {
    margin: 0 6px 6px 0;
    padding: 4px 10px;
    border-radius: 6px !important;
    background: #EDEFF2;
    font-size: 12px;
    color: #4B5563;
}

.jobpay__chips .jobpay__chips-label {
    padding: 4px 0;
    background: none;
    color: #6B7280;
}

/* top margin clears the bubble, side padding keeps it centred at the ends */
.jobpay__scale {
    margin: 46px 0 6px;
    padding: 0 48px;
}

.jobpay__track {
    position: relative;
    display: flex;
    height: 8px;
}

.jobpay__segment {
    flex: 1 1 0;
    border-radius: 0 !important;
    background: #F09595;
}

.jobpay__segment + .jobpay__segment {
    margin-left: 4px;
}

.jobpay__segment--below {
    border-radius: 999px 0 0 999px !important;
}

.jobpay__segment--typical {
    flex-grow: 2;
    background: #B9D9C2;
}

.jobpay__segment--above {
    border-radius: 0 999px 999px 0 !important;
    background: #97C459;
}

.jobpay__tick {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: #4B5563;
}

.jobpay__marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: #2C2C2A;
    border: 2px solid #fff;
    border-radius: 50% !important;
}

.jobpay__bubble {
    position: absolute;
    bottom: 18px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 2px 8px;
    background: #2C2C2A;
    border-radius: 4px !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #F1EFE8;
    white-space: nowrap;
}

.jobpay__axis {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin-top: 8px;
    font-size: 12px;
    color: #6B7280;
}

.jobpay__axis > span:last-child {
    text-align: right;
}

.jobpay__axis-median {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
}

.jobpay__axis-median > span {
    font-size: 13px;
    color: #2F3742;
}

@media (max-width: 767px) {
    .jobpay__scale {
        padding: 0 28px;
    }

    .jobpay__bubble {
        padding: 2px 6px;
        font-size: 11px;
    }

    .jobpay__axis {
        grid-template-columns: 1fr 1fr;
    }

    .jobpay__axis-median {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 6px;
        padding: 0;
    }
}

.jobs-split__detail.is-loading {
    opacity: 0.45;
    transition: opacity 0.12s linear;
}

/* the board's own spinner, over the panel it is replacing */
.jobs-split__loading {
    display: none;
}

.jobs-split.is-loading .jobs-split__loading {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 59%;
    z-index: 2;
}

.jobs-split__loading img {
    position: sticky;
    top: 40vh;
    display: block;
    margin: 0 auto;
}

/* --- the ad closed ---------------------------------------------------------- */

.jobgone__panel {
    background: #fff;
    border: 1px solid #e6eaf0;
    padding: 34px 28px;
    margin-bottom: 14px;
    text-align: center;
}

.jobgone__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #101418;
}

.jobgone__h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #101418;
    text-align: left;
}

.jobgone__text {
    color: #5f6b7a;
    margin: 0 0 20px;
}

.jobgone__cta {
    display: inline-block;
    padding: 10px 28px;
    background: #2f6fed;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.jobgone__cta:hover,
.jobgone__cta:focus {
    background: #2559c9;
    color: #fff;
    text-decoration: none;
}

.jobgone__link {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    color: #2f6fed;
}

.jobgone__panel .jobdetail__similar {
    text-align: left;
}

/* the card title opens the job in the panel */
.jobs-split .jobcard__title-link {
    cursor: pointer;
}

/* --- one column, and the job first ------------------------------------------ */

.jobs-split__more {
    display: none;
}

@media (max-width: 768px) {
    /* the other jobs behind a tap */
    .jobs-split--job .jobs-split__list {
        display: none;
    }

    .jobs-split--job.is-showing-list .jobs-split__list {
        display: block;
        order: 1;
    }

    .jobs-split__more {
        display: block;
        order: 0;
        width: 100%;
        margin: 0 0 16px;
        padding: 13px 16px;
        border: 1px solid #d5dce2;
        background: #fff;
        color: #2f6fed;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

    .jobs-split__more:hover,
    .jobs-split__more:focus {
        background: #f4f8ff;
        border-color: #2f6fed;
    }

    /* room for the fixed alert bar */
    body.has-alert-bar {
        padding-bottom: 104px;
    }

    /* lined up with the bar above it */
    .jobs-split--open .jobs-split__detail {
        margin-left: 15px;
        margin-right: 15px;
    }

    .jobdetail__alert-on a {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    /* the meta line needs the width more than the age does, and the whole row is
       the width of the screen here, so it can be tighter */
    .jobdetail__similar-age {
        display: none;
    }

    .jobdetail__similar-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        column-gap: 10px;
        padding: 9px 8px;
    }

    .jobdetail__similar-logo {
        width: 34px;
        height: 34px;
        border-radius: 8px !important;
    }

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

    /* where the job is and how it is worked are the reasons to tap it: they wrap
       onto another line instead of being cut */
    /* where the job is and how it is worked are the reasons to tap it: they wrap
       onto another line instead of being cut */
    .jobdetail__similar-meta {
        margin-top: 1px;
        font-size: 12px;
        overflow: visible;
        white-space: normal;
    }

    .jobdetail__similar-salary {
        font-size: 12.5px;
    }
}

@media (max-width: 1199px) {
    /* stacked, the tab's default job stays hidden until one is opened */
    .jobs-split--open:not(.jobs-split--job):not(.jobs-split--opened) .jobs-split__detail {
        display: none;
    }

    /* and nothing is marked in the list: the default is not an open job, and main.js's
       .clicked on the first card would read as one */
    .jobs-split:not(.jobs-split--job):not(.jobs-split--opened) .jobcard--open,
    .jobs-split:not(.jobs-split--job):not(.jobs-split--opened) .jobboard-ad .panel.jobcard.clicked {
        background: #fff;
        box-shadow: none;
    }

    .jobs-split:not(.jobs-split--job):not(.jobs-split--opened) .jobboard-ad--promoted .jobcard--open,
    .jobs-split:not(.jobs-split--job):not(.jobs-split--opened) .jobboard-ad--promoted .panel.jobcard.clicked {
        background: #fffdf5;
        box-shadow: inset 3px 0 0 #f59e0b;
    }

    .jobs-split:not(.jobs-split--job):not(.jobs-split--opened) .jobboard-ad .panel.jobcard.clicked .jobcard__tag {
        background: #e1ecf4a6 !important;
    }

    .jobs-split:not(.jobs-split--job):not(.jobs-split--opened) .jobboard-ad .panel.jobcard.clicked .jobcard__apply-btn {
        color: #15803d;
        background: transparent;
        border-color: #86d3a4;
    }

    /* stacked, the job first */
    .jobs-split {
        display: flex;
        flex-direction: column;
    }

    .jobs-split--open .jobs-split__detail {
        order: -1;
    }

    /* a flex item's min-width is its content: a title that never wraps grew the page past the phone */
    .jobs-split--open .jobs-split__list,
    .jobs-split--open .jobs-split__detail {
        max-width: none;
        width: auto;
        min-width: 0;
    }

    .jobs-split--open .jobs-split__detail,
    .jobs-split--open .jobs-split__detail.is-stuck {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 16px;
    }

    .jobs-split--open .jobcard__tags .jobcard__tag:nth-of-type(n+4) {
        display: inline-block;
    }

    .jobdetail__title {
        font-size: 19px;
    }

    .jobdetail__apply {
        flex: 1 1 100%;
        text-align: center;
    }

    .jobdetail__cta-note {
        max-width: none;
    }

    /* opened from the list the panel is a full screen sheet; Back closes it */
    .jobs-split--open .jobs-split__detail.is-sheet {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* above the scrim (1036) and the fixed alert bar (1035), below the modals (1040) */
        z-index: 1037;
        margin: 0;
        border: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
    }

    body.has-job-sheet {
        overflow: hidden;
    }

    /* the tapped card dims while its panel is on the way */
    .jobboard-ad.is-loading .jobcard {
        opacity: .55;
        transition: opacity .15s linear;
    }

    /* a scrim behind the sheet, so the list reads as left behind */
    body.has-job-sheet:before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1036;
        background: rgba(16, 20, 24, .45);
        animation: jobsheet-escurece .3s ease-out;
    }

    body.has-job-sheet.sheet-closing:before {
        animation: jobsheet-clareia .22s ease-in forwards;
    }

    /* up on open with the panel already in it, down on close; job_detail.js waits for
       the way down before it restores the page */
    @keyframes jobsheet-sobe {
        from { transform: translateY(100%); }
        to { transform: none; }
    }

    @keyframes jobsheet-desce {
        from { transform: none; }
        to { transform: translateY(100%); }
    }

    @keyframes jobsheet-escurece {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes jobsheet-clareia {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    .jobs-split--open .jobs-split__detail.is-sheet {
        animation: jobsheet-sobe .3s cubic-bezier(.2, .8, .2, 1);
    }

    .jobs-split--open .jobs-split__detail.is-sheet.is-closing {
        animation: jobsheet-desce .22s ease-in forwards;
    }

    /* the cross is drawn, not typed: where the ink of a glyph sits in its line box is
       the font's business, and it came out below the middle of the circle */
    .is-sheet .jobdetail__close {
        position: fixed;
        top: 10px;
        right: 12px;
        z-index: 1;
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 0;
        background: #fff;
        border: 1px solid #e6eaf0;
        border-radius: 50% !important;
    }

    .is-sheet .jobdetail__close:before,
    .is-sheet .jobdetail__close:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        margin: -1px 0 0 -7px;
        background: currentColor;
    }

    .is-sheet .jobdetail__close:before {
        transform: rotate(45deg);
    }

    .is-sheet .jobdetail__close:after {
        transform: rotate(-45deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .jobs-split--open .jobs-split__detail.is-sheet,
        .jobs-split--open .jobs-split__detail.is-sheet.is-closing,
        body.has-job-sheet:before,
        body.has-job-sheet.sheet-closing:before {
            animation: none;
        }
    }
}

@media (min-width: 1200px) {
    /* side by side the panel has the button */
    .jobs-split--open .jobcard--open .jobcard__apply-btn {
        display: none !important;
    }
}