@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@font-face {
    font-family: 'dreaming_in_the_moonlightRg';
    src: url('../fonts/dreaming_in_the_moonlight-webfont.woff2') format('woff2'),
         url('../fonts/dreaming_in_the_moonlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'brittany_signatureregular';
    src: url('../fonts/brittanysignature-webfont.woff2') format('woff2'),
         url('../fonts/brittanysignature-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'shorelines_script_boldregular';
    src: url('../fonts/shorelines_script_bold-webfont.woff2') format('woff2'),
         url('../fonts/shorelines_script_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'certification_from_the_queeRg';
    src: url('../fonts/certification_from_the_queen-webfont.woff2') format('woff2'),
         url('../fonts/certification_from_the_queen-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--staffone-blue);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--staffone-blue);
}
:root
{
    --div-shadow: rgba(0, 0, 0, 0.24) 0px 1px 3px;
    --staffone-blue: #17435C;
    --staffone-light-blue: #ADD8E6;
    --staffone-light-blue-gradient:  linear-gradient(-45deg,#ADD8E6, #2198e2);
    --staffone-blue-gradient:  linear-gradient(0deg,#2b80b0, #092738);
    --staffone-light-green-gradient:  linear-gradient(-45deg, green, lightgreen);
    --staffone-light-orange-gradient:  linear-gradient(-45deg, orange, yellow);
    --staffone-light-red-gradient:  linear-gradient(-45deg, red, pink);
    --staffone-dark-blue: #082637;
    --staffone-grey: #babfc7;
    --staffone-white: #fff;
    --staffone-filter: filter: invert(20%) sepia(81%) saturate(400%) hue-rotate(156deg) brightness(95%) contrast(97%);
    /*--div-background: url('../images/backgrounds/15847326_v960-ning-34.jpg');*/
    /*--div-background: url('../images/backgrounds/gradient.png');*/
    /*--div-background: url('../images/backgrounds/gradient2.png');*/
    /*--div-background: url('../images/backgrounds/gradient3.png');*/

    --div-background: url('../images/backgrounds/abstract-luxury-plain-blur-grey-black-gradient-used-as-background-studio-wall-display-your-products.jpg');
}
body
{
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
}
* {
    font-family: 'Open Sans';
}
ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}
#splashScreen
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: lightgray;
    background-image: url('../images/backgrounds/splash.jpg');
    background-size: cover;
    color: var(--staffone-blue);
    font-size: 50px;
    font-family: 'brittany_signatureregular';
    z-index: 100;
    overflow: none;
}
#splashScreenContents
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#splashScreenLogo
{
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

button
{
    border-radius: 10px;
    cursor: pointer;
}
#javaScript
{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.nextPageButtonDiv
{
    height: 40px;
}
.submitButton, .loadingDiv
{
    width: 200px;
    height: 60px;
    color: white;
    float: right;
    background: #17435c;
}
.nextButton
{
    float: right;
}
.lettersList
{
    list-style-type: lower-alpha ; 
}
.lettersList li
{
    display: list-item;
}
.lettersList li:before
{
    content: normal;
}
.formRadioTypeOfWork input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}
.historyEducationItem
{
    width: 100%;
}
.formAddedContent
{
    width: 100%;
}
.progressBar
{
    display: flex;
}
.progressDiv
{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    margin-right: 0px;
    background: red;
    width: 14.2%;
    height: 30px;
    border-radius: 5px;
    color: white;
}
.unlocked
{
    background: orange;
}
.completed
{
    background: green;
}
.currentPage
{
    background: var(--staffone-blue);
    border: solid black 1px
}
.formPageHeader
{
    font-size: 30px;
    margin-bottom: .5em;
    font-weight: 0;

}
label
{
    font-weight: 1;
}
.formPageTitle
{
    font-size: 32px;
    margin-bottom: 1em;
}
.uploadedFile
{
    display: flex;
    align-items: center;
    width: 40%;
    height: 100%;
}
.formUploadButton
{
    width: 200px;
    height: 100%;
}
.uploadInput
{
    width: 1px;
    height: 1px;
    display: none;
}
.space
{
    margin-bottom: 3em;
}
.formLabel
{
    width: 40%;
    font-size: 22px;
}
.formLabeled
{
    width: 100%;
    display: flex;
    align-content: center;
}
.formRadioSelection
{
    font-size: 32px;
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
}
.formUpload
{
    font-size: 32px;
    width: 30%;
    height: 100%;
}
.formItemTiny
{
    display: flex;
    width: 10%;
}
.formItemSmall
{
    display: flex;
    width: 15%;
}
.formItemMid
{
    display: flex;
    width: 25%;
}
.formItemBig
{
    display: flex;
    width: 30%;
}
.formItemLarge
{
    display: flex;
    width: 45%;
}
.formItemGiga
{
    display: flex;
    width: 100%;
}
.formItemTiny select, .formItemTiny input, .formItemTiny textarea
{
    width: 100%;
}
.formItemSmall select, .formItemSmall input, .formItemSmall textarea
{
    width: 100%;
}
.formItemMid select, .formItemMid input, .formItemMid textarea
{
    width: 100%;
}
.formItemBig select, .formItemBig input, .formItemBig textarea
{
    width: 100%;
}
.formItemLarge select, .formItemLarge input, .formItemLarge textarea
{
    width: 100%;
}
.formItemGiga select, .formItemGiga input, .formItemGiga textarea
{
    width: 100%;
}
.formItemGiga textarea
{
    resize: vertical;
}
.formRadioSelection input[type="radio"] {
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Chrome, Safari, Opera */
    transform: scale(2);
    width: 5%;
}

.row
{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.dropdown
{
    position: relative;
}
.infoDiv
{
    top: 3em;
    display: none;
    width: 100%;
    justify-content: left;
    background: #fff;
    position: absolute;
    border: solid 2px;
}
.infoDivButton
{
    display: flex;
    justify-content: left;
    color: black;
    width: 100%;
    background: #fff;
    height: 2em;
    padding: 0 0 0 0;
    margin-bottom: 3em;
}
.infoDivButton p
{
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 0 0 0;
    margin-left: 1em;
}
.angle
{
    /*transform-origin: 8px 32px;*/
    webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.icon
{
    width: 100%;
}
.icon:before
{
    content: "\f106";
    display: flex;
    align-items: center;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 32px;
    position: absolute;
}
.formPage
{
    padding-bottom: 3em;
    display: none;
}
#topBar
{
    width: 100%;
    height: 56px;
    background: var(--div-background);
    background-size: 100% 100%;
    box-shadow: var(--div-shadow);
}
#topBarContents
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.logo
{
    width: 100%;
}
.logoDiv
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vh;
    box-sizing: border-box;
}
.pageTitle
{
    float: left;
    display:  flex;
    align-items: center;
    height:  100%;
    padding-left: 1em;
}
.candidateId{
    justify-content: center;
}
#content
{
    /*background: var(--staffone-grey);*/
    background: var(--staffone-grey);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-left: 2em;
}
#tabBar
{
    background: var(--staffone-blue-gradient);
    display: flex;
    flex-direction: column;
    width: 5%;
    height: 100vh;
    justify-content: space-between;
}
#poweredBy
{
    text-align: center;
}
#navigationDiv
{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}
#navigationDiv .tabHolder
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.tabsContainer {
    overflow: auto;
    height: 80vh;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}
.tabsContainer::-webkit-scrollbar {
    display: none; /* For Chrome, Safari and Opera */
}
#navigationDiv .tab
{
    width: 80%;
    cursor: pointer;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .8vw;
    text-decoration: none;
    border-radius: 2px;
    padding: 1em;
}
#navigationDiv .tab label
{
    font-size: 10px;
    margin-top: 6px;
    cursor: hand;
}
#navigationDiv .tab img
{
    width: 22px;
}
#navigationDiv .tab:hover
{
    background: #2b779d;
    box-shadow: var(--div-shadow);
}
#navigationDiv .active.tab
{
    background:  #2b779d;
    box-shadow: var(--div-shadow);
}

#logout label
{
    border: none;
    padding: 0 0 0 0;
    margin: 2% 5px 0 0;
    font-size: .8vw
}

#candidatePortalContents
{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-left: 1em;
    box-sizing: border-box;
}
#footer
{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
.registrationChoice
{
    display: flex;
    justify-content: center;
    width: 100%;
}
.registrationChoice button
{
    background: var(--staffone-light-blue);
    color: white;
    width: 100%;
}
.registrationChoice button:hover
{
    background: var(--staffone-blue);
}
#tagsPopup
{
    display: none;
    justify-content: center;
}
.tagsList
{
    list-style-type: disc;
    padding-inline-start: 40px;
}
.childTagsList
{
    list-style-type: circle
}
.listItem
{
    display: list-item;
}
.listItem div
{
    display: flex;
}
#tagsDiv
{
    justify-content: center;
    width: 30%;
    padding: 2em;
}
.closeTagsPopup
{
    width: 100%;
}
.paymentTable
{
    width: 100%;
    border-collapse: collapse;
    border: solid thin black;
}
.paymentTable td, .paymentTable th
{
    height: 30px;
    border: solid thin black;
}
.paymentTable div
{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.paymentTable input
{
    width: 100%;
    height: 100%;
    border: none;
}

#signature, #dasignature, #paymentSignature
{
    font-family: 'Arial';
    font-size: 50px;
}
.documentDiv
{
    display: flex;
    justify-content: center;
    width: 60%;
    height: 500px;
    border: solid thin;
    background: white;
    overflow: hidden;
}
.profileImageDiv
{
    display: flex;
    justify-content: center;
    width: 300px;
    height: 300px;
    border: solid thin;
    background: white;
    overflow: hidden;
}
.profileImageDivAdapt
{
    display: flex;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: solid thin;
    background: white;
    overflow: hidden;
    border-radius: 50px;
    position: relative;
}
.profileImageDivSmall
{
    display: flex;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: solid thin;
    background: white;
    overflow: hidden;
    border-radius: 50px;
    position: relative;
}
.profileImageView
{
    width: 100%;
    height: auto;
    margin: auto;
}
#profileImageToggleButton
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
#logout
{
    height: 100%;
    float: right;
    display: flex;
    justify-content: center;
    position: relative;
}
#logout button, #logout label
{
    display: flex;
    text-align: center;
    align-items: center;
    font-size: .8vw

}
.opacity
{
    opacity: 30%;
}
#settingsList
{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    right: 0px;
    top: 56px;
    width: 150px;
    z-index: 1;
}
.settingsLink
{
    padding: 1em;
    cursor: pointer;
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
}
.settingsLink:hover
{
    background: grey;
}
.settingsLink:visited
{
    color: black;
}
.settingsImage
{
    width: 16px;
    margin-right: .3em;
}
#jobTable
{
    margin-top: 2em;
    overflow: scroll;
    height: 100%;
}
.job_filters
{
    height: 100%;
}
.search_jobs
{
    margin-top: 2em;
    overflow: hidden;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    padding: 1em;
    border-radius: 5px;
}
.jobDiv
{
    box-shadow: var(--div-shadow);
    overflow:hidden; 
    margin-bottom: 10px; 
    width: 100%; 
    min-height: 200px;
    position: relative;
    background: var(--div-background);
}
.jobDiv:hover
{
    color: white;
    background: var(--staffone-blue);
}
.jobDiv:hover .jobDivTitle, .jobDiv:hover .jobDivDescription, .jobDiv:hover .jobDivSpecifics, .jobDiv:hover .jobSpecific, .jobDiv:hover .clickToViewDiv
{
    color: white;
}
.jobDivTitle
{
    color: var(--staffone-dark-blue);
    float:left;
    width: 65%;
    height: 24px;
    font-size: 22px;
    margin-left: 10px;
    margin-top: 5px; 
}
.jobDivDescription
{
    float:left; 
    width: 60%; 
    font-size: 85%; 
    margin-left:10px; 
    color: var(--staffone-dark-blue); 
    padding-top: 10px; 
    border-top: solid 2px; 
    margin-top: 10px
}
.jobDivSpecifics
{
    float: right; 
    width: 30%
}
.jobSpecific
{
    float:left; 
    width: 100%;
    color: var(--staffone-dark-blue);
}
.jobSpecificIcon
{
    margin-right: .5em;
}
.clickToViewDiv
{
    color: var(--staffone-blue);
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .5em;
}
.jobDivPane, .buttonDivPane
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
}
.tableLoading
{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.tableLoading img
{
    width: 100%;
    margin: auto;
}
.removedJobLabel
{
    width: 100%;
    display: flex;
    justify-content: center;
}
#timesheetsDiv .dashboardDivContent
{
    height: 150px;
    overflow: auto;
}
.timesheetSelector
{
    width: 100%;
    display: flex;
    justify-content: center;
}
#payslipsDiv .dashboardDivContent
{
    height: 150px;
    overflow: auto;
}
#certificatesDiv .dashboardDivContent
{
    height: 150px;
    overflow: auto;
}

.dashboardStatistic
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    font-size: 4vw;
    font-weight: bold;
}
.dashboardButtonHeader
{
    display: flex;
    justify-content: center;
    font-size: 1vh;
    font-weight: bold;
    margin-bottom: 1em;
}
.dashboardColumn
{
    display: flex;
    flex-direction: column;
    width: 48%;
}
.dashboardDiv
{
    box-shadow: var(--div-shadow);
    background: var(--div-background);
    background-size: 100% 100%;
    width: 100%;
    overflow: auto;
    border-radius: 5px;
}
.dashboardTable
{
    width: 100%;
    border-collapse: collapse;

}
#statusDivContainer, #blogsContainer
{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#statusDiv
{
    margin-top: 4%;
    display: flex;
    height: 100px;
}
#blogsDiv
{
    margin-top: 4%;
    display: flex;
    height: 150px;
    justify-content: center;
}
#blogsDiv a
{
    width: 50%;
}
.statusButton
{
    text-align: center;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: .9vw;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    transition: .3s linear;
}
.statusButton:hover
{
    opacity: 1;
}
.statusBusy
{
    background: var(--staffone-light-red-gradient);
}
.statusAvailable
{
    background: var(--staffone-light-orange-gradient);
}
.statusPlaced
{
    background: var(--staffone-light-green-gradient);
}
#statusDiv .dashboardDivContent
{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttonsDiv
{
    margin-bottom: 4%;
    display: flex;
    box-sizing: border-box;
}
.buttonsColumn
{
    --spacing-size: 2vw;
    padding: 0 var(--spacing-size) var(--spacing-size) var(--spacing-size);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/*.rightColumn
{
    padding: 0 0 1em 1em;
}*/

.dashboardButtonBlue
{
    background: var(--staffone-blue-gradient);
    box-shadow: var(--div-shadow);
    border: none;
    background-size: 100% 100%;
    position: relative;
    border-radius: 5px;
    color: white;
    padding: 1em;
    width: 15%;
    height: 30vh;
    cursor: pointer;
    font-size: 1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.dashboardButton
{
    box-shadow: var(--div-shadow);
    background: var(--div-background);
    border: none;
    background-size: 100% 100%;
    position: relative;
    border-radius: 5px;
    padding: 1em;
    width: 15%;
    height: 30vh;
    cursor: pointer;
    font-size: 1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.dashboardButtonDisplayLight{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2em;
    background: white;
    color: black;
    border-radius: 1vw;
    width: 5vw;
    cursor: pointer;
}
.dashboardButtonDisplayDark{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2em;
    background: var(--staffone-blue-gradient);
    color: white;
    border-radius: 1vw;
    width: 5vw;
    cursor: pointer;
}
.dashboardButton:hover, .dashboardButtonBlue:hover{
    /*background: var(--staffone-blue);*/
    opacity: .7;
    transition: .3s linear;
}
.buttonText
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1em;
    box-sizing: border-box;
    overflow: hidden;
}
.buttonImage, .buttonExplanation
{
    width: 100%;
    height: 20%;
    display: flex;
    text-align: left;
    font-size: .6vw;

}
.buttonImage
{
    margin-bottom: .3em;
}
.buttonImage img
{
    margin-right: .5em;
}
.buttonTitle
{
    font-size: .8vw;
    font-weight: bold;
    display: flex;
    height: 10%;
    text-align: left;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.dashboardSelect
{
    width: 100%;
    height: 100%;
    font-size: 40px;
    display: flex;
    justify-content: center;
    text-align: center;
    -webkit-appearance: none;
    background: none;
    border: none;
}
.dashboardGuide
{
    display: flex;
    justify-content: center;
    width: 50%;
}
.dashboardData
{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.dashboardHeader
{
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    padding-top: .5em;
}
.dashboardDivContent, .dashboardDivExpandable, .dashboardExpand
{
    padding: .5em;
}
.dashboardDivContent{
    height: 18vh;
    overflow: auto;
    font-size: 1vw;
}
.dashboardExpand
{
    height: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashboardDivExpandable
{
    display: none;
}
.tabTitle h1
{
    font-weight: 600;
    font-size: 30px;
    color: var(--staffone-blue);
    font-style: italic;
}
.tabTitle span
{
    color: var(--staffone-dark-blue);
}
#policiesContainer, #faqContainer
{
    width: 100%;
    margin: auto;
    margin-top: 2em;
}
#categoriesContainer
{
    width: 100%;
    margin: auto;
    background: var(--div-background);
    border-radius: 5px;
    box-shadow: var(--div-shadow);
    padding: 1em;
    margin-top: 2em;
}
#chatContainer
{
    width: 100%;
    height: 100%;
    display:  flex;
    justify-content: center;
}
#chatWindow
{
    width: 45%;
    height: 100%;
    background-color: var(--staffone-blue);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--div-shadow);
}
#chatHistory
{
    background: var(--div-background);
    background-size: 100% 100%;
    height: 92%;
    margin: 1%;
    padding-bottom: 1%;
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
}
#inputBox
{
    background-color: white;
    height: 4%;
    margin: 1%;
}
#inputBox input
{
    width: 100%;
    height: 100%;
}
.messageRow
{
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: .1em;
}
.messageRow:hover
{
    background-color: lightgray;
}
.message{
    background-color: var(--staffone-light-blue);
    border-radius: 10px;
    padding: .4em;
    max-width: 60%;
}
.sent
{
    float: right;
    margin-right: .5em;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.recieved
{
    margin-left: 2em;
    float: left;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.messageDate
{
    width: 100%;
    text-align: center;
    font-size: 12px;
}
.seenIcon
{
    width: 1em;
    margin: auto;
}
.seenIconDiv
{
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: .5em;
    float: right;
}
.topBubble.sent
{
    border-top-right-radius: 10px;
}
.topBubble.recieved
{
    border-top-left-radius: 10px;
}
.policy
{
    width: 32%;
    margin-left: .3%;
    margin-bottom: .3%;
    float: left;
    height: 10%;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.policy:hover
{
    background: var(--staffone-blue);
    color: white;
}
.policyIcon
{
    width: 48px;
    margin-right: .5em;
}
#documentViewerContainer
{
    width: 100%;
    height: 100%;
    display:  flex;
    flex-direction: column;
    justify-content: space-between;

}
.documentViewerHeader
{
    width: 100%;
    height: 54px;
    background: darkgray;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 40px;
}
.documentViewer
{
    height: 100%;
}
#regFormContainer
{
    padding: 1em;
    border-radius: 5px;
}
#informationContainer
{
    margin: auto;
    margin-top: 2em;
    padding: 1em;
    background: var(--div-background);
    border-radius: 5px;
    box-shadow: var(--div-shadow);
}
.formData
{
    margin-bottom: 2em;
}
.jobTitle
{
    width: 100%;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
}
#calendarDiv
{
    background-color: white;
}
#loginContainer
{
    width: 100%;
    display: flex;
    justify-content: right;
}
#loginInfoDiv
{
    padding: 1%;
    background: var(--staffone-grey);
    height: 100%;
    width: 20%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
#loginForm
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 2%;
    box-sizing: border-box;
}
#loginDetails
{
    display: flex;
    margin-bottom: 1%;
}
#loginForm *
{
    font-size: 1vw;
}
#registerLabel, #registerLabel a
{
    font-size: .5vw;
}
#loginMessage
{
    font-size: 3vw;
    margin-bottom: 2%;
}
#loginForm label{
    color: white;
    text-shadow: -.5px -.5px 0 #000, .5px -.5px 0 #000, -.5px .5px 0 #000, .5px .5px 0 #000;
}
#authMessage
{
    color: red;
    font-size: .5vw;
}
#loginForm input{
    text-align: center;
    font-size: 1vw;
}
#loginImageDiv
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:all 2s ease-in;
}
#loginInfo
{
    color: var(--staffone-blue);
    font-size: .8vw;
}
#loginButton
{
    background: var(--staffone-dark-blue);
    color: white;
    border: none;
    box-shadow: var(--div-shadow);
    border-radius: 0px;
}
#poweredBy
{
    font-size: .5vw;
    width: 100%;
    color: white;
    box-sizing: border-box;
    margin-bottom: 2em;
}
#poweredBy div
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#poweredBy img
{
    width: 100%;   
}
.payslipTable
{
    width: 100%;
    font-size: .7vw;
}
#mediaPanel
{
    float: right; 
    margin-right: 5%; 
    max-height: 300px;
}
#welcomeMessage
{
    font-size: 30px;
}
.complianceListElement
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .7vw;
}
.alternating
{
    background: var(--staffone-grey);
}
#advertImage
{
    width: 100%;
}
.blogContainer
{
}
.blogImage
{
    width: 100%;
}
.blogTitle
{
    width: 100%;
    text-align: center;
    text-decoration: none;
}
.certificateTable
{
    /*border-collapse: collapse;*/
    width: 100%;
}
.certificateTableHeader
{
}
.certificateTableHeader th
{
    border: solid black thin;
}
.certificateTableHeader th:first-child
{
    border-top-left-radius: 5px;
}
.certificateTableHeader th:last-child
{
    border-top-right-radius: 5px;
}
#certificateTableContainer
{
    margin: auto;
    margin-top: 2em;
    background: var(--div-background);
    border-radius: 5px;
    box-shadow: var(--div-shadow);
}
.informationCategory, .informationHeader
{
    display: flex;
    align-items: center;
}
.informationCategory img
{
    width: 16px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 1em;
}
.informationHeader img
{
    width: 32px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: .5em;
}
.idCard img
{
    box-shadow: var(--div-shadow);
}
#advertMediaPanel
{
    padding: 0;
    border-radius: 5px;
}
#advertImage
{
    border-radius: 5px;
}
.search_location, .search_keywords
{
    width: 48%
}
.search_categories
{
    width: 100%;
}
#keywords, #location, #category
{
    width: 100%;
    border-radius: 5px;
    -webkit-appearance: none;
}
.search_row
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
}
.search_jobs
{
    display: flex;
    flex-direction: column;
}
.faq
{
    width: 100%;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    position: relative;
}
.faqQuestion
{
    box-sizing: border-box;
    margin-bottom: .5em;
    color: var(--staffone-light-blue);
}
.faqAnswer
{
    box-sizing: border-box;
}
.faqPane
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.faqPane:hover
{
    cursor: pointer;
}
.faqRowHeader
{
    width: 75px;
}

.divTable
{
    box-sizing: border-box;
}
.divTable div
{
    display: flex;
    box-sizing: border-box;
}
.divTable div:first-child
{
    margin-right: .5em;
    box-sizing: border-box;
}
#registerForm
{
    margin: 12vw;
    margin-top: 0;
    padding: 2vw 4vw 2vw 4vw;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    margin-bottom: 2vh;
    height: 100%;
}
#registerFormContainer
{
    margin:0;
    margin-top: 7vh;
    padding:0;
    width:100vw;
    display:flex;
    flex-direction: column;
    height: 100%;
}
#registerFormTitle
{
    width:100vw;
    height: 7vh;
    background: #17435c;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    display:flex;
    position: absolute;
    z-index: 1;
}
#titleLogoContainer
{
    width: 40vw;
    height: 100%;
    display: flex;
    align-content: center;
    font-size: 2vw;
}
#logoText
{
    display:flex;
    justify-content: center;
    flex-direction: column;
    font-weight: 1000;
    font-size: 30px;
}
#logoContainer img
{
    height: 100%;
}
#verificationContainer
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#verificationContent
{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    padding: 2vw;
}
#verificationContent h1
{
    font-size: 2vw;
    font-weight: 1000;
    margin-bottom: 1em;
    text-align: center;
}
#weeklyTable
{
    width: 100%;
    border: solid #ccc 2px;
    background: white;
}
#weeklyTable tr td
{
    border: solid #ccc 2px;
}
#clientPortalContents
{
    margin: auto;
    margin-top: 2em;
    padding: 1em;
    background: var(--div-background);
    border-radius: 5px;
    box-shadow: var(--div-shadow);
    overflow: hidden;
    position: relative;
}
.candidateInfo
{
    width: 95%;
    float: left;
    cursor: pointer;
    background: #156085;
    padding: 1%;
    margin-bottom: 10px;
    box-shadow: 5px 5px 5px rgb(0 0 0 / 50%);

}
.candidateInfo label
{
    width: 40%;
    cursor: pointer;
    float: left;
    color: #fff;
}
.candidateInfo iframe
{
    border: none;
    height: 100%;
    width: 60%;
}
.candidateInfo .candidateInfoButton
{
}
.expandedArea
{
    height: 400px;
}
.unexpandedArea
{
    height: 50px;
    display: flex;
    align-items: center;
}
.buttonArea
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 40%
}
.buttonArea button
{
    width: 40%;
    height: 30px;
    color: white;
}
.buttonArea button:hover
{
    opacity: 80%;
}
.buttonArea .greenButton
{
    background: #2e8b57;
}
.buttonArea .redButton
{
    background: #b22222;
}
#yearSelect, #weekSelect
{
    margin-right: 5px;
}
.resourceCategory
{
    width: 100%;
    height: 220px;
    float: left;
}
.viewResourceButton
{
    padding: .5% 2% .5% 2%;
    float: left;
    color: #fff;
    background: #156085;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgb(0 0 0 / 50%);

}
.viewResourceButton:hover
{
    background: #2b779d;
}
.clientResources
{
    width: 100%;
    margin-bottom: 10px;
}
.clientResource
{
    width: 20%;
    height: 100px;
    float: left;
    cursor: pointer;
    background: #156085;
    padding: 1%;
    margin-bottom: 10px;
    margin-right: 10px;
    box-shadow: 5px 5px 5px rgb(0 0 0 / 50%);
}
.clientResource:hover
{
    background: #2b779d;
}
.clientResource label
{
    width: 100%;
    cursor: pointer;
    float: left;
    color: #fff;
}
.clientResource .fileSizeLabel
{
    font-size: 12px;
    color: #ccc
}
.settingsInputTable
{
    width: 50%;
}
#addJoborderTable tr, #addJoborderTable td
{
    border: none;
}
#joborderTable
{
    border-radius: 10px;
    border-collapse: collapse;
    border-spacing: 20px;
}
.joborderTableRow
{
    border: 2px solid black;
    background: #156085;
    color: white;
    margin-bottom: 2px;
    cursor: pointer;
}
.joborderTableRow:hover
{
    background: #2b779d;
    border: 3px solid black;
}
#joborderTable td
{
    border: none;
}
.candidatesDiv
{
    width: 49%;
    overflow:hidden;
    float: left;
    padding: 5px;
}
#showJoborderTitle
{
    margin-bottom: 40px; font-size: 20px;width: 100%
}
#showJoborderTitle span
{
    margin-right: 5%;
}
#pageTitle
{
    display: flex;
}
#backButton
{
    margin: 10px 0px 10px 2%;
    background-color: #156085;
    color: white;
}
.helpIcon
{
    margin-top: 4px;
    color: white;
    font-size: 10px;
    width: 10px;
    height: 10px;
    border: solid 1px black;
    background-color: blue;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    line-height: 10px;
    cursor: pointer;
    float: left;
}
.maskDiv
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 128, 128, 0.9);
    cursor: auto;
}
.reasonDiv
{
    width: 100%;
    height: 100%;
    padding: 1em;
    box-sizing: border-box;
}
.denyReason, .acceptReason
{
    width: 100%;
    height: 45%;
    background: var(--div-background);
    border-radius: 5px;
    box-shadow: var(--div-shadow);
    overflow: hidden;
    position: relative;
    padding: 1em;
    box-sizing: border-box;
    resize: none;
}
.denyReasonButtonDiv, .acceptReasonButtonDiv
{
    width: 100%;
    margin-top: 1em;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
}
.denyReasonButton, .acceptReasonButton
{
    width: 45%;
}
.denyHelp
{
    width: 100%;
}
#timesheetPreview
{
}
.tableContainer
{
    width: 100%;
    overflow: auto;
    background: var(--staffone-blue);
    border-radius: 5px;
    color: white;
    padding: 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.tableContainer table
{
    border-collapse: collapse;
}
.tableContainer label
{
    color: white;
}
.tableContainer td
{
}
#header
{
    width:100vw;
    height: 7vh;
    background: #17435c;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    display:flex;
    position: absolute;
    z-index: 1;
}
#acceptCandidateContainer
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#acceptCandidateContent
{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--div-background);
    box-shadow: var(--div-shadow);
    padding: 2vw;
}
#popupMask
{
    position: absolute;
    z-index: 200;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: .40;
    -moz-opacity: .40;
    filter: alpha(opacity=40);
    /* this hack is so it works in IE
     * I find setting the color in the css gives me more flexibility
     * than the PNG solution.
     */
    background-color: #333;
    /* background-image\**\: url('images/maskBG.gif') !important; */
    background-image: none;
    background-repeat: repeat;
    display: none;
}

#popupContainer
{
    position: absolute;
    z-index: 201;
    top: 0px;
    left: 0px;
    display: none;
    padding: 0px;
}

#popupInner
{
    border: 1px solid #000;
    background-color: #eee;
    border-radius: 10px;
}

#popupFrame
{
    margin: 0px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 202;
}

#popupTitleBar
{
    background-color: #17435C;
    color: #fff;
    font-weight: bold;
    height: 1.3em;
    padding: 5px;
    border-bottom: 1px solid #000;
    border-top: 1px solid #17435C;
    border-left: 1px solid #17435C;
    border-right: 1px solid #204095;
    border-radius: 10px 10px 0px 0px;
    position: relative;
    z-index: 203;
}

#popupTitle
{
    float: left;
    font: normal normal bold 17px "Open Sans";
}

#popupControls
{
    float: right;
    cursor: pointer;
    /*cursor: hand;*/
}
.popupContent
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2vw;
    box-sizing: border-box;

}
.hiddenDiv
{
    width: 100%;
    margin-top: 50px;
    overflow: hidden;
    box-sizing: border-box;
}
.hiddenDivRow
{
    display: flex;
    width: 100%;
    padding: 1em;
}
.hiddenDivItem
{
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 1em;

}
.acceptCandidateFormContainer
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20%;
}
.acceptCandidateForm
{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.acceptCandidateForm textarea, .acceptCandidateForm input
{
    width: 100%;
    margin-bottom: 1em;
    border-radius: 5px;
    border: solid thin black;
    padding: .5em;
    box-sizing: border-box;
}
.acceptCandidateForm textarea
{
    height: 100px;
    resize: vertical;
}
.acceptCandidateForm input:hover
{
    cursor: pointer;
    opacity: 80%;
}
#referenceAddress
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.referenceFormTitle
{
    font-size: 32px;
    width: 100%;
    text-align: left;
    margin-bottom: 1em;
    padding: 1em 0 1em 1em;
    box-sizing: border-box;
    color: white;
    background-color: var(--staffone-blue);
}
#referenceFormContainer
{
    margin:0;
    margin-top: 7vh;
    padding:0;
    width:100vw;
    display:flex;
    flex-direction: column;
    min-height: 100%;
}
.formTextArea
{
    width: 100%;
    height: 100px;
    resize: vertical;
    padding: .5em;
}
.addShiftButtonInline{
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--staffone-blue);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    padding: .5em;
}
.addShiftButtonInline:hover
{
    opacity: 80%;
}
.adhocTable {
    width: 100%;
    border-collapse: collapse;
    border-top: none;
}
.adhocShiftsContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 11vw;
}
.adhocTitleBar
{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.adhocTitle
{
    display: flex;
    justify-content: center;
    width: 100%;
}
.adhocClose
{
    display: flex;
    cursor: pointer;
}
.adhocClose img
{
    width: .7vw;
    height: .7vw;
}
.adhocTable th
{
    background-color: var(--staffone-blue);
    color: white;
}
.adhocDayHeader
{
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    margin: 1em;
}
.adhocControls
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
}
.controlSection
{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.controlSection button:hover
{
    opacity: 80%;
}
.adhocIndicator{
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.adhocShiftContents{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 89%;
    font-size: .7vw;
    background-color: white;
    color: black;
}
.adhocShift
{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    border: solid thin black;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    overflow: hidden;
}
.adhocShift:hover
{
    opacity: .6;
}
/* .adhocShiftHours{
    background-color: grey;
    color: white;
} */
.tooltip
{
    position: absolute;
    background: 'white';
    border: '1px solid black';
    padding: '10px';
    z-index: 9999;
}
.tooltipTitle
{
    font-weight: bold;
}
.tooltipContent
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.selected
{
    border: solid var(--staffone-blue);
    box-sizing: border-box;
}
.green
{
    background-color: green;
    color: white;
}
.red
{
    background-color: red;
    color: white;
}
.orange
{
    background-color: orange;
    color: white;
}
.staffOneBlue
{
    background: var(--staffone-blue);
    color: white;
}
.center
{
    text-align: center;
    justify-content: center;
    align-items: center;
}