/*Common*/
html, body {
    font-size: var(--font-size);
    background-color: var(--background-color);
    font-family: var(--font-family), sans-serif;
    color: var(--text-color);
}

a,
a:hover,
a:focus,
a:visited {
    color: var(--link-color);
}

.k-link {
    color: unset;
}

h1, .h1 {
    font-size: 3rem;
    font-weight: 600;
}

h2, .h2 {
    font-size: 2.4rem;
}

h3, .h3 {
    font-size: 1.8rem;
}

h4, .h4  {
    font-size: 1.5rem;
}

@media(max-width: 768px){
    html, body{
        font-size: calc(var(--font-size) * 0.85);
    }
}

/*Header*/

.re-header {
    background-color: var(--header-background-color);
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    min-height: unset;
    border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}

    .re-header a {
        color: var(--header-link-color);
        font-size: 1.3rem;
    }

        .re-header a:hover,
        .re-header a:focus {
            text-decoration: none;
        }

.re-header .logo {
    max-height: 100px;
    max-width: 300px;
}

.navbar-brand {
    height: auto;
    padding: 15px 15px;
}

.re-header .desktop-nav {
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    list-style: none;
    gap: 5rem;
}

.navbar-default .navbar-nav > li > a {
    color: var(--header-link-color);
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: var(--header-background-color);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--header-link-color);
}

.nav .username {
    color: var(--header-link-color)!important;
}

.navbar-toggle i.fa-times {
    color: var(--header-link-color);
    width: 22px;
    height: 14px;
    transform: scale(1.3);
}

.navbar-toggle.collapsed i.fa-times{
    display: none;
}

.navbar-toggle:not(.collapsed) i.fa-times {
    display: block;
}

.navbar-toggle:not(.collapsed) .icon-bar {
    display: none;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: var(--header-link-color);
}

.navbar-default .navbar-toggle {
    border-color: var(--header-link-color);
}

@media(max-width: 991px) {
    .navbar-header:before, .navbar-header:after {
        content: none;
    }
    .navbar-header {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
}

@media(max-width: 450px){
    .re-header .logo {
        max-width: 200px;
    }
}

@media(max-width: 350px) {
    .re-header .logo {
        max-width: 150px;
    }
}

/*Banner*/

.banner-container img {
    width: 100%;
    max-height: 700px;
    object-fit: cover;
}

.banner-container h1,
.banner-container h4 {
    text-align: center;
    color: #333;
}

    .banner-container h1{
        font-size: 3.2rem;
        margin-top: 3rem;
    }

.banner-container h4 {
    margin-bottom: 1.8rem;
}

/*Footer*/

footer {
    height: auto;
    background-color: var(--footer-background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
}

    footer a, footer a:hover, footer a:focus, footer a:visited {
        color: var(--footer-link-color);
        text-decoration: none;
    }

    footer .footer-links-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

        footer .footer-links-container a {
            font-size: 1.3rem;
        }

    footer .social-links-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    footer .phx-copyright {
        font-size: 1rem;
        color: var(--footer-link-color);
        opacity: 0.7;
        margin-bottom: 1.5rem;
        text-align: center;
    }

.fa-c-2x {
    font-size: 2.75em;
}

footer {
    border-top: 1px solid rgba(204, 204, 204, 0.5);
}

/*Buttons*/

.btn.btn-share--back a {
    color: var(--secondary-text-color);
}

.btn.btn-primary,
a.btn.btn-primary{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
}

    .btn.btn-primary:hover,
    a.btn.btn-primary:hover{
        background-color: var(--primary-hover-color);
        border-color: var(--primary-hover-color);
        color: var(--primary-text-color);
    }

.btn.btn-info,
a.btn.btn-info,
.btn-outline-dark,
a.btn-outline-dark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

    .btn.btn-info:hover,
    a.btn.btn-info:hover,
    .btn-outline-dark:hover,
    a.btn-outline-dark:hover {
        background-color: var(--secondary-hover-color);
        border-color: var(--secondary-hover-color);
        color: var(--secondary-text-color);
    }

.btn.btn-danger,
a.btn.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

    .btn.btn-danger:hover,
    a.btn.btn-danger:hover {
        color: #fff;
        background-color: #bb2d3b;
        border-color: #b02a37;
    }

.btn.btn-default,
a.btn.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    .btn.btn-default:hover,
    a.btn.btn-default:hover {
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }

.btn.btn-success,
a.btn.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

    .btn.btn-success:hover,
    a.btn.btn-success:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }   

.topButtons {
    display: none;
}

@media(max-width:991px) {
    .bottomButtons {
        display: none;
    }

    .topButtons {
        display: block;
    }
}

/*Rectangle Side Menu*/

main.body-content aside.sidebar {
    margin-top: 1.5rem;
}

    main.body-content aside.sidebar .searchjob {
        margin-top: 2.2rem;
    }

    main.body-content aside.sidebar .careernav p {
        margin-bottom: 0;
    }

        main.body-content aside.sidebar .careernav p a {
            padding: 0.7rem 0;
            transition: 0.3s all ease;
            color: #333;
            font-size: calc(var(--font-size) * 1.2);
        }

            main.body-content aside.sidebar .careernav p a i {
                color: var(--primary-color);
            }

            main.body-content aside.sidebar .careernav p a:hover {
                padding-left: 0.7rem;
                text-decoration: none;
                background-color: var(--primary-color);
                color: var(--primary-text-color);
            }

            main.body-content aside.sidebar .careernav p a:hover i {
                color: var(--primary-text-color);
            }

            main.body-content aside.sidebar .careernav p a:focus {
                text-decoration: none;
            }

#JobNumberOrTitle {
    width: 100%;
}

/*Tile Side Menu*/
main.site-content .careernav p {
    margin-bottom: 0;
}

main.site-content .careernav p a {
    padding: 0.7rem 0;
    color: #333;
    transition: all ease 0.3s;
}

    main.site-content .careernav p a i {
        color: var(--primary-color);
    }

    main.site-content .careernav p a:hover {
        text-decoration: none;
        color: #333;
        padding-left: 0.7rem;
    }

    main.site-content .careernav p a:focus {
        text-decoration: none;
    }

.auth-button > .btn-menu {
    color: #333;
}

/*General Main Content*/
.social-share a {
    color: var(--primary-color);
}

    .social-share a:hover {
        color: var(--primary-hover-color);
    }

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination > li:not(.active) > a {
    color: var(--primary-color);
}

.thumbnail.vacancy-box.feature-job {
    background-color: var(--feature-job-color);
    border-color: #ccc;
}

.modal-title {
    display: inline-block;
}

.job-ad-side__content > a.btn.btn-primary {
    margin-bottom: 1rem;
}

ul.nav-wizard li.active a,
ul.nav-wizard li.active a:active,
ul.nav-wizard li.active a:visited,
ul.nav-wizard li.active a:focus,
ul.nav-wizard li.active {
    color: var(--primary-color);
    background: var(--feature-job-color);
}

    ul.nav-wizard li.active:after {
        border-left: 16px solid var(--primary-color);
    }

.wkf-panel-forms .form-row a:not(.btn) {
    color: #333;
}

.wkf-panel-forms .form-row.row {
    padding: 7px 5px;
}

#iframe, #pdfViewer {
    margin-bottom: 1rem;
}

.vacancy-box h2,
.vacancy-box h2 a {
    color: var(--job-title-color);
}

@media(max-width: 767px) {
    ul .nav-wizard li.active:after {
        border-left: 8px solid var(--primary-color);
    }
}

/*Rectangle Main Content*/

main.body-content .vacancy-box h2 {
    font-size: 2.2rem;
}

    main.body-content .vacancy-box h2 a {
        color: var(--job-title-color);
    }


/*Dark Background setup*/

.thumbnail.vacancy-box{
    background-color: transparent;
}

.job-ad-body p,
.job-ad-body ul,
.job-ad-body li,
.job-ad-body span {
    background-color: transparent;
    color: var(--text-color);
}

.modal-content,
.panel {
    background-color: var(--background-color);
}

.field-validation-error.text-danger {
    background-color: var(--background-color) !important;
}

.thumbnail .caption,
.banner-container h1, .banner-container h4,
main.body-content aside.sidebar .careernav p a,
.close, .close:hover,
.social-share .share-label {
    color: var(--text-color);
}

.username {
    color: var(--text-color) !important;
}

.btn[class*="btn-share"], [class*="btn-share"].btn-menu {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

.panel-default {
    border-color: var(--primary-color);
}

.panel.wkf-panel-forms .row.form-row {
    color: #333;
}

ul.nav-wizard li:before {
    border-left-color: transparent;
}

.nav.nav-wizard > li > a {
    color: var(--text-color);
}