@charset "UTF-8";
/*------------------------------------*\
VENDOR
\*------------------------------------*/
/*------------------------------------*\
VARIABLES - CLIENT AREA
\*------------------------------------*/
/*------------------------------------*\
SPACING
\*------------------------------------*/
/**
 *  Spacing units are specified in ems so that margins scale with font size
 *  Need to have ie8 support so we cant use rem yet
 *  These variables are only used for the shared aspects of the eploys style such as row and table spacing
 *  Each eploy portal has its own spacing variable defined which is then used in that area
 *  This is done because we cannot override !default values for spacing in the candidate area as it is front end
 */
/*------------------------------------*\
BRAND STUFF
\*------------------------------------*/
/*------------------------------------*\
WARNING COLOURS
\*------------------------------------*/
/*------------------------------------*\
FONTS
\*------------------------------------*/
/*------------------------------------*\
MEDIA
\*------------------------------------*/
/*------------------------------------*\
MIXINS
\*------------------------------------*/
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.: @include font-size(10px);
 */
/**
 *  Breakpoints add breakpoint quick and easy
 *  Must be turned on with the $use-media variable
 */
/*------------------------------------*\
GLOBAL VENDOR AREA
\*------------------------------------*/
/**
 *  These area global styles used throughout the vendor area
 */
html {
  font: 0.75em / 1.5 Arial, Helvetica, Sans-serif;
}

body {
  color: #333;
  background-color: #fff;
}

a {
  color: #00C7B1;
}
a:focus {
  outline: none;
}
a:hover {
  outline: none;
}
a:active {
  outline: none;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  font-family: "Open Sans", Arial, Sans-Serif;
  font-weight: 600;
}

h1, .h1 {
  font-size: 26px;
  font-size: 2.1666666667rem;
  line-height: 1.3846153846;
}
@media screen and (max-width: 768px) {
  h1, .h1 {
    font-size: 18px;
    font-size: 1.5rem;
    line-height: 1;
  }
}

h2, .h2 {
  font-size: 18px;
  font-size: 1.5rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  h2, .h2 {
    font-size: 14px;
    font-size: 1.1666666667rem;
    line-height: 1.2857142857;
  }
}

h3, .h3 {
  font-size: 14px;
  font-size: 1.1666666667rem;
  line-height: 1.2857142857;
  font-family: Arial, Helvetica, Sans-serif;
  font-weight: 700;
}

/**
 *  Vertical Spacing
 *  This is used for maintaining consistent vertical rhythm though website 
 */
h1, h2, h3, h4, h5, h6, hgroup,
.h1, .h2, .h3, .h4, .h5, .h6,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre {
  margin-bottom: 18px;
}

/*------------------------------------*\
HELPER
\*------------------------------------*/
/**
 * Utility classes that get used a lot
 */
/*------------------------------------*\
CLEARFIX
\*------------------------------------*/
/**
 *  clearfix classes used for fixing collapsed divs
 *  use sass @extend to clear divs rather than filling markup with clearfix classes	
 */
.clearfix:after, .vendornav__item:after, .vendornav:after, .grid__item:after, .grid:after, .header:after, .paginator:after {
  content: "";
  display: table;
  clear: both;
}

.clearme {
  clear: both;
}

/*------------------------------------*\
LISTS
\*------------------------------------*/
.not-list, .ui-tabs .ui-tabs-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*------------------------------------*\
FLOATS
\*------------------------------------*/
.move--left {
  float: left;
}

.move--right {
  float: right;
}

/*------------------------------------*\
    $HELPER
\*------------------------------------*/
/**
 * A series of helper classes to use arbitrarily. Only use a helper class if an
 * element/component doesn’t already have a class to which you could apply this
 * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
 * that ruleset as opposed to adding the `.float--left` class to the markup.
 *
 * A lot of these classes carry `!important` as you will always want them to win
 * out over other selectors.
 */
/**
 * Add/remove floats
 */
.float--right {
  float: right !important;
}

.float--left {
  float: left !important;
}

.float--none {
  float: none !important;
}

/**
 * Text alignment
 */
.text--left {
  text-align: left !important;
}

.text--center {
  text-align: center !important;
}

.text--right {
  text-align: right !important;
}

/**
 * Font weights
 */
.weight--light {
  font-weight: 300 !important;
}

.weight--normal {
  font-weight: 400 !important;
}

.weight--semibold {
  font-weight: 600 !important;
}

/**
 * Add/remove margins
 */
.push {
  margin: 18px !important;
}

.push--top {
  margin-top: 18px !important;
}

.push--right {
  margin-right: 18px !important;
}

.push--bottom {
  margin-bottom: 18px !important;
}

.push--left {
  margin-left: 18px !important;
}

.push--ends {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.push--sides {
  margin-right: 18px !important;
  margin-left: 18px !important;
}

.push-half {
  margin: 9px !important;
}

.push-half--top {
  margin-top: 9px !important;
}

.push-half--right {
  margin-right: 9px !important;
}

.push-half--bottom {
  margin-bottom: 9px !important;
}

.push-half--left {
  margin-left: 9px !important;
}

.push-half--ends {
  margin-top: 9px !important;
  margin-bottom: 9px !important;
}

.push-half--sides {
  margin-right: 9px !important;
  margin-left: 9px !important;
}

.flush {
  margin: 0 !important;
}

.flush--top {
  margin-top: 0 !important;
}

.flush--right {
  margin-right: 0 !important;
}

.flush--bottom {
  margin-bottom: 0 !important;
}

.flush--left {
  margin-left: 0 !important;
}

.flush--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.flush--sides {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/**
 * Add/remove paddings
 */
.soft {
  padding: 18px !important;
}

.soft--top {
  padding-top: 18px !important;
}

.soft--right {
  padding-right: 18px !important;
}

.soft--bottom {
  padding-bottom: 18px !important;
}

.soft--left {
  padding-left: 18px !important;
}

.soft--ends {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.soft--sides {
  padding-right: 18px !important;
  padding-left: 18px !important;
}

.soft-half {
  padding: 9px !important;
}

.soft-half--top {
  padding-top: 9px !important;
}

.soft-half--right {
  padding-right: 9px !important;
}

.soft-half--bottom {
  padding-bottom: 9px !important;
}

.soft-half--left {
  padding-left: 9px !important;
}

.soft-half--ends {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.soft-half--sides {
  padding-right: 9px !important;
  padding-left: 9px !important;
}

.hard {
  padding: 0 !important;
}

.hard--top {
  padding-top: 0 !important;
}

.hard--right {
  padding-right: 0 !important;
}

.hard--bottom {
  padding-bottom: 0 !important;
}

.hard--left {
  padding-left: 0 !important;
}

.hard--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hard--sides {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.hidden {
  display: none !important;
}

/*------------------------------------*\
O-FLEXI
\*------------------------------------*/
/*
    If this doesnt do what you want then you use something else.
*/
.o-flexi {
  display: table;
  width: 100%;
}
.o-flexi--distribute {
  table-layout: fixed;
}

.o-flexi__cell {
  display: table-cell;
}
.o-flexi--middle > .o-flexi__cell {
  vertical-align: middle;
}
.o-flexi--bottom > .o-flexi__cell {
  vertical-align: bottom;
}

.o-flexi__fixed-cell {
  display: table-cell;
  width: 1px;
  white-space: nowrap;
}

/*------------------------------------*\
PAGINATION
\*------------------------------------*/
/**
 *  I hate pagers
 *  Asp.net pager uses bullshit inline styles that you cant seem to get rid of
 *  These are being overwritten with !important
 */
.paginator {
  padding: 9px 0;
  margin-bottom: 18px;
}

.paginator .paginator {
  border: none;
  padding: 0;
  margin: 0;
}

.paginator .cpb {
  display: inline-block;
  padding: 0 3px;
  background-color: #00C7B1;
  color: #f4f4f4;
}

.PageNoInfo {
  float: right !important;
  width: auto !important;
}

/*------------------------------------*\
TABS
\*------------------------------------*/
/*
 *  These tabs use jquery ui
 *  They are the main tabs which can be found in clientarea - applications
 * 
 */
.ui-helper-clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ui-tabs {
  position: relative;
  zoom: 1;
}

.ui-tabs .ui-tabs-nav {
  margin: 0 0 18px;
  overflow: hidden;
}

.ui-tabs .ui-tabs-nav li:focus {
  outline: 0;
}

.ui-tabs .ui-tabs-nav li {
  float: left;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li a {
  display: inline-block;
  padding: 4.5px 9px;
  border-radius: 4px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  color: #fff;
  background: #00C7B1;
  text-decoration: none;
  cursor: default;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
  cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
  cursor: pointer;
} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
  clear: both;
  position: relative;
  display: block;
  border-width: 0;
  margin: 0;
  background: transparent;
}

.ui-tabs .ui-tabs-hide {
  display: none !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  color: #333;
}

/*------------------------------------*\
$DASHBOARD
\*------------------------------------*/
/**
 *  vendor area dashboard styles
 *  These are different to candidate and client dashboard styles
 */
.dashboxwide {
  width: 100%;
  clear: both;
}

.dashbox {
  width: 50%;
  float: left;
  /*padding-left:$base-spacing-unit;
  padding-right:$base-spacing-unit;*/
  margin-bottom: 18px;
}
@media screen and (max-width: 1280px) {
  .dashbox {
    width: 100%;
  }
}

/**
 *  .dashboard-button is the container for linkcards
 *  Most of the time this is turned off
 */
.dashboard-buttons {
  margin-bottom: 18px;
}

.linkcard {
  text-decoration: none;
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 0 0 1px;
  text-align: center;
  text-indent: -99999px;
}

.card {
  background: #EFEFEF;
  padding: 20px;
  display: table;
  float: left;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  font-family: "Open Sans", Arial, Sans-Serif;
  border: 1px solid;
  border-width: 0px 0 4px 0;
  color: #666666;
  width: 220px;
  height: 220px;
  margin: 0 9px 9px 0;
  position: relative;
  border-radius: 2px;
}
@media screen and (max-width: 1280px) {
  .card {
    width: 48%;
  }
}
@media screen and (max-width: 520px) {
  .card {
    width: 100%;
    min-height: 180px;
    height: auto;
    padding-bottom: 40px;
    margin-right: 0;
  }
}

.card__helptext {
  position: absolute;
  bottom: 0px;
  right: 0%;
  font-size: 12px;
  width: 100%;
  height: 40px;
  font-weight: 200;
  overflow: hidden;
  transition: all 0.3s;
  border-top: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 9px;
}

.card__img {
  background-repeat: no-repeat;
  background-position: 50% 30%;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.card__count {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e1e1e1;
  padding: 4px;
  z-index: 1;
  font-size: 12px;
  transition: all 0.3s;
  display: none;
}
.card__count:after {
  content: "";
  display: block;
  border-bottom: 50px solid transparent;
  border-right: 50px solid #E1E1E1;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transition: all 0.3s;
}

.card:hover .card__helptext {
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
  color: #fff;
}
.card:hover .card__count {
  color: #fff;
}

.dashbox h2 {
  display: none;
}

@media screen and (max-width: 1280px) {
  .row--vendordashboard {
    margin-bottom: 0;
  }
}

.card__img--candidates {
  background-image: url("../../Images/Dashboard/add-candidate.png");
}

.card__img--view-candidates {
  background-image: url("../../Images/Dashboard/candidates.png");
}

.card__img--vacancies {
  background-image: url("../../Images/Dashboard/vacancies.png");
}

.card__img--applications {
  background-image: url("../../Images/Dashboard/applications.png");
}

.card__img--successful-applications {
  background-image: url("../../Images/Dashboard/successful-applications.png");
}

.card__img--unsuccessful-applications {
  background-image: url("../../Images/Dashboard/unsuccessful-applications.png");
}

.card__img--interviews {
  background-image: url("../../Images/Dashboard/interviews.png");
}

.card__img--confirmed-interviews {
  background-image: url("../../Images/Dashboard/confirmed-interviews.png");
}

.card__img--unconfirmed-interviews {
  background-image: url("../../Images/Dashboard/unconfirmed-interviews.png");
}

.card__img--view-placements {
  background-image: url("../../Images/Dashboard/view-placements.png");
}

.card__img--search-placements {
  background-image: url("../../Images/Dashboard/search-placements.png");
}

.card__img--timesheets {
  background-image: url("../../Images/Dashboard/timesheets.png");
}

.card--candidates {
  border-color: #F38D2E;
}
.card--candidates:hover .card__helptext {
  background-color: rgb(245.7692307692, 167.3076923077, 94.2307692308);
}
.card--candidates:hover .card__count:after {
  border-right-color: rgb(245.7692307692, 167.3076923077, 94.2307692308);
}

.card--vacancies {
  border-color: #17A077;
}
.card--vacancies:hover .card__helptext {
  background-color: rgb(29.4098360656, 204.5901639344, 152.1639344262);
}
.card--vacancies:hover .card__count:after {
  border-right-color: rgb(29.4098360656, 204.5901639344, 152.1639344262);
}

.card--applications {
  border-color: #427FB1;
}
.card--applications:hover .card__helptext {
  background-color: rgb(97.6666666667, 151.8888888889, 196.3333333333);
}
.card--applications:hover .card__count:after {
  border-right-color: rgb(97.6666666667, 151.8888888889, 196.3333333333);
}

.card--placements {
  border-color: #995299;
}
.card--placements:hover .card__helptext {
  background-color: rgb(176.8382978723, 109.1617021277, 176.8382978723);
}
.card--placements:hover .card__count:after {
  border-right-color: rgb(176.8382978723, 109.1617021277, 176.8382978723);
}

.card--timesheets {
  border-color: #BF3C3C;
}
.card--timesheets:hover .card__helptext {
  background-color: rgb(205.2788844622, 96.7211155378, 96.7211155378);
}
.card--timesheets:hover .card__count:after {
  border-right-color: rgb(205.2788844622, 96.7211155378, 96.7211155378);
}

.card--interviews {
  border-color: #FFC107;
}
.card--interviews:hover .card__helptext {
  background-color: rgb(255, 205.75, 58);
}
.card--interviews:hover .card__count:after {
  border-right-color: rgb(255, 205.75, 58);
}

/*------------------------------------*\
TABLES
\*------------------------------------*/
/**
 * Default tables should all use the .table class 
 */
.table td, .table th {
  border: 0;
  border: solid 1px #e1e1e1;
}
.table th {
  background-color: #333;
  border-color: rgb(76.5, 76.5, 76.5);
  color: #fff;
}
.table th a {
  color: #fff;
}
.table tr:nth-of-type(odd) {
  background-color: #f4f4f4;
}

tr.menutableselectedrow {
  background-color: #63A0D8;
  color: #fff;
}
tr.menutableselectedrow td {
  border: solid 1px rgb(139.8, 184.8461538462, 226.2);
}
tr.menutableselectedrow a, tr.menutableselectedrow .icon {
  color: #fff;
}
tr.menutableselectedrow:nth-of-type(odd) {
  background-color: #63A0D8;
}
tr.menutableselectedrow:hover {
  background-color: #63A0D8;
  color: #fff;
}

/*------------------------------------*\
FORMS
\*------------------------------------*/
/*
 *  FORM LAYOUT
 *  Vendor area form overrides
 */
.title {
  font-size: 14px;
  font-size: 1.1666666667rem;
  line-height: 1.2857142857;
  background: #f4f4f4;
  padding: 9px;
}

.row {
  padding: 0 9px;
}

.vacancyrates {
  margin-left: -9px;
  margin-right: -9px;
}

.vacancyrates .row {
  padding: 0;
}

.form-vacancy .row {
  padding: 0;
  margin-bottom: 0;
}

.editor-label {
  color: #333;
  font-weight: 700;
}

.button {
  background-color: #00C7B1;
  color: #fff;
}
.button:active {
  background-color: rgb(0, 148, 131.6381909548);
}

.button-negative {
  background-color: #e1e1e1;
  color: #333;
}
.button-negative:active {
  background-color: rgb(199.5, 199.5, 199.5);
}

/*------------------------------------*\
PAGE LAYOUT
\*------------------------------------*/
.header {
  padding: 18px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: #4285f4;
  background-color: #00C7B1;
  border-bottom: 1px solid #AFAFAF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  min-height: 67px;
}

.menu-active .btn-menu .icon {
  transition: all 0.5s;
  transform: rotate(90deg);
}

/**
 *  .scrolled and .scrolling
 *  These classes are added to .header with javascript based on whether 
 *  the page is currently being scrolled or have just stopped scrolling
 */
.scrolling {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.43);
}

.headerlogo-container {
  display: block;
  float: left;
  line-height: 0;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  height: 67px;
  width: 280px;
  padding: 18px;
}
@media screen and (max-width: 768px) {
  .headerlogo-container {
    width: auto;
    left: 60px;
  }
}

.headerlogo__img {
  height: 24px;
  margin-top: 3px;
}

.btn-settings,
.btn-menu {
  margin-top: -6px;
  margin-bottom: -6px;
  cursor: pointer;
  padding: 9px;
  background-color: inherit;
  color: #fff;
}

.btn-menu {
  display: none;
  position: absolute;
  left: 9px;
}
.btn-menu .icon {
  color: inherit;
}
@media screen and (max-width: 768px) {
  .btn-menu {
    display: block;
  }
}

.header__buttons {
  position: absolute;
  right: 9px;
  top: 19px;
}
.header__buttons .icon {
  color: #fff;
}

/**
 *  $headerheight 
 *  This is used to control the height of the top bar
 *  And the offset of the containers below it.
 */
.menucontainer {
  position: fixed;
  top: 67px;
  width: 280px;
  bottom: 0;
  overflow: auto;
  padding: 0 18px;
  background-color: #f4f4f4;
  border-right: 1px solid #EFEFEF;
}
@media screen and (max-width: 768px) {
  .menucontainer {
    width: 100%;
    position: static;
    margin-top: 67px;
    display: none;
  }
}

.menucontainer--adjust {
  display: block;
  animation: slideinnav 0.3s ease-out forwards;
}

.maincontainer {
  position: absolute;
  left: 280px;
  right: 0;
  top: 85px;
  margin-bottom: 18px;
  padding: 18px;
  max-width: 1000px;
  min-height: 768px;
  min-height: calc(100vh - 103px);
}
@media screen and (max-width: 768px) {
  .maincontainer {
    position: static;
    margin-top: 67px;
  }
}

.maincontainer--hidden {
  display: block;
}
@media screen and (max-width: 768px) {
  .maincontainer--hidden {
    display: none;
  }
}

@keyframes slideinnav {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#recite-wrapper .menucontainer {
  top: 127px;
}

#recite-wrapper .maincontainer {
  min-height: calc(100vh - 163px);
}

/*------------------------------------*\
GRIDS
\*------------------------------------*/
/**
 *  Super simple grids, used on dashboard pages
 *
 	<div class="grid">
		<div class="grid__row">
			<div class="grid__item  col-lg-6 ">
				<div class="grid__block">
					Content
				</div>
			</div>        
			<div class="grid__item  col-lg-6 ">
				<div class="grid__block">
					Content
				</div>   
			</div>
		</div>
	</div>
 *
 */
.grid {
  margin: 0;
}

.grid__item {
  float: left;
  padding-right: 18px;
  margin-bottom: 18px;
}
.grid .grid__item:last-of-type {
  padding-right: 0;
}

.grid__item--flush {
  padding-right: 0;
}

.grid__item--noMarginBottom {
  margin-bottom: 0;
}

.grid__item--maxwidth {
  width: 100%;
}

.grid--padding {
  padding: 18px;
  padding-right: 0;
}
.grid--padding .grid__item:last-of-type {
  padding-right: 18px;
}

.grid--flush .grid__item {
  padding-right: 0;
  margin-bottom: 0;
}

/*------------------------------------*\
WIDTHS
\*------------------------------------*/
.col-lg-12 {
  width: 100%;
}

.col-lg-11 {
  width: 91.6666666667%;
}

.col-lg-10 {
  width: 83.3333333333%;
}

.col-lg-9 {
  width: 75%;
}

.col-lg-8 {
  width: 66.6666666667%;
}

.col-lg-7 {
  width: 58.3333333333%;
}

.col-lg-6 {
  width: 50%;
}

.col-lg-5 {
  width: 41.6666666667%;
}

.col-lg-4 {
  width: 33.3333333333%;
}

.col-lg-3 {
  width: 25%;
}

.col-lg-2 {
  width: 16.6666666667%;
}

.col-lg-1 {
  width: 8.3333333333%;
}

@media screen and (max-width: 1280px) {
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .col-md-1 {
    width: 8.3333333333%;
  }
  .hidden--md {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .col-sm-1 {
    width: 8.3333333333%;
  }
  .hidden--sm {
    display: none;
  }
  .col-sm-12.grid__item {
    padding-right: 0;
  }
}
/*------------------------------------*\
LOGIN INFO
\*------------------------------------*/
.login-info {
  padding: 18px;
  margin-top: 18px;
  border: 1px solid #e1e1e1;
  border-width: 1px 0;
}

.login-info p {
  margin: 0;
  padding: 0;
}

.login-info__user {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #808080;
}

.login-info__logoff {
  float: right;
}

/*------------------------------------*\
NAVIGATION
\*------------------------------------*/
/**
 *  Vendor area navigation styles
 *  Nested navigation - Standard markup shown below.

	<ul class='vendornav'>
		<li class='vendornav__item'>			
			<a href='' class='vendornav__link'>Item one</a>
			<a class="nav__count nav__count--danger">123</a>
		</li>

		<li class="nav__item">						
			<a href='' class='vendornav__link'>Item two with nested level</a>	

			<ul class='vendornav  vendornav--level2'>
				<li class="vendornav__item">
					<a href='' class='vendornav__link'>Item three</a>					
				</li>
				<li class="vendornav__item">
					<a href='' class='vendornav__link'>Item three</a>					
				</li>
			</ul>			
		</li>
	</ul>

 *  '.active' gets added to the 'vendornav__link' via c# based on which page you are on.  
 */
.vendornav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin: 18px 0;
}

.vendornav__link {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
}
.vendornav__link:hover {
  background: #EAEAEA;
}
.vendornav__link.is-active {
  font-weight: 700;
  background: #e1e1e1;
}

.vendornav__item {
  position: relative;
}

.vendornav--level2 {
  margin: 0;
}

.vendornav--level2 .vendornav__link {
  margin-left: 18px;
}

/**
 *  Counters

	<a class="vendornav__count  vendornav__count--danger">123</a>

 *  Counters are shown after the '.vendornav__count'
 */
.vendornav__count {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 4px;
  background-color: #666666;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}

.vendornav__count--danger {
  background: #CF3232;
  color: #fff;
}

.active {
  font-weight: bold;
}

/*------------------------------------*\
TOPBAR
\*------------------------------------*/
/*
 *    Vacancy Selector
 */
.VacancySelector {
  margin-bottom: 18px;
}

.titletext {
  margin-bottom: 9px;
  display: block;
}

.select-container {
  padding: 0;
  clear: both;
  width: 75%;
  white-space: nowrap;
}
@media screen and (max-width: 1280px) {
  .select-container {
    width: 100%;
  }
}

.HelperText {
  display: block;
  clear: both;
  font-size: 11px;
  font-size: 0.9166666667rem;
  line-height: 1.6363636364;
  margin-bottom: 18px;
}

.VacancySelector select {
  width: 75%;
  max-width: inherit;
  min-width: inherit;
  padding: 0.5em;
  float: left;
  margin: 0;
}
.VacancySelector select:focus, .VacancySelector select:active {
  outline: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .VacancySelector select {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
  }
}

.VacancySelector .button {
  width: 25%;
  float: right;
  margin: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
}

.VacancySelector .deselect {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 20px;
  margin-left: 9px;
  text-indent: -9999px;
  background: url('<%=WebResource("ITSControlsLibrary.images.icons.cross2.png")%>') no-repeat center;
  opacity: 0.8;
  border: 0;
  cursor: pointer;
}
.VacancySelector .deselect:hover {
  opacity: 1;
}
.VacancySelector .deselect:active, .VacancySelector .deselect:focus {
  outline: 0;
}

/*------------------------------------*\
ZINDEX
\*------------------------------------*/
/**
 *  This is used to organise and stay on top of z-index
 *  Everytime a z-index is used it should go in this page instead of with the element
 *  This enables us to see which elements go on top of each other all in one place
 */
.header {
  z-index: 100;
}

.menucontainer {
  z-index: 200;
  z-index: 99;
}

/*
    --------------------------------------------
        CLIENT/VENDOR AREA LOGIN
    --------------------------------------------

*/
.login__logo--img {
  max-height: 51px;
  max-width: 250px;
}
@media screen and (max-width: 768px) {
  .login__logo--img {
    max-height: 38px;
  }
}

.login-background {
  background: #f4f4f4 url("../../images/default.jpg") no-repeat center;
  background-size: cover;
  position: fixed;
  overflow: hidden;
  overflow-y: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.login-vendor.login-background {
  background-image: url("../../images/vendor.jpg");
}

.login-container {
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  width: calc(304px + 90px);
  /*width of CAPTCHA (304px) + Padding (36px)*/
  margin: 6em auto;
  box-shadow: 1px 1px 14px rgba(51, 51, 51, 0.45);
}
@media screen and (max-width: 768px) {
  .login-container {
    margin: 2em auto;
    width: calc(234px + 90px);
  }
  .login-container .recaptchaControl {
    transform: scale(0.77);
    transform-origin: 0 0;
  }
}

.login__content {
  padding: 36px 45px;
}

.login__logo {
  text-align: center;
  padding: 36px 36px 0;
}

.login__logolink {
  display: inline-block;
  margin: 0;
}

.login-utility-links {
  text-align: center;
  padding: 18px 36px;
  border-top: 1px solid #e1e1e1;
  background: #f4f4f4;
}

.fp-content .row {
  margin-bottom: 18px;
  padding-left: 0;
  padding-right: 0;
}
.fp-content .button {
  min-width: 200px;
  margin: 0 auto 18px auto;
  display: block;
}
.fp-content .box__utility {
  text-align: center;
}