// 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 .8em top 50%, 0 0;
        background-size: .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: .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: .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: .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,.4s, ease);
                    text-align: left;
                    height: 100%;
                    background-color: rgba(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 .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;
        }
    }
}

.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;
    }

    .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;
}
