@import "../styles/bootstrap5/scss/bootstrap";

$PrioColor1:        #4caf50 !default;
$PrioColor2:        #3f51b5 !default;
$PrioColor3:        #ff0000 !default;
$PrioColor4:        #cc0000 !default;
$PrioColor5:        #e8ffdd !default;
$OnHoldColor:       #f6f600 !default;
$PrioColorClosed:   #d3d3d3 !default;
$PrioColorDone:     #f3f3f3 !default;
$PrioColorAnswered:     transparent!default;
$PrioColorWaiting:    transparent!default;
$PrioColorNew:    transparent !default;
$NewButtonFrameColor: transparent !default;
$color-intern:      #e2e3e5 !default;
$color-extern:      #e2e3e5 !default;
$color-text-intern:      #000000 !default;
$color-text-extern:      #000000 !default;
$ImportantEventColor: #ff0000 !default;

#navbar {
    /*width: 1700px;*/
}

.textboxerror{
    border-style: solid;
    border-color: red;
}

.hm-avatar{
    width: 100px;
    height:100px;
    border-radius: 50%;
    margin: 0 auto;
    vertical-align: middle;
}
.hm-avatar-big{
    border-radius: 50%;
    border: 3px solid white;
    display: inline-block;
    height:200px;
    width: 200px;
    margin: 0 auto;
    vertical-align: middle;
}

.hm-avatar-small{
    width: 16px;
    height:16px;
    border-radius: 50%;
    margin: 0 auto;
    vertical-align: middle;
}

.hm-avatar-medium{
    width: 40px;
    height:40px;
    border-radius: 50%;
    margin: 0 auto;
    vertical-align: middle;
    margin: 3px;
}

.hm-avatar-medium-2{
    width: 40px;
    height:40px;
    border-radius: 50%;
    margin: 0 auto;
    vertical-align: middle;
}

/** Multilevel Menu Quelle: https://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 **/
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100% !important;
    margin-top: 0px !important;
    margin-left: -1px !important;
    -webkit-border-radius: 0 6px 6px 6px !important;
    -moz-border-radius: 0 6px 6px !important;
    border-radius: 0 6px 6px 6px !important;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}



.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/* Zeilen im Menu schmaler*/
.dropdown-menu li {
    line-height: 0.6em;
}

    /* Menu ende */
    /*custom fcs*/
    .navbar-brand > img {
        display: block;
        height: 32px;
    }

    .navbar-brand {
        padding: 10px 15px !important;
    }


    .container {
        width: 1600px;
    }
    // https://stackoverflow.com/a/20548578
    .vcenter {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
    /*Breite Modals */
    .modal.modal-wide .modal-dialog {
        width: 90%;
    }

    .modal-wide .modal-body {
        overflow-y: auto;
    }
    /* form labels nach links*/
    .form-horizontal.form-label-left .control-label {
        text-align: left;
        margin-bottom: 0;
        padding-top: 7px; // Default padding plus a border
    }
    /* mindestbreite auf bildschirm */
    @media (min-width: 1200px) {
        .container-fluid {
            min-width: 1350px;
        }
    }


    .horizontalJustifiedList {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }
    // Core variables and mixins
    @import "_bootstrap";
    /*!
 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
 */

    body {
        overflow-x: hidden;
    }


    #wrapper {
        padding-left: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #sidebar-wrapper {
        z-index: 1000;
        position: fixed;
        left: 250px;
        width: 0;
        height: 100%;
        margin-left: -250px;
        overflow-y: auto;
        background: #000;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }

    #page-content-wrapper {
        width: 100%;
        position: absolute;
        padding: 15px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    /* Sidebar Styles */

    .sidebar-nav {
        position: absolute;
        top: 0;
        width: 250px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #999999;
    }

    .sidebar-nav li a:hover {
        text-decoration: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
    }

    .sidebar-nav li a:active, .sidebar-nav li a:focus {
        text-decoration: none;
    }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

    .sidebar-nav > .sidebar-brand a {
        color: #999999;
    }

    .sidebar-nav > .sidebar-brand a:hover {
        color: #fff;
        background: none;
    }

    @media(min-width:768px) {
        #wrapper {
            padding-left: 0;
        }

        #wrapper.toggled {
            padding-left: 250px;
        }

        #sidebar-wrapper {
            width: 0;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 250px;
        }

        #page-content-wrapper {
            padding: 20px;
            position: relative;
        }

        #wrapper.toggled #page-content-wrapper {
            position: relative;
            margin-right: 0;
        }
    }
    /* Ticketliste */
    /*
.listview tbody tr td.prio1, .prio1 {background:$PrioColor1 !important;}
.listview tbody tr td.prio2, .prio2 {background:$PrioColor2 !important;}
.listview tbody tr td.prio3, .prio3 {background:$PrioColor3 !important;}
.listview tbody tr td.prio4, .prio4 {background:$PrioColor4 !important;color:#FFF;}
.listview tbody tr td.onhold, .onhold {background:$OnHoldColor !important;}
.listview tbody tr td.prioclosed, .prioclosed {background:$PrioColorClosed !important;}
.listview tbody tr td.priodone, .priodone {background:$PrioColorDone !important;}
.redText{color:red;}
*/

    .listview tbody tr td.prio1, .prio1 {
        border-color: currentColor;
        padding: 5px;
        color: $PrioColor1;
        font-weight: bold;
        background-color: transparent;
        border: 1px solid $PrioColor1;
    }

    .prio1.legend {
        border-radius: 9px;
    }

    .listview tbody tr td.prio2, .prio2 {
        color: $PrioColor2;
        padding: 5px;
        font-weight: bold;
        background-color: transparent;
        border: 1px solid $PrioColor2;
    }

    .prio2.legend {
        border-radius: 9px;
    }

    .listview tbody tr td.prio3, .prio3 {
        color: $PrioColor3;
        padding: 5px;
        font-weight: bold;
        background-color: transparent;
        border: 1px solid $PrioColor3;
    }

    .prio3.legend {
        border-radius: 9px;
    }

    .listview tbody tr td.prio4, .prio4 {
        color: $PrioColor4;
        padding: 5px;
        font-weight: bold;
        background-color: transparent;
        border: 1px solid $PrioColor4;
    }

    .prio4.legend {
        border-radius: 9px;
    }

    .listview tbody tr td.onhold, .onhold {
        background: $OnHoldColor !important;
    }

    .listview tbody tr td.prioanswered, .prioanswered {
        background-color: $PrioColorAnswered !important;
    }

    .listview tbody tr td.prionew, .prionew {
        background-color: $PrioColorNew !important;
    }

    .listview tbody tr td.priowaiting, .priowaiting {
        background-color: $PrioColorWaiting !important;
    }

    .listview tbody tr td.prioclosed, .prioclosed {
        background: $PrioColorClosed !important;
    }

    .listview tbody tr td.priodone, .priodone {
        background: $PrioColorDone !important;
    }

    .redText {
        color: red;
    }
    /* ESCALATION */
    .escalation {
        height: 16px;
        width: 88px;
        background: transparent url(../../images/escalation.png) no-repeat left top;
        display: inline-block;
        margin-top: 7px;
    }

    .estep1 {
        background-position: 0 -16px;
    }

    .estep2 {
        background-position: 0 -32px;
    }

    .estep3 {
        background-position: 0 -48px;
    }

    .estep4 {
        background-position: 0 -64px;
    }

    .estep5 {
        background-position: 0 -80px;
    }

    .importantbackground {
        background-color: $ImportantEventColor !important;
    }
    /*Footer : https://stackoverflow.com/a/20658161*/
    .footer_fixed {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    html {
        height: 100%;
    }

    #content-wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by its height */
        margin: 0 auto -60px;
        /* Pad bottom by footer height */
        padding: 0 0 60px;
    }

    .footer_bottom {
        width: 100%;
        bottom: 0;
    }
    /*Footer ende */
    .panel-title-fcs {
        margin-top: 0;
        margin-bottom: 0;
        color: inherit;

        > a,
        > small,
        > .small,
        > small > a,
        > .small > a {
            color: inherit;
        }
    }
    /* inline form mit ein bisschchen abstand*/
    .fcs-form-padding > div {
        padding-right: 1em;
        padding-bottom: 1em;
    }


    .panel-fcs-content {
        @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
        /* oder primary? */
        //    @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
    }

    .panel-fcs-border {
        //    @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
        /* oder primary? */
        @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
        border: 0px;
    }



    .panel-fcs-content > .panel-heading .btn-default {
        border: 1px solid #6c757d;
    }

    .panel-info > .panel-heading .btn-default {
        border: 1px solid #6c757d;
    }

    .btn-info {
        border-color: currentColor;
        color: $btn-info-bg;
        background-color: transparent;
        border: 1px solid $btn-info-bg;
    }
    /*
body {
  background-color: $body-bg; 
}
*/

    $FCSBorderHeaderColor: #f5f5f5 !default;
    $FCSBorderBackgroundColor: $body-bg; //#fff !default;

    $FCSContentHeaderColor: #e2e3e5 !default;
    $FCSPanelBorderColor: $FCSContentHeaderColor !default;
    $FCSPanelFontColor: darken($FCSContentHeaderColor, 90%) !default;
    $FCSContentHeaderTextColor: #000000 !default;

    $FCSContentBackgroundColor: #fff !default;


    $navbar-default-bg: #fff !default;

    $sidemenu-default-bg: #2d2d2d !default;

    $sidemenu-default-link-color: #9f9f9f !default;


    .panel-fcs-border > .panel-heading, .panel-fcs-border > .panel-footer {
        color: #333;
        padding-top: 35px;
        background-color: $FCSBorderHeaderColor;
        border-color: #ccc;
    }

    .panel-fcs-content > .panel-heading, .panel-fcs-content > .panel-footer {
        color: $FCSContentHeaderTextColor;
        background-color: $FCSContentHeaderColor;
        border-color: $FCSPanelBorderColor;
    }

    .panel-fcs-content {
        border-color: $FCSPanelBorderColor;
        background-color: $FCSContentBackgroundColor;
    }

    .panel-info > .panel-heading, .panel-info > .panel-footer {
        color: $FCSContentHeaderTextColor;
        background-color: $FCSContentHeaderColor;
        border-color: $FCSPanelBorderColor;
    }

    .panel-fcs-content > .panel-heading a:not(.btn) {
        color: #333;
    }

    .panel-info > .panel-heading a {
        color: $FCSContentHeaderTextColor;
    }

    .panel-info {
        border-color: $FCSPanelBorderColor;
        background-color: $FCSContentBackgroundColor;
    }

    .panel-info > .panel-heading + .panel-collapse > .panel-body {
        border-top-color: $FCSPanelBorderColor;
    }

    .panel-fcs-content > .panel-heading + .panel-collapse > .panel-body {
        border-top-color: $FCSPanelBorderColor;
    }

    .navbar-default {
        background-color: $navbar-default-bg;
        border-bottom-color: #273823;
    }


    #msb, .msb > .navbar-default {
        background-color: $sidemenu-default-bg !important;
    }

    #pinMenu, .msb .navbar-nav li a {
        color: $sidemenu-default-link-color !important;
    }


    .panel-fcs-border > .panel-body {
        min-height: 100%;
    }
    /* Text nur bei bestimmten größen nach links oder rechts ausrichten 
Quelle: https://github.com/twbs/bootstrap/issues/11292
*/
    .text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
        text-align: left;
    }

    .text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
        text-align: center;
    }

    .text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
        text-align: right;
    }

    .text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
        text-align: justify;
    }

    @media (max-width: 767px) {
        .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
            text-align: inherit;
        }

        .text-left-xs {
            text-align: left;
        }

        .text-center-xs {
            text-align: center;
        }

        .text-right-xs {
            text-align: right;
        }

        .text-justify-xs {
            text-align: justify;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
            text-align: inherit;
        }

        .text-left-sm {
            text-align: left;
        }

        .text-center-sm {
            text-align: center;
        }

        .text-right-sm {
            text-align: right;
        }

        .text-justify-sm {
            text-align: justify;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
            text-align: inherit;
        }

        .text-left-md {
            text-align: left;
        }

        .text-center-md {
            text-align: center;
        }

        .text-right-md {
            text-align: right;
        }

        .text-justify-md {
            text-align: justify;
        }
    }

    @media (min-width: 1200px) {
        .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
            text-align: inherit;
        }

        .text-left-lg {
            text-align: left;
        }

        .text-center-lg {
            text-align: center;
        }

        .text-right-lg {
            text-align: right;
        }

        .text-justify-lg {
            text-align: justify;
        }
    }
    /* Service form - change the table header*/

    #serviceTable th {
        text-align: center;
        background-color: $brand-primary;
        color: white;
    }
    /*Loading spinner Quelle: https://www.bootply.com/128062 */
    .glyphicon-refresh-animate {
        -animation: spin .7s infinite linear;
        -webkit-animation: spin2 .7s infinite linear;
    }

    @-webkit-keyframes spin2 {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        from {
            transform: scale(1) rotate(0deg);
        }

        to {
            transform: scale(1) rotate(360deg);
        }
    }
    /* Required Symbol bei Pflichtfeldern:*/
    .form-group.required .control-label:after {
        content: "*";
        color: red;
    }
    /* Neue Seitenaufteilung FCS */
    .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    .panel-fcs-border {
        border: 0px;
        border-radius: 0px;
        background-color: $FCSBorderBackgroundColor;
    }

    .navbar {
        /*margin-bottom: 20px;*/
        margin-bottom: 0px;
    }

    #TicketRightPanel, #TicketDataLeft, #TicketDataRight {
        .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
            width: 100%;
        }
    }
    /* Damit die select2-container an die BS input-group passen */
    .select2-container .select2-selection--single {
        height: 30px !important;
    }
    /* Buttons Ticketdetails*/

    #TicketRightPanel #TicketActions:not(.btnasicon) .btn, #TicketRightPanel #TicketActions:not(.btnasicon) .btn-group,
    #TicketDataRight #TicketActions:not(.btnasicon) .btn, #TicketDataRight #TicketActions:not(.btnasicon) .btn-group,
    #TicketDataLeft #TicketActions:not(.btnasicon) .btn, #TicketDataLeft #TicketActions:not(.btnasicon) .btn-group {
        margin-bottom: 10px;
        width: 100%;
    }

    .ui-widget {
        z-index: 10 !important;
    }
    /* Icons blasser machen */
    .glyphicon {
        opacity: 0.7;
    }
    /*WYSIWYG-Editor Breite*/
    .sceditor-container {
        width: 100% !important;
    }
    /* Auf der Startseite ein bischen Abstand zu den Rändern */
    .StartPageContent {
        padding: 0 20px;
    }

    #DropzoneField {
        cursor: pointer;
    }
    /*Überlauf in der ticketansicht*/
    .TicketContent {
        word-wrap: break-word;
    }
    /*Keine zusätzlichen Leerzeilen im <pre>-Block*/
    .TicketContent pre {
        white-space: nowrap;
    }
    /**Serviceauswahlliste**/

    .ServiceSelectListItem .ServiceLvlTitle {
        float: right;
    }

    .ServiceSelectListItem .ServiceDescr {
        clear: right;
        display: block;
        color: grey;
    }

    .ServiceSelectListItem .ServiceRisks {
        clear: right;
        display: block;
        color: grey;
    }

    .select2-results__option--highlighted .ServiceDescr {
        color: lightgrey;
    }

    .select2-results__option--highlighted .ServiceRisks {
        color: lightgrey;
    }
    /** Button-Groups mit Margin beim umbruch **/
    .btn-withMargin .btn {
        margin-bottom: 5px;
    }
    /** SCEditor (WYSIWYG-iframe-Style (used for body,code:before,html,p,table))) **/

    .WYSIWYG-iframe-Style {
        margin: 0;
        padding: 0;
        font-family: $font-family-sans-serif;
        font-size: 14px;
        color: #555
    }
    /** Block-Grid**/

    [class*="block-grid-"] {
        display: block;
        padding: 0;
        margin: 0 -0.625rem;
        *zoom: 1;
    }

    [class*="block-grid-"]:before, [class*="block-grid-"]:after {
        content: " ";
        display: table;
    }

    [class*="block-grid-"]:after {
        clear: both;
    }

    [class*="block-grid-"] > li {
        display: inline;
        height: auto;
        float: left;
        padding: 0 0.625rem 1.25rem;
    }

    @media only screen {
        .small-block-grid-1 > li {
            width: 100%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-1 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-1 > li:nth-of-type(1n+1) {
            clear: both;
        }

        .small-block-grid-2 > li {
            width: 50%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-2 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-2 > li:nth-of-type(2n+1) {
            clear: both;
        }

        .small-block-grid-3 > li {
            width: 33.33333%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-3 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-3 > li:nth-of-type(3n+1) {
            clear: both;
        }

        .small-block-grid-4 > li {
            width: 25%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-4 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-4 > li:nth-of-type(4n+1) {
            clear: both;
        }

        .small-block-grid-5 > li {
            width: 20%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-5 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-5 > li:nth-of-type(5n+1) {
            clear: both;
        }

        .small-block-grid-6 > li {
            width: 16.66667%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-6 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-6 > li:nth-of-type(6n+1) {
            clear: both;
        }

        .small-block-grid-7 > li {
            width: 14.28571%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-7 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-7 > li:nth-of-type(7n+1) {
            clear: both;
        }

        .small-block-grid-8 > li {
            width: 12.5%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-8 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-8 > li:nth-of-type(8n+1) {
            clear: both;
        }

        .small-block-grid-9 > li {
            width: 11.11111%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-9 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-9 > li:nth-of-type(9n+1) {
            clear: both;
        }

        .small-block-grid-10 > li {
            width: 10%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-10 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-10 > li:nth-of-type(10n+1) {
            clear: both;
        }

        .small-block-grid-11 > li {
            width: 9.09091%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-11 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-11 > li:nth-of-type(11n+1) {
            clear: both;
        }

        .small-block-grid-12 > li {
            width: 8.33333%;
            padding: 0 0.625rem 1.25rem;
        }

        .small-block-grid-12 > li:nth-of-type(n) {
            clear: none;
        }

        .small-block-grid-12 > li:nth-of-type(12n+1) {
            clear: both;
        }
    }

    @media only screen and (min-width: 40.063em) {
        .medium-block-grid-1 > li {
            width: 100%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-1 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-1 > li:nth-of-type(1n+1) {
            clear: both;
        }

        .medium-block-grid-2 > li {
            width: 50%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-2 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-2 > li:nth-of-type(2n+1) {
            clear: both;
        }

        .medium-block-grid-3 > li {
            width: 33.33333%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-3 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-3 > li:nth-of-type(3n+1) {
            clear: both;
        }

        .medium-block-grid-4 > li {
            width: 25%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-4 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-4 > li:nth-of-type(4n+1) {
            clear: both;
        }

        .medium-block-grid-5 > li {
            width: 20%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-5 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-5 > li:nth-of-type(5n+1) {
            clear: both;
        }

        .medium-block-grid-6 > li {
            width: 16.66667%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-6 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-6 > li:nth-of-type(6n+1) {
            clear: both;
        }

        .medium-block-grid-7 > li {
            width: 14.28571%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-7 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-7 > li:nth-of-type(7n+1) {
            clear: both;
        }

        .medium-block-grid-8 > li {
            width: 12.5%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-8 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-8 > li:nth-of-type(8n+1) {
            clear: both;
        }

        .medium-block-grid-9 > li {
            width: 11.11111%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-9 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-9 > li:nth-of-type(9n+1) {
            clear: both;
        }

        .medium-block-grid-10 > li {
            width: 10%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-10 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-10 > li:nth-of-type(10n+1) {
            clear: both;
        }

        .medium-block-grid-11 > li {
            width: 9.09091%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-11 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-11 > li:nth-of-type(11n+1) {
            clear: both;
        }

        .medium-block-grid-12 > li {
            width: 8.33333%;
            padding: 0 0.625rem 1.25rem;
        }

        .medium-block-grid-12 > li:nth-of-type(n) {
            clear: none;
        }

        .medium-block-grid-12 > li:nth-of-type(12n+1) {
            clear: both;
        }
    }

    @media only screen and (min-width: 64.063em) {
        .large-block-grid-1 > li {
            width: 100%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-1 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-1 > li:nth-of-type(1n+1) {
            clear: both;
        }

        .large-block-grid-2 > li {
            width: 50%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-2 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-2 > li:nth-of-type(2n+1) {
            clear: both;
        }

        .large-block-grid-3 > li {
            width: 33.33333%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-3 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-3 > li:nth-of-type(3n+1) {
            clear: both;
        }

        .large-block-grid-4 > li {
            width: 25%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-4 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-4 > li:nth-of-type(4n+1) {
            clear: both;
        }

        .large-block-grid-5 > li {
            width: 20%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-5 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-5 > li:nth-of-type(5n+1) {
            clear: both;
        }

        .large-block-grid-6 > li {
            width: 16.66667%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-6 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-6 > li:nth-of-type(6n+1) {
            clear: both;
        }

        .large-block-grid-7 > li {
            width: 14.28571%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-7 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-7 > li:nth-of-type(7n+1) {
            clear: both;
        }

        .large-block-grid-8 > li {
            width: 12.5%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-8 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-8 > li:nth-of-type(8n+1) {
            clear: both;
        }

        .large-block-grid-9 > li {
            width: 11.11111%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-9 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-9 > li:nth-of-type(9n+1) {
            clear: both;
        }

        .large-block-grid-10 > li {
            width: 10%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-10 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-10 > li:nth-of-type(10n+1) {
            clear: both;
        }

        .large-block-grid-11 > li {
            width: 9.09091%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-11 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-11 > li:nth-of-type(11n+1) {
            clear: both;
        }

        .large-block-grid-12 > li {
            width: 8.33333%;
            padding: 0 0.625rem 1.25rem;
        }

        .large-block-grid-12 > li:nth-of-type(n) {
            clear: none;
        }

        .large-block-grid-12 > li:nth-of-type(12n+1) {
            clear: both;
        }
    }
    /* Kategorien mit langem Titel in der Kategorieauswahl korrekt anzeigen*/
    #CatTree .fancytree-title {
        white-space: break-spaces;
    }
    /* Mail2Ticket-Bilder laufen in der Ticketdetailansicht aus dem Rahmen */
    #TicketDescrPanel img {
        max-width: 100%;
        height: auto;
    }


    .btn-primary {
        @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
        background-color: transparent;
        color: #3f51b5;

        &:active,
        &.active, {
            background-color: darken($btn-primary-bg, 40%)
        }
    }
    // Success appears as green
    .btn-success {
        @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
        background-color: transparent;
        color: $btn-success-bg;

        &:active,
        &.active, {
            background-color: darken($btn-success-bg, 40%)
        }
    }




    .btn-success-full {
        @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
        background-color: $btn-success-bg;
        color: #fff;

        &:active,
        &.active, {
            background-color: darken($btn-success-bg, 40%)
        }
    }

    .btn-default {
        @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
        background-color: transparent;
        color: $btn-default-color;

        &:active,
        &.active, {
            background-color: darken($btn-default-bg, 40%);
            color: white !important;
        }
    }

    .extern .panel-heading {
        background-color: $color-extern;
        color: $color-text-extern;
    }

    .intern .panel-heading {
        background-color: $color-intern;
        color: $color-text-intern;
    }

    @import "fontawesome_scss/fontawesome.scss";
    @import "fontawesome_scss/regular.scss";
    @import "fontawesome_scss/solid.scss";

    .img-circular-event {
        width: 30px;
        height: 30px;
        background-image: url('index.php?module=upload&class=download&event=ShowImage&name=standard_avatar.jpg');
        background-size: cover;
        display: inline-block;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        margin: 3px;
        margin-bottom: -8px;
    }

    .img-circular {
        width: 40px;
        height: 40px;
        background-image: url('index.php?module=upload&class=download&event=ShowImage&name=Medium_standard_avatar.jpg');
        background-size: cover;
        display: inline-block;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        vertical-align: middle;
        margin: 3px;
    }

    .img-circular-small {
        width: 16px;
        height: 16px;
        background-image: url('index.php?module=upload&class=download&event=ShowImage&name=Small_standard_avatar.jpg');
        background-size: cover;
        display: inline-block;
        margin-bottom: -2px;
        display: inline;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        margin: 3px;
    }


    .img-circular-group-medium {
        width: 40px;
        height: 40px;
        background-image: url('index.php?module=upload&class=download&event=ShowImage&name=Medium_standard_avatar.jpg');
        background-size: cover;
        display: inline-block;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        vertical-align: middle;
        margin: 3px;
    }

    .img-circular-group {
        width: 16px;
        height: 16px;
        background-image: url('index.php?module=upload&class=download&event=ShowImage&name=Small_standard_avatar.jpg');
        background-size: cover;
        display: inline-block;
        margin-bottom: -2px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        vertical-align: middle;
        margin: 3px;
    }
    /*Resize-Option für Select2-Inhalte unterbinden*/
    textarea[class^="select2"] {
        resize: none;
    }
