.select-file {
  input[type="text"] {
    height: 39px;
    margin: 0;
    width: 195px !important;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid $neutral-grey;
  }
}

.contextual-editor {
  box-sizing: border-box;
}
.drawing-zone {
  article.media {
    border: 1px dashed $primary;
    img {
      display: block;
    }
  }
}

.tag {
  color: $accent;
  padding-left: 10px;
}

.dragging a {
  pointer-events: none;
}

.icons-select {
  background: transparent;
  i {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  span {
    text-align: center;
    width: 100%;
  }
  .current {
    @include run-transition(padding-left);
    i {
      float: left;
      margin-right: 8px;
    }
    &:hover,
    &.editing {
      i:before {
        color: $accent;
      }
    }
  }
  .current.editing {
    /*background: $primary;
		color: $white;*/
  }
  .options-list {
    /*background: $primary;
		color: $white;*/
    background: $white;
    color: $black;
    font-size: 14px;
    @include border-radius-bottom(3px);
    box-shadow: 3px 3px 5px $shadow-dark;

    .option {
      &:hover {
        i:before,
        span {
          color: $accent;
        }
      }
    }
  }
  .wrapper {
    padding: 12px;
  }
}

.fill-bar {
  width: 100%;
  height: 15px;
  box-shadow: 0 0 3px $grey;
  border-radius: 10px;
  overflow: hidden;
  & > div:first-child {
    height: 100%;
    transition: all 0.25s ease-in-out;
    &.weak {
      background-color: $red;
    }
    &.normal {
      background-color: $orange;
    }
    &.strong {
      background-color: $green;
    }
  }
}

@-moz-keyframes blink {
  0% {
    border-bottom-width: 1px;
  }
  100% {
    border-bottom-width: 30px;
  }
}
@-webkit-keyframes blink {
  0% {
    border-bottom-width: 1px;
  }
  100% {
    border-bottom-width: 30px;
  }
}
@keyframes blink {
  0% {
    border-bottom-width: 1px;
  }
  100% {
    border-bottom-width: 30px;
  }
}

.cell.my-notifications {
  p {
    color: $white;
    font-size: 13px;
    margin-left: 6px;
  }
  a.button {
    float: none;
    margin: 0 5px;
    padding-left: 48px;
    span {
      float: none;
    }
  }
  a.button.disabled {
    max-width: 360px;
  }
  i.bell {
    height: 20px;
    width: 50px;
    line-height: initial;
    vertical-align: top;
    margin-right: 10px;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 0;
  }
}
.row.my-notifications {
  a {
    margin-left: 15px;
  }
}
// global  / notifications xtrn
.responsive-table {
  //futur stick to top
  border: 1px solid $neutral-grey;
  .fixed-head {
    & + .row {
      //border-bottom: 1px solid $neutral-grey;
    }
  }
  // .fixed-head.scrolling{
  // 	tr:first-child{
  // 		height: 60px;
  // 	}
  // }
  table {
    thead {
      i {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        line-height: 30px;
        left: 0;
        top: 50%;
        margin-top: -15px;
        &:before {
          display: block;
          font-size: 15px;
          transform: rotate(90deg);
          @include run-transition(all);
          color: $black;
        }
      }
      td:first-child {
        padding-left: 40px;
      }
    }
    thead.slided i:before {
      transform: rotate(180deg);
    }
  }
}
//specific notfs extern
.my-notifications {
  .responsive-table {
    .fixed-head {
      //	z-index: 99;
    }
    table thead {
      tr {
        background: $primary-lighter;
      }
      tr:hover {
        background: darken($primary-lighter, 10%);
      }
    }
  }
}
//specific share table
.share .responsive-table {
  table {
    tbody td {
      .drop-line {
        display: none;
      }
    }
    td {
      width: inherit;
    }
  }
}

.widgets {
  padding: 0;
  width: 34%;
  widgets {
    position: relative;
    display: block;
    box-sizing: border-box;
  }
}
.widgets-friend {
  margin-left: 35%;
}

em.metadata {
  font-size: 11px;
}

filters {
  padding-bottom: 20px;
  @include row;
  display: block;
  h4 {
    margin: 0;
    font-weight: bold;
    line-height: 30px;
    font-size: 16px;
    color: $primary;
  }
  p:first-child {
    i {
      background-size: 100% auto;
      margin-left: 10px;
    }
  }
}

[stick-top-top] {
  @include run-transition(top);
}

[data-drop-down] {
  @include material-card(3px, 5px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 12px;
  ul {
    background: white;
    border: 1px;
    color: $text-light;
    font-size: 1.2em;
    padding: 1px;
    li {
      text-align: left;
      line-height: initial;
      white-space: normal;
      em.low-importance {
        height: auto;
        margin-top: 1px;
      }
    }
    li:hover {
      color: $white;
    }
  }
}

.comment {
  border: 1px solid $light-grey;
  background: $white;
}

.hash-magnet {
  .comment {
    padding: 7px 10px;
    margin-top: 0;
  }
  article form {
    textarea + button {
      margin-bottom: 30px;
    }
  }
}
.hash-magnet article {
  h2 + div + div {
    margin-top: 20px;
  }
}

[contenteditable] {
  background: $white;
  border: 1px solid $neutral-grey;
}
[contenteditable]:focus {
  border: 2px solid $accent;
}
[contenteditable],
[bind-html] {
  [style*="font-size:72px"] {
    line-height: 90px;
  }
  [style*="font-size:48px"] {
    line-height: 60px;
  }
  [style*="font-size:36px"] {
    line-height: 52px;
  }
  [style*="font-size:28px"] {
    line-height: 36px;
  }
  [style*="font-size:26px"] {
    line-height: 34px;
  }
  [style*="font-size:24px"] {
    line-height: 32px;
  }
  [style*="font-size:22px"] {
    line-height: 28px;
  }
}
[contenteditable="false"] {
  background: unset;
  border: unset;
}
.grid-exemple.row .article,
.grid-exemple.row .absolute {
  font-size: 14px;
  padding: 10px;
  color: $disabled-color;
  border: $light-grey solid 5px;
  border-radius: 5px;
  background: $white;
  text-align: left;
}

.datepicker {
  padding: 0;
  table {
    line-height: 30px;
    thead {
      tr {
        background: $primary;
        th {
          color: white;
        }
        th:hover {
          background: $accent !important;
        }
      }
    }
    tr {
      background: $white;
      border-bottom: 1px solid $shadow-light;
      td,
      td:first-child,
      th {
        width: 25px;
        font-size: 12px;
      }
      .active {
        background: $accent;
      }
      td:hover {
        background: $primary-light !important;
      }
    }
  }
}

.user-infos {
  .avatar {
    margin-right: 15px;
  }
  .sheet {
    overflow: hidden;
  }
}
.user-book {
  input[type="button"],
  button {
    display: none;
  }
  .one.cell i {
    line-height: 38px;
  }
}

.account {
  .mood {
    //devise
    & + div {
      margin-bottom: 15px;
      overflow: hidden;
      box-sizing: border-box;
    }
    icons-select {
      .option {
        display: inline-block;
        vertical-align: top;
        width: 100px;
        float: none;
        padding: 12px 0;
      }
    }
  }
  article > h1 {
    font-size: 1.7em;
    margin-bottom: 10px;
  }
}

select {
  background: $light-grey;
  border: none;
  height: 25px;
  color: $grey;
  margin-bottom: 7px;
}
.selectable-list {
  li {
    border: 1px solid $accent;
  }
  li:hover {
    background: $accent;
    color: $white;
  }
  li.selected {
    background: $accent;
    color: $white;
  }
}

.humane-original-success {
  background: $green;
}
.progress-bar {
  .filled {
    background: $primary;
  }
  .filled.small {
    color: $accent;
  }
}

.illustrated-article {
  .illustration {
    min-width: 115px;
    padding: 15px;
    legend {
      width: 90px;
      background: transparent;
      margin: 0;
      text-align: center;
    }
    .image {
      width: 90px;
      height: 90px;
      margin: 8px 0 0;
      img {
        border-radius: 100px;
      }
    }
  }
  .illustrated-text {
    border-top: 1px solid $neutral-grey;
    border-radius: 15px;
    box-shadow: 0 0 2px;
    .upper-title {
      margin-bottom: 5px;
    }
    .cke_editable {
      border: none;
      min-height: 110px;
      border: 1px dashed $neutral-grey;
      margin-bottom: 10px;
      &:focus {
        border-width: 1px;
        border-style: dashed;
      }
    }
  }
  .small.illustration .image {
    width: 100px;
    height: 100px;
  }
}

.menu-items {
  > li {
    min-height: 30px;
    line-height: 30px;
    list-style-type: none;
    color: $primary;
    cursor: pointer !important;
  }
  > li:hover {
    color: $accent;
  }
  i.text {
    background: none;
    border: none;
    font-size: 30px;
    text-align: center;
  }
  i.text:before {
    font-family: serif;
    font-weight: bold;
    display: block;
    width: 24px;
  }

  > li > div > input[type="button"] {
    background-position: 4px !important;
    padding-left: 29px;
    font-family: Arial;
    color: $primary;
    text-transform: none;
    background-size: 19px;
    background-color: transparent;
    border: none;
    width: 100% !important;
    text-align: left;
    font-size: 12px;
    box-shadow: none;
  }
  > li > div > input[type="button"]:hover {
    color: $accent;
    background-color: transparent;
    background-size: 19px;
  }
}

.drawing-grid {
  strong {
    color: inherit;
  }
}
.editor.drawing-grid {
  .grid-add-row {
    background: $primary;
    border-radius: 0;
  }
  .grid-add-row:hover {
    background: $primary;
  }
}

.media-container.pink [contenteditable],
.media-container.pink .text-wrapper > [bind-html] {
  background: $pink;
  @include run-transition(background);
}
.media-container.purple [contenteditable],
.media-container.purple .text-wrapper > [bind-html] {
  background: $purple;
  @include run-transition(background);
}
.media-container.orange [contenteditable],
.media-container.orange .text-wrapper > [bind-html] {
  background: $orange;
  @include run-transition(background);
}
.media-container.white [contenteditable],
.media-container.white .text-wrapper > [bind-html] {
  background: $white;
  color: $black;
  @include run-transition(background);
}
.media-container.green [contenteditable],
.media-container.green .text-wrapper > [bind-html] {
  background: $green;
  @include run-transition(background);
}
.media-container.blue [contenteditable],
.media-container.blue .text-wrapper > [bind-html] {
  background: $accent;
  @include run-transition(background);
  color: $white;
  h1,
  h2,
  h3 {
    color: $white;
  }
}
.media-container.black [contenteditable],
.media-container.black .text-wrapper > [bind-html] {
  background: $primary;
  color: $white;
  @include run-transition(background);
  h1,
  h2,
  h3 {
    color: $white;
  }
}
.schedule {
  width: calc(100% - 130px);
  height: auto;
  margin-left: 130px;
  padding-right: 0;
  button {
    border-radius: 0;
  }
  legend.timeslots {
    width: 130px;
    background: $primary-light;
    color: $white;
    position: absolute;
    left: -130px;
  }
  .timeslot {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .days {
    width: 100%;
    .day {
      float: left;
      width: calc(100% / 7);
      position: relative;
      legend {
        width: 100%;
        text-align: center;
        background: $primary-light;
        color: $white;
      }
      .timeslots {
        height: auto;
        .timeslot {
          background: $white;
          border-bottom: 1px solid $light-grey;
          border-right: 1px solid $light-grey;
          width: 100%;
          box-sizing: border-box;
        }
      }
    }
  }
  .schedule-items {
    .schedule-item {
      border: 1px solid transparent;
      border-radius: 5px;
      box-sizing: border-box;
      z-index: 500;
      .schedule-item-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 12px;
        text-align: left;
        padding: 5px;
        color: $white;
        line-height: 17px;
        i.pending-status {
          position: absolute;
          bottom: 12px;
          right: 12px;
          z-index: 510;
        }
        i.validated-status {
          position: absolute;
          bottom: 12px;
          right: 12px;
          z-index: 510;
        }
        i.refused-status {
          position: absolute;
          bottom: 12px;
          right: 12px;
          z-index: 510;
        }
        i.periodic-status {
          position: absolute;
          right: 28px;
          bottom: 15px;
          z-index: 510;
        }
        i.suspended-status {
          position: absolute;
          bottom: 12px;
          right: 12px;
          z-index: 510;
        }
      }
    }
    .schedule-item.one {
      @include grid-cell-width(1);
    }
    .schedule-item.two {
      @include grid-cell-width(2);
    }
    .schedule-item.three {
      @include grid-cell-width(3);
    }
    .schedule-item.four {
      @include grid-cell-width(4);
    }
    .schedule-item.six {
      @include grid-cell-width(6);
    }
  }
}
/* --------------------------------------------------------- */
/* / !!!!!! \ Temporaire ! utilisé pour ne pas avoir de régression dans les applis JS non portées */
.share:not(.temp) {
  h3 {
    padding: 0;
    margin: 0;
  }
  .autocomplete > em {
    border-bottom: 1px solid $shadow-light;
    background: $white;
    color: $text-light;
    @include run-transition(background);
    em.low-importance {
      height: auto;
      padding-top: 5px;
    }
  }
  .autocomplete > em:hover {
    color: $white;
    background: $accent;
  }
  input[type="text"] {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
  }
  .display-more-bar {
    width: calc(100% - 20px);
    display: block;
    font-size: 15px;
    border-bottom: 2px solid $accent;
    padding: 2px 10px;
  }
  .found-users-list {
    margin-bottom: 15px;
    a {
      margin-top: 10px;
    }
  }
}
/* / !!!!!! \ A garder au final ! */
.share.temp {
  h3 {
    padding: 0;
    margin: 0;
  }
  .autocomplete > div {
    border-bottom: 1px solid $shadow-light;
    background: $white;
    color: $text-light;
    @include run-transition(background);

    a.sharebookmark {
      font-style: italic;
    }
    em.low-importance {
      height: auto;
      padding-top: 2px;
    }
  }
  .autocomplete > div:hover {
    color: $white;
    background: $accent;
    a {
      color: $white;
      i.add-favorite::before {
        color: $white;
      }
    }
  }
  input[type="text"] {
    margin-left: 0;
    margin-bottom: 0;
  }
  .display-more-bar {
    width: calc(100% - 20px);
    display: block;
    font-size: 15px;
    border-bottom: 2px solid $accent;
    padding: 2px 10px;
  }
  .found-users-list {
    margin-bottom: 30px;
  }
}
/* --------------------------------------------------------- */
.drop-down-filters,
.filters {
  p:first-child,
  .filters-icons {
    i {
      opacity: 1;
      background: $solid-grey;
      width: 40px !important;
      @include run-transition(all);
      vertical-align: top;
      @include material-card();
    }
    i:hover {
      opacity: 1;
    }
    li {
      label:hover {
        i {
          box-shadow: none;
        }
      }
      &.selected {
        i {
          box-shadow: 0 2px 3px $shadow inset;
        }
        &:nth-child(6n) {
          i {
            background: $green;
          }
        }
        &:nth-child(6n + 1) {
          i {
            background: $cyan;
          }
        }
        &:nth-child(6n + 2) {
          i {
            background: $purple;
          }
        }
        &:nth-child(6n + 3) {
          i {
            background: $pink;
          }
        }
        &:nth-child(6n + 4) {
          i {
            background: $red;
          }
        }
        &:nth-child(6n + 5) {
          i {
            background: $yellow;
          }
        }
      }
      label {
        position: relative;
        span {
          position: absolute;
          color: $white;
          visibility: hidden;
          left: 6px;
          top: 4px;
          font-size: 22px;
          overflow: visible;
          span:hover {
            cursor: pointer;
          }
        }
        i {
          text-align: center;
          line-height: 38px;
          font-size: 25px;
        }
        i::before {
          color: $white !important;
        }
      }
    }
  }
  p:first-child:hover {
    background: $primary;
  }
  .wrapper {
    background: $primary;
    box-shadow: 0 3px 15px $shadow-darker;
    width: 100%;
    ul {
      li {
        color: $white;
        i {
          border-radius: 50px;
        }
      }
    }
  }
  i:hover {
    opacity: 0.5;
  }
  .filters-icons {
    margin-top: 0;
    ul {
      padding: 0;
      li {
        padding: 0;
        label {
          padding: 0 1px;
          width: auto;
          i {
            background-size: 100% auto;
          }
        }
      }
    }
  }
}
.filters {
  height: 0;
  padding: 0;
  p {
    ul {
      li {
        i {
          border-radius: 50px;
        }
      }
    }
  }
}
//rbs
.line.filters {
  .filters-icons {
    margin-top: 7px;
    ul li {
      vertical-align: top;
      display: inline-block;
    }
  }
}
//timeline filters
.widgets-friend .line.filters {
  .filters-icons {
    ul li {
      display: inline;
    }
    i {
      margin-bottom: 5px;
      margin-right: 3px;
    }
  }
}
.filters
  .filters-icons
  li.selected:nth-child(6n + 4)
  .date-picker-icon
  i.calendar {
  background: none;
  box-shadow: none;
}
calendar .week-switcher {
  font-size: 12px;
  .date-picker-icon {
    margin-left: 40px;
    margin-top: 10px;
    left: auto;
    i.calendar {
      display: inline-block;
      width: 50px;
      height: 40px;
      text-align: center;
      vertical-align: middle;
    }
  }
}
.week-switcher .date-picker-icon i.calendar:before {
  font-size: 45px;
}
.date-picker-icon + .cell {
  margin-left: 30px;
}
//actu createinfo
container article form {
  & > .three.cell {
    margin-bottom: 20px;
    line-height: 35px;
    .row + label {
      margin-top: 8px;
      margin-bottom: 8px;
      line-height: 20px;
    }
  }
}
//actu teaser comment link
.previews container .preview-wrapper {
  article.preview {
    .rigid-grid.row + .cell.right-magnet {
      margin-bottom: 0;
      position: absolute;
      bottom: 5px;
      right: 10px;
    }
  }
}
//actu expanded comment position
.previews container .preview-wrapper {
  article.preview.expanded {
    .rigid-grid.row + .cell.right-magnet {
      margin-top: 30px;
      margin-bottom: 10px;
      position: relative;
    }
  }
}

.previews .preview-wrapper {
  //date
  em.metadata {
    position: absolute;
    top: 170px;
    left: 10px;
    line-height: 15px;
    z-index: 3;
    width: 118px;
    max-height: 45px;
    word-wrap: break-word;
    overflow: hidden;
  }
}
.previews article.preview {
  & > label {
    position: absolute;
    z-index: 2;
    left: 5px;
    top: 35px;
  }
  //img
  .one.horizontal-spacing {
    padding: 0;
    margin: 0;
    position: absolute;
    width: 85px;
    height: auto;
    top: -15px;
    left: 5px;
  }
  .one.horizontal-spacing.allowcheck {
    left: 15px;
  }
  .margin-three {
    margin-left: 110px;
    h2 {
      margin-bottom: 5px;
      max-height: 30px;
      padding-right: 20px;
      overflow: hidden;
    }
    .margin-three {
      margin: 0 30px 0 5px;
    }
    //preview part
    .margin-three > div:first-child .twelve.cell {
      max-height: 45px;
      overflow: hidden;
      margin-bottom: 10px;
      p {
        margin: 0;
      }
    }
  }
}
//prevent bug next article date
.previews {
  container[template="infoEdit"] {
    article {
      float: none;
      & > .three.cell {
        margin-bottom: 20px;
        line-height: 35px;
        .row + label {
          position: relative;
          margin-top: 8px;
          margin-bottom: 8px;
          line-height: 20px;
        }
      }
    }
  }
}
.theme-preview {
  width: 25px;
  height: 25px;
  float: left;
  margin-top: 8px;
  margin-left: 8px;
}
.theme-preview.magenta {
  background: $pink;
}
.theme-preview.default {
  background: $accent;
}
.drop-down-button {
  position: absolute;
  z-index: 650;
  white-space: nowrap;
  label,
  label:hover {
    color: $accent;
    background: $light-grey;
  }
  .options {
    ul {
      background: $white;
      position: absolute;
      width: 100%;
      top: 38px;
      left: 1px;
      box-sizing: border-box;
      @include material-card();
      border: 0;
      li {
        list-style-type: none;
        box-sizing: border-box;
        padding: 5px 5px 5px 10px;
        @include run-transition(background);
        font-weight: 500;
        text-align: left;
        a {
          color: $black;
        }
        &:hover {
          a {
            color: $white;
          }
        }
      }
      li:hover {
        background: $accent;
        color: $white;
      }
    }
  }
}
.drop-down-button.hidden {
  .options {
    display: none;
  }
  label:hover {
    background: $primary-dark;
    border: none;
  }
}

hr.solid {
}

hr.separator {
  border-top: 1px solid lighten($black, 20%);
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  padding: 0;
  box-shadow: 0 0 1px $black;
}
hr.line {
  margin-left: 0;
  margin-right: 0;
}
ul.toc {
  padding: 0;
  margin: 0;
  li {
    list-style-type: none;
    padding: 3px;
    a {
      font-size: 16px;
    }
  }
}

.text-container {
  padding: 48px 0 0;
}

.caption {
  line-height: 10px;
}
.media {
  .articles-sniplet {
    img {
      width: auto;
    }
  }
}
.edit-grid {
  button,
  i,
  input[button] {
    opacity: 1;
    pointer-events: all;
  }
  .grid-guides {
    opacity: 1;
  }
  .grid-media {
    border: 1px solid $primary;
    pointer-events: all;
  }
  .square-menu button,
  .grid-add-row {
    display: block;
  }
}
.blur-grid {
  button,
  i,
  input[button] {
    pointer-events: none;
  }
  .grid-guides {
    opacity: 0.3;
  }
  .grid-media {
    border: 1px solid $primary;
    pointer-events: none;
  }
  .square-menu button,
  .grid-add-row {
    display: none;
  }
  .edit-grid {
    button,
    i,
    input[button] {
      pointer-events: all;
    }
    .grid-guides {
      opacity: 1;
    }
    .grid-media {
      border: 1px solid $primary;
      pointer-events: all;
    }
    .square-menu button,
    .grid-add-row {
      display: block;
    }
  }
}
.page-markers {
  .marker {
    border-color: transparent transparent $primary transparent;
    color: white;
    a {
      color: white;
    }
  }
  .marker:nth-child(2) {
    color: white;
    border-color: transparent transparent $primary transparent;
    a {
      color: white;
    }
  }
  .content:hover {
    color: $accent;
  }
}

.flexible:empty + .flexible {
  .patchwork {
    .row {
      h1 {
        color: $white;
      }
    }
    .navigation {
      article {
        background: transparent;
        box-shadow: none;
      }
    }
  }
}
.patchwork {
  color: $text-light;
  .navigation {
    .items {
      > div:first-child {
        margin-bottom: 15px;
      }
      .row {
        @include material-card();
        border: none;
        margin-bottom: 15px;
        background: $white;
        &.selected {
          background: $accent;
          h1 {
            color: $white;
            line-height: 25px;
          }
        }
        img {
          margin-right: 10px;
        }
        h1 {
          font-size: 18px;
        }
        .buttons {
          bottom: 0;
          @include run-transition(bottom);
          width: 100%;
          left: 0;
          z-index: 19;
          background: $accent;
          padding: 12px;
          display: block;
          position: fixed;
          button {
            @include flat-button;
            background: transparent;
            color: $white;
            padding: 9px;
            font-size: 1em;
            font-weight: normal;
            margin: 0;
          }
          button:hover {
            background: $white;
            color: $accent;
          }
        }
        .buttons.hidden {
          bottom: -62px;
        }
        .bottom-locked {
          right: 10px;
        }
      }
    }
  }
}
.droptarget {
  border-color: $accent;
}
.droptarget.block-editor {
  background-color: $light-grey;
  border: 3px dashed $neutral-grey;
}

.cke_chrome.cke_float {
  .cke_inner {
    border: none;
    background: $light-grey;
  }
}
.humane {
  border-radius: 2px;
  box-shadow: 0 0 3px $shadow;
  font-size: 22px;
  padding: 20px;
  pointer-events: none;
}
.humane.humane-original-info,
.humane.humane-original-success,
.humane.humane-original-error {
  color: $white;
}
.humane.humane-original-info {
  background: $info-color;
}
.humane.humane-original-success {
  background: $valid-color;
}
.humane.humane-original-error {
  background: $error-color;
}
.humane.humane-animate,
.humane-original.humane-original-animate {
  opacity: 1;
}
carousel {
  &.squares {
    nav ul li::after {
      border-radius: 0;
      content: " ";
    }
  }
  &.triangles {
    nav ul li::after {
      border-radius: 0;
      content: " ";
      background: transparent;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid $primary;
      height: 0;
      width: 0;
    }
    li.current::after {
      background: transparent;
      border-left-color: $accent;
    }
    li:hover::after {
      background: transparent;
      border-left-color: $accent;
    }
  }
  .carousel {
    margin-top: 15px;
  }
  .images .image {
    -webkit-transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
  }
  nav {
    width: 95%;
    margin: auto;
    ul {
      li {
        margin: 8px;
      }
      li::after {
        display: block;
        content: " ";
        background: $primary;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        @include run-transition(background);
      }
      li.current::after {
        background: $accent;
      }
      li:hover::after {
        background: $accent;
      }
    }
  }
}
carousel.slide {
  // ARROW GENERAL
  //arrow bg
  .image.previous::before,
  .image.next::before {
    height: 40px;
    width: 40px;
    top: 50px;
    border-radius: 50%;
    //background: $lightest-grey;
  }
  //arrow shape & color
  .image.previous::after,
  .image.next::after {
    top: 60px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  //LEFT
  .image.previous {
    //arrows bg
    &::before {
      left: -12px;
    }
    //arrow shape & color
    &::after {
      border-right: 15px solid $primary;
      left: -3px;
    }
  }
  //RIGHT
  .image.next {
    //arrow bg
    &::before {
      right: -12px;
    }
    //arrow shape & color
    &::after {
      border-left: 15px solid $primary;
      right: -3px;
    }
  }
}
/////////
ul.colored {
  padding-right: 15px;
  box-sizing: border-box;
  > li > a {
    color: $white;
  }
  ul {
    background: transparent;
    li {
      a.selected {
        color: $white;
      }
    }
  }
  ul.cyan {
    li {
      a.selected {
        background: $cyan;
      }
    }
  }
  ul.green {
    li {
      a.selected {
        background: $green;
      }
    }
  }
  ul.yellow {
    li.selected {
      a {
        background: $yellow;
      }
    }
  }
  ul.purple {
    li {
      a.selected {
        background: $purple;
      }
    }
  }
  ul.pink {
    li {
      a.selected {
        background: $pink;
      }
    }
  }
  ul.orange {
    li {
      a.selected {
        background: $orange;
      }
    }
  }
  ul.grey {
    li {
      a.selected {
        background: $grey;
      }
    }
  }
}
ul.colored li {
  a i.caret {
    color: white;
    opacity: 1;
    text-indent: 0;
  }
  ul a i {
    position: absolute;
    top: 2px;
    right: 5px;
  }
}
.wizard {
  background: $white;
  border: 1px solid $neutral-grey;
  .steps {
    background: $light-grey;
    li {
      color: $disabled-color;
    }
    li.active {
      background: $accent;
      color: $white;
    }
  }
  [contenteditable] {
    border: 1px solid $medium-grey;
  }
}
.compare {
  margin-top: 20px;
  > tbody > tr > td,
  > thead > tr > td {
    border: 1px solid $neutral-grey;
    vertical-align: top;
    .diff {
      background: rgba($accent, 0.2);
    }
  }
  .added {
    background: rgba($green, 0.2);
  }
  .removed {
    background: rgba($red, 0.2);
    text-decoration: line-through;
  }
  .diff {
    background: rgba($indigo, 0.2);
  }
}
slider,
slider.drawing-zone {
  .cursor {
    border-top-color: $accent;
  }
  .filled {
    background: $primary;
  }
  .bar {
    position: absolute;
    top: 0;
  }
}
recorder {
  .view {
    overflow: hidden;
    height: auto;
  }
  .status {
    color: $accent;
  }
  .metadata {
    .status {
      color: $grey;
    }
  }
  input[type="text"] {
    padding-left: 0;
  }
  .elapsed-time {
    color: $primary;
  }
}
.videocontroller {
  .controls {
    button {
      background-color: $white;
      i {
        color: $orange;
      }
      i.loading {
        height: 18px !important;
        line-height: 18px;
      }
    }
  }
}

.embedded-viewer {
  background: $white;
  color: $grey;
  border: 1px solid $shadow-light;
  margin: 10px 0 0;
  input[type="text"] {
    width: 30px;
    color: $grey;
    margin-left: 20px;
    border: 1px solid $shadow-light;
  }
  img {
    box-shadow: 1px 1px 3px $shadow;
  }
  &.fullscreen {
    border: none;
    margin: 0;
    i.close::before {
      content: "\e866";
      font-size: 20px;
    }
  }
  .controls {
    background-color: $white;
  }
}

file-viewer .file .default-viewer button {
  float: none;
}
.skins-picker {
  .photo-preview {
    display: none;
  }
}
em.skin-default {
  font-family: Roboto;
  font-size: 20px;
  background: $primary;
  height: 81px;
  line-height: 67px;
  padding: 5px;
  text-align: center;
}
em.skin-dyslexic {
  font-family: OpenDyslexic;
  font-size: 16px;
  background: $primary;
  height: 81px;
  line-height: 67px;
  padding: 5px;
  text-align: center;
}
popover {
  popover-content {
    background: $white;
    @include material-card(1px, 20px);
  }
}
.more {
  text-align: center;
  background: $light-grey;
  @include run-transition(background);
  a {
    color: $grey;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    &:hover {
      border: none;
    }
  }
  &:hover {
    background: $accent;
    a {
      color: $white;
    }
  }
}
.my-apps,
nav.horizontal .my-apps {
  margin: 25px auto;
  min-height: 40px;
}
nav.horizontal .my-apps {
  width: 216px;
}
.search-text {
  background: transparent !important;
  i::before {
    color: $accent;
  }
  .searchButton {
    float: left;
    padding: 0;
    margin-top: 12px;
    height: 29px;
    box-shadow: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    line-height: 27px;
    width: 30px;
    text-align: center;
    span {
      float: none;
    }
  }
  .searchInput {
    border: 1px solid #eee;
    margin: 12px;
    float: left;
    margin-right: -2px;
    width: 188px;
  }
  .searchContent {
    padding-top: 6px;
  }
}
.bookmarked-app {
  margin: 1px;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 15px;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  a {
    width: 100%;
    i {
      display: block;
      font-size: 50px;
      height: 55px !important;
      line-height: 55px;
      width: 100%;
    }
    img {
      max-width: 100%;
      max-height: 55px;
      padding: 0;
    }
  }
  a:hover {
    border-bottom: none !important;
  }
}

plus {
  .opener.plus {
    @include material-card();
    border-radius: 25px;
  }
  .opener {
    color: $white;
    background: $accent;
    border-radius: 25px;
    @include run-transition(all);
  }
  .opener.minus {
    background: $dark-accent;
    box-shadow: 0 2px 3px $shadow inset;
  }
}
plus:hover {
  .opener {
    background: $dark-accent;
  }
}

.block-editor {
  div[drawing-zone] {
    height: auto;
  }
}

.side-col.cell {
  @include material-card();
  background: $white;
  //actu
  nav.vertical.half-stamps article:hover {
    box-shadow: 0 4px 6px rgba($black, 0.4);
  }
  nav.vertical {
    padding: 0;
    margin: 0;
    .illustration {
      img {
        width: 100%;
        max-width: none;
        max-height: none;
      }
    }
    //author
    .row.block-container {
      padding-top: 30px;
      & + hr {
        padding: 1px;
      }
    }
  }
}
.option-row {
  & > div.twelve {
    @include material-card();
    background: $white;
    margin-bottom: 15px;
  }
  .checkbox-filters {
    float: left;
    height: auto;
    padding: 20px;
    //title
    & > .cell:first-child {
      font-weight: bold;
      text-transform: uppercase;
      padding-left: 5px;
    }
    ul li {
      display: block;
      float: left;
    }
  }
  .preview {
    float: left;
  }
  // .cell.right-magnet{
  // 	margin-top: 12px;
  //     margin-right: 15px;
  // }
}

.main-col > div {
  margin-top: 10px;
}
.main-col,
.option-row {
  padding-left: 30px;
}
.main-col .option-row {
  padding-left: 0;
}

section.main-col > div {
  margin-top: 0;
}

section.main-col {
  article.vertical-spacing {
    strong.medium-text {
      display: block;
      padding: 15px 0;
      line-height: 15px;
    }
    .escape_cke {
      color: $black;
    }
  }
}
app-title + nav.vertical {
  clear: both;
}
nav.vertical {
  .cell .illustration img {
    height: auto;
    max-height: 100%;
  }
  .illustration input[type="checkbox"] {
    top: 5px;
    left: 50px;
    bottom: auto;
    right: auto;
  }
}

/* no ico in app page title*/
h1 i:before,
h1 i:after,
h1 i {
  display: none !important;
}

@media screen and(min-width: $tablette) {
  .selected-value:hover {
    border-color: $accent;
  }
  .edit editor-toolbar .option:hover,
  .both editor-toolbar .option:hover {
    border-bottom: 3px solid $accent;
  }
}

body editor {
  &.edit editor-toolbar,
  &.both editor-toolbar {
    .option.table {
      .draw-table {
        .one.cell.match {
          background: $accent;
        }
      }
    }
  }
  .editor-toolbar-opener,
  .close-focus {
    box-shadow: none;
  }
  contextual-menu {
    @include material-card();
    cursor: pointer;
  }
  [contenteditable] {
    article {
      border: 1px dotted $neutral-grey;
    }
  }
  .drawing-zone {
    padding: 10px;
  }
  &.edit,
  &.both,
  &.html {
    editor-toolbar .option.table popover > i {
      height: 24px;
      top: 0;
    }
  }
  editor-toolbar.sticky {
    margin-top: 64px !important;
    border-bottom: 1px solid #ddd;
    transition: margin-top 200ms ease;
  }
}
[contenteditable],
[bind-html] {
  table {
    td {
      border: 1px solid $light-grey;
    }
    tr:hover {
      background: none;
    }
  }
}
contextual-menu {
  ul {
    li:hover {
      background: $accent;
      color: $white;
    }
  }
}

.tabs section.dominos {
  border: none;
  input[type="text"] {
    margin: 30px auto;
  }
}

.audio-wrapper {
  position: relative;
  height: 30px;
  margin-bottom: 10px;
}