@charset "UTF-8";

/*********************
BREAKPOINTS
*********************/

button {
  outline: none;
}

button:focus {
  outline: none;
  outline: none;
}

.custom__sidebar {
  font-family: "Montserrat", sans-serif;
  width: 176px;
  background: #fff;
  color: #6B6B6B;
  border-right: 1px solid #DEE0E1;
  padding-top: 0px;
  transition: width 0.3s;
}

.custom__sidebar .logo {
  width: 176px;
  background: #fff;
  border-bottom: 1px solid #DEE0E1;
  height: 80px;
  font-size: 22px;
  color: #333333;
  border-right: 1px solid #DEE0E1;
  padding: 0;
}

.custom__sidebar .logo div {
  margin: 0 auto;
}

.custom__sidebar .logo .collapsed {
  display: none;
}

.custom__sidebar.desktop-collapsed {
  transition: width 0.3s;
  width: 69px;
}

.custom__sidebar.desktop-collapsed .logo {
  width: 69px;
}

.custom__sidebar.desktop-collapsed .logo .non-collapsed {
  display: none;
}

.custom__sidebar.desktop-collapsed .logo .collapsed {
  display: initial;
}

.custom__sidebar.desktop-collapsed .logo .collapsed .title {
  color: #F7A812;
}

.custom__content {
  max-width: unset;
}

@media (min-width: 993px) and (max-width: 80rem) {
  .custom__content {
    max-width: calc(100% - 176px) !important;
  }
}

.custom__content .header {
  height: 50px;
  box-shadow: none;
  border-bottom: 1px solid #DEE0E1;
  padding-left: 28px;
  padding-right: 0;
}

.custom__content .header .nav-btn span {
  width: 19px;
  margin-bottom: 5px;
  display: block;
  border-bottom: 1px solid #333333;
}

.custom__content .header .user--moodle-icon {
  margin-left: auto;
}

.custom__content .header .user--moodle-icon img {
  width: 40px;
  margin-top: 10px;
}

.custom__content .header .user--moodle {
  margin-left: 5px;
  margin-right: 40px;
  color: inherit;
}

.custom__content .header .user--moodle span {
  margin: auto;
  font-size: 14px;
  font-weight: 600;
  text-shadow: none;
  color: #000;
}

.custom__content .header .user--moodle .btn {
  background-color: lightgray;
  border-radius: 5px;
  padding: 10px;
}

.custom__content .header .user--moodle .btn:hover {
  cursor: pointer;
  background-color: #BCD200;
}

.custom__content .header .user--emails {
  margin-right: 40px;
}

.custom__content .header .user--emails .icon {
  font-size: 28px;
  display: block;
  margin: auto;
  color: #6B6B6B;
}

.custom__content .header .user--notifications {
  margin-right: 45px;
  right: 0;
}

.custom__content .header .user--notifications .icon {
  font-size: 28px;
  color: #6B6B6B;
}

.custom__content .header .user--data {
  display: flex;
  align-items: center;
}

.custom__content .header .user--data .avatar {
  height: 50px;
  width: 50px;
  margin: 0;
  border-radius: unset;
}

.custom__content .header .user--data .user-info {
  padding-right: 32px;
}

.custom__content .header .user--data .icon {
  padding-left: 15px;
}

.custom__content .custom__container {
  padding: 15px 15px 58px 15px;
  font-family: "Montserrat", sans-serif !important;
}

.content div[dusk$=detail-component] .custom__header {
  background-color: #fff;
  width: 100%;
}

.content div[dusk$=detail-component] .custom__header .wrapper {
  width: 100%;
  display: block;
  padding: 22px 32px 40px;
}

.content div[dusk$=detail-component] .custom__header .wrapper .link {
  margin-bottom: 40px;
}

.content div[dusk$=detail-component] .custom__header .wrapper .image {
  width: 96px;
  height: 96px;
}

.content div[dusk$=detail-component] .custom__header .wrapper .image img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.content div[dusk$=detail-component] .custom__header .wrapper .info {
  display: table;
  margin: auto 0;
  width: 100%;
}

.content div[dusk$=detail-component] .custom__header .wrapper .info .title {
  display: block;
}

.content div[dusk$=detail-component] .custom__header .wrapper .info .title .name {
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

.content div[dusk$=detail-component] .custom__header .wrapper .info .title .name .job {
  margin-top: 9px;
  font-size: 18px;
  font-weight: 300;
  line-height: 18px;
  color: #A3A3A3;
  display: flex;
}

.content div[dusk$=detail-component] .custom__grouped-fields .hideFromDetail {
  display: none;
}

.custom-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: #fff;
  border: 1px solid #cacece;
  border-radius: 0;
  display: inline-block;
  position: relative;
  outline: none;
  width: 19px;
  height: 19px;
}

.custom-checkbox:hover {
  cursor: pointer;
  background-color: #BCD200;
}

.custom-checkbox:checked {
  background-color: #8BAD00;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: #99a1a7;
}

.custom-checkbox:checked:after {
  content: "\2713";
  font-size: 16px;
  position: absolute;
  top: 0;
  left: 3px;
  color: white !important;
}

input[type=radio],
.custom-radio {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: #fff;
  border: 1px solid #cacece;
  position: relative;
  outline: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

input[type=radio]:hover,
.custom-radio:hover {
  cursor: pointer;
  background-color: #BCD200;
}

input[type=radio]:checked,
.custom-radio:checked {
  background-color: #fff;
  border: 1px solid #8BAD00;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: #99a1a7;
}

input[type=radio]:checked:after,
.custom-radio:checked:after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: #8BAD00 !important;
  border-radius: 50%;
}

.custom-button {
  background-color: #8BAD00;
  color: #fff;
  width: 100%;
  display: flex;
  line-height: normal;
  min-height: 51px;
}

.custom-button span {
  margin: auto;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: none;
}

.custom-button:hover {
  cursor: pointer;
  background-color: #BCD200;
}

.custom-button:hover span {
  color: #fff;
}

.custom-button:focus,
.custom-button:active {
  box-shadow: none !important;
}

.custom-button--secondary {
  background-color: #BCD200;
}

.custom-button--secondary span {
  color: #fff;
}

.custom-button--secondary:hover {
  opacity: 0.5;
}

.custom-button--secondary:hover span {
  color: #fff;
  opacity: 0.7;
}

.custom-button--bordered {
  background-color: transparent;
  border: 1px solid #BCD200;
  color: #BCD200;
}

.custom-button--bordered span {
  color: #BCD200;
}

.custom-button--bordered:hover {
  color: #fff;
}

.custom-button--bordered:hover span {
  color: #fff;
}

.action-button {
  padding: 20px 75px 81px;
}

button[disabled=disabled] {
  opacity: 0.7;
}

button[disabled=disabled]:hover {
  cursor: not-allowed;
}

.filter__container {
  position: relative;
  width: 100%;
  /* firefox 19+ */
}

.filter__container .icon {
  position: absolute;
  right: 0;
}

.filter__container input[placeholder] {
  text-overflow: ellipsis;
}

.filter__container ::-moz-placeholder {
  text-overflow: ellipsis;
}

.filter__container input:-moz-placeholder {
  text-overflow: ellipsis;
}

.filter--input {
  color: #333333;
  font-size: 12px;
  font-weight: 600;
  height: 15px;
  float: left;
  padding-right: 10px;
  text-transform: uppercase;
  background-color: transparent;
  width: 100%;
}

.filter--input:focus {
  outline: none;
}

.filter--input:focus::-moz-placeholder {
  color: transparent;
}

.filter--input:focus::placeholder {
  color: transparent;
}

.filter--input:focus .option {
  text-transform: none;
}

.filter--input.text:focus {
  text-transform: none;
}

.filter--input::-moz-placeholder {
  color: black;
  text-transform: uppercase;
  opacity: 1;
  /* Firefox */
}

.filter--input::placeholder {
  color: black;
  text-transform: uppercase;
  opacity: 1;
  /* Firefox */
}

.filter--select.v-select .vs__dropdown-toggle {
  border: none;
}

.filter--select.v-select .vs__search {
  text-transform: uppercase;
  color: #333333;
  font-size: 12px;
  font-weight: 600;
  height: 15px;
}

.filter--select.v-select .vs__search::-moz-placeholder {
  color: black;
  text-transform: uppercase;
  opacity: 1;
  /* Firefox */
}

.filter--select.v-select .vs__search::placeholder {
  color: black;
  text-transform: uppercase;
  opacity: 1;
  /* Firefox */
}

.filter--select.v-select .vs__dropdown-menu {
  display: block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  padding: 5px 0;
  margin: 0;
  width: 100%;
  overflow-y: auto;
  text-align: left;
  list-style: none;
}

.filter--select.v-select .vs__dropdown-option {
  color: black;
  font-size: 12px;
  white-space: normal;
}

.filter--select.v-select .vs__dropdown-option--noresults {
  color: #A3A3A3;
  font-size: 12px;
}

.filter--select.v-select .vs__dropdown-option--highlight,
.filter--select.v-select .vs__dropdown-option:hover {
  color: #fff;
  background-color: #8BAD00;
}

.filter--select.v-select .vs__selected {
  font-size: 12px;
  height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  position: absolute;
  width: 90%;
  bottom: 0;
  top: 0;
}

.filter--select.v-select .vs__open-indicator {
  transform: none !important;
}

.login__container {
  display: flex;
  height: 100%;
  font-family: "Montserrat", sans-serif;
  position: relative;
  background-image: url("/img/Bidatalent-gradient.png");
  background-size: cover;
}

@media (max-width: 991px) {
  .login__container {
    background: url("http://localhost:8000/img/bidalogin.png") no-repeat;
    background-size: cover;
  }
}

.login__image {
  position: absolute;
  height: 100%;
  width: 571px;
  z-index: 0;
  background-image: url("/img/bidalogin.png");
  background-size: cover;
}

@media (max-width: 991px) {
  .login__image {
    display: none;
  }
}

.login__wrapper {
  margin: auto;
  width: 34%;
  max-width: 597px;
  min-width: 500px;
}

@media (max-width: 991px) {
  .login__wrapper {
    margin-left: auto;
    transform: unset;
  }
}

.login__wrapper .login-form {
  background-color: #fff;
  padding: 50px 25px 90px 25px;
  border-radius: 8px;
  z-index: 1;
  position: relative;
  min-height: 600px;
}

.login__wrapper .login-form .logo {
  display: block;
  margin: 0 auto 10px;
}

.login__wrapper .login-form .hiddenlable {
  margin-top: 70px;
}

.login__wrapper .login-form .page-logo {
  color: #333333;
  font-size: 22px;
  text-align: center;
  margin-bottom: 36px;
}

.login__wrapper .login-form .page-logo img {
  width: 174px;
}

.login__wrapper .login-form .login-primary-btn {
  margin-top: 24px;
  background-color: #8BAD00;
  border-radius: 5px;
  color: #fff;
  width: 100%;
  display: flex;
  line-height: normal;
  min-height: 65px;
}

.login__wrapper .login-form .login-primary-btn span {
  margin: auto;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: none;
}

.login__wrapper .login-form .login-primary-btn:hover {
  cursor: pointer;
  background-color: #BCD200;
}

.login__wrapper .login-form .login-secundary-btn {
  margin-top: 24px;
  background-color: #fff;
  border-color: #8BAD00;
  border-radius: 5px;
  color: #8BAD00;
  width: 100%;
  display: flex;
  line-height: normal;
  min-height: 65px;
}

.login__wrapper .login-form .login-secundary-btn span {
  margin: auto;
  font-size: 14px;
  font-weight: 600;
  text-shadow: none;
}

.login__wrapper .login-form .login-secundary-btn:hover {
  cursor: pointer;
  color: #BCD200;
  border-color: #BCD200;
}

.login__wrapper .login-form .input__wrapper {
  position: relative;
}

.login__wrapper .login-form .input__wrapper .login--label {
  color: #F7A812;
  font-size: 12px;
  margin-bottom: 0;
}

.login__wrapper .login-form .input__wrapper .login--input {
  border: none;
  border-bottom: 1px solid #333333;
  width: 100%;
  outline: none;
  background-color: transparent;
  font-size: 14px;
  padding: 3px 0;
  margin-bottom: 15px;
}

.login__wrapper .login-form .input__wrapper .icon {
  position: absolute;
  right: 6px;
  top: 27px;
  bottom: auto;
  font-size: 18px;
}

.login__wrapper .login-form .help__wrapper {
  display: flex;
  margin-top: 11px;
  margin-bottom: 24px;
}

.login__wrapper .login-form .help__wrapper .checkbox__wrapper {
  display: inline-flex;
}

.login__wrapper .login-form .help__wrapper .checkbox__wrapper .checkbox-label {
  font-size: 12px;
  color: #6B6B6B;
  margin-left: 6px;
}

.login__wrapper .login-form .help__wrapper .reset-password__wrapper {
  margin-left: auto;
  color: #8BAD00;
  font-size: 12px;
}

.login__wrapper .login-form .help__wrapper .reset-password__wrapper a {
  color: inherit;
}

@font-face {
  font-family: "icomoon";
  src: url(/fonts/icomoon.eot?96a11a6a70dbdc1831947e7801eedf4d);
  src: url(/fonts/icomoon.eot?96a11a6a70dbdc1831947e7801eedf4d) format("embedded-opentype"), url(/fonts/icomoon.ttf?d250faebe7c5abad4fb922d77a0673e3) format("truetype"), url(/fonts/icomoon.woff?ba6fd6aac2bd546b9692d834192dd577) format("woff"), url(/fonts/icomoon.svg?a211d15cf0d847f8a93fae375947a559) format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-filter-down:before {
  content: "\E91A";
}

.icon-filter-up:before {
  content: "\E90E";
}

.icon-filter:before {
  content: "\E91B";
  font-size: 1.5rem;
  padding-right: 0.2em;
  cursor: pointer;
}

.icon-filter-active:before {
  content: "\E91C";
  font-size: 1.5rem;
  padding-right: 0.2em;
  cursor: pointer;
  color: #8bad00;
}

.icon-descarga:before {
  content: "\E912";
}

.icon-nuevo-archivo:before {
  content: "\E919";
}

.icon-user:before {
  content: "\E915";
}

.icon-validations:before {
  content: "\E917";
}

.icon-admin:before {
  content: "\E914";
}

.icon-xml:before {
  content: "\E916";
}

.icon-point:before {
  content: "\E913";
}

.icon-dashboard:before {
  content: "\E900";
}

.icon-employees:before {
  content: "\E901";
}

.icon-evaluations:before {
  content: "\E910";
}

.icon-resources:before {
  content: "\E902";
}

.icon-providers:before {
  content: "\E903";
}

.icon-costs:before {
  content: "\E904";
}

.icon-help:before {
  content: "\E905";
}

.icon-notificaciones:before {
  content: "\E906";
}

.icon-sugerencias:before {
  content: "\E907";
}

.icon-edit:before {
  content: "\E908";
}

.icon-excel:before {
  content: "\E909";
}

.icon-delete:before {
  content: "\E90A";
}

.icon-duplicate:before {
  content: "\E90B";
}

.icon-dropup:before {
  content: "\E90C";
}

.icon-dropdown:before {
  content: "\E90D";
}

.icon-back:before {
  content: "\E90F";
}

.icon-login_mail:before {
  content: "\E911";
}

.icon-login_password:before {
  content: "\E918";
}

.status {
  color: #fff;
  text-align: center;
  width: 100%;
  height: 18px;
  font-size: 10px;
  display: flex;
  border-radius: 2px;
  text-transform: uppercase;
  background-color: black;
}

.status--expired,
.status--unsigned,
.status--supposition,
.status--pending,
.status--failed {
  background-color: #D13B3B;
}

.status--active,
.status--signed,
.status--complete,
.status--stable,
.status--assigned_complete,
.status--completed,
.status--closed,
.status--approved {
  background-color: #BED249;
}

.status--incomplete,
.status--n1validation,
.status--pendingid,
.status--assigned_incomplete,
.status--not_applicable,
.status--gap {
  background-color: #F7A812;
}

.status--not_assigned,
.status--rrhhvalidation,
.status--pendingpt,
.status--incourse {
  background-color: #00B5CF;
}

.type {
  text-transform: uppercase;
  color: #fff;
  border-radius: 2px;
  font-size: 8px;
  width: 100%;
  height: 14px;
  display: inline-flex;
  max-width: 68px;
  text-align: center;
  align-items: center;
}

.type--type1 {
  background-color: #FFB51C;
}

.type--type2 {
  background-color: #00B5CF;
}

.type--type3 {
  background-color: #48BA00;
}

.type--type4 {
  background-color: #BBD200;
}

.type span {
  margin: auto;
  height: inherit;
  align-items: center;
  display: flex;
}

.notifications {
  position: relative;
}

.notifications__number {
  position: absolute;
  color: #fff;
  width: auto;
  min-width: 12px;
  height: 12px;
  background-color: #8BAD00;
  font-size: 8px;
  font-weight: 600;
  border-radius: 50%;
  text-align: center;
  line-height: 12px;
  bottom: 0;
  right: 0;
}

.notifications__container {
  width: 100vw;
  max-width: 412px;
  box-shadow: 0 2px 4px 0 rgba(185, 185, 185, 0.5);
  background-color: #fff;
  border-radius: 9px;
  margin-top: 10px;
  position: fixed;
}

.notifications__list {
  height: 100%;
  overflow-y: auto;
}

.notifications__wrapper {
  padding: 0px 20px 20px 20px;
  border-color: #F8F8F8;
}

.notifications__link {
  color: inherit;
  text-decoration: none;
  padding-left: 5px;
}

.notifications__link:hover {
  background-color: #f9f9f9;
}

.notifications__item {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #6B6B6B;
  position: relative;
  border-bottom: 1px solid #E5E5E5;
  width: 300px;
}

.notifications__item .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 7px;
}

.notifications__item .date {
  font-size: 14px;
  margin-bottom: 8px;
}

.notifications__item .message {
  font-size: 12px;
  line-height: 21px;
}

/**
    Support for SASS is deprecated as of v3.18.

    The files remain here if your build is dependent on them
    but they will not receive updates in future releases. All
    SASS variables have been translated into CSS variables, so
    migration should be quite simple if you'd like to move over.

    In v4, these files will be removed.
 */

.v-select {
  position: relative;
  font-family: inherit;
}

.v-select,
.v-select * {
  box-sizing: border-box;
}

/* KeyFrames */

@keyframes vSelectSpinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Dropdown Default Transition */

.vs__fade-enter-active,
.vs__fade-leave-active {
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.vs__fade-enter,
.vs__fade-leave-to {
  opacity: 0;
}

/** Component States */

/*
 * Disabled
 *
 * When the component is disabled, all interaction
 * should be prevented. Here we modify the bg color,
 * and change the cursor displayed on the interactive
 * components.
 */

.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__clear,
.vs--disabled .vs__search,
.vs--disabled .vs__selected,
.vs--disabled .vs__open-indicator {
  cursor: not-allowed;
  background-color: rgb(248, 248, 248);
}

/*
 *  RTL - Right to Left Support
 *
 *  Because we're using a flexbox layout, the `dir="rtl"`
 *  HTML attribute does most of the work for us by
 *  rearranging the child elements visually.
 */

.v-select[dir=rtl] .vs__actions {
  padding: 0 3px 0 6px;
}

.v-select[dir=rtl] .vs__clear {
  margin-left: 6px;
  margin-right: 0;
}

.v-select[dir=rtl] .vs__deselect {
  margin-left: 0;
  margin-right: 2px;
}

.v-select[dir=rtl] .vs__dropdown-menu {
  text-align: right;
}

/**
    Dropdown Toggle

    The dropdown toggle is the primary wrapper of the component. It
    has two direct descendants: .vs__selected-options, and .vs__actions.

    .vs__selected-options holds the .vs__selected's as well as the
    main search input.

    .vs__actions holds the clear button and dropdown toggle.
 */

.vs__dropdown-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  padding: 0 0 4px 0;
  background: none;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  white-space: normal;
}

.vs__selected-options {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0 2px;
  position: relative;
}

.vs__actions {
  display: flex;
  align-items: center;
  padding: 4px 6px 0 3px;
}

/* Dropdown Toggle States */

.vs--searchable .vs__dropdown-toggle {
  cursor: text;
}

.vs--unsearchable .vs__dropdown-toggle {
  cursor: pointer;
}

.vs--open .vs__dropdown-toggle {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vs__open-indicator {
  fill: rgba(60, 60, 60, 0.5);
  transform: scale(1);
  transition: transform 150ms cubic-bezier(1, -0.115, 0.975, 0.855);
  transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
}

.vs--open .vs__open-indicator {
  transform: rotate(180deg) scale(1);
}

.vs--loading .vs__open-indicator {
  opacity: 0;
}

/* Clear Button */

.vs__clear {
  fill: rgba(60, 60, 60, 0.5);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-right: 8px;
}

/* Dropdown Menu */

.vs__dropdown-menu {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 1000;
  padding: 5px 0;
  margin: 0;
  width: 100%;
  max-height: 350px;
  min-width: 160px;
  overflow-y: auto;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-top-style: none;
  border-radius: 0 0 4px 4px;
  text-align: left;
  list-style: none;
  background: #fff;
}

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

/* List Items */

.vs__dropdown-option {
  line-height: 1.42857143;
  /* Normalize line height */
  display: block;
  padding: 3px 20px;
  clear: both;
  color: #333;
  /* Overrides most CSS frameworks */
  white-space: nowrap;
  cursor: pointer;
}

.vs__dropdown-option--highlight {
  background: #5897fb;
  color: #fff;
}

.vs__dropdown-option--deselect {
  background: #fb5858;
  color: #fff;
}

.vs__dropdown-option--disabled {
  background: inherit;
  color: rgba(60, 60, 60, 0.5);
  cursor: inherit;
}

/* Selected Tags */

.vs__selected {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  color: #333;
  line-height: 1.4;
  margin: 4px 2px 0px 2px;
  padding: 0 0.25em;
  z-index: 0;
}

.vs__deselect {
  display: inline-flex;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-left: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  fill: rgba(60, 60, 60, 0.5);
  text-shadow: 0 1px 0 #fff;
}

/* States */

.vs--single .vs__selected {
  background-color: transparent;
  border-color: transparent;
}

.vs--single.vs--open .vs__selected,
.vs--single.vs--loading .vs__selected {
  position: absolute;
  opacity: 0.4;
}

.vs--single.vs--searching .vs__selected {
  display: none;
}

/* Search Input */

/**
 * Super weird bug... If this declaration is grouped
 * below, the cancel button will still appear in chrome.
 * If it's up here on it's own, it'll hide it.
 */

.vs__search::-webkit-search-cancel-button {
  display: none;
}

.vs__search::-webkit-search-decoration,
.vs__search::-webkit-search-results-button,
.vs__search::-webkit-search-results-decoration,
.vs__search::-ms-clear {
  display: none;
}

.vs__search,
.vs__search:focus {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  line-height: 1.4;
  font-size: 1em;
  border: 1px solid transparent;
  border-left: none;
  outline: none;
  margin: 4px 0 0 0;
  padding: 0 7px;
  background: none;
  box-shadow: none;
  width: 0;
  max-width: 100%;
  flex-grow: 1;
  z-index: 1;
}

.vs__search::-moz-placeholder {
  color: inherit;
}

.vs__search::placeholder {
  color: inherit;
}

/**
    States
 */

.vs--unsearchable .vs__search {
  opacity: 1;
}

.vs--unsearchable:not(.vs--disabled) .vs__search {
  cursor: pointer;
}

.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
  opacity: 0.2;
}

/* Loading Spinner */

.vs__spinner {
  align-self: center;
  opacity: 0;
  font-size: 5px;
  text-indent: -9999em;
  overflow: hidden;
  border-top: 0.9em solid rgba(100, 100, 100, 0.1);
  border-right: 0.9em solid rgba(100, 100, 100, 0.1);
  border-bottom: 0.9em solid rgba(100, 100, 100, 0.1);
  border-left: 0.9em solid rgba(60, 60, 60, 0.45);
  transform: translateZ(0);
  animation: vSelectSpinner 1.1s infinite linear;
  transition: opacity 0.1s;
}

.vs__spinner,
.vs__spinner:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

/* Loading Spinner States */

.vs--loading .vs__spinner {
  opacity: 1;
}

.v-select .vs__dropdown-toggle {
  border-radius: 0;
  border-color: #E5E5E5;
}

.v-select .vs__selected-options {
  color: #333333;
  font-size: 14px;
}

.v-select .vs__dropdown-menu {
  border-radius: 0;
}

.v-select .vs__dropdown-option {
  color: #A3A3A3;
  font-size: 14px;
  border-radius: 0;
  padding: 10px;
}

.v-select .vs__dropdown-option--noresults {
  color: #A3A3A3;
  font-size: 14px;
  padding: 0 10px;
}

.v-select .vs__dropdown-option--highlight,
.v-select .vs__dropdown-option:hover {
  color: #fff;
  background-color: #8BAD00;
}

.vue__time-picker .dropdown ul li:not([disabled]).active {
  background-color: #8BAD00 !important;
}