/*! Rappid v1.7.2 - HTML5 Diagramming Framework - TRIAL VERSION

Copyright (c) 2015 client IO

 2016-07-06 


This Source Code Form is subject to the terms of the Rappid Trial License
, v. 2.0. If a copy of the Rappid License was not distributed with this
file, You can obtain one at http://jointjs.com/license/rappid_v2.txt
 or from the Rappid archive as was distributed by client IO. See the LICENSE file.*/


html, body {
   margin: 0;
   padding: 0;
}

body {
   -webkit-user-select: non
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -ms-user-select: none;
   user-select: none;
   font-family: Arial;
   font-family: "Source Sans Pro", sans-serif;
}

h1 {
   position: absolute;
   z-index: 1;
   top: 12px;
   color: white;
   margin: 0;
   padding: 0;
   font-size: 18px;
   /*
   width: 240px;
   */
   width: auto;
   text-align: center;
}


/*###### BACKGROUND & TEXT COLORS #######*/

/*Light Gray Color*/
.background_color1{
   background-color: #f8f9fa;
}

/*White Color*/
.background_color2{
   background-color: #ffffff;
}

/*Green Color*/
.background_color3{
   background-color: #d1ecf1;
}

/*Red Color*/
.background_color4{
   background-color: #f8d7da;
}

/*Orange Color*/
.background_color5{
   background-color: #fff3cd;
}

/*Blue Color*/
.background_color6{
   background-color: #007481;
}

/*Grey Color*/
.text_color1{
   color: #595959;
}

/*Blue Color*/
.text_color2{
   color: #007481;
}

/*White Color*/
.text_color3{
   color: #ffffff;
}

/*Red Color*/
.text_color4{
   color: #dc3545;
}

/*Orange Color*/
.text_color5{
   color: #ffc107;
}

/*Lightgrey Color*/
.text_color6{
   color:lightgrey;
}
/*###### BUTTONS #######*/

/*Blue � Submission, Primary Action(s)*/
.theme1_btn{
   background-color: #007481;
   color: #ffffff;
   border: 1px solid #e6e6e6;
}

.btn {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border-radius: 5px;
   cursor: pointer;
}

.theme1_btn:hover,.theme1_btn:focus,.theme1_btn:active{
   background-color: #006981;
   color: #ffffff;
   border: 1px solid #e6e6e6;
}

.btn:hover {
   opacity: .9;
}
.btn > img {
   vertical-align: middle;
   height: 20px;
}

/*Grey � Save, Cancel, Return, Secondary Action(s)*/
.theme2_btn{
   background-color: #c0c0c0;
   color: #595959;
   border: 1px solid #e6e6e6;
}

.theme2_btn:hover,.theme2_btn:focus,.theme2_btn:active{
   background-color: #b3b3b3;
   color: #595959;
   border: 1px solid #e6e6e6;
}

.step{
   display: inline-block;
   margin: 20px;
   padding: 10px;
}


/*According to Ace developer team, ui-widget of Expression Editor interferes with CSS rules of Ace Editor.*/
.ui-widget *, .ui-widget input, .ui-widget select, .ui-widget button {
	   font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
	   font-size: 14px;
	   font-weight: 300 !important;
	}

.details-form-field input,
.details-form-field select {
   width: 200px;
   float: right;
}

.details-form-field {
   margin: 10px 0;
   display: grid;
}

.details-form-field:first-child {
   margin-top: 10px;
}

.details-form-field:last-child {
   margin-bottom: 10px;
}

.details-form-field button {
   display: block;
   width: 100px;
   margin: 0 auto;
}

input.error, select.error {
/*   border: 1px solid #ff9999;
   background: #ffeeee;*/
   border: none;
   border-bottom: 1px solid #ff9999;
}

label.error {
/*   float: right;
   margin-left: 100px;*/
   font-size: .8em;
   color: #ff6666;
}

/*Expression Editor Inspector INSPECTOR*/

/*Process Variables*/
* {
   box-sizing: border-box;
}

#myUL {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

#myUL li a {
   border: 1px solid #ddd;
   margin-top: -1px; /* Prevent double borders */
   background-color: #f6f6f6;
   padding: 4px;
   text-decoration: none;
   font-size: 18px;
   color: black;
   display: block
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}


* {
   box-sizing: border-box;
}

#myUL2 {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

#myUL2 li a {
   border: 1px solid #ddd;
   margin-top: -1px; /* Prevent double borders */
   background-color: #f6f6f6;
   padding: 4px;
   text-decoration: none;
   font-size: 18px;
   color: black;
   display: block
}

#myUL2 li a:hover:not(.header) {
   background-color: #eee;
}




/*End of Expression Editor INSPECTOR*/


/*Expression Editor Inspector RULES*/

/*Process Variables*/
* {
   box-sizing: border-box;
}

#myULRules {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

#myULRules li a {
   border: 1px solid #ddd;
   margin-top: -1px; /* Prevent double borders */
   background-color: #f6f6f6;
   padding: 4px;
   text-decoration: none;
   font-size: 18px;
   color: black;
   display: block
}

#myULRules li a:hover:not(.header) {
   background-color: #eee;
}

/*<!-- 2. Allowed Values -->*/

* {
   box-sizing: border-box;
}

#myUL2Rules {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

#myUL2Rules li a {
   border: 1px solid #ddd;
   margin-top: -1px; /* Prevent double borders */
   background-color: #f6f6f6;
   padding: 4px;
   text-decoration: none;
   font-size: 18px;
   color: black;
   display: block
}

#myUL2Rules li a:hover:not(.header) {
   background-color: #eee;
}


.smartWizardContainer{
   /*
   margin-top:45px;
   */
   width: 83%;
   float: right;
   display: none;
}

.btn-toolbar{
   float: right;
   margin-top: -57px;
}

#informationDialog{
   width:90%!important;
   margin:auto;
   /*padding: 50px;*/
   padding: 3%;
   background: white !important;
   padding-top: 30px !important;
    margin-bottom: 80px;
   -webkit-box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.10);
   box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.10);
}

#processVariableDetailsDialog{
   /*width:80%!important;*/
   margin:auto;
   /*padding: 50px;*/
   padding: 3%;
   background: white !important;
   padding-top: 30px !important;
}

#process_notes,#description,#comments,#processVariableDetailsDescription{
   width: 100%;
   height: 100px;
   background: #f7f8fc;
   border: none;
   font-style: italic;
}

#processVariableDetailsDescription{
   height: 113px;
}

.form-control{
   margin-bottom: 12px;
   float: right;
}

.insertGroupInput{
   margin-top: 40px;
}

.insertGroup{
   width:100%;

}

#PublishFlowDialog{
    margin: auto;
    /*padding: 50px;*/
   padding: 3%;
    background: white !important;
    padding-top: 30px !important;
    width: 90% !important;
    overflow: hidden;
    margin-bottom: 80px;
    height: 800px !important;
   -webkit-box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.10);
   box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.10);
}

.ui-widget-content{
   background:none !important;
   border:none !important;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-resizable{
/*   top:124px !important;
    left:17% !important;*/
   position: unset !important;
   margin: 0 auto;
   padding-top: 55px;
}

.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
   display: none;
}

textarea {
   resize: vertical; /* user can resize vertically, but width is fixed */
}

.tooltip.top.rendered{
   opacity:1;

}



.tooltip {
   position: absolute;
   z-index: -10000;
   border-radius: 5px;
   background-color: #333;
   border: 2px solid #242424;
   color: #bcbcbc;
   pointer-events: none;
   padding: 10px;
   font-size: 14px;
   text-shadow: 0 -1px 0 #000;
   display:inherit;
}

.tooltip.left,
.tooltip.right {
   margin-top: -2px
}

.tooltip.bottom,
.tooltip.top {
   margin-left: -2px;
   padding: 10px;
}

.tooltip.small {
   padding: 5px;
   font-size: 10px
}

.tooltip .tooltip-arrow,
.tooltip .tooltip-arrow-mask {
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none
}

.tooltip.left .tooltip-arrow,
.tooltip.left .tooltip-arrow-mask {
   right: 100%
}

.tooltip.right .tooltip-arrow,
.tooltip.right .tooltip-arrow-mask {
   left: 100%
}

.tooltip.top .tooltip-arrow,
.tooltip.top .tooltip-arrow-mask {
   bottom: 100%;
   border-top-color:transparent;
   left:0;
   margin-left:0;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom .tooltip-arrow-mask {
   top: 100%
}

.tooltip .tooltip-arrow-mask {
   border-width: 6px
}

.tooltip.left .tooltip-arrow-mask {
   border-right-color: #333;
   margin-top: -6px
}

.tooltip.right .tooltip-arrow-mask {
   border-left-color: #333;
   margin-top: -6px
}

.tooltip.top .tooltip-arrow-mask {
   border-bottom-color: #333;
   margin-left: -6px
}

.tooltip.bottom .tooltip-arrow-mask {
   border-top-color: #333;
   margin-left: -6px
}

.tooltip .tooltip-arrow {
   border-width: 8px
}

.tooltip.left .tooltip-arrow {
   border-right-color: #242424;
   margin-top: -8px
}

.tooltip.right .tooltip-arrow {
   border-left-color: #242424;
   margin-top: -8px
}

.tooltip.top .tooltip-arrow {
   border-bottom-color: #242424;
   margin-left: -8px
}

.tooltip.bottom .tooltip-arrow {
   border-top-color: #242424;
   margin-left: -8px
}

.landingPage {
   text-align: center;
}

.landingPageContainer{
   /*height: 100vh;
   font-size: 35px;
   background-color: #f5f5f5;
   padding-top: 8%;*/
   background-image: url("../img/homepage_green_bg.png");
   /*position: fixed;*/
   height: 100%;
   /*width: 100%;*/
   background-repeat: no-repeat;
   background-position: center;
    /*background-size: 65%;*/
   background-size : 100%;
   width:65%;
   margin:0 auto;
}

.splash_btn_container {
   /*width: 320px;*/
   width: 70%;
   margin: 0 auto;
   /*margin-top: 65vh;*/
   margin-top:35vh;
}

.leftContainer{
   width: 50%;
   height: 100%;
   float: left;
   display: inline-block;
}

.rightContainer{
   /*width: 576px;*/
   /* width: 32%;*/
   width: 50%;
   height: 100%;
   display: inline-block;
}

.splash_design_btn{
  /* width: 320px;*/
   /*width: 90%;*/
   /*
   max-width: 320px;
   */
   height: 40px;
   background: #0EC970;
   border-radius: 5px;
   cursor: pointer;
   margin-top: -15px;
   -webkit-box-shadow: 7px 7px 16px -3px rgba(0,0,0,0.25);
   box-shadow: 7px 7px 16px -3px rgba(0,0,0,0.25);
}

.splash_design_btn_lbl{
   color: white;
   font-size: 13pt;
   text-align: center;
   display: inline-block;
   margin: 0 auto;
   width: 100%;
   margin-top: 7px;
   font-family: 'Open Sans', Arial, sans-serif;
}

.splash_load_btn{
   /*width: 320px;*/
   /*width:90%;*/
   /*
   max-width: 320px;
   */
   height: 40px;
   background: #676767;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 50px;
   -webkit-box-shadow: 7px 7px 16px -3px rgba(0,0,0,0.25);
   box-shadow: 7px 7px 16px -3px rgba(0,0,0,0.25);
}

.splash_load_btn_lbl{
   color: white;
   font-size: 13pt;
   text-align: center;
   display: inline-block;
   margin: 0 auto;
   width: 100%;
   margin-top: 7px;
   font-family: 'Open Sans', Arial, sans-serif;
}

.buttonContainer {
   margin-left: 29%;
}

.landingIcons{
   width: 45px;
}

.landingBtn{
   width: 60%;
   margin: 2% 0% 0% 0%;
   cursor: pointer;
   padding: 2% 0% 2% 13%;
   text-align: left;
   background: rgba(51,51,51,0.9);
   color: white;
}

.titleHP img{
   font-size: 60px;
   text-align: center;
   font-style: italic;
   font-family: DauphinPlain;
   width: 250px;
   margin-bottom: 25px;
}

.descriptionHP{
   font-size: 20px;
   font-style: italic;
   font-family: DauphinPlain;
}

.hiddenOverflow{
   height: 100%;
   overflow:hidden;
}

.footer img{
   width: 100%;
   vertical-align: middle;
   position: fixed;
   bottom: 0;
   left: 0;
}

.fa-info-circle{
   color:gray;
}



.jsgrid-grid-body{
   overflow:auto!important;
}

.home-icon{
   float: left;
   margin-left: 10px;
}

.designerDescr {
   margin-left: 10px;
}

.pointer{
   cursor:pointer;
}

.error_msg{
   display: block;
   margin: 0px 0px 5px 18px;
   width: 88%;
}

.btn-save-procDesigner{
   color: #fff;
   background-color: #5bc0de;
   border-color: #46b8da;
   margin-right: 2px;
   margin-left:0px !important;
}

.btn-restoreProcVars .btn-deleteAutoRules{
   margin-right: 2px;
   margin-left:0px !important;
}


.btn-danger{
   border-radius: 5px!important;
}


.fa, .fas {
   font-weight: 900 !important;
}

#RuleGrid,#DatabaseTablesGrid,#DataGrid,#RolesGrid,#ProcessResourcesGrid{
   padding-left:0px;
   margin-left:-3px;
}

.side{
   display: inline-block;
   position: fixed;
   z-index: -1;
   background: #f5f5f5;
   width: 17%;
   height: 100vh;
}

.addGroup{
   float: right;
   font-size: 21px;
   display: inline-block;
   width: 18px;
   margin-top: 9px;
   cursor: pointer;
}


.addGroup:hover{
   color:gray;
}

#process_group{
   display: inline-block;
   width: 90%;
   float: left;
}

.formMargin{
   margin-bottom: 22px;
}

#insertGroup{
   color: #fff;
   background-color: #5bc0de;
   border-color: #46b8da;
   margin-top: 5px;
   margin-left: 13px;
}

#name{
   margin-top: 5px;
}

.groupName{
   float: left;
   width: 90% !important;
}

.dialog.modal.rendered{
   display:block;
}

.btn-close-dialog{
   color: #fff;
   background-color: #d9534f;
   border-color: #d43f3a;
   border-radius: 5px;
}

.lastStepperBtn{
   border-radius: 5px !important;
}

.firstStepperBtn{
   border-radius: 5px !important;
}

.btn-green{
   background:#23c061;
   border-color: #23c061;
   border-radius: 5px !important;
   margin-right:2px;
   margin-left:0px !important;
}

.btn-green:hover{
   background:#23c061;
   border-color: #23c061;
   border-radius: 5px !important;
}

.dialog .titlebar {
   color: #362b36;
   background-color: #ececec;
   text-shadow: none;
   padding: 10px;
   border-radius: 5px;
   border: 0px;
   padding-left: 30px;
}

.dialog .fg{
   margin: 11px auto;
   border: 0px;
}

.fg .controls .control-button:nth-child(2) {
   background: #468bfe;
   border-radius: 5px;
   border-color: #468bfe;
   color:#fff;
   margin: 10px 5px 0px 10px;
}

.fg .controls .control-button:nth-child(1) {
   background: #b7b7b7;
   border-radius: 5px;
   border-color: #b7b7b7;
   color:#fff;
   margin: 10px 25px 20px 10px;
}
#searchType{
   /*margin-left:119px;*/
   height: 30px;
   margin-top: 15px;
   width: 35%;
   cursor: pointer;
   font-size: 14px;
   border: none;
   outline: none;
   background-color: inherit;
   display: inline-block;
   color:#6a6a6a;
   /*border-bottom: 1px solid #a1aeb3 !important;*/
   /*
   border-right: 1px solid #a1aeb3 !important;
   */
   float: left;
}

.searchBar {
   height: 30px;
   width: 100%;
   padding-left: 5px;
   border: none;
   border-bottom: 1px solid #a1aeb3;
   outline:none;
}

.jsgrid-cell{
   font-size: 0.8em;
}

.expressionImg{
   position: relative;
   top: -3px;
}

#openExpressionEditor{
   width:27px;
}

.btn-restoreProcVars{
   margin-right: 10px;
}

.btn-deleteAutoRules{
   margin-right: 10px;
}

#DatabaseTableColumnsGrid,#VariableGroupGrid,#WorkitemVariablesGrid,#WorkitemResourcesGrid{
   left:-1.5%;
}

.navtabsStep{
   font-size: 18px;
}

#processVariableDetailsDialog {
   height: 790px!important;
   overflow: hidden;
   margin-bottom: 80px;
}

.navtabsStepDesc{
   font-size: 16px;
}
.btn-danger{
   margin-left: 0px !important;
}

#DataGrid .jsgrid-edit-button{
    display: none;
}

.fa-pen{
   color:gray;
}

.processVariableDetailInput{
    width:100% !important;
}

.btn-save-procVariables{
    color: #fff !important;
    background: #5bc0de !important;
    border-color: #46b8da !important;
    display: inline-block !important;
    float: right;
    margin-right: 5px !important;
    margin-bottom: 20px !important;
    margin-top: 15px !important;
    width: 90px;
}

.btn-close-procVariables{
    color: #fff !important;
    background: #d9534f !important;
    border-color: #d43f3a !important;
    display: inline-block !important;
    float: right;
    margin-bottom: 20px !important;
    margin-top: 15px !important;
    width: 90px;
}

.processVariableDialogHeader{
   font-size: 16px;
   color: #636b6e;
   font-weight: 600 !important;
}

.details-form-header {
    margin-top: 15px;
}

.details-form-btn {
    display: inline-block;
    width: 100%;
    height: 90px;
}

.processDetailsDialog{
    left:30% !important;
}

.process_variable_details-button,.entity_variables-button,.entity_details-button{
   width:20px;
   position: relative;
   top: -2px;
}

.databaseColumnsBtn{
   margin: 0 6px;
   position: relative;
   bottom: 2px;
}

#expressionEditorDialogRules {
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 5%;
}

.entityDetailsDialogInput{
   width: 100% !important;
}

.databaseColumnsBtn{
   background: none;
   border:none;
}

.stencil .group>.group-label {
   background: #333;
}

.advancedSettings{
   display:inline-block;
   width: 48%;
   float:right;
}

.generalSettings{
   display: inline-block;
   width: 48%;
   float: left;
}

.inspector .group>.group-label {
   background: #333;
}

.custom_optgroup{
   font-weight: bold !important;
}

.sameLine{
    width: 32.5%;
    display: inline-block;
}

.jsgrid-pager {
    margin-left: 2%;
}

::-webkit-scrollbar {
   display: none;
}
/*.ui-dialog{
   width: 83% !important;
}*/






/** REDESIGN ***/

html,body{
   font-family: 'Open Sans', Arial, sans-serif;
    height: 100%;
}

.button_theme1{
   background-color:#00aeef;
   color:white;
}

.button_theme2{
   background-color:white;
   color:#c7c7c7;
}

.button_theme3{
   background-color:#db4e18;
   color:white;
}
.button_them4{
   background-color:#42bd32;
   color:white;
}

.large_btn{
   width:320px;
   height:34px;
}

.medium_btn{
   width:133px;
   height:33px;
}

.btn{
   font-weight: 600;
   font-size:14px;
}

label{
   font-weight: 300;
   font-size:10px;
   color:#a1aeb3;
}

input{
   font-weight: 300;
   font-size:14px;
   color:#3d5067;
}

.title{
   font-weight: 600;
   font-size:16px;
   color:#636b6e;
}




/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {


}

.newDesignerTopBarContainer {
   height: 60px;
   background: white;
   box-shadow: 0px 7px 12px -4px rgba(0,0,0,0.10);
}

img.redLogo {
   margin-left: 20px;
   cursor: pointer;
}

span.topBarEdit.icon-edit {
   margin-top: 20px;
   margin-left: 35px;
   display: inline-block;
   cursor:pointer;
}

span.topBarDescription {
   margin-left: 15px;
   font-family: Open Sans;
   font-size: 17px;
   color: #636b6e;
   font-weight: 600;
}

.newDesignerTopBarLeft {
   width: 25%;
   display: inline-block;
   height: 60px;
}

.newDesignerTopBarRight {
   display: inline-block;
   /*width: 120px;*/
   /*width: 10%;*/
   width:24%;
   float: right;
   height: 60px;
}

.newDesignerTopBarCenter {
   display: inline-block;
   height: 60px;
   /*width: 57%;*/
   width: 45%;
}

/*span.icon-search.searchTopBar {
   margin-top: 20px;
   display: inline-block;
   float: right;
   font-size: 18px;
   cursor: pointer;
   width: 20%;
}*/

span.icon-search.searchTopBar {
    margin-top: 20px;
    display: inline-block;
    float: right;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    left: -11%;
}
/*
Progress Bar Styles Start*/

/*.cont{
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   left: calc(50% - 288px);
   padding: 0;
   margin: 0 auto;
}*/

#progress-bar{
   appearance:none;
   /*width: 600px;*/
   width: 100%;
   color: #000;
   height: 2px;
   margin: 0 auto;
}

.cont{
/*   width: 600px;
   position: relative;
   top: 8px;*/
   /*width: 90%;*/
   max-width: 600px;
   position: relative;
   top: 8px;
}

.cont span{
   height: 13px;
   width: 13px;
   border-radius: 100%;
   border: 3px solid #458bfe;
   background:#458bfe;
   position: absolute;
   top: 7px;
   cursor: pointer;
   transition: all 0.4s ease-in-out;
}

.second{
   left: 34%;
}
.third{
   left: 67%;
}

.fourth{
   left:100%;
}

#progress-bar::-webkit-progress-value{ /* Changes line color */
   background: #458bfe;
   transition: all 0.4s ease-in-out;
}
#progress-bar::-webkit-progress-bar{ /* Changes background color */
   background: #a1aeb3;
}
.border-change{
   border-color:#458bfe;
   transition: all 0.4s ease-in-out;
}


/*
Process bar style end*/

.progressBarDescriptionContainer {
   position: relative;
   top: 10px;
   max-width: 600px;
}

span.progressBarDesc1 {
   font-size: 10px;
   width: 35%;
   max-width: 210px;
   display: inline-block;
   margin-left: 20px;
   cursor: pointer;
/*   font-family: Open Sans;*/
}

span.progressBarDesc2 {
   font-size: 10px;
   width: 32%;
   max-width: 210px;
   display: inline-block;
   cursor: pointer;
/*   font-family: Open Sans;*/
}

span.progressBarDesc3 {
   font-size: 10px;
   width: 28%;
   display: inline-block;
   max-width: 210px;
   cursor: pointer;
/*   font-family: Open Sans;*/
}

.progressBarDesc1:hover,.progressBarDesc2:hover,.progressBarDesc3:hover{
   color: #00aeef;
}

.progressBarDescColor{
   color:#00aeef;
}

span.icon-button_cancel.cancelTopBarBtn {
    font-size: 40px;
    color:#b7b7b7;
    cursor: pointer;
    margin-right: 7px;
}

span.icon-button_save.saveTopBarBtn {
    font-size: 40px;
    color: #468bfe;
    cursor: pointer;
    margin-right: 7px;
}

.side{
   background: white;
}

.draggableToolbar{
   width: 613px;
   height: 38px;
   background: white;
   border-radius: 5px;
   z-index: 10;
   box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
   position: absolute;
   top:103px;
   left:30%;
   cursor: pointer;
}

.draggableToolbar span{
   font-size: 19px;
   line-height: 38px;
   margin-left: 7px;
   margin-right: 7px;
   color:#6a6a6a;
}

.toolbarInnerBox {
   display: inline-block;
   box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
   height: 30px;
   margin-top: 3px;
   margin-left: 2px;
   border-radius: 5px;
   cursor: pointer;
}

.stencil .search {
    text-shadow: none !important;
/*    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 1px rgba(255,255,255,.1) !important;*/
/*    border: 1px solid white !important;*/
    box-shadow: none !important;
    border:none !important;
    background: white !important;
    height: 30px !important;
    max-height: 40px !important;
    line-height: 30px !important;
    z-index: 1 !important;
    position: relative !important;
    outline:none;
   text-align: left;
   caret-color:black;
}

input.search {
   font-size: 10px;
   text-align: center;
   color:#a1aeb3 !important;
   width:70% !important;
   float: none;
   top:-8px;
   left:3%;
   background: #fafafa !important;
   font-size: 12px;
}

.searchStencilContainer {
   display: inline-block;
}

.searchStencilContainer {
   margin-top: 8px;
   margin-left: 6%;
   font-size: 23px;
}

.stencil.searchable {
   background: white;
/*    margin-top:2px;*/
}

.stencil .group-label{
   background: #fafafa !important;
}

.stencil .group-label {
   background: white !important;
   height: 35px;
   line-height: 22px;
   color: #636b6e !important;
   font-size: 12px !important;
}

.stencil .group.closed {
   height: 35px !important;
   max-height: 34px !important;
    margin-bottom: 2px;
    margin-top:2px;
}

.stencil .group>.group-label {
   border-top: none;
   border-bottom: none;
}

.inspector .group>.group-label {
   background: white !important;
   height: 35px;
   line-height: 22px;
   color: #636b6e !important;
   font-size: 12px !important;
}

.inspector .group.closed {
   height: 35px !important;
   max-height: 34px !important;
   padding-top: 0;
    margin-bottom: 2px;
    margin-top:2px;
}

.inspector .group>.group-label {
   border-top: none;
   border-bottom: none;
}

.inspector .group{
   padding-top:0;
   margin-top:2px;
}

.inspector label{
   color:#c3ccce !important;
   text-transform: uppercase;
}

.inspector input, .inspector textarea{
   box-shadow: none;
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid #c3ccce;
   color: #636b6e !important;
   height: 30px;
   outline:none;
}

.inspector select{
   box-shadow: none;
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid #c3ccce;
   color: #636b6e !important;
   height: 30px;
   background: none;
   outline:none;
}

.tableBackgroundRedesign{
   width: 100%;
   height: 100%;
   position: fixed;
   background: #f4f5f9;
   z-index: -1;
}

.dataGridHeader{
   height: 60px;
   background: #f9f9f9;
   line-height: 60px;
   border: 1px solid #e9e9e9;
   border-bottom: none;
   display: inline-block;
   width: 100%;
   position: relative;
   top: 5px;
   border:none !important;
}

.dataGridHeaderLeft span{
   font-size: 16px;
   color: #636b6e;
   font-weight: 600 !important;
   margin-left: 40px;
}

.touchButton{
   display: inline-block;
}

.touchButton span{
   position: relative;
   top: -3px;
   left: 3px;
}

.dataGridHeaderLeft {
   float: left;
   display: inline-block;
}

.dataGridHeaderRight {
   display: inline-block;
   float: right;
}

.dataGridHeaderBtnLeft {
   display: inline-block;
   float: left;
   background: white;
   height: 30px;
   line-height: 30px;
   margin-top: 15px;
   margin-right: 6px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 5px;
   cursor: pointer;
}

.dataGridHeaderBtnRight {
   display: inline-block;
   float: right;
   background: white;
   height: 30px;
   line-height: 30px;
   margin-top: 15px;
   margin-right: 15px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 5px;
   cursor: pointer;
}

span.headerGroupManagement {
   color: #636b6e;
}

span.headerRestoreVariables {
   color: #636b6e;
}

.informationDialogHeader {
   margin: 0 auto;
   margin-bottom: 30px;
}

.informationDialogHeaderTitle{
   font-size: 16px;
   color: #636b6e;
   font-weight: 600 !important;
}

.informationFormLeft{
   width: 47%;
   display: inline-block;
}

.informationFormRight{
   width: 47%;
   float:right;
   display: inline-block;
}

.form-control-info {
   display: block;
   width: 100%;
   height: 34px;
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
   background-color: #fff;
   outline:none;
   border:none;
   border-bottom: 1px solid #a1aeb3;
   color:#636b6e;
}

.informationFormIcon{
   color:#a1aeb3;
}

.saveGroupBtnFa{
   font-size: 21px;
   color: #a1aeb3;
   margin-top: 9px;
   width: 18px;
   float: right;
   display: inline-block;
   cursor: pointer;
}

#informationForm{
   width: 70%;
   display: inline-block;
}

.informationFormTips{
    width: 25%;
    display: inline-block;
    float: right;
    background: #f4f5f9;
    margin-left: 5%;
}

span.informationFormTipsHeader {
   color: #919191;
   font-size: 20pt;
    font-weight: bold !important;
}

.informationFormTipsHeaderContainer {
   display: block;
   margin: 0 auto;
   width: fit-content;
    margin-top: 30px;
}

.handTips{
   display: block;
   text-align: center;
   font-size: 35pt;
   color: #919191;
}


.tipsContainer {
   width: 70%;
   margin: 25px auto;
   color: #919191;
    height: 453px;
}

.tipsContainer span{
   display: block;
   margin-top:20px;
   font-size: 12pt;
}

.fixedButtonContainer {
    position: relative;
    top: 40px;
    left: 85%;
}

.PublishFlowDialogHeader {
    margin: 0 auto;
    margin-bottom: 30px;
}

.PublishFlowDialogHeaderTitle {
    font-size: 16px;
    color: #636b6e;
    font-weight: 600 !important;
}

.publishFormLeft{
    width: 47%;
    display: inline-block;
}

.publishFormRight{
    width: 47%;
    float: right;
    display: inline-block;
}

.form-control-publish{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #fff;
    outline: none;
    border: none;
    border-bottom: 1px solid #a1aeb3;
    color: #636b6e;
}

form#PublishFlowForm {
    display: inline-block;
    width: 70%;
}

span.icon-button_finalize_publish.publishTopBarBtn {
    font-size: 40px;
    color: #26cb30;
    cursor: pointer;
}

.form-group{
    margin-bottom: 40px !important;
}

.selectBoxBorderRight{
    border-bottom: none !important;
    border-right:1px solid #a1aeb3 !important;
}

#process_file_path{
    background: #f7f8fc;
}

.form-control-procVar {
   display: block;
   width: 100%;
   height: 34px;
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
   background-color: #fff;
   outline:none;
   border:none;
   border-bottom: 1px solid #a1aeb3;
   color:#636b6e;
}

.form-group-procVar{
   padding-bottom:40px !important;
}

/*
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {
   padding-top: 0;
}*/

.inspector .field{
   width: 80%;
   display: block;
   margin: 0 auto;
}

.inspector input, .inspector textarea {
   width: 100% !important;
}

.inspector select{
   width: 100% !important;
}

.jsgrid-alt-row>.jsgrid-cell {
   background: white !important;
   border: none;
}

.jsgrid-row>.jsgrid-cell{
   border: none;
}

.jsgrid-cell {
   padding: 1.4em !important;
}

.jsgrid-header-cell {
   padding: 1.14em !important;
}

#informationForm label{
    width: 100%;
}

#informationForm label span{
    float: right;
}

#PublishFlowDialog .informationFormTips .tipsContainer{
    height: 470px !important;
}

.moveLeft{
    left:82%
}

.textareaLabel{
    margin-bottom: 15px;
}

.stencil .group>.group-label:before {
    border-top: 5px solid #636b6e !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.stencil .group.closed>.group-label:before {
    top: 5px !important;
    left: 0px !important;
}

.inspector .group>.group-label:before {
    border-top: 5px solid #636b6e !important;
    margin-left: 4% !important;
    margin-right: 4% !important;
}

.inspector .group.closed>.group-label:before{
    top: 5px !important;
    left: 0px !important;
}

.jsgrid-selected-row>.jsgrid-cell{
   background: #f9f9f9 !important;
}

#processVariableDetailsFormDisplayOrder,#processVariableDetailsWorklistOrder,#processVariableDetailsFilterOrder{
   width: 90% !important;
   float: left;
}

.smallerLabel{
   font-size: 13px;
}

.jsgrid-header-row>.jsgrid-header-cell{
   border: none !important;
   background: #f9f9f9;
   text-transform: uppercase;
   font-weight: bold !important;
   color: #636b6e;
   font-size: 10pt;
}

.jsgrid-grid-header{
   border: none !important;
}

.jsgrid-insert-row>.jsgrid-cell{
   border: none !important;
}

.jsgrid-filter-row>.jsgrid-cell{
   border: none !important;
}

tr.jsgrid-alt-row {
   border: 3px solid #f4f5f9;
}

tr.jsgrid-row {
   border: 3px solid #f4f5f9;
}

.jsgrid-filter-row>.jsgrid-cell {
   background: #f9f9f9 !important;
}


#PublishFlowForm label {
   width: 100%;
}

#PublishFlowForm label span {
   float: right;
}

.ui-widget input, .ui-widget select, .ui-widget textarea{
   border: none;
   outline: none;
   color: #636b6e;
   background-color: transparent;
   border-bottom: 1px solid #a1aeb3;
}

.jsgrid-edit-row>.jsgrid-cell {
   background: white !important;
}

span.jsgrid-pager-page.jsgrid-pager-current-page {
   border: 1px solid #6a6a6a;
   border-radius: 8px;
   color: #6a6a6a;
}

.jsgrid-pager{
   float: right;
}

span.jsgrid-pager-page {
   color: #b7b7b7;
}

.jsgrid-pager-container {
   margin-top: 20px;
   height: 50px;
}

.addGroupBtnContainer,.saveGroupBtnContainer {
   width: 10%;
   display: inline-block;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url("../img/iconfinder_calendar.png") no-repeat;
    width: 20px;
    height: 20px;
    border-width: thin;
   cursor: pointer;
 }

#process_in_force_from,#process_in_force_to{
   padding-right:0 !important;
}

input[type="date"]::-webkit-inner-spin-button {
   display: none;
}

/*
tr.jsgrid-insert-row {
   border-bottom: 19px solid #f9f9f9;
}

.jsgrid-insert-row .jsgrid-cell {
   background: white !important;
}

tr.jsgrid-filter-row {
   border-bottom: 19px solid #f9f9f9;
}

.jsgrid-filter-row .jsgrid-cell {
   background: white !important;Swimlane
}*/

/*span.text-input-wrapper.designerToolbar {
   display: inline-block !important;
   width: 41%;
   margin-left: 3%;
   margin-top: 15px;
}*/
span.text-input-wrapper.designerToolbar {
    display: inline-block !important;
    width: 53%;
    margin-left: 3%;
    margin-top: 15px;
}

.jsgrid-insert-row .jsgrid-cell {
   background: white !important;
}

.jsgrid-filter-row .jsgrid-cell {
   background: white !important;
}

@media (min-width: 1025px) and (max-width: 1280px) {

   .newDesignerTopBarLeft{
      width:30%;
   }

   span.progressBarDesc1{
      width:31%;
      text-align: center;
   }

   span.progressBarDesc2{
      width:31%;
      text-align: center;
      vertical-align: top;
   }

   .progressBarDesc3{
      vertical-align: top;
      text-align: center;

   }

   .splash_btn_container{
      margin-top: 20vh;
   }

   .splash_load_btn{
      margin-top:30px;
   }

}

@media (min-width: 1280px) and (max-width: 1600px) {
   .newDesignerTopBarLeft{
      width:26%;
   }

   span.progressBarDesc1{
      width:31%;
      text-align: center;
      vertical-align: top;
   }

   span.progressBarDesc2{
      width:31%;
      text-align: center;
      vertical-align: top;
   }

   span.progressBarDesc3{
      width:31%;
      text-align: center;
      vertical-align: top;
   }
   process_notes
   .progressBarDesc3{
      vertical-align: top;
      text-align: center;

   }

   .splash_btn_container{
      margin-top: 25vh;
   }
}

@media screen and (min-width: 1600px) {
    .newDesignerTopBarLeft{
        width:30%;
    }
}
@media screen and (min-width: 1900px) {
    .newDesignerTopBarLeft{
        width:30%;
    }
}



.cleanGroup{
   font-size:21px;
   margin-top: 8px;
   width: 60%;
   text-align: center;
}

.ui-tooltip {
   background: white !important;
   color:#636b6e !important;
}

.splash_screen_text {
   width: 80%;
   text-align: center;
   color: #a1aeb3;
   font-size: 12pt;
   display: block;
   margin: 0 auto;
}

.splash_screen_text_container{
   margin-top:30vh;
}

::-webkit-clear-button {
   display: none;
}

.dialog .body {
   padding:30px !important;
}

.dialog .controls .control-button{
   font-family: inherit !important;
}

div#publishDialog {
   width: 90% !important;
   margin: auto;
   margin-top: 15px;
   margin-bottom: 15px;
   padding: 3%;
   background: white !important;
   -webkit-box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.10);
   box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.10);
}

.publishDialogUploadBtn{
   border:0;
   background:none;
   vertical-align: middle;
}


.publishDialogUploadBtnInner{
   color: #468bfe;
   cursor: pointer;
   font-size:25px;
}

.publishUploadFormLabel{
   font-size: 16px;
   color: #a1aeb3;
   font-weight: 600 !important;
}

div#firstSectionUpload {
   width: fit-content;
   margin: 15px;
}

div#secondSectionUpload {
   width: fit-content;
   margin: 15px;
}

#createProcessPckgButton {
   background: #468bfe;
   border-radius: 5px;
   border-color: #468bfe;
   color: #fff;
   margin: 10px 5px 0px 10px;
   padding: 9px;
}

#closePublishButton {
   background: #b7b7b7;
   border-radius: 5px;
   border-color: #b7b7b7;
   color: #fff;
   margin: 10px 25px 20px 10px;
   padding: 9px;
}

div#buttonsSectionUpload {
   width: fit-content;
   margin: 0 5px;
}

.publishUploadFormHeader{
   font-size: 16px;
   color: #636b6e;
   font-weight: 600 !important;
}

.publishUploadFormHeaderContainer {
   margin-bottom: 20px;
   margin-top: 15px;
}

#fileName,#fileSecondName{
   color: #a1aeb3;
   margin-left: 10px;
}

#sectionUploadContainer{
   margin-left: 20px;
}