/* ************************************* */
/*                                       */
/* Material icons (Default properties)   */
/*                                       */
/* ************************************* */

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* ************************************* */
/*                                       */
/* Material icons (Custom properties)    */
/*                                       */
/* ************************************* */

.material-icons {
  vertical-align: middle;
}

.md-34 { font-size: 34px; }

/* ************************************* */
/*                                       */
/* Custom SVG icons                      */
/*                                       */
/* ************************************* */

.icon svg {
    fill: currentColor;
    vertical-align: middle;
}

.icon--12 svg {
    height: 16px;
    width: auto;
}

.icon--30 svg {
  height: 30px;
  width: auto;
}

.icon--40 svg {
  height: 40px;
  width: auto;
}

.icon--50 svg {
  height: 50px;
  width: auto;
}

.icon--circle {
    border-radius: 50%;
    width:22px;
    height:22px;
    background-color:var(--color-accent);
    color:var(--color-light);
    cursor:pointer;
    right:0 !important;
}

.icon--circle svg {
  width:80%;
}


/* ************************************* */
/*                                       */
/* VUE Custom generic classes            */
/*                                       */
/* ************************************* */

.form__section__header.active {
  color:var(--color-accent);
}

.icon--left.active--rotate180 {
  transform:rotate(180deg) translateY(50%);
}

.form__section__header .active--rotate180,
.intro__section__header .active--rotate180,
.icon--right.active--rotate180 {
  transform:rotate(180deg) translateY(47%);
}

.form__section__header svg {
  fill: currentColor;
}

.clip__actions svg{
  fill: currentColor;
}

.showreel__actions svg,
.showreel__add-clip-here__txt svg{
  fill: currentColor;
}

.showreel__actions svg {
  margin-right:5px;
}

.showreel--new svg,
.clip__media--new svg {
  height:50px;
  width:50px;
}

.showreel__add-clip-here__txt svg {
  height:40px;
  width:40px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.showreel--new .icon,
.clip__media--new .icon {
  border-radius: 50%;
  background-color: var(--color-new);

}

.showreel__add-clip-here__txt .icon{
  width:60px;
  height:60px;
  border-radius: 50%;
  background-color: var(--color-light);
  border: 2px solid var(--color-accent); 
  color:var(--color-accent);
  vertical-align: middle;
  display: inline-block;
  position:relative;
}

.showreel--new .icon{
  color:var(--color-accent);
  display:inline-block;
  margin-right: 20px;
}

.icon--left {
  position:absolute;
  display: block;
  width:auto;
  height:24px;
  top:50%;
  left:-5px;
  transform: translateY(-50%);
  font-size:15px;
  text-transform: unset;
  vertical-align: unset;
}

.icon--right {
  position:absolute;
  display: block;
  width:auto;
  height:24px;
  top:50%;
  right:10px;
  transform: translateY(-50%);
  font-size:15px;
  text-transform: unset;
  vertical-align: unset;
}

.form__section__header .icon--right,
.intro__section__header .icon--right {
  right:0;
}

.icon--right svg {
  vertical-align: unset;
}

.icon--right:hover {
  color: var(--color-grey-darker);
}

.icon--circle.icon--right {
    width:24px;
}

.icon-rollen-connected {
  position: relative;
}

.icon-rollen-connected::before {
  content: url(../../img/icons/icon-check-circle.svg);
  width:18px;
  height:18px;
  position: absolute;
  right:-2px;
  bottom:-2px;
}

/* ************************************* */
/*                                       */
/* ICON animations                       */
/*                                       */
/* ************************************* */

.animation {
  display:block;
}

.animation--rotate {
  -webkit-animation: svrotate 4s linear infinite;
          animation: svrotate 4s linear infinite;
}

@-webkit-keyframes svrotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@keyframes svrotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}