/* Minification failed. Returning unminified contents.
(1349,28): run-time error CSS1039: Token not allowed after unary operator: '-background'
(2475,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(2541,24): run-time error CSS1039: Token not allowed after unary operator: '-action'
(2618,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(2733,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(2837,21): run-time error CSS1039: Token not allowed after unary operator: '-action'
(2838,32): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3158,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3164,24): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3168,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3176,21): run-time error CSS1039: Token not allowed after unary operator: '-text'
(3177,32): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3189,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3229,17): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3243,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(3262,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(3266,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(3324,30): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3333,17): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(3337,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3364,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3369,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3375,17): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(3414,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3420,17): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(3427,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3477,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3485,28): run-time error CSS1039: Token not allowed after unary operator: '-text'
(3502,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3506,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3512,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3517,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3526,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3533,28): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3548,17): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(3561,17): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(3562,35): run-time error CSS1039: Token not allowed after unary operator: '-action'
(3575,17): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(4081,17): run-time error CSS1039: Token not allowed after unary operator: '-text'
(5092,22): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(5108,54): run-time error CSS1039: Token not allowed after unary operator: '-menu'
(5125,54): run-time error CSS1039: Token not allowed after unary operator: '-menu'
 */
.btn {
    -webkit-transition: none;
    transition: none;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

tr th:last-child, tr td:last-child {
    text-align: center;
}

[ng-drag].dragging + .drag-placeholder-plugin{
    background-color: lightgray;
    min-height: 170px;
    max-height: 170px;
    height: 170px;
    min-width: 250px;
    max-width: 250px;
    width: 250px;
    position: relative;
    margin: 0px 10px 19px 10px;
    display: inline-block;
}

[ng-drag].dragging + .drag-placeholder-subplugin{
    background-color: lightgray;
    min-height: 120px;
    max-height: 120px;
    height: 120px;
    min-width: 125px;
    max-width: 125px;
    width: 125px;
    position: relative;
    margin: 0px 10px 19px 10px;
    display: inline-block;
}

.btn-icon-acl {
    width: 45px;
    position: inherit !important;
}
.animate-repeat {
  line-height:200px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:200px;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:200px;
}

.slideDown.ng-hide-remove,
.slideDown.ng-hide-add {
  /* remember, the .hg-hide class is added to element
  when the active class is added causing it to appear
  as hidden. Therefore set the styling to display=block
  so that the hide animation is visible */

}


.slideDown.ng-hide-add {
  animation-name: hide;
  -webkit-animation-name: hide;

  animation-duration: .5s;
  -webkit-animation-duration: .5s;

  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

@keyframes hide {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  5%{
    transform: translateY(-5%);
    opacity: 0.1;
  }
  100%{
    transform: translateY(-100%);
    opacity: 0;
  }
}

@-webkit-keyframes hide {
  0% {
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
  5%{
    -webkit-transform: translateY(-5%);
    opacity: 0.1;
  }
  100%{
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
}

.slideDown.ng-hide-remove {
  animation-name: show;
  -webkit-animation-name: show;

  animation-duration: .5s;
  -webkit-animation-duration: .5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}

@keyframes show {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  95%{
    transform: translateY(-5%);
    opacity: 0.9;
  }
  100%{
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes show {
  0% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
  95%{
    -webkit-transform: translateY(-5%);
    opacity: 0.9;
  }
  100%{
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
}
.apig-authentication {
    min-height: 150px;
}

.apig-authentication .ui-select-choices-group {
    max-height: 104px;
}

h4, .h4, h5, .h5, h6, .h6 {
    margin-bottom: 13px;
}

.freshwidget-theme {
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .025em !important;
}

.freshwidget-dialog {
    height: 100% !important;
    top: 10px !important;
}

body [ng-table-pagination], body [data-ng-table-pagination] {
    padding: 15px 5px 5px 5px !important;
}

.mr-tile {
    margin-right: -3px !important;
}

.ng-table th div {
    padding: 0 !important;
}

.ng-table .ng-table-filters > th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding: 10px !important;
}

.ng-table th.sortable div {
    padding-left: 25px !important;
}

.btn-group > .btn-default:hover,
.btn-group-vertical > .btn-default:hover,
.btn-group > .btn-default:focus,
.btn-group-vertical > .btn-default:focus,
.btn-group > .btn-default:active,
.btn-group-vertical > .btn-default:active,
.btn-group > .btn-default.active,
.btn-group-vertical > .btn-default.active {
    background-color: #f5f5f5;
}

.topnavbar > .navbar-header > .navbar-brand {
    color: #fff !important;
}

.panel.panel-store .selected {
    background-color: #ffffff;
    -ms-opacity: 0.2;
    opacity: 0.2;
}

.mfb-component__button--main, .mfb-component__button--child {
    color: white;
    background-color: #E20059;
    height: 50px;
    width: 50px;
}

.mfb-component__wrap {
    margin: 0;
    padding: 0;
    height: 50px;
    width: 50px;
}

    .mfb-component__wrap > a {
        margin: 0;
        padding: 0;
        height: 50px;
        width: 50px;
        z-index: 2000;
    }

.mfb-component__list > li {
    height: 49px;
    width: 49px;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 1900;
}

    .mfb-component__list > li > a {
        height: 49px;
        width: 49px;
    }

.mfb-component__icon, .mfb-component__main-icon--active, .mfb-component__main-icon--resting {
    line-height: 50px !important;
    font-size: 20px;
}

.mfb-component__child-icon, .mfb-component__child-icon {
    line-height: 50px !important;
}

.mfb-component__wrap a:hover {
    color: #fafafa;
}

.clear-col {
    padding-right: 0;
    padding-left: 0;
}

.clear-col-left {
    padding-left: 0;
}

.page-custom {
    width: 50%;
    margin-left: auto !important;
    margin-right: auto;
}

.fly-panel-body-list {
    bottom: 5px;
    top: 37px;
    position: absolute;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

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

.formatCompressIcon {
    text-align: center;
    font-size: 190%;
    background-color: #F7F9F9;
}

.formatCompressIcon-xs {
    text-align: center;
    background-color: #F7F9F9;
}

.ListPanelItem {
    width: 100%;
}
.ListPanelItemHeader {
    white-space: nowrap;
    text-transform: uppercase;
    padding-left: 10px;
    cursor: pointer;
}

.listPanelHoverBackground:hover {
    background-color: #F7F9F9;
}

.ListPanelItem .ItemPicture {
    width: 25%;
    display: inline-block;
}

    .ListPanelItem .ItemName {
        width: 50%;
        display: inline-block;
        vertical-align: middle;
    }

    .ListPanelItem .ItemDirection {
        width: 15%;
        display: inline-block;
    }

/*app*/
.app-container .crosscut-container footer {
    border-top: none;
}
/*app*/

/*Iframe
    Source: http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/
*/
.fluidMedia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .fluidMedia iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
/*iframe*/

/*Toaster*/
body #toast-container {
    top: inherit !important;
}
/*Toaster*/

/*login*/
.login {
    background-color: rgb(237, 119, 3);
    height: 100%;
}

.crosscut-logo-container, .logins {
    display: table;
}

.image-center, .login-center, .register-center {
    display: table-cell;
    vertical-align: middle;
}

.image-center {
    text-align: center;
}
/*login*/

/*Page Title/Subtitle*/
.page-title {
    padding: 0;
    display: inline-block;
}

    .page-title h1 {
        padding: 0 10px 15px 10px;
        margin: 0.6em 10px 0.4em 10px;
        border-bottom: 1px dotted #E2E2E2;
    }

.page-subTitle {
    display: block;
    font-size: 55%;
    font-weight: bold;
    color: #999999;
    padding-top: 20px;
}

    .page-subTitle span {
        cursor: pointer;
        padding-right: 10px;
    }

        .page-subTitle span.active {
            color: #585858;
        }
/*Page Title/Subtitle*/

/*Action*/
.dynamic-action {
    padding: 0 25px 2px 25px;
    cursor: pointer;
    display: inline-block;
}

    .dynamic-action.unavailable {
        color: #838383;
        cursor: default;
    }

    .dynamic-action .text {
        display: block;
    }

    .dynamic-action .icon {
        display: block;
        font-size: 100%;
        padding: 8px 0 0 0;
    }
/*Action*/

/*Collapser*/
.collapser-header {
    margin-top: 20px;
    margin-bottom: 12px;
    padding: 3px 10px;
    background-color: #4e5862;
    color: white;
    cursor: default;
}

.collapser-title {
    display: inline-block;
    color: white;
    cursor: pointer;
    margin: 0.4em 0;
}
/*Collapser*/

/*Layout Search*/
.searchPage {
    font-size: 55%;
    float: right;
}

    .searchPage.subTitle {
        padding-top: 18px;
    }

.searchPage {
    padding-top: 2px;
}

.sm-padding {
    padding-right: 5px;
    padding-left: 5px;
}
/*Layout Search*/

/*
    Prerequisite: go on sharepoint > Crosscut - Document > Icons (SVG files + xcutIcons.json)
    These icons are made from images (.png). They have been transformed into svg then in fonts thanks to IconMoon.

    To add more xcut icons go to IconMoon App: https://icomoon.io/app/#/select
    Upload the json file named "xcutIcons.json" by clicking on "Import Icons".

    All the preloaded icons are uploaded, you can add new icons by clicking "Import Icons" and ulpoad SVG file.
    Then, to generate a new set of fonts, select all the icons then click on "Generate Font" in the bottom right.
    You can download the set by clicking the button "Download" in the bottom right.

    To use the icon in the portal, two things:
    - Update the different fonts files, in the "fonts" folder of Crosscut.Management.Portal.
    - Add the css of the new icons to the list below.

    NB: Don't forget to update the xcutIcons folder with the new SVG, and generate a new json file 
    (On the main page of Icon Moon https://icomoon.io/app/#/select, you can see the set XCut-Icons. 
    All set have a little menu on the right, here you can do "Download JSON".)
*/

@font-face {
    font-family: 'icomoon';
    src: url('../../../app/vendor/fonts-iconmoon/icomoon.eot?-r9mhgf');
    src: url('../../../app/vendor/fonts-iconmoon/icomoon.eot?#iefix-r9mhgf') format('embedded-opentype'), url('../../../app/vendor/fonts-iconmoon/icomoon.ttf?-r9mhgf') format('truetype'), url('../../../app/vendor/fonts-iconmoon/icomoon.woff?-r9mhgf') format('woff'), url('../../../app/vendor/fonts-iconmoon/icomoon.svg?-r9mhgf#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-xcut-"], [class*=" icon-xcut-"] {
    font-family: 'icomoon';
    font-style: normal;
    font-weight: bold;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
}


.icon-xcut-Connect:before {
    content: "\e600";
}

.icon-xcut-Exchange:before {
    content: "\e601";
}

.icon-xcut-Monitoring:before {
    content: "\e602";
}

.icon-xcut-Transform:before {
    content: "\e603";
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
    line-height: 1.5;
}

.ui-select-multiple .ui-select-match-item > span > span {
    margin-top: 5px;
    white-space: normal;
    display: inline-block;
    word-break: break-all;
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
}

.text-wrapped {
    white-space: normal;
    display: inline-block;
    word-break: break-all;
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
}

/*ALERT FIELD FOR GROUP*/
.alert-group {
    margin-bottom: 5px;
}


.alert-prerequisite {
    background-color: #ffffff;
    border-color: #fe9700;
    color: #585f69;
}

    .alert-prerequisite hr {
        border-top-color: rgba(0, 0, 0, 0.1);
    }

    .alert-prerequisite .alert-link {
        color: #585f69;
    }


.cutLongTextGroup {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    height: 1.5em;
}

/*ALERT FIELD FOR GROUP*/

.back-bar-title {
    width: 180px;
    bottom: 25%;
    position: absolute;
    /*color: #515d6e;*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: left bottom 0;
    /*margin-left: 5px;*/
    left: 13%;
    float: left;
    text-transform: uppercase;
}

.reset-counter {
    counter-reset: section;
}

.number-title {
    bottom: 2%;
    position: absolute;
    left: 41%;
    float: left;
    text-transform: uppercase;
}

    .number-title::before { /* Incrémente le compteur de section */
        counter-increment: section;
        content: counter(section);
    }

.back-bar-icon-title {
    font-size: 1.3em;
    left: 35%;
    margin-top: 23px;
    position: absolute;
    color: #515d6e;
}


.hov {
    position: fixed;
    width: 50px;
    top: 47px;
    bottom: 0;
    background-color: #ffffff;
    border-left: 1px solid #f0f0f0;
}

    .hov:hover {
        background-color: #f0f0f0;
    }

.hov-current {
    position: fixed;
    width: 50px;
    top: 47px;
    bottom: 0;
    background-color: #EAE8E8;
}

@media all and (max-width: 768px) {

    .hov {
        background-color: #ffffff;
        border-left: 1px solid #f0f0f0;
        min-height: 40px;
        position: relative;
        bottom: inherit;
        top: inherit;
        z-index: 50;
        width: 100%;
        float: left;
    }

        .hov:hover {
            background-color: #f0f0f0;
        }

    .hov-current {
        background-color: #EAE8E8;
        border-left: 1px solid #f0f0f0;
        min-height: 40px;
        position: relative;
        bottom: inherit;
        top: inherit;
        z-index: 50;
        width: 100%;
        float: left;
    }

    .back-bar-icon-title {
        font-size: 1.3em;
        left: 1%;
        bottom: 25%;
        margin-top: 20px;
        position: absolute;
        color: #515d6e;
    }

    .back-bar-title {
        bottom: 20%;
        left: 10%;
        position: absolute;
        color: #515d6e;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .number-title {
        bottom: 19%;
        position: absolute;
        left: 81%;
        float: left;
    }
}

/*GROUP PANEL*/

.ListPanelGroup {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}


.ListPanelItemGroup {
    margin-top: 0px !important;
    box-shadow: none;
    border-bottom: 1px solid #eceeee;
    cursor: pointer;
}


.mystackpanel .panel .panel-heading {
    padding: 0;
}


    .mystackpanel .panel .panel-heading .panel-title {
        padding: 0;
        line-height: inherit;
        font-weight: normal;
    }

        .mystackpanel .panel .panel-heading .panel-title .a:hover {
            color: initial;
        }

.selectGroup {
    /*font-size: px;*/
    padding: 15px 0 15px 15px;
}

.version .c-checkbox input[type=checkbox]:checked ~ span, .c-radio input[type=checkbox]:checked ~ span, .c-checkbox input[type=radio]:checked ~ span, .c-radio input[type=radio]:checked ~ span {
    border-color: gray;
    background-color: white;
}

.version .c-checkbox span:before, .c-radio span:before {
    color: black;
    line-height: 10px;
    font-size: 10px;
}

.version-selected .c-checkbox input[type=checkbox]:checked ~ span, .c-radio input[type=checkbox]:checked ~ span, .c-checkbox input[type=radio]:checked ~ span, .c-radio input[type=radio]:checked ~ span {
    border-color: gray;
    background-color: white;
}

.version-selected .c-checkbox span:before, .c-radio span:before {
    color: black;
    line-height: 10px;
    font-size: 10px;
}



.checkbox-sm {
    height: 13px !important;
    width: 13px !important;
    font-size: 13px;
}

.version .c-checkbox span, .c-radio span {
    border-color: #545252;
}

.select-version-list {
    min-height: 60px;
    max-height: 60px;
    height: 60px;
    padding-top: 5px;
    border-bottom: 1px dotted #E2E2E2;
}

/*Timepicker*/
.timepicker {
    margin-top: 5px;
}

    .timepicker .form-control {
        padding-left: 0;
        padding-right: 0;
        width: inherit;
    }

    .timepicker > tbody > tr > td > a {
        padding: 0;
        margin-top: -2px;
    }

    .timepicker > tbody {
        line-height: 0;
    }

.windowLabel {
    border: 1px solid #f0f0f0;
    background: #f0f0f0;
    background: rgba(240, 240, 240, .8);
    display: inline-block;
    position: absolute;
    top: 7px;
    right: 5px;
    text-align: center;
    font-size: 11px;
    border-radius: 20px;
    z-index: 30;
    color: #00638f;
    line-height: 23px;
    padding: 0 7px;
}

.mainView {
    overflow: hidden;
}

#editorResult .ace_hidden-cursors {
    opacity: 0;
}

@media all and (max-width: 990px) {
    .mainView {
        overflow: auto;
    }
}

.tag-filter-list-btn {
    padding-right: 10px !important;
    padding-left: 10px !important;
    pointer-events: none;
    margin-bottom: 5px;
}

.hide-input {
    visibility: hidden;
    height: 0
}

.app-view-header {
    margin: 0;
}


.xcut-navbar-platformType {
    position: absolute;
    top: 40px;
    font-size: 9px;
    line-height: 17px;
    height: 17px;
    padding-right: 10px;
    width: 100%;
    padding-left: 1px;
    text-align: right;
}

.xcut-navbar-brand {
    cursor: pointer;
}

/*Fix Dropdown scrolling: the dropdown was out of the view at the bottom of the screen*/
.dropdown-menu {
    margin-bottom: 20px;
}

.crosscut-app-container {
    overflow: inherit;
    height: 100%;
}

.crosscut-content-main {
    height: 100%;
    overflow: hidden;
}

.crosscut-content {
    height: 100%;
    padding: 10px 15px 15px;
}

#code-editor {
    height: 700px;
}

@media only screen and (max-width: 768px) {
    #code-editor {
        height: 550px;
    }
}

/*** pipeline Components ***/
.green-button-pipeline-component {
    color: #73C274;
}

.gray-button-pipeline-component {
    color: #b1b1b1;
}

.blue-button-pipeline-component {
    background-color: #2095f2;
    color: white;
    margin-top: 1px
}

.red-button-pipeline-component {
    background-color: #f34235;
    color: white;
    margin-top: 1px
}

.button-pipeline-component {
    text-align: center;
}


.properties-wrapper .popover.popover-description {
    max-width: 220px;
}

.pw-wide .popover.popover-description {
    max-width: 80%;
}

.info-circle-popover {
    margin-left: 4px;
    margin-top: 4px;
    color: #a0aab2;
    background: none;
    border: none;
}


.popover.popover-description {
    border: 1px solid #4c4c4c;
    border-radius: 4px;
    padding: 0px;
    min-height: 30px;
}

    .popover.popover-description .popover-inner {
        background-color: #4c4c4c;
        color: white;
        min-height: 30px;
    }


.popover.left .arrow {
    color: #4c4c4c;
    top: 0px !important;
    border-left-color: #4c4c4c;
}

.popover.left > .arrow:after {
    border-left-color: #4c4c4c;
}
.kibana-panel-iframe {
    display: block !important;
    width: 80%;
    animation: fadeIn 0.8s;
    position: fixed;
    height: calc(100% - 47px);
    top: 47px;
    right: 0;
    bottom: 0;
    z-index: 310;
    background-color: #ffffff;
}

.analytics-iframe-fullpage {
    height: 100%;
    margin-top: 0px;
    width: 100%;
}
/*SIDEBAR CSS*/
.sidebar-gray {
    background-color: #1c2738 !important;
    color: #ffffff;
    box-shadow: none;
}

    .sidebar-gray a {
        color: #e3e6e8;
    }

        .sidebar-gray a:focus,
        .sidebar-gray a:hover {
            color: #ffffff;
        }

    .sidebar-gray .nav > li > a {
        color: #ffffff;
    }

    .sidebar-gray .nav > li.active {
        background-color: rgba(0,0,0,.2) !important;
    }
    .sidebar-gray .sidebar > .sidebar-nav > .nav > li > a {
        font-weight: normal;
    }

        .sidebar-gray .nav > li:hover > a,
        .sidebar-gray .nav > li.active > a {
            color: #ffffff;
        }

        .sidebar-gray .nav > li:hover > a,
        .sidebar-gray .nav > li.active > a {
            background-color: rgba(0,0,0,.2) !important;
        }

    .sidebar-gray .sidebar-subnav {
         background-color: rgba(0,0,0,.2);
    }

        .sidebar-gray .sidebar-subnav > li.active > a {
            /*font-weight: bold;*/
            background-color: transparent;
        }

    .sidebar-gray .navbar-form .form-control {
        background-color: #a0aab2;
        color: #ffffff;
    }

        .sidebar-gray .navbar-form .form-control::-moz-placeholder {
            color: #e9eced;
            opacity: 1;
        }

        .sidebar-gray .navbar-form .form-control:-ms-input-placeholder {
            color: #e9eced;
        }

        .sidebar-gray .navbar-form .form-control::-webkit-input-placeholder {
            color: #e9eced;
        }

.ie9 .sidebar-gray .navbar-form .form-control {
    border-bottom: 1px solid rgba(233, 236, 237, 0.15);
}

.sidebar-gray .navbar-form .form-control-feedback,
.sidebar-gray .navbar-form .input-group-addon {
    color: #e9eced;
}

.sidebar-gray .text-muted {
    color: #e9eced;
}

.sidebar-gray .text-loud {
    color: #ffffff;
}

.sidebar-gray small {
    color: inherit;
}

@media print {
    .sidebar-gray {
        color: #000 !important;
    }
}

.sidebar-gray .help-block {
    color: #e9eced;
}

.sidebar-gray .flot-tick-label {
    color: #ffffff;
}

.sidebar-gray hr {
    border-top-color: rgba(233, 236, 237, 0.26);
}
.orchestration {
    height: auto !important;
    width: 50% !important;
    min-width: 350px !important;
    /*padding: 15px 0 !important;*/
    margin: auto;
}

.orchestration .plbr-element-remove {
    width: 100%;
}

.orchestration .plbr-element-content {
    width: 100%;
}

.cutLongText {
    width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn:hover {
    box-shadow: none;
}

.orchestration-jsPlumb-group {
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    border: 1px solid rgba(43, 61, 81, 0.7);
    opacity: 0.8;
    width: 300px !important;
    min-width: 300px !important;
    cursor: pointer;
    z-index: 20;
    position: absolute;
    background-color: #EAE8E8;
    color: black;
    font-family: helvetica, sans-serif;
    padding: 25px 0px;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
    cursor: move;
    display: inline-block;
}

.col-left {
    margin: 10px 20px 0 -20px;
}

.col-right {
    margin: 10px -20px 0 20px;
}

.orchestration-jsPlumb-item {
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    width: 150px;
    height: 130px;
    line-height: 130px;
    cursor: pointer;
    text-align: center;
    z-index: 20;
    position: relative;
    display: inline-block;
    color: white;
    font-family: helvetica, sans-serif;
    padding: 0.5em;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
    cursor: move;
}

.state_window .popover {
    color: black;
}

.imgPaddingTitle .popover {
    color: black;
}

.tile-flow-ports {
    padding-top: 4px;
    display: inline-block;
    height: 64px;
}

.panel.panel-xcut .selected {
    background-color: #ffffff;
    -ms-opacity: 0.2;
    opacity: 0.2;
}

.tile-flow-img-circle {
    float: right;
    text-align: center;
}

.flow-title {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 17px;
    line-height: 17px;
}

.panel-flow .c-checkbox input[type=checkbox]:checked ~ span, .c-radio input[type=checkbox]:checked ~ span, .c-checkbox input[type=radio]:checked ~ span, .c-radio input[type=radio]:checked ~ span {
    border-color: #fff;
    background-color: #fff;
}
.panel-flow .c-checkbox span:before, .c-radio span:before {
    color: #585f69;
}

.panel-flow .c-checkbox:hover span, .c-radio:hover span {
    border-color: #f4f4f4;
}

.dropdown-animation-right {
    -webkit-transform-origin: 100% 0 !important;
    -moz-transform-origin: 100% 0 !important;
    -ms-transform-origin: 100% 0 !important;
    transform-origin: 100% 0 !important;
}

.dropdown-menu.left {
    right: 0;
    left: auto;
}

.table-row-pointer {
    cursor: pointer;
}

.icon-clickable-area {
    padding: 1em;
    margin: -1em;
}

/*Table*/

@media (min-width: 801px) {
    .table-column-sm-1 {
        width: 1%;
        max-width: 1%;
    }
    .table-column-sm-5 {
        width: 5%;
        max-width: 5%;
    }
    .table-column-sm-10 {
        width: 10%;
        max-width: 10%;
    }
    .table-column-sm-14 {
        width: 14%;
        max-width: 14%;
    }
    .table-column-sm-15 {
        width: 15%;
        max-width: 15%;
    }
    .table-column-sm-20 {
        width: 20%;
        max-width: 20%;
    }
    .table-column-sm-25 {
        width: 25%;
        max-width: 25%;
    }
    .table-column-sm-35 {
        width: 35%;
        max-width: 35%;
    }
    .table-column-sm-40 {
        width: 40%;
        max-width: 40%;
    }
}

@media (max-width: 800px) {
    [class*="table-column"] {
        padding-left: 50% !important;
    }
    [class*="table-column"]>.dropdown {
        text-align: left
    }
    [class*="table-column"]>.dropdown>.dropdown-menu {
        right: auto;
    } 
}


.ng-table th.sortable div {
    padding-left: 25px!important;
    position: relative;
}

.ng-table th.sortable div:after, 
.ng-table th.sortable div:before {
    left: 8px;
    right: auto;
}

.transparent {
  background-color: transparent !important;
    box-shadow: none;
}

/*End Table*/

/* Searchbar Icon*/
.open input[type=search].store-filterValue.dropdown-toggle.btn-default {
    background: #ffffff url(/app/crosscut/img/search-icon.png) no-repeat 23px center;
}

.flow-loader .cs-loader {
    position: relative;
}

.flow-loader .cs-loader-inner {
    transform: none;
    top: 0;
    position: relative;
}

.flow-jsplumb-container {
    margin: 50px;
    border: solid 1px lightgray;
    background-color: var(--background);
}
.filter {
    padding-right: 3px;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-bottom: 0 !important;
}

    .filter .field {
        height: 26px;
        font-size: 12px;
        padding-top: 0;
        padding-bottom: 0;
    }

.filter-container {
    float: left;
    width: 100%;
}

    .filter-container .filter-selector {
        float: left;
        width: 5%;
        margin-top: 12px;
    }

    .filter-container .filter-zone {
        width: 84%;
        float: left;
    }

    .filter-container .remove-filter {
        width: 5%;
        display: inline-block;
        padding-top: 2px;
    }


.groupFilter {
    padding-left: 5px;
    display: table;
}

.groupFilters-container {
    background-color: whitesmoke;
    border-top: solid 1px #4682b4;
    position: relative;
    display: table-cell;
    padding-top: 35px;
}

.group-container {
    width: 27px;
    background-color: #687074 !important;
    text-align: center;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

        .group-container .group-selector {
            width: 100%;
            margin-top: 10px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .group-container .group-title {
     
            color: white;
            text-transform: uppercase;
            vertical-align: middle;
            font-weight: bold;
        }

.remove-group {
    position: absolute;
    top:2px;
    right: 0;
    color: #c0c0c0;
    z-index: 2;
}

.remove-group:hover {
    color: #c0c0c0;
}
.animate-if-group {

}
.animate-if-group.ng-enter, .animate-if-group.ng-leave {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.animate-if-group.ng-enter,
.animate-if-group.ng-leave.ng-leave-active {
    opacity:0;
    height: 0px;
}

.animate-if-group.ng-leave,
.animate-if-group.ng-enter.ng-enter-active {
    opacity:1;
    height: 100px;
}

.element-group-img-circle {
    margin: 0 auto;
    text-align: center;  
}

.element-group-title {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 15px;
    line-height: 15px;
}

.group-element-img-circle {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.group-element-status {
    font-size: 10px;
}

[ng-drop].drag-enter{
    opacity: 0.5;
}

[ng-drag].dragging{
    z-index: 100000000000000;
    position: absolute;
}

[ng-drag].dragging + .drag-placeholder-group-element{
    background-color: lightgray;
    min-height: 120px;
    max-height: 120px;
    height: 120px;
    min-width: 125px;
    max-width: 125px;
    width: 125px;
    position: relative;
    margin: 0px 10px 19px 10px;
    display: inline-block;
}

[ng-drag].dragging ~ .drag-placeholder-tr{
    background-color: lightgray;
    display: table-row;
    height: 51px;
    
}
.drag-placeholder-tr {
    display:none;
}

/**
button upload & download edit group log
*/
  .edtBtnBox {
        max-width: 25em;
    }

    .edtPnlBtnGrp {
        display: inline-block;
        margin: 0 auto 3px auto;
        width: 49%;
    }

    .dltPnlBtnGrp {
        width: 100%;
    }



.group-loader .cs-loader {
    position: relative;
}

.group-loader .cs-loader-inner {
    transform: none;
    top: 0;
    position: relative;
}
/* DiffTools */
#flex-container.compare-resource {
    height: calc(100% - 145px);
}

#outputSchema {
    padding-top: 20px;
    min-width: 200px !important;
    position: relative;
    float: right;
    height: 2500px;
    background: white;
    overflow: auto;
}

#inputSchema {
    float: left;
    padding-top: 20px;
    min-width: 200px !important;
    position: relative;
    height: 5000px;
    background: white;
    overflow: auto;
    direction: rtl;
}

    #inputSchema > div {
        direction: ltr;
    }

.jsplumb-connector path {
    width: 2px;
}

#inputSchema h4, #outputSchema h4 {
    margin-left: 10px;
}

#mapWebTooling ol li {
    list-style-type: none;
    height: 30px;
}

.state_element {
    opacity: 0.8;
    width: 100%;
    height: 30px;
    cursor: pointer;
    text-align: left;
    z-index: 20;
    color: gray;
    font-family: helvetica, sans-serif;
    font-size: 0.9em;
    position: relative;
}

.inputElement {
    height: 100%;
    float: left;
    margin-right: 10px;
}

.outputElement {
    position: absolute;
    top: 0px;
}

.element_name {
    margin-left: 15px;
    margin-top: 8px;
    color: #585f69;
    /*font-weight: bold;*/
}
.element_name_type {
    color: rgba(88, 95, 105, 0.6);
}

.state_element:hover {
    background: #f8f9f9 !important;
}

.map_container {
    background: #e8e8e8;
    width: 100%;
}

.element_endpoint {
    display: none;
}

.state_element:hover > .element_endpoint {
    display: block;
}

.dragbar {
    background-color: black;
    height: 100%;
    position: absolute;
    width: 2px;
    cursor: col-resize;
    top: 0;
    z-index: 20;
}

#inputSchema .dragbar {
    right: 0;
}

#outputSchema .dragbar {
    left: 0;
}
.mapWebtooling {
    background: white;
    padding-top: 25px;
    min-height: 800px;
    width: 100%;
}

.hidden-jsplumb-object {
    height: 0;
    visibility: hidden;
    margin-top: -15px;
    margin-bottom: 15px;
}

.ods-tab-pane {
    padding: 20px;
    background: white;
    border: none;
    height: 70vh;
}

.ods-tab {
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    border: none;
}

    .ods-tab em {
        margin-right: 5px;
    }

.nav-tabs > li.ods-tab > a, .nav-tabs > li.ods-tab > a:hover {
    background-color: transparent;
    border: none;
}

.nav-tabs > li.ods-tab.active, .nav-tabs > li.ods-tab:hover {
    background-color: white;
    border-radius: 5px 5px 0 0;
    border: none;
}

h3.odswidget-facet__facet-title {
    margin-bottom: 20px;
}

.ods-filterfacets-container {
    padding: 10px;
    background: white;
    border-radius: 5px 5px;
}

.odswidget-filter-summary li {
    margin: 0;
}

.odswidget-facet-category .odswidget-facet__category {
    padding: 5px;
}

.odswidget-table__internal-table-row td {
    padding: 5px 0 5px 0;
}

.odswidget-table, .odswidget-table .odswidget-table__internal-table {
    height: 100%;
}

.odswidget-table__internal-table {
    font-size: .85em;
    width: 100%;
    max-width: 100%;
}

.odswidget-table__records {
    height: calc(100% - 25px) !important;
}

.odswidget-map__map {
    height: 100%;
}

form.odswidget-text-search__form {
    text-align: right;
}

input.odswidget-text-search__search-box {
    background: #ffffff url(/app/crosscut/img/search-icon.png) no-repeat 23px center;
    background-color: #ffffff;
    color: transparent !important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    width: 65px;
    height: 37px;
    cursor: pointer;
    text-align: left;
}

    input.odswidget-text-search__search-box:focus {
        width: 100%;
        color: #a0aab2 !important;
        background-color: #fff;
        cursor: auto;
        padding-left: 50px;
    }

    input.odswidget-text-search__search-box::-webkit-input-placeholder {
        color: transparent;
    }

    input.odswidget-text-search__search-box:focus::-webkit-input-placeholder { /* Firefox 18- */
        color: #585f69;
    }

.odswidget-text-search i.fa.fa-search {
    display: none;
}

.odswidget-filter-summary li {
    display:inline-block;
}

.tile-orchestration-subtitle {
    font-size: 13px;
    padding-top: 5px;
}

.orchestration-tile .popover {
    color: black;
    max-width: none !important;
    min-width: 100px !important;
}

.orchestration-title {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 20px;
    line-height: 20px;
}
.panelResourceUsage .tab-content {
    padding: 0;
}

.panelResourceUsage .ListPanelItem .ItemName {
    width: 70%;
}

.fullHeight {
    height: 100%;
}

.panelTabset {
    height: 100%;
}

.panelTabset .tab-content {
    height: 100%;
}

.panelTabset .tab-content .tab-pane {
    height: 100%;
}

.panelTabset .divContentTab {
    margin-top: 5px;
    height: calc(100% - 110px);
}

.warning-panel-filter{
    margin-left:10px;
}

.warning-panel-filter em {
    margin-right: 10px;
}

.tile-port-subtitle {
    font-size: 13px;
    padding-top: 2px;
}

.port-tile .popover {
    color: black;
    max-width: none !important;
    min-width: 100px !important;
}

.port-title {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 17px;
    line-height: 17px;
}
.schemaEditor {
    background: white;
    padding-top: 25px;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.schemaEditor .errorElement > * {
    color : red !important;

}

.schemaEditor .error {
    color: red;
    border-left: 4px solid red;
    background: #EAE8E8;
    padding: 5px;
    position:absolute;
}

.schemaEditor .errorElement.elementName-container {
    border-bottom: red;
}

.schemaSetEditor .xmlEditor_container {
    transition: width 1s ease-in-out;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
}

.schemaSetEditor .xmlEditor_container .collapsable {
    display: block;
    overflow: hidden;
    min-height: 100%;
    height: 100%;
}

.xmlEditor {
    height: 100%;
    max-height: 100%;
    margin-left: 50px;
}

.schemaSetEditor .xmlEditor_container.showMe {
    width: 700px;
}

.schemaSetEditor .xmlEditor_container {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    min-height: 100%;
    height: 100%;
}

    .schemaSetEditor .xmlEditor_container .xmlEditor_leftBar {
        position: absolute;
        z-index: 10;
        background: #ebebeb;
        width: 50px;
        height: 100%;
        padding: 5px;
        font-weight: bold;
        cursor: pointer;
    }

.angular-ui-tree-nodes li {
    list-style-type: none;
    border-left: 2px solid #000;
    margin-left: 1em;
}

div.treeBorder {
    position: absolute;
    border-bottom: 2px solid #000;
    top: -5px;
    width: 15px;
    left: -10px;
}

.angular-ui-tree-nodes > li:last-child > div.tree-node > div.tree-node_container > div.treeBorder:first-child {
    border-left: 2px solid #000;
}

.angular-ui-tree-nodes li:last-child {
    border: none;
    padding-bottom: 15px;
}

.angular-ui-tree-handle {
    background: #f8faff;
    border: 1px solid #dae2ea;
    color: #7c9eb2;
    padding: 0;
}

    .angular-ui-tree-handle:hover {
        color: #438eb9;
        background: #f4f6f7;
        border-color: #dce2e8;
    }



.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

tr.angular-ui-tree-empty {
    height: 100px;
}

.group-title {
    background-color: #687074 !important;
    color: #FFF !important;
}


/* --- Tree --- */
.tree-node {
    border: none;
    background: transparent;
    color: #7c9eb2;
    cursor: move;
    position: relative;
    margin-left: 15px;
}

    .tree-node .grip {
        display: none;
    }

    .tree-node:hover .grip {
        display: block;
    }


.tree-node_container {
    cursor: pointer;
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 5px;
}

.tree-node:hover {
    background: #f8f9f9 !important;
}

.tree-node input {
    width: auto;
    visibility: hidden;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tree-node .btn-container {
    display: none;
    margin-top: 2px;
}

.tree-node .btn-chevron {
    margin-left: 5px;
}

.tree-node .elementName {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #585f69;
    font-weight: bold;
}

    .tree-node .elementName span {
        color: gray;
        font-size: 10px;
        font-style: italic;
    }

.tree-node input.elementName_input {
    height: 20px;
}

    .tree-node input.elementName_input:focus {
        border-color: #dbd9d9;
    }

.tree-node:hover .btn-container {
    display: inline-block !important;
}

.tree-node .elementName-container {
    display: inline-block;
    margin-left: 15px;
}

.tree-node .btn {
    width: 15px;
    height: 15px;
    padding: 1.5px;
    line-height: 1 !important;
    font-size: 10px !important;
    color: #515d6e;
}

    .tree-node .btn:hover {
        color: #3f51b5;
    }

.tree-node:hover > .btn {
    display: block;
}

.nodrop {
    background-color: #f2dede;
}

.tree-node-content {
    margin-left: 10px;
}

.tree-handle {
    padding: 10px;
    background: #428bca;
    color: #FFF;
    margin-right: 10px;
}

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.schemaEditor-area {
    min-height: 500px;
    height: calc(100vh - 222px);
    max-height: calc(100vh - 222px);
    margin-right: 50px;
}

.schemaEditor-area .tab-content {
    min-height: calc(100% - 45px);
    max-height: calc(100% - 45px);
    height: calc(100% - 45px);

}
    .schemaEditor-area .tab-pane {
        height: 100%;
        max-height: 100%;
    }
    .schemaEditor-area schema-editor {
        height: 100%;
        max-height: 100%;
    }


.schemaEditor-tree {
    min-height: calc(100% - 150px);
    max-height: calc(100% - 150px);
    overflow: auto;
}

.schemaEditor-bottom-btn {
    bottom: 25px;
    left: 40px;
    position: absolute;
}

.schema-type-element * {
    color: rgba(88, 95, 105, 0.4) !important;
    cursor: not-allowed !important;
}
.table-Rights > thead > tr > th {
    text-align: center;
}

    .table-Rights > thead > tr > th:first-child {
        text-align: left;
    }

.table-Rights > tbody > tr > td > i {
    margin: 0 !important;
}

.table-Rights > tbody > tr > td {
    text-align: center;
}

    .table-Rights > tbody > tr > td:first-child {
        padding-top: 12px;
        text-align: left;
    }

/*
    carte de redirection dans acl/* du edite
*/

.related-row > div {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.btn-related {
    height: 120px;
    width: 100%;
    margin-bottom: 10px;
}

    .btn-related > div {
        display: table;
        text-align: center;
        width: 100%;
        height: 100%;
    }

        .btn-related > div > div {
            display: table-cell;
            vertical-align: middle;
        }

            .btn-related > div > div > i {
                width: 45px;
            }



            .btn-related > div > div > div {
                font-weight: bold;
                padding-top: 20px;
            }


.fa-size-320 {
    font-size: 320%;
    position: absolute;
    width: 100%;
}

.imgClickAera {
    margin: -.5em;
    padding: 20px;
    position: relative;
}

.ListPanel {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

.ListPanelItem:hover {
    background-color: #f8f9f9 !important;
}

.StoreListPanelItem {
    margin-top: 0px !important;
    box-shadow: none;
    border-bottom: 1px solid #eceeee;
    cursor: pointer;
}

.mystackpanel .panel .panel-heading {
    padding: 0;
}

    .mystackpanel .panel .panel-heading .panel-title {
        padding: 0;
    }

.ListPanelItemSelectable .selectConnector {
    font-size: 15px;
    padding: 15px 0 15px 15px;
    border-bottom: 1px solid #eceeee;
}

.StoreListPanelItem .fa {
    line-height: 46px;
}

.StoreListPanelItem .selectConnector {
    font-size: 15px;
    padding: 15px 0 15px 15px;
}

.ListPanelItemSelectable .selectConnector .fa {
    line-height: 32px;
}

.ListPanelItemTitleFlow > .StoreListPanelItem {
    font-size: 15px;
    padding: 20px 0 20px 15px;
}


.ListPanelItemSelectable .selectConnector + div {
    padding: 20px 15px 20px 0;
}

.selectedPort .panel-heading {
    background-color: #2095f2 !important;
    background-color: rgba(32, 149, 242, 0.12) !important;
}


/*.panel-default > .panel-heading:hover {
    background-color: #f8f9f9 !important;
}*/


.bottomPanel {
    margin: 0px 15px;
    padding-right: 10px;
    width: 100%;
    overflow: hidden;
    z-index: 1000;
}

.validation-panel {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
}

.validation-panel-description {
    border: 1px solid gray;
    padding: 5px;
}

.validation-panel-message {
    padding-top: 20px;
    font-size: 15px;
}

.ListPanelFlow {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.ListPanelItemTitleFlow {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid lightgrey;
    text-transform: uppercase;
}

.ListPanelItemFlow {
    cursor: pointer;
    padding-left: 10px;
    margin-right: 5px;
    font-size: 15px;
    line-height: 33px;
    min-height: 33px;
    max-height: 33px;
    height: 33px;
}

.bottom-align-text {
    margin: 0px 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 30%;
    overflow: hidden;
}

.panel-filter {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 30px;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
}

.flowpattern-img-circle {
    margin: 0 auto;
    text-align: center;
    min-width: 32px;
}

.selectMappingTile {
    /*border: 1px solid white;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;*/
    opacity: 0.8;
    width: 200px;
    height: 40px;
    line-height: 20px;
    cursor: pointer;
    text-align: center;
    z-index: 20;
    position: absolute;
    background-color: transparent;
    color: grey;
    font-family: helvetica, sans-serif;
    padding: 0.5em;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
    font-size: 18px;
}

/*Accordion style dans les Description - Debut*/

.panel-collapse > .panel-body {
    padding: 15px;
    background-color: WHITE;
}

.accordion-verbe > .panel-heading {
    padding: 0;
}

    .accordion-verbe > .panel-heading > .panel-title {
        padding: 10px 5px;
    }

.accordion-verbe-title .accordion-verbe-type {
    display: inline-block;
}

a:hover .accordion-verbe-title,
a:focus .accordion-verbe-title {
    color: #444444;
}

.accordion-verbe-type {
    text-align: center;
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
    border-right: 1px solid #585f69;
    width: 140px;
}

.accordion-verbe-title {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 50px;
    display: inline-block;
}

.accordion-verbe-ico {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    float: right;
}

.accordion-verbe > .accordion-verbe-type {
    text-align: center;
    float: left;
}
/*Accordion style dans les Description - Fin*/

/*Utile view - Debut*/

.propre {
    margin-right: 20px;
}

.store-status-uptodate {
    font-size: 18px;
    line-height: 37px;
}

.app-view-header > div > em {
    color: #8394a9;
    margin-left: 5px;
}

/*Utile view - Fin*/

.panel-store-heading {
    max-height: 130px;
    height: 130px;
    /*cursor: pointer !important;*/
    border-radius: 10px 10px 0px 0px !important;
}

.panel-store-body {
    /*cursor: pointer !important;*/
    padding: 0 15px;
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
}

.panel-store-title {
    padding: 0px !important;
    font-size: 17px;
    line-height: 17px;
}

    .panel-store-title > .store-title {
        font-size: 17px;
        line-height: 17px;
        min-height: 127px;
    }

.store-title > .store-subtitle {
    font-size: 10px;
    padding-top: 2px;
    color: var(--text);
}

.store-img-circle {
    margin: 0 auto;
    text-align: center;
}

.store-img-circle-port {
    display: inline-block;
    min-width: 64px;
}

.store-img-circle-port-template {
    display: inline-block;
}

.store-img-circle-port-template-img {
    min-height: 64px;
    padding-top: 10px;
}

.store-port-template-arrow-left {
    height: 50px;
    margin-left: -10px;
}

.store-port-template-arrow-right {
    height: 50px;
    margin-right: -10px;
}

.store-port-template-no-data h4 {
    text-align: center;
}


.store-img-circle-port.left {
    margin-right: -12px;
}

.store-img-circle-port.right {
    margin-left: -12px;
}

.dataset-icon {
    color: black;
    margin-top: 12px;
}

.panelstore {
    height: 170px;
    min-height: 170px;
    max-height: 170px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
}

.card-store {
    display: inline-block;
    width: 250px;
    height: 170px;
    padding: 0 10px 10px 10px;
    margin-bottom: 20px;
}

.panel-xcut .c-checkbox input[type=checkbox]:checked ~ span, .c-radio input[type=checkbox]:checked ~ span, .c-checkbox input[type=radio]:checked ~ span, .c-radio input[type=radio]:checked ~ span {
    border-color: var(--action);
    background-color: #fff;
}

.panel-xcut .c-checkbox span:before, .c-radio span:before {
    color: #585f69;
}

.panel-xcut {
    height: 170px;
    min-height: 170px;
    max-height: 170px;
    box-shadow: none !important;
    cursor: pointer;
    border-radius: 10px;
}

    .panel-xcut .panel-heading {
        border-radius: 10px 10px 0px 0px !important;
        border-bottom: 1px solid #f2f2f6 !important;
        box-shadow: none !important;
    }

    .panel-xcut .panel-body {
        border-radius: 0px 0px 10px 10px;
    }

.panel-xcut-child {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
    box-shadow: none;
    border-radius: 10px !important;
}

    .panel-xcut-child .panel-heading {
        border-radius: 10px 10px 0px 0px !important;
        border-bottom: 1px solid #f2f2f6 !important;
        height: 90px;
        box-shadow: none !important;
    }

    .panel-xcut-child .panel-body {
        border-radius: 0px 0px 10px 10px;
        padding: 0 15px;
        background-color: #ffffff;
    }


.card-storeflow {
    float: left;
    display: inline-block;
    width: 250px;
    height: 170px;
    padding: 0 10px 10px 10px;
    margin-bottom: 20px;
}

.panel-xcut-heading {
    height: 130px;
}


.panel-xcut-title {
    padding: 0px !important;
}

    .panel-xcut-title > .storeflow-title {
        margin-top: 20px;
        font-size: 25px;
        line-height: 15px;
    }

.storeflow-subtitle {
    font-size: 10px;
    padding-top: 2px;
    height: 20px;
    color: var(--text) !important;
}

.panel-xcut-body {
    /*cursor: pointer !important;*/
    padding: 0 15px;
    background-color: #ffffff;
}

.panel-xcut-new {
    line-height: 170px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
}

.panel-xcut-arrow {
    padding-left: 5px;
    padding-right: 5px;
}
/*#######*/

/* Connector - Debut */
.details-navbar > li {
    display: inline-block;
}

.details-navbar > ul {
    padding: 0;
}

.text-underline {
    text-decoration: underline;
}

.btn-patch-padding {
    padding-top: 0px;
    padding-bottom: 0px;
}

.btn-in-text {
    margin-left: 10px;
    margin-bottom: 10px;
}

.margin-right-10 {
    margin-right: 20px;
}

.margin-left-10 {
    margin-left: 20px;
}

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

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

.panel-white {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    background-color: #ffffff;
}

.fa-margin-right {
    margin-right: 5px;
}

.img-width-full {
    vertical-align: initial;
    width: 100%;
}

.h1-summary {
    line-height: 100px;
    vertical-align: middle;
    margin: 0;
}

.img-summary {
    max-height: 70px;
    max-width: 70px;
    display: block;
    float: left;
    margin-right: 10px;
}

.img-summary-content {
    max-height: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Connector - Fin */

/*Connectors - Debut*/
.store {
    box-shadow: none;
    background-color: transparent;
}

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

.user-img {
    width: 10%;
}

.user-info {
    font-size: 10px;
    padding-left: 5px;
    padding-right: 5px;
    color: var(--text);
}

.imgClickAera {
    margin: -.5em;
    padding: 6px;
    position: relative;
}

.rightBar {
    height: calc(100% - 70px);
    width: 20%;
    z-index: 10000;
    position: fixed;
    right: 0px;
    top: 70px;
    /*padding: 20px;*/
    border: 1px solid black;
    overflow-y: scroll;
}

.pb-lg, .pv-lg {
    padding-bottom: 0 !important;
}
/*Connectors - Fin*/

/*Flows - Debut*/

.flows.panel {
    box-shadow: none;
    background-color: transparent;
}

.noPadding {
    padding: 0 !important;
}

.ListPanel {
    overflow-y: auto;
    overflow-x: hidden;
    height: 90%;
}

.StoreListPanelItem {
    margin-top: 0px !important;
    box-shadow: none;
    border-bottom: 1px solid #eceeee;
}

.imgFlowHeaderPanel {
    min-width: 32px;
    text-align: right;
}

.mystackpanel .panel .panel-heading .panel-title {
    padding: 10px 0px;
}

.pb-lg, .pv-lg {
    padding-bottom: 0 !important;
}

.flow-img-circle {
    margin: 0 auto;
    text-align: center;
}

.port-flow-img-circle {
    margin: 0 auto;
    text-align: center;
}




.imgPaddingTitle {
    position: absolute;
    top: 5px;
    line-height: 10px;
    padding: 5px;
}

    .imgPaddingTitle.left {
        left: 10px;
    }

.store-overlay-icon {
    background-color: #ffffff;
    opacity: 0.8;
    height: 35px;
    width: 35px;
    color: #6639b6;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
    border: solid 1px #3f51b5;
    text-align: center;
    line-height: 40px;
}

    .store-overlay-icon.unicornTemp {
        color: var(--action);
        border: solid 1px var(--action);
    }

    .store-overlay-icon:hover {
        opacity: 1;
        cursor: pointer;
        z-index: 20;
    }

.store-overlay-mapping-icon {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
}

/*Flows - Fin*/

/*port - debut*/

/*Port - Fin*/

/*Ports - Debut*/

.properties-content {
    padding-top: 15px;
}

.imgPaddingTitle {
    position: absolute;
    top: 5px;
    z-index: 30;
}

    .imgPaddingTitle.left {
        left: 10px;
    }    .imgPaddingTitle.double-left {
        left: 20px;
    }

    .imgPaddingTitle.right {
        right: 10px;
    }

    .imgPaddingTitle a {
        padding: 5px;
    }

.imgClickAera {
    margin: -.5em;
    padding: 6px;
    position: relative;
}

.rightBar {
    height: calc(100% - 70px);
    width: 20%;
    z-index: 10000;
    position: fixed;
    right: 0px;
    top: 70px;
    /*padding: 20px;*/
    border: 1px solid black;
    overflow-y: scroll;
}

.ListPanel {
    overflow-y: auto;
    overflow-x: hidden;
    height: 90%;
}

.StoreListPanelItem {
    margin-top: 0px !important;
    box-shadow: none;
    border-bottom: 1px solid #eceeee;
}

.imgConnectorHeaderPanel {
    min-width: 32px;
    text-align: right;
}

.mystackpanel .panel .panel-heading .panel-title {
    padding: 10px 0px;
}

.pb-lg, .pv-lg {
    padding-bottom: 0 !important;
}

.ListPanelFlow {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.ListPanelItemTitleFlow {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid lightgrey;
    text-transform: uppercase;
}



.ListPanelItemFlow + .ListPanelItemFlow {
    border-top: 1px solid lightgrey;
}

.ListPanelItemFlow:hover {
    background-color: #eceeee;
}

.ListPanelElement {
    padding-left: 10px;
    margin-right: 5px;
    font-size: 15px;
    line-height: 33px;
    min-height: 33px;
    max-height: 33px;
    height: 33px;
}

.icon-20 {
    font-size: 20px !important;
}

/*Ports - Fin*/

/*General*/

.store-btn-rigth-bottom {
    z-index: 20;
    position: fixed;
    bottom: 46px;
    right: 60px;
    z-index: 10;
}

.store-btn-notSelected {
    color: #3f51b5;
    border-color: #3f51b5 !important;
    background-color: white;
}

    .store-btn-notSelected:hover {
        color: #3f51b5;
        border-color: #3f51b5 !important;
        background-color: white;
    }

.store-panel-selectedItem {
    background-color: #2095f2 !important;
    background-color: rgba(32, 149, 242, 0.12) !important;
}

.store-filter-btn-clear {
    right: 10px;
    position: absolute;
    right: 10px;
    position: absolute;
    margin-top: -13px;
}


input.store-filterValue {
    outline: none;
}

input[type=search].store-filterValue {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}

input.store-filterValue::-webkit-search-decoration,
input.store-filterValue::-webkit-search-cancel-button {
    display: none;
}

input[type=search].store-filterValue {
    background: #ffffff url(/app/crosscut/img/search-icon.png) no-repeat 23px center;
    background-color: #ffffff;
    color: transparent !important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    width: 15px;
    cursor: pointer;
    text-align: left;
}

    input[type=search].store-filterValue:focus,
    input[type=search].store-filterValue-open {
        width: 130px;
        color: #a0aab2 !important;
        background-color: #fff;
        cursor: auto;
        padding-left: 50px;
    }


input.store-filterValue:-moz-placeholder {
    color: transparent;
}

input.store-filterValue::-webkit-input-placeholder {
    color: transparent;
}

input.store-filterValue:focus:-moz-placeholder {
    color: #a0aab2;
}

input.store-filterValue:focus::-webkit-input-placeholder {
    color: #a0aab2;
}

.dropdown-icon {
    width: 20px;
}

    .dropdown-icon > a {
        padding: 10px;
        margin: -10px;
    }

.cursor-default {
    cursor: default !important;
}

.cursor-move {
    cursor: move !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

/*General - Fin*/

/*=======================================  COMMON STYLE  ===========================================*/
.homeTiles, header.bg-unicornTemp, header {
    background-repeat: no-repeat;
    background-size: cover;
}
/*=======================================  HOME  ===========================================*/
.bg-pink {
    background-color: rgb(226, 0, 89);
}

    .bg-pink .nav > li:hover > a {
        background-color: rgba(211, 6, 111, 0.5);
    }

.homeTiles {
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    transition: all .2s;
}

    .homeTiles:hover {
        box-shadow: 4px 8px 20px 0px rgba(0, 0, 0, 0.33);
        -webkit-filter: saturate(150%);
        -ms-filter: "progid:DXImageTransform.Microsoft.Saturate(Saturate=150)";
        filter: saturate(150%);
    }

@media screen and (min-width:280px) {
    .homeTiles {
        height: 70vw;
        width: 70vw;
    }

        .homeTiles .fa-2x {
            margin-top: 28%;
        }

        .homeTiles .fa-2x {
            font-size: 6em;
        }
}

@media screen and (min-width: 736px) {
    .homeTiles {
        height: 44vw;
        width: 44vw;
    }

        .homeTiles .fa-2x {
            margin-top: 35%;
        }
}

@media screen and (min-width: 980px) {
    .homeTilesRoom {
        margin: auto;
    }

    .homeTiles {
        height: 18vw;
        width: 18vw;
    }

        .homeTiles .fa-2x {
            margin-top: 31%;
        }

        .homeTiles .fa-2x {
            font-size: 5em;
        }
}
/*=======================================  UNICORNTEM  ===========================================*/
.bg-unicornTemp, .bg-unicornTemp.select-version-list, .switch-unicornTemp input:checked + span,
.checkbox-unicornTemp input[type=checkbox]:checked ~ span, .bg-unicornTemp .sidebar-subnav {
    background-color: var(--action) !important;
}

.checkbox-unicornTemp:hover ~ span, .btn-unicornTemp,
.checkbox-unicornTemp input[type=checkbox]:checked ~ span,
.switch-unicornTemp input:checked + span {
    border-color: var(--action) !important;
}

.btn-switch-unicornTemp > input[type="checkbox"]:checked + .btn {
    background-color: var(--action) !important;
    color: #ffffff;
}

    .btn-switch-unicornTemp > input[type="checkbox"] + .btn,
    .btn-switch-unicornTemp > input[type="checkbox"]:checked + .btn > em,
    .btn-switch-unicornTemp > input[type="checkbox"] + .btn > em {
        background-color: #ffffff !important;
        color: var(--text);
        border: 1px solid var(--action);
    }

.switch-unicornTemp input:checked + span {
    transition: all .5s;
}

.btn-unicornTemp, .bg-unicornTemp .nav li a, .bg-unicornTemp .text-loud {
    color: #ffffff;
}

.bg-unicornTemp .tile:hover .tile-body-content {
    border: solid 1px var(--action);
}

.bg-unicornTemp a {
    color: #bcdffb;
}

.bg-unicornTemp .nav > li.active {
    background-color: #009daf !important;
}

    .bg-unicornTemp .nav > li:hover > a,
    .bg-unicornTemp .nav > li:focus > a,
    .bg-unicornTemp .nav > li.active > a {
        background-color: rgba(0, 88, 131, 0.5);
    }

.bg-unicornTemp .sidebar-subnav > li.active > a {
    font-weight: bold;
    background-color: transparent;
}

.bg-unicornTemp .navbar-form .form-control {
    background-color: #009daf;
    color: #ecfdff;
}

    .bg-unicornTemp .navbar-form .form-control::-moz-placeholder {
        opacity: 1;
    }

    .bg-unicornTemp .navbar-form .form-control-feedback,
    .bg-unicornTemp .navbar-form .input-group-addon,
    .bg-unicornTemp .text-muted, .bg-unicornTemp .navbar-form .form-control::-webkit-input-placeholder,
    .bg-unicornTemp .navbar-form .form-control:-ms-input-placeholder,
    .bg-unicornTemp .navbar-form .form-control::-moz-placeholder {
        color: #b4e4ea;
    }

.bg-unicornTemp .text, .bg-unicornTemp a.text {
    color: var(--action);
}

    .bg-unicornTemp a.text:hover,
    .bg-unicornTemp a.text:focus {
        color: #005883;
    }

.switch-unicornTemp.switch input:checked + span {
    background-color: #005883;
    border-color: #005883;
}

a.text-unicornTemp, .text-unicornTemp {
    color: var(--text);
}

/*QUICK FIX TO SHOW ACTIONS PANEL*/
.mat-menu-panel {
    opacity: 1 !important;
    transform: scale(1, 1) !important;
}

.switch input:disabled + span {
    background-color: #e6e9ee !important;
    border-color: #e6e9ee !important;
}

input[type=checkbox][disabled] + label {
    color: #ccc;
}

a .panel-store-title {
    color: var(--text);
}

a .panel-heading {
    color: var(--text);
    background-color: #FFFFFF;
    border-color: #116a92;
    border-bottom: 1px solid #f2f2f6 !important;
}

.panel-warning a .panel-heading {
    color: #ffffff;
    background-color: #fe9700;
    border-color: #e6e9ee;
}

/*** Style Material ***/
.text-no-placeholder div.mat-form-field-infix {
    padding: 0.2em 0;
}

/** Overrides underline color **/
.text-no-placeholder.mat-form-field-appearance-legacy .mat-form-field-underline,
.text-no-placeholder.mat-form-field-appearance-legacy .mat-form-field-ripple,
.text-no-placeholder.mat-form-field-appearance-legacy.mat-focused
.mat-form-field-underline,
.text-no-placeholder.mat-form-field-appearance-legacy.mat-focused
.mat-form-field-ripple {
    background-color: black;
}

.mat-menu-item .mat-icon.no-margin-right {
    margin-right: 0px;
}

button.mat-small-button {
    min-width: 60px;
    color: #a0aab2;
}

button.mat-button-arrow {
    min-width: 20px;
    padding: 0 2px;
    border-left: 1px solid #dedada;
    color: #a0aab2;
}

.mat-icon.mat-small-icon {
    font-size: 21px;
    width: 21px;
    height: 21px;
}

.search-with-border .search-input-form {
    border: 1px solid #e6e9ee;
    border-radius: 4px;
}


/*unicornTemp THEME COLOR*/
.btn-unicornTemp {
    background-color: #ffffff;
    border: solid 1.5px var(--action);
    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--menu);
}

.btn-unicornTemp-plain {
    background-color: var(--action);
    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.btn-unicornTemp-default {
    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

.btn-unicornTemp:focus,
.btn-unicornTemp.focus {
    color: #ffffff;
    background-color: var(--action);
}

.btn-unicornTemp:hover {
    color: #ffffff;
    background-color: var(--action);
}

.btn-unicornTemp:active,
.btn-unicornTemp.active,
.open > .dropdown-toggle.btn-unicornTemp {
    color: var(--menu);
}

    .btn-unicornTemp:active:hover,
    .btn-unicornTemp.active:hover,
    .open > .dropdown-toggle.btn-unicornTemp:hover,
    .btn-unicornTemp:active:focus,
    .btn-unicornTemp.active:focus,
    .open > .dropdown-toggle.btn-unicornTemp:focus,
    .btn-unicornTemp:active.focus,
    .btn-unicornTemp.active.focus,
    .open > .dropdown-toggle.btn-unicornTemp.focus {
        color: #ffffff;
    }

.btn-unicornTemp:active,
.btn-unicornTemp.active,
.open > .dropdown-toggle.btn-unicornTemp {
    background-image: none;
}

.btn-unicornTemp.disabled,
.btn-unicornTemp[disabled],
fieldset[disabled] .btn-unicornTemp,
.btn-unicornTemp.disabled:hover,
.btn-unicornTemp[disabled]:hover,
fieldset[disabled] .btn-unicornTemp:hover,
.btn-unicornTemp.disabled:focus,
.btn-unicornTemp[disabled]:focus,
fieldset[disabled] .btn-unicornTemp:focus,
.btn-unicornTemp.disabled.focus,
.btn-unicornTemp[disabled].focus,
fieldset[disabled] .btn-unicornTemp.focus,
.btn-unicornTemp.disabled:active,
.btn-unicornTemp[disabled]:active,
fieldset[disabled] .btn-unicornTemp:active,
.btn-unicornTemp.disabled.active,
.btn-unicornTemp[disabled].active,
fieldset[disabled] .btn-unicornTemp.active {
    background-color: var(--action);
    color: #ffffff;
    opacity: 0.4;
}

.btn-unicornTemp .badge {
    color: var(--menu);
    background-color: #ffffff;
}

.btn-unicornTemp-plain:focus,
.btn-unicornTemp-plain.focus {
    color: #ffffff;
    background-color: var(--action);
}

.btn-unicornTemp-plain:hover {
    color: #ffffff;
    background-color: #52dacb;
}

.btn-unicornTemp-plain:active,
.btn-unicornTemp-plain.active,
.open > .dropdown-toggle.btn-unicornTemp-plain {
    color: #ffffff;
}

    .btn-unicornTemp-plain:active:hover,
    .btn-unicornTemp-plain.active:hover,
    .open > .dropdown-toggle.btn-unicornTemp-plain:hover,
    .btn-unicornTemp-plain:active:focus,
    .btn-unicornTemp-plain.active:focus,
    .open > .dropdown-toggle.btn-unicornTemp-plain:focus,
    .btn-unicornTemp-plain:active.focus,
    .btn-unicornTemp-plain.active.focus,
    .open > .dropdown-toggle.btn-unicornTemp-plain.focus {
        color: #ffffff;
    }

.btn-unicornTemp-plain:active,
.btn-unicornTemp-plain.active,
.open > .dropdown-toggle.btn-unicornTemp-plain {
    background-image: none;
}

.btn-unicornTemp-plain.disabled,
.btn-unicornTemp-plain[disabled],
fieldset[disabled] .btn-unicornTemp-plain,
.btn-unicornTemp-plain.disabled:hover,
.btn-unicornTemp-plain[disabled]:hover,
fieldset[disabled] .btn-unicornTemp-plain:hover,
.btn-unicornTemp-plain.disabled:focus,
.btn-unicornTemp-plain[disabled]:focus,
fieldset[disabled] .btn-unicornTemp-plain:focus,
.btn-unicornTemp-plain.disabled.focus,
.btn-unicornTemp-plain[disabled].focus,
fieldset[disabled] .btn-unicornTemp-plain.focus,
.btn-unicornTemp-plain.disabled:active,
.btn-unicornTemp-plain[disabled]:active,
fieldset[disabled] .btn-unicornTemp-plain:active,
.btn-unicornTemp-plain.disabled.active,
.btn-unicornTemp-plain[disabled].active,
fieldset[disabled] .btn-unicornTemp-plain.active {
    background-color: var(--action);
    color: #ffffff;
    opacity: 0.4;
}

/*unicornTemp THEME COLOR*/

.xcut-badge {
    background-color: var(--text);
    font-family: Roboto;
    font-size: 10px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    display: inline-block;
    text-transform: uppercase;
    margin-left: -13px;
}

.point-unicornTemp {
    background-color: var(--action);
}

.ui-select-bootstrap .ui-select-choices-row.active > span {
    background-color: var(--action);
}

/*PORT*/

.manage-connector {
    background-color: var(--action);
    height: 31%
}

.manage-component {
    background-color: var(--action);
    background-color: #00cfb5;
    height: 100%;
    padding-left: 0;
}

/*Abstract-Configurations*/
.icon-show-new-property {
    color: white;
    background-color: var(--action);
    text-align: center;
    padding-top: 1px;
}

/*Select Version*/
.select-version-isCurrent {
    background-color: var(--action);
    color: white;
}

/*CoreIt.html*/
.context-welcome-to {
    width: 133px;
    height: 29px;
    font-family: Roboto;
    font-size: 25px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--menu);
}

.context-text {
    width: 90px;
    height: 29px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--menu);
    border-bottom: 2px solid var(--action);
}

.context-name {
    width: 645px;
    height: 61px;
    font-family: Roboto;
    font-size: 45px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--menu);
}

.context-name-strong {
    font-weight: 800;
    display: inline;
}


.context-page {
    padding-left: 100px;
    padding-top: 75px
}

.tile {
    padding: 0.4em;
    cursor: pointer;
    float: left;
}

    /*.tile:hover .tile-body-content {
        border: solid 1px rgb(43, 125, 188);
    }*/

    .tile .tile-body-content {
        border: solid 1px #cfcfcf;
        /*opacity: 0.9;*/
    }

    .tile.small {
        width: 8em;
        height: 8em;
    }

    .tile.middle {
        width: 10em;
        height: 10em;
    }

    .tile.large {
        width: 12em;
        height: 12em;
    }

    .tile.long {
        width: 14em;
        height: 10em;
    }

.tile-body {
    background-color: grey;
    height: 100%;
    width: 100%;
}

.tile-body-content {
    position: relative;
}

.tile.small .tile-body-content {
    width: 7.2em;
    height: 7.2em;
}

.tile.middle .tile-body-content {
    width: 9.2em;
    height: 9.2em;
}

.tile.large .tile-body-content {
    width: 11.2em;
    height: 11.2em;
}

.tile.long .tile-body-content {
    width: 13.2em;
    height: 9.2em;
}

.tile-selector {
    position: relative;
    z-index: 2;
    display: none;
    padding: 0;
}

.tile.small .tile-selector {
    margin: 0 0.2em;
}

.tile.middle .tile-selector,
.tile.large .tile-selector,
.tile.long .tile-selector {
    margin: 0.25em 0.4em;
}

.tile:hover .tile-selector {
    display: block;
}

.tile-menu {
    position: absolute;
    z-index: 1;
    right: 0;
}

.tile.small .tile-menu {
    height: 1.4em;
}

.tile.middle .tile-menu,
.tile.large .tile-menu,
.tile.long .tile-menu {
    height: 1.8em;
}

.tile-menu.open {
    width: 100%;
}

.tile-menu > div {
    position: absolute;
    z-index: 1;
}

.tile-menu-icon {
    cursor: pointer;
    float: right;
    color: #585858;
}

    .tile-menu-icon:hover, .tile-menu-icon:focus {
        color: #a4a4a4;
    }

.tile.small .tile-menu-icon {
    width: 100%;
}

.tile.middle .tile-menu-icon,
.tile.large .tile-menu-icon,
.tile.long .tile-menu-icon {
    width: 100%;
}

.tile-menu-icon .icon {
    float: right;
}

.tile.small .tile-menu-icon .icon {
    font-size: 130%;
    margin: 0 0.15em;
}

.tile.middle .tile-menu-icon .icon {
    font-size: 150%;
    margin: 0 0.25em;
}

.tile.large .tile-menu-icon .icon,
.tile.long .tile-menu-icon .icon {
    font-size: 150%;
    margin: 0.1em 0.25em;
}

.tile-menu-items {
    overflow-y: auto;
    background-color: transparent;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 90%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

    .tile-menu-items li:last-child {
        margin-bottom: 0.2em;
        border-bottom: solid 1px #D2D2D2;
    }

.tile.small .tile-menu-items {
    height: 4.4em;
}

.tile.middle .tile-menu-items,
.tile.long .tile-menu-items {
    height: 5.1em;
}

.tile.large .tile-menu-items {
    height: 7.3em;
}

.tile-menu-item {
    width: 100%;
    padding-left: 0.5em;
    border-top: solid 1px #D2D2D2;
}

    .tile-menu-item div .icon, .tile-menu-item div span {
        display: inline-block;
    }

    .tile-menu-item div .icon {
        text-align: center;
        min-width: 1.2em;
    }

    .tile-menu-item div span {
        padding-left: 0.3em;
    }

    .tile-menu-item div {
        display: table-cell;
        vertical-align: middle;
        color: #585858;
    }

.tile.small .tile-menu-item div {
    height: 1.5em;
}

.tile.middle .tile-menu-item div,
.tile.long .tile-menu-item div {
    height: 1.75em;
}

.tile.large .tile-menu-item div {
    height: 2em;
}

.tile-content {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FFFFFF;
}

.tile-contextual {
    color: #585858;
}

.tile.small .tile-contextual {
    height: 5.4em;
}

.tile.middle .tile-contextual,
.tile.long .tile-contextual {
    height: 6.4em;
}

.tile.large .tile-contextual {
    height: 8.4em;
}

.tile-contextual > div {
    height: 100%;
}

.tile-content-left {
    height: 100%;
    float: left;
    width: 50%;
    display: table;
    text-align: center;
}

.tile-content-right {
    height: 100%;
    float: left;
    width: 50%;
    display: table;
    text-align: center;
}

.tile-infos {
    /*background-color: rgb(43, 125, 188);*/
    z-index: 1;
    bottom: 0;
    width: 100%;
    padding: 0.2em 0.3em;
}

.tile.small .tile-infos {
    height: 1.7em;
}

.tile.middle .tile-infos,
.tile.long .tile-infos,
.tile.large .tile-infos {
    height: 2.65em;
}

.overflow-text {
    font-size: 85%;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.tile-title {
    font-weight: bold;
    color: white;
}

.tile-more {
    color: white;
}

.tile.small .tile-more {
    display: none !important;
}

.tile-menu.open > .tile-contextual {
    visibility: hidden;
}

.open > .dropdown-menu-tile {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
}

.dropdown-menu-tile {
    -moz-opacity: .2;
    filter: alpha(opacity=20);/*ie opacity solution */
    opacity: .2;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    display: block;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all .2s linear;
}

.popover {
    min-width: 8em !important;
    /*max-width: 10em !important;*/
    box-shadow: none;
    word-wrap: break-word;
    border-radius: 0;
    z-index: 1000;
}

.popover-content {
    padding: 0.1em 0.3em;
}

.tile-small {
    margin: 10px;
    padding: 0;
    border-radius: 0;
    min-height: 160px;
    max-height: 160px;
    background-color: #F5F5F5;
}

    .tile-small:hover {
        border: 1px solid #2B7DBC;
    }

    .tile-small.selected:hover {
        border: 1px solid rgba(0,183,229,0.9);
    }

.tile-header {
    padding: 5px 5px 5px 10px;
    min-height: 40px;
    max-height: 40px;
}

.tile-selector {
    display: inline;
    float: left;
    padding-top: 4px;
}

.tile-toggler {
    display: inline;
    float: right;
    padding: 5px 5px 0 0;
}

.tile-actions {
    min-height: 70px;
    height: 70px;
    max-height: 70px;
}

    .tile-actions.without-header {
        min-height: 110px;
        height: 110px;
        max-height: 110px;
    }

.tile-name {
    background-color: #2B7DBC;
    min-height: 50px;
    height: 50px;
    max-height: 50px;
    width: 100.3%;
    display: table;
}

    .tile-name span {
        padding-left: 20px;
        padding-right: 20px;
        display: table-cell;
        vertical-align: middle;
        font-size: 120%;
        font-weight: bold;
        color: #fff;
    }

.tile-description {
    min-height: 70px;
    height: 70px;
    max-height: 70px;
    display: table;
    width: 100%;
    padding: 0 10px 0 10px;
}

    .tile-description.without-header {
        min-height: 110px;
        height: 110px;
        max-height: 110px;
    }

.tile-description-content {
    display: table-cell;
    vertical-align: middle;
}

.action {
    float: left;
    height: 100%;
    display: inline-block;
}

    .action a {
        height: 70px;
        border-radius: 0;
        color: #585858;
        background-color: #F9F9F9;
    }

.without-header .action a {
    height: 110px;
}

.action a:hover {
    background-color: white;
    color: #2B7DBC;
}

.action .thumbnail {
    border: 0;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
    border-top: 1px solid #E5E5E5;
}

.action:hover .thumbnail {
    border: 0;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
    border-top: 1px solid #E5E5E5;
}

.action a {
    font-size: 200%;
}

.action div {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .action div i {
        display: table-cell;
        vertical-align: middle;
    }

.tile-small.selected .tile-name, .tile-small.selected .onoffswitch-inner:before {
    background-color: rgba(0,183,229,0.9);
}

.storeflow-title {
    color: var(--text);
}

.sub-tile-container {
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding: 10px;
    min-height: 161px;
}

.cert-button {
    height: 37px;
    width: 50px;
}

    .cert-button span {
        padding-top: 35%;
    }

    .cert-button input {
        display: none;
    }

.cert-textarea {
    word-wrap: break-word;
    min-height: 37px;
    height: auto;
}

.cert-textarea.error {
    border-color: #f34235;
}

.cert-error {
    color: #f34235;
}

.cert-warning-date {
    padding-left: 15px;
}

.cert-encoded-error-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 9px;
    color: #f34235;
}

.cert-subtitle {
    padding-top: 20px;
    font-size: 16px;
}
.properties {
    /*width: 0 !important;*/
    height: 0 !important;
}

.properties-wrapper {
    display: none;
}

.in-app .properties-wrapper {
    display: block;
}

.properties-wrapper {
    position: fixed;
    width: 285px;
    top: 47px;
    bottom: 0;
    right: -100%;
    z-index: 310;
    -webkit-transition: right 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition: right 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    transition: right 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

.pw-wide {
    width: 80% !important;
    right: -80%;
}
.properties #searchInput {
    width: 100%;
}
.pw-wide #searchInput {
    width: 300px;
}


.properties-wrapper > .properties-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: #dadaea 1px solid;
    padding-right: 20px;
}

        .properties-wrapper > .properties-inner .properties-button {
            position: absolute;
            top: 50px;
            right: 100%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: inherit;
            border: inherit;
            border-right: #fff;
            cursor: pointer;
            text-align: center;
            -webkit-transition: top .3s ease .1s, right .3s ease .1s, box-shadow 0s linear .3s, border .3s linear .3s, background 0s linear .3s;
            -o-transition: top .3s ease .1s, right .3s ease .1s, box-shadow 0s linear .3s, border .3s linear .3s, background 0s linear .3s;
            transition: top .3s ease .1s, right .3s ease .1s, box-shadow 0s linear .3s, border .3s linear .3s, background 0s linear .3s;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16) !important;
        }

            .properties-wrapper > .properties-inner .properties-button > em {
                font-size: 20px;
                color: #8394a9;
            }

                .properties-wrapper > .properties-inner .properties-button > em:before {
                    -webkit-transition: content 0s linear 0.4s;
                    -o-transition: content 0s linear 0.4s;
                    transition: content 0s linear 0.4s;
                    content: "\e023";
                }

        /*.properties-wrapper > .properties-inner:after {
            content: "";
            position: absolute;
            background-color: #fff;
            top: 0;
            left: -5;
            width: 5px;
            height: 50px;
        }*/

    .properties-wrapper.visible {
        right: 0;
    }

        .properties-wrapper.visible .properties-button {
            top: -5px;
            right: 15px;
            border: 0;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            background-color: transparent;
            -webkit-transition: top .3s ease .1s, right .3s ease .1s;
            -o-transition: top .3s ease .1s, right .3s ease .1s;
            transition: top .3s ease .1s, right .3s ease .1s;
        }

            .properties-wrapper.visible .properties-button > em:before {
                content: "\e117";
            }

/*.setting-color {
    padding: 0 5px;
}

    .setting-color > label {
        display: block;
        position: relative;
        height: 40px;
        margin: 0 10px;
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        border: 1px solid #a0aab2;
    }

        .setting-color > label:first-child {
            margin-left: 0;
        }

        .setting-color > label:last-child {
            margin-right: 0;
        }

        .setting-color > label .list-table {
            height: 100%;
            margin: 0;
        }

        .setting-color > label > .color {
            display: block;
            height: 18px;
        }

        .setting-color > label > .split {
            display: block;
        }

            .setting-color > label > .split:before,
            .setting-color > label > .split:after {
                content: " ";
                display: table;
            }

            .setting-color > label > .split:after {
                clear: both;
            }

            .setting-color > label > .split > .color {
                display: block;
                height: 37.5px;
            }

                .setting-color > label > .split > .color:first-child {
                    float: left;
                    width: 70%;
                }

                .setting-color > label > .split > .color:last-child {
                    float: right;
                    width: 30%;
                }

        .setting-color > label > .icon-check {
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            width: 20px;
            height: 20px;
            margin-top: -10px;
            margin-left: -10px;
            text-align: center;
            font-size: 1.33333333em;
            vertical-align: -15%;
            color: #fff;
            opacity: 0;
        }

        .setting-color > label > input[type="radio"] {
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }

            .setting-color > label > input[type="radio"]:checked + .icon-check {
                opacity: 1 !important;
            }*/

/*.back-bar-title {
    bottom: 20%;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: left bottom 0;
    left: 13%;
    float: left;
    text-transform: uppercase;
}

.reset-counter {
    counter-reset: section;
}

.number-title {
    bottom: 2%;
    position: absolute;
    left: 41%;
    float: left;
    text-transform: uppercase;
}

    .number-title::before { 
        counter-increment: section;
        content: counter(section);
    }

.back-bar-icon-title {
    font-size: 1.3em;
    left: 35%;
    margin-top: 23px;
    position: absolute;
    color: #515d6e;
}

.hov {
    position: fixed;
    width: 50px;
    top: 70px;
    bottom: 0;
    background-color: #ffffff;
    border-left: 1px solid #f0f0f0;
}

    .hov:hover {
        background-color: #f0f0f0;
    }

@media all and (max-width: 768px) {
    .hov {
        background-color: #ffffff;
        border-left: 1px solid #f0f0f0;
        min-height: 50px;
        position: relative;
        z-index: 50;
        width: 100%;
        bottom: inherit;
        top: inherit;
    }

        .hov:hover {
            background-color: #f0f0f0;
        }

    .back-bar-icon-title {
        font-size: 1.3em;
        left: 1%;
        bottom: 25%;
        margin-top: 20px;
        position: absolute;
        color: #515d6e;
    }

    .back-bar-title {
        bottom: 20%;
        left: 10%;
        position: absolute;
        color: #515d6e;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
    }
}*/

.panel-pager.ng-enter{
     animation: fadeIn 0.8s;
}

/*.panel-pager.ng-leave {
     animation: fadeOut 0.8s;
}*/

.endpoint_TopCenter, .endpoint_BottomCenter, .endpoint_LeftMiddle, .endpoint_RightMiddle{
    display:inline-block;

}
js-plumb-canvas{
    background-color: black;
    background-repeat: repeat;

    position: relative;
    left:0;
    top:0;
}

.window:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
    opacity:0.6;
    filter:alpha(opacity=60);
}


.jsplumb-endpoint.jsplumb-endpoint-anchor.jsplumb-draggable.jsplumb-droppable {
    z-index: 30;
    cursor: crosshair;
}

.state_window {
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.8;
    width: 200px;
    height: 130px;
    line-height: 130px;
    cursor: pointer;
    text-align: center;
    z-index: 20;
    position: absolute;
    color: white;
    font-family: helvetica, sans-serif;
    padding: 0.5em;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
    cursor: move;
}

    .state_window.unicornTemp {
        height: 150px;
        box-shadow: none;
        -o-box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }


/* ancien page loader*/
.load {
    position: relative;
    margin: 0px auto 50px auto;
    width: 100px;
    height: 80px;
}

.gear {
    position: absolute;
    z-index: -10;
    width: 40px;
    height: 40px;
    animation: spin 5s infinite;
}

.two {
    left: 40px;
    width: 80px;
    height: 80px;
    animation: spin-reverse 5s infinite;
}

.three {
    top: 45px;
    left: -10px;
    width: 60px;
    height: 60px;
}

@keyframes spin {
    50% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    50% {
        transform: rotate(-360deg);
    }
}

.blur-circle {
    position: absolute;
    top: -19px;
    left: -19px;
}

.text-loader {
    color: #515d6e;
    text-align: center;
    font-size: 18px;
}

.page.loading-center {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 47%;
}

.page.hourglass {
    display: block;
    background: #f0f0f0;
    /*margin:3em auto;*/
    width: 2em;
    height: 4em;
    box-shadow: inset black 0 0 0 0, inset #585f69 0 2em 0 0, inset #f0f0f0 0 0 4em 0 !important;
    animation: pageHourglass 1s linear infinite;
}

.page.outer {
    fill: #585f69;
}

.page.middle {
    fill: #f0f0f0;
}

@keyframes pageHourglass {
    0% {
        transform: rotate(0deg);
        box-shadow: inset #f0f0f0 0 0 0 0, inset #585f69 0 2em 0 0, inset #f0f0f0 0 4em 0 0, inset #585f69 0 4em 0 0;
    }

    80% {
        transform: rotate(0deg);
        box-shadow: inset #f0f0f0 0 2em 0 0, inset #585f69 0 2em 0 0, inset #f0f0f0 0 2em 0 0, inset #585f69 0 4em 0 0;
    }

    100% {
        transform: rotate(180deg);
        box-shadow: inset #f0f0f0 0 2em 0 0, inset #585f69 0 2em 0 0, inset #f0f0f0 0 2em 0 0, inset #585f69 0 4em 0 0;
    }
}


/*ancien panel loader*/
.panelLoader.loading-center {
    position: absolute;
    z-index: 999;
    top: 35%;
    left: 45%;
}

.panelLoader.hourglass {
    display: block;
    background: #fff;
    /*margin:3em auto;*/
    width: 2em;
    height: 4em;
    box-shadow: inset black 0 0 0 0, inset #585f69 0 2em 0 0, inset #fff 0 0 4em 0;
    animation: panelHourglass 1s linear infinite;
}

.panelLoader.outer {
    fill: #585f69;
}

.panelLoader.middle {
    fill: #fff;
}

@keyframes panelHourglass {
    0% {
        transform: rotate(0deg);
        box-shadow: inset #fff 0 0 0 0, inset #585f69 0 2em 0 0, inset #fff 0 4em 0 0, inset #585f69 0 4em 0 0;
    }

    80% {
        transform: rotate(0deg);
        box-shadow: inset #fff 0 2em 0 0, inset #585f69 0 2em 0 0, inset #fff 0 2em 0 0, inset #585f69 0 4em 0 0;
    }

    100% {
        transform: rotate(180deg);
        box-shadow: inset #fff 0 2em 0 0, inset #585f69 0 2em 0 0, inset #fff 0 2em 0 0, inset #585f69 0 4em 0 0;
    }
}




/*panel loader*/

.panelLoader {
    margin: 0;
    padding: 0;
}

.cs-loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.cs-loader-inner {
    transform: translateY(-50%);
    top: 50px;
    position: absolute;
    width: calc(100%);
    color: #585f69;
    padding: 0 100px;
    text-align: center;
}

    .cs-loader-inner label {
        font-size: 20px;
        opacity: 0;
        display: inline-block;
    }

@keyframes lol {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    33% {
        opacity: 1;
        transform: translateX(0px);
    }

    66% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 0;
        transform: translateX(100px);
    }
}

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

    33% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    66% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

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

.cs-loader-inner label:nth-child(6) {
    -webkit-animation: lol 3s infinite ease-in-out;
    animation: lol 3s infinite ease-in-out;
}

.cs-loader-inner label:nth-child(5) {
    -webkit-animation: lol 3s 100ms infinite ease-in-out;
    animation: lol 3s 100ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(4) {
    -webkit-animation: lol 3s 200ms infinite ease-in-out;
    animation: lol 3s 200ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(3) {
    -webkit-animation: lol 3s 300ms infinite ease-in-out;
    animation: lol 3s 300ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(2) {
    -webkit-animation: lol 3s 400ms infinite ease-in-out;
    animation: lol 3s 400ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(1) {
    -webkit-animation: lol 3s 500ms infinite ease-in-out;
    animation: lol 3s 500ms infinite ease-in-out;
}



/*page loader*/


.loader {
    position: relative;
    width: 104px;
    height: 20px;
    margin: 28px auto;
}

.dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #ccc;
    position: absolute;
}

.dot_1 {
    animation: animateDot1 1.5s linear infinite;
    left: 28px;
}

.dot_2 {
    animation: animateDot2 1.5s linear infinite;
    animation-delay: 0.5s;
    left: 56px;
}

.dot_3 {
    animation: animateDot3 1.5s linear infinite;
    left: 28px;
}

.dot_4 {
    animation: animateDot4 1.5s linear infinite;
    animation-delay: 0.5s;
    left: 56px;
}

@keyframes animateDot1 {
    0% {
        transform: rotate(0deg) translateX(-28px);
    }

    25% {
        transform: rotate(180deg) translateX(-28px);
    }

    75% {
        transform: rotate(180deg) translateX(-28px);
    }

    100% {
        transform: rotate(360deg) translateX(-28px);
    }
}

@keyframes animateDot2 {
    0% {
        transform: rotate(-0deg) translateX(-28px);
    }

    25% {
        transform: rotate(-180deg) translateX(-28px);
    }

    75% {
        transform: rotate(-180deg) translateX(-28px);
    }

    100% {
        transform: rotate(-360deg) translateX(-28px);
    }
}

@keyframes animateDot3 {
    0% {
        transform: rotate(0deg) translateX(28px);
    }

    25% {
        transform: rotate(180deg) translateX(28px);
    }

    75% {
        transform: rotate(180deg) translateX(28px);
    }

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

@keyframes animateDot4 {
    0% {
        transform: rotate(-0deg) translateX(28px);
    }

    25% {
        transform: rotate(-180deg) translateX(28px);
    }

    75% {
        transform: rotate(-180deg) translateX(28px);
    }

    100% {
        transform: rotate(-360deg) translateX(28px);
    }
}

/*Item Loader*/
.loader-item {
    border: 2px solid #dadada;
    border-top: 2px solid #555;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 2s linear infinite;
}

.loader-item-small {
    border: 2px solid #dadada;
    border-top: 2px solid #555;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.l-cell, .l-cell-wrapper {
    overflow: hidden;
}

.ace_folding-enabled > .ace_gutter-cell {
    font-size: 15px;
}
 
.divInfoData, .divResourceName {
    background-color: #ffffff;
    margin-bottom: 1em;
    padding: 1em;
}

.divInfoData {
    max-width: 48%;
    display: inline-block;
}

#flex-container {
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    left: 0px;
    margin-top: 11.5em;
    padding: 1em;
    position: absolute;
    top: 0px !important;

    /* these 3 lines are to prevents an unsightly scrolling bounce affect on Safari */
    height: 100%;
    width: 100%;
    overflow: auto;
}

#flex-container > div {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    -webkit-flex-grow: 1;
    -moz-flex-frow: 1;
    flex-grow: 1;
    position: relative;
}

.acediff-class {
    border-bottom:6px solid grey;
    bottom: 0;
    position: absolute !important;
    top: 0;
    width: 100%;
}

.ace_scroller {
    border: #ebebeb solid;
}

.ace-tm .ace_gutter {
    background: #a2d7f2;
    color: #3f51b5;
}

.ace_gutter-layer {
    background: #ffffff;
}

#flex-container > div#acediff-gutter {
    -webkit-flex: 0 0 60px;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    overflow: hidden;
}

#acediff-gutter svg {
    background-color: #ffffff;
}

.ace_gutter-layer {
    background: #ebebeb;
}

.acediff-diff {
    background-color: #d8f2ff;
    border-top: 1px solid #a2d7f2;
    border-bottom: 1px solid #a2d7f2;
    position: absolute;
    z-index: 4;
}

.acediff-diff.targetOnly {
    height: 0px !important;
    border-top: 1px solid #a2d7f2;
    border-bottom: 0px;
    position: absolute;
}

.acediff-connector {
    fill: #d8f2ff;
    stroke: #a2d7f2;
}

.acediff-copy-left {
    float: right;
}

.acediff-copy-right,
.acediff-copy-left {
    position: relative;
}

.acediff-copy-right div {
    color: #000000;
    cursor: pointer;
    text-shadow: 1px 1px #ffffff;
    position: absolute;
    margin: 2px 3px;
}

.acediff-copy-right div:hover {
    color: #004ea0;
}

#editor-left .ace_scroller {
    background-color: #f1f1f5;
    cursor: not-allowed !important;
}
.jsonSchemaBorder {
    border-top: 1px solid #797979;
    border-bottom: 1px solid #797979;
}

.jsonSchemaBorder .form-group {
    margin-right:0px;
    margin-left:0px;
}

.jsonSchemaBorder .properties {
    height: inherit !important;
}

.jsonSchemaBorder fieldset{
    margin-bottom:initial;
    padding-bottom:initial;
}
.jsonSchemaBorder .glyphicon{
    visibility: hidden;
}

.jsonSchemaBorder .ui-select-search{
    width:inherit !important;
}
.as-sortable-placeholder {
    border-radius: 0;
    border: dotted #cdcdcd 1px;
    background-color: #f1f1f1;
    width: 98% !important;
    height: 40px !important;
    margin-left: 5px;
}

.as-sortable-item {
    border: 0px;
    border-radius: 0;
}

.as-sortable-drag {
    width: 100%;
}

.droppable-container {
    background-color: #f4f5f5;
    border-radius: 0;
    display: table;
    height: 40px;
    margin-left: 5px;
}

.drop-element-width {
    width: 98%;
}

.drag-element-width {
    width: 100%;
}

.droppable-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


.steps-bar > li {
    font-size: 14px;
}

    .steps-bar > li:before {
        background: #F0F0F0;
    }

    .steps-bar > li.active:before {
        background: #00638F;
    }

.steps-bar.unicornTemp > li.active:before {
    background: var(--menu);
}

.steps-bar > li:after {
    width: 100%;
    background: #00638F;
    background-image: linear-gradient(to right, #00638F 50%, #F0F0F0 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.steps-bar.unicornTemp > li:after {
    background-image: linear-gradient(to right, var(--menu) 50%, #F0F0F0 50%);
}

.steps-bar > li.active:after {
    width: 100%;
    background: #00638F;
    background-image: linear-gradient(to right, #00638F 50%, #F0F0F0 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    /** START THE FINAL STATE STYLING **/
    background-position: bottom left;
}

.steps-bar.unicornTemp > li.active:after {
    background-image: linear-gradient(to right, var(--menu) 50%, #F0F0F0 50%);
}

.wizard-loader .cs-loader {
    position: relative;
}

.wizard-loader .cs-loader-inner {
    transform: none;
    top: 0;
    position: relative;
}