/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" rel="stylesheet"> */
/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   Normalize.css is intended to be used as an alternative to CSS resets.

   It is suggested that you read through the normalize.css file and customise it
   to meet the design requirements of a project rather including it as a "black
   box". @see http://nicolasgallagher.com/about-normalize-css/

   Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
         @see http://snook.ca/archives/html_and_css/no_css_reset/
   ========================================================================== */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
audio,
canvas,
video {
  display: inline-block;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 * Remove excess height in iOS5 devices
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
[hidden] {
  display: none;
}

/* =============================================================================
   Base
   ========================================================================== */
/* Instead of relying on the fonts that are available on a user's computer, you
   can use web fonts which, like images, are resources downloaded to the user's
   browser. Because of the bandwidth and rendering resources required, web fonts
   should be used with care.

   Numerous resources for web fonts can be found on Google. Here are a few
   websites where you can find Open Source fonts to download:
   - http://www.fontsquirrel.com/fontface
   - http://www.theleagueofmoveabletype.com

   In order to use these fonts, you will need to convert them into formats
   suitable for web fonts. We recommend the free-to-use Font Squirrel's
   Font-Face Generator:
     http://www.fontsquirrel.com/fontface/generator

   The following is an example @font-face declaration. This font can then be
   used in any ruleset using a property like this:  font-family: Example, serif;

   Since we're using Sass, you'll need to declare your font faces here, then you
   can add them to the font variables in the _base.scss partial.
*/
/*
@font-face {
  font-family: 'Example';
  src: url('../fonts/example.eot');
  src: url('../fonts/example.eot?iefix') format('eot'),
    url('../fonts/example.woff') format('woff'),
    url('../fonts/example.ttf') format('truetype'),
    url('../fonts/example.svg#webfontOkOndcij') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/
/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  /* Establishes a vertical rhythm unit using $base-line-height. */
  line-height: 1.5625em;
}

/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */
html,
button,
input,
select,
textarea {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif, "Open Sans", "Droid Sans";
  color: #444;
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */
body {
  margin: 0;
  padding: 0;
}

/* =============================================================================
   Links
   ========================================================================== */
/*
 * The order of link states are based on Eric Meyer's article:
 * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 */
a {
  text-decoration: none;
  cursor: pointer;
}

a:link {
  text-decoration: none;
}

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

a:active {
  outline: 1px dotted;
}

/*
 * Addresses outline displayed oddly in Chrome
 */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:hover,
a:active {
  outline: 0;
}

/* =============================================================================
   Typography

   To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
   so that the line height of our base font becomes the basic unit of vertical
   measurement. We use multiples of that unit to set the top and bottom margins
   for our block level elements and to set the line heights of any fonts.
   For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7
 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 */
h1 {
  /* Sets the font-size and line-height while keeping a proper vertical rhythm. */
  font-size: 2.8em;
  line-height: 1.11607em;
  /* Sets 1 unit of vertical rhythm on the top and bottom margins. */
  margin-top: 0.625em;
  margin-bottom: 0.46875em;
}

h2 {
  font-size: 2.3em;
  line-height: 1.3587em;
  margin-top: 0.39063em;
  margin-bottom: 0.23438em;
}

h3 {
  font-size: 1.5em;
  line-height: 2.08333em;
  margin-top: 0.23438em;
  margin-bottom: 0.15625em;
}

h4 {
  font-size: 1.15em;
  line-height: 1.3587em;
  margin-top: 0.9375em;
  margin-bottom: 0.78125em;
}

h5 {
  font-size: 0.9em;
  line-height: 1.73611em;
  margin-top: 0.9375em;
  margin-bottom: 0.78125em;
}

h6 {
  font-size: 0.75em;
  line-height: 2.08333em;
  margin-top: 0.9375em;
  margin-bottom: 0.78125em;
}

/* Thematic break */
hr {
  height: 0;
  border: 0;
  margin: 1.5625em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
abbr[title] {
  border-bottom: 1px dotted;
  cursor: help;
  white-space: nowrap;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
b,
strong {
  font-weight: bold;
}

blockquote {
  /* Sets 1 unit of vertical rhythm on the top and bottom margin. */
  margin: 1.5625em 10px;
}

/*
 * Addresses styling not present in S5, Chrome
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */
mark {
  background-color: #ff0;
  padding: 10px 15px;
}

/*
 * Addresses margins set differently in IE6/7
 */
p,
pre {
  /* Sets 1 unit of vertical rhythm on the top and bottom margin. */
  margin: 15px 0;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
pre,
code,
kbd,
samp,
tt,
var {
  font-family: Consolas, Monaco, Menlo, "Lucida Console", "Courier New", monospace;
  /* The $mono-font-family value ends with ", serif". */
  font-size: 1em;
  line-height: 1.5625em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
/* 1 */
q {
  quotes: none;
}

/* 2 */
q:before,
q:after {
  content: '';
  content: none;
}

/* @todo Determine how big element affects vertical rhythm. */
small {
  font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* =============================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7
 */
dl,
menu,
ol,
ul {
  /* Sets 1 unit of vertical rhythm on the top and bottom margin. */
  margin: 10px 15px;
}

dd {
  margin: 0 0 0 10px;
  /* LTR */
}

ul ul, ul ol, ol ul, ol ol {
  margin: 0;
  /* Turn off margins on nested lists. */
}

/*
 * Addresses paddings set differently in IE6/7
 */
menu,
ol,
ul {
  padding: 0 0 0 10px;
  /* LTR */
}

/*
 * Corrects list images handled incorrectly in IE7
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
  /* vertical-align: bottom; */
  /* Suppress the space beneath the baseline */
  /* Responsive images */
  /* @todo Add responsive embedded video. */
  max-width: 100%;
  height: auto;
}

/*
 * Corrects overflow displayed oddly in IE9
 */
svg:not(:root) {
  overflow: hidden;
}

/* =============================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
figure {
  margin: 0;
}

/* =============================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7
 */
form {
  margin: 0;
}

/*
 * Define consistent border, margin, and padding
 */
fieldset {
  margin: 0 2px;
  border: 1px solid #dddddd;
  padding: 20px 25px;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3
 * 3. Corrects alignment displayed oddly in IE6/7
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */
button,
input {
  line-height: normal;
  /* 1 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 1 */
  -webkit-appearance: button;
  /* 2 */
}

/*
 * Re-set default cursor for disabled elements
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */
input[type="checkbox"],
input[type="radio"] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  margin: 0;
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  /* 2 */
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
  resize: vertical;
}

/* =============================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  /* Prevent cramped-looking tables */
  /* Add vertical rhythm margins. */
  margin-top: 1.5625em;
  margin-bottom: 1.5625em;
  margin-left: 0;
  margin-right: 0;
}

main > .main, [role=main] > .main, .main-nav nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 15px;
}

.content-block, .page-job .main .wide-content-block,
.page-job .main .sidebar-block {
  background-color: #fff;
  padding: 10px 15px;
  box-shadow: 0 0 5px #dddddd;
  margin-bottom: 25px;
}

.page-profile .main .employers-job-list dl, .job-list dl {
  margin: 0;
  border-top: 1px solid #eaeaea;
  padding: 10px 0;
}
.page-profile .main .employers-job-list dl:first-child, .job-list dl:first-child {
  padding-top: 0;
  border-top: 0;
}
.page-profile .main .employers-job-list dl h4, .job-list dl h4 {
  margin: 0;
}
.page-profile .main .employers-job-list dl dd, .job-list dl dd {
  font-size: small;
  margin-left: 0;
  color: #919191;
}
.page-profile .main .employers-job-list dl:hover, .job-list dl:hover {
  background-color: #f7f7f7;
}
.page-profile .main .employers-job-list dl:hover dd, .job-list dl:hover dd {
  color: #444;
}

html {
  background-color: #dddddd;
}

hr {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #fff;
}

a {
  color: #18c;
}

.small {
  font-size: 80%;
}

main, [role=main] {
  background-color: #f7f7f7;
  display: block;
}
main a:hover, [role=main] a:hover {
  text-decoration: underline;
}

.fixed-top-nav .main-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}
.fixed-top-nav main, .fixed-top-nav [role=main] {
  margin-top: 2.8125em;
}

@media (min-width: 768px) {
  .on-mobile {
    display: none;
  }
}

@media (min-width: 0) and (max-width: 767px) {
  .on-desktop {
    display: none;
  }
}

.rooms {
  display: flex;
  margin-top: 1.5625em;
  margin-bottom: 1.5625em;
}
@media (min-width: 0) and (max-width: 767px) {
  .rooms {
    flex-wrap: wrap;
  }
}
.rooms.rooms-3 .room {
  width: 33%;
  margin: 15px 10px;
}
@media (min-width: 0) and (max-width: 767px) {
  .rooms.rooms-3 .room {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
.rooms.wrap {
  flex-wrap: wrap;
}
.rooms .room {
  clear: both;
}
@media (min-width: 0) and (max-width: 767px) {
  .rooms .room {
    width: 100%;
  }
}
.rooms .room.wide {
  width: 100%;
}
.rooms .room.room1 .room-heading {
  background-color: #18c;
  color: #fff;
}
.rooms .room.room2 .room-heading {
  background-color: #f70;
  color: #fff;
}
.rooms .room.room3 .room-heading {
  background-color: #0c0;
  color: #fff;
}
.rooms .room .room-heading {
  font-size: 1.4em;
  font-weight: 400;
  text-align: center;
  background-color: #eaeaea;
  margin: -15px;
  padding: 5px 0;
}
.rooms .room .room-content {
  padding: 20px 0;
}
.rooms .room .room-content .summary {
  font-size: small;
}
.rooms .room .room-content .room-content-list {
  display: block;
  clear: both;
  border-top: 1px solid #eaeaea;
  padding: 10px 0;
}
.rooms .room .room-content .room-content-list:first-child {
  border-top: 0;
}
.rooms .room .room-content .room-content-list .list-heading {
  margin: 0;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  to {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  -moz-animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

.symbol {
  display: inline-block;
}
.symbol:hover {
  text-decoration: none !important;
}
.symbol.symbol-cross:before {
  content: "\2716";
}

.processing:before {
  content: "";
  /*\21BB*/
  border: 2px solid;
  border-right-color: transparent;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
  -moz-animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

.main-nav {
  background-color: #fff;
  border-bottom: 1px solid #dddddd;
}
.main-nav nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.main-nav nav .logo {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  margin-right: 10px;
}
.main-nav nav .MenuTogglerCheckbox {
  width: 0;
  height: 0;
}
.main-nav nav .MenuTogglerCheckbox:checked ~ .MenuToggler ~ ul {
  display: block;
  position: absolute;
  right: 15px;
  background-color: #fff;
  top: 45px;
  box-shadow: 0 0 5px #919191;
}
.main-nav nav .MenuTogglerCheckbox:checked ~ .MenuToggler ~ ul li {
  float: none;
  display: block;
  border-bottom: 1px solid #eaeaea;
}
.main-nav nav .MenuToggler {
  margin: 8px 0 8px 10px;
}
.main-nav nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-nav nav > ul li {
  border-left: 1px solid #eaeaea;
  float: left;
}
.main-nav nav > ul li:first-child {
  border-left: 0;
}
.main-nav nav > ul li a {
  display: block;
  padding: 10px;
}
.main-nav nav > ul li a:hover {
  background-color: #f7f7f7;
  color: #444;
}
.main-nav nav > ul li a.active {
  background-color: #23a3ed;
  color: #fff;
}

label {
  white-space: nowrap;
  display: inline-block;
  width: 30%;
  opacity: .6;
  vertical-align: top;
  padding-top: 5px;
}
@media (min-width: 0) and (max-width: 767px) {
  label {
    display: block;
  }
}

input {
  padding: 5px 10px;
}
input[type=text], input[type=email], input[type=url], input[type=password], input[type=date], input[type=number], input[type=search] {
  background-color: #fff;
  width: 50%;
  border: 1px solid #dddddd;
}
@media (min-width: 0) and (max-width: 767px) {
  input[type=text], input[type=email], input[type=url], input[type=password], input[type=date], input[type=number], input[type=search] {
    width: 90%;
  }
}
input[type=date] {
  width: auto;
  padding: 2px 5px;
}
input[name=jobTitle] {
  width: 75%;
}
input #newSkillName {
  width: auto;
  display: inline-block;
}
input:hover {
  border-color: #444;
}

select {
  border: 1px solid #dddddd;
  padding: 4px;
}
select option[disabled] {
  display: none;
}
select:hover {
  border-color: #444;
}

textarea {
  width: 50%;
  padding: 5px 10px;
  border: 1px solid #dddddd;
}
textarea:hover {
  border-color: #444;
}

button,
input[type=button],
input[type=submit],
.button {
  padding: 5px 10px;
  background-color: #f7f7f7;
  color: inherit;
  border: 1px solid #dddddd;
  width: auto;
  border-radius: 3px;
  user-select: none;
  vertical-align: top;
}
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
.button:hover {
  background-color: #eaeaea;
  border-color: #444;
}
button.button-big,
input[type=button].button-big,
input[type=submit].button-big,
.button.button-big {
  font-size: 1em;
  padding: 10px 15px;
}
button.button-small,
input[type=button].button-small,
input[type=submit].button-small,
.button.button-small {
  font-size: .8em;
  padding: 2px 5px;
}
button.button-danger,
input[type=button].button-danger,
input[type=submit].button-danger,
.button.button-danger {
  background-color: #f00;
  border-color: #f00;
  color: #fff;
}

.button-primary,
input[type=submit] {
  margin-bottom: 5px;
  background-color: #18c;
  color: #fff;
  border: 1px solid #18c;
}
.button-primary:hover,
input[type=submit]:hover {
  background-color: #23a3ed;
  color: #fff;
  border-color: #23a3ed;
}
.button-primary:active,
input[type=submit]:active {
  margin-top: 2px;
  margin-bottom: 3px;
}

.form.form-sign-in, .form.form-sign-up, .form.form-forgot-password, .form.form-reset-password, .form.form-change-password {
  max-width: 600px;
  margin: 0 auto;
}
.form.add-job form > p > label, .form.edit-job form > p > label {
  width: 18%;
}
.form.add-job form > p input#newSkillName, .form.edit-job form > p input#newSkillName {
  width: auto;
}
.form.add-job .job-skills-wrapper, .form.edit-job .job-skills-wrapper {
  display: inline-block;
  width: 75%;
}
.form form p:hover > label {
  opacity: 1;
}

.role-buttons {
  display: flex;
}
.role-buttons label {
  opacity: 1;
  width: 50%;
  padding: 10px;
  margin: 10px;
  margin-bottom: 0;
  text-align: center;
  white-space: normal;
  position: relative;
}
.role-buttons input[name=userRole] {
  width: 0;
  height: 0;
}
.role-buttons input[name=userRole]:checked + label {
  background-color: #0d699d;
  color: #fff;
  border: 0;
  font-weight: 700;
}
.role-buttons input[name=userRole]:checked + label:before {
  content: "\2714";
  color: #f70;
  font-size: 2em;
  margin-right: 10px;
  position: absolute;
  top: -30px;
}

.AddNewSkillContainer #AddNewSkillForm {
  display: none;
}
.AddNewSkillContainer.showForm #AddNewSkillFormToggle {
  display: none;
}
.AddNewSkillContainer.showForm #AddNewSkillForm {
  display: inline-block;
}

.form-message {
  font-weight: 700;
  font-size: .85em;
  background-color: #fff;
  border-width: 1px;
  border-style: dotted;
  border-left-width: 5px;
  box-shadow: 2px 2px 2px #dddddd;
  padding: 5px 10px;
  display: none;
}
.form-message.error {
  border-color: #f00;
  display: block;
  margin-top: 1.5625em;
}
.form-message.success {
  border-color: #0c0;
  display: block;
  margin-top: 1.5625em;
}
.form-message.info {
  border-color: #23a3ed;
  display: block;
  margin-top: 1.5625em;
}

.row-error {
  background-color: #ffe6e6;
}

.row-success {
  background-color: #e6ffe6;
}

.main-nav form {
  display: flex;
}
.main-nav form select {
  margin: 0 5px;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5625em;
}
.profile-row strong {
  font-size: 1.2em;
}

.profile-view > p,
.profile-edit > p {
  font-weight: 700;
}
.profile-view table,
.profile-edit table {
  margin: 0;
}
.profile-view table th,
.profile-edit table th {
  text-align: left;
  padding: 0 10px;
  font-size: small;
}
.profile-view table td,
.profile-edit table td {
  padding: 5px 10px;
  vertical-align: top;
}
.profile-view table td textarea,
.profile-view table td input,
.profile-edit table td textarea,
.profile-edit table td input {
  width: 94%;
}
.profile-view table td input.year,
.profile-edit table td input.year {
  width: 55px;
  padding-right: 0;
}
.profile-view table tfoot td,
.profile-edit table tfoot td {
  padding-top: 25px;
}

.user-education-table td {
  border: 1px solid #eaeaea;
}

.user-experience-list li {
  margin-bottom: 1.5625em;
}

.DeleteItem {
  padding: 3px 10px;
  margin-left: 10px;
}
.DeleteItem:not(.processing):before {
  content: "\2716";
  display: inline-block;
}
.DeleteItem:hover {
  background-color: #f00;
  border-color: #f00;
  color: #fff;
}

.skills-selected span {
  display: inline-block;
  border: 1px solid #dddddd;
  background-color: #fff;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  border-radius: 15px;
  cursor: default;
}
.skills-selected span a {
  color: #dddddd;
  margin-left: 5px;
  font-size: small;
  display: inline-block;
}
.skills-selected span a:before {
  content: "\2716";
}
.skills-selected span a:hover {
  text-decoration: none !important;
}
.skills-selected span:hover {
  border-color: #444;
}
.skills-selected span:hover a {
  color: #f00;
}

.skill {
  display: inline-block;
  border: 1px solid #dddddd;
  padding: 0 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  border-radius: 15px;
  background-color: #fff;
}
.skill:hover {
  background-color: #f7f7f7;
  border-color: #444;
  color: inherit;
  text-decoration: none;
}
.skill.active {
  background-color: #18c;
  border-color: #18c;
  color: #fff;
  text-decoration: none;
}

.inline-users ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 0.78125em;
}
.inline-users ul li {
  display: inline-block;
  border: 1px solid #dddddd;
  background-color: #fff;
  padding: 0 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.inline-users ul li:hover {
  border-color: #919191;
}
.inline-users ul li .remove {
  color: #dddddd;
  margin-left: 5px;
  font-size: small;
  display: inline-block;
}
.inline-users ul li .remove:before {
  content: "\2716";
}
.inline-users ul li .remove:hover {
  text-decoration: none !important;
  color: #f00;
}

.user-list-heading {
  margin-top: 0;
  margin-bottom: 0.78125em;
  line-height: inherit;
}
.user-list-heading span {
  color: #f00;
  font-weight: 400;
}

.user-list-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.user-list-container .user-list {
  color: #919191;
  border: 1px solid #eaeaea;
  padding: 10px 15px;
  width: 300px;
  margin: 0 20px 20px 0;
  /*
   *  $colors = array('18c', '0b0', 'f70', 'f00', '50C7FF', '77D7A5', 'DD7AFD', 'DD856A', 'C37854');
   *  <big style='background-color: #". $colors[array_rand($colors)] .";'>". ucfirst(substr($value['name'], 0, 1)) ."</big>    
  */
}
.user-list-container .user-list:hover {
  box-shadow: 0 0 5px #919191;
}
.user-list-container .user-list > h4 {
  margin: 0;
}

.page-job .main {
  display: flex;
}
.page-job .main .wide {
  width: 70%;
  margin-right: 20px;
}
.page-job .main .sidebar {
  width: 30%;
  margin-top: 1.5625em;
}
.page-job .main .sidebar > h4 {
  margin: 0 0 10px 0;
  line-height: 1;
  font-weight: 400;
}
.page-job .main .wide-content-block {
  padding: 20px 25px;
  margin-top: 1.5625em;
}
.page-job .main .wide-content-block > h1,
.page-job .main .wide-content-block .job-list-heading {
  margin-top: 0em;
}
.page-job .main .wide-content-block summary {
  border-bottom: 1px solid #dddddd;
}
.page-job .main .wide-content-block summary h1 {
  margin-top: 0em;
  margin-bottom: 0;
}
.page-job .main .suitable-candidates h4,
.page-job .main .comments h4 {
  margin-top: 0;
}

.toggle-job-applied .applied {
  display: none;
}
.toggle-job-applied .not-applied {
  display: inline;
}
.toggle-job-applied.true .applied {
  display: inline;
}
.toggle-job-applied.true .not-applied {
  display: none;
}

.job-list > h1,
.job-list .job-list-heading {
  margin-top: 0;
  margin-bottom: 0.78125em;
  line-height: inherit;
  font-weight: 400;
}
.job-list > h1 span,
.job-list .job-list-heading span {
  color: #f00;
  font-weight: 400;
}

.job-image {
  background-image: url("../images/computer.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 75px;
  padding-left: 100px !important;
}

.delete-action {
  display: none;
}

.comments ul {
  margin: 20px 0;
  list-style: none;
  padding: 0;
}
.comments ul li {
  padding: 10px;
  border-top: 1px solid #eaeaea;
}
.comments ul li:first-child {
  padding-top: 0;
  border-top: 0;
}
.comments ul li:nth-child(even) {
  background-color: #f7f7f7;
}
.comments ul li.my-comment {
  background-color: #e0f2fc;
}
.comments ul li > div:first-child {
  font-size: small;
}
.comments ul li .delete-comment {
  float: right;
}
.comments ul li .delete-comment:hover {
  color: #f00;
}
.comments textarea {
  display: block;
  height: 100px;
  width: 97%;
  margin-bottom: 0.78125em;
}

.main-nav form * {
  vertical-align: bottom;
}
.main-nav form input[type=submit] {
  margin: 0;
}

.page-search .wide {
  margin-top: 1.5625em;
}

.aptitude-questions table tbody tr:nth-child(even) {
  background-color: #fcfcfc;
}
.aptitude-questions table tbody tr:hover {
  background-color: #eaeaea;
}
.aptitude-questions table tbody tr.answered td:first-child b {
  padding-right: 10px;
}
.aptitude-questions table tbody tr.answered td:first-child b:before {
  content: "\2713";
  color: #fff;
  padding: 0px 6px;
  background-color: #0c0;
  border-radius: 50%;
  display: inline-block;
}
.aptitude-questions table tbody tr td {
  padding: 5px;
}
.aptitude-questions table tbody tr td.question {
  font-weight: 700;
}
.aptitude-questions table tbody tr td .button-group {
  display: flex;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #fff;
  user-select: none;
}
.aptitude-questions table tbody tr td .button-group input {
  width: 0;
  height: 0;
}
.aptitude-questions table tbody tr td .button-group input:checked + label {
  background-color: #81cbf5;
  color: #fff;
}
.aptitude-questions table tbody tr td .button-group label {
  padding: 2px 10px;
  border-left: 1px solid #dddddd;
  margin: 0;
  opacity: 1;
  text-align: center;
}
.aptitude-questions table tbody tr td .button-group label:hover {
  background-color: #f7f7f7;
}
.aptitude-questions table tbody tr td .button-group label.first-option {
  border-left: 0;
  border-radius: 5px 0 0 5px;
}
.aptitude-questions table tbody tr td .button-group label.last-option {
  border-radius: 0 5px 5px 0;
}
.aptitude-questions table tbody tr td .button-group label.selected {
  background-color: #81cbf5;
  color: #fff;
}

.page-aptitude-test-result dl {
  margin: 0;
  display: flex;
}
.page-aptitude-test-result dl.dl-0 {
  background-color: #fff;
}
.page-aptitude-test-result dl.dl-0 dt.dt-0 {
  background-color: #0c0;
}
.page-aptitude-test-result dl dt {
  padding: 10px 15px;
  white-space: nowrap;
  text-align: center;
  color: #fff;
}
.page-aptitude-test-result dl dt.dt-0 {
  background-color: #1188cc;
}
.page-aptitude-test-result dl dt.dt-1 {
  background-color: #1395df;
}
.page-aptitude-test-result dl dt.dt-2 {
  background-color: #1aa0ec;
}
.page-aptitude-test-result dl dt.dt-3 {
  background-color: #2da7ed;
}
.page-aptitude-test-result dl dt.dt-4 {
  background-color: #40afef;
}
.page-aptitude-test-result dl dt.dt-5 {
  background-color: #52b7f1;
}
.page-aptitude-test-result dl dt.dt-6 {
  background-color: #65bff2;
}
.page-aptitude-test-result dl dt.dt-7 {
  background-color: #78c7f4;
}
.page-aptitude-test-result dl dt.dt-8 {
  background-color: #8bcff5;
}
.page-aptitude-test-result dl dt * {
  display: block;
}
.page-aptitude-test-result dl dt big {
  font-weight: 700;
  font-size: 2em;
}
.page-aptitude-test-result dl dd {
  margin-left: 20px;
}
.page-aptitude-test-result dl dd .career-type {
  margin-top: 0;
  text-transform: capitalize;
}

footer {
  display: flex;
  justify-content: center;
  padding: 10px 15px;
  font-size: small;
  border-top: 1px solid #dddddd;
}

.error {
  color: #f00;
}

.success {
  color: #0c0;
}

.info {
  color: #23a3ed;
}

.orange {
  color: #f70;
}

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

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

.load-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.load-more .paginator {
  text-align: center;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  background-color: #f7f7f7;
  padding: 5px 10px;
  border-radius: 3px;
  user-select: none;
}
.load-more .paginator.newer:before {
  content: "\276E";
  padding-right: 10px;
}
.load-more .paginator.older:after {
  content: "\276F";
  padding-left: 10px;
}
.load-more span {
  cursor: default;
  color: #dddddd;
  border-color: #eaeaea;
}
.load-more a.paginator {
  cursor: pointer;
  color: #fff;
  background-color: #18c;
  border-color: #18c;
  margin-bottom: 5px;
}
.load-more a.paginator:hover {
  background-color: #23a3ed;
  border-color: #23a3ed;
  text-decoration: none;
}
.load-more a.paginator:active {
  margin-top: 2px;
  margin-bottom: 3px;
}

tbody tr:not(.row-error):hover {
  background-color: #f7f7f7;
}

.mce-stack-layout .mce-statusbar.mce-stack-layout-item {
  border: 0;
}
.mce-stack-layout .mce-statusbar.mce-stack-layout-item .mce-path, .mce-stack-layout .mce-statusbar.mce-stack-layout-item .mce-label {
  display: none;
}