// Compass mixins & functions
@import "sass/compass";

// Default Bootstrap Variables
@import "sass/bootstrap/variables";

// Wizdom Variables
@import "variables";
@import "variables-admin";

// Bootstrap
@import "bootstrap-import";

// Icons
@import "../../Modules/Branding/Content/Partials/StreamlineIcons";

/* Webfont: Lato-Regular */
@font-face {
  font-family: "LatoWeb";
  src: url("#{$lato-font-path}Lato-Regular.eot"); /* IE9 Compat Modes */
  src: url("#{$lato-font-path}Lato-Regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("#{$lato-font-path}Lato-Regular.woff2") format("woff2"),
    /* Modern Browsers */ url("#{$lato-font-path}Lato-Regular.woff")
      format("woff"),
    /* Modern Browsers */ url("#{$lato-font-path}Lato-Regular.ttf")
      format("truetype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "streamline-icons";
  src: url("#{$icon--streamline-font-path}#{$icon--streamline-font-family}.ttf?iyun5n")
      format("truetype"),
    url("#{$icon--streamline-font-path}#{$icon--streamline-font-family}.woff?iyun5n")
      format("woff"),
    url("#{$icon--streamline-font-path}#{$icon--streamline-font-family}.svg?iyun5n##{$icon--streamline-font-family}")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.streamline::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "#{$icon--streamline-font-family}" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stylesheet used for administrationsite */
/* CSS used here will be applied after bootstrap.css */

.swagger-ui {
  .endpoint-heading h4 {
    padding: 10px 0 10px 0;
    margin-bottom: 0 !important;
  }

  .endpoint {
    padding: 0 0 10px 0;
    border-bottom: 0px solid !important;
  }

  .endpoint {
  }

  .endpoint-actions {
    margin: 0;
  }
}

//overrides bootstrap build in blue color.
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: $lt-theme-primary;
}

.lt-ob-loaderspinner {
  height: 100%;

  .circle-loader {
    width: 23rem;
    height: 23rem;
  }

  &__container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
      height: auto;
    }
  }

  &__row {
    width: 758px;
    min-height: 500px;
    display: flex;
    overflow: hidden;
    flex-flow: column;
    border-radius: 3px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
    background-color: $lt-white;
  }

  &__column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  &-column {
    &__message {
    }

    &__spinner {
      align-items: flex-start;
    }
  }
}

.lt-ob {
  height: 100%;

  &__link {
    padding-top: 15px;
    display: inline-block;
    font-size: 13px;
  }

  &__container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
      height: auto;
    }
  }

  &__row {
    width: 758px;
    min-height: 500px;
    display: flex;
    overflow: hidden;
    flex-flow: column;
    border-radius: 3px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
    background-color: $lt-white;

    .lt-login & {
      flex-flow: row;
    }
  }

  &__column {
    &-equal {
      //flex: 50%;
      @media (min-width: 768px) {
        flex: 50%;
      }
    }

    h1 {
      font-size: 30px;
      line-height: 36px;
      font-weight: 600;
      padding-bottom: 30px;
    }

    &-title {
      padding: 40px 30px 40px 30px;
      background-color: $left-install-panel-background-color;
      color: $left-panel-text-color;

      .title {
        font-size: 24px;
        font-weight: 900;
        margin: 0;
        line-height: 0.93em;
      }
    }

    &-title-large {
      padding: 150px 58px 150px 58px;
      background-color: $left-panel-background-color;
      color: $left-panel-text-color;
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 60px;
        font-weight: 900;
        margin: 0;
        line-height: 0.93em;

        .lt-login & {
          color: $left-panel-text-color;
        }
      }
    }

    &-start {
      padding: 140px 35px 85px 48px;
      background-color: $right-panel-background-color;
    }
  }
}

body {
  background: url(../content/images/lt-bg.jpg) no-repeat center center fixed;
  background-size: cover;
  font-size: $lt-base-font-size;
  color: $lt-neutral-primary;
}

.btn + .btn,
.dropdown + .btn {
  margin-left: 8px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  select,
  select.lt-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
    padding: 1rem !important;
    padding-right: 2rem !important;
    //background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlJlZ3VsYXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHRpdGxlPmFycm93LWRvd24tMTwvdGl0bGU+CjxnPgoJPHBhdGggZmlsbD0iIzI1MjQyMyIgZD0iTTEyLDE4Ljk5OWMtMC40LDAtMC43NzYtMC4xNTYtMS4wNTktMC40MzhMMC4yMiw3Ljg0MUMwLjA3OCw3LjY5OSwwLDcuNTExLDAsNy4zMWMwLTAuMiwwLjA3OC0wLjM4OSwwLjIyLTAuNTMKCQljMC4xNDItMC4xNDIsMC4zMy0wLjIyLDAuNTMtMC4yMnMwLjM4OSwwLjA3OCwwLjUzLDAuMjJMMTIsMTcuNDk5TDIyLjcyLDYuNzhjMC4xNDItMC4xNDIsMC4zMy0wLjIyLDAuNTMtMC4yMgoJCXMwLjM4OSwwLjA3OCwwLjUzLDAuMjJDMjMuOTIyLDYuOTIyLDI0LDcuMTEsMjQsNy4zMWMwLDAuMi0wLjA3OCwwLjM4OS0wLjIyLDAuNTNMMTMuMDYsMTguNTYKCQlDMTIuNzc4LDE4Ljg0MywxMi40MDEsMTguOTk5LDEyLDE4Ljk5OXoiLz4KPC9nPgo8L3N2Zz4K") !important;
    background-position: right 0.8em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
  }
  /* Hide arrow icon in IE browsers */
  select::-ms-expand,
  select.lt-select::-ms-expand {
    display: none;
  }
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
  margin-top: 2px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox input[type="checkbox"],
  .checkbox-inline input[type="checkbox"],
  .radio input[type="radio"],
  .radio-inline input[type="radio"] {
    margin-top: 4px;
  }

  input[type="checkbox"].disabled,
  input[type="checkbox"][disabled],
  input[type="radio"].disabled,
  input[type="radio"][disabled],
  input[type="text"][disabled],
  select.form-control[disabled] {
    opacity: 0.5;
  }

  input[type="checkbox"],
  input.lt-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: $lt-white;
    border: 1px solid $lt-neutral-tertiary;
    //box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px !important;
    border-radius: 3px;
    display: inline-block;
    position: relative;
  }

  input[type="radio"]:focus,
  input[type="checkbox"]:focus,
  input .lt-radio:focus,
  input.lt-checkbox:focus {
    outline: none !important;
  }

  input[type="checkbox"]:active,
  input[type="checkbox"]:checked:active,
  input.lt-checkbox:active,
  input.lt-checkbox:checked:active {
    //box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }

  input[type="checkbox"]:checked,
  input.lt-checkbox:checked {
    background-color: $lt-theme-primary;
    border: 1px solid $lt-theme-primary;
    color: $lt-white;
  }

  input[type="checkbox"]:checked:after,
  input.lt-checkbox:checked:after {
    font-family: "streamline-icons";
    content: "\e925";
    font-size: 9px;
    position: absolute;
    top: 4px;
    left: 4px;
    color: $lt-white;
  }

  input.lt-checkbox,
  input.lt-radio,
  input[type="checkbox"],
  input[type="radio"] {
    margin-top: 0 !important;
    line-height: normal;
  }
  /*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);*/
  input.lt-radio,
  input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: $lt-white;
    border: 1px solid $lt-neutral-tertiary;
    padding: 9px !important;
    border-radius: 50px;
    display: inline-block;
    position: relative;
  }

  input.lt-radio:checked:after,
  input[type="radio"]:checked:after {
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    top: 4px;
    background-color: $lt-theme-primary;
    border: 1px solid $lt-theme-primary;
    text-shadow: 0px;
    left: 4px;
    font-size: 32px;
  }

  input.lt-radio:checked,
  input[type="radio"]:checked {
    color: $lt-white;
    border: 1px solid $lt-theme-primary;
  }

  .checkbox,
  .radio {
    margin-top: 15px;
    margin-bottom: 15px;

    label {
      padding-left: 30px !important;
      /*.form-group & {
                margin-bottom: 5px !important;
            }*/
    }

    input.lt-checkbox,
    input.lt-radio,
    input[type="checkbox"],
    input[type="radio"] {
      margin-left: -30px !important;
    }
  }
}

.lt-heading {
  display: flex;
  flex-wrap: wrap;

  &__title {
    flex-basis: 40%;
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-grow: 1;

    &-middlewidth {
      flex-basis: 50%;
      flex-wrap: wrap;
      padding-right: 20px;
      flex-grow: 1;
    }

    &-smallwidth {
      justify-content: flex-end;
      align-content: space-between;
      flex-direction: row;
      display: flex;
      align-items: baseline;

      > span {
        cursor: pointer;
        /*flex-basis: 30px;*/
        padding: 8px 10px 8px 10px;
        line-height: 20px;

        &:hover {
          background-color: $lt-theme-lighter-alt;
        }
      }

      span:last-child {
        margin-left: 10px;
      }
    }
  }
}

.lt-flextable__row {
  display: flex;
  align-items: flex-start;
  max-width: calc(100% / 3);
  flex-basis: calc(100% / 3);

  &.colauto {
    max-width: none;
    flex-basis: auto;
  }

  &.colfull {
    max-width: 100%;
    flex-basis: 100%;
  }

  &.col1\/2 {
    max-width: calc(100% / 2);
    flex-basis: calc(100% / 2);
  }

  &.col2\/3 {
    max-width: calc((100% / 3) * 2);
    flex-basis: calc((100% / 3) * 2);
  }

  &.col5 {
    max-width: calc(100% / 5);
    flex-basis: calc(100% / 5);
  }

  &.col1\/8 {
    max-width: calc(100% / 8);
    flex-basis: calc(100% / 8);
  }

  &.icon-spacer {
    max-width: 35px;
    flex-basis: 100%;
  }

  &:not(:last-of-type):not(.icon-spacer) {
    padding-right: 1rem;
  }

  &-heading {
    font-weight: 600;
    flex-wrap: wrap;

    @media (max-width: 767px) {
      flex-direction: column;
    }
  }

  &--breakall {
    word-break: break-all;
  }

  .input-group {
    width: 100%;
  }
}

.lt-flextable__table {
  display: flex;
  flex-basis: auto !important;

  &:first-of-type {
    border-top: 0;
  }

  .sortable-icon {
    margin-right: 5px;
    cursor: pointer;

    &.active {
      color: $lt-neutral-primary;
    }
  }
}

.lt-list,
.lt-tree {
  margin: 0 !important;

  &__child {
    margin-left: 15px !important;

    &-noMargin {
      margin-left: 0 !important;
    }

    .list-group-item:first-child {
      border-top-width: 1px !important;
    }
  }

  &__item {
    //because of icon padding we need to have a smaller padding here to keep same list-group-item height as in other places.
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 40px;
    border-width: 1px 0;
  }

  &-item {
    &__title {
      flex-basis: 50%;

      > span.strong {
        font-weight: bold;
      }

      i.streamline {
        color: $lt-neutral-secondary;
        padding-right: 8px;
      }
    }

    &__actions {
      flex-basis: 50%;
      justify-content: flex-end;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .broken_perm,
      .item-special {
        color: $lt-status-severe-warning;
      }

      > div.radio {
        margin: 0;
        padding: 5px 10px 5px 10px;

        & + .radio {
          padding-left: 20px;
        }
      }

      > span {
        cursor: pointer;
        /*flex-basis: 30px;*/
        padding: 5px 10px 5px 10px;

        &:hover {
          background-color: $lt-theme-lighter-alt;
        }

        &.badge {
          display: flex;
          align-items: center;
          margin: 0 0.5em;
        }

        &.inactive {
          opacity: 0.3;
          cursor: not-allowed;
        }
      }
    }
  }
}

.list-group-item {
  border-color: $lt-neutral-light !important;
}

h1 {
  line-height: $lt-heading-h1-line-height;
}

h2 {
  line-height: $lt-heading-h2-line-height;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $lt-neutral-primary;
}

label {
  font-weight: 400;

  &.control-input-text {
    padding-top: 1rem;
  }
}

.channelchilds {
  padding-left: 20px;
}

.attachment-iframe {
  width: 100%;
  height: 41px;
}
/**
.modal {
    position: absolute;
}
    */
.modal .modal-dialog .modal-body {
  max-height: 80vh;
  overflow: auto;

  .form-group {
    .image-picker-preview {
      max-width: 200px;
      max-height: 200px;
    }
  }
}
/*$font-family-sans-serif: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
$primary-color: #2e7cce;*/
.remove-left-padding {
  padding-left: 0;
}

.remove-right-padding {
  padding-right: 0;
}

.remove-top-padding {
  padding-top: 0 !important;
}

.remove-top-margin {
  margin-top: 0;
}

.add-bottom-padding {
  padding-bottom: 15px;
}

/*body > .display-table {
                table-layout: fixed;      
            }*/

.display-table {
  display: table;
  width: 100%;
  height: 100%;
}

.display-table-fixed {
  table-layout: fixed; /* new */
}

.wizdom-flex-column {
  display: table-cell;
  width: 100%;
  -ms-word-break: break-all;
  word-break: break-all;
  text-align: justify;
}

.wizdom-flex-row {
  display: table-row;
  height: 100%;
}

.wizdom-fixed-column {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}

.wizdom-fixed-cell {
  display: table-cell;
}

.wizdom-fixed-row {
  display: table-row;
}

.wizdom-article-container img {
  max-width: 100%;
}

.wizdom-article-container > h1 {
  margin-top: 0px;
}

@keyframes rotateCircleLoader {
  0% {
    transition: width(0);
  }

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

@keyframes rotateCircleLoader {
  0% {
    transform: width(0);
  }

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

.top-loader {
  animation: topLoader 2s infinite linear;
}

.circle-loader {
  border-radius: 50%;
  width: 23rem;
  height: 23rem;
  margin: 40px auto;
  position: relative;
  border-top: 5px solid $spinner-part; // rgba(0, 0, 0, 0.2);
  border-right: 5px solid $spinner-part; //rgba(0, 0, 0, 0.2);
  border-bottom: 5px solid $spinner-part; //rgba(0, 0, 0, 0.2);
  border-left: 5px solid $spinner-part-highlight;
  animation: rotateCircleLoader 1.5s infinite linear;

  &-centered {
    position: absolute;
    top: calc(45% - 50px);
    left: calc(45% - 100px);
  }
}

.lt-modules {
  padding: 30px 35px;

  @media (max-width: 768px) {
    padding: 30px 15px;
  }
}

.lt-module-page-top {
  margin-bottom: 10px;

  &__title {
    margin-right: auto;

    h1 {
      margin: 0;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    align-self: flex-start;

    > * + * {
      margin-left: 1rem;

      &:not(.btn) {
        padding-left: 0;
      }
    }

    .input-group-btn {
      width: auto;
    }
  }
}

.lt-module-page {
  padding-bottom: 20px;
  /*.lt-form-group:last-child {
        margin-bottom:0;
    }*/
  .saveConfigurationButton.abs-position {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 16px;
  }

  &--paddingleft {
    padding-left: 8px;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin-top: 0 !important;
    /*margin-bottom:0 !important;*/
  }

  &__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  &__content-accordion {
    .panel {
      border-radius: $lt-base-border-radius;
      border: 1px solid $lt-neutral-light;
      background-color: $lt-white;
      padding: 30px 30px 30px 30px;
    }

    .panel-body {
      border-top: 0px solid !important;

      .form-group {
        & .col-title {
          font-weight: bold;
          margin: 0;
        }
      }

      .form-group:last-child {
        // maybe a problem -  testing...
        margin-bottom: 5px;
      }

      .list-group-item:first-child {
        border-top: 0 solid;
      }

      .list-group-item:last-child {
        border-bottom: 0 solid;
      }

      .list-group-item {
        padding-left: 0;
        padding-right: 0;
        border-left: 0 solid;
        border-right: 0 solid;
      }
    }

    .panel-collapse .panel-body {
      padding: 20px 0 0 0;
    }

    .panel-heading {
      background-color: $lt-white;
      padding: 0 !important;
      border: 0px solid !important;

      .panel-title {
        line-height: $lt-heading-h3-line-height;
        font-size: $lt-base-font-size-large;

        a,
        a:hover,
        a:active,
        a:focus {
          color: $lt-base-color;
          font-weight: 600;
          text-decoration: none;
        }

        .glyphicon-chevron-down:before {
          font-family: "#{$icon--streamline-font-family}" !important;
          line-height: 32px;
          content: "\e913";
        }

        .glyphicon-chevron-right:before {
          font-family: "#{$icon--streamline-font-family}" !important;
          line-height: 32px;
          content: "\e924";
        }
      }
    }
  }

  &__content-panel {
    border-radius: $lt-base-border-radius;
    border: 1px solid $lt-neutral-light;
    background-color: $lt-white;
    padding: 30px;

    .panel-heading {
      display: flex;
      background-color: $lt-white;
      font-size: $lt-base-font-size-large;
      font-weight: 600;
      line-height: $lt-heading-h3-line-height;
      padding: 0;
      margin: 0 auto $lt-heading-margin-bottom 0;
      border: 0px solid !important;
    }

    .panel-body {
      padding: 0;
      /*.form-horizontal .control-label:not(.controls-textbox) {
                            padding-top: 0 !important;
                        }*/
    }

    .control-label {
      text-align: left;
    }

    .list-group {
      margin-bottom: $lt-block-margin-bottom;
    }
    //???FIX
    ul:not(.principal-picker-selected-list) .list-group-item {
      padding-left: 0;
      padding-right: 0;

      &:last-child {
        border-bottom: 0px solid;
      }
    }

    .license-status-icon {
      margin-right: 1rem;
      font-size: 30px;
    }

    @media (max-width: 768px) {
      padding: 30px 15px;
    }
  }

  &__panel-header {
    display: flex;
    margin-bottom: 2rem;

    .panel-heading {
      margin-bottom: 0;
    }
  }

  &__panel-footer {
    display: flex;
    justify-content: flex-end;

    * + * {
      margin-left: 1rem;
    }
  }

  &__actions {
    display: flex;
    margin-left: auto;

    * + * {
      margin-left: 1rem;
    }
  }

  .principal-picker {
    position: relative;

    .glyphicon.glyphicon-refresh {
      top: 13px;
      right: 15px;
      position: absolute;
      animation: rotateCircleLoader 1.5s infinite linear;
      font-weight: 100;
    }
  }

  .form-horizontal .control-label {
    text-align: left !important;
  }

  &__content {
    border-radius: $lt-base-border-radius;
    border: 1px solid $lt-neutral-light;
    background-color: $lt-white;
    //padding: 35px 40px 35px 25px;
    padding: 30px 15px 30px 15px;
    /*padding:30px 40px 30px 35px;*/
    .form-group:last-child {
      margin-bottom: 0;
    }

    &-title {
      background-color: #fff;
      font-size: 20px;
      font-weight: 600;
      line-height: 32px;
      padding: 0 !important;
      margin: 0 0 15px 0;
      border: 0 solid !important;
    }

    ol {
      padding-left: 0;
      list-style-type: none;

      & > li {
        margin: 20px 0 20px 0;
        counter-increment: count-me;
      }

      & > li::before {
        content: counter(count-me) ". ";
        counter-increment: item;
        color: $lt-theme-primary;
      }
    }
  }
}
// override
.bootstrap-wrapper .input-group-btn:last-child > .btn,
.bootstrap-wrapper .input-group-btn:last-child > .btn-group {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
// align icon and text in panel items
.panel .list-group .list-group-item {
  > span,
  > i {
    padding-right: 8px;
  }

  display: flex;
  align-items: center;
}

.btn {
  * + *:not(.caret) {
    margin-left: 0.5rem;
  }

  .btn-group & {
    background-color: $lt-white;
  }

  &-default,
  &-default:visited,
  &-default:focus {
    &:hover,
    &:active {
      border: 1px solid $lt-default-btn-border-color-hover;
      background-color: $lt-default-btn-bg-color-hover;
    }

    &:disabled,
    [disabled] {
      color: $lt-default-btn-color-disabled;
      border: 1px solid $lt-default-btn-border-color-disabled;
      background-color: $lt-default-btn-bg-color-disabled;
    }
  }

  &-primary,
  &-primary:visited,
  &-primary:focus,
  &-success,
  &-success:visited,
  &-success:focus {
    &:hover,
    &:active {
      background-color: $lt-primary-btn-bg-color-hover;
      border-color: $lt-primary-btn-border-color-hover;
    }

    &:disabled,
    [disabled] {
      color: $lt-primary-btn-color-disabled;
      border: 1px solid $lt-primary-btn-border-color-disabled;
      background-color: $lt-primary-btn-bg-color-disabled;
    }
  }

  &-warning,
  &-warning:visited,
  &-warning:focus {
    &:hover,
    &:active {
      border: 1px solid $lt-warning-btn-border-color-hover;
      background-color: $lt-warning-btn-bg-color-hover;
    }

    &:disabled,
    [disabled] {
      color: $lt-warning-btn-color-disabled;
      border: 1px solid $lt-warning-btn-border-color-disabled;
      background-color: $lt-warning-btn-bg-color-disabled;
    }
  }

  &-iconpicker {
    color: $lt-default-btn-color;
    border: 1px solid $lt-default-btn-border-color;
    background-color: $lt-default-btn-bg-color;

    i,
    ~ .btn i {
      padding: 0;
      line-height: 15px;
    }
  }

  &-default-reversed,
  &-default-reversed:visited,
  &-default-reversed:focus {
    color: $lt-rev-default-btn-color;
    border: 1px solid $lt-rev-default-btn-border-color;
    background-color: $lt-rev-default-btn-bg-color;

    &:hover,
    &:active {
      color: $lt-rev-default-btn-color-hover;
      border: 1px solid $lt-rev-default-btn-border-color-hover;
      background-color: $lt-rev-default-btn-bg-color-hover;
    }

    &:disabled,
    [disabled] {
      color: $lt-rev-default-btn-color-disabled;
      border: 1px solid $lt-rev-default-btn-border-color-disabled;
      background-color: $lt-default-btn-bg-color-disabled;
    }
  }

  &-primary-reversed,
  &-primary-reversed:visited,
  &-primary-reversed:focus,
  &-success-reversed,
  &-success-reversed:visited,
  &-success-reversed:focus {
    color: $lt-rev-primary-btn-color;
    border: 1px solid $lt-rev-primary-btn-border-color;
    background-color: $lt-rev-primary-btn-bg-color;

    &:hover,
    &:active {
      color: $lt-rev-primary-btn-color-hover;
      background-color: $lt-rev-primary-btn-bg-color-hover;
      border-color: $lt-rev-primary-btn-border-color-hover;
    }

    &:disabled,
    [disabled] {
      color: $lt-rev-primary-btn-color-disabled;
      border: 1px solid $lt-rev-primary-btn-border-color-disabled;
      background-color: $lt-rev-primary-btn-bg-color-disabled;
    }
  }

  &-warning-reversed,
  &-warning-reversed:visited,
  &-warning-reversed:focus {
    color: $lt-rev-warning-btn-color;
    border: 1px solid $lt-rev-warning-btn-border-color;
    background-color: $lt-rev-warning-btn-bg-color;

    &:hover,
    &:active {
      color: $lt-rev-warning-btn-color-hover;
      border: 1px solid $lt-rev-warning-btn-border-color-hover;
      background-color: $lt-rev-warning-btn-bg-color-hover;
    }

    &:disabled,
    [disabled] {
      color: $lt-rev-warning-btn-color-disabled;
      border: 1px solid $lt-rev-warning-btn-border-color-disabled;
      background-color: $lt-rev-warning-btn-bg-color-disabled;
    }
  }
  // current opacity setting of 1 does not work well with existing bootstrap styles - leaving out for now - but should be fixed.
  &.disabled,
  &[disabled],
  & fieldset[disabled] {
    opacity: 1;
  }

  .btn-group .btn.dropdown-toggle:first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .lt-login & {
    &.icon-ms-logo::before {
      font-size: 22px;
    }

    &.streamline {
      display: flex;
      flex-direction: row;
      padding: 6px 16px 4px 0 !important; // because adminstyles is being loaded later...
      line-height: 34px !important;
    }

    &.streamline::before {
      padding-left: 12px;
      padding-right: 10px;
      padding-top: 6px;
    }
  }

  + pre {
    margin-top: 1rem;
  }
}

.btn-file {
  position: relative;
  overflow: hidden;

  input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
  }
}

.toggle-btn-group {
  .btn {
    min-width: 110px;

    + .btn {
      margin-left: 0;
    }
  }
}

.lt-ob-content {
  &__description {
    color: $lt-neutral-secondary;
    line-height: 24px;
    padding-top: 14px;

    .lt-ob__column-wizard & {
      padding-top: 5px;
    }

    padding-bottom: 35px;
    margin: 0;
  }
}

.lt-home {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;

  &__container {
    flex-basis: 864px;

    @media (max-width: $lt-home-width) {
      flex-basis: 100%;
    }

    > h2 {
      margin-top: 35px;
    }
  }

  &__description {
    color: $lt-neutral-secondary;
  }

  .lt-tiles {
    /*justify-content: space-between;*/
    flex-basis: 100%;
    margin-right: -30px;

    @media (max-width: $lt-home-width) {
      justify-content: flex-start;
    }

    &__item {
      flex-basis: 272px;
      height: 216px;
      margin-right: 24px;
      margin-bottom: 24px;
    }

    img {
      /*width: 100%;*/
      height: 100%;
    }

    &__icon {
      height: 168px;
    }

    &__title {
    }

    &-title {
      &__text {
        flex-basis: 100%;
        padding-left: 15px;

        &--left {
          text-align: left;
        }
      }

      &__action {
        padding-right: 15px;
      }
    }
  }
}

.lt-license {
  background-color: $lt-white;
  border-radius: $lt-base-border-radius;
  border: 1px solid $lt-neutral-light;

  &__container {
    padding: 30px;
    min-width: 600px;

    @media (max-width: $lt-home-width) {
      min-width: unset;
    }
  }

  &__title {
    font-size: $lt-base-font-size-large;
    font-weight: 600;
    margin: 0 0 25px 0;
  }

  &__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 25px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.lt-license-row {
  &__name {
    flex-basis: 300px;
    color: $lt-base-color;

    @media (max-width: $lt-home-width) {
      flex-basis: 100%;
    }
  }

  &__value {
    flex-grow: 1;
    color: $lt-neutral-secondary;
    display: flex;
  }
}

.lt-status {
  padding: 4px 8px;
  border-radius: $lt-base-border-radius;
  font-size: $lt-base-font-size-smaller;
  max-width: 500px;

  &--success {
    background-color: $lt-status-success-light;
    color: $lt-status-success-dark;
  }

  &--danger {
    background-color: $lt-status-severe-warning-light;
    color: $lt-status-severe-warning-dark;
  }

  &--warning {
    background-color: $lt-status-warning-light;
    color: $lt-status-warning-dark;
  }
}

.lt-tiles {
  margin-top: 15px;
  display: flex;
  flex-flow: row wrap;
  margin-right: -15px;
  padding: 0;
  list-style-type: none;

  &__edit {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  &__item {
    border-radius: $lt-tiles-border-radius;
    border: 1px solid $lt-tiles-border-color;
    background-color: $lt-tiles-bg-color;
    flex-basis: 160px;
    height: 145px;
    margin-right: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: opacity 0.5s ease, border 0.4s ease;

    &--disabled {
      opacity: 0.5;
    }

    &:hover {
      border: 1px solid $lt-theme-primary;
    }
  }

  &__icon {
    // for the icon part
    background-color: $lt-tiles-icon-bg-color;
    color: $lt-tiles-icon-color;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 96px;
    font-size: 40px;

    .tile-icon {
      display: flex;
    }
  }

  &__title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    font-weight: 600;
    text-align: center;
  }
}

.wizdom {
  .full-height {
    height: 100%;
    background-color: $lt-neutral-lighter-alt;
  }

  .navbar-default {
    border: none;
    background-color: $wizdom-admin-header-background-color;
    border-radius: 0;
    margin-bottom: 0;
  }
  /* wizdom custom styles */
  .wizdom-navbar-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;

    > li {
      min-width: 128px;

      > a {
        height: 100%;
        padding: 13px 15px;
        border-right: 1px solid $lt-primary-btn-border-color;
        font-size: 14px;
        text-align: center;
        color: white;
        outline: 0;
      }

      > a:focus,
      > a:hover,
      &.active > a {
        background-color: $lt-primary-btn-bg-color-hover;
      }
    }
  }

  .wizdom-navbar-icon {
    display: block;
    font-size: 2em;
    margin: 2px 0 10px;
  }

  .wizdom-navbar-text {
    font-size: 15px;
  }

  .wizdom-navbar-icon-empty {
    line-height: 2em;
    font-size: 2em;
  }

  @media (max-width: 767px) {
    .wizdom-navbar-nav > li {
      flex: 1 0 128px;
    }
  }
  /* Header */
  .wizdom-header {
    min-height: 50px;
    padding: 0 20px;
    background: black;

    &-logo {
      height: 50px;
      display: inline-flex;
      align-items: center;

      > span {
        flex-basis: 200px;
        color: $lt-white;
        padding-left: 20px;
      }
    }
  }

  .wizdom-header-title {
    margin: 0;
    //margin-left: -30px;
    //padding: 10px 10px 0 145px;
    //background: url(data:image/png;base64,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) no-repeat left center;
    //background: url("data:image/svg+xml;base64, ") no-repeat left center;
    background: url("data:image/svg+xml;base64, ")
      no-repeat left center;
    /*padding: 0;*/
    /*line-height: 40px;*/
    font-size: 17px;
    color: #b8b8b8;
    padding: 1px;
    /*margin-top: 11px;*/
    margin-left: -14px;
    //background-size: cover;
    background-size: contain;
    min-height: 30px;

    > span {
      padding-left: 110px;
      position: relative;
      top: 2px;
    }

    flex-basis: 100px;
    flex-shrink: 0;
  }

  .wizdom-header-version-status {
    margin: 0;
    padding: 4px 10px 0 4px;
    line-height: 40px;
    font-size: 17px;
  }

  .wizdom-user {
    position: relative;
    line-height: 50px;

    .user-photo {
      border-radius: 50%;
      width: 36px;
      height: 36px;
      background-position: 50% 50%;
      background-size: 100%;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL/SURBVGhD7ZlBSypRFMfPe7VQS1DMsIWhILQJFRNCyJUrkXDRRg3cCO7sA7R6ez+AKzHaCIIQuBaEBBHEpUqE4Ko2glCkuHmPY0d4onNnvHdsEvpt/J8bhL87596ZO/7KZDJ/YYv5TZ9by4+A1vwIaM3WC2xkGw0EAnBwcEAVQKVSoaQ+qgkYjUYIh8NwcXFBI4t0u114eHiAl5cXGlEHVQRcLhckk0kwmUw0Ik2xWIRGo0GVOMJr4OjoCNLptKIvj8TjcQiFQlSJIywQi8VAp9NRpYxoNAoej4cqMYQEcCadTidV63F1dUVJDCEBt9tNaX2w5XC3EoVbAHcd3tmf4/V6KfHDLXB6ekqJH9EJQLgF/r9R8YKLH3cxEYTWgBocHh5S4oNb4OPjg5K2cAsMBgNK2sIt8Pz8DJPJhCp++v0+JT6E1kCr1aLEx+vrK7y9vVHFh5DA4+Oj0FVoNpuU+BESwEdjlOBhNBpBtVqlih8hAQQPK/isvy739/eUxBAWQHK5nGIJbLl8Pj/bBNRg5/z8/A9lIXBBT6dTcDgcsLu7S6OLoOTd3Z1qXx7ZyJkYn/WPj4+p+qRWqwnvOKtYW+Dy8nJ2hJw/iNXrdSiVSrO8DvgM5Pf7IRgMQqfTgeFwyCWpWABn9fr6euXpC/fzQqGg+MCO/yuVSlG1SLvdhnK5rFhE0RrAkxeeZaV6e39/fzaT+PenpycaXQbPEIlEAiKRCI0sg1fm7OwMer0evL+/06g0slcA2+Xm5oYqZWBbjcdjqj6xWCzg8/mokgfvE9lsVvZKyArc3t6CzWaj6mtRsr6Y9wHsVa2+PIKLHNuOBVPg5OSEkjbghiF3dGUKYP9rjd1up7QapoCW7TMHFz8LSYHvMPuI3KFfUsBqtVLSFrl3rpICarw2UQvWVZAUkOu9r4T16kVSwGw2U9IeVjdICuj1ekraYzAYKC0jKaD0B4uvgNXOkgLr/mixSVjtvFJA9IWr2rDaeaXA3t4epe8Bq51XCnyXm9gc6XYG+Afdt9DMDUvDMgAAAABJRU5ErkJggg==);
    }
    /* override BS default btn-link text color */
    .btn-link,
    .btn-link:active,
    .btn-link:focus,
    .btn-link:hover {
      color: #efefef;
      outline: none;
      text-decoration: none;
    }

    .btn-link:hover {
      background-color: lighten(black, 15%);
    }
  }

  .actionsButtons {
    display: flex;
    align-items: flex-start;
  }
  /* override because of .actionButtons flex introducing wierd behaviour ( double border top on first-child ) */
  #AdminSitecollectionTable tr:first-child td.actionsButtons {
    border-top: 0px solid;
  }

  .sitecollectiontable {
    tr:nth-child(even) {
      background: #ffffff;
    }

    tr:nth-child(odd) {
      background: #f5f5f5;
    }
  }

  .remove-border th {
    border: none;
  }

  .btn .wizdom-caret {
    margin-left: 15px;
  }
  /* CSS used here will be applied after bootstrap.css */
  .lt-order-list {
    padding-top: 10px;
  }

  .wizdom-container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;

    @media all and (-ms-high-contrast: none) {
      //ie11
      display: block;
      min-height: 100%;
    }
  }

  .wizdom-wrapper {
    flex: 0 1 auto;
    display: flex;
    height: 100%;

    @media (max-width: 767px) {
      flex-direction: column;
    }
  }

  .wizdom-main {
    height: 100%;
    width: 100%;
    flex: 0 1 100%;
  }

  .wizdom-editor,
  .wizdom-left-nav,
  .wizdom-middle-nav {
    @media all and (-ms-high-contrast: none) {
      //ie11
      min-height: calc(100vh - 137px);
    }
  }

  .wizdom-left-nav,
  .wizdom-middle-nav {
    width: 100%;
    padding: 25px 15px;
    background-color: #fff;
    border-bottom: 1px solid $lt-neutral-light;

    @media (min-width: 768px) {
      max-width: 250px;
      height: 100%;
      border-right: 1px solid $lt-neutral-light;
      border-bottom: 0;

      &-inside,
      &-inside {
        position: sticky;
        top: 20px;
      }
    }

    .wizdom-subcategory-title {
      a {
        display: block;
        padding: 10px;
        line-height: 1.65em;
        color: $lt-base-color;
        border-radius: $lt-base-border-radius;
        outline: 0;
        word-break: break-word;

        &:hover,
        &:active,
        &:focus {
          background-color: $lt-theme-lighter-alt;
        }

        &.active,
        &.active:focus,
        &.active:active {
          background-color: $lt-theme-lighter-alt;
          color: $lt-theme-primary;
        }

        &.active:hover {
          background-color: $lt-theme-lighter-alt;
        }
      }
    }
  }

  .wizdom-left-nav {
    .wizdom-subcategory-module-title {
      padding-left: 10px;
      font-style: normal;
      font-weight: 600;
      font-size: $lt-base-font-size-large;
      line-height: 40px;
      color: $lt-theme-primary;
      margin: 5px 0 0 0;
    }

    .imaged {
      padding-left: 15px;
    }

    .header {
      font-size: $lt-base-font-size;
      padding-left: 10px;
      font-weight: 600;

      a,
      a:hover {
        color: $lt-neutral-primary;
        text-decoration: none;
      }

      span {
        padding-left: 10px;
      }
    }

    .wizdom-category-title {
      color: #34353e;
      font-weight: 700;
      font-size: 16px;

      & .glyphicon {
        width: 25px;
        color: $lt-theme-primary;
      }
    }

    .wizdom-subcategory-container {
      padding: 0 0 0 30px;
      line-height: 1.65em;
      color: #605d64;
    }

    a.list-group-item {
      padding: 0 0 0 15px;
      margin-bottom: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
    }
  }

  .wizdom-middle-nav {
    @media (min-width: 768px) {
      max-width: 300px;
    }

    .display-table {
      display: flex;
      align-items: center;
      padding: 0 10px 0 25px;
      margin: 1px 0;

      &.active,
      &:hover,
      &:active,
      &:focus {
        background-color: $lt-theme-lighter-alt;
      }

      &.active {
        padding-left: 10px;
      }
    }

    &.col-xs-3 {
      padding: 0;

      @media (min-width: 768px) {
        max-width: 320px;
      }
    }

    .wizdom-subcategory-title {
      a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }

      .badge {
        margin-left: auto;
      }
    }
  }

  .wizdom-middle-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0;
  }

  .template-editor {
    display: flex;
    height: 100%;
    width: 100%;

    .wizdom-editor {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    @media (max-width: 767px) {
      flex-direction: column;

      .col-xs-9 {
        width: 100%;
        min-height: 500px;
      }
    }

    @media all and (-ms-high-contrast: none) {
      //ie11
      min-height: 100vh;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-self: flex-start;
      width: 100%;
      z-index: 10;
      padding: 5px;
      color: #222;
      background-color: #383839;

      &.wizdom-fixed-row {
        justify-content: flex-end;
        padding: 15px;
        background: #fff;
      }

      .template-path {
        flex: 1 1 260px;
        color: #fff;
        padding: 5px 10px 5px 5px;
        word-break: break-all;
      }

      .template-buttons {
        margin-left: auto;
      }

      .btn {
        padding: 5px 10px;
      }

      &:not(.wizdom-fixed-row) {
        @media (min-width: 768px) {
          position: sticky;
          top: 0;
        }
      }
    }

    .main {
      height: 100%;
    }

    .ace_editor {
      min-height: 100%;
    }
  }
  /* CSS used here will be applied after bootstrap.css */
  /* NOTE: FontAwesome external stylesheet is used for dropdown caret (search for class: "fa" in html) */
  .checkbox.wizdom-controls-row {
    margin-top: 0;
  }

  .config-buttons + .wizdom-controls {
    margin-top: 45px;
  }

  .wizdom-controls {
    .wizdom-controls-row {
      /*margin: 0;*/
      padding: 15px 0;
      border-bottom: 1px solid #e7e7e7;

      &.noborder {
        border-bottom: 0px solid !important;
        padding: 0 !important;

        &:first-of-type {
          border-top: 0px solid !important;
        }

        &.padding {
          padding: 0 0 17px 0 !important;
        }
      }

      & label {
        font-weight: normal;
      }

      @media (max-width: $screen-md-min) {
        .col-xs-12 {
          padding-right: 0;
          padding-left: 0;
        }
      }

      .center {
        width: 100%;
        text-align: center;
        border: 1px solid silver;
        display: table-cell; // this says treat this element like a table cell
        vertical-align: middle; //now we can center vertically like in a TD
      }
    }
  }

  .wizdom-vcenter > [class^="col-"] {
    display: inline-block;
    vertical-align: middle;
  }

  .wizdom-dropdown {
    min-width: 220px;
    text-align: right;
  }

  .wizdom-btn {
    padding-right: 50px;
    padding-left: 50px;
    background-color: $lt-primary-btn-bg-color;
    border-color: $lt-primary-btn-border-color;
  }
  /*Wizdom modules css*/
  .wizdom-modules-container {
    // sharepoint tiles
    .tiles {
      margin-top: 15px;
    }

    .tile-wrap {
      display: inline-block;
      /*font-family: 'Lato', serif;*/
      a,
      a:hover {
        text-decoration: none;
      }

      .tile {
        overflow: hidden;
        width: 160px;
        height: 160px;

        @media (max-width: $screen-desktop) {
          width: 100px;
          height: 100px;
        }

        @media (max-width: $screen-tablet) {
          width: 70px;
          height: 70px;
        }

        margin-right: 10px;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        /*background-color: #428bca;*/
        background-color: $lt-primary-btn-bg-color;

        .tile-icon-wrap {
          width: 100%;
          height: 100%;
          display: table;
          z-index: -1;

          .tile-icon {
            display: table-cell;
            vertical-align: middle;
            font-size: 80px;

            @media (max-width: $screen-desktop) {
              font-size: 50px;
            }

            @media (max-width: $screen-tablet) {
              font-size: 25px;
            }
          }
        }

        section.section-title {
          margin-top: -33%;
        }

        section .section-wrap {
          height: 100%;

          .caption-title-wrap {
            display: table;
            height: 33%;

            .caption-title {
              display: table-cell;
              padding: 0.5em 1em;
              height: 33%;
              vertical-align: bottom;
              font-size: 90%;

              @media (max-width: $screen-desktop) {
                font-size: 70%;
              }

              @media (max-width: $screen-tablet) {
                font-size: 50%;
              }

              font-weight: 400;
            }
          }

          .caption-description {
            padding: 0.5em 1em;
            font-size: 90%;

            @media (max-width: $screen-desktop) {
              font-size: 70%;
            }

            @media (max-width: $screen-tablet) {
              font-size: 50%;
            }
          }
        }

        section {
          @include single-transition(margin-top, 0.4s, ease);
          text-align: left;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          padding: 0;
          position: relative;
        }

        &:hover {
          section {
            margin-top: -100%;
          }
        }
      }

      &.tile-disabled {
        opacity: 0.5;
      }
    }

    @media (min-width: 768px) {
      .abs-position {
        position: absolute;
        bottom: 100%;
        right: 0;
      }
    }

    .config-buttons {
      .saveConfigurationButton {
        margin-left: 8px;
      }
    }

    .importcssthemes label.wide-config-btn {
      color: $wizdom-primary-color;
      font-weight: 600;
      cursor: pointer;

      &:hover {
        color: lighten($wizdom-primary-color, 3%);
      }
    }
  }
  /*.wizdom-documentation-container {*/
  /*background-color: white;*/
  .grid {
    margin: 0 auto;

    .grid-item {
      max-width: 318px;
      padding: 10px;
      float: left;

      @media (min-width: $screen-phone) {
      }

      @media (min-width: $screen-tablet) {
      }

      @media (min-width: $screen-desktop) {
      }

      .pane {
        box-shadow: none;
        border-radius: $lt-tiles-border-radius;
        border: 1px solid $lt-tiles-border-color;
        background-color: $lt-tiles-bg-color !important;
        margin: 0;
        transition: opacity 0.5s ease, border 0.4s ease;

        &:hover {
          border: 1px solid $lt-theme-primary;
        }

        .content-preview {
          height: 220px;
          overflow: hidden;
          color: $lt-neutral-secondary;
        }

        .content-created,
        .content-modified {
          color: $lt-neutral-secondary;
        }

        > h3 {
          margin-top: 10px;
          font-size: 21px;
          color: $wizdom-card-header-color;
          font-weight: 400;
          height: 50px;
          overflow: hidden;
        }
      }
    }
  }

  .grid-item:after {
  }

  .pane {
    @include box-shadow(rgba(0, 0, 0, 0.4) 0.5px 0.5px 2px);
    @include clearfix();
    padding: 15px;
    background: #fff;
    background: #eee !important;
    margin: 5px;

    a {
      color: #888;

      &:hover {
        cursor: pointer;
      }
    }

    > h3 {
      color: #888;
    }

    hr {
      border-top: 1px solid $lt-neutral-light;
      margin: 10px 0;
    }

    .content-created,
    .content-modified {
      line-height: 20px;
      font-size: 12px;

      span:first-child {
        padding-right: 5px;
        vertical-align: baseline;
      }

      span:last-child {
        font-size: 11px;
        vertical-align: top;
        padding-right: 10px;
      }

      float: left;
    }

    .content-type {
      float: right;
    }

    &.video-pane {
      .content-preview {
        img {
          width: 100%;
          height: auto;
          border: 5px solid #f9f9f9;
        }

        .icon-play {
          color: #fff;
          font-size: 60px;
          margin: -30px 0 0 -30px;
          opacity: 0.7;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transition: all 0.5s ease-out;
          -moz-transition: all 0.5s ease-out;
          -o-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;

          &:hover {
            opacity: 1;
          }
        }
      }
    }

    &.article-pane {
    }
  }
  /*}*/
  // noticeboard channels
  .channelchilds {
    padding-left: 20px;
  }
  // add some margin to toolbar buttons
  .btn-toolbar {
    margin-bottom: 5px;
    margin-top: 5px;

    &.below-border {
      margin-top: 15px;
    }
  }
}
/* --------Spinner styles (same styles as in Modules\Branding\Content\Partials\_Main.scss) --------*/
.wizdom365Loading {
  position: absolute;
  top: 50%;
  left: 50%;
}

.wizdom365Loading .bullet {
  position: absolute;
  padding: 5px;
  border-radius: 50%;
  background: $lt-theme-primary !important;
  -webkit-animation: animIn 1s ease-in-out 0s infinite;
  -moz-animation: animIn 1s ease-in-out 0s infinite;
  -o-animation: animIn 1s ease-in-out 0s infinite;
  animation: animIn 1s ease-in-out 0s infinite;
}

.wizdom365Loading .bullet:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.wizdom365Loading .bullet:nth-child(2) {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  -o-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

.wizdom365Loading .bullet:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.wizdom365Loading .bullet:nth-child(4) {
  -webkit-animation-delay: 0.45s;
  -moz-animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  animation-delay: 0.45s;
}

@-webkit-keyframes animIn {
  0% {
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
}

@keyframes animIn {
  0% {
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
}

.notification-scroller {
  /*white-space: pre-line;*/
  max-height: 350px;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
}
/* end Spinner styles*/
/* Use Angulars cloak style to hide angulars raw/uncompiled template items like brackets while loading */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
/* -------- Modal dialog styles (same styles as Modules\Branding\Content\Partials\_EditWebparts.scss) --------*/
.modal-dialog {
  /* webforms custom size */
  .webform-modal-window & {
    width: 95%;
  }

  .modal-content {
    border-radius: 4px !important;
    font-size: 14px;

    .modal-header {
      background-color: $lt-theme-primary !important;
      padding: 20px 40px;
      border: 0;
      border-top-left-radius: 3px !important;
      border-top-right-radius: 3px !important;

      .modal-title {
        color: #ffffff;
        font-size: 26px;
        font-weight: lighter;
        text-align: left;
        text-transform: none;
        margin: 10px 0 15px;
        line-height: 1.1;
      }

      .close {
        color: #fff;
        text-shadow: none;
        opacity: 1;
        margin-top: 4px;
        margin-right: 6px;
        font-size: 28px;
        position: absolute;
        right: 10px;
        top: 5px;
        font-weight: 100;
      }
    }

    .modal-body {
      padding: 15px 40px;
      margin-top: 10px;
      margin-bottom: 10px;
      min-height: 200px;

      .container-fluid {
        margin: 0;
        padding: 0;
      }

      .row {
        overflow: auto;
      }

      .wt-fieldInfo {
        color: $wizdom-editwebpart-helptext-color;
        font-size: $wizdom-editwebpart-helptext-size;
        margin-top: 6px;
      }

      .form-control {
        &[disabled] {
          background-color: $lt-neutral-lighter;
        }

        & + .wt-fieldInfo {
          padding-top: 1px;
        }
      }

      .form-group {
        margin-bottom: 35px;

        p {
          margin: 0;
        }

        label {
          margin-bottom: 6px;
          font-weight: normal;
          color: $lt-neutral-primary;
        }

        .radio,
        .checkbox {
          .wt-fieldInfo {
            padding-bottom: 10px;
            padding-left: 20px;
          }

          & + .radio,
          & + .checkbox {
            margin-top: -5px;
          }

          &:last-child {
            margin-bottom: 0;

            label {
              margin-bottom: 0;
            }

            .wt-fieldInfo {
              margin-top: 1px;
              padding-bottom: 0;
            }
          }
        }

        .form-group-inner {
          margin-bottom: 10px;

          & + .checkbox {
            margin-top: -5px;
          }
        }
      }

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

    .modal-footer {
      padding: 20px 40px;
    }

    .wt-paddingTopSmall {
      padding-top: 6px;
    }

    .radio,
    .checkbox {
      margin-top: 0;
    }

    select::-ms-expand {
      width: 16px;
      border: none;
      background-color: transparent;
    }
    /* Advanced web properties (using tabs) */
    .wt-navRowContainer {
      background-color: #f8f8f8;

      .navbar {
        border: 0;
        border-radius: 0;
      }

      .navbar-nav {
        float: none;
      }

      .navbar-nav > li {
        float: none;
        border-bottom: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        /*min-height: 57px;*/
        background-color: #f8f8f8;
        width: 100%;
        position: relative;
        left: 1px;
      }

      .navbar-nav > li.active {
        margin-right: -1px;
        border-right: 1px solid white;
        background-color: white;
      }

      .navbar-nav > li a,
      .navbar-nav > li a:focus,
      .navbar-nav > li a:hover {
        padding: 15px;
        color: #333333;
        /*font-weight: bold; */
      }

      .navbar-nav > li.active a,
      .navbar-nav > li.active a:focus,
      .navbar-nav > li.active a:hover {
        font-weight: bold;
      }

      .navbar-nav a {
        background-color: #f8f8f8 !important;
      }

      .navbar-nav a:hover {
        background-color: white !important;
      }

      .navbar-nav a:hover {
        background-color: white !important;
      }

      .navbar-nav > a,
      .navbar-nav > a:hover,
      .navbar-nav > a:focus {
        background-color: white;
      }

      .navbar-nav > .active > a,
      .navbar-nav > .active > a:hover,
      .navbar-nav > .active > a:focus {
        background-color: #ffffff !important;
      }

      .navbar-nav > li a:focus {
        outline: 0;
      }
    }

    .wt-navRow {
      background-color: #f5f5f5;
    }

    .wt-navMenuColumn {
      padding: 0;
      z-index: 2;
      margin-right: 1px;
    }

    .wt-navContentColumn {
      background-color: #ffffff;
      padding-left: 0;
      padding-right: 0;
      border-left: 1px solid #e5e5e5;
      margin-left: -1px;
      z-index: 1;
    }

    .wt-navContentColumn .modal-body,
    .wt-navContentColumn .modal-footer {
      padding-left: 30px;
      padding-right: 30px;
    }
    /* Following styles remove the inner shadow on inputfields. Not sure if we want shadows or not. In the Photoshop design there are no shadows */
    input.ng-valid,
    input.ng-invalid {
      box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.075) !important;
    }
  }
}
/* Release notes styles start */
.wizdom-documentation-container {
  padding-left: 10px;
  padding-right: 10px;
}

.wt-releaseGrid {
  display: inline-block;
  max-width: 768px;
  min-height: 300px;
  vertical-align: top;
}

@media (min-width: 480px) {
  .wt-releaseGrid {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .wt-releaseGrid {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .wt-releaseGrid {
    width: 25%;
  }
}

.wt-releaseGrid .content-preview {
  min-height: 200px;
}

.wt-releaseGrid h3 {
  color: #888;
}

.wt-releaseGrid .article-pane {
  cursor: pointer;
}
/* Release notes styles end */
/* support page styles start */
ul.tags-container {
  list-style: none;
  /*background-color: white;*/
  float: left;
  //padding: 0 2px;
  padding: 0;
  /*border: 1px solid #ccc;*/
  width: 100%;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 12px 0 0 0;
}

ul.tags-container li.tag {
  /*margin: 2px;*/
  margin-right: 5px;
  margin-bottom: 5px;
  float: left;
  border-radius: 3px;
  border: 1px solid $lt-theme-primary;
  background-color: $lt-theme-primary;
  /* height: 32px; */
  /* line-height: 32px; */
  padding: 7px 10px 5px 10px;
}

ul.tags-container li.tag-input {
  float: left;
}

ul.tags-container li h6 {
  margin: 1px 1px;
  display: flex;
  align-items: center;
  color: $lt-white;

  .filter-text {
  }

  i {
    cursor: pointer;
    /*color: white;*/
    margin-right: 3px;
  }
}

ul.documentation-type {
  padding-top: 10px;
  float: left;
  width: 100%;
}

ul.tags-container li.tag-input input {
  border: none;
  padding: 6px;
  width: auto;
  outline: none !important;
}
/*.search-margin {
                margin: 0 3px;
            }*/
/*.search-no-margin {
                margin: 0 5px;
            }*/
.tags-wrapper {
  /*padding-right: 10px;
        padding-left: 18px;*/
  .tag-finder {
    height: 32px;
  }

  position: relative;

  &:before {
    content: "\e904";
    font-family: streamline-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 12px;
  }

  input {
    padding-left: 35px;
  }
}

.dashboard-spinner,
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
}

.documentations {
  .documentations-wrapper {
    //margin-top: 15px;
    padding: 30px 35px 30px 35px;

    .spinner {
      position: absolute;
      top: 3px;
      left: 50%;
    }
  }

  .service-create-wrapper {
    margin-top: 15px;
  }

  .service-overview-wrapper {
    margin-top: 15px;
  }

  .content-preview {
    a {
      display: block;
      position: relative;

      img {
        background-color: black;
        min-height: 200px;
      }
    }
  }
}

.wizdom-dashboard-container {
  .version-status {
    font-size: 70px;
  }

  .version-get-failed {
    margin: 15px;
  }
}

.wizdom-documentation-container {
  .content-preview {
    a {
      display: block;
      position: relative;

      img {
        background-color: black;
        min-height: 200px;
      }
    }
  }

  .data-get-failed {
    margin: 30px;
  }

  .current-document {
    padding-top: 15px;
  }

  .video-wrapper {
    height: 80vh;
  }
}

.vh80percent {
  height: 80vh;
}

.current-document-view-toc {
  padding: 15px 0;
}

.current-document-view {
  padding-top: 15px;
}

.documentation-body {
  padding: 30px 50px 30px 50px;
}

.displaytable {
  display: table;
}
/* support page styles end */

.wizdom .wizdom-middle-nav {
  background-color: #fff;
  border-right: 1px solid #d5d5d5;

  .create-new-container {
    padding: 10px 0 10px 5px;

    .create-new {
      padding-right: 10px;
    }
  }

  .nav-tabs > li > a {
    border-radius: 0;
    margin-right: 0;
  }

  .nav-tabs a {
    display: block;
    font-size: 16px;
    color: #000 !important;
    text-align: center;
    opacity: 0.3;
    border-top: 0px solid #e5e5e5 !important;
    border-left: 0px solid #e5e5e5 !important;
    border-right: 0px solid #e5e5e5 !important;
    cursor: pointer;
  }

  .nav-tabs .active a {
    font-size: 16px;
    color: #000 !important;
    opacity: 1;
    background-color: transparent !important;
    border-top: 0px solid white !important;
    border-left: 0px solid white !important;
    border-right: 0px solid white !important;
  }

  .nav-tabs {
    border-bottom: 0px solid white !important;
  }

  .tab-content {
    padding: 10px 0px 10px 0px;
  }

  .action-disabled {
    opacity: 0.4;
  }

  .label-click {
    cursor: pointer;
    margin-left: 3px;
  }
}

.ace-tm .ace_gutter {
  background: #ffffff !important;
}

.template-editor .configuration-dropdown .dropdown .dropdown-toggle {
  max-width: 100px;
  overflow: hidden;
  transition: all ease-in-out 0.5s;
}

.template-editor .configuration-dropdown .dropdown.open .dropdown-toggle {
  max-width: 500px;
}

.template-editor .configuration-dropdown .dropdown .dropdown-toggle:hover {
  max-width: 500px;
}

// test custom js area
/*provioning content accelerator*/
.provioning-content-accelerator {
  .provisioning-elements {
  }

  .provisioning-module {
    border: 1px solid #ccc;

    legend {
      border: none;
      margin: 0 5px;
      width: auto;
      font-size: 1em;
      color: #605d64;
      padding-top: 5px;
    }

    .module-info {
      padding: 0 10px 10px 10px;

      .form-group {
        margin-bottom: 10px;
      }
    }
  }

  .module-unchecked {
    border: none !important;
  }

  .remove-module {
    font-size: 1em;
    margin: 0 0 0 10px;
    cursor: pointer;
    color: #333;
    border: 1px solid #ccc;
  }

  .add-module {
    margin: 10px 0;
  }
}

.provisioning-summary {
  ul {
    list-style: none;
    padding-left: 0;

    li {
      padding: 2px;
      margin: 1px 0;
      border: 1px solid transparent;
    }
  }
}

.disabled {
    pointer-events: none;
    color: #AAAAAA;
    cursor: default;
    text-decoration: none;
}

.saveConfigurationButton {
  margin-bottom: 10px;
}

.applyClientSideFeatureToggles {
  margin-right: 15px;
}

.wizdom-icon-picker {
  .dropdown-menu {
    position: relative;
    min-width: 0;
    float: none;
    //box-shadow: none;
    //border: none;
    li {
      display: inline;
    }
  }
}

.list-group {
  .list-group-item {
    .close {
      margin-top: -2px;
    }
  }
}

img.success-center-image {
  max-width: 600px;
}

.dropdown-priority {
  button {
    width: 114px;
  }
}

.transparent-on-loading {
  opacity: 0.5;
}

.position-relative {
  position: relative;
}

.position-loading {
  position: absolute;
  left: 50%;
  top: 50%;
}

.orderby:hover {
  cursor: pointer;
  background-color: #eee;
}

.wizdom-bootstrap-wrapper-visible {
  .form-control {
    box-shadow: none;
    background-color: $lt-white;
    font-size: $lt-base-font-size;

    &[readonly] {
      background-color: $lt-neutral-lighter;
    }
  }

  .color-picker {
    width: 100%;

    .input-group-addon {
      width: 35px;
      border-left: 0;
    }
  }

  select.form-control,
  input.form-control {
    height: 40px;
    line-height: initial !important;
    font-weight: 400 !important;
  }

  select.multi {
    height: 100px !important;
    background-image: none !important;
    overflow-y: auto !important;
    width: 100%;
    padding-right: 10px !important;
  }

  .alert-license {
    margin: 0;
    padding: 10px 0;
    text-align: center;
  }

  .alert {
    color: #333;
    border: none;
    border-radius: 0;

    .close,
    .glyphicon {
      color: #666;
    }
  }

  .alert-info {
    background-color: $lt-neutral-lighter;
  }

  .alert-success {
    background-color: $lt-status-success-light;
  }

  .alert-warning {
    background-color: $lt-status-warning-light;
  }

  .alert-danger {
    background-color: $lt-status-severe-warning-light;
  }

  .label-info {
    background-color: $lt-status-success;
  }

  .label-warning {
    background-color: $lt-status-warning;
  }

  .label-danger {
    background-color: $lt-status-severe-warning;
  }
}

.progress {
  height: 5px;
  margin-bottom: 5px;
}

.progress-placement {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.table {
  > thead > tr > td,
  > thead > tr > th,
  > tbody > tr > th,
  > tfoot > tr > td,
  > tfoot > tr > th {
    border-top: 0px;
  }
}

.sitecollection-list-view-even {
  background-color: #eee;
}

.sitecollection-list-view-odd {
  background-color: white;
}

.insight-print-table {
  .table-striped > tbody > tr:nth-of-type(odd) td {
    -webkit-print-color-adjust: exact !important;
    background-color: lightgrey !important;
    display: table-cell;
  }
}
// support for ms ui fabric fonts
@font-face {
  font-family: "FabricMDL2Icons";
  /*src: url('#{$icon-font-path}fabricmdl2icons-2.68.woff') format('woff'), url('#{$icon-font-path}fabricmdl2icons-2.68.woff2') format('woff2'), url('#{$icon-font-path}fabricmdl2icons-2.68.ttf') format('truetype');*/
  src: url("#{$icon-font-path}fabricmdl2icons-3.54.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.ms-Icon {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "FabricMDL2Icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  position: relative; // added to be able to control top:
}

@import "../../Modules/Branding/Content/Partials/Ui-fabricIcons";
//add classes here for ui fabric icon picker
.wizdom-icon-picker .ui-iconpicker > ul.dropdown-menu {
  width: 100%;
  max-width: 480px;
  max-height: 18em;
  padding: 0.5em 0.5em;
  overflow-y: scroll;

  > li button {
    width: 2.5em;
    height: 2.5em;
    padding: 0 0;
    margin: 0.1em 0.1em;
  }
}

.treeselect-container {
  background-color: $lt-neutral-lighter-alt;
  border: 1px solid #f2f2f2;
  padding: 15px 0;

  treeselect {
    width: 100%;
  }
}

// Custom Module 3PD template hotfix
.administration {
  .container-fluid > .row {
    display: flex;
    width: auto;
  }

  .form-control {
    height: 34px;
  }

  select.form-control {
    padding: 6px 12px !important;
  }
}

// Some utilites
.d-flex {
  display: flex;
}

.d-none {
  display: none;
}

.justify-content-center {
  justify-content: center;
}

.w-50 {
  width: 50%;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mt-3 {
  margin-top: 1rem;
}

.ml-3 {
  margin-left: 1rem;
}

.mr-3 {
  margin-right: 1rem;
}

.fw-normal {
  font-weight: normal;
}

.fw-bold {
  font-weight: 700;
}

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

.text-break {
  word-break: break-all;
}

.text-nowrap {
  white-space: nowrap;
}

.cursor-pointer {
  cursor: pointer;
}
.checkbox-label-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}