/* 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;
}

.auth-password {
    position: relative;
}

.auth-password .form-control {
    padding-right: 40px;
}

.auth-password input::-ms-reveal {
    display: none;
}

.auth-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #888;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus {
    color: #333;
}
/* company tier pill (issue-1648); colours from the sr-chip variants of salary_role.css */
.company-tier { display: inline-flex; align-items: center; align-self: center; gap: 6px; margin-top: 8px; padding: 2px 10px; border-radius: 999px !important; background: #4B5563; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; cursor: pointer; }
.company-tier:hover, .company-tier:focus { color: #fff; text-decoration: none; opacity: .9; }
.company-tier .fa { font-size: 13px; opacity: .9; }
.company-tier--2 { background: #1A64A6; }
.company-tier--3 { background: #1B7A47; }
.ct-pop .ct-rule, .ct-card .ct-rule { display: block; margin: 4px 0 10px; }
.ct-pop .ct-mkrow, .ct-card .ct-mkrow { display: block; position: relative; height: 16px; }
.ct-pop .ct-mklab, .ct-card .ct-mklab { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 11px; font-weight: 700; line-height: 14px; color: #111827; white-space: nowrap; }
.ct-pop .ct-mklab--l, .ct-card .ct-mklab--l { left: 0 !important; transform: none; }
.ct-pop .ct-mklab--r, .ct-card .ct-mklab--r { left: auto !important; right: 0; transform: none; }
.ct-pop .ct-bar, .ct-card .ct-bar { position: relative; display: flex; height: 10px; }
.ct-pop .ct-seg, .ct-card .ct-seg { flex: 1 1 0; display: block; margin: 0; padding: 0; opacity: .45; background: #D1D5DB; color: #4B5563; }
.ct-pop .ct-seg--2, .ct-card .ct-seg--2 { background: #9DC1E4; color: #1A64A6; }
.ct-pop .ct-seg--3, .ct-card .ct-seg--3 { background: #9ED3B1; color: #1B6B3F; }
.ct-pop .ct-seg--on, .ct-card .ct-seg--on { opacity: 1; }
.ct-pop .ct-seg--2, .ct-card .ct-seg--2 { border-radius: 0 !important; }
.ct-pop .ct-seg:first-child { border-radius: 5px 0 0 5px !important; }
.ct-pop .ct-seg:nth-child(3) { border-radius: 0 5px 5px 0 !important; }
.ct-pop .ct-mk, .ct-card .ct-mk { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #111827; }
.ct-pop .ct-ticks, .ct-card .ct-ticks { display: block; position: relative; height: 14px; margin-top: 3px; }
.ct-pop .ct-ticks span, .ct-card .ct-ticks span { position: absolute; top: 0; font-size: 10.5px; line-height: 14px; color: #6B7280; }
.ct-pop .ct-ticks span, .ct-card .ct-ticks span { transform: translateX(-50%); }
.ct-pop .ct-ticks span:first-child, .ct-pop .ct-ticks span:nth-child(4) { transform: none; }
.ct-card .ct-ticks span:first-child, .ct-card .ct-ticks span:nth-child(4) { transform: none; }
.ct-pop .ct-names, .ct-card .ct-names { margin-top: 0; }
.ct-pop .ct-ticks .ct-tn, .ct-card .ct-ticks .ct-tn { color: #6B7280; }
.ct-pop .ct-ticks .ct-tn--on, .ct-card .ct-ticks .ct-tn--on { font-weight: 700; color: #111827; }
.ct-pop .ct-cap, .ct-card .ct-cap { display: block; margin-top: 3px; font-size: 10.5px; line-height: 14px; color: #6B7280; text-align: center; }
.ct-pop p { margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
.ct-pop p.ct-source { margin: 0; color: #6B7280; }
@media (min-width: 768px) { .company-tier { margin-left: 8px; } }
/* salaries tab card */
.ct-card { min-height: 0; padding: 26px 34px 24px; display: block; }
.ct-card h3 { margin: 0 0 6px; text-align: left; font-size: 19px; font-weight: 600; line-height: 1.3; color: #333; }
.ct-card .ct-sub { margin-bottom: 14px; }
.ct-card .ct-sub p { margin: 0 0 4px; font-size: 13px; line-height: 1.4; color: #6B7280; }
.ct-card .ct-rule { margin: 18px 0 0; }
.ct-card .ct-mkrow { height: 26px; }
.ct-card .ct-mklab { bottom: 6px; font-size: 14px; line-height: 18px; }
.ct-card .ct-bar { height: 14px; }
.ct-card .ct-seg:first-child { border-radius: 7px 0 0 7px !important; }
.ct-card .ct-seg:nth-child(3) { border-radius: 0 7px 7px 0 !important; }
.ct-card .ct-mk { width: 3px; margin-left: -1.5px; top: -4px; bottom: -4px; border-radius: 2px !important; }
.ct-card .ct-ticks { height: 16px; margin-top: 4px; }
.ct-card .ct-names { margin-top: 0; }
.ct-card .ct-ticks span { font-size: 12px; line-height: 16px; }
.ct-card .ct-ticks .ct-tn--on { color: #1A64A6; }
.ct-card .ct-cap { margin-top: 4px; font-size: 12px; line-height: 16px; text-align: left; }
.ct-card .ct-defs { display: flex; gap: 10px; margin-top: 18px; }
.ct-card .ct-def { flex: 1; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 8px !important; font-size: 12.5px; line-height: 17px; color: #6B7280; }
.ct-card .ct-def b { display: block; margin-bottom: 2px; color: #374151; }
.ct-card .ct-def--on { border-color: #1A64A6; background: #F5F9FD; color: #111827; }
.ct-card .ct-def--on b { color: #1A64A6; }
.ct-card .ct-foot { margin-top: 14px; font-size: 12px; color: #6B7280; }
@media (max-width: 600px) { .ct-card { padding: 16px; } .ct-card .ct-defs { flex-direction: column; } }
/* tier popover */
.ct-popover { max-width: 300px; }
.ct-popover .popover-content { padding: 14px 16px 12px; }
.popover-content .ct-pop { display: block; background: none; padding: 0; margin: 0; }
.ct-pop .ct-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; }
.ct-pop .ct-kick { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #6B7280; }
.ct-pop .ct-big { font-size: 20px; line-height: 24px; font-weight: 700; color: #4B5563; }
.ct-pop .ct-big--2 { color: #1A64A6; }
.ct-pop .ct-big--3 { color: #1B6B3F; }
.ct-pop .ct-note { font-size: 11.5px; line-height: 1.45; color: #4B5563; }
.ct-pop .ct-list { margin: 4px 0 10px; padding: 8px 0 0; list-style: none; border-top: 1px solid #E5E7EB; }
.ct-pop .ct-list li { display: flex; gap: 8px; margin: 0; padding: 4px 6px; border-radius: 4px !important; font-size: 12px; line-height: 1.35; color: #6B7280; }
.ct-pop .ct-list li strong { flex: none; width: 44px; font-weight: 600; }
.ct-pop .ct-list li.ct-on { background: #F5F9FD; color: #111827; }
.ct-pop .ct-list li.ct-on strong { color: #1A64A6; font-weight: 700; }
.ct-pop .ct-link { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; }
.ct-pop p.ct-source { font-size: 11px; }
/* 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;
}

/* side by side a sketch of a job stands in for the panel (skeleton.css); a beat
   late, so a job already prefetched just swaps */
.jobs-split__loading {
    display: none;
}

.jobs-split.is-loading .jobs-split__loading {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(59% - 16px);
    z-index: 2;
    animation: jobs-split-wait 0s .15s both;
}

.jobs-split.is-loading .jobs-split__detail {
    opacity: 0;
    transition: opacity 0s .15s;
}

@keyframes jobs-split-wait {
    from { visibility: hidden; }
}

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

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

/* inside the company jobs tab the detail column already draws the box */
.jobs-split__detail .jobgone__panel {
    border: 0;
    margin-bottom: 0;
}

.jobs-split__detail .jobgone__panel + .jobgone__panel {
    border-top: 1px solid #e6eaf0;
}

.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;
    }
}
/* grey sketches of a panel while the real one is on the way (issue-3318):
   the board's company panel and the open job on the company's jobs tab */

.skel {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef1f5 30%, #f7f9fb 50%, #eef1f5 70%) #eef1f5;
    background-size: 300% 100%;
    animation: skel-shimmer 1.4s linear infinite;
}

@keyframes skel-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skel {
        animation: none;
    }
}

.skel--title {
    height: 16px;
    width: 45%;
}

.skel--short {
    width: 30%;
}

.skel--half {
    width: 70%;
}

/* --- the board: the company panel, same cards and heights as the real one --- */

/* main.css centres a gif in a white flex row */
.jobboard-company-loading.active {
    display: block;
    padding: 0;
    background: none;
}

.skel-card {
    min-height: 116px;
    margin: 0 3px 16px;
    padding: 12px 15px 25px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    align-content: start;
}

.skel-card > .skel--title {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.skel-card--company {
    min-height: 137px;
    padding-top: 14px;
    grid-template-columns: 60px 1fr 54px;
    gap: 10px 8px;
}

.skel-card--company > .skel:first-child {
    height: 43px;
    grid-row: span 2;
}

.skel-card--company > .skel--title {
    grid-column: auto;
    width: 60%;
    margin: 4px 0 0;
}

.skel-card--company > .skel:last-child {
    height: 29px;
    grid-column: 3;
    grid-row: 1 / span 2;
}

/* --- the jobs tab: the open job --- */

.skel-job {
    position: sticky;
    top: 76px;
    padding: 19px 21px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 5px;
}

.skel-job > * + * {
    margin-top: 16px;
}

.skel-job > .skel--title {
    height: 24px;
    width: 65%;
}

.skel-job__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.skel-job__row > .skel {
    flex: 0 0 90px;
}

.skel-job__row > .skel--button {
    flex-basis: 127px;
    height: 42px;
}

.skel-job__row > .skel--tag {
    flex-basis: 64px;
    height: 24px;
    border-radius: 12px;
}

.skel-job__row > .skel--half {
    flex-basis: 220px;
}

.skel-job__body {
    margin: 22px -21px 0;
    display: block;
    padding: 22px 21px 4px;
    border-top: 1px solid #eef1f5;
}

.skel-job__body > .skel + .skel {
    margin-top: 12px;
}

.skel-job__body > .skel:nth-child(even) {
    width: 92%;
}

.skel-job__body > .skel:last-child {
    width: 55%;
}