.flatpickr-calendar {
  background: transparent;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  visibility: visible;
  overflow: visible;
  max-height: 640px;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.hasWeeks {
  width: auto;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.rightMost:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 28px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  line-height: 16px;
  height: 28px;
  padding: 10px calc(3.57% - 1.5px);
  z-index: 3;
}
.flatpickr-prev-month i,
.flatpickr-next-month i {
  position: relative;
}
.flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-next-month.flatpickr-prev-month {
/*
        /*rtl:begin:ignore*/
/*
        */
  left: 0;
/*
        /*rtl:end:ignore*/
/*
        */
}
/*
        /*rtl:begin:ignore*/
/*
        /*rtl:end:ignore*/
.flatpickr-prev-month.flatpickr-next-month,
.flatpickr-next-month.flatpickr-next-month {
/*
        /*rtl:begin:ignore*/
/*
        */
  right: 0;
/*
        /*rtl:end:ignore*/
/*
        */
}
/*
        /*rtl:begin:ignore*/
/*
        /*rtl:end:ignore*/
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 14px;
}
.flatpickr-prev-month svg path,
.flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
  top: 33%;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 6.16px 0 0 0;
  line-height: 1;
  height: 28px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month.slideLeft {
  -webkit-transform: translate3d(-100%, 0px, 0px);
          transform: translate3d(-100%, 0px, 0px);
  -webkit-animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-current-month.slideLeftNew {
  -webkit-transform: translate3d(100%, 0px, 0px);
          transform: translate3d(100%, 0px, 0px);
  -webkit-animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-current-month.slideRight {
  -webkit-transform: translate3d(100%, 0px, 0px);
          transform: translate3d(100%, 0px, 0px);
  -webkit-animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-current-month.slideRightNew {
  -webkit-transform: translate3d(0, 0, 0px);
          transform: translate3d(0, 0, 0px);
  -webkit-animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: default;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: initial;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.flatpickr-calendar.animate .dayContainer.slideLeft {
  -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.animate .dayContainer.slideLeft,
.flatpickr-calendar.animate .dayContainer.slideLeftNew {
  -webkit-transform: translate3d(-100%, 0px, 0px);
          transform: translate3d(-100%, 0px, 0px);
}
.flatpickr-calendar.animate .dayContainer.slideLeftNew {
  -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.animate .dayContainer.slideRight {
  -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: translate3d(100%, 0px, 0px);
          transform: translate3d(100%, 0px, 0px);
}
.flatpickr-calendar.animate .dayContainer.slideRightNew {
  -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #0d3c57;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #1c8cca;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #1c8cca;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange,
.flatpickr-day.startRange.startRange + .endRange,
.flatpickr-day.endRange.startRange + .endRange {
  -webkit-box-shadow: -10px 0 0 #1c8cca;
          box-shadow: -10px 0 0 #1c8cca;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  pointer-events: none;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #1c8cca, 5px 0 0 #1c8cca;
          box-shadow: -5px 0 0 #1c8cca, 5px 0 0 #1c8cca;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  display: inline-block;
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
          box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day {
  display: block;
  width: 100%;
  max-width: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #0d3c57;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #0d3c57;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  cursor: pointer;
  color: #0d3c57;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  display: inline-block;
  float: left;
  line-height: inherit;
  color: #0d3c57;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #f0f0f0;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fpSlideLeft {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(-100%, 0px, 0px);
            transform: translate3d(-100%, 0px, 0px);
  }
}
@keyframes fpSlideLeft {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(-100%, 0px, 0px);
            transform: translate3d(-100%, 0px, 0px);
  }
}
@-webkit-keyframes fpSlideLeftNew {
  from {
    -webkit-transform: translate3d(100%, 0px, 0px);
            transform: translate3d(100%, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
}
@keyframes fpSlideLeftNew {
  from {
    -webkit-transform: translate3d(100%, 0px, 0px);
            transform: translate3d(100%, 0px, 0px);
  }
  to {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
}
@-webkit-keyframes fpSlideRight {
  from {
    -webkit-transform: translate3d(0, 0, 0px);
            transform: translate3d(0, 0, 0px);
  }
  to {
    -webkit-transform: translate3d(100%, 0px, 0px);
            transform: translate3d(100%, 0px, 0px);
  }
}
@keyframes fpSlideRight {
  from {
    -webkit-transform: translate3d(0, 0, 0px);
            transform: translate3d(0, 0, 0px);
  }
  to {
    -webkit-transform: translate3d(100%, 0px, 0px);
            transform: translate3d(100%, 0px, 0px);
  }
}
@-webkit-keyframes fpSlideRightNew {
  from {
    -webkit-transform: translate3d(-100%, 0, 0px);
            transform: translate3d(-100%, 0, 0px);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0px);
            transform: translate3d(0, 0, 0px);
  }
}
@keyframes fpSlideRightNew {
  from {
    -webkit-transform: translate3d(-100%, 0, 0px);
            transform: translate3d(-100%, 0, 0px);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0px);
            transform: translate3d(0, 0, 0px);
  }
}
@-webkit-keyframes fpFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fpFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fpFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fpFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: 300px;
  max-width: 500px;
  overflow: auto;
  display: block;
  z-index: 999999; }
  .tribute-container ul {
    margin: 0;
    margin-top: 2px;
    list-style: none;
    background: #efefef; }
  .tribute-container li {
    padding: 5px 5px;
    cursor: pointer; }
    .tribute-container li.highlight, .tribute-container li:hover {
      background: #ddd; }
    .tribute-container li span {
      font-weight: bold; }
  .tribute-container .menu-highlighted {
    font-weight: bold; }

::-webkit-scrollbar-thumb {
    background:#a2a5a6;
}

*, *:before, *:after {
	box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height:1.5;
  background:  rgba(17, 22, 26, .0);
}

body {
  color:#1b2226;
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
}

h1 {
  line-height: 48px;
  margin: 24px 0;
  padding:0;
  font-size:1.2rem;
}

h2 {
  line-height: 24px;
  margin: 24px 0 0;
  padding:0;
  font-size:1.728rem;
}

h3 {
  line-height:inherit;
  margin:0;
  padding:0;
  font-weight: 700;
  font-size:1.2rem;
  color:#1b2226;
}

h4 {
  line-height: inherit;
  margin:0;
  padding:0;
  text-transform:
  uppercase;
  letter-spacing: 1px;
  font-size:.694rem;
  font-weight: 700;
}

hr {
  height:1px;
  box-shadow:0 0 0;
  border:0;
  background: #edf0f2;
  margin:24px 0;
}

.title a { font-weight: 700; }

.title a.sidebar-toggle { 
  font-weight: 400;
  top: 12px;
}

.subtitle {
  line-height:24px;
  margin: 0 0 12px;
}

.subtitle a{
  text-decoration: underline;
}

.subtitle a.member {
  font-weight: 700;
  text-decoration: none;
}

.members .subtitle p { margin:0;}

.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

mark {
  background: #f4ae22;
  color:#1b2226;
}

ul {
  margin:0;
  padding:0;
  list-style-type: circle;
}

ol {
  margin:0;
  padding:0;
}

li {
  display: list-item;
  padding:0;
  margin-left: 24px;
  width: auto;
}

ul.basic-list { list-style-type: none; }

.basic-list li {
  box-shadow:0 1px 0 0 rgba(17, 22, 26,.02);
  padding:0 24px;
  margin: 0;
  display: flex;
}

p {
  font-size: 1rem;
  margin:0;
}

.error {
  background: #F2F2EF;
  padding:6px;
  color:#ea3618;
}

.empty { display: none;
  text-align:center;
  margin: 48px;
 }

.pull-right { float: right; }

.full-width { width: 100%; }
.attestation {
  padding: 0 12px;
  overflow-y: auto; width: 100%;
  background: #1b2226;
  color:#6d7173;
  min-height: 100vh;
}

.attestation h2.community {
  display: inline-block;
  border: 1px solid rgba(17, 22, 26,.1);
  border-radius: 4px;
  padding: 9px 12px 12px 6px;
  margin: 0 auto 22px;
}

.attestation h2.community a {
  font-size: 1.2rem;
  line-height: 24px;
  display: inline-block;
  text-decoration: none;
}

.attestation h3 a {
  font-weight: 700;
  text-decoration: underline;
}

.attestation__blank {
  padding: 12px 24px;
  background: rgba(17, 22, 26,.1);
  margin: 0 0 48px;
}

.attestation__help {
  background: rgba(0, 131, 204,.2);
  padding: 12px 24px; margin: 0 24px;
  line-height: 24px;
  text-align: left;
  display: flex;
}

.attestation__help .button_to { margin-left: auto; }

.attestation__help p { margin-right: 6px; }

.attestation__help p,
.attestation__help input { margin-bottom: 0; }

.attestation .container { 
  color: #1b2226;
  max-width:1000px;
  margin: 0 auto 48px;
  background: #fff;
  padding: 48px 0;
}

.attestation .skill { 
  margin-bottom:12px;
  padding-bottom: 12px;
}

.attestation .date { 
  opacity: .5;
  font-size: .833rem;
}

.content .attestation header { 
  text-align:center;
  background: transparent;
}

.attestation header img.logo { 
  margin:48px auto;
  height: 24px;
}

.attestation header h3.user { 
  line-height: 36px;
  margin-bottom:36px;
}

.attestation header h3.user img.avatar { 
  margin:0 6px 0 0;
  vertical-align: middle;
}

.attestation__content { display: flex; flex-wrap: wrap; padding: 24px; }

.attestation__content h4 { margin-bottom: 24px; }

.attestation__content__main {
  flex: 2;
  min-width: 400px;
  padding: 24px 24px 0;
}

.attestation__content__side {
  flex: 1;
  padding: 24px 24px 0;
}

.attestation__content .button_to {
  display: inline-block;
  margin-left: 6px;
  position: relative;
  top: -2px;
}
.attestation .meta { font-size: .833rem; }

.attestation__content .btn--small { margin-bottom: 0; }

.attestation__workspaces_item { margin-bottom: 24px; }

.attestation__workspaces_item__author { 
  margin-right: 6px;
  font-size: 0.833rem;
}

a.attestation__workspaces_item__author { text-decoration: underline; }

.attestation__private { 
  text-decoration: line-through;
  color: rgba(17, 22, 26,.5);
}

.attestation__private h3,
.attestation__private h3 a,
.attestation__private .meta  { color: rgba(17, 22, 26,.5);  }

.attestation__workspaces { margin-bottom: 48px; }

.attestation__content__workspace { 
  padding: 24px;
  width: 100%;
}

.attestation__content__workspace__author { 
  display: inline-block;
  margin-right: 12px;
  font-size: 1rem;
}

.content .attestation__content__workspace__author .avatar {
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: 0;
  position: relative;
  top: 6px;
}

.attestation__content__workspace__date { display: block; }

a .attestation__content__workspace__author { text-decoration: underline; }

.attestation__content__workspace__text { 
  width: 100%;
  display: block;
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid rgba(17, 22, 26,.1);
}
.badges {
  list-style-type: none;
  margin: 0 0 12px;
  padding:0;
  display: flex;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}

.badges__item {
  width: 33%;
  max-width: 104px;
  min-width: 72px;
  text-align: center;
  margin:0;
  padding: 0 12px 12px 0;
  font-size: 0.833rem;
  position: relative;
}

.badges__item img {
  display: block;
  width: 100%;
  opacity: 0.1;
}

.badges__item--active img { opacity: 1; }

.badges__item__name {
  opacity: 0.6;
  font-weight: 400;
}

.badges__item--active .badges__item__name {
  opacity: 1;
  font-weight: 700;
}

.badge__progress {
  width: 100%;
  height: 2px;
  background: rgba(17, 22, 26, 0.1);
  position: relative;
  top: -60px;
}

.badge__progress__value {
  position: absolute;
  height: 2px;
  top: 0;
  left: 0;
  background: #1c8cca;
  z-index: 2;
  max-width: 100%;
}
a,
a:visited {
  font-weight: 400;
  color: #1b2226;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
}

a:hover { color: #262e33; }

a.link { text-decoration: underline; }

a.list-link {
  display: flex;
  width: 100%;
}

.btn,
.btn--small,
a.btn,
button,
label.btn,
input[type='submit'] {
  background: #1c8cca;
  color: #fff;
  fill: currentColor;
  padding: 0 12px;
  border-radius: 3px;
  display: inline-block;
  border: 0;
  box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.1) inset,
              0 -2px 0 0 rgba(17, 22, 26, 0.1) inset,
              0 2px 2px -2px rgba(17, 22, 26, 0.2);
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(17, 22, 26, 0.1);
  letter-spacing: 1px;
  font-size: 0.694rem;
  font-weight: 700;
  outline: 0;
  transition: opacity 0.3s ease-in-out;
  line-height: 24px;
  text-decoration: none;
}

.btn.is-right { float: right; }

.btn:hover,
a.btn:hover,
button:hover,
label.btn:hover,
input[type='submit']:hover {
  background: #299ad9;
  text-decoration: none !important;
}

.btn--secondary,
a.btn--secondary {
  text-decoration: none;
  background: #fff;
  box-shadow: 0 0 1px 1px rgba(162, 165, 166, 0.4) inset,
              0 2px 2px -2px rgba(17, 22, 26, 0.2);
}

.btn--secondary:hover,
a.btn--secondary:hover {
  background: #eee;
}

input[type='submit'],
.btn--large,
a.btn--large {
  border-radius: 3px;
  width: auto;
  padding: 0 24px;
  letter-spacing: 3px;
  font-size: 0.694rem;
  line-height: 48px;
}

input[type='submit'].btn--small {
  font-size: 0.694rem;
  padding: 0 12px;
  border-radius: 3px;
  letter-spacing: 1px;
  line-height: 24px;
  height: auto;
}

.btn--admin,
input[type='submit'].btn--admin {
  background: #f4ae22 !important;
  color: #1b2226 !important;
}

.btn--admin:hover,
input[type='submit'].btn--admin:hover {
  background: #ffb621 !important;
}

.btn--new,
a.btn--new,
.btn-toggle,
a.btn-toggle {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(162, 165, 166, 0.4) inset,
              0 2px 2px -2px rgba(17, 22, 26, 0.2);
  color: #6d7173;
}

.btn--disabled,
.btn--disabled:hover {
  background-color: #a3a7a9;
  cursor: not-allowed;
}

.btn--new:hover,
a.btn--new:hover,
.btn-toggle:hover,
a.btn-toggle:hover {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(162, 165, 166, 0.6) inset,
              0 2px 2px -2px rgba(17, 22, 26, 0.3);
  color: #1b2226;
}

a.btn-toggle--active {
  background: #1c8cca;
  color: #fff;
}

a.btn-toggle--active:hover {
  background: #1c8cca;
  color: #fff;
}

.btn.delete,
.btn--delete,
a.btn--delete,
input[type='submit'].btn--delete {
  background: transparent;
  box-shadow: 0 0 1px 1px rgba(162, 165, 166, 0.4) inset,
              0 2px 2px -2px rgba(17, 22, 26, 0.2);
  color: #6d7173;
}

.btn.delete:hover,
.btn--delete:hover,
a.btn--delete:hover,
input[type='submit'].btn--delete:hover {
  background: #f43e22;
  color: #fff;
  box-shadow: 0 0 0 0;
}

input[disabled],
input[disabled]:hover {
  background: rgba(17, 22, 26, 0.2);
  cursor: not-allowed;
}

input[type='submit'].delete { background: #f43e22; }

.btn--input-file { margin-bottom: 24px; }
.evaluations li a {
  font-weight: 700;
  text-decoration: underline;
}

.post.finished,
.post.finished:hover{
  background-color:  rgba(17, 22, 26,.1);
}

.post.finished strong {
  text-decoration:line-through;
  font-weight: 400;
}

.evaluation {
  padding: 0 0 24px;
  line-height: 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(17, 22, 26,.1);
}

.evaluation li { margin-left: 0; }

.evaluation-status svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.evaluation-status svg.octicon-arrow-switch { fill: #1c8cca; }

.evaluation-status svg.octicon-circle-slash { fill: #f43e22; }

.evaluation-status svg.octicon-check { fill: #1cca5e; }
.event .box {
  margin: 6px 0 0;
  border-radius: 4px 4px 0 0;
}

.event__date {
  float: right;
  margin-left: 12px;
}

.event__picture { margin-top: 12px; }

.event__picture img {
  max-height: 360px;
  margin: 0 auto;
  display: block;
}

.event__registration {
  position: relative;
  top: -1px;
  background: rgba(17, 22, 26, 0.05);
  padding: 6px 12px;
  border-radius: 0 0 4px 4px;
  box-shadow:
    0 0 0 1px #edf0f2 inset,
    0 24px 24px -24px rgba(17, 22, 26, 0.05);
}

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

.event__registration .btn { margin: 0 0 0 8px; }

.event__registration strong { color: rgba(17, 22, 26, 1); }

.event__registration .members { display: flex; }

.event__registration .members li {
  max-width: 30px;
  padding: 0;
  overflow: visible;
}

.event__registration .members .avatar {
  top: 0;
  width: 24px;
  height: 24px;
}

.event__registration .members .avatar img {
  width: 24px;
  height: 24px;
}

.filters {
  box-shadow: 0 0 0 1px rgba(162, 165, 166, 0.4), 0 2px 2px -2px rgba(17, 22, 26, 0.2);
  line-height: 24px;
  height: 24px;
  margin: 12px 6px;
  padding: 0;
}

a.filter {
  padding: 0 6px;
  font-weight: 400;
  font-size: 0.833rem;
  height: 100%;
  position: relative;
  color: rgba(17, 22, 26, 0.3);
  line-height: 24px;
  background: rgba(17, 22, 26, 0.05);
  display: inline-block;
  top: -1px;
}

a.filter:hover { color: rgba(17, 22, 26, 1); }

a.filter--active {
  font-weight: 700;
  color: rgba(17, 22, 26, 1);
  background: transparent;
}
.flash {
  animation: message-appear 8s 0.3s ease-out;
  color: #fff;
  line-height: 48px;
  margin: 0;
  position: fixed;
  text-align: center;
  top: -48px;
  width: 100%;
  z-index: 100000;
}

.flash.notice { background: #1c8cca; }

.flash.alert { background: #f43e22; }

.flash.permanent {
  animation: none;
  background: #fef9f1;
  color: #f43e22;
  font-weight: 700;
  position: relative;
  top: 0;
}

@keyframes message-appear {
  0%   { top: -48px; }
  5%   { top: 0; }
  95%  { top: 0; }
  100% { top: -48px; }
}
fieldset {
  padding: 24px;
  border: 1px solid rgba(17, 22, 26, 0.1);
  margin-bottom: 24px;
}

legend {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 0.833rem;
}

input,
input[type='text'],
textarea,
select {
  display: block;
  height: 48px;
  line-height: 48px;
  padding: 0 6px;
  width: 100%;
  font-size: 1rem;
  margin-bottom: 12px;
  border: 1px solid rgba(17, 22, 26, 0.2);
  box-shadow: 0 0 12px 0 rgba(17, 22, 26, 0.05) inset;
  border-radius: 2px;
}

input[type='file'] { height: auto; }

.inline-radio label {
  display: inline-block;
  margin-left: 12px;
}

.inline-radio label.yes {
  background: #1cca5e;
  color: #fff;
  width: 36px;
  text-align: center;
  font-size: 0.833rem;
}

.inline-radio label.no {
  background: #f43e22;
  color: #fff;
  width: 36px;
  text-align: center;
  font-size: 0.833rem;
}

.inline-radio label.na {
  background: rgba(17, 22, 26, 0.1);
  color: #fff;
  width: 36px;
  text-align: center;
}

.skill-assesments li.disabled label { cursor: not-allowed; }

.content section.form .skill-assesments li form .question { flex: 1; }

input[type='radio'] {
  display: inline-block;
  margin: 0 6px 0 0;
}

textarea {
  height: 168px;
  overflow-y: auto;
  line-height: 24px;
  padding: 7px;
}

input[type='checkbox'] {
  width: 16px;
  height: 16px;
  line-height: 24px;
  display: inline-block;
  vertical-align: center;
  position: relative;
  top: 1px;
}

.inline label {
  display: inline;
  font-weight: 400;
}

.checkbox label {
  display: inline-block;
  line-height: 24px;
}

div.checkbox { margin: 24px 0; }

div.checkbox.alert {
  background: rgba(17, 22, 26, 0.05);
  border: 1px solid rgba(17, 22, 26, 0.2);
  padding: 12px 24px;
  margin: 24px 0;
}

input[type='file'] {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 18px 12px;
}

input[type='file'].input-file {
  display: none;
}

form label { display: inherit; }

input:focus { outline: none; }

input.search {
  padding: 0 24px;
  background: transparent;
  border: 1px solid #edf0f2;
  box-shadow: 0 0 0 0;
  border-width: 1px 0;
  margin-bottom: 0;
}

::placeholder {
  color: #1b2226;
  opacity: 0.5;
}

label {
  display: block;
  font-weight: 700;
}

label input {
  display: inline;
  width: auto;
  height: auto;
  margin: 0 12px 0 2px;
}

.field_with_errors { color: #ea3618; }

.current { margin-bottom: 14px; }

.current a.delete {
  background: #f43e22;
  color: #fff;
  height: 24px;
  width: 24px;
  text-align: center;
  border-radius: 14px;
  text-decoration: none;
  padding: 0;
  position: relative;
  top: -12px;
}

.form--inline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal .form--inline input[type="submit"] { margin: 0 0 12px; }

.form .form--inline { justify-content: flex-start; }

.form--inline .btn,
.form .form--inline input[type="submit"] {
  margin: 24px 6px 0 0;
  width: auto;
}

.input-group {
  display: flex;
  width: 100;
  align-items: center;
}

.input--permalink {
  width: auto;
  display: inline-block;
}

.input-group-prepend {
  padding: 0 8px;
  height: 48px;
  line-height: 48px;
  margin: 0 0 12px 0;
  background: #f1f1f1;
  color: #6d7173;
}
header {
  height: 48px;
  line-height: 48px;
  min-height: 48px;
  padding: 0 12px;
}

header h4 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body > header {
  width: 100%;
  overflow: hidden;
  height: 48px;
  padding: 0;
  background: rgba(17, 22, 26, 0.9);
}

body > header .container {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0 auto;
}

body > header .icon { fill: rgba(255, 255, 255, 0.8); }

ul.community {
  z-index: 10000;
  flex: 1;
  overflow: hidden;
}

ul.community li {
  width: 100%;
  padding: 0 12px;
  height: 48px;
  display: flex;
  align-items: center;
  align-content: center;
}

ul.community li a {
  display: flex;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 6px;
}

ul.community li a:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline;
}

ul.community li a.name {
  font-weight: 700;
  flex: 1;
  display: block;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.community a.icon.communityswitch {
  background: #6d7173;
  fill: #fff;
  border-radius: 12px;
  box-shadow: 0 -2px 0 0 rgba(17, 22, 26, 0.1) inset, 0 2px 2px -2px rgba(17, 22, 26, 0.2);
  margin-left: 8px;
  padding: 0;
}

ul.community a.icon.communityswitch:hover {
  background: #6d7173;
  fill: #fff;
  border-radius: 12px;
  box-shadow: 0 -2px 0 0 rgba(17, 22, 26, 0.1) inset, 0 2px 2px -2px rgba(17, 22, 26, 0.2);
  margin-left: 8px;
}

ul.community a .icon { flex-shrink: 0; }

ul.community a .icon--home {
  fill: #a2a5a6;
  border-radius: 50%;
  padding: 0;
  line-height: 22px;
  margin-right: 18px;
}

ul.community li:first-child a .icon--home { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

ul.community li a.icon:hover { background: inherit; }

.communitiesopen .communityswitch { transform: rotate(180deg); }

.communitiesopen body > header { overflow: visible; }

.communitiesopen ul.community {
  background: #fff;
  position: fixed;
  max-height: 100vh;
  overflow: auto;
  box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.05),
    0 2px 4px 1px rgba(17, 22, 26, 0.05),
    0 4px 8px 1px rgba(17, 22, 26, 0.05);
}

.communitiesopen ul.community li {
  background: #fff;
  color: #1b2226;
}

.communitiesopen ul.community li a { color: #1b2226; }

.communitiesopen ul.community li a:hover { color: #000; }

nav.current-user { margin: 0 12px 0 auto; }

nav.current-user ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 0;
  align-items: center;
}

nav.current-user li {
  padding: 0;
  margin: 0 0 0 16px;
}

body > header .sidebar-open {
  width: 24px;
  height: 24px;
  display: block;
}

body > header img.avatar { position: absolute; }

nav.header__nav {
  display: flex;
  align-items: flex-start;
}

nav.header__nav .sidebar-toggle,
nav.header__nav .sidebar-open {
  font-weight: 400;
}

ul.tabs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
}

ul.tabs li {
  list-style-type: none;
  padding: 0;
  margin: 0 16px 0 0;
  white-space: nowrap;
}

ul.tabs li a {
  color: #6d7173;
  position: relative;
}

ul.tabs li a:hover {
  text-decoration: none;
  color: currentColor;
}

ul.tabs li a .notification__count {
  position: relative;
  display: inline-block;
  right: 0;
  left: 0;
  top: -2px;
}

ul.tabs li.is-active { box-shadow: 0 -2px 0 0 #1c8cca inset; }

ul.tabs.is-right { margin-left: auto; }

ul.tabs.is-right li { margin: 0 0 0 16px; }

nav.header__nav ul.tabs:first-of-type li.is-active a {
  font-weight: bold;
  color: currentColor;
}

nav.header__nav ul.tabs:first-of-type li a:not(.btn) svg {
  fill: rgba(17, 22, 26, 0.4);
  display: none;
}

nav.header__nav ul.tabs:first-of-type li.is-active a:not(.btn) svg { fill: #1c8cca; }

@media (min-width: 600px) {
  ul.community { flex: initial; }
}

@media (min-width: 1000px) {
  header { padding: 0 24px; }

  ul.community { margin-left: 12px; }

  nav.current-user { margin: 0 24px 0 auto; }

  nav.header__nav ul.tabs:first-of-type li a svg + span {
    display: inline-block;
    margin-left: 2px;
  }

  nav.header__nav ul.tabs:first-of-type li a:hover svg + span { text-decoration: underline; }
}
.icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  fill: #6d7173;
  vertical-align: middle;
  text-align: center;
  border-radius: 12px;
  display: inline-block;
  transition: background 0.3s ease-in-out;
  position: relative;
}

.avatar.icon.icon--info,
.icon.icon--info {
  background-color: #1c8cca;
  fill: #fff;
}

.avatar.icon.icon--danger,
.icon.icon--danger {
  background-color: #f43e22;
  fill: #fff;
}

.avatar.icon.icon--success,
.icon.icon--success {
  background-color: #28a745;
  fill: #fff;
}

.icon button,
button.icon,
button .icon {
  padding: 0;
  letter-spacing: 0;
}

svg { vertical-align: middle; }

.icon svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 4px;
  border-radius: 0;
}

.icon--drag { cursor: grab; }

.icon--inactive {
  opacity: 0.5;
  cursor: none;
}

.icon--inactive svg {
  fill: none;
  stroke: #6d7173;
  stroke-width: 1px;
}

.icon--admin {
  background: #f4ae22;
  fill: #1b2226;
  cursor: pointer;
  box-shadow:
    0 2px 0 0 rgba(255, 255, 255, 0.1) inset,
    0 -2px 0 0 rgba(17, 22, 26, 0.1) inset,
    0 2px 2px -2px rgba(17, 22, 26, 0.2);
}

.icon--admin:hover { background: #ffb621; }

.icon--mh { display: none; }

.icon--dh { display: inline-block; }

.skill .icon--star { margin-right: 12px; }

.icon--star--start { fill: #1c8cca; }

.icon--star--finish { fill: #f4ae22; }

.icon--action {
  fill: #fff;
  cursor: pointer;
  background: #1c8cca;
  border-radius: 12px;
  transition: opacity 0.3s ease-in-out;
  box-shadow:
    0 2px 0 0 rgba(255, 255, 255, 0.1) inset,
    0 -2px 0 0 rgba(17, 22, 26, 0.1) inset,
    0 2px 2px -2px rgba(17, 22, 26, 0.2);
}

.icon--action:hover,
.btn:hover .icon--action {
  fill: #fff;
  background: #1b8dcf;
}

.icon--delete {
  background: #6d7173;
  fill: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.icon--delete:hover {
  background: #f43e22;
  fill: #fff;
}

.icon--favorite--active { fill: #f43e22; }

.icon--close {
  cursor: pointer;
  margin-left: 6px;
  background: #6d7173;
  fill: #edf0f2;
  box-shadow:
    0 2px 0 0 rgba(255, 255, 255, 0.1) inset,
    0 -2px 0 0 rgba(17, 22, 26, 0.1) inset,
    0 2px 2px -2px rgba(17, 22, 26, 0.2);
}

.icon--close:hover {
  background: rgba(17, 22, 26, 0.6);
  fill: #fff;
}

@media (min-width: 1000px) {
  .icon--mh { display: inline-block; }

  .icon--dh { display: none; }
}
.invitations {
  padding: 24px;
  overflow-y: auto;
}

.invitations li {
  line-height: 48px;
  display: flex;
  padding: 0;
  margin: 0;
}

.content .invitations .avatar {
  height: 24px;
  width: 24px;
  margin: 12px 12px 0 0;
}

.invitations li .email { flex: 1; }

.invitations li.noresult {
  box-shadow: 0 0 0 0;
  text-align: center;
  display: block;
  color: #6d7173;
}

.invitations li .icon { margin: 0 0 0 6px; }

.invitations li .icon--check {
  background: #1c8cca;
  fill: #fff;
  padding: 0;
}

.invitations li input[type=submit] {
  height: 24px;
  line-height: 24px;
  width: 24px;
  text-align: center;
  background: transparent;
  padding: 0;
  position: absolute;
  top: 6px;
  left: 0;
}
.content header {
  background: #fff;
  height: auto;
  transition: 0s all;
  min-height: auto;
  position: relative;
}

.content header .title { display: flex; }

.content header .title h2 {
  color: #1b2226;
  margin: 12px 0;
  font-size: 1.2rem;
  display: flex;
  flex: 1;
  align-items: flex-start;
  align-content: flex-start;
}

.title .title--toggle { cursor: pointer; }

.content header .title h2 .btn { margin-left: 16px; }

.content header h2 .icon {
  display: inline-block;
  width: 24px;
  flex-shrink: 0;
  padding: 0;
  margin: 0 18px 0 6px;
}

.content header .title__actions {
  margin: 0 0 0 6px;
  display: flex;
}

.content header span.title__actions .btn,
.content header span.title__actions a {
  height: 24px;
  margin: auto 0 auto 6px;
}

.record { font-size: 0.833rem; }

.record--done svg { fill: #1cca5e; }

.content header span.title__actions input[type="submit"] {
  display: inline;
  width: auto;
  height: 24px;
  position: relative;
  padding: 0 6px;
  border: 0;
  margin: auto 0 auto 6px;
  transform: translateY(-2px);
}

.content header h2 .title__actions .icon { margin: 0 0 0 12px; }

.content header h2 .icon-keyboard_control,
.content header .title a.icon-clear {
  line-height: 24px;
}

.toggle-description {
  background: #edf0f2;
  fill: #1b2226;
}

.toggle-description:hover {
  background: #fff;
  fill: #1b2226;
}

.toggle-description svg { transition: transform 0.15s ease-in-out; }

.description--open .toggle-description svg { transform: rotate(-180deg); }

.content header .title a.icon-clear {
  position: relative;
  top: 12px;
}

.content header h2 .icon--home {
  box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.1);
  border-radius: 50%;
  line-height: 22px;
  fill: #1b2226;
}

.content header h2 .avatar {
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 0 6px;
  position: relative;
  right: 0;
}

.content header form.button_to.quit {
  width: auto;
  flex-shrink: 0;
  margin: 0 0 0 6px;
  float: right;
  padding: 0;
  position: relative;
  display: block;
  top: -2px;
}

.content header span input[type='submit'] {
  display: inline;
  width: 24px;
  height: 24px;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  border: 0;
}

.content header span:hover input[type='submit'] {
  border: 0;
  box-shadow: 0 0 0 0;
}

.content header .pinned {
  background: #fcf6f8;
  padding: 12px;
  margin-bottom: 12px;
  line-height: 24px;
  box-shadow: 0 1px 1px 0 rgba(17, 22, 26, 0.1);
}

.content header .expandable {
  height: auto;
  max-height: 100vh;
  padding: 0 24px;
  margin: 0 -24px;
  overflow: hidden;
}

.content header.description--open .expandable { overflow: auto; }

.expandable-description { border-radius: 4px; }

.header--messages.description--open { margin-bottom: 0; }

.expandable-description > .box {
  padding: 0;
  background: #fff;
  margin-bottom: 0;
  box-shadow: 0 0 0 1px #edf0f2 inset, 0 4px 8px -2px rgba(17, 22, 26, 0.1);
  overflow: visible;
  z-index: 100;
}

.content header .subtitle { margin: 0; }

.content header .subtitle input[type='submit'] { margin-bottom: 0; }

.subtitle > div {
  padding: 12px;
  margin: 0;
}

.subtitle .tab-content--hidden { display: none; }

.description h1 { margin: 0; }

.skill__description__menu { line-height: 24px; }

.skill__description__tab {
  margin: 0 8px 0 -4px;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

.skill__description__tab--active { font-weight: 700; }

.skill__description__tab--active .icon { fill: #1c8cca; }

[data-skill-description-tab-content] { margin-top: 12px; }

.content header pre {
  font-family: monospace;
  font-size: 0.9em;
  margin: 0;
  padding: 0.5em;
  white-space: pre;
  background: rgba(17, 22, 26, 0.03);
  overflow-x: auto;
}

figure { margin: 0; }

figure img {
  margin: 24px 0;
  max-width: 100%;
  height: auto;
  position: relative;
}

.content header .menu {
  display: flex;
  margin: 0 -24px;
  background: rgba(17, 22, 26, 0.1);
  padding: 0 24px;
  justify-content: space-between;
}

.content header .menu .notification__count {
  position: relative;
  right: 8px;
}

.content header .menu input[type='submit'] {
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(17, 22, 26, 0.1);
  color: rgba(17, 22, 26, 0.6);
  background: transparent;
  line-height: 24px;
  margin: 0 2px;
}

.content header .menu a.icon {
  height: 24px;
  line-height: 24px;
  width: 24px;
  color: rgba(17, 22, 26, 0.6);
  text-decoration: none;
  padding: 0;
  text-align: center;
  margin: 12px 2px;
  border-radius: 12px;
  display: inline-block;
}

.content header .menu a.icon span {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f43e22;
  box-shadow: 0 1px 1px 0 rgba(17, 22, 26, 0.3);
  color: #fff;
  height: 16px;
  min-width: 16px;
  text-align: center;
  border-radius: 8px;
  font-size: 0.694rem;
  font-weight: 700;
  line-height: 16px;
}

.title__menu a { margin-left: 6px; }

.main__content {
  flex: 1;
  overflow-y: scroll;
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
  padding: 0;
}

.content__section {
  padding: 24px 12px 48px;
  box-shadow: 0 1px 0 0 rgba(17, 22, 26, 0.1);
}

.content__section > h3 {
  padding: 0;
  font-size: 0.694rem;
  color: rgba(17, 22, 26, 1);
  display: inline-block;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
}

.main__content .content__section > h3 { font-size: 0.833rem; }

.content__section--work { background: rgba(17, 22, 26, 0.02); }

.main__content > .content__section:last-of-type { box-shadow: none; }

.messages {
  flex: 1;
  overflow-y: scroll;
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
  padding: 18px 0 6px;
  margin-top: -12px;
}

.messages.is-block {
  display: block;
  flex: auto;
}

.messages:after {
  content: '';
  height: 48px;
  width: inherit;
  z-index: 10000;
  position: fixed;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1.00), rgba(255, 255, 255, 0.00));
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  margin-right: 12px;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 4px 0 inset rgba(17, 22, 26, 0.05);
}

.avatar.absent { box-shadow: 0 2px 4px 0 inset rgba(17, 22, 26, 0.05), 0 0 0 2px #f43e22; }

.avatar.absent::after {
  content: 'x';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  font-size: 8px;
  background: #f43e22;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
}

.avatar.present { box-shadow: 0 2px 4px 0 inset rgba(17, 22, 26, 0.05), 0 0 0 2px #1cca60; }

.avatar.present::after {
  content: '✓';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  font-size: 8px;
  background: #1cca60;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
}

img.avatar,
.content img.avatar {
  overflow: hidden;
}

.avatar img {
  flex-shrink: 0;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
}

.content .avatar {
  width: 36px;
  height: 36px;
  overflow: visible;
  border-radius: 50%;
  flex-shrink: 0;
}

.content span.avatar,
.content img.avatar {
  display: inline-block;
  margin: 6px 12px 6px 0;
}

.content span.avatar img { margin: 0; }

.content .avatar.icon-group,
.content .avatar {
  background: rgba(17, 22, 26, 0.05);
  fill: #6d7173;
  line-height: 36px;
}

.content .avatar svg { margin: 10px; }

.messages li {
  margin: 0;
  box-shadow: 0 0 0;
  padding: 6px 12px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.messages li:hover { background: rgba(17, 22, 26, 0.01); }

.messages li.unread { background-color: rgba(17, 22, 26, 0.05); }

.messages li.unread p { font-weight: bold; }

.messages li.empty {
  margin-top: 72px;
  text-align: center;
  opacity: 0.5;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

li.pinned {
  background: #fef9f1;
  box-shadow: 0 1px 1px 0 rgba(17, 22, 26, 0.05);
}

li.pinned:hover { background: #fef9f1; }

.messages li.pinned span.title:after {
  content: 'important';
  color: #f43e22;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.579rem;
  letter-spacing: 1px;
  margin-left: 6px;
}

.messages li.deleted a,
.messages li.deleted p {
  opacity: 0.3;
}

.messages li.deleted .box { opacity: 0.1; }

.messages li.deleted:hover a,
.messages li.deleted:hover p {
  opacity: 0.6;
}

.messages li.deleted .vote,
.messages li.deleted:hover .vote,
.messages li.deleted .unread,
.messages li.deleted:hover .unread,
.messages li.deleted form.icon,
.messages li.deleted:hover form.icon {
  display: none;
}

.post-date,
li.post-date {
  display: block;
  text-align: center;
  color: #6d7173;
  height: 1px;
  line-height: 24px;
  font-weight: 400;
  margin: -11px -24px 0;
  position: relative;
}

li.post-date,
.messages li.post-date {
  padding: 12px 0;
  height: 48px;
  margin: 0 0 0 3px;
}

li.post-date:hover {
  background: #fff;
  box-shadow: 0 0 0;
}

.post-date hr {
  margin: 11px 0 12px;
  padding: 0;
}

.post-date span {
  background: #fff;
  font-size: 0.833rem;
  line-height: 24px;
  display: inline-block;
  padding: 0 6px;
  top: -24px;
  position: relative;
  border-radius: 12px;
}

div.post-date {
  height: 1px;
  margin: -12px 0 0;
  padding: 0 0 24px;
  z-index: 9999;
}

div.post-date span {
  top: -12px;
  box-shadow: 0 0 0 1px #fff;
}

div.post-date hr {
  margin: 12px 0 0;
  padding: 0;
}

.box {
  padding: 12px;
  box-shadow: 0 0 0 1px #edf0f2 inset;
  border-radius: 4px;
  background: #fff;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}

.box--help {
  padding: 12px;
  font-size: 0.833rem;
  color: rgba(17, 22, 26, 0.6);
  background: #fef9f1;
  margin-bottom: 24px;
  box-shadow: 0 0 0 0;
}

.box--help h3 { color: inherit; }

.box--help p {
  margin: 0;
  line-height: 24px;
  font-size: inherit;
}

.box a { text-decoration: underline; }

.box a.btn { text-decoration: none; }

.box img { max-width: 100%; }

.box .icon-attach_file {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  top: 3px;
  background: #F2F2EF;
  margin-right: 6px;
}

.box .inline-buttons {
  margin: 24px 0 0;
  display: flex;
}

.box .inline-buttons .alert {
  line-height: 24px;
  height: auto;
  margin: 0 6px 0 0;
}

.box .inline-buttons form {
  width: auto;
  display: inline-block;
  margin-right: 12px;
}

.skill.box { display: flex; }

.box .alert {
  margin-top: 24px;
  font-weight: bold;
}

.box.reject { background: #fef4f3; }

.box.validate { background: #f1fcf5; }

.comment-title { margin-top: 24px; }

.content .post-message {
  position: relative;
  overflow: visible;
}

.content .post-message .btn {
  background: #fff;
  box-shadow: 0 1px 1px 0 rgba(17, 22, 26, 0.1);
  height: 36px;
  width: 36px;
  fill: rgba(17, 22, 26, 0.9);
  line-height: 36px;
  cursor: pointer;
  border-radius: 2px;
  padding: 0;
}

.content .post-message .btn svg { margin: 10px; }

.content .post-message .avatar .badge {
  top: -6px;
  left: -4px;
}

.content .post-message .avatar .badge.icon-favorite { top: 24px; }

.content .post-form {
  background: #f1f1f1;
  box-shadow: 0 1px 0 0 rgba(17, 22, 26, 0.05) inset;
  padding: 12px;
  align-items: flex-start;
  z-index: 10001;
}

.content .post-form a {
  height: 36px;
  width: 36px;
}

.content .post-form form {
  flex: 1;
  padding: 0;
  margin-left: 12px;
  display: flex;
}

.content .post-form input,
.content .post-form input[type='text'] {
  width: 100%;
  padding: 18px 12px;
  border: 1px solid rgba(17, 22, 26, 0.1);
  box-shadow: 0 0 0;
  line-height: 24px;
  font-size: 1rem;
  height: 24px;
  margin: 0;
}

.content .post-form form textarea {
  line-height: 24px;
  height: 36px;
  padding: 6px 12px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  max-height: 226px;
}

.content .post-form input[type='submit'] {
  line-height: 24px;
  height: 36px;
  margin: 0;
  width: auto;
  padding: 6px 12px;
  font-size: 0.694rem;
}

.content section.form {
  padding: 24px;
  max-width: 100%;
  display: block;
}

.subtitle li {
  background: transparent;
  width: auto;
}

.content section.form li form { width: auto; }

.content section.form p.help {
  font-size: 0.833rem;
  padding: 12px;
  color: rgba(17, 22, 26, 0.6);
  background: #fef9f1;
  margin: 0 0 12px;
}

.content section.form li span.skill { flex: 1; }

.content section.form li .btn {
  display: inline-block;
  line-height: 24px;
  height: 24px;
  margin-left: 4px;
}

.form .autocomplete > ul { border: 1px solid rgba(17, 22, 26, 0.2); }

.form .autocomplete > ul > li { background: #fff; }

.form .autocomplete > ul > li.active,
.form .autocomplete > ul > li:active,
.form .autocomplete > ul > li:focus,
.form .autocomplete > ul > li:hover {
  background-color: rgba(17, 22, 26, 0.8);
  color: #fff;
}

.content section.form .btn.mandatory {
  fill: #6d7173;
  background: transparent;
  width: 24px;
  padding: 0;
  margin-right: 6px;
}

.content section.form .btn.mandatory.active {
  fill: #f43e22;
  box-shadow: 0 0 0 1px #f43e22;
}

.content section.form .btn.mandatory .locked { display: none; }

.content section.form .btn.mandatory .unlocked { display: block; }

.content section.form .btn.mandatory.active .locked { display: block; }

.content section.form .btn.mandatory.active .unlocked { display: none; }

.sidebar .star { color: rgba(17, 22, 26, 0.1); }

.content .star {
  fill: #6d7173;
  color: #6d7173;
  text-decoration: none;
}

.progress .start,
.sidebar .progress .start {
  color: #1c8cca;
  background: #1c8cca;
}

.progress .finish,
.sidebar .progress .finish {
  color: #f4ae22;
  background: #f4ae22;
}

.icon-star_outline.start:before,
.icon-star_outline.finish:before {
  content: "\e260";
}

.progress {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  height: 1px;
  margin: 5px 0 6px;
  opacity: 1;
}

.skills li:hover .progress,
.skill.active .progress { opacity: 1; }

.content .progress,
.sidebar .progress {
  background: #F2F2EF;
}

.progress span {
  height: 1px;
  position: relative;
  display: block;
  max-width: 100%;
}

.progress span.finish { top: -1px; }

small {
  color: #6d7173;
  font-size: 0.833em;
}

.ago,
.ago a {
  color: #6d7173;
  font-size: 0.833em;
  margin-left: 6px;
  font-weight: 400;
}

.message .btn.download {
  text-transform: uppercase;
  font-size: 0.694rem;
  text-decoration: none;
  letter-spacing: 1px;
}

.message .actions form { width: 100%; }

.message .actions .reject { background: #f43e22; }

footer {
  height: 60px;
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  align-content: center;
}

.content .post-form .avatar { margin: auto 0 auto auto; }

.message .box li,
.messages trix-editor li {
  padding: 0;
  margin: 0 0 0 24px;
  overflow: visible;
}

@media (min-width: 1000px) {
  .sidebar header { background: transparent; }

  .content header .title {
    display: flex;
    flex: 1;
    order: 1;
  }

  .content header .title h2 { font-size: 1.728rem; }

  .content header .menu {
    display: flex;
    width: auto;
    height: 48px;
    background: transparent;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    order: 2;
  }

  .content header .menu a.icon,
  .content header .menu a.icon.side-toggle { display: none; }

  .content header .menu a.icon.icon-clear {
    width: 24px;
    padding: 0;
    background: #f43e22;
    color: #fff;
  }

  .content header .menu a.icon.side-search-toggle { display: inline-block; }

  .messages li { padding: 6px 24px; }

  .message .box li,
  .messages trix-editor li {
    padding: 0;
    margin: 0 0 0 24px;
    overflow: visible;
  }

  .content .post-form { padding: 12px 24px; }

  .content .post-form a {
    height: 36px;
    width: 36px;
  }

  .content__section { padding: 24px 24px 48px; }
}

@media (max-width: 480px) {
  .content .header--messages .title { flex-direction: column; }

  .title__menu { display: none; }

  .title__menu--mobile {
    padding: 6px 12px 0 24px;
    display: flex;
    justify-content: flex-end;
  }

  .title__menu--community {
    float: right;
    padding: 0;
    margin: 0;
  }
}
.box.audio { overflow: visible }

.audio-player {
  display: block;
  margin: 6px 0; 
  width: 100%;
  height: 48px;
}

.audio-player::-webkit-media-controls-panel { background: #fff; }

.box.video { position: relative; }

.video-player {
  display: block;
  margin: 6px 0;
  max-width: 100%;
}
.sidebar {
  overflow: hidden;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  order: 2;
  height: 100%;
  position: relative;
  background: #fff;
  color: #1b2226;
  display: none;
  z-index: 10000;
}

.sidebar-open .sidebar {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
}

@media (min-width: 720px) {
  .sidebar-open .sidebar {
    display: flex;
    position: relative;
    max-width: 300px;
    border-left: 1px solid #edf0f2;
  }
}

.sidebar-toggle,
.sidebar-open {
  cursor: pointer;
  font-weight: 700;
}

.sidebar header {
  background: #fff;
  display: flex;
  align-items: center;
  align-content: center;
  position: relative;
  flex-wrap: wrap;
  gap: 0 8px;
}

.sidebar header a.icon:first-of-type { margin-left: auto; }

.sidebar header a.icon.active {
  background: #f43e22;
  color: #fff;
  letter-spacing: 0;
  font-size: 0.833rem;
  padding: 0;
}

.sidebar header:has(.team-dropdown) { height: auto; }

.sidebar header:has(.team-dropdown) h4 {
  order: 4;
  min-width: 100%;
  padding: 0 12px;
  margin-inline: -12px;
  box-shadow: 0 1px 0 0 rgba(17, 22, 26, 0.05) inset;
}

@media (min-width: 1000px) {
  .sidebar header:has(.team-dropdown) h4 {
    padding: 0 24px;
    margin-inline: -24px;
  }
}

.sidebar__content {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
  transition: 0.3s ease-in-out;
}

.sidebar__content .members,
.sidebar__content .profile,
.sidebar__content .search-panel {
  flex: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  width: 100%;
}

.sidebar .members { overflow-y: auto; }

.profile { overflow-y: auto; }

.members li {
  font-size: 0.833rem;
  height: 48px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  align-content: center;
  position: relative;
}

.members li.user span.sidebar-open {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members .compact { padding: 0 24px 0 12px; }

.members .compact li {
  width: 36px;
  display: inline-block;
  padding: 12px 0 12px 12px;
  box-shadow: 0 0 0 0;
}

.members .compact .avatar,
.box .members .avatar {
  margin-right: 0;
  top: 0;
}

.box .members .avatar,
.box .members li a {
  width: 24px;
  height: 24px;
  margin: 0;
  display: block;
}

.box .members { display: block; }

.box .members li {
  display: inline-block;
  height: 24px;
  width: 24px;
  padding: 0;
  margin: 12px 12px 0 0;
}

.members li div {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  line-height: 16px;
}

.members li div > span { display: flex; }

.members .name {
  width: auto;
  display: block;
  color: #1b2226;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members .action {
  width: 24px;
  height: 24px;
  background: #6d7173;
  border-radius: 4px;
}

.members .stars { height: 16px; }

.members .star {
  font-size: 12px;
  margin-right: 2px;
}

.badge {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 4px;
  left: 16px;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 1px 1px 0 rgba(17, 22, 26, 0.3);
}

.badge.icon-favorite {
  top: 26px;
  fill: #f43e22;
}

.badge.icon-favorite svg {
  position: relative;
  top: 1px;
}

.members .avatar {
  margin-right: 12px;
  top: 4px;
  width: 28px;
  height: 28px;
  border-radius: 16px;
}

.members .badge.icon--star--start { display: none; }

.badge.icon svg {
  width: 12px;
  height: 12px;
  margin: 2px;
}

.members .userfinish { background: #fef9f1; }

.messages .avatar .badge {
  top: -6px;
  left: -4px;
}

.messages .avatar .badge.icon-favorite { top: 24px; }

.members .stars span {
  margin-right: 6px;
  font-size: 0.694rem;
}

.members .stars span.icon {
  width: 8px;
  height: 8px;
  margin-right: 0;
  line-height: 8px;
}

.members .stars span.icon svg {
  width: 8px;
  height: 8px;
  margin: 0;
}

.members small.admin {
  color: #6d7173;
  margin-left: 3px;
}

.message .badge {
  left: -48px;
  height: 14px;
  width: 14px;
  font-size: 12px;
  line-height: 12px;
  border-radius: 12px;
  top: 0;
}

.notification__count {
  background: #f43e22;
  color: #fff;
  height: 16px;
  min-width: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.694rem;
  font-weight: 700;
  position: absolute;
  top: -6px;
  right: -6px;
  display: block;
  box-shadow: 0 1px 1px 0 rgba(17, 22, 26, 0.3);
}

.profile header { justify-content: flex-end; }

.profile header .icon {
  line-height: 24px;
  cursor: pointer;
}

.profile .user {
  text-align: center;
  padding: 0 12px;
}

@media (min-width: 1000px) {
  .profile .user { padding: 0 24px; }

  .profile .user__stats {
    margin: 0 0 48px;
    font-size: 0.694rem;
    text-transform: uppercase;
    display: flex;
    box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.02) inset;
    background: rgba(0, 131, 204, 0.02);
  }

  .profile .user__stats__item {
    padding: 6px;
    justify-content: center;
    text-align: center;
    flex: 1;
    box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.03) inset;
  }

  .profile .user__stats .icon {
    margin-right: 0;
    fill: #1c8cca;
  }

  .profile .avatar {
    width: 144px;
    height: 144px;
    margin: 0 auto;
    border-radius: 72px;
    display: block;
    overflow: visible;
  }

  .profile h2 {
    margin: 0;
    color: #1b2226;
    font-size: 1.44rem;
    line-height: 24px;
    padding: 12px 0;
  }

  .profile .subtitle {
    margin: 12px 0 24px;
    padding: 0;
    text-align: left;
  }

  .profile .subtitle p {
    margin: 0;
    font-size: 1rem;
    text-align: left;
    padding: 0;
  }

  .profile .subtitle a { text-decoration: underline; }

  .profile a.btn {
    margin: 0 0 24px;
    display: block;
  }

  .user__links {
    margin: 0 0 24px;
    padding: 0;
  }

  .user__links a {
    font-weight: inherit;
    display: block;
    text-align: left;
    text-decoration: underline;
    position: relative;
    padding-left: 30px;
  }

  .user__links a .icon {
    position: absolute;
    left: 0;
    fill: #1c8cca;
  }

  .user__links a .icon-heart--active,
  .user__links a .icon.private { fill: #f43e22; }

  .sidebar__help {
    background: rgba(17, 22, 26, 0.1);
    padding: 12px;
    font-size: 0.833rem;
    text-align: left;
    margin-bottom: 24px;
    position: relative;
  }

  .sidebar__help:after {
    bottom: 100%;
    left: 12px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-bottom-color: rgba(17, 22, 26, 0.1);
    border-width: 6px;
    margin-left: -6px;
  }

  .profile input[type='submit'] {
    height: 24px;
    line-height: 24px;
    margin-bottom: 24px;
  }

  .sidebar .tabs {
    display: flex;
    margin-top: 0;
    list-style-type: none;
  }

  .sidebar .tabs li {
    flex: 1;
    background: rgba(17, 22, 26, 0.04);
    justify-content: center;
    font-size: 0.694rem;
  }

  .sidebar .tabs li:hover { background: rgba(17, 22, 26, 0.1); }

  .sidebar .tabs li.active,
  .sidebar .tabs li.active:hover {
    background: transparent;
    border-left: 0;
    border-top: 3px solid #1c8cca;
  }

  .profile .icon-favorite { color: #f43e22; }

  .sidebar li.active a { background: #fef9f1; }

  .sidebar .tabs li { cursor: pointer; }

  .profile .skills li {
    padding: 6px 0;
    border-left: 0;
  }

  .user__profile--block { text-align: left; }

  .user__profile--block header { padding: 0; }

  .user__links--collapsed .user__links__item:nth-of-type(1n+6) { display: none; }

  .btn--toggle {
    display: none;
    color: #6d7173;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(162, 165, 166, 0.4) inset, 0 12px 24px -12px rgba(17, 22, 26, 0.2);
  }

  .btn--toggle:hover {
    color: rgba(17, 22, 26, 0.8);
    background: transparent;
    box-shadow: 0 0 0 1px rgba(162, 165, 166, 0.6) inset;
  }

  .user__links--collapsed .btn--toggle {
    display: inline-block;
    margin-top: 12px;
  }

  .user__links__item--evaluations {
    padding-left: 30px;
    position: relative;
    overflow: hidden;
    color: #6d7173;
  }

  .user__links__item--evaluations a {
    padding: 0;
    display: inline;
  }

  .user__links__item--evaluations .icon {
    position: absolute;
    left: 0;
    fill: #ffb621;
  }

  .user__links__item--unread { font-weight: bold; }

  a.user__links--user {
    font-weight: 700;
    text-decoration: none;
  }

  a.user__links--skill {
    font-weight: 400;
    text-decoration: none;
  }

  span.user__links--file {
    text-decoration: underline;
    color: #6d7173;
    font-size: 0.833rem;
  }

  .user__links .workspace__writers { display: block; }

  .user__links .workspace__writers span {
    display: inline;
    margin: 0 6px 0 0;
    padding: 0;
  }

  form.hide-submit input[type="submit"] { display: none; }

  .profile .admin {
    background: #fef9f1;
    box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.05) inset;
    margin: 24px 0 24px;
    padding: 6px 12px;
  }

  .profile .admin form {
    margin: 0;
    padding: 6px 0;
  }

  .profile .admin input {
    margin: 0;
    line-height: 24px;
    width: 100%;
  }

  .profile .admin input[type='submit'] { border: 0; }

  .profile .admin input[type='submit'].delete {
    background: #f43e22;
    color: #fff;
  }

  span.online {
    min-width: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1cca5e;
    display: inline-block;
    margin: 0 3px;
    position: relative;
    top: 0;
  }
}
.messages--index .message__content { overflow: hidden; }

.messages--index .message__text {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.messages--index .message__text .ago { white-space: nowrap; }

.messages--index .message__text__excerpt {
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li.post { display: flex; }

.message {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: block;
}

.message a,
.message a:visited {
  text-decoration: underline;
}

.message a.btn { text-decoration: none; }

.message a.external-link::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 4px;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background: transparent url(/assets/icons/arrow-top-right-96f4367726553c8e3fa3934d2c98fa49ac13513b57e149bc0697d29362f9f51a.svg) no-repeat center top;
}

.message div.title {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  min-height: 24px;
  overflow: hidden;
}

.message div.title a,
.message div.title a:visited {
  text-decoration: none;
  height: 24px;
}

.message .title .title { flex: 1; }

.message .title form { 
  display: flex;
  align-items: center;
  height: 24px;
}

.messages li input[type='submit'].delete {
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  font-size: 0.694rem;
  margin-left: 6px;
}

.messages li .title form.icon { display: none; }

.messages li:hover form.icon { display: inline-block; }

.messages li :not(.title > .button_to, .box > .button_to) > button, 
.messages li .vote button {
  background: transparent;
  color: #6d7173;
  fill: #6d7173;
  border: 0;
  border-radius: 12px;
  height: 24px;
  padding: 0;
  outline: 0;
  box-shadow: none;
  border-style: none;
  font-size: 1rem;
}

.message .title .icon { margin-left: 6px; }

.message .title .icon--delete {
  background: transparent;
  fill: #6d7173;
}

.message .title .icon--delete:hover { background: #f43e22; }

.message .title .icon--delete svg { fill: inherit; }

.message .title .icon--delete:hover svg { fill: #fff; }

.messages li .unread button,
.messages li .vote.count-0 button { display: none; }

.messages li .unread.active button,
.messages li:hover .unread button,
.messages li .vote.active button,
.messages li:hover .vote button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.message .title .vote.active {
  background: rgba(17, 22, 26, 0.05);
  border-radius: 12px;
}

.messages li .vote.active button svg { fill: #f43e22; }

.messages li .vote .count {
  font-size: 0.694rem;
  padding-right: 6px;
}

.messages li form.icon input[type='submit'],
.messages li button.icon {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  display: none;
}

.messages li .button_row button.icon { display: block; }

.messages li:hover form.icon input[type='submit'],
.messages li:hover button.icon {
  display: inline-block;
}

.messages li form.icon.icon-cancel { color: #6d7173; }

.messages li form.icon.icon-cancel:hover { color: #f43e22; }

.messages li.deleted span.title:after {
  content: 'message supprimé';
  color: #f43e22;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.579rem;
  margin-left: 6px;
}

.message .title .icon--create {
  fill: #6d7173;
  display: none;
  cursor: pointer;
  font-size: 14px;
}

.messages li:hover .icon--create { display: inline; }

.message .file { padding: 6px; }

.message .icon-turned_in {
  color: #f43e22;
  font-size: 16px;
}

.message .title .pin.active svg { fill: #f43e22; }

.message p a {
  color: #1b2226;
  text-decoration: underline;
}

.message .actions {
  display: flex;
  margin-top: 14px;
  min-width: 100%;
}

.message .actions input[type='submit'] {
  border-radius: 12px;
  font-size: 0.694rem;
  letter-spacing: 2px;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
}

.message .actions input[type='submit'].validate {
  background: #f4ae22;
  font-weight: 700;
}

.message iframe {
  display: block;
  margin: 12px 0;
  max-width: 100%;
}

.message-text-editing {
  border: 1px solid rgba(17, 22, 26, 0.1);
  padding: 12px;
  margin: 0 4px;
}

.messages span.btn {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.694rem;
  margin: 12px 12px 12px 0;
}

.messages span.btn.cancel { background: #f43e22; }

.message__text--badge img {
  float: left;
  margin-right: 6px;
}

.message__text--badge h3 { font-size: 1rem; }
.message_bar_add_menu {
  width: 0;
  overflow: hidden;
  text-align: right;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid rgba(17, 22, 26, 0.1);
  opacity: 0;
  z-index: 1000;
  transition: all 0.2s ease-out;
}

.message_bar_add_menu--open {
  width: auto;
  bottom: 60px;
  top: auto;
  opacity: 1;
}

.message_bar_add_menu li {
  text-align: right;
  display: block;
  padding: 0 12px;
  cursor: pointer;
}

.message_bar_add_menu li:hover { color: #253031; }

.message_bar_add_menu li a {
  color: inherit;
  text-decoration: none;
}
.modal-overlay { display: none; }

.modal {
  padding: 24px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  overflow: visible;
  background-color: #fff;
  animation: modal 0.6s;
}

@keyframes modal {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.modal .nbsp { margin-left: 6px; }

.modal h3 { margin: 0 0 24px !important; }

.modal input[type="submit"] { margin-top: 24px; }

.modal .card ul.list {
  max-height: 380px;
  overflow: auto;
}

@media (min-width: 1000px) {
  .modal-overlay {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    animation: modal 0.6s;
  }

  .modal {
    position: fixed;
    top: 48px;
    max-height: calc(100% - 48px);
    left: 20%;
    bottom: auto;
    right: 20%;
    z-index: 10000;
    background-color: #fff;
  }
}
nav.pagination {
  display: inline-block;
  margin-bottom: 48px;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(17, 22, 26,.05), 0 2px 12px -2px rgba(17, 22, 26,.10);
}

nav.pagination a, 
nav.pagination .current {
  display: inline-block;
  padding: 12px 24px;
}

nav.pagination .current {
  background: rgba(17, 22, 26,.05);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
}
.poll-modal ol {
    display: block;
    list-style-type: decimal;
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
}

.poll-modal .box {
  margin: 0 0 12px;
  padding: 24px;
}

.poll-modal input[type='submit']  { margin-top: 24px; }

.poll-modal ol li {
  display: list-item;
  box-shadow: 0 0 0 0;
}

.poll-modal ol li .inline-form {
  display: flex;
  align-items: top;
  justify-content: center;
}

.poll-modal ol li .inline-form .icon {
  margin: -24px 0 0 12px;
  display: block;
}

.poll-modal li input[type='text'] {
  margin: -36px 0 36px 36px;
  width: calc(100% - 36px);
}

.poll input[type='submit'] { margin: 12px 0 0; }

.poll-result {
  width: 100%;
  position: relative;
  line-height:24px;
  min-height:24px;
  display: block;
  border-bottom: 1px solid rgba(17, 22, 26,.03);
}

.poll-result:last-child { border-bottom: 0; }

.poll .box {
  border-radius: 4px 4px 0 0;
  margin: 6px 0 0;
}

.poll small { display: block; }

.poll-answer {
  width: 100%;
  z-index: 1000;
  padding: 0 6px;
}

.poll-progress {
  z-index: 10;
  background: rgba(0, 131, 204,.2);
  height:100%;
  position: absolute;
}

.poll__meta {
  position: relative;
  top: -1px;
  background: rgba(17, 22, 26,.05);
  padding: 6px 12px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 0 1px #edf0f2 inset, 0 24px 24px -24px rgba(17, 22, 26,.05);
}
@media print {
  body, .main, .content { height: auto; width: 100%; }
  .attestation { overflow: visible; width: 100%; padding:0; }
  .attestation header img.logo { margin: 12px auto; height: 12px; background: #1b2226; }
  .attestation .container { padding: 0; }
  .sidebar { display: none; width:0; }
  .main, .content { width: 100%; display: block; }
  .attestation__private { display: none; }
  .attestation__help { display: none; }
  .attestation .btn--small { display: none; }
  .attestation h3 a { text-decoration: none; }
}
.search-results__tabs li { padding: 12px 0; }

.search-results__tabs li.active { padding-top: 9px; }

.search-results__list li {
  padding-top: 12px;
  padding-bottom: 12px;
}

.search-results.hidden { display: none; }

.search-results .noresult {
  margin: 12px 24px;
  border: 1px solid rgba(17, 22, 26, 0.05);
  color: #6d7173;
  padding: 12px;
  font-size: 0.833rem;
  text-align: left;
  position: relative;
}

.search-result__text {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 72px;
}

.search-results__list .ago,
.search-results__list .ago a {
  margin-left: 0;
}

.search-results__list .ago a:hover { text-decoration: underline; }

.search-results__list .ago .icon { width: 16px; }

.search-results__list .ago svg {
  height: 16px;
  margin: 4px 4px 4px 0;
}

.search-results__list .ago .skill {
  font-weight: 700;
  margin-left: 6px;
}

.search-results .sidebar__help { margin: 12px 24px; }

.search-results > p { padding: 24px; }

.search-results .sidebar__help--hidden { display: none; }
.site-footer {
  border-top: 1px solid rgba(17, 22, 26, 0.05);
  line-height: 24px;
  padding: 6px 12px;
  font-size: 0.8rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
}

.site-footer .row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.site-footer a.logo {
  height: 24px;
  padding: 1px 0;
  display: inline-block;
  vertical-align: text-top;
}

.site-footer a.logo svg {
  height: 17px;
  width: 39px;
  fill: rgba(17, 22, 26, 1);
}

.site-footer a:any-link.faq {
  gap: 8px;
  height: 24px;
  display: inline-flex;
  margin: 0;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.site-footer .credits { opacity: 0.6; }

.site-footer .credits a { text-decoration: underline; }

@media (min-width: 1000px) {
  .site-footer { padding: 6px 24px; }
}
.content section.form .skill-assesment-list li form { width: 100%; }

.skill-assesment .skill {
  flex: 1;
  font-weight: 700;
}

.skill-assesment .arrow {
  margin: 0 12px;
  opacity: 0.5;
}

.skill-assesment-list { margin: 0 0 24px; }

ul.skill-assesment-list { box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.05) inset; }

div.skill-assesment-list p { flex: 1; }

.content section.form .skill-assesment-list li {
  padding: 12px 12px 0;
  border-left: 6px solid #1c8cca;
  box-shadow: 0 0 0 1px rgba(37, 38, 49, 0.1), 0 2px 4px -2px rgba(37, 38, 49, 0.1);
  background: rgba(17, 22, 26, 0.03);
}

.content section.form .skill-assesment-list li:hover { background: rgba(37, 38, 49, 0.01); }

.content section.form .skill-assesment-list li.disabled,
.content section.form .skill-assesment-list li.disabled:hover {
  box-shadow: 0 0 0 0;
  border-left: 6px solid rgba(37, 38, 49, 0.1);
  background: rgba(37, 38, 49, 0);
}

.skill-assesment {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}

.skill-assesment .online-radio {
  margin-right: 12px;
  white-space: nowrap;
}

.skill-assesment .icon--star { margin: 0 6px 0 0; }

.skill-assesment__skill {
  flex: 1;
  display: flex;
}

.skill-assesment__meta {
  width: 100%;
  display: flex;
}

.skill-assesment__meta h4 {
  padding: 0 12px 0 0;
  margin: 0;
}
.new-subscription { overflow-y: auto; }

.new-subscription .box {
  padding: 12px 24px;
  margin-bottom: 24px;
}

.skill__group a {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: #6d7173;
}

.skill__group a:hover {
  color: currentColor;
  text-decoration: underline;
}

.subtitle .box { margin-bottom: 0; }

.skills li {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 0;
  border-left: 6px solid #262e33;
}

.skills li.active { border-left-color: #1c8cca; }

.skills li.active a { color: #fff; }

.skills li.active a:hover { background: transparent; }

.skill div {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 24px;
  min-width: 0;
}

.skill div span.info {
  display: flex;
  flex: 1;
}

.skill div span.info .name {
  flex: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: none;
}

.name.unread-messages::after,
.name.unread-messages a::after {
  content: '';
  display: inline-block;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #f43e22;
  position: relative;
  top: -8px;
  animation: pulseDot 0.6s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes pulseDot {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.skill div span.info form {
  height: 24px;
  overflow: hidden;
}

.skill div span.info button {
  background: transparent;
  box-shadow: 0 0 0 0;
  padding: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

.skill div span.info button.active,
.skill div:hover span.info button {
  opacity: 1;
}

.skill div span.info .active,
.skill .icon-not_interested  { fill: #f43e22; }

.skill div span.info .active .icon-favorite_outline:before { content: "\e291"; }

.skill a {
  flex: 1;
  display: flex;
  align-items: center;
  align-content: center;
  text-decoration: none;
  min-width: 0;
}
.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: relative;
  left: 50%;
  margin: 48px 0 48px -24px;
  width: 48px;
  height: 48px;
}

.spinner--hidden { display: none; }

.spinner .path {
  stroke: #6d7173;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
body.stats {
  background: #1b2226;
  color: #6d7173;
}

section.statistics {
  background: #fff;
  position: relative;
  overflow: auto;
}

.stats__navigation {
  display: inline-block;
  margin-bottom: 24px;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.05), 0 2px 12px -2px rgba(17, 22, 26, 0.10);
}

.stats__navigation a {
  display: inline-block;
  float: right;
  padding: 12px 24px;
}

.stats__navigation a.active {
  background: rgba(17, 22, 26, 0.05);
  font-weight: 700;
  cursor: pointer;
}

.stats__actions {
  display: flex;
  margin-bottom: 24px;
  padding: 0;
}

nav input.search,
.stats__table input.search {
  border-width: 1px;
  margin-right: 8px;
  padding: 0 16px;
  line-height: 24px;
  height: auto;
}

.stats__actions .btn {
  line-height: 48px;
  white-space: nowrap;
}

.stats__content {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: calc(100% - 60px);
}

.stats__table {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
  overflow: auto;
}

.stats__table thead {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 20;
}

.stats__table th {
  font-size: 0.833rem;
  line-height: 16px;
  letter-spacing: 0;
  font-weight: normal;
  padding: 0 24px;
  vertical-align: top;
  height: auto;
}

.stats__table thead th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  background: #fff;
  text-align: left;
}

.stats__table th div {
  max-height: 64px;
  min-width: 144px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.stats__table tbody { position: relative; }

.stats__table tr {
  padding: 0;
  position: relative;
}

.stats__table tr:hover {
  padding: 0;
  background: #f9f9f9;
}

.stats__table thead tr:hover { background: transparent; }

.stats__table td {
  padding: 6px 24px;
  line-height: 24px;
}

.stats__table td.name {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 10;
}

.stats__table td.name > span {
  display: flex;
  align-items: center;
}

.stats__table td.name span.name {
  display: block;
  max-width: 200px;
}

.stats__table tr:hover td.name { background: #f9f9f9; }

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

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

.stats__table td .avatar {
  height: 24px;
  width: 24px;
  line-height: 24px;
}

.order-asc::after { content: "▲"; }

.order-desc::after { content: "▼"; }

@media (min-width: 680px) {
  .stats__content { position: unset; }
  
  .stats__table { position: relative; }
}
.submenu {
  display: flex;
  padding: 0 12px 12px;
  width: 100%;
}

@media (min-width: 1000px) {
  .submenu { padding: 0 24px 12px; }
}

.submenu .is-right { margin-left: auto; }

.submenu li a {
  height: 24px;
  line-height: 24px;
  display: flex;
}

.submenu a.icon.pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 3px;
  fill: #f43e22;
  color: #f43e22;
}

header nav .btn,
.submenu .btn {
  display: flex;
}

header nav .btn svg,
.submenu .btn svg {
  width: 16px;
  height: 16px;
  margin: 4px -4px;
}

.submenu .btn svg + span {
  display: inline-block;
  margin-left: 12px;
}

.submenu a.pin.active {
  background: #f43e22;
  fill: #fff;
  color: #fff;
}

.submenu a.pin.active:hover { background: #f43e22; }

.submenu a.pin.icon span {
  font-size: 1rem;
  line-height: inherit;
  position: relative;
  padding: 0 3px;
  display: inline;
  font-family: 'PT Sans', sans-serif;
}
.team-dropdown {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  align-self: flex-start;
  height: 48px;
  max-width: calc(100% - 32px);
}

.team-dropdown > button {
  line-height: 24px;
  color: #6d7173;
  text-shadow: none;
  margin-top: 12px;
  position: relative;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: transparent;
  box-shadow:0 0 1px 1px rgba(162, 165, 166, .4) inset, 0 2px 2px -2px rgba(17, 22, 26,.2);
}

.team-dropdown > button > span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.team-dropdown > button:hover { color: currentColor; }

.team-dropdown > button svg { 
  height: 12px;
  width: 12px;
}

.team-dropdown [role="menu"] {
  display: inline-block;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.1) inset,
    0 2px 4px 1px rgba(17, 22, 26, .05),
    0 4px 8px 1px rgba(17, 22, 26, .05);
  top: 0px;
  z-index: 100;
  border-radius: 3px;
  padding: 4px 0;
}

.team-dropdown > button[aria-expanded="false"] + [role="menu"] { display: none; }

.team-dropdown > button[aria-expanded="true"] + [role="menu"] { display: block; z-index: 10000; }

.team-dropdown > button[aria-expanded="true"] svg { transform: rotate(180deg); }

.team-dropdown li,
ul.tabs .team-dropdown li {
  font-size: .833rem;
  height: auto;
  line-height: 24px;
  padding: 4px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  align-content: center;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.team-dropdown .team-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-dropdown li * + .btn { margin-left: auto; }

.team-dropdown li a:hover { text-decoration: underline; }

.team-dropdown li[role="separator"] {
  border-top: 1px solid rgba(17, 22, 26, .1);
  margin: 4px 1px 0;
  padding-bottom: 0;
}

.team-dropdown .help {
  font-size: .833rem;
  padding: 8px;
  background-color: rgba(17, 22, 26, .1);
}

.team__members {
  border: 1px solid rgba(17, 22, 26, .1);
  margin: 0;
}

.team__members select { flex: 1; }

.team__members .todolist li { margin-bottom: 0; }

.team__members .todolist li .btn { width: auto; }

ul.tabs li:has(.team-dropdown) {
  display: flex;
  gap: 8px;
}

ul.tabs li .team-dropdown { 
  height: 24px;
  max-height: none;
}

.stats__table .team-dropdown > button,
ul.tabs li .team-dropdown > button { margin: 0; }

.stats__content:has(.team-dropdown) { overflow: visible; }

.stats__table th .team-dropdown { display: none; }
.todolist label {
  cursor: pointer;
  display: flex;
  font-weight: 400;
}

.todolist label span {
  flex: 1;
  display: flex;
}

.todolist label span.btn { flex: none; }

.todolist label span a {
  margin: 0 5px;
  display: inline-block;
  font-weight: 700;
  padding: 0;
  max-width: 144px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label--checked {
  text-decoration: line-through;
  color: #6d7173;
  font-weight: 400;
}

.todolist label.label--checked span a {
  color: #6d7173;
  font-weight: 400;
}

.todolist input[type='checkbox'] {
  margin: 4px 8px 4px 1px;
  box-shadow: 0 0 0 0;
  height: 16px;
  width: 16px;
}

.todolist__task:hover { background: rgba(17, 22, 26, 0.01); }

.todolist__task__file {
  margin-left: 12px;
  font-size: 0.833rem;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  fill: #1b2226;
}

.todolist__task__file a { color: inherit; }

.todolist__task__file .icon svg { fill: currentColor; }

.label--checked .todolist__task__file { color: #6d7173; }

.prerequisite li,
.todolist li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
}

.todolist li input,
.todolist select {
  margin: 0;
  height: 24px;
  line-height: 24px;
}

.todolist select {
  margin: 0 6px;
  width: auto;
}

.todolist input[type='file'] {
  padding: 3px;
  width: 180px;
  font-size: 0.833rem;
  margin: 0 3px 0 0;
}

.todolist__file__name {
  margin: 0 3px;
  font-size: 0.833rem;
  text-decoration: underline;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todolist .status {
  margin: 0 6px;
  background: rgba(17, 22, 26, 0.05);
  padding: 0 6px;
  font-size: 0.833rem;
}

.todolist .status.editor {
  background: #1cca5e;
  color: #fff;
}

.todolist__item {
  flex: 1;
  margin-left: 6px;
}

.todolist .label-text {
  text-transform: none;
  font-weight: normal;
}

.new-prerequisite {
  position: relative;
  width: 100%;
}

.new-prerequisite select {
  max-width: auto;
  flex: 1;
  height: 24px;
  line-height: 24px;
  background: #fff;
  margin-bottom: auto;
}

.form .new-prerequisite input[type='submit'] { margin-left: 6px; }

li.new-prerequisite,
li.todolist__new-item {
  margin-bottom: 24px;
  border-bottom: 0;
  background: rgba(17, 22, 26, 0.05);
}

li.todolist__new-item form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
}

li.todolist__new-item input[type="submit"] { margin-top: 0; }

ul.prerequisite {
  width: 100%;
  margin: 0 0 24px;
  box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.05);
  font-size: 0.833rem;
}

ul.prerequisite li.skill {
  background: transparent;
  padding: 6px 12px;
}

ul.prerequisite li.skill .icon.icon-lock { fill: #f43e22; }

ul.prerequisite li.skill.finish .icon-lock { display: none; }

ul.prerequisite li.skill.finish,
ul.prerequisite li.skill.finish.locked {
  background: #fef4f3;
}
body.tree { background: #fff; }

body.tree div.container { position: relative; }

body.tree > header { 
  display: block;
  height: auto;
  background: #1c8cca;
  text-align: center;
  padding: 24px;
  color: #f9fbfc;
}

body.tree > header .logo { 
  height: 32px;
  display: block;
  margin: 0 auto 24px;
  fill: #f9fbfc;
}

body.tree > header h2 a:any-link {
  color: #f9fbfc;
  font-weight: 700;
}

body.tree > header .icon--home svg { fill: #f9fbfc; }

section.tree  {
  overflow: auto;
  position: relative;
  color:#a2a5a6;
  padding-bottom: 72px;
 }

.tree header h2 .icon--home { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

.tree.btn {
  padding:0;
  height: 24px;
  width: 24px;
  display: inline-block;
  text-decoration: none;
  margin:0 0 0 12px;
  text-align: center;
  border:0;
  border-radius: 12px;
  letter-spacing: 0;
  line-height: 24px;
  fill: #fff;
  vertical-align: middle;
}

.tree.btn svg { margin:0 0 0 0; display: inline-block; vertical-align: middle; }

.tree h2 {
  margin:0;
  border-radius: 3px;
  display: inline-block;
  padding:  12px;
  border: 1px solid rgba(255,255,255,.1);
}

.tree .content { color: #a2a5a6; }

.tree h2 { border: 1px solid rgba(255,255,255,.1); }

.tree h2 a {
  font-size: 1.2rem;
  color:#a2a5a6;
  line-height: 24px;
  display: inline-block;
  text-decoration: none;
 }

.public .tree__header a.btn {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0;
  border-radius: 12px;
}

body.tree .main {
  width: 100%;
  transform: translateX(0%);
}

section.tree { 
  width: 100%; 
  transform: none; 
  left:0; 
  height: auto;
  min-height: calc(100% - 120px);
}

.submenu + .post-date + section.tree { min-height: calc(100% - 160px); }

section.tree header { 
  height: auto;
  margin-bottom:24px;
  text-align: center;
  padding: 0 48px;
}

.tree__header .subtitle { margin-top: 12px; }

.tree header h3.user { 
  line-height: 36px;
  margin: 12px 0 0;
  color: rgba(255,255,255,.8);
}

.tree header h3.user img.avatar { 
  margin: 0;
  position: relative;
  vertical-align: middle;
}

section.tree .logo { 
  display: block;
  margin: 48px auto 24px;
  fill:#a2a5a6;
  height: 24px;
}

section.tree a { color: #a2a5a6; }

.tree .help {
  display: block;
  background: rgba(17, 22, 26, 1);
  line-height: 24px;
  padding:0 48px;
  margin:0 -48px;
}

.tree .help .icon { font-size: 12px; }

.tree .icon--home {
  display: inline-block;
  margin-right: 6px;
}

.tree .icon--home svg { fill: #a2a5a6; }

.tree .svg-container { 
  overflow: auto; 
  padding: 16px 4px;
  min-height: calc(100% - 72px);
}

.tree g > rect {
  stroke-width: 2;
  stroke: #262e33;
}

.tree g.start > rect,
.tree g.start:hover > rect {
  fill: rgba(28, 140, 202, .7);
}

.tree g.finish > rect,
.tree g.finish:hover > rect {
  fill: rgba(244, 174, 34, .8);
}

.tree g.lock > rect {
  stroke-width: 4px;
  stroke: #f43e22;
}

.tree .node a, .tree .node a:visited {
  text-decoration: none;
  font-size: 1rem;
  color: #131426;
  width: 188px;
  max-width: 188px;
  padding: 0;
  display: flex;
  align-items: center;
 }

.tree .node a:hover { color:#000; }

.tree .svg-container.public .node a:any-link { color:#000; }

.tree .node small { 
  display: block;
  color: #a2a5a6;
}

@supports (-webkit-line-clamp: 1) {
  .tree .node a:after { display : none !important; }
}

.tree .node.start a:hover,
.tree .node.finish a:hover { color:#000; }

.tree .node.lock a { color:#131426;  }

.tree .node rect {
  fill: rgba(17, 22, 26, .05);
  stroke-width: 0;
}

.tree .node:hover rect { fill: rgba(17, 22, 26, .1); }

.tree .node.skill-0-percent-of-experts rect { fill: url(#experts-0-percent); fill-opacity: .7; }
.tree .node.skill-10-percent-of-experts rect { fill: url(#experts-10-percent); fill-opacity: .7; }
.tree .node.skill-20-percent-of-experts rect { fill: url(#experts-20-percent); fill-opacity: .7; }
.tree .node.skill-30-percent-of-experts rect { fill: url(#experts-30-percent); fill-opacity: .7; }
.tree .node.skill-40-percent-of-experts rect { fill: url(#experts-40-percent); fill-opacity: .7; }
.tree .node.skill-50-percent-of-experts rect { fill: url(#experts-50-percent); fill-opacity: .7; }
.tree .node.skill-60-percent-of-experts rect { fill: url(#experts-60-percent); fill-opacity: .7; }
.tree .node.skill-70-percent-of-experts rect { fill: url(#experts-70-percent); fill-opacity: .7; }
.tree .node.skill-80-percent-of-experts rect { fill: url(#experts-80-percent); fill-opacity: .7; }
.tree .node.skill-90-percent-of-experts rect { fill: url(#experts-90-percent); fill-opacity: .7; }
.tree .node.skill-100-percent-of-experts rect { fill: url(#experts-100-percent); fill-opacity: .7; }

.tree .edgePath path {
  stroke: rgba(17, 22, 26, .1);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 0;
  stroke-linecap: butt;
}

.tree .edgePath.lock path {
  stroke: #f43e22;
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  stroke-width: 1.5;
}

.tree .edgePath.halflock path {
  stroke-dasharray: 0;
  stroke-width: 1.5;
  stroke: #6d7173;
}

.tree .edgePath.completed path,
.tree .edgePath.completed.lock path,
.tree .edgePath.completed.halflock path {
  stroke: #f4ae22;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

.tree .edgePath marker path, .tree .edgePath.halflock marker path {
  stroke-width: 0px;
  fill: #b6bcbf;
}

.tree .edgePath.lock marker path { fill: #f43e22; }

.tree .edgePath.completed marker path,
.tree .edgePath.completed.lock marker path,
.tree .edgePath.completed.halflock marker path {
  fill: #f4ae22;
}

body.tree .sidebar {
  width: 100%;
  background: #fff;
}

body.tree .members li a.btn {
  padding:0;
  height: 24px;
  width: 24px;
  line-height: 24px;
  text-align: center;
}

body.tree .members li a.btn svg {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  fill: #fff;
  stroke: none;
}

.tree .node img.avatar {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 0 0 4px;
 }

.skill__name {
  height: auto;
  max-height: 72px;
  white-space: normal;
  word-wrap: break-word;
  margin-right: auto;
  display: inline-block;
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.group-skill__count {
  font-size: 0.833rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 1px 0px rgba(17, 22, 26, .1) inset;
  color: rgba(17, 22, 26, .8);
  padding: 0 4px;
  border-radius: 4px;
  margin-left: 4px;
  white-space: nowrap;
}

.group-skill__count svg {
  fill: rgba(17, 22, 26, .7);
  width: 10px;
  height: 10px;
}

@media (min-width: 1000px) {
  .tree .svg-container { padding: 16px; }

  body.tree .content { width: 100%; }
}
.validation form {
  line-height: 24px;
  padding: 0;
  display: inherit;
  margin: 0 6px 0 0;
}

.validation form.select,
.validation form.result {
  width: auto;
  display: flex;
  align-items: center;
  align-content: center;
  flex: 1;
  font-weight: 700;
}

.validation div { width: 100%; }

.validation select {
  flex: 1;
  background: #fff;
  color: rgba(17, 22, 26, 0.8);
  border: 1px solid rgba(17, 22, 26, 0.1);
  padding: 0 12px;
  height: 24px;
  margin: 0 6px 0 0;
}

.validation input {
  line-height: 24px;
  height: 24px;
  margin: 0;
  padding: 0 12px;
}

.validation form.result a { flex: 1; }

.validation label.btn {
  line-height: 24px;
  margin: 0;
  font-weight: 700;
  height: 24px;
  border: 0;
  display: flex;
  align-items: center;
  align-content: center;
  padding: 0 12px 0 8px;
  cursor: pointer;
}

.validation .btn.add,
.validation .delete {
  background: #f4ae22;
  color: #1b2226;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  line-height: 24px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0;
}

.validation strong { flex: 1 1 0; }

.validation .delete {
  background: #f43e22;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}

.validation .icon-cancel {
  position: relative;
  margin: 0;
}

.validation .icon-cancel input[type='submit'] {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.validation .cancel { background: #f43e22; }

.validation a.btn {
  line-height: 24px;
  height: 24px;
  text-decoration: none;
  padding: 0 12px;
  margin: 0 0 0 6px;
  display: flex;
  align-items: center;
  align-content: center;
}

.validation a.btn .select {
  margin: 0 0 0 5px;
  background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 1000px) {
  .validation { display: flex; }
}
.workspace-form {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.box--workspace {
  box-shadow: 0 0 0 1px #edf0f2 inset, 0 2px 2px -1px rgba(17, 22, 26, 0.1);
  max-height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
}

.partnerships-tab {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.box--workspace .box--help { margin: 1px; }

.workspace-partnerships {
  margin: 0;
  overflow: scroll;
  flex: 1;
}

.workspace-partnerships .basic-list { margin: -12px; }

.workspace-form .todolist__new-item { margin: 0; }

.workspace-form section.form {
  flex: 1;
  overflow-y: hidden;
  position: relative;
  overflow: hidden;
  display: flex;
}

.edit_workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.workspace-form trix-editor {
  height: inherit;
  flex: 1;
  margin-bottom: 0;
}

section.workspace {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

section.workspace .workspace__text {
  box-shadow: 0 0 0 1px #edf0f2 inset, 0 2px 2px -1px rgba(17, 22, 26, 0.1);
  padding: 12px;
  margin: 0 24px 24px;
}

.workspace__text a.icon { margin: 0 0 0 6px; }

.workspace .credits .sidebar-toggle {
  font-weight: 700;
  text-decoration: none;
  line-height: 24px;
  display: inline-flex;
  margin: 12px 12px 12px 0;
}

.workspace .credits .avatar {
  height: 24px;
  width: 24px;
  line-height: 24px;
  margin: 0 6px 0 0;
}

.workspace__actions form { padding-bottom: 0; }

.workspace__actions {
  align-items: top;
  display: flex;
  background: rgba(17, 22, 26, 0.05);
  padding: 12px;
  margin: -12px -12px -12px;
}

.workspace__versions {
  flex: 1;
  margin-left: 0;
}

.workspace__versions label {
  padding: 0 12px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(17, 22, 26, 0.1) inset;
}

.workspace__versions select {
  padding: 0 12px;
  margin: 0;
  line-height: 24px;
  height: 24px;
  font-weight: 700;
  background: #fff;
}

.workspace__actions .btn {
  margin: 0 0 0 6px;
  position: relative;
  height: 24px;
  text-decoration: none;
}

.workspace-form [data-skill-description-tab-content] {
  border: 0;
  margin: 12px -12px -12px;
  overflow: auto;
}

.workspace h2 { margin-top: 48px; }

.draft {
  text-transform: uppercase;
  font-size: 0.833rem;
  letter-spacing: 1px;
  color: #f43e22;
  margin: 0 12px;
}

.title .date {
  margin: 0 12px;
  font-weight: 400;
  font-size: 0.833rem;
}

h3.discussion { padding: 0 24px 24px; }

.workspace ins {
  text-decoration: none;
  background-color: #d9f8e6;
}

.workspace ins ul,
.workspace ins li { background-color: #d9f8e6; }

.workspace del { background-color: #fee3df; }

.workspace-publication-modal__form {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 24px);
  margin-left: -12px;
}

.workspace-publication-modal__form__option {
  flex: 1;
  min-width: 240px;
  background: rgba(17, 22, 26, 0.05);
  padding: 24px;
  margin: 0 12px;
  flex-wrap: wrap;
}

.workspace-publication-modal__form__option label {
  width: 100%;
  margin-bottom: 24px;
}

.workspace__form__footer {
  text-align: left;
  width: 100%;
}

.workspace__publication {
  background: rgba(17, 22, 26, 0.05);
  box-shadow: 0 0 0 1px #edf0f2 inset, 0 2px 2px -1px rgba(17, 22, 26, 0.1);
  margin: 24px -12px -12px;
  padding: 12px;
}

.workspace__publication .form { margin-top: 12px; }
.page .card .community-list {
  margin: 0;
  width: 100%;
  padding: 0;
}

.page .card .community-list li { padding: 12px 24px; }

.page .card .community__description {
  flex: 1;
  overflow: hidden;
}

.page .card .community__description a {
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
}

.page .card .community__description p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page .community_stats {
  display: flex;
  align-items: flex-start;
}

.page .community_stats > span {
  margin-left: 16px;
  font-size: 1rem;
  line-height: 24px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.page .community_stats .icon {
  margin-left: 0;
  margin-right: 4px;
  height: 16px;
  width: 16px;
}

.page .community_stats .icon svg {
  margin: 0;
  height: 16px;
  width: 16px;
}

.page .card.community {
  display: flex;
  flex-wrap: wrap;
}

.page .card.community header { width: 100%; }

.page .card.community > div {
  flex: 3;
  min-height: 600px;
  min-width: 400px;
  overflow: hidden;
}

.page .card.community .skill__description { padding: 24px; }

.page .card.community > aside {
  background: rgba(17, 22, 26, 0.03);
  flex: 1;
  min-width: 200px;
  border-left: 1px solid rgba(17, 22, 26, 0.1);
  padding: 24px;
}

.page .card.community > aside h3 { padding: 0; }

.page .card.community aside li {
  padding: 6px 0;
  margin: 0;
  border: 0;
  list-style-type: none;
}

.page .card.community p { padding: 24px; }

.page .card.community p.lead {
  font-size: 1.2rem;
  background: #fff;
}

.page .card.community h3 { padding: 0 24px 12px; }

.page .community__skills {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}

.page .community__skills h4 {
  padding: 0 24px;
  display: flex;
  align-items: center;
  width: 100%;
}

.page .community__skills h4 .btn { margin: 0 0 0 auto; }

.page .community__skills li {
  list-style: none;
  padding: 24px 0;
  border-bottom: 1px solid rgba(17, 22, 26, 0.1);
  margin: 0;
  max-width: 100%;
  position: relative;
}

.community-skills__description { margin-left: 8px; }

@media (min-width: 1000px) {
  .page .card.community p { padding: 24px; }

  .page .card.community h3 { padding: 0 24px 24px; }

  .page .community__skills h4 { padding: 0 24px; }
}
a.page {
  margin-left: 6px;
  border: 1px solid rgba(17, 22, 26, .01);
  box-shadow: 0 1px 1px 0px rgba(17, 22, 26, .1);
  background: #fff;
  width: 24px;
  border-radius: 12px;
  text-align: center;
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
}

.page .title { color: #fff; }

.page h1 {
  line-height: 48px;
  margin: 0 auto 48px;
  padding: 0;
  font-size: 1.728rem;
  text-align: center;
}

.page .card {
  display: block;
  margin: 0 auto 24px;
  box-shadow: 0 1px 24px 1px rgba(17, 22, 26, .03);
  max-width: 1000px;
  width: 100%;
  border: 1px solid rgba(17, 22, 26, .05);
  border-radius: 8px;
  background: #fff;
  color: #1b2226;
}

.page .card header {
  background: rgba(17, 22, 26, .05);
  color: #6d7173;
  box-shadow: 0 1px 2px 0 rgba(17, 22, 26, .2);
  padding: 6px 24px;
  font-size: 1rem;
  height: auto;
  z-index: 10;
  margin: 0;
 }
  
.page .card header h2 {
  padding: 0;
  text-align: left;
  max-width: none;
}

.page .card header .title { color: #6d7173; }

.page h3 { margin-top: 24px; }

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

.page article a { color: #2e3259; }

.page article a.btn { color: #fff; }

.page .card ul.list {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  color: #6d7173;
}

.page .card ul.list li {
  list-style: none;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(17, 22, 26, .1);
  margin: 0;
  display: flex;
  flex-wrap: no-wrap;
  max-width: 100%;
}

.page .card.community ul.list li { display: block; }

.page .card.community ul.list li .pr-1 {
  font-weight: 700;
  font-size: 1.2rem;
}

.page .page__content { padding: 24px; }

.page nav.pagination { margin: 24px; }

@media (min-width: 1000px) {
  .page .card header {
    padding: 12px 24px;
    font-size: 1.2rem;
   }

  .page .page__content,
  .page .card ul.list li { padding: 24px; }

  .page nav.pagination { margin: 36px 24px; }
}
body.public {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  height: auto;
  background: #1b2226;
  background: #f9fbfc;
  position: relative;
}

.public a { text-decoration: underline; }

.public a.btn {
  text-decoration: none;
  color: #fff;
}

.public svg.logo {
  fill: #f9fbfc;
  height: 32px;
  margin: 96px auto 48px;
  display: block;
}

.public p.alert {
  background: #fff;
  padding: 14px;
}

.public .home {
  width: 100%;
  position: relative;
  line-height: 32px;
  font-size: 18px;
}

body.public > header {
  width: 100%;
  height: auto;
  padding: 32px 0 0;
  background: #f9fbfc url(/assets/sky-4cd4e5562b051201f571c0140433f1ef5fb4127370b35436b902d5944b073372.svg) no-repeat bottom center;
  background-size: cover;
  color: #f9fbfc;
  min-height: 408px;
  margin-bottom: -192px;
  text-align: center;
}

body.public > header.home { margin-bottom: 0; }

body.public > header .btn.login {
  position: absolute;
  line-height: 48px;
  right: 24px;
  top: 24px;
  padding: 0 32px 0 16px;
  color: inherit;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(244, 249, 252, 0.2) inset;
  background: transparent;
}

body.public > header .btn.login:hover {
  background: transparent;
  box-shadow: 0 0 0 1px rgba(244, 249, 252, 0.3) inset;
}

body.public > header .hep {
  display: inline-block;
  position: absolute;
  left: 24px;
  top: 36px;
  line-height: 32px;
}

body.public > header .hep svg {
  height: 24px;
  fill: #f9fbfc;
}

.public .screenshot {
  width: 100%;
  max-width: 1120px;
  margin: -24px auto -48px;
  overflow: visible;
  padding: 0;
  position: relative;
}

.public .screenshot img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
}

body.public h2 {
  text-align: center;
  max-width: 42ch;
  font-weight: 400;
  padding: 0 32px 48px;
  margin: 0 auto;
  font-size: 1.44rem;
  line-height: 32px;
  background: transparent;
  color: inherit;
}

body.public h2.community { padding: 12px 32px; }

.public .features h2 { color: #6d7173; }

.public .features h2 strong { color: #1b2226; }

.public .feature h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 12px 0 12px -40px;
  line-height: 1rem;
  display: flex;
  align-items: center;
}

.public .feature h3 .icon {
  fill: #1c8cca;
  margin-right: 16px;
  position: relative;
  width: 24px;
  height: 24px;
  text-align: center;
}

.public .feature h3 .icon svg {
  width: 100%;
  height: 100%;
  margin: 0;
}

.public .feature p {
  color: #6d7173;
  text-align: left;
}

.public h2 a { color: inherit; }

.public .schools {
  background: #f9fbfc;
  padding: 96px 0;
  text-align: center;
}

.public .schools .container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.public .schools .school {
  min-width: 128px;
  padding: 32px;
  flex: 1;
  text-align: center;
}

.public .schools .school img {
  width: 100%;
  max-height: 64px;
  max-width: 96px;
  margin: auto;
  filter: saturate(1);
}

.public .intro {
  text-align: center;
  padding: 64px 32px;
  min-width: 300px;
  flex: 1;
}

.public h2 {
  font-size: 1.728rem;
  font-weight: 300;
  text-align: center;
  margin: 0 24px 48px;
}

.public .contact {
  margin: 0;
  width: 100%;
  padding: 228px 32px;
  text-align: center;
  min-width: 300px;
  flex: 1;
  background: #1b2226;
  color: #f9fbfc;
}

.public .contact h3 {
  font-size: 1.44rem;
  margin-bottom: 0;
  font-weight: 400;
  color: #f9fbfc;
}

.public a.btn {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 auto;
  font-weight: 700;
}

.public a.btn .icon { fill: #f9fbfc; }

.public .btn.secondary {
  letter-spacing: 3px;
  line-height: 64px;
  margin: 0 auto 96px;
  padding: 0 32px;
  font-weight: 700;
  font-size: 0.833rem;
}

.public .btn.tertiary {
  letter-spacing: 3px;
  line-height: 64px;
  margin: 0 auto 96px;
  padding: 0 32px;
  font-weight: 700;
  font-size: 0.833rem;
  background: #f9fbfc;
  color: #6d7173;
}

form .error {
  color: #ea3618;
  padding: 14px;
  background: rgba(17, 22, 26, 0.1);
  margin-bottom: 14px;
}

section.login {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px 0 rgba(17, 22, 26, 0.1);
}

section.login.new-community { padding: 24px; }

section.new-community fieldset {
  width: 100%;
  margin: 24px -24px 24px;
}

section.login,
section.form {
  background: #fff;
  padding: 24px 48px 48px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 480px;
}

section.login--invitation {
  padding: 24px 0 0;
  max-width: none;
}

section.login header {
  height: auto;
  min-height: auto;
  line-height: inherit;
}

section.login > div {
  width: 100%;
  text-align: center;
  min-width: 300px;
}

section.login > div form { text-align: left; }

section.login .login__invites {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(17, 22, 26, 0.1);
  margin-top: 24px;
}

section.login .login__invites > div {
  flex: 1;
  padding: 24px;
}

section.login .login__invites > div > fieldset { margin-top: 40px; }

section.login .login__invites > div + div { border-left: 1px solid rgba(17, 22, 26, 0.1); }

section.login .login__invites a { display: block; }

section.login .login__invites legend {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 4px;
  font-size: 1.2rem;
}

section.login > div h4 {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 4px;
  font-size: 1.728rem;
  display: inline-block;
  text-align: center;
  margin: 24px auto 0;
}

.login h2 {
  margin-bottom: 48px;
  text-align: center;
  font-weight: 300;
  font-size: 1.44em;
}

.login h4 { margin-bottom: 24px; }

.login table th,
.admin table td {
  text-align: left;
}

.login form,
.form form {
  width: 100%;
  margin: 24px 0 0;
}

.form input[type='submit'] {
  width: 100%;
  text-align: center;
  margin-top: 24px;
}

.form h3 { margin-bottom: 24px; }

.form h4 { margin-bottom: 14px; }

section.login a { color: #1b2226; }

header.community {
  padding: 48px 24px 24px;
  height: auto;
}

.public footer {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 32px;
  height: auto;
}

.public footer .credits {
  display: block;
  font-size: 0.694rem;
  color: #6d7173;
}

.public footer .credits a {
  color: #6d7173;
  font-weight: 400;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.public footer .credits a.btn {
  color: #6d7173;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(162, 165, 166, 0.5);
  line-height: 24px;
  margin: 0 24px 0 0;
  font-size: 0.573rem;
}

.public .features {
  background: #f9fbfc;
  width: 100%;
  padding: 120px 0 128px;
  text-align: center;
}

.public .features .container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  overflow: visible;
}

.public .feature {
  flex: 1;
  min-width: 300px;
  padding: 32px 32px 32px 64px;
}
.awesomplete {
	overflow-x: hidden;
	max-width: 320px;
}

.awesomplete > ul {
	border-radius: 0;
	margin: 0 !important;
  background: rgba(17, 22, 26, .91);
	border: 0;
	box-shadow: 0 0 0;
	text-shadow: none;
  line-height: 24px;
}

.awesomplete > ul:before {
	content: "";
	display: none;
}

.awesomplete > ul > li {
	position: relative;
	padding: 6px 12px;
	cursor: pointer;
	color: rgba(255,255,255,.7);
}

.awesomplete > ul > li:hover {
	background: rgba(17, 22, 26, .6);
	color: rgba(255,255,255,.7);
}

.awesomplete > ul > li[aria-selected="true"] {
	background: rgba(17, 22, 26, .6);
	color: inherit;
}

.awesomplete mark {
	color: rgba(255,255,255,.7);
	background: rgba(17, 22, 26, .6);
}

.awesomplete li:hover mark { background: rgba(17, 22, 26, .6); }

.awesomplete li[aria-selected="true"] mark {
	background: rgba(17, 22, 26, .6);
	color: inherit;
}
body .buorg {
  position: absolute;
  position: fixed;
  z-index: 111111;
  width: 100%;
  top: 0px;
  left: 0px;
  border-bottom: 0;
  text-align: center;
  color: #1b2226;
  background-color: #f9fbfc;
  font-family: 'PT Sans', sans-serif;
  font-size: 1rem;
  box-shadow: 0 2px 0 0 rgba(255, 255, 255,.1) inset, 0 -2px 0 0 rgba(17, 22, 26,.1) inset, 0 2px 2px -2px rgba(17, 22, 26,.2);
  animation: 0s;
}

body .buorg-pad {
  padding: 12px;
  line-height: 24px;
}

body .buorg-buttons {
  margin: 12px 0 0;
  display: block;
  text-align: center;
}

body #buorgig, 
body #buorgul, 
body #buorgpermanent {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 0 rgba(255, 255, 255,.1) inset, 0 -2px 0 0 rgba(17, 22, 26,.1) inset, 0 2px 2px -2px rgba(17, 22, 26,.2);
  padding: 1px 10px;
  border-radius: 2px;
  font-weight: normal;
  background: #1c8cca;
  white-space: nowrap;
  margin: 0 2px;
  display: inline-block;
}

body #buorgig { background-color: #a2a5a6; }

@media only screen and (max-width: 700px) {
  body .buorg div {
    padding: 6px 12px 6px 12px;
    line-height: 24px;
  }
}

body .buorg-fadeout { transition: none; }
.tribute-container {
  position: relative;
  bottom: 60px !important;
  top: auto !important;
  max-width: 320px;
  overflow: hidden;
}

.tribute-container ul {
  border: 1px solid rgba(17, 22, 26, .1);
  background: #fff;
}

.tribute-container li { padding: 6px 12px; }

.tribute-container li.highlight,
.tribute-container li:hover {
  background: rgba(17, 22, 26, .1); 
}

#workspace-partnerships-tab .tribute-container {
  position: absolute !important;
  bottom: 36px !important;
  top: auto !important;
  left: 24px !important;
  z-index: 10;
  overflow: scroll;
  max-height: 240px;
  overflow: auto;
}

@media (min-width: 1000px) {
  #workspace-partnerships-tab .tribute-container { position: absolute !important; }
}
trix-editor {
  border: 1px solid rgba(17, 22, 26,.2);
  box-shadow: 0 0 12px 0 rgba(17, 22, 26,.05) inset;
  margin: 0 0 24px;
  padding: 0.4em 0.6em;
  min-height: 12rem;
  overflow-y: auto;
}

trix-toolbar .trix-button-group {
  margin-bottom: 12px;
  border: 1px solid rgba(17, 22, 26,.2);
 }

trix-toolbar .trix-button {
  color: rgba(17, 22, 26,.8);
  font-size: 0.833rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(17, 22, 26,.2);
  box-shadow: none;
}

trix-toolbar .trix-button:hover {
  color: rgba(17, 22, 26,1);
  background: inherit;
}

trix-toolbar .trix-button:not(:first-child) { border-left: 1px solid rgba(17, 22, 26,.2); }
  
trix-toolbar .trix-button.trix-active {
  background: #f4ae22;
  color: rgba(17, 22, 26, 1); 
}

trix-toolbar .trix-button:disabled { color: rgba(17, 22, 26, 0.2);  }

trix-toolbar .trix-dialog {
  font-size: 0.694em;
  padding: 12px;
  background: #fff;
  box-shadow: 0 0.3em 1em rgba(17, 22, 26,.2);
  border-top: 2px solid rgba(17, 22, 26,.2);
  border-radius: 4px;
}

trix-toolbar .trix-dialog__link-fields { align-items: flex-start; }

trix-toolbar .trix-input--dialog {
  padding: 12px;
  margin: 0 12px 0 0;
  border: 1px solid rgba(17, 22, 26,.3);
  background-color: #fff;
}

trix-editor .trix-button {
  color: rgba(17, 22, 26,.8);
  font-size: 0.833rem;
  padding: 0 12px;
  background: transparent; 
}

trix-toolbar .trix-button--dialog { padding: 0 12px; }

trix-editor .trix-button:not(:first-child) { border-left: 1px solid rgba(17, 22, 26,.4); }

trix-editor .trix-button.trix-active { background: #f4ae22; }

.attachment .caption {
  padding:12px;
  box-shadow: 0 0 0 1px #edf0f2 inset, 0 24px 24px -24px rgba(17, 22, 26,.05);
  border-radius: 4px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  min-width:0;
}

.attachment figure img { margin: 12px 0; }

.attachment .size {
  font-size: 0.833rem;
  color: #6d7173;
}

trix-editor blockquote,
.trix-content blockquote,
.box blockquote,
blockquote {
  font-family: 'PT Sans', sans-serif;
  display:block;
  padding: 12px 24px 12px 36px;
  margin: 0 0 24px;
  position: relative;
  font-size: 1.2rem;
  background: rgba(17, 22, 26, .03);
  border: 1px solid rgba(17, 22, 26, .03);
}
trix-editor blockquote::before,
.trix-content blockquote::before,
.box blockquote::before,
blockquote::before {
  content: "\201C";
  font-family: 'PT Sans', sans-serif;
  font-size:4.3rem;
  line-height: 24px;
  font-weight: bold;
  color: #94999a;
  opacity: .3;
  position: absolute;
  left: 6px;
  top:18px;
}

trix-editor blockquote::after,
.trix-content blockquote::after,
.box blockquote::after,
blockquote::after {
  content: "";
}

trix-editor pre,
.box pre {
  padding: 12px 24px 12px 36px;
  margin: 0 0 24px;
  background: rgba(17, 22, 26, .03);
  border: 1px solid rgba(17, 22, 26, .03);
}
body.admin {
  border-top: 6px solid #ffb621;
  overflow-x: hidden
}

section.admin {
  padding: 24px;
  margin:0 auto;
  width:100%;
}

section.admin h2 { margin:0 0 24px; }

.admin .logo { height: 48px; }

.admin .logo svg {
  height: 24px;
  margin: 24px 24px 24px 0;
}

.admin .noresult {
  margin: 12px 0;
  border: 1px solid rgba(17, 22, 26,.05);
  color: #6d7173;
  padding: 12px;
  font-size: .833rem;
  text-align: left;
  position: relative;
}

.admin .noresult > * { color: currentColor; }

.admin nav {
  display: inline-block;
  margin-bottom: 48px;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(17, 22, 26,.05), 0 2px 12px -2px rgba(17, 22, 26,.10);
}

.admin nav a {
  display: inline-block;
  padding: 12px 24px;
}

.admin nav a.active {
  background: rgba(17, 22, 26,.05);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
}

section.table {
  width: 100%;
  overflow-x: auto;
  color: #6d7173;
}

.admin table { width:100%; margin:48px 0; }

.admin table th {
  text-transform: uppercase;
  font-size: 0.684rem;
  letter-spacing: 1px;
  text-align:left;
  padding: 0 12px;
  white-space: nowrap;
}

.admin table tr { line-height:48px; }

.admin table tr:hover { background: rgba(17, 22, 26,.05); }

.admin thead tr:hover { background: transparent; }

.admin table td { 
  line-height: 24px;
  padding: 12px;
  text-align:left;
}

.admin table td:hover { box-shadow: 0 0 0 1px rgba(17, 22, 26,.05), 0 2px 12px -2px rgba(17, 22, 26,.10); }

.admin table a { text-decoration: underline; }
.admin table p { line-height: 24px; padding: 12px 0; }

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

.admin table .btn.secondary { display: inline-block;
  height:24px; line-height: 24px; font-size: .694rem;
  margin:0; margin-right:7px; padding:0 7px; letter-spacing: 2px; }

.admin table .action { text-align: right; white-space: nowrap; }
.admin table .action form { display: inline; }

.admin table .btn.secondary.delete { 
  background:#ea3618;
  color: #fff;
}

.admin input[type='checkbox'] { display: inline-block; }

.admin table td.community__name { 
  font-weight: 700;
  color: #1b2226;
}

.admin form { max-width: 1000px; }

.admin form trix-editor { height: 30rem; }

.admin__actions .btn { line-height: 48px; }
 

@media (min-width: 1000px) {
  .admin__actions {
    position: absolute;
    right: 24px;
    top: 40px;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *









 */