﻿.admin-body .header__wrapper {
    margin-top: 52px;
}

.viewer {
    background: #e7e7e7;
    border-top: 1px solid #d4d4d4;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
}

.viewer-iframe {
    background: #fff;
    border: 1px solid #d4d4d4;
    overflow: hidden;
    width: 100%;
}

.viewer-content .header__wrapper {
    margin-top: 0 !important;
}

.viewer-content .icon--alternative svg {
    fill: #878CA0;
}

.viewer-content .text--dark-blue {
    color: #0F1941;
}

.text--orange {
    color: #FFC300;
}

/*raw viewer*/
.raw-view {
    margin-bottom: 50px;
}

    .raw-view .text--orange {
        color: #FFC300;
    }

    .raw-view .block__wrapper.intro {
        padding-bottom: 50px;
    }

    .raw-view .block__wrapper + .block__wrapper {
        margin-top: 30px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .raw-view .block__wrapper--stacked {
        padding-bottom: 0;
    }

.raw-view--list-items {
    border-bottom: 1px solid #D7D7D7;
    padding: 5px 0;
}

    .raw-view--list-items .raw-view__item-key {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 250px;
        flex: 0 0 250px;
    }

    .raw-view--list-items .raw-view__item-value {
        f-webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        word-break: break-word;
    }

    .raw-view--list-items p {
        margin-bottom: 0;
    }

        .raw-view--list-items p + p {
            margin-top: 10px;
        }

.level-two .raw-view__item-key, .level-two .text--orange {
    padding-left: 15px;
}

.level-three .raw-view__item-key, .level-three .text--orange {
    padding-left: 30px;
}

.level-four .raw-view__item-key, .level-four .text--orange {
    padding-left: 45px;
}

@media (min-width: 941px) {
    .raw-view--list-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/*job-viewer details*/
.button.active {
    background: #0f1941;
    border-color: #0f1941;
    color: #f7f5f0;
}

/*job details block*/
.job-details .body-copy + .accordion {
    margin-top: 30px;
}

.job-details .block__title, .job-details .body-copy ul {
    margin-bottom: 30px;
}

.return-link {
    display: block;
}

.tooltip--fixed-width .tooltip__content {
    min-width: 150px;
    max-width: 200px;
    width: auto;
}

.tooltip--fixed-position {
    left: 0;
    position: absolute;
    top: -35px;
}

.blog-overview .icon.tooltip__trigger {
    color: #878CA0;
}

/*meta*/
.meta-content__logo {
    margin: 0 auto;
    max-width: 120px;
}

.meta-content__description p + .button {
    margin-top: 30px;
}

.tooltip--meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 5px;
}

.tooltip--link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .tooltip--link a + .tooltip__trigger {
        margin-left: 10px;
    }

/*disabled overlay*/
.disabled-overlay {
    position: relative;
}

    .disabled-overlay:before {
        background: #e74536;
        content: '';
        display: block;
        height: 100%;
        opacity: 0.5;
        position: absolute;
        width: 100%;
        z-index: 1;
    }

.disabled-overlay--warning {
    background: rgba(15, 25, 65, 0.7);
    color: #f7f5f0;
    left: 15px;
    padding: 15px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 15px;
    z-index: 2;
}

    .disabled-overlay--warning h3 {
        font-size: 26px;
        letter-spacing: -1px;
        line-height: 30px;
    }

        .disabled-overlay--warning h3 + span {
            font-size: 16px;
            display: block;
            margin: 10px auto 0;
        }

@media (min-width: 941px) {
    .disabled-overlay--warning {
        left: 30px;
        padding: 30px;
        right: 30px;
        top: 30px;
    }

        .disabled-overlay--warning h3 {
            font-size: 32px;
            line-height: 40px;
        }

            .disabled-overlay--warning h3 + span {
                font-size: 20px;
                margin: 20px auto 0;
            }
}


@media (max-width: 500px) {
    .full-bleed--s {
        margin-left: -25px;
        margin-right: -25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .button-wrapper .button-group, .button-wrapper .button-group .button {
        width: 100%;
    }
}

@media (max-width: 740px) {
    /*job detail button header*/
    .button-wrapper .button-group, .button-wrapper .button {
        width: 100%;
    }
}

@media (max-width: 940px) {
    .full-bleed--m {
        margin-left: -50px;
        margin-right: -50px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .block__header + .block__content.basic-layout {
        margin-top: 0;
    }

    .basic-layout .block + .block, .basic-layout__side + .viewer-wrapper__main {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .basic-layout__main {
        border-radius: 4px;
    }

    .button-wrapper .button {
        flex:inherit;
    }

    .button-wrapper .button-group + .button-group {
        margin-top: 0;
    }
}

@media (min-width: 941px) {
    .basic-layout {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

        .basic-layout .block + .block {
            margin-top: 50px;
        }

    .basic-layout__main {
        margin-right: auto;
        width: calc((33/58) * 100%);
    }

    .basic-layout__side {
        margin-right: auto;
        width: calc((18/58) * 100%);
    }

    /*job details block*/
    .basic-layout .link-list.accordion .link-list__link .icon--inline {
        top: 3px;
    }

    .tooltip--fixed-width .tooltip__content {
        width: 300px;
    }

    /*meta block*/
    .basic-layout .meta-content {
        width: 100%;
    }

    /*body-copy double list*/
    .list-double {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .list-double li {
            width: 50%;
        }

            .list-double li:nth-child(2) {
                margin-top: 0
            }

    /*disabled overlay*/
    .disabled-overlay--warning h3 {
        font-size: 40px;
        letter-spacing: -2px;
        line-height: 40px;
    }

    /*job detail button header*/
    .button-wrapper .button-group .button {
        margin-left: 5px;
        margin-right: 5px;
    }

    .button-group:not(.button-group--reverse-on-l) .button:first-child{
        margin-left: 0;
    }
}

@media (min-width: 1280px) {
    /*job detail button header*/
    .button-wrapper .button-group + .button-group {
        margin-left: 30px;
    }
}


/*filter toggle*/
.filters-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px 0;
}

.filter-container-part {
    -ms-flex-item-align: start;
    align-self: flex-start;
    border: 1px solid #d4d4d4;
    border-radius: 20px;
}

.filter-menu-part {
    border-radius: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 3px;
}

    .filter-menu-part li {
        background-color: #fff;
        border-radius: 15px;
    }

        .filter-menu-part li span {
            cursor: pointer;
            display: block;
            font-size: 16px;
            height: 30px;
            padding: 0 10px;
        }

        .filter-menu-part li:hover span {
            color: rgba(33,87,217,0.7);
            text-decoration: none;
        }

        .filter-menu-part li.selected {
            background-color: #2175d9;
        }

            .filter-menu-part li.selected span {
                color: #fff;
                cursor: default;
            }

        .filter-menu-part li.active {
            background-color: #2175d9;
        }

        .filter-menu-part li span.active {
            color: #fff;
        }

/*read more button*/
.read-more-dots {
    display: block;
    margin-bottom: 10px;
}

/*login portal */
.login-portal .logo-randstad {
    height: auto;
    margin-bottom: 30px;
    width: 240px;
}

    .login-portal .logo-randstad svg {
        fill: #2175D9;
    }

.login-portal .google-login {
    margin-bottom: 30px;
    padding-bottom: 30px;
}

    .login-portal .google-login h1 {
        margin-bottom: 20px;
    }

.login-portal .credentials-login {
    position: relative;
}

    .login-portal .credentials-login input[type="checkbox"] {
        left: 0;
        opacity: 0;
        position: absolute;
    }

    .login-portal .credentials-login .login-label {
        color: #2175D9;
        cursor: pointer;
    }

        .login-portal .credentials-login .login-label:hover {
            opacity: 0.8;
        }

    .login-portal .credentials-login .login-username {
        margin-top: 20px;
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.4s ease;
        -o-transition: max-height 0.4s ease;
        transition: max-height 0.4s ease;
    }

    .login-portal .credentials-login .button {
        margin-top: 30px;
    }

    .login-portal .credentials-login input:checked + .login-username {
        max-height: 600px;
        -webkit-transition: max-height 0.3s ease;
        -o-transition: max-height 0.3s ease;
        transition: max-height 0.3s ease;
    }

/*missing data*/
.missing-data {
    color: #F24747;
}

.icon.fill-brand--orange svg {
    fill: #FFC300;
}

.column-one-tenth {
    width: 10%;
    width: calc(100% / 10);
}
.column-three-tenth {
    width: 30%;
    width: calc((100% / 10) * 3);
}

.vertical-align-middle {
    vertical-align: middle !important;
}
.reset-search-link {
    text-align: right;
    float: right;
}

/* overrides */
.navigation__service .navigation__service-item .icon svg {
    color: rgba(247, 245, 240, 0.5);
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    text-decoration: none;
    fill: rgba(247, 245, 240, 0.5);
}
.navigation__service .navigation__service-item .icon svg:hover {
    fill: #F7F5F0;
}
.bg-brand--off-white .navigation__service .navigation__service-item .icon svg {
    color: currentColor;
    fill: currentColor;
}
    .bg-brand--off-white .navigation__service .navigation__service-item .icon svg:hover {
        fill: #0F1941;
    }
.navigation__service-item {
    cursor: pointer;
}
.navigation__service-my-randstad {
    max-width: none;
}

.popover--s .popover {
    top: 50px;
}
.navigation .popover {
    right: 0px;
}
.popover--s .popover .popover__dialog li a {
    color: #2175d9;
}

/* filter groups */

/* utility classes */
.mt-xs {
    margin-top: 0.5556rem !important;
}

/* misc */
.link {
    text-decoration: underline;
}

link:hover {
    text-decoration: none;
}

/* popover */
.popover--active .popover__dialog {
    overflow: auto;
}

.popover__action {
    flex-wrap: nowrap;
    padding-bottom: 0;
}

    .popover__action .link:link,
    .popover__action .link:visited,
    .popover__action .link:visited {
        color: inherit;
    }

    .popover__action .link:hover {
        text-decoration: none;
    }

    .popover__action .button + a {
        flex-shrink: 1;
        flex-basis: 0;
        flex-grow: 1;
    }

@media (min-width: 941px) {
    .popover__action .button + a {
        margin-left: 20px;
    }
}

.popover__action * + * {
    margin-left: 20px;
}

.popover .form-group {
    margin-top: 20px;
}

/* filters */
.filters {
   top: 0;
}
/* filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    top: 0;
}

.filter-bar__menu {
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 25px;
    align-items: flex-end;
    display: flex;
}

.filter-bar__menu-item {
    position: relative;
}

.filter-bar__menu-item__trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .filter-bar__menu-item__trigger .icon {
        position: static;
        margin-left: 5px;
        margin-top: 2px;
    }

    .filter-bar__menu-item__trigger svg {
        transition: transform 0.3s ease;
    }

    .filter-bar__menu-item__trigger .badge {
        margin-left: 10px;
    }

.filter-bar__menu-item + .filter-bar__menu-item {
    margin-left: 30px;
}

.filter-bar .popover {
    margin-top: 25px;
}

.filter-bar__toggle {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 25px;
    padding: 15px 0;
    display: flex;
    width: 100%;
}

    .filter-bar__toggle .badge {
        margin-left: 10px;
    }

.filter-bar__toggle__trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: auto;
}

    .filter-bar__toggle__trigger .icon {
        margin-right: 15px;
    }

@media (max-width: 940px) {
    .filter-bar__toggle .form-group--dropdown-alternative select {
        direction: rtl;
    }
}

.filter-bar__asterisk {
    font-size: 1.3em;
    letter-spacing: 0;
    line-height: 25px;
    margin-left: auto;
    color: #2175d9;
}

.filter-bar__menu-item__trigger {
    text-transform: inherit !important;
}

    .filter-bar__menu-item__trigger .badge {
        background: #2175d9;
        color: #fff;
    }

.trigger--active .filter-bar__menu-item__trigger svg {
    transform: rotate(180deg);
}