@import '_content/Kropman.KropModal/Kropman.KropModal.pj3c2xwwup.bundle.scp.css';

/* /ComponentsRedesign/Pages/Landingspage.razor.rz.scp.css */
/* 
    body, div, p:
    Overrules the font-family from KropmanBootstrap & KropmanFlavour 
    Will be moved/changed to the appRedesign.css when the redesign goes to production.
*/
body[b-p97eepmkuc], div[b-p97eepmkuc], p[b-p97eepmkuc] {
    font-family: 'outfit' !important;
}

.img-container[b-p97eepmkuc] {
    position: relative;
    width: 100%;
    height: 979px;
}

.imgTopRow[b-p97eepmkuc] {
    position: absolute;
    top: 30px;
    left: 99px;
    width: 90vw;
    height: 10vh;
    display: grid;
    grid-template-columns: 37px 200px 390px 68px 76px 136px 70px 136px 70px 136px 70px 300px 21px;
    align-items: center;
    background: var(--black);
    color: var(--green);
    font: normal normal 900 22px/50px Outfit;
}

.imgCentered[b-p97eepmkuc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
    align-items: center;
    font: normal normal 900 50px/60px Outfit;
}

.imgBottom[b-p97eepmkuc] {
    position: absolute;
    top: 929px;
    left: 99px;
    width: 90vw;
    height: 120px;
    display: flex;
    align-items: center;
    font: normal normal 900 22px/50px Outfit;
}

.searchBar[b-p97eepmkuc] {
    display: grid;
    grid-template-columns: 188px 661px 23px 661px 27px 160px;
}

.vacancyPrioBox[b-p97eepmkuc] {
    display: grid;
    grid-template-columns: 99px 487px 178px 1060px 75px;
    background: var(--green);
    color: var(--black);
    width: 100%;
    height: 1732px;
}

    .vacancyPrioBox .info[b-p97eepmkuc] {
        position: relative;
        top: 183px;
        font: normal normal 900 50px/60px Outfit;
        max-height: max-content;
    }

    .vacancyPrioBox .description[b-p97eepmkuc] {
        margin-top: 20px;
        font: normal normal 600 22px/39px Outfit;
    }

    .vacancyPrioBox .vacancies[b-p97eepmkuc] {
        position: relative;
        top: 183px;
        max-height: max-content;
    }
        .vacancyPrioBox .vacancies .vacancy[b-p97eepmkuc] {
            display: grid;
            grid-template-columns: 212px 40px 740px;
            grid-auto-rows: minmax(50px, auto);
            margin-bottom: 14px;
        }

        .vacancyPrioBox .vacancies .vacancy .vacancyImage[b-p97eepmkuc] {
            width: 212px;
            height: 212px;
        }

            .vacancyPrioBox .vacancies .vacancy .vacancyTitle[b-p97eepmkuc] {
                font: normal normal 900 40px/41px Outfit;
            }

            .vacancyPrioBox .vacancies .vacancy .vacancyInfo[b-p97eepmkuc] {
                font: normal normal 900 18px/21px Outfit;
            }

        .vacancyPrioBox .vacancies .vacancyButtonContainer[b-p97eepmkuc] {
            position: relative;
            top: 72px;
            max-height: max-content;
            text-align: center;
        }

            .vacancyPrioBox .vacancies .vacancyButtonContainer .vacancyButton[b-p97eepmkuc] {
                font: normal normal 800 20px/48px Outfit;
            }

.countryBox[b-p97eepmkuc] {
    width: 100%;
    height: 1000px;
    display: flex;
    font: normal normal 900 22px/21px Outfit;
}

    .countryBox .imageBox[b-p97eepmkuc] {
        position: relative;
    }

    .countryBox .image[b-p97eepmkuc] {
        display: relative;
        margin-left: 175px;
        margin-top: 100px;
        width: 700px;
        height: 800px;
    }

    .countryBox .city[b-p97eepmkuc] {
        color: var(--green);
        background-color: var(--black);
        text-align: center;
        align-items: center;
        font: normal normal 600 22px/21px Outfit;
    }

    .countryBox .assen[b-p97eepmkuc] {
        position: absolute;
        top: 30%;
        left: 80%;
    }

    .countryBox .nijmegen[b-p97eepmkuc] {
        position: absolute;
        top: 50%;
        left: 70%;        
    }

    .countryBox .title[b-p97eepmkuc] {
        text-align: center;
        align-content: center;
        font: normal normal 900 60px/72px Outfit;
    }

.recruiterBox[b-p97eepmkuc] {
    width: 100%;
    height: 1235px;
}

.recruiterBoxTitle[b-p97eepmkuc] {
    font: normal normal 800 65px/64px Outfit;
    padding-top: 83px;
    margin-left: 245px;
    margin-bottom: 69px;
}

.recruiterRow[b-p97eepmkuc] {
    display: grid;
    grid-template-columns: 245px 415px 85px 415px 85px 415px 245px;
}

.recruiterPhoto[b-p97eepmkuc] {
    height: 415px;
    width: 415px;
}

.recruiterInfo[b-p97eepmkuc] {
    position: relative;
    height: 344px;
    width: 415px;
}

.recruiterTopInfo[b-p97eepmkuc] {
    position: absolute;
    top: 42px;
    left: 36px;
}

.recruiterName[b-p97eepmkuc] {
    font: normal normal 800 44px/40px Outfit;
}

.recruiterTitle[b-p97eepmkuc] {
    font: normal normal 800 18px/40px Outfit;
}

.recruiterBottomInfo[b-p97eepmkuc] {
    position: absolute;
    left: 36px;
    bottom: 36px;
    font: normal normal normal 18px/40px Outfit;
}

.footerContainer[b-p97eepmkuc] {
    position: relative;
    height: 780px;
}

.footerTopBar[b-p97eepmkuc] {
    position: relative;
    top: -76px;
    left: 99px;
    width: 1720px;
    height: 152px;
    align-content: center;
    display: grid;
    grid-template-columns: 47px 495px 57px 396px 21px 415px 21px 218px;
}
    .footerTopBar .bigText[b-p97eepmkuc] {
        font: normal normal 900 40px/41px Outfit;
    }

    .footerTopBar .normalText[b-p97eepmkuc]{
        font: normal normal 800 20px/48px Outfit;
    }

    .footerTopBar .centered[b-p97eepmkuc] {
        text-align: center;
    }

.footer[b-p97eepmkuc] {
    width: 100%;
    display: grid;
    grid-template-columns: 100px 1116px 154px;
    font: normal normal 900 22px/74px Outfit;
}

.footerVacancyGrid[b-p97eepmkuc] {
    display: grid;
    grid-template-columns: 558px 558px;
    grid-auto-rows: 100px;
}

.footerNavigations[b-p97eepmkuc] {
    display: grid;
    grid-auto-rows: 100px;
}

.footerDisclaimer[b-p97eepmkuc] {
    display: grid;
    grid-template-columns: 100px 1116px 400px;
    font: normal normal normal 20px/30px Outfit;
}

.footerEndText[b-p97eepmkuc] {
    margin-right: 5px;
}

/* Utility */
.inlineBlock[b-p97eepmkuc] {
    display: inline-block;
    padding: 5px;
}

.centered[b-p97eepmkuc] {
    align-items: center;
}

.leftText[b-p97eepmkuc] {
    text-align: left;
}

.leftOffset[b-p97eepmkuc] {
    margin: 0px 0px 0px 3vw;
}

.rightOffset[b-p97eepmkuc] {
    margin: 0px 3vw 0px 0px;
}

/* Backgrounds */
.blackBackground[b-p97eepmkuc] {
    background: var(--black);
}

.greenBackground[b-p97eepmkuc] {
    background: var(--green);
}

.whiteBackground[b-p97eepmkuc] {
    background: var(--white);
}

.greyBackground[b-p97eepmkuc] {
    background: var(--grey);
}

/* Text */
.greenText[b-p97eepmkuc] {
    color: var(--green);
}

.blackText[b-p97eepmkuc] {
    color: var(--black);
}

.whiteText[b-p97eepmkuc] {
    color: var(--white);
}

.darkGreyText[b-p97eepmkuc] {
    color: var(--darkGrey);
}

/* Borders */
.greenBorder[b-p97eepmkuc] {
    padding: 0px 1vw;
    border: var(--green) solid 2px;
}

.blackBorder[b-p97eepmkuc] {
    padding: 0px 1vw;
    border: var(--black) solid 2px;
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-mostipcigq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-mostipcigq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }