/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Nov 5, 2014, 5:55:07 PM
    Author     : Kubick
*/

/* primefaces tweaks */


html, body{
    height: 100%
}
body{
    background-color: #ecf0f5;
    margin:0px !important;
    counter-reset: h2;
    font-family: sans-serif;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 14px !important;
}
input.filter{
    border: 1px solid #dedede !important;
    box-shadow: none !important;
    border-radius: 4px;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: normal;
    font-size: 14px;
    background-image: url(../images/controls/search.png) !important;
    background-repeat: no-repeat !important;
    background-position: 95% 50% !important;
    background-size: 10% !important
}

input.search{
    border: 1px solid #dedede !important;
    border-radius: 0px;
    box-shadow: none !important;
    font-weight: normal;
    font-size: 14px;
    font-family: 'Source Sans Pro', sans-serif !important;
    margin: 0
}

.myMenu .djs-popup-label{
    padding-left: 5px;
}

.print-text-link {
    display: none;
}

/*TODO remove when implemented*/
.djs-overlay-drilldown{
    display: none
}

.djs-popup-backdrop{
    z-index: 2000 !important;
}

@media (min-width: 1200px) {
    .diagram-info-wrapper{
        display: flex;
    }
}

@media print {


    .print-text-link {
        display: table-cell;
    }

    a::after {
        display: none;
    }

    .text-center {
        text-align: left !important;
    }

    .process-state-PROPOSED {
        padding-left: 15px !important;
    }

    .margin-10-0 {
        margin: 0px 0px !important;
    }

    .width-20 {
        width: 30% !important;
    }

    .width70 {
        width: none !important;
    }

    .col-xs-8 {
        display: inline-block;
    }

    .col-md-12 {
        width: 100% !important;
        float: left;
    }

    .text-left {
        margin-left: 20px !important;
    }

    .box {
        width: 90%;
        border: none;
    }

    .border-grey, .border-top-grey {
        border: none !important;
    }

    #process\:diagram-panel {
        page-break-after: always;
    }

    a[data-toggle="tooltip"] {
        display: none;
    }

    .fa-user::before {
        display: none !important;
    }

    .col-xs-2 {
        display: none !important;
    }

    .form-group {
        padding-left: 0px !important;
        margin-bottom: 0px !important;
    }

    .col-md-4 {
        padding-left: 0px !important;
        margin-top: 0px !important;

    }

    .box-vlastnosti {
        position: absolute;
        top: 680px;
        width: 96%;
    }

    .ui-tabs-panel {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    #diagramView {
        position: absolute;
        top: 0px;
        height: 800px !important;
        transform: scale(0.75);
    }

    .io-import-export, .io-editing-tools, .bjs-powered-by, .btn-primary, #head-process, .ui-tabs-nav, .main-footer, .process-warning, .label-revision {
        display: none !important;
    }

    .ui-tabs-panel {
        display: block !important;
    }

    li[class="ui-state-default"] {
        display: block !important;
    }

    .sources {
        display: block !important;
        padding-bottom: 30px;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    p {
        padding-left: 0px !important;
    }

    span#process\:process_state\:text {
        padding-left: 13px;
    }

    .border-resources {
        display: none;
    }
    div#left-and-diagram-view {
        height: 1090px;
    }

    div#process\:frameView {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    div#process\:frameView .box {
        overflow: visible;
    }


    .description-panel::before {
        content:"Textový popis";
        font-size: 22px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        display: block;
        border-bottom: 1px solid #d2d6de;
    }

    .content-header::before {
        font-size: 22px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        display: block;
        border-bottom: 1px solid #d2d6de;
    }

    div#process-header::before {
        content: "Proces";
    }

    div#process\:header::before {
        /*process frame header*/
        content: "Procesní rámec";
    }

    .description-panel::after {
        content:"Zdroje";
        font-size: 22px;
        display: block;
        padding-top: 50px;
        padding-bottom: 5px;
        border-bottom: 1px solid #d2d6de;
    }

    .container-partial {
        padding-top: 0px !important;
        margin-top: 0px !important;
        padding-left: 0px !important;
        position: relative;
        right: 10px;
    }

    .process-state {
        padding: 0px !important;
    }

    .container-partial-np {
        position: absolute;
        width: 100%;
    }


    .ui-column-title {
        font-weight: 400;
    }

    .sources::before {
        font-weight: 600;
        font-size: 18px;
        padding-left: 10px;
        padding-top: 10px;
    }

    #sources-processes::before {
        content: "Procesy";
        display: block;
        background-color: gray;
    }
    #sources-datastores::before {
        content: "Informační systémy";
    }
    #sources-documents::before {
        content: "Dokumenty";
    }
    #sources-hints::before {
        content: "Pojmy a zkratky";
    }
    #sources-inputs::before {
        content: "Vstupy";
    }
    #sources-outputs::before {
        content: "Výstupy";
    }
    #sources-roles::before {
        content: "Role";
    }
    #sources-services::before {
        content: "Služby";
    }
    #sources-tags::before {
        content: "Skupiny rolí";
    }

    .print-detail-header {
        display: none !important;
    }

    .print-diagram {
        width: 100%;
    }

    .tip {
        display: none !important;
    }

    .breadcrumb {
        display: none !important;
    }

    .content-header {
        display: block !important;
        margin-left: 20px !important;
    }

    .box-title {
        margin-left: 12px !important;
        font-size: 22px !important;
    }

    .col-xs-10 {
        display: flex;
    }

    .col-xs-11 {
        width: 45% !important;
    }

    @page
    {
        size:landscape
    }



}

.ui-datepicker{
    z-index: 9999 !important;
}
.ui-widget {
    font-family: 'Source Sans Pro', sans-serif !important;
}
.ui-widget select {
    font-family: 'Source Sans Pro', sans-serif !important;
}
.ui-widget-overlay{
    background: #444 !important;
    opacity: 0.7 !important
}


.ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal{
    border: 0px;
    background-color: transparent;
    color: #dd4b39 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
}
.ui-message-error-icon{
    background: none;
}
.ui-message-error-icon:after{
    position:absolute;
    font-family: FontAwesome;
    top:0;
    left:0px;
    font-size: 16px;
    content: "\f071";
}
.ui-inputfield.ui-state-error{
    border-color: #dd4b39 !important;
}
.ui-message-error{
    border-color: #dd4b39 !important
}
/*growl*/
.ui-growl {
    width: 60%;
    position: fixed;
    top: 0px;
    left: 20%;
}
.ui-growl-message{
    width: 90%;
    padding: 0
}
.ui-growl-item-container{
    position: relative;
    margin: 0px;
    opacity: 1;
}
.ui-growl-item-container.ui-shadow{
    box-shadow: none;
}
.ui-growl-item-container.ui-state-highlight{
    text-shadow: none;
}
.ui-growl-item-container .ui-growl-message .ui-growl-title{
    display: inline-block
}
.ui-growl-message > *{
    display: inline-block
}
.ui-growl-message .ui-growl-title:after{
    padding: 0
}
.ui-growl-image{
    width: 0;
    height: 0;
    background: none;
    position:relative;
}
.ui-growl-title{
    padding: 0px
}
.ui-growl-image-error:before{
    position:absolute;
    font-family: FontAwesome;
    top:0;
    left:0px;
    font-size: 16px;
    content: "\f071";
}
.ui-growl-image-warn:before{
    position:absolute;
    font-family: FontAwesome;
    top:0;
    left:0px;
    font-size: 16px;
    content: "\f071";
}
.ui-growl-image-fatal:before{
    position:absolute;
    font-family: FontAwesome;
    top:0;
    left:0px;
    font-size: 16px;
    content: "\f05e";
}
.ui-growl-image-info:before{
    position:absolute;
    font-family: FontAwesome;
    top:0;
    left:0px;
    font-size: 16px;
    content: "\f129";
}
div[id="process:growl-error_container"] > div {
    background-color: #dd4b39 !important;
    border: 1px solid #d73925;
    background-image: none;
}
div[id="growl-error_container"] > div {
    background-color: #dd4b39 !important;
    border: 1px solid #d73925;
    background-image: none;
}
div[id="growl-info_container"] > div, div[id="growl-info-link_container"] > div {
    background-color: #00a65a;
    border: 1px solid  #008d4c !important;
    background-image: none;
}

div[id="growl-warn_container"]> div {
    border: 1px solid #e08e0b;
    background: #f39c12 !important;
    background-image: none;
}
div[id="growl-fatal_container"] > div {
    background-color: #dd4b39 !important;
    border: 1px solid #d73925;
    background-image: none;
}
.ui-growl-icon-close{
    display: block !important;
}
.ui-growl-icon-close.ui-icon.ui-icon-closethick{
    background-image: url("../images/jquery/ui-icons_ffffff_256x240.png");
}

.ui-tree{
    width: 100%
}
/* General */
.left-item i.fa {
    padding: 0 10px 0 0;
}
.no-decoration{
    text-decoration: none;
}

.float-right{
    float: right;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}

small{
    font-size: 15px;
    padding-left: 4px;
    font-weight: 300;
    color: #999;
}

.level-2{
    z-index:2000 !important
}
.level-3{
    z-index:3000 !important
}

.content-header>.breadcrumb.alter {
    position: static! important;
    float:  none! important;
    left: 15px !important;
}

/* info boxes background*/
.bg-col-pem-blue, .bg-col-pem-red-light, .bg-col-pem-green-dark, .bg-col-pem-blue-light, .bg-col-pem-orange, .bg-col-pem-yellow, .bg-col-pem-purple  {
    color: #fff ! important
}
.bg-col-pem-blue    {
    background-color: #3c8dbc !important
}
.bg-col-pem-red-light   {
    background: #dc4a38!important
}
.bg-turquoise {
    background-color: #00b7c3;
    color:white;
}

.bg-col-pem-green-dark  {
    background: #00a65a!important
}
.bg-col-pem-blue-grey   {
    background: #3D5F74!important
}
.bg-col-pem-blue-light  {
    background: #00c0ef!important
}
.bg-col-pem-orange      {
    background: #ff7701!important
}
.bg-col-pem-yellow      {
    background: #f39c12!important
}
.bg-col-pem-purple      {
    background: #ca195a!important
}
a .info-box {
    color: #000;
}

/* backgrounds */
.bg-pem-blue    {
    background: #3c8dbc !important
}
.bg-pem-blue-login {
    background: #3c8dbc
}
.bg-pem-blue-light  {
    background: #00c0ef
}
.bg-pem-blue-dark   {
    background: #367fa9
}
.bg-pem-green-dark  {
    background: #00a65a
}
.bg-pem-red         {
    background: #e24854
}
.bg-pem-orange      {
    background: #ff7701
}
.bg-pem-purple      {
    background: #ca195a
}
.bg-pem-red-light   {
    background: #dc4a38!important
}
.bg-pem-yellow      {
    background: #f39c12
}
.bg-pem-grey    {
    background: #f1f2f6
}
.bg-pem-grey-2  {
    background: #aab2bd
}
.bg-pem-white   {
    background: #fff
}
.bg-pem-secret  {
    background-image: url(../images/controls/lock.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 15px
}
.bg-pem-user    {
    background-image: url(../images/controls/user.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 15px
}
.bg-pem-login   {
    background-image: url(../images/login.png);
    background-repeat: no-repeat;
    background-position: 10px 50%;
}
.bg-pem-logout  {
    background-image: url(../images/logout.png);
    background-repeat: no-repeat;
    background-position: 10px 50%;
}
.bg-pem-search  {
    background-image: url(../images/controls/search.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: auto 50%
}

/* admin backgrounds */
.bg-pem-add     {
    background-image: url(../images/controls/add.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-save    {
    background-image: url(../images/controls/save.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-edit    {
    background-image: url(../images/controls/edit.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-remove  {
    background-image: url(../images/controls/remove.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-cancel  {
    background-image: url(../images/controls/cancel.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-version {
    background-image: url(../images/controls/version.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-upload  {
    background-image: url(../images/controls/upload.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-download{
    background-image: url(../images/controls/download.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-password{
    background-image: url(../images/controls/password.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-versions{
    background-image: url(../images/controls/versions.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-clean{
    background-image: url(../images/controls/clean.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-tools{
    background-image: url(../images/controls/tools.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-redirect{
    background-image: url(../images/controls/redirect.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}
.bg-pem-detail{
    background-image: url(../images/controls/detail.png) !important;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px
}


/* color */
.cr-pem-white{
    color: #fff
}
.cr-pem-yellow{
    color: #f39c12
}
.cr-pem-green{
    color: #8cc152
}
.cr-pem-blue {
    color: #4b89dc
}
.cr-pem-blue-dark {
    color: #234a55
}
.cr-pem-grey {
    color: #8D96A2
}
.cr-pem-grey-important {
    color: #8D96A2 !important
}
.cr-pem-grey-light {
    color: #cbcbcb
}

/* font-size */
.font-size-large {
    font-size: 30px;
}
.font-size-larger{
    font-size: 16px;
}
.font-size-normal{
    font-size: 14px;
}
.font-size-12    {
    font-size: 12px !important;
}
.font-size-14    {
    font-size: 14px !important;
}
.font-size-15    {
    font-size: 15px !important;
}
.font-size-16    {
    font-size: 16px !important;
}
.font-size-18    {
    font-size: 18px !important;
}
.font-size-20    {
    font-size: 20px !important;
}
.font-size-22    {
    font-size: 22px !important;
}
.font-size-30    {
    font-size: 30px !important;
}
.font-size-40    {
    font-size: 40px !important;
}

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

.entry-section-name {
    padding-left: 10px;
    font-style: oblique;
}
/*Line wrap*/
.line-wrap {
    white-space: normal;
    word-break: break-all
}

.no-wrap {
    white-space: nowrap;
}

/* font-style */
.normal{
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

/* layout */
.table{
    display: table
}
.table-cell{
    display: table-cell
}
.table-row{
    display: table-row
}

.block{
    display: block;
}
.inline-block{
    display: inline-block
}

.hidden {
    display: none !important;
}
.my_hide {
    display: none;
}

/* width */
.width-5    {
    width: 5%
}
.width-6    {
    width: 6%
}
.width-10   {
    width: 10%
}
.width-12   {
    width: 12%
}
.width-15   {
    width: 15%
}
.width-20   {
    width: 20%
}
.width-25   {
    width: 25%
}
.width-30   {
    width: 30%
}
.width-35   {
    width: 35%
}
.width-40   {
    width: 40%
}
.width-45   {
    width: 45%
}
.width-55   {
    width: 55%
}
.width-60   {
    width: 60%
}
.width-65   {
    width: 65%
}
.width-70   {
    width: 70%
}
.width-80   {
    width: 80%
}
.width-85   {
    width: 85%
}
.width-90   {
    width: 90%
}
.width-100  {
    width: 100%
}

.width-20-px{
    width: 20px
}
.width-45-px{
    width: 45px
}
.width-60-px{
    width: 60px
}
.width-70-px{
    width: 70px
}

/* height */
.min-height-400 {
    min-height: 400px;
}
.height-60{
    height: 60px;
}
.height-45{
    height: 45px;
}
.height-50{
    height: 50px;
}

/* images */
.image-60{
    height: 60px;
    width: auto;
}
.image-50{
    height: 50px;
    width: auto;
}
.image-40{
    height: 40px;
    width: auto;
}
.image-30{
    height: 30px;
    width: auto;
}
.image-20{
    height: 20px;
    width: auto;
}
.image-10{
    height: 10px;
    width: auto;
}

/* opacity */
.opacity-05{
    opacity: 0.5
}

/* aligns */
.vertical-middle{
    vertical-align: middle
}
.vertical-top   {
    vertical-align: top
}
.vertical-top   {
    vertical-align: top
}
.text-left      {
    text-align: left !important
}
.text-right     {
    text-align: right
}
/*.text-center    {text-align: center !important}*/
.text-grey      {
    color: #8D96A2 !important
}

/* paddings */
.padding-15     {
    padding:15px;
}
.padding-10     {
    padding:10px;
}
.padding-5      {
    padding:5px;
}
.padding-5-10   {
    padding:5px 10px;
}
.padding-0-5    {
    padding:0 5px;
}
.padding-0-8    {
    padding:0 8px;
}
.padding-0-20   {
    padding:0 20px;
}
.padding-5-0   {
    padding:10px 0
}
.padding-10-0   {
    padding:10px 0
}
.padding-15-0   {
    padding:15px 0
}
.padding-20-0   {
    padding:20px 0
}
.padding-20-10   {
    padding:20px 10px
}
.padding-10-40  {
    padding: 10px 40px;
}
.padding-20     {
    padding: 20px;
}
.padding-10-0-10-10{
    padding:10px 0px 10px 10px
}
.padding-10-0-10-40{
    padding: 10px 0px 10px 40px;
}
.padding-bottom-5{
    padding-bottom: 5px;
}
.padding-bottom-30{
    padding-bottom: 30px !important
}
.padding-left-5 {
    padding-left: 5px;
}
.padding-left-15 {
    padding-left: 15px;
}

.padding-btn-icons{
    padding:0px 8px 0px 0px
}
;

/* margin */
.margin-right-10     {
    margin-right: 10px !important;
}
.margin-right-3     {
    margin-right: 3px
}
.margin-right-5     {
    margin-right: 5px
}
.margin-0          {
    margin: 0px !important;
}
.margin-2-0          {
    margin: 2px 0px;
}
.margin-5            {
    margin: 5px;
}
.margin-6            {
    margin: 6px;
}
.margin-10           {
    margin: 10px;
}
.margin-30           {
    margin: 30px;
}
.margin-10-0         {
    margin: 10px 0px;
}
.margin-0-5         {
    margin: 0px 5px;
}
.margin-0-10         {
    margin: 0px 10px;
}
.margin-0-10-10-10   {
    margin: 0px 10px 10px 10px;
}
.margin-0-10-0-0     {
    margin: 0px 10px 0px 0px;
}
.margin-0-5-0-0     {
    margin: 0px 5px 0px 0px;
}
.margin-20-10         {
    margin: 20px 10px;
}
.margin-bottom-15 {
    margin-bottom: 15px !important;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.margin-top-10 {
    margin-top: 10px;
}

/* border */
.border-none{
    border:none;
}
.border-top-gray{
    border-top: 3px solid #b6b6b8
}
.border-top-bg-navy{
    border-top: 3px solid #001f3f
}
.border-top-blue{
    border-top: 3px solid #3c8dbc
}
.border-top-green{
    border-top: 3px solid #00a65a
}
.border-top-blue-light{
    border-top: 3px solid #00c0ef
}
.border-top-yellow{
    border-top: 3px solid #f39c12
}
.border-top-orange{
    border-top: 3px solid #ff7701
}
.border-top-red{
    border-top: 3px solid #e24854
}
.border-bottom-grey-light {
    border-bottom: 1px solid #f7f7f7
}
.border-top-grey-light {
    border-top: 1px solid #ccc
}
.border-top-grey {
    border-top: 3px solid #9a9a9a
}

.bg-pem-blue-light  {
    background: #00c0ef
}
.bg-pem-blue-dark   {
    background: #367fa9
}
.bg-pem-green-dark  {
    background: #00a65a
}
.bg-pem-red         {
    background: #e24854
}
.bg-pem-orange      {
    background: #ff7701
}
.bg-pem-purple      {
    background: #ca195a
}
.bg-pem-red-light   {
    background: #dc4a38
}
.bg-pem-yellow      {
    background: #f39c12
}
.bg-pem-grey-dark   {
    background: #9a9a9a
}

/* border - radius*/
.border-top-left-5   {
    border-top-left-radius: 5px
}
.border-bottom-left-5   {
    border-bottom-left-radius: 5px
}
.border-top-right-5   {
    border-top-right-radius: 5px
}
.border-bottom-right-5   {
    border-bottom-right-radius: 5px
}
.border-radius-top-6{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.border-radius-bottom-5{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.border-radius-3    {
    border-radius: 3px
}
.border-radius-5    {
    border-radius: 5px
}
.border-radius-8    {
    border-radius: 8px
}
.border-radius-15    {
    border-radius: 15px
}
.border-radius-left-15    {
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}
.border-radius-20   {
    border-radius: 20px
}


.border-grey {
    border-bottom: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2
}
.border-grey-top {
    border-top: 1px solid #e2e2e2;
}

/* custom components */
/* buttons */
.button.login.big  {
    padding: 6px  15px 6px 15px;
    font-size: 14px !important;
    color: #fff !important;
    font-style: normal;
    border: 1px solid #367fa9;
    background-color: #3b8dbd;
    vertical-align: middle;
    text-align: center;
}
.button.grey.big  {
    padding: 5px 20px;
    font-size: 15px !important;
    border: 1px solid #ddd;
    background-color: #f4f4f4 !important;
    color: #222d32 !important
}
.button.enter {
    padding: 10px 20px;
    background-color: #3b8dbd
}
.button       {
    display: inline-block;
    background-color: #f4f4f4;
    color: #999 !important;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 14px !important;
    text-decoration: none;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px
}
.button.login {
    display: inline-block;
    background-color: #3b8dbd;
    color: #fff !important;
    border: 1px solid #367fa9;
    padding: 5px 5px 5px 30px;
    font-size: 13px !important;
    text-decoration: none;
    border-radius: 5px;
    margin-left: 5px
}
.button.inactive {
    opacity: 0.4;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default
}

/* breadcrumb
.breadcrumb {list-style: none; overflow: hidden; font: 18px Helvetica, Arial, Sans-Serif; padding: 0; margin: 0;}
.breadcrumb li {float: left; position: relative; padding: 0 0 0 5px;}
.breadcrumb li a {
    color: #888;
    text-decoration: none;
    position: relative;
    display: block;
    float: left;
    font-weight: normal;
    font-size: 12px;
    float: left;
    padding: 0 5px;
}

.breadcrumb li.first a {
    color: #222;
}

.breadcrumb li:after{
    content: '>\00a0';
    position: absolute;
    color: #888;
    top: 0px;
    font-size: 12px;
}
*/

label.required:after {
    content: ' *';
    color: red;
}

/* primefaces datatables */
/*.pem-datatable {width: 100%;}*/
.pem-datatable .ui-sortable-column.ui-state-hover {
    border: none;
    box-shadow: none;
}
.pem-datatable thead th:focus {
    outline: none !important;
}
.pem-datatable.ui-datatable thead th{
    border: none;
    background: none;
    text-align: left;
    font-size: 14px
}
.pem-datatable.ui-datatable tbody td{
    border: none;
    background: none;
    font-size: 14px;
    text-align: left;
    white-space: normal;
    line-break: normal;
}
.pem-datatable.ui-datatable tbody tr{
    border: none;
    border-bottom: 1px solid #e6e9ee;
    border-top: 1px solid #e6e9ee;
    background: none;
    text-align: left
}
.pem-datatable.ui-datatable tbody tr{
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none;
}
.pem-datatable.ui-datatable tbody tr.ui-state-hover{
    background: none;
    border: none;
    border-bottom: 1px solid #e6e9ee;
    border-top: 1px solid #e6e9ee;
    box-shadow: none;
}
.pem-datatable.ui-datatable tbody tr.ui-state-highlight{
    background: #3c8dbc;
    text-shadow: none;
}
.pem-datatable.ui-datatable tbody   {
    border: none;
    background: none;
    text-align: left
}

/* primefaces dialogs */
.pem-dialog {
    max-width: 60%;
    min-width: 30%;
    z-index: 1060!important
}
.pem-dialog .dialog-list{
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto
}
.pem-dialog .ui-dialog-content {
    background: #fff;
    padding: 0;
}
.pem-dialog .ui-dialog-titlebar {
    background: #fff;
    color: #1a2226;
    font-weight: normal;
    text-shadow: none;
    padding: 0.5em 1em !important;
    font-size: 20px;
    border-bottom: 1px solid #ccc
}
.pem-dialog .ui-dialog-titlebar .ui-icon {
    background-image: url('../images/jquery/ui-icons_cacaca_256x240.png');
}
.pem-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {
    background-image: url('../images/jquery/ui-icons_6b6b6b_256x240.png') !important;
}
.pem-dialog .ui-inputfield {
    font-weight: normal !important;
    font-size: 16px !important;
    box-shadow: none !important
}
.pem-dialog .ui-resizable-handle{
    display:none !important;
}

.ui-growl {
    z-index: 1000000 !important
}

/* primefaces tree */
.pem-tree.ui-widget-content {
    border:none;
}
.pem-tree .ui-tree-container{
    width: 100%
}
.btn-primary {
    color: #fff !important;
    background-color: #367fa9 !important;
}

.ui-tree .ui-treenode-label


.ui-tree {
    width: 100%
}
.pem-tree .ui-icon{
    border-radius: 0px;
    vertical-align: middle;
}
.pem-tree .ui-tree-toggler      {
    vertical-align: middle
}
.pem-tree .ui-treenode  {
    display: block;
}
.pem-tree .ui-treenode-content        {
    display: inline-block;
    padding: 1px 5px 2px 3px;
    border-radius: 4px;
    margin: 2px
}
.pem-tree .ui-treenode-content:hover  {
    background: #99C5DF;
    color: #fff
}
.pem-tree .ui-treenode-label{
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: bold;
    color: #1a2226;
    margin: 0px;
    vertical-align: middle
}
.pem-tree .ui-treenode-label.ui-state-hover       {
    background: none;
    font-weight: bold;
    border: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff
}
.pem-tree .ui-treenode-label.ui-state-highlight   {
    background: none;
    font-weight: bold;
    border: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff
}
.pem-tree .ui-treenode-leaf-icon {
    margin: 2px;
    width: 11px;
    height: 11px;
    border: 2px solid black;
    border-radius: 10px;
    vertical-align: middle
}
.pem-tree .ui-treenode-content .ui-icon-triangle-1-s {
    background-image: url('../images/controls/minus.png') !important;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 90%
}
.pem-tree .ui-treenode-content .ui-icon-triangle-1-e {
    background-image: url('../images/controls/plus.png') !important;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 90%
}
.pem-tree .ui-treenode-content:hover .ui-icon-triangle-1-s {
    background-image: url('../images/controls/minus-white.png') !important;
    background-size: 90%
}
.pem-tree .ui-treenode-content:hover .ui-icon-triangle-1-e {
    background-image: url('../images/controls/plus-white.png') !important;
    background-size: 90%
}
.pem-tree .ui-treenode-content:hover .ui-treenode-leaf-icon {
    border: 2px solid #fff;
    vertical-align: middle;
}
.pem-tree .ui-treenode-content.ui-state-highlight   {
    background: #3B8DBD;
    color: #fff;
    border: none;
}
.pem-tree .ui-treenode-content.ui-state-highlight .ui-icon-triangle-1-s {
    background-image: url('../images/controls/minus-white.png') !important;
    background-size: 90%
}
.pem-tree .ui-treenode-content.ui-state-highlight .ui-icon-triangle-1-e {
    background-image: url('../images/controls/plus-white.png') !important;
    background-size: 90%
}
.pem-tree .ui-treenode-content.ui-state-highlight .ui-treenode-leaf-icon {
    border: 2px solid #fff;
    vertical-align: middle;
}
.pem-tree .ui-treenode-outline {
    outline: none !important
}

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-search{
    overflow: hidden;
    text-overflow: ellipsis;
}
.warning{
    padding: 10px;
    background: #f39c12;
    border-radius: 5px;
    margin-top: 5px
}

/* containers */
.container{
    display: inline-block
}
.container-partial{
    border-radius: 3px;
    background-color: #fff;
    padding: 10px 15px;
    margin: 0 0 10px 0;
    position: relative
}
.container-partial-mp{
    border-radius: 3px;
    background-color: #fff;
    padding: 10px;
    border-top: 3px solid #b6b6b8
}
.container-partial-np{
    border-radius: 3px;
    background-color: #fff;
    margin: 0 0 10px 0;
}

/* process states */
.process-state          {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 3px;
    color: #fff
}
.process-state-DRAFT    {
    background: #3bafda
}
.process-state-PROPOSED {
    background: #f6bb42
}
.process-state-UP_TO_DATE {
    background: #8cc152
}
.process-state-OUTDATED {
    background: #e08e0b
}
.process-state-ARCHIVED {
    background: #d73925
}
.process-state-DENIED   {
    background: #b5bbc8
}
.process-filter.inactive {
    opacity: 0.5;
    background: #dadada;
    color: #111
}

/* menu items */
.menu-item:hover {
    background: #5d9cec;
}
.menu-item {
    padding: 20px 10px;
}
.menu-item.active {
    background: #5d9cec;
}

/* tabviews */
.ui-tabs {
    padding: 0 !important;
}
.ui-tabs.ui-tabs-top > .ui-tabs-nav {
    padding: 0 !important;
}
.pem-tabview.no-padding .ui-tabs-panel {
    padding: 10px 0 !important
}
.pem-tabview.ui-widget-content {
    border: none;
}
.pem-tabview .ui-tabs-nav{
    background: none !important;
}
.pem-tabview .ui-tabs-nav li{
    font-weight: normal;
    margin: 0;
}
.pem-tabview.ui-tabs .ui-tabs-nav.ui-widget-header li a {
    color: #444;
    font-size: 14px;
    padding: 10px 15px
}
.pem-tabview .ui-tabs-nav li.ui-state-default{
    background: #fff;
    border: none;
    border-top: 3px solid #fff;
    top: 0px;
}
.pem-tabview.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li:first-of-type.ui-state-active{
    border-left-color: transparent !important;
}
.pem-tabview.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li {
    border-radius: 0px
}
.pem-tabview .ui-state-focus:focus {
    outline: none !important
}
.pem-tabview .ui-tabs-nav li:not(.ui-tabs-selected).ui-state-hover{
    background: #fff;
    /* border-left: 1px solid #cccfd6; */
    box-shadow: none;
}
.pem-tabview .ui-tabs-nav li:not(.ui-tabs-selected).ui-state-hover a{

    color: #999 !important;
}
.pem-tabview .ui-tabs-nav li:not(.ui-tabs-selected) a{
    padding-top: 13px !important;
    padding-bottom: 7px!important;
}
.pem-tabview.ui-tabs .ui-tabs-nav li.ui-state-default.ui-corner-top{
    border: none;
}
.pem-tabview.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-state-default.ui-corner-top.ui-state-hover{
    background-color: #fff;
}
.pem-tabview.ui-tabs.ui-tabs-top .ui-tabs-nav.ui-widget-header li.ui-state-active{
    border-top: 3px solid #3c8dbc !important;
}
.pem-tabview.ui-tabs .ui-tabs-nav li.ui-tabs-selected{
    background: #FFF;
    border-left: 1px solid #e6e6e6 !important;
    border-right: 1px solid #e6e6e6 !important;
}
.pem-tabview .ui-widget-header{
    border:none;
    border-bottom: 1px solid #e6e6e6;
}

/* box-shadow0*/
.pem-box-shadow{
    -webkit-box-shadow: 2px 2px 1px 0px rgba(228, 224, 224, 0.18);
    -moz-box-shadow:    2px 2px 1px 0px rgba(228, 224, 224, 0.18);
    box-shadow:         2px 2px 1px 0px rgba(228, 224, 224, 0.18)
}

.bootstrap-box-shadow{
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* decoration */
.decoration-none{
    text-decoration: none;
}

/* interactive */
.interactive {
    text-decoration: none;
    font-weight: bold;
}
.interactive img{
    height: 20px;
    width: auto;
    margin-left: 10px;
}

/* bpmn io tweaking */

.bpmn-modeler {
    width: 100%;
    height: 100%;
    position: relative
}
.bpmn-modeler .buttons {
    position: relative !important;
}
.bpmn-modeler.backup .io-import-export {
    display: none;
}
.bpmn-modeler.backup .io-editing-tools {
    display: none;
}
.bpmn-modeler.backup .bjs-powered-by {
    display: none;
}

.bpmn-modeler .io-import-export {
    position: absolute;
    left: 0px;
    bottom: 0px
}
.bpmn-modeler .io-editing-tools {
    position: absolute;
    right: 0px;
    top: 0px
}
.bpmn-modeler .bjs-powered-by {
    position: absolute;
    right: 0px;
    bottom: 0px
}


.bpmn-modeler .fullscreen {
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #fff
}



.cleaner{
    clear: both;
    visibility: hidden;
    margin: 0px;
}
.scaps{
    font-variant:small-caps;
}
.fsize35{
    font-size: 35px;
}
.ffsans{
    font-family: sans-serif
}
;
.fcenter{
    text-align: center;
}
.portallight{
    color: #d7dbee;
}
.portalbg{
    color: #a1c2ea;
}
.left{
    float:left
}
.buttons-div{
    padding: 10px 0px;
}
.error-message{
    background-image: url('../images/error.png');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    float: right;
    display: block
}
.form-input{
    padding: 5px;
}
.user-name{
    text-align: center;
    font-size: 25px;
    font-family: sans-serif;
    color: #52555A;
}
.width{
    width: 80%
}
.width20{
    width: 20%;
}
.width30{
    width: 30%;
}
.width70{
    width: 70%;
}
.width75{
    width: 75%;
}
.width80{
    width: 80%;
}
.bold{
    font-weight: bold;
}
.h1{
    font-size: 1.8em
}
.light td{
    background: #F7F7F7
}
.dark td{
    background: #EAEAEA
}
table td {
    padding: 5px;
}

/* TABLE COLUMN GENERAL */
.column10{
    width: 10%;
}
.column15{
    width: 15%;
}
.column20{
    width: 20%;
}
.column30{
    width: 30%;
}
.column40{
    width: 40%;
}
.column50{
    width: 50%;
}
.column60{
    width: 60%;
}
.column70{
    width: 70%;
}
.column80{
    width: 80%;
}
/*dialog divs borders*/
.round-div{
    border-radius: 5px;
    border: 1px solid #657b83;
    margin: 10px;
    padding: 10px;
}
.right{
    float: right
}

.buttons-row{
    float: right;
    padding: 20px 15px 15px 15px
}

.image60{
    height: 60px;
    width: auto;
}
.image50{
    height: 50px;
    width: auto;
}
.image40{
    height: 40px;
    width: auto;
}
.image30{
    height: 30px;
    width: auto;
}

.padding-right10{
    padding-right: 10px;
}
.padding-right0{
    padding-right: 0px !important;
}
.padding-right4{
    padding-right: 4px
}
.padding-left15{
    padding-left: 15px
}

/* LEFT MENU*/
#left-menu{
    width:220px;
    float: left;
    position: absolute;
    bottom: 0;
    top: 50px;
    background-color: #222d32
}
#left-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#left-menu ul li.header {
    color: #4b646f;
    background: #1a2226;
}
#left-menu ul li > a {
    display: block;
    color: #b8c7ce;
    text-decoration: none;
    font-size: 14px;
}

.left-item {
    border-left: 4px solid #222d32;
    position: relative;
}
.left-item.active {
    color: #fff !important;
    background: #1e282c;
    border-left: 4px solid #3c8dbc
}
.left-item:hover {
    color: #fff !important;
    background: #1e282c;
    border-left: 4px solid #3c8dbc
}
.left-item .count {
    padding: 2px 5px;
    border-radius: 5px;
    display: inline-block;
    position: absolute;
    top: 13px;
    right: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}

/* PAGE CONTENT */
#page-content{
    margin-left: 220px;
    background: #ecf0f5;
    padding: 10px;
    padding-bottom: 50px
}
#page-content h1{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0
}

/* HEADER style*/
#header     {
    font-size: 16px
}
#header a   {
    color: #fff;
    text-decoration: none;
}

/* SEARCH */
.search-input {
    background-color: #374850;
    color: #999999;
}
.search-input:focus{
    background-color: #fff;
    color: #000000
}
.empty-results{
    font-size: 20px;
    text-align: center;
    padding-top: 40px;
    color: #444
}

.search-results{
    padding-bottom: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 2px 2px 1px 0px rgba(228, 224, 224, 0.75);
    -moz-box-shadow:    2px 2px 1px 0px rgba(228, 224, 224, 0.75);
    box-shadow:         2px 2px 1px 0px rgba(228, 224, 224, 0.75);
}

.search-switches a{
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
}
.search-switches a.disabled{
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    color: #666666;
    font-size: 14px;
    -webkit-touch-callout: none;
}
.search-switches a.active{
    border-top: 3px solid #3d8ab8;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    color: #000000;
    font-weight: normal;
    font-size: 14px
}
/*
#header-text a {text-decoration: none; color: #fff;}
#header-user {float:right; padding-right: 20px;}
#header-user-menu {float:right; padding-right: 20px;}
#header-user-menu button{width: 30px; height: 30px;}
#header-user img {padding-right: 20px;}
#header-user span {padding-right: 20px; font-size: 25px; font-family: sans-serif; font-variant:small-caps; color: #fff;}
#header-user a {padding-right: 20px; font-size: 25px; font-family: sans-serif; font-variant:small-caps; color: #fff;}
#header-lang {float:right;}
#header-lang div {float:left; /*padding: 10px 0;*//*}
#header-lang img {width: 40px; height: auto; margin-right: 10px;}*/

/* ADMIN HEADER MENU */
#admin-menu {
    width: 950px;
    margin: 1px auto 20px auto;
}
#admin-menu li {
    display: inline;
}
#admin-menu a {
    float: left;
    font-variant:small-caps;
    padding: 1em 2em;
    text-decoration: none;
    font-size: 1.2em;
    font-family: sans-serif;
    color: #fff;
    font-weight: normal;
    background-color: #142C49;
}
/* FOOTER style*/
#footer{
    height:50px;
    bottom:0;
    left:0;
    right: 0;
    background: #fff;
    margin-left: 220px;
    border-top: 1px solid #dadcde;
    position: absolute
}
#wrapper {
    min-height:100%;
    position:relative;
}
/* LOGIN style*/
#login{
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: 1px solid #dedede;
    background: #fff;
    top: 60px;
}

#login label{
    font-size: 14px;
    font-weight: bold;
    padding-left: 20px;
}

#login input {
    border: 1px solid #dedede
}
/* MODEL SKIN */
.tenant-model{
    width: 350px;
    height: 300px;
    margin: 20px;
}
.tenant-model-cntrls{
    width: 50px;
    height: 300px;
}
.tenant-model-cntrls .tenant-model-cntrl{
    margin-bottom: 10px;
    background-color: #e8ecff;
    padding: 5px;
    border-left: 3px solid #304c6e;
}
.tenant-model-cntrls img{
    width: 90%;
    height: auto
}
.tenant-model-content{
    width: 300px;
    height: 300px;
    background-color: #304c6e;
    text-align: center;
    vertical-align: central
}
.tenant-model-content .name{
    padding: 10px;
}
.tenant-model-content .name a{
    color: #d7dbee;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 25px;
}

/* PROCESS SKIN */
.model-process{
    width: 350px;
    height: 300px;
    margin: 20px;
}
.model-process-cntrls{
    width: 50px;
    height: 300px;
}
.model-process-cntrls .model-process-cntrl{
    margin-bottom: 10px;
    background-color: #e8ecff;
    padding: 5px;
    border-left: 3px solid #304c6e;
}
.model-process-cntrls img{
    width: 90%;
    height: auto
}
.model-process-content{
    width: 300px;
    height: 300px;
    background-color: #304c6e;
    text-align: center;
    vertical-align: central
}
.model-process-content .name{
    padding: 10px;
}
.model-process-content .name a{
    color: #d7dbee;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 25px;
}

/* PROCESS-PAGE SKIN */
#process-area > div.ui-panel{
    margin-bottom: 20px !important;
}
#process-area.process-phase-DRAFT > div.ui-panel {
    border-left: 10px solid #92A8EF  !important
}
#process-area.process-phase-PROPOSED > div.ui-panel {
    border-left: 10px solid #E8DD00 !important
}
#process-area.process-phase-APPROVED > div.ui-panel {
    border-left: 10px solid #4CC245 !important
}
#process-area.process-phase-CANCELED > div.ui-panel {
    border-left: 10px solid #F78756  !important
}

#process-area.process-phase-DRAFT > div.ui-tabs {
    border-left: 10px solid #92A8EF  !important
}
#process-area.process-phase-PROPOSED > div.ui-tabs {
    border-left: 10px solid #E8DD00 !important
}
#process-area.process-phase-APPROVED > div.ui-tabs {
    border-left: 10px solid #4CC245 !important
}
#process-area.process-phase-CANCELED > div.ui-tabs {
    border-left: 10px solid #F78756  !important
}

button.process-phase-DRAFT{
    border-left: 10px solid #92A8EF  !important
}
button.process-phase-PROPOSED{
    border-left: 10px solid #E8DD00 !important
}
button.process-phase-APPROVED{
    border-left: 10px solid #4CC245 !important
}
button.process-phase-CANCELED{
    border-left: 10px solid #F78756  !important
}

.process-area-info-item{
    background-color: #304c6e;
    border: 1px dashed #ffffff;
    min-width: 100px;
    padding: 10px;
    margin-right: 10px;
}

#process-area-purpose{
    min-height: 80px;
    background-color: #304c6e;
    border: 1px dashed #ffffff;
    padding: 20px;
    margin: 20px 0px;
}
#process-area-desc{
    min-height: 500px;
    background-color: #304c6e;
    border: 1px dashed #ffffff;
    padding: 20px;
}




.dialog-content{
    padding: 5px 10px;
}

.dialog-buttons{
    text-align: right;
    display: table;
    width: 100%;
    border-top: 1px solid #ccc
}
.dialog-buttons .button{
    margin: 5px;
}

.admin-introduction{
    margin: 5px;
    font-family: sans-serif
}
.admin-block{
    width: 300px !important;
    height: 300px !important;
    float: left;
    margin: 5px;
}
.admin-block-text{
    padding: 10px;
    font-weight: bold;
}
.admin-block-link{
    padding: 10px;
}
.admin-block-link a{
    text-decoration: none;
    font-weight: bold;
    color: #8EA8C7  !important
}
.admin-block-link a:hover{
    color: #304c6e !important
}

#process-info .ui-tabs-panel a{
    color: #848DBA;
    /* font-weight: bold; */
    text-decoration: none;
    font-style: italic;
}

#process-info .ui-tabs-panel a > img{
    margin-left: 10px;
}

.process-dialog a{
    color: #848DBA !important;
    /* font-weight: bold; */
    text-decoration: none;
    font-style: italic;
}

.ul-list-container ul{
    list-style: none;
}
.ui-state-disabled.btn{
    cursor: not-allowed;
    opacity: .65;
}

.cursor-pointer {
    cursor: pointer;
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a {
    color: black;
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a:hover {
    color: #3c8dbc;
}


.ui-state-disabled.btn.btn-primary{
    background-color: #3c8dbc;
    border-color: #367fa9;
}

.removed{
    text-decoration: line-through !important;
    color: #716C62 !important;
}
.dialog-lang-notice{
    border: 1px solid #EFDB0D;
    background: #FAEEB3;
    padding: 10px;
}
.lang-active-false{
    opacity: 0.3;
}
span.process-phase-DRAFT{
    border-left: 10px solid #92A8EF  !important
}
span.process-phase-PROPOSED{
    border-left: 10px solid #E8DD00 !important
}
span.process-phase-CANCELED{
    border-left: 10px solid #F78756  !important
}
span.process-phase-APPROVED{
    border-left: 10px solid #4CC245 !important
}

.process-active-true{
    border-left: 10px solid #2FE438 !important
}
.process-active-false{
    border-left: 10px solid #FF8170 !important
}

.process-info{
    font-weight: bold;
    font-style: italic;
    color: #B6B6B6
}

.process-description ol {
    counter-reset: item;
}
.process-description ol li {
    display: block;
}
.process-description ol li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}

.process-description h2.count {
    counter-reset: h3
}
.process-description h3.count {
    counter-reset: h4
}
.process-description h4.count {
    counter-reset: h5
}
.process-description h5.count {
    counter-reset: h6
}

.process-description h2.count:before {
    counter-increment: h2;
    content: counter(h2) ". "
}
.process-description h3.count:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". "
}
.process-description h4.count:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
.process-description h5.count:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
.process-description h6.count:before {
    counter-increment: h6;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

h2.no-count:before, h3.no-count:before, h4.no-count:before, h5.no-count:before, h6.no-count:before {
    content: "";
    counter-increment: none
}

.sections{
    margin-left: auto;
    margin-right: auto;
    width: 100%
}
.sections a{
    display: inline-block;
    margin: 10px;
    text-decoration: none;
}

.sections-search a{
    text-decoration: none;
}
.section-search {
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    width: 100%;
    height: 90px;
    display: table;
}
.section-search .fa {
    font-size: 50px;
    color: #fff;
}

.section{
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    width: 350px;
    height: 90px;
    display: table;
}
.section-image {
    display: table-cell;
    width: 100px;
    position: relative;
    height: 100%;
    vertical-align: middle;
    text-align: center
}
.section-image img{
    width: 80%;
    height: auto;
}
.section-info {
    display: table-cell;
    width: 250px;
    height: 100%;
    background: #fff;
    padding: 10px;
    color: #222;
}
.section-info .section-text{
    text-transform: uppercase;
    font-size: 14px;
}
.section-info .section-count{
    font-weight: bold
}
.section .fa {
    font-size: 50px;
    color: #fff;
}

.border-resources{
    border-radius: 5px;
    border: 1px solid #e2e2e2
}
.tabs a:hover .tab-text{
    background: #3b8dbc !important;
    color: #fff
}
.tabs a:hover .tab-count{
    background: #fff !important;
    color: #3b8dbc
}

.top-15px {
    top: 15px
}
.top-10px {
    top: 10px
}
.top-6px {
    top: 6px
}
.right-10px {
    right: 10px
}

td.overflow-visible{
    overflow: visible !important;
}

.overflow-visible .ui-datatable-tablewrapper{
    overflow: visible !important;
}

div.tip{
    display: inline;
}

div.tip:hover {
    cursor: help;
    position: relative
}
div.tip span.warning {
    color: #FFFFFF;
    background: #f39c12;
    opacity: 1;
    padding: 10px;
    width: 250px;
    text-align: left;
}

.tooltip-warning{
    padding: 10px;
    color: white !important;
    background: #f39c12 !important;
    border: #f39c12 !important;
    border-radius: 6px;
}

div.tip:hover span.warning {
    opacity: 1;
    padding: 10px;
}
div.tip span.warning:after {
    display: none;
}

div.tip span {
    position: absolute;
    width:140px;
    color: #FFFFFF;
    background: #000000;
    line-height: 20px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
    font-size: 14px;
}
div.tip:hover span {
    visibility: visible;
    opacity: 0.8;
    bottom: 35px;
    left: -62px;
    z-index: 999999;
}

div.tip:hover span.right {
    top: 38px;
    bottom: auto;
    left: -195px;
    width: 400px
}

div.tip span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

div.tip span.right:after {
    left: 50%;
    top: -7% !important;
    border-bottom: 8px solid #000000;
    border-top: none;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;

}

.copyright:after{
    display: inline-block;
    padding: 0 5px;
    content:"\00a9";
}

/*bootstrap change*/
@media (min-width: 1400px) {
    .container{
        max-width: 1200px;
    }
}

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.has-fa-icon {
    font-family: 'FontAwesome', 'Source Sans Pro';
}

.main-header{
    z-index: 1000;
}

/*.ui-commandlink i.fa {font-size: 16px; font-family: FontAwesome;}*/

/*
.section img{position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 80px; height: auto;}
.section-text{text-align: center; bottom: 5px; left: 0; right: 0; position: absolute; }
.section-count{position: absolute; top: -10px; right: 20px; border-radius: 15px; padding: 5px 10px; background: #e24854; color: #fff; display: inline-block}
.section-update{position: absolute; top: -10px; left: 10px; border-radius: 5px; padding: 5px; border: 1px solid #ddd; background: #fff; font-size: 14px;}
.section-connection{position: absolute; top: -10px; right: 10px; border-radius: 5px; padding: 5px; border: 1px solid #ddd; background: #fff; font-size: 14px;}
.section-result{position: absolute; top: -10px; right: 10px; border-radius: 5px; padding: 5px; border: 1px solid #ddd; background: #fff; font-size: 14px;}
*/

.fa-spin-custom {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.backup.state-new{
    background: #9884FE
}
.backup.state-version{
    background: #8cc152
}

/*.navbar-nav>.user-menu>.dropdown-menu{
    width: 350px;
}*/
.btn-separate .btn {
    margin-right: 2px
}
.user-footer .btn-primary {
    margin: 5px 0;
}
.show-all .min-hint{
    display: none;
}
.show-min .all-hint{
    display: none;
}
.administration-link{
    padding: 5px;
    border: 1px solid #69A4BF;
    border-radius: 3px;
    display: block
}

/* bpmn.io*/
/*.djs-container{overflow:visible !important }
    TODO: enable after positioning online
*/

.comments-overlay{
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden
}

.comments-overlay::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.comments-overlay::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
.comments-overlay::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff;
    border-radius: 50px;
}
.comments-overlay::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}
.comments-overlay::-webkit-scrollbar-thumb:active {
    background: #000000;
}
.comments-overlay::-webkit-scrollbar-track {
    background: #666666;
    border: 0px none #ffffff;
    border-radius: 50px;
}
.comments-overlay::-webkit-scrollbar-track:hover {
    background: #666666;
}
.comments-overlay::-webkit-scrollbar-track:active {
    background: #333333;
}
.comments-overlay::-webkit-scrollbar-corner {
    background: transparent;
}

/* ADMIN LTE OVERRIDES */
.category-filter .info-box{
    height: 50px;
    min-height: 50px
}
.category-filter .info-box .info-box-icon{
    height: 50px;
    width: 50px;
    line-height: 40px;
    background: rgba(0,0,0,0.2);
}
.category-filter .info-box .info-box-icon .fa{
    font-size: 30px;
}
.category-filter .info-box .info-box-number {
    font-size: inherit;
}
.category-filter .info-box-content{
    height: 50px;
    margin-left: 50px
}

/* PRIMEFACES PAGINATORS */
.pem-datatable .ui-paginator-page{
    margin: 0;
    background-image: none;
    background-color: #fff;
    border-radius: 0
}

.pem-datatable .ui-paginator-pages{
    padding: 0;
    display: inline-block;
}

.pem-datatable .ui-paginator-pages{
    padding: 0;
    display: inline-block;
}

.pem-datatable .ui-paginator-page {
    position: relative;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    font-weight: normal;
    text-decoration: none;
    border: 1px solid #ddd;
}

.pem-datatable .ui-paginator-page:hover {
    background-color: #eee;
}

.pem-datatable .ui-paginator-next {
    padding: 6px 6px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    font-weight: normal;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    background-image: none;
}

.pem-datatable .ui-paginator-next:hover {
    background-color: #eee;
}
.pem-datatable .ui-paginator-next:before{
    font-family: FontAwesome;
    color: #444;
    position: relative;
    font-size: 12.3px;
    top: 0;
    padding: 0 4px;
    overflow: hidden;
    content: "\f054" !important;
}
.pem-datatable .ui-paginator-next > span{
    display: none;
}

.pem-datatable .ui-paginator-prev{
    padding: 6px 6px;
    margin-right: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    font-weight: normal;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    background-image: none;
}

.pem-datatable .ui-paginator-prev:hover {
    background-color: #eee;
}
.pem-datatable .ui-paginator-prev:before{
    font-family: FontAwesome;
    color: #444;
    position: relative;
    font-size: 12.3px;
    top: 0;
    padding: 0 4px;
    overflow: hidden;
    content: "\f053" !important;
}
.pem-datatable .ui-paginator-prev > span{
    display: none;
}

.pem-datatable .ui-paginator-page.ui-state-active {
    color: #fff;
    background-color: #3c8dbc;
}

/* History CREATE, UPDATE, DELETE, ADD, REMOVE; */
.history-change{
    font-family: FontAwesome;
    font-size: 16px;
}

.history-change-create:after{
    color:#090;
    content: "\f055";
}
.history-change-update:after{
    color:#e08e0b;
    content: "\f061";
}
.history-change-delete:after{
    color:#d73925;
    content: "\f05e";
}
.history-change-add:after{
    color:#090;
    content: "\f067";
}
.history-change-remove:after{
    color:#dc4a38;
    content: "\f00d";
}

.resource-tab{
    display: table;
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #f7f7f7
}
.resource-tab .resource-icon-wrapper{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 45px;
}
.resource-tab .resource-label-wrapper{
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    padding: 10px;
    position: relative;
}

.resource-tab.active {
    color: #fff
}
.resource-tab.active .badge{
    background-color: #fff !important
}
.resource-tab.active.processes{
    background-color: #3c8dbc
}
.resource-tab.active.services{
    background-color: #001f3f
}
.resource-tab.active.roles{
    background-color: #00a65a
}
.resource-tab.active.tags{
    background-color: #605ca8
}
.resource-tab.active.inputs{
    background-color: #00a65a
}
.resource-tab.active.outputs{
    background-color: #00a65a
}
.resource-tab.active.documents{
    background-color: #00c0ef
}
.resource-tab.active.hints{
    background-color: #f39c12
}
.resource-tab.active.datastores{
    background-color: #dc4a38
}

.resource-tab.active.processes .badge{
    color: #3c8dbc
}
.resource-tab.active.services .badge{
    color: #001f3f
}
.resource-tab.active.roles .badge{
    color: #00a65a
}
.resource-tab.active.tags .badge{
    color: #605ca8
}
.resource-tab.active.inputs .badge{
    color: #00a65a
}
.resource-tab.active.outputs .badge{
    color: #00a65a
}
.resource-tab.active.documents .badge{
    color: #00c0ef
}
.resource-tab.active.hints .badge{
    color: #f39c12
}
.resource-tab.active.datastores .badge{
    color: #dc4a38
}

.resource-tab.processes .badge{
    background-color: #3c8dbc
}
.resource-tab.services .badge{
    background-color: #001f3f
}
.resource-tab.roles .badge{
    background-color: #00a65a
}
.resource-tab.tags .badge{
    background-color: #605ca8
}
.resource-tab.documents .badge{
    background-color: #00c0ef
}
.resource-tab.hints .badge{
    background-color: #f39c12
}
.resource-tab.datastores .badge{
    background-color: #dc4a38
}

.license-info {
    padding: 15px 15px 0 15px
}
.license-info > div {
    padding: 5px;
}
.license-info .tip > span {
    width: 400px;
}

.padding-1x{
    padding-left: 10px;
}
.padding-2x{
    padding-left: 20px;
}
.padding-3x{
    padding-left: 30px;
}
.padding-4x{
    padding-left: 40px;
}
.padding-5x{
    padding-left: 50px;
}
.padding-6x{
    padding-left: 60px;
}
.padding-7x{
    padding-left: 70px;
}

li.ui-treenode.disabled > span > span {
    color: #a4a4a4
}

.notification {
    border-bottom: 1px solid rgb(231, 231, 231)
}
.notification.unread{
    background: #edeff5
}
.ui-datatable .notification{
    border-bottom: none
}
.ui-datatable.notifications td.unread{
    background: #edeff5
}
.ui-datatable.notifications td:hover{
    background: #f6f7f9
}
.ui-datatable.notifications td:hover .notification{
    background: #f6f7f9
}
.dropdown-menu.notifications{
    -webkit-box-shadow: 6px 4px 19px -4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 6px 4px 19px -4px rgba(0,0,0,0.75) !important;
    box-shadow: 6px 4px 19px -4px rgba(0,0,0,0.75) !important;
}

.loader{
    display: none;
}

.modal-backdrop{
    z-index: 1001;
}
.modal-backdrop{
    z-index: 1001;
}

.ui-dialog.hide-header .ui-dialog-titlebar {
    display: none;
}

body div.ui-inputswitch {
    height: 16px;
    width: 38px !important;
    overflow: visible;
    background-color: #9e9e9e;
    border-color: #919191;
    padding: 0;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    transition: background .3s ease;
    vertical-align: middle;
    margin: 0 16px;
}

.ui-widget .ui-widget {
    font-size: 14px;
}

.ui-inputswitch {
    display: inline-block;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    height: 24px;
}

.ui-widget-content {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #222;
}

.description-panel a {
    color: #3c8dbc;
}

.ui-widget-content, .ui-state-default, .ui-widget-header .ui-state-default {
    color: #444;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -khtml-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

body div.ui-inputswitch .ui-inputswitch-handle {
    top: -4px;
    background-color: #f4f4f4;
    border: #ddd;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
    width: 22px !important;
    height: 22px !important;
}

body div.ui-inputswitch.checked {
    background-image: none;
    background-color: #5fa4cc;
    border-color: #4c99c6;
    color: #fff;
}
body div.ui-inputswitch.checked .ui-inputswitch-handle{
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: #fff;
    background-image: none;
}

.ui-inputswitch .ui-inputswitch-on span {
    display:none;
}
.ui-inputswitch .ui-inputswitch-on {
    display:none;
}

.ui-inputswitch .ui-inputswitch-off span {
    display:none;
}

.ui-selectonemenu-panel {
    z-index: 2000 !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    width: 25px;
}

select.subinstance {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    /* no standardized syntax available, no ie-friendly solution available */
}

select + i.fa {
    float: right;
    margin-top: -33px;
    margin-right: 1px;
    pointer-events: none;
    background-color: #f4f4f4;
    padding: 9px;
    color: #444444;
    border-left: 1px solid #D2D6DE;
}

.info-button {
    position: absolute;
    top: 10px;
    right:10px;
    background-color: white !important;
    font-size: 25px;
    padding: 3px 6px;
    color: #555 !important;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.info-dialog .modal-lg {
    max-width: 600px;
}

.process-warning {
    position: relative;
    top: 6px;
}

.ui-datatable table{
    table-layout: auto;
}


img.diagram {
    position: absolute;
    max-width: 100%;
}

.modal-dialog.modal-lg {
    z-index: 3000;
}

a {
    font-weight: normal;
}

.content.richtig-tooltiptext {
    min-height: auto;
}

@media (max-width: 767px) {
    div#process\:controls{
        display: block;
        float: none;
        text-align: right;
    }
}