// Scaffolding
// Basic and global styles for generating a grid system, structural layout, and page templates
// -------------------------------------------------------------------------------------------


// Body reset
// ----------

body {
    margin: 0;
    font-family: $baseFontFamily;
    font-size: $baseFontSize;
    line-height: $baseLineHeight;
    color: $sd-text;
    background-color: $sd-background;
    overflow: hidden;
    height:100%;
}

// Links
// -----

a, .link {
    color: $linkColor;
    text-decoration: none;
}
a:hover, .link:hover {
    color: $linkColorHover;
    text-decoration: underline;
}

@page {
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.5cm;
    margin-bottom: 1.5cm;
}

// Layouts
// --------------------------------------------

.top-menu-hidden {
    #top-menu {
        display: none;
    }

    .monitoring {
        top: 0;
    }

    .subnav--authoring {
        top: 0;
    }

    .main-section {
        // excludes $subnav-height
        top: $topspace;
    }
}

// main container
// ------------------------------------
#main-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding-top: $topspace;
    @include box-sizing(border-box);
    background: $background-main;
    overflow: hidden;
    @include transition(all 0.3s ease);

    &.menu {
        left: $sf-main-menu-width;
    }

    &.authoring {
        #workspace-container {
            box-shadow: 2px 0 10px 0 rgba(0,0,0,0.3);
            right: 44%;
            z-index:100;
            border-right: 3px solid #666;
            @include transition(all .5s);
            @media only screen and (max-width : 1430px) {
                right: 54%;
            }
            &.ui-resizable-resizing {
                @include transition(none);
                + #authoring-container { @include transition(none); }
            }
            .ui-resizable-handle {
                display: block;
            }
        }

        #authoring-container {
            width: 44%;
            @include transition(width .5s);
            .content-item-preview {
                display: flex;
            }
            @media only screen and (max-width : 1430px) {
                width: 54%;
            }
        }
    }
    &:not(.authoring) {
        #workspace-container { width: auto !important; }
        #authoring-container { width: auto !important; }
        .ui-resizable-handle { display: none !important; }
    }
    &.hideMonitoring {
        #workspace-container {
            right: 100%;
            margin-left: -100%;
        }
        #authoring-container {
            width: calc(100% - #{$sidebar-width}) !important;
        }
        .content-item-preview {
            display: none;
        }
    }
}

// authoring sidebar container
#workspace-container {
    position: absolute;
    top: 0;
    right: 0;
    @include box-sizing(border-box);
    bottom: $authoring-opened-articles;
        left: $sidebar-width;
        background-color: $sd-background;
}

#authoring-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    @include box-sizing(border-box);
}

// Main section
// ------------------------------------

.main-section {
    position:absolute;
    top: $subnav-height+$topspace;
    bottom:0; left:0; right:0;
    margin:0;
    padding:0;
    z-index:1;
    &.with-subnav {
        .preview-layout {
            top : $nav-height;
            .preview-pane {
                .actions {
                    padding: 15px 20px;
                    height: 28px;
                }
                .user-details-pane {
                    top: 40px;
                }
            }
        }
    }
}
.main-section.filter {
    top: $subnav-height+$topspace;
    bottom:0; left:0; right:0;
    margin:0;
    padding:0;
    z-index:1;
    &.with-subnav {
        .preview-layout {
            top : $nav-height;
            .preview-pane {
                .actions {
                    padding: 15px 20px;
                    height: 28px;
                }
                .user-details-pane {
                    top: 40px;
                }
            }
        }
    }
}
.main-section.search {
    top: $topspace;
    .archive-sidebar {
        top:48px;
    }
}
.search-label {
    margin-bottom: -2px;
    margin-top: 10px;
}

.main-section.users {
    .preview-layout {
        .list-pane > .content {
            right: 400px;
            transition: all ease-in-out 0.2s;
        }
        &.closed {
            .list-pane > .content {
                right: 0;
            }
        }
    }
}

.main-section.contacts-section {
    .preview-layout {
        .content {
            right: 560px;
            transition: all ease-in-out 0.2s;
        }
        &.closed {
            .content {
                right: 0;
                transition: all ease-in-out 0.2s;
            }
        }
    }
}

// Preview layout
// ------------------------------------
.action-bar { //overhidding the header of preview layout
    position: absolute;
    top: -96px;
    left: 0; right: 0;
    height: 48px;
    background: #fff;
    z-index: 1;
    @include border-box();
    padding: 10px;
    @include transition(all ease 0.35s);
    border-bottom: 1px solid #dfdfdf;
    &.show {
        top: -48px;
    }
}

.preview-layout {
    position: absolute;
    top: 0; right: 0;
    left: 0; bottom: 0;
    @include transition(right ease 0.2s);
    .list-pane, .preview-pane {
        > header {
            height: $nav-height;
            position: absolute;
            left: 0; right: 0; top: 0;
            @include box-shadow(0 1px 0 0 rgba(0,0,0,0.1));
            z-index: 1;
            padding-right: 3.6rem;
            .nav-tabs {
                box-shadow: none;
            }
        }
        > .content {
            position: absolute;
            top: $nav-height;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }
    .list-pane {
        position:absolute;
        background: $background-main;
        top: 0;
        right: 0;
        left: 0; bottom:0;
        border-right: 1px solid #d0d0d0;
        z-index: 1;
        @include transition(right ease 0.2s);
        .shadow-list-holder {
            padding: 20px;
        }
        > header {
            background-color:$sd-background;
        }
        > .content {
            overflow: auto;
        }
    }
    .preview-pane {
        position: absolute;
        width: $sidepreview-width;
        top: 48px;
        right: 0; bottom: 0;
        background: #fff;
        overflow-y: auto;
        @include transition(right ease 0.2s);
        z-index: 2;
        @include box-shadow(inset 2px 0 3px -1px #d8d8d8);
        > header {
            position: relative;
            .btn {
                margin-top: 10px;
            }
            .close-preview {
                position: absolute;
                top: 10px; right: 8px;
                opacity: 0.5;
                &:hover {
                    opacity: 1;
                }
            }

        }
        > .content {
            .additional-info {
                border-bottom: 1px solid #dfdfdf;
                padding: 10px 20px;
            }
            .action-menu {
                position: absolute;
                top: 1px;
                right: 0;
                width: 50px;
                height: 44px;
                .dropdown {
                    display: block;
                }
            }
        }
        img {
            max-width: 100%;
        }
    }
}

.ingest-container {
    .list-pane {
        top:-$nav-height;
    }
}
.archive-container {
    .archive-sidebar {
        top:$nav-height;
    }
}

// Slide pane
// ---------------------------------------------

.sd-overlay-panel {
    z-index: $zindexSlidePane !important;
}

.workspace .main-section {
    .sd-overlay-panel {
        top: 0;
        bottom: 0;
        width: 56rem;
    }
}
.workspace.authoring .main-section {
    .sd-overlay-panel {
        width: 40rem;
    }
}

.workspace .main-section {
    .archive-content {
        .sd-overlay-panel {
            top: 4.8rem;
        }
    }
}


//Variables
$slide-pane-width: 400px;

.slide-pane {
    position: absolute;
    top: 1px; bottom: 0;
    right: -$slide-pane-width;

    width: $slide-pane-width;
    background-color: $white;
    z-index: $zindexSlidePane;
    @include border-box();
    display: flex;
    flex-direction: column;

    &.slide-pane--inset {
        top: $nav-height * 2;
        bottom: 30px;
    }
    &.open { right: 0; }

    > .slide-pane__header {
        height: $nav-height;
        border-bottom: 1px solid #424242;
        h3 {
            font-size: 20px;
            line-height: $nav-height;
            color: $black;
            @include text-light();
            float: left;
        }
        .close {
            margin-top: 14px;
            position: absolute;
            top: 0;
            right: 12px;
        }
    }

    > .slide-pane__content {
        flex-grow: 1;
        width: 100%;
        top: $nav-height;
        overflow: auto;
        padding: 20px 15px 0 20px;
        @include border-box();

        .dropdown {
            margin-bottom: 20px;
            .dropdown__toggle, .dropdown__menu {
                width: 100%;
                &.focus, &:focus {
                    outline: 2px solid $sd-blue;
                }
            }
        }
    }

    > .slide-pane__footer {
        width: 100%;
        padding: 15px 15px 0 15px;
        border-top: 1px solid #424242;
        @include border-box();

        button {
            margin-bottom: 15px;
        }

        .btn-list li { padding-bottom: 0; }
    }



    // Stylings for slide pane
    &.slide-pane--dark {
        background-color: #3b3b3b;
        > .slide-pane__header {
            h3 {
                color: $white;
            }
        }
    }
}

.btn-list {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    overflow-x: auto;
    flex-wrap: wrap;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    margin-bottom: 0.6rem;

    li {
        flex: 0 0 calc(50% - 0.8rem);
        max-width: calc(50% - 0.8rem);
        margin: 0.4rem !important;
        .btn__check { width: 100%; }
    }
}

.form__row--desk-select {
    .dropdown__toggle, .dropdown__menu {
        width: 100%;
    }
    .dropdown__toggle {
        width: 100%;
        max-height: 3.2rem;
    }
}

// Split content
// ------------------------------------
.split-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    > .nav, > .header, > header {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: $nav-height;
        border-bottom: 1px solid #f0f0f0;
        @include border-box();
    }
    > .content {
        position: absolute;
        top: $nav-height;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        overflow-x: hidden;
        padding: 20px;
        background-color: #f8f8f8;
    }
}


// Tablist and tabpanes
// ------------------------------------

.tablist {
    @include transition( all 0.3s ease);
    width:$tablist-width;
    position:absolute;
    top:0;
    bottom:0;
    z-index:20;
    background: $tablist-background;
    overflow:hidden;
    &.left-tablist {
        left:0;
                overflow: visible;
        @include box-shadow(inset -8px 0 7px -6px #888);
    }
    &.right-tablist {
        right:0;
                overflow: visible;
        @include box-shadow(inset 8px 0 7px -6px #888);
    }
    .navigation-tabs {
        margin: 0;
        border: 0;
        list-style-type: none;
        > li {
            position:relative;
            float:none;
            .btn {
                display:block;
                position: relative;
                box-sizing: border-box;
                width: $tablist-width;
                height: $tablist-width;
                text-align: center;
                padding: 0;
                margin:0;
                @include border-radius(0px);
                border: 1px solid #898989;
                border-width: 0 0 1px 0 !important;
                background: none;
                @include box-shadow(none);
                &:hover {
                    background: #b7b7b7;
                    border: 1px solid #898989;
                    border-width: 0 0 1px 0 !important;
                }
                .helper-icon, .main-icon {
                  position: absolute;
                  top: 10px;
                  left: 10px;
                }
                .helper-icon {
                  opacity: 0;
                  margin: 0;
                  left: 12px;
                  width: 24px;
                  height: 24px;
                  font-size: 24px;
                  line-height: 24px;
                  z-index: 2;
                  transition: all 0.4s 0s, transform 0.3s 0s;
                }
                .main-icon {
                  opacity: 1;
                  transition: all 0.2s, transform 0.2s;
                }
            }
            .label--info {
                position: absolute;
                top: 3px;
                right: 3px;
                text-shadow: none;
                z-index: 2;
            }
            &.active {
                .btn {
                    background: #b8b8b8;
                }
                .btn:hover {
                  .helper-icon {
                    opacity: 1;
                    transform: rotate(180deg);
                    transition: all 0.3s 0.2s, transform 0.2s 0.2s;
                  }
                  .main-icon {
                    opacity: 0;
                    height:8px;
                    width:8px;
                    top: 20px;
                    left: 20px;
                    background-size: 100%;
                  }
                }
            }

        }
    }
}
.tabpane {
    position:absolute;
    width:$tabpane-width;
    top:0;
    bottom:0;
    background: $tabpane-background;
    border-color:$tabpane-border;
    border-style: solid;
    z-index:15;
    @include box-sizing(border-box);
    @include transition( all 0.3s ease);
    &.left-tabpane {
        left:-$tabpane-width;
        border-width: 0 3px 0 0;
        @include box-shadow(2px 0px 8px 0px rgba(50,50,50,.35));

        &.open-tabpane {
            left:$tablist-width;
        }
    }
    &.right-tabpane {
        right:-$tabpane-width;
        border-width: 0 0 0 3px;
        @include box-shadow(-2px 0px 8px 0px rgba(40,50,50,.35));
        &.open-tabpane {
            right:$tablist-width;
        }
    }
    .tabcontent {
        padding:$tabcontent-padding;
        @include box-sizing(border-box);
        position: absolute;
        bottom: 0;
        top: 0;
        left:1px;
        right:1px;
        overflow: hidden;
    }
}


// Notificaton pane
// ---------------------------------------------

.notification-pane {
    position: fixed;
    top: $nav-height;
    bottom: 0;
    right: -$notification-pane-width;
    width: $notification-pane-width;
    @include box-sizing(border-box);
    background: #313131;
    z-index: 2000;
    @include transition(right ease 0.3s);
    &.show {
        right: 0;
    }
    > .header {
        height: 65px;
        width: 100%;
        background: #212121;
        @include box-shadow(inset 0 4px 4px -2px #000);
        border-bottom: 1px solid #313131;
        padding-left: 10px;
        padding-right: 10px;

        .user-info {
            height: 40px;
            padding-top: 12px;
            padding-bottom: 2px;
            @include box-sizing(border-box);
            .name {
                color: #c5c5c5;
                font-size: 12px;
                display: block;
                line-height: 12px;
            }
            .displayname {
                font-size: 11px;
                color: #727272;
                display: block;
                line-height: 12px;
                margin-top: 2px;
            }
        }
        .actions {
            height: 20px;
            @include box-sizing(border-box);
            button {
                @include reset-button();
            }
            a, button {
                font-size: 10px;
                color: #8d8d8d;
                text-decoration: none;
                text-transform: uppercase;
                @include box-sizing(border-box);
                line-height: 20px;
                padding-right:16px;
                padding-left: 0;
                display: inline-block;
                margin: 0 !important;
                &:last-child {
                    border:0;
                }
                &:hover {
                    color: #ccc;
                }
            }
        }

    }
    > .content {
        position: absolute;
        top: 65px;
        left: 0; right: 0; bottom: 0;
        border-top: 2px solid #464646;
        overflow: auto;
        @include box-shadow(inset 4px 0 4px -2px #202020);
        .module {
            margin-top: 20px;
            .title {
                font-size: 16px;
                color:#f8f8f8;
                padding: 10px;
                @include text-light();
            }
        }
    }
}


// Default card box styling
// ---------------------------------------------


//color variables
$main-item-color: #607d8b;
$main-item-color-inactive: #aaa;

.card-box {
    @include box-sizing(border-box);
    position: relative;
    @include border-radius(2px);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
    background-color: white;
    font-size: 13px;
    color: #333;
    &--with-click {
        &:hover {
            box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
        }
    }
    &--flex {
        display: flex;
        flex-direction: column;
    }

    .card-box__header {
        background-color: $main-item-color;
        padding: 0;
        @include border-radius (2px 2px 0 0);
        color: white;
        @include box-sizing(border-box);
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background-color: rgba(0,0,0,.2);
            @include border-radius (2px 2px 0 0);
        }
        .dropdown {
            float: right;
            margin-top: 8px;
            .dropdown__menu {
                margin-top: 0;
            }
            .dropdown__toggle {
                border: none;
                outline: none;
                padding: 0 8px;
                display: block;
                background: transparent;
                height: 42px;
                text-align: center;
                line-height: 0;
                font-size: 15px;
                position: relative;
                z-index: 2;
                opacity: .4;
                i {
                    color: #fff;
                }
                &:hover {
                    opacity: .7;
                }
            }
            &.open {
                .dropdown__toggle {
                    opacity: 1;
                }
            }
        }
        &--empty {
            height:8px;
        }
        &--padded-flex {
            display:flex;
            padding: 14px 24px 6px 14px;
            i {
                color: rgba(255,255,255, 0.8);
                padding-right: 10px;
            }
        }
    }

    &.active {
        .card-box__header {
            background-color: $sd-blue;
        }
    }

    .card-box__heading {
        padding: 20px 16px 12px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        @include box-sizing(border-box);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: $white;
        &--editable {
            padding: 10px 16px 10px;
            text-transform: initial;
            &:hover {
                cursor: text;
            }
            > div {
                padding: 9px 0 3px 0;
            }
            > input {
                margin-top: 6px;
            }
        }
    }
    .card-box__sub-heading {
        background-color: #9daeb7;
        font-size: 11px;
        font-weight: 500;
        color: white;
        text-transform: uppercase;
        padding: 4px 16px;
        &.success {
            background-color: #8bc34a;
        }
    }
    .card-box__btn-group {
        margin: 14px 6px 0 0;
        &--right {
            float: right;
        }
        .btn {
            background: transparent;
            padding: 10px 2px;
            color: $white;
            opacity: 0.4;
            &:focus, &:hover {
                @include box-shadow(none);
                opacity: 1;
            }
            [class^="icon-"],
            [class*=" icon-"] {
                color: $white;
            }
        }
    }
    .card-box__thumbnail {
        padding-top: 8px;
        line-height: 0;
        & + .heading {
            background-color: white;
            font-weight: 500;
            text-align: center;
            color: #333;
            padding: 10px 16px;
        }
    }
    .card-box__content {
        padding: 16px;
        flex-grow: 1;
        @include box-sizing(border-box);
        h4 {
            text-transform: uppercase;
            font-size: 11px;
            color: rgba(0,0,0,.5);
            letter-spacing: 0.04em;
            margin-bottom: 4px;
            &.with-value {
                margin-bottom: 0;
            }
            .label {
                float: right;
                box-sizing: border-box;
                height: 15px;
                margin: auto 0;
                padding: 3px 5px 0;
                border-radius: 8px;
                color: rgba(255,255,255,1);
                background: rgba(0,0,0,.25);
                font-size: 10px;
                line-height: 100%;
                letter-spacing: .06em;
                font-weight: 400;
            }
            .value-label {
                float: right;
                font-size: 13px;
                color: #333;
                font-weight: 400;
                text-transform: none;
                letter-spacing: 0em;
            }
            &.card-box__h4--normal-case {
                font-size: 12px;
                text-transform: initial;
            }
        }
        &--scrollable {
            min-height: 20vh;
            max-height: 30vh;
            overflow-y: auto;
        }
    }
    .card-box__placeholder {
        padding: 16px;
        flex-grow: 1;
        @include box-sizing(border-box);
        height: calc(100% - 48px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: $grayLight;
        font-weight: 300;
        font-size: 1.2rem;

        &--cursorPointer {
            cursor: pointer;
        }

    }
    .card-box__content-list {
        margin: -16px;
        padding: 0;
        list-style: none;

        li, .card-box__content-list-item {
            padding: 16px;
            border-bottom: 1px solid #ebebeb;
            &--inline {
                display: flex;
                h4 { flex: 1 1; }
                span {
                    flex: 1 1;
                    text-align: right;
                }
            }
            .card-box__content-list-inline-span {
                display: inline-block;
            }
            &:last-child {
                border: none;
            }
            &--border-bottom {
                &:last-child {
                    border-bottom: 1px solid #ebebeb;
                }
            }
            &--small {
                padding: 7px 16px;
                h4 {
                    margin: 0;
                }
            }
        }
        .creation-time {
            display: block;
            font-size: 12px;
            color: #999;
            i {
                display: inline-block;
                opacity: 0.5;
                margin-top: -2px;
            }
        }
        .button__view-all {
            border-bottom: 1px dotted #5598B4;
            color: #5598B4;
            cursor: pointer;
        }
    }

    .card-box__article-header {
        padding: 16px;
    }
    .card-box__time-date {
        font-size: 11px;
        color: #ababab;
        font-weight: 300;
        &--reverse-color {
            color: rgba(255,255,255, 0.6);
        }
    }

    .cardbox__close {
        position: absolute;
        top: 12px;
        right: 6px;
        z-index: 3;
    }
    .card-box__footer {
        padding: 14px 16px;
        border-top: 1px solid #ccc;
        background-color: #f8f8f8;
        @include border-radius (0 0 2px 2px);
        &--light {
            background-color: white;
        }
    }
    .card-box__full-click {
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        z-index: 2;
    }
}


// Flex grid
// ---------------------------------------------

@mixin flex($grow, $shrink, $basis) {
    -webkit-flex: $grow $shrink $basis;
        -ms-flex: $grow $shrink $basis;
            flex: $grow $shrink $basis;
}

$flex-grid-gap:          16px; // space between items is $flex-grid-gap*2
$flex-grid-box-bg:       white;

// grid

.flex-grid {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    overflow-x: auto;
    .flex-item {
        @include box-sizing(border-box);
        position: relative;

        &.inactive {
            .card-box__header {
                background-color: $main-item-color-inactive;
            }
        }
    }
    &.wrap-items {
        flex-wrap: wrap;
    }
    &.content-center {
        justify-content: center;
    }
    &.two-lines-heading {
        .header {
            min-height: 72px;
        }
    }
    &.box {
        .flex-item {
            margin: $flex-grid-gap;
            background-color: $flex-grid-box-bg;
        }
    }
    // default grid setup (mobile first), calc for 1-6 columns

    &.box.small {
        &-6 {
            .flex-item {
                @include flex(0, 0, calc(16.6666% - #{$flex-grid-gap * 2}));
                max-width: calc(16.6666% - #{$flex-grid-gap * 2});
            }
        }
        &-5 {
            .flex-item {
                @include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
                max-width: calc(20% - #{$flex-grid-gap * 2});
            }
        }
        &-4 {
            .flex-item {
                @include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
                max-width: calc(25% - #{$flex-grid-gap * 2});
            }
        }
        &-3 {
            .flex-item {
                @include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
                max-width: calc(33.3333% - #{$flex-grid-gap * 2});
            }
        }
        &-2 {
            .flex-item {
                @include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
                max-width: calc(50% - #{$flex-grid-gap * 2});
            }
        }
        &-1 {
            .flex-item {
                @include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
                max-width: calc(100% - #{$flex-grid-gap * 2});
            }
        }
    }
    &.small {
        &-6 {
            .flex-item {
                @include flex(0, 0, 16.6666%);
                max-width: 16.6666%;
            }
        }
        &-5 {
            .flex-item {
                @include flex(0, 0, 20%);
                max-width: 20%;
            }
        }
        &-4 {
            .flex-item {
                @include flex(0, 0, 25%);
                max-width: 25%;
            }
        }
        &-3 {
            .flex-item {
                @include flex(0, 0, 33.3333%);
                max-width: 33.3333%;
            }
        }
        &-2 {
            .flex-item {
                @include flex(0, 0, 50%);
                max-width: 50%;
            }
        }
        &-1 {
            .flex-item {
                @include flex(0, 0, 100%);
                max-width: 100%;
            }
        }
    }
}

// medium screen media query /40em = 640px/
@media only screen and (min-width: 40em) {
    .flex-grid {
        &.box.medium {
            &-6 {
                .flex-item {
                    @include flex(0, 0, calc(16.6666% - #{$flex-grid-gap * 2}));
                    max-width: calc(16.6666% - #{$flex-grid-gap * 2});
                }
            }
            &-5 {
                .flex-item {
                    @include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
                    max-width: calc(20% - #{$flex-grid-gap * 2});
                }
            }
            &-4 {
                .flex-item {
                    @include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
                    max-width: calc(25% - #{$flex-grid-gap * 2});
                }
            }
            &-3 {
                .flex-item {
                    @include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
                    max-width: calc(33.3333% - #{$flex-grid-gap * 2});
                }
            }
            &-2 {
                .flex-item {
                    @include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
                    max-width: calc(50% - #{$flex-grid-gap * 2});
                }
            }
            &-1 {
                .flex-item {
                    @include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
                    max-width: calc(100% - #{$flex-grid-gap * 2});
                }
            }
        }
        &.medium {
            &-6 {
                .flex-item {
                    @include flex(0, 0, 16.6666%);
                    max-width: 16.6666%;
                }
            }
            &-5 {
                .flex-item {
                    @include flex(0, 0, 20%);
                    max-width: 20%;
                }
            }
            &-4 {
                .flex-item {
                    @include flex(0, 0, 25%);
                    max-width: 25%;
                }
            }
            &-3 {
                .flex-item {
                    @include flex(0, 0, 33.3333%);
                    max-width: 33.3333%;
                }
            }
            &-2 {
                .flex-item {
                    @include flex(0, 0, 50%);
                    max-width: 50%;
                }
            }
            &-1 {
                .flex-item {
                    @include flex(0, 0, 100%);
                    max-width: 100%;
                }
            }
        }
    }
}
// large screen media query /60em = 960px/
@media only screen and (min-width: 60em) {
    .flex-grid {
        &.box.large {
            &-6 {
                .flex-item {
                    @include flex(0, 0, calc(16.6666% - #{$flex-grid-gap * 2}));
                    max-width: calc(16.6666% - #{$flex-grid-gap * 2});
                }
            }
            &-5 {
                .flex-item {
                    @include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
                    max-width: calc(20% - #{$flex-grid-gap * 2});
                }
            }
            &-4 {
                .flex-item {
                    @include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
                    max-width: calc(25% - #{$flex-grid-gap * 2});
                }
            }
            &-3 {
                .flex-item {
                    @include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
                    max-width: calc(33.3333% - #{$flex-grid-gap * 2});
                }
            }
            &-2 {
                .flex-item {
                    @include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
                    max-width: calc(50% - #{$flex-grid-gap * 2});
                }
            }
            &-1 {
                .flex-item {
                    @include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
                    max-width: calc(100% - #{$flex-grid-gap * 2});
                }
            }
        }
        &.large {
            &-6 {
                .flex-item {
                    @include flex(0, 0, 16.6666%);
                    max-width: 16.6666%;
                }
            }
            &-5 {
                .flex-item {
                    @include flex(0, 0, 20%);
                    max-width: 20%;
                }
            }
            &-4 {
                .flex-item {
                    @include flex(0, 0, 25%);
                    max-width: 25%;
                }
            }
            &-3 {
                .flex-item {
                    @include flex(0, 0, 33.3333%);
                    max-width: 33.3333%;
                }
            }
            &-2 {
                .flex-item {
                    @include flex(0, 0, 50%);
                    max-width: 50%;
                }
            }
            &-1 {
                .flex-item {
                    @include flex(0, 0, 100%);
                    max-width: 100%;
                }
            }
        }
    }
}
// extra large screen media query /100em = 1600px/
@media only screen and (min-width: 100em) {
    .flex-grid {
        &.box.xlarge {
            &-6 {
                .flex-item {
                    @include flex(0, 0, calc(16.6666% - #{$flex-grid-gap*2}));
                    max-width: calc(16.6666% - #{$flex-grid-gap * 2});
                }
            }
            &-5 {
                .flex-item {
                    @include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
                    max-width: calc(20% - #{$flex-grid-gap * 2});
                }
            }
            &-4 {
                .flex-item {
                    @include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
                    max-width: calc(25% - #{$flex-grid-gap * 2});
                }
            }
            &-3 {
                .flex-item {
                    @include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
                    max-width: calc(33.3333% - #{$flex-grid-gap * 2});
                }
            }
            &-2 {
                .flex-item {
                    @include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
                    max-width: calc(50% - #{$flex-grid-gap * 2});
                }
            }
            &-1 {
                .flex-item {
                    @include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
                    max-width: calc(100% - #{$flex-grid-gap * 2});
                }
            }
        }
        &.xlarge {
            &-6 {
                .flex-item {
                    @include flex(0, 0, 16.6666%);
                    max-width: 16.6666%;
                }
            }
            &-5 {
                .flex-item {
                    @include flex(0, 0, 20%);
                    max-width: 20%;
                }
            }
            &-4 {
                .flex-item {
                    @include flex(0, 0, 25%);
                    max-width: 25%;
                }
            }
            &-3 {
                .flex-item {
                    @include flex(0, 0, 33.3333%);
                    max-width: 33.3333%;
                }
            }
            &-2 {
                .flex-item {
                    @include flex(0, 0, 50%);
                    max-width: 50%;
                }
            }
            &-1 {
                .flex-item {
                    @include flex(0, 0, 100%);
                    max-width: 100%;
                }
            }
        }
    }
}

// PREPARE MODAL FOR PRINT
body.prepare-print {
    margin-left: 1.5cm;
    margin-right: 1.5cm;

    background: none! important;
    overflow: visible !important;
    color: black;
    > * {
        display: none !important;
    }
    > .modal--fullscreen {
        position: static !important;
        display: block !important;
        width: 100%;
        margin: 0; padding: 0;
        background: none;
        .modal-dialog {
            display: block !important;
        }
        .association {
            margin-bottom: 16px !important;
        }
        p {
            font-size: 9pt !important;
            line-height: 140% !important;
            margin-bottom: 12px !important;
        }
        h2 {
            font-size: 13pt !important;
        }
        h3 {
            font-size: 10pt !important;
        }
        .headline {
            font-size: 16pt !important;
            margin-bottom: 16px !important;
        }
        .modal__body {
            display: block !important;
            padding: 0 !important;
        }
        .modal-content {
            display: block !important;
            > * {
                display: none !important;
            }
            .byline {
                font-size: 10pt !important;
                margin-bottom: 20px !important;
            }
            > .modal-body {
                display: block !important;
                padding: 0 !important;
            }
            .preview-content {
                max-width: 100% !important;
            }
            .metadata {
                margin-top: 0 !important;
                margin-bottom: 15px !important;
                > div {
                    margin-bottom: 0 !important;
                }
                .preview-label label {
                    color: black;
                }
                .preview-data span {
                    border-radius: 0 !important;
                    background-color: transparent !important;
                    border-right: 1px solid black;
                    &:last-of-type {
                        border-right: 0 !important;
                    }
                }
            }
        }
    }
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;

    &.active {
        width: 100%;
        height: 100%;
        background: #fff url('~images/loading-large.gif') no-repeat center;
        z-index: 1000;
        opacity: 0.5;
    }
}

.tab-box {
    display: flex;
    padding-bottom: 20px;

    &__item {
        flex: 1;
        font-size: 11px;
        font-weight: 500;
        line-height: 33px;
        text-transform: uppercase;
        color: $gray;
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid #c2c2c2;
        border-right: 1px solid #c2c2c2;

        &:last-of-type {
            border-right: 0;
        }

        &--active {
            color: $sd-blue;
            border-top: 1px solid #c2c2c2;
            border-bottom: 0;
        }
    }
}

.loading-overlay-for-tree-dot{
    position: relative;

    &.active {
        background: url('~images/three-dots-white.svg') no-repeat center;
        opacity: 0.5;
        text-indent: -9999px;
        background-size: 20%;
    }
}

// Fix for height on master desk panel
.sd-content-wrapper__main-content-area {
    grid-column: contentArea;
    overflow: auto;
    height: calc(100vh - 80px);
}

.sd-main-content-grid__content-inner {
    height: 100%;
}

// Things for masterdesk, should be moved to ui-framework
.sd-main-content-grid__preview {
    .search-box {
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
    }
    .content-list-holder {
        display: contents;
    }
}