/* ===========================================
   Jrole User Interface CSS Framework
   Output  : Uncompressed
   Theme   : Taihu
   File    : jui-forms-1.0.css
   Version : 1.0.0
   Author  : Netcomposite http://www.netcomposite.com/
     
   =========================================== */

/*  ==============================
    Forms and form elements reset
    ==============================*/

/*
 * Define consistent border, margin, and padding.
 */



form {
    border: 0;
    padding: 0; 
    outline:0;
}

fieldset {
    margin: 0;
    padding: 0 !important;
    outline:0;
 
}

legend {
    border: 0;
    padding: 0; 
    outline:0;
}


label {
    color: #000;
}



/* Removes excess padding in IE 8/9. */

input[type="checkbox"],   
input[type="radio"] {
    box-sizing: border-box; 
    padding: 0; 
    margin-right: 0.5em; /* add white space between input and label */
}

/*  Removes inner padding and search cancel button in Safari 5 , Chrome  for OSX */
 
input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
     -webkit-appearance:none;
      margin: 0;
}


/*
 * Removes IE10 specific decorations 
 */

input::-ms-clear{
       display:none;
}

::-ms-reveal {      /* do not show the eye for password inputs */
    width : 0;
    height: 0;
}

::-ms-clear {       /* do not show the x for text inputs */
    width : 0;
    height: 0;
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

button,
input,
select,
textarea {
    font-family: inherit; 
    font-size: 100%;
    margin: 0; 
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal !important;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}


input[type=datetime-local]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=month]::-webkit-inner-spin-button,
input[type=month]::-webkit-outer-spin-button,
input[type=week]::-webkit-inner-spin-button,
input[type=week]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
      margin: 0;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
     -webkit-appearance: none;
     display: none;
     margin: 0;
}
input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance:none; 
     -moz-apperance: none; 
      display: none;
}
input[type="range"]::-ms-track,
input[type="range"]::-ms-thumb {
       display: none;
}
input[type="range"], 
input[type="color"] {
       appearance: textfield;    
       -moz-appearance: textfield;
      -webkit-appearance: textfield; 
}

textarea, 
select, 
input[type="radio"],
input[type="checkbox"],
input[type="file"],
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"],
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="email"], 
input[type="url"],
input[type="range"], 
input[type="color"]{
       outline:0;
       box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-background-clip: padding;
      -moz-background-clip: padding;
       background-clip:padding-box;
       border-radius:0;
      -webkit-border-radius:0;
      -moz-border-radius:0;
      -ms-border-radius:0;
      -o-border-radius:0;
}



/*  ==============================
    Establish consistent typography
    ==============================*/

/*
* Placeholders consistency
* On focus color should be the same as input background to hide placeholder
*/

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #333;
}
input:focus::-webkit-input-placeholder { 
    color: #fff !important; 
}

:-moz-placeholder {   /* Mozilla Firefox 4 to 18 */
    opacity: 1;
    color:    #333;
}
input:focus:-moz-placeholder { 
    opacity: 1;
    color: #fff !important;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity: 1;
    color:    #333;
}
input:focus::-moz-placeholder {
    color:    #fff;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #333;
}
input:focus:-ms-input-placeholder { 
    color: #fff; 
}


/* 
 *  Elements default appearance
 *
 */


textarea, 
select, 
input[type="file"],
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"],
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="email"], 
input[type="url"],
input[type="range"], 
input[type="color"]{
      display: inline-block;
      zoom: 1;
     *display: inline; /* Hack for IE */
      vertical-align: middle;     
      margin:0;
      
      font-size: 1em;
      padding:  8px;  /* Controls size of input and should be only in PX */ 
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;           
      border: 1px solid transparent;
      background-color: transparent;
      color:#000;      
 }


input[type="radio"],
input[type="checkbox"] {
       display: inline-block;
}


/* 
 *  Texarea fixes and reset
 *
 */


textarea {
    overflow: auto; 
    vertical-align: top; 
    height: auto;
    resize: none; 
    white-space: pre-line !important;
}

/* 
 *  Select fixes and reset 
 *
 */
 
select {
       appearance:none;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-overflow-style: none;
       text-indent: 0.01px;
       text-overflow: '';
}
select::-webkit-scrollbar{
       width:1px;
       background-color:transparent
}
select::-ms-expand {
       display: none;
       overflow: hidden;
}
select::-ms-track {  /* hide scroll track */
       display: none;
}

select[multiple] {
       appearance:none;
       min-height: 10em;
       overflow-y:hidden;
}

select[multiple],
select[size] {
  height: auto;
}

select:focus {
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
select option[disabled="disabled"] {
  display: none;
}


/* 
 *  Radio and checkboxes fixes and reset 
 *
 */
 
 
 

/* 
 *  File fixes and reset 
 *
 */


input[type="file"]::-ms-browse { /*  reset for IE10 file input browse button */
       background: none;
       border: none;
       outline: none;
       padding: 0;
}
input[type="file"]::-ms-value{   /*   reset for IE10 file input field */
       background: none;
       border: none;
       outline: none;
}


/*  Prevent mobile browser to zoom page on focus */


input[type="text"]:focus, input[type="text"]:hover {
font-size: 100%; /* Adding 16px on focus/hover will prevent page zoom */
}


/*  ==============================
    Default form containers
    ==============================*/

.jp-wfl-form {
         display: block;
         position: relative;
         vertical-align: top;
        /* overflow: hidden; */
}

.jp-wfl-form-render-standalone {   /*  Decorations for standalone forms */ 
         display: block;
         margin: 0 auto;
         padding: 0em;
         height: auto;
         width: auto;
         background-color: #ffffff;
         border: 1px solid #999;
         border: 1px solid rgba(0, 0, 0, 0.3);
         outline: none;
         -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
         -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          -webkit-background-clip: padding-box;
         -moz-background-clip: padding-box;
          background-clip: padding-box;
   
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
          border-radius: 4px;
          

}

.jp-wfl-form-render-standalone .jp-wfl-form-entry  {
         padding: 2em;  
}
.jp-wfl-form-render-embedded {
         display: block;
         margin: 0; 
         padding: 0;
         height: auto;
         width: auto;
 }


.jp-wfl-form-header {
      padding: 0.85em;
      margin-bottom: 0;
      text-align: left;
      border-bottom: 1px dotted #a8a8a8;
 
 /*     border-bottom: 1px solid #a8a8a8;
      *zoom: 1;
      font-size: 1.1em;
      font-weight: 600;
      background: rgb(255,255,255); 
      background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); 
      background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
      background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
      background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
      background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); 

*/

}

.jp-wfl-form-header h1,
.jp-wfl-form-header h2,
.jp-wfl-form-header h3,
.jp-wfl-form-header h4 {
      text-align: center;
      color: #000000;
      margin: 0.15em !important;
      font-weight: 600;
}

.jp-wfl-form-entry  {
    /* padding: 1em; */
      padding: 0.85em;  
}


.jp-wfl-form-section  {
       padding: 1em; 
       margin: 0;
       margin-top: 1em; 
       margin-bottom: 1em;
       background: #fff;
       border: 1px solid #ddd;
}

.jp-wfl-form-section-sub {
       padding: 2em;
       margin: 0.10em; 
       margin-top: -2px !important; 
       background:  #FAFAFA;  
       border: 1px solid #999; 
       border-top: none !important; 
}

.jp-wfl-form-section-prompt button   {
	display: block !important;
	width: 90% !important;
	height: 90% !important;
	margin: 5%  !important;
	text-align: center;
	cursor: pointer;

	box-sizing: border-box;
	width: auto;
	color: #fff !important;

 }

.jp-wfl-form-section-prompt button .jp-bu-label {
    display: block;
    padding: 1em;
    white-space: normal !important;
 }

.jp-wfl-form-tabs {
      margin-top: 1em;
}

.jp-wfl-form-tabs {
      margin-top: 1em;
}

.jp-wfl-form-tabs .jp-bu{

}

.jp-wfl-form-actions .jp-bu {
    display:  block !important; 
    width: 100% !important;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid #999;
 
 }

.jp-wfl-form-actions [class*="jp-cell"] {
    padding: 1px !important;
}  



.jp-wfl-form-footer {
    padding: 1.2em 0.8em;
    text-align: left;

    background-color: #fff;
    border-top: 1px solid #a8a8a8;
    -webkit-border-radius: 0 0 6px 6px;
       -moz-border-radius: 0 0 6px 6px;
            border-radius: 0 0 6px 6px;
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
       -moz-box-shadow: inset 0 1px 0 #ffffff;
          box-shadow: inset 0 1px 0 #ffffff;
  
}


/*  Reset overflow  and make drop down lists visible in the widgets */

form .jp-nav-widget,
form .jp-nav-deck-body { overflow: visible !important; }


/* Aligned form */

.jp-wfl-form-aligned .jp-wfl-io {
      white-space: nowrap;
}

.jp-wfl-form-aligned .jp-wfl-io label {
        display: inline-block;
        position: relative;
        margin-right: -4px; /* removes white space between inline blocks */
        box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;

        width: 30%;
        vertical-align: top;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;   
        font-weight: 600;
        text-align: right;
        border: 1px solid  transparent;
    
        padding: 0; 
       /*  border: 1px solid transparent; */
       /*   border-bottom: 1px solid #eee; */
       /*  border: 1px solid  #ff0000;*/
       /*   font-weight: 600; */
}


.jp-wfl-form-aligned .jp-wfl-io label span{
        display: block;
        border: 1px solid transparent;
        padding: 6px;  /* Padding for alignment must be equal to inpout padding */

       /*  border: 1px solid transparent; */
       /*   border-bottom: 1px solid #eee; */
       /*  border: 1px solid  #ff0000;*/
       /*   font-weight: 600; */
}


.jp-wfl-form-aligned .jp-wfl-io-env {  
        display: inline-block;
        position: relative;
        width: 70% !important; 
        box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
}

.jp-wfl-form-aligned  .jp-wfl-io-get-message span{
       padding-left: 30%;
}

.jp-wfl-io-aligned .jp-wfl-io-get-message {
        margin-left: 31%;
        color: #666;
        font-size: 0.8em;
        white-space: pre-line !important;
}

/*  ==============================
    Scaling TODO
    ==============================*/

.jp-wfl-form-scale-mini  {
         font-size: 80% !important;
 
}

.jp-wfl-form-scale-large  {
         font-size: 125% !important;
 
}


.jp-wfl-form-scale-xlarge  {
         font-size: 200% !important;
 
}

/*  ==============================
    Outlines TODO
    ==============================*/



/* Highlight input fields on focus */

.jp-wfl-io input[type="text"]:focus,
.jp-wfl-io input[type="password"]:focus,
.jp-wfl-io input[type="file"]:focus,
.jp-wfl-io select:focus,
.jp-wfl-io textarea:focus {
        background: #fff;
  /*     border: 1px solid transparent; */
        border: 1px solid #4697fc; 
}


.jp-wfl-io-outline-reset .jp-wfl-io {
      border: none !important;     
      padding: 0 !important; 
      margin:  0 !important; 
      border-radius: inherit !important;
      -moz-border-radius: inherit !important;
      -webkit-border-radius: inherit !important;
}

.jp-wfl-io-outline-reset .jp-wfl-io input[type="text"], 
.jp-wfl-io-outline-reset .jp-wfl-io input[type="password"], 
.jp-wfl-io-outline-reset .jp-wfl-io input[type="file"], 
.jp-wfl-io-outline-reset .jp-wfl-io select, 
.jp-wfl-io-outline-reset .jp-wfl-io textarea {	
      background-color: #fff; /* default rendering */	
      border: none !important;	
      margin: 0;
      border-radius: inherit !important;
      -moz-border-radius: inherit !important;
      -webkit-border-radius: inherit !important;
}

.jp-wfl-io-outline-reset .jp-wfl-io-env {
      border: none !important; 	
      border-radius: inherit !important;
      -moz-border-radius: inherit !important;
      -webkit-border-radius: inherit !important;
      padding: 0 !important;
      margin:  0 !important; 
} 

.jp-wfl-io-outline-reset .jp-wfl-io-inp-append {
 	border: none !important;
 	padding: 0;
       border-radius: inherit !important;
      -moz-border-radius: inherit !important;
      -webkit-border-radius: inherit !important;

}



/*  ==============================
    Default form elements envelopes
    ==============================*/


.jp-wfl-io {
        position: relative;
        display: block;
        white-space: nowrap;   
        text-overflow: ellipsis;
        vertical-align: top;
        padding: 0;
        background: none;
        border: 1px solid transparent; 
 
}
.jp-wfl-io:hover {
        border: 1px solid transparent;
        /*        background: none; */
 
}
.jp-wfl-io:last-child {                     
        margin-bottom: 0em;
}

.jp-wfl-io input[type="text"], 
.jp-wfl-io input[type="password"], 
.jp-wfl-io input[type="file"], 
.jp-wfl-io select, 
.jp-wfl-io textarea,
.jp-wfl-io iframe {	
	width: 100%;
        background-color: #fff; /* default rendering */	
 	border: 1px solid #999; 	
	margin: 0;
}


.jp-wfl-io input[type="text"]:focus,
.jp-wfl-io input[type="password"]:focus,
.jp-wfl-io input[type="file"]:focus,
.jp-wfl-io select:focus,
.jp-wfl-io textarea:focus, 
.jp-wfl-io iframe: focus {
        background: #fff;
   /*     border: 1px solid transparent; */
        border: 1px solid #4697fc; 
}



.jp-wfl-io-array {  /* array container used for checkboxes or radios */
       position: relative  !important;
       padding: 0em; 
       margin-bottom: 1em;
       
}

.jp-wfl-io-array-prepend {  /* array container used for checkboxes or radios */
       padding-right: 85px;
       
}

.jp-wfl-io-array-controls {   /* array line controls right */
      position: absolute; 
      top: 0; 
      right: 0; 
      z-index:9000;

}


/* interactive map render container */

.jp-wfl-io-map {
        display: block;
        height:400px;
        width: 100%;
        
 }
    
    

/* add ribon for extended controls above large inputs multiple and textarea */

.jp-wfl-io-ribbon { 
	background: #fff;
	border: 1px solid #999;
	
	padding: 8px;
	border-bottom: none;
}

.jp-wfl-io-progress { 
	background: #fff;
	border: 1px solid #999;
	padding: 4px;
}

.jp-wfl-io-progress span {
        display: block;
        width: 80%;
       	background: #ff0000;
}

.jp-wfl-io label {
        display: block;
        width: auto;
        vertical-align: top;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        line-height: 200%;
        margin:0;
        padding: 0;
        text-transform: none;
 
       /*  padding: 0.15em 0em 0em 0em; */
       /*  border: 1px solid transparent; */
       /*  border-bottom: 1px solid #eee; */
       /*  border: 1px solid  #ff0000;*/
       /*  font-weight: 600; */
}


.jp-wfl-io label  span{
        font-weight: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
/*        padding-bottom: 0.5em; */
}




.jp-wfl-io-env {              /* Form input elements envelope */
        position: relative;
        z-index: 2; 
        overflow: hidden;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box; 
         width: 100%;
         margin: 0;
         padding: 1px; /* fix FF renedering issues with parrent transforms */         

        

}

.jp-wfl-io-env var {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        overflow: hidden;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;  
        height: 100%;     /* to hold indicator in the center when scaling */
        line-height: 100%;  
        vertical-align: middle;
        padding: 1px;    /* Places indicator inline with inpout field  */
        margin: 0;
        border: 2px solid transparent;  /* Preserves layout for mouseovers */
        background: transparent; 

}

.jp-wfl-io-env var  i{
        display: block;
     	font-size: 1em;
        padding: 8px 12px;
        height: 100%;  
        vertical-align: middle;
        margin: 0;
        background: #fff;
        border: 2px solid transparent;  /* Preserves layout for mouseovers */

}

[data-io-status="optional"] {

}

[data-io-status="required"] .jp-wfl-io-env var i:after {
        content:" \2736";
        color:red;
        font-weight: 600;
        font: bold  Verdana, Sans-serif;

}

[data-io-status="valid"] .jp-wfl-io-env var i:after {
        content:" \2714";
        color:green;
        font-weight: 600;
        font: bold  Verdana, Sans-serif;
}

[data-io-status="invalid"] .jp-wfl-io-env var i:after { 
        content:" \2716";
        color:red;
        font: normal  Verdana, Sans-serif;
 
}


[data-io-status="invalid"] textarea, 
[data-io-status="invalid"] input[type="password"], 
[data-io-status="invalid"] input[type="text"] {
        border: 1px solid #ff0000 !important;
 }
 
 
 

.jp-wfl-io-push-left  input[type="text"]   {
        padding-left: 5em !important;         
        /* border-left: 40px solid transparent !important; */ /* space for the left action overlay */
         
}
.jp-wfl-io-push-right input[type="text"]   {
        padding-right: 3em;         
        /* border-left: 40px solid transparent !important; */ /* space for the left action overlay */
         
}

.jp-wfl-io-inp-append {
         overflow: hidden;
         box-sizing: border-box; 
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;  
         height: 100%;     /* to hold button in the center when scaling */
         line-height: 100%;  
         vertical-align: middle;
         padding: 1px;    /* Places button inline with input field  */
         margin: 0;
         border: 2px solid transparent;  /* Preserves layout for mouseovers */
         background: transparent; 
  }

.jp-wfl-io-inp-append  .jp-bu {
         height: 100% !important;  /* to hold button in the middle when scaling */            
         vertical-align: middle;
        }


.jp-wfl-io-push-left .jp-wfl-io-inp-append {
         position: absolute;
         top: 0px;
         left: 0;
         z-index: 15;
}


.jp-wfl-io-push-right .jp-wfl-io-inp-append {
         position: absolute;
         top: 0;
         right: 0;
         z-index: 15;
}


.jp-wfl-io-inp-prepend {
         overflow: hidden;
         box-sizing: border-box; 
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;  
         height: 100%;     /* to hold button in the center when scaling */
         line-height: 100%;  
         vertical-align: middle;
         padding: 1px;    /* Places button inline with input field  */
         margin: 0;
         border: 2px solid transparent;  /* Preserves layout for mouseovers */
         background: transparent; 
         display: inline-block;
 
  }






/* Form inline messages and notifications */



.jp-wfl-io-block-message {
        padding: 0.5em 0.75em;
        margin: 0;
        line-height: 125%;
        text-transform: none;
 
}

.jp-wfl-io-overlay-prompt .jp-wfl-io-block-message label {
        display: inline !important;
        cursor: pointer;
        padding: 0 !important;
        text-align: center;
        margin: 0 auto !important;
     
}

.jp-wfl-io-block-message span{
        display: block;
        
}


.jp-wfl-io-push-message {
        position: relative;
        padding: 0.75em;
        line-height: 150%;
        text-transform: none;
        border: 1px solid transparent !important;
        margin: 2px; 


}
.jp-wfl-io-push-message a.jp-wfl-io-toast-close {
         position: absolute;
         top: 16px;
         right : 8px;
         
}

.jp-wfl-io-push-message span {
        display: block;
        width: 100%;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        white-space: normal !important;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 10px; 
        padding-right:20px; 
        text-decoration: none;
        border: 1px solid transparent;
        vertical-align: middle;
}


	          
	          
.jp-wfl-io-array .jp-wfl-io-block-message {
       border: 1px solid #ddd !important; 
}


.jp-wfl-io-get-message {
        padding: 0;
        margin: 0;

}


.jp-wfl-io-get-message span {
        display: block;
        width: 100%;
        box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        white-space: normal !important;
        text-transform: none;
        font-size: 0.8em;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        color: #000;
        text-decoration: none;
/*        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;   */
        border: 1px solid transparent;
        color: #666;
}

/* Policy attributes to display in getMessage */

.jp-wfl-io-get-message .jp-wfl-io-get-policy {
	padding: 0.5em;
	margin: 1px;
	background: #fafafa;
	border: 1px solid #ddd;

}
.jp-wfl-io-get-message .jp-wfl-io-get-policy  dl   {
	margin-bottom: 1em;
}

.jp-wfl-io-get-message .jp-wfl-io-get-policy  dl dt {
	line-height: 2.0em;
}
.jp-wfl-io-get-message .jp-wfl-io-get-policy  dl dd {
	line-height: 1.75em;
	padding-left: 1.5em;
}

.jp-wfl-io-get-message .jp-wfl-io-get-policy .jp-wfl-ip {
	margin-bottom: 0 !important;

}



/*  ==============================
     Form elements masking
    ==============================*/

/* Acceptable user policies */


.jp-wfl-io-aup  {
      border: 1px solid #999;
      background: #fafafa;
      color: #00000; 
}

.jp-wfl-io-aup .jp-wfl-io-aup-text {
      white-space: normal !important;
      padding: 1em;
      margin-bottom: 1em; 
      font-size: 80%;
}

.jp-wfl-io-aup .jp-wfl-io-aup-text  h1,h2,h3,h4,h5 {
     display: block;
     margin-top: 1em;
     margin-bottom: 1em;
}


.jp-wfl-io-aup .jp-wfl-io-aup-label {
     display: block; 
     background: #eee;
     padding: 1em;
     font-weight: 600;
}


.jp-wfl-io-aup .jp-wfl-io-aup-text  p,
.jp-wfl-io-aup .jp-wfl-io-aup-text  span,{
     display: block;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
}


.jp-wfl-io-aup .jp-wfl-io-array {
   background: #fff;
   border-top: 1px solid #ddd; 
}





/*  Form elements mascaraude */





/* 1. Checkboxes and Radios */


.jp-wfl-io-radio,
.jp-wfl-io-checkbox {
    border: 1px solid transparent;
 }   

.jp-wfl-io-radio .jp-wfl-io-env,
.jp-wfl-io-checkbox .jp-wfl-io-env  {
    border: 1px solid transparent;
 }   


.jp-wfl-io-radio input[type="radio"] + span,
.jp-wfl-io-radio input[type="radio"] + span::before,
.jp-wfl-io-checkbox input[type="checkbox"] + span,
.jp-wfl-io-checkbox input[type="checkbox"] + span::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding; 0;
    

}
 
.jp-wfl-io-radio,
.jp-wfl-io-checkbox
{
    position: relative;
}
 
.jp-wfl-io-radio label *,
.jp-wfl-io-checkbox label *
{
    cursor: pointer;

}
 
/* Add root to make sure that IE8 ignores position */

:root .jp-wfl-io-radio input[type="radio"],
:root .jp-wfl-io-checkbox input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
    left:0;

/*    position: absolute; */
/*    margin-right: 1em;  */

}

.jp-wfl-io-radio  span,
.jp-wfl-io-checkbox  span {

   line-height: 1.75em;
   border: 0px solid #000;

}


.jp-wfl-io-radio  span em,
.jp-wfl-io-checkbox  span em {
   display: block;
   line-height: 150%;
   margin-left: 2.25em;
   border: 0px solid #000;

}

.jp-wfl-io-radio input[type="radio"] + span,
.jp-wfl-io-checkbox input[type="checkbox"] + span
{      
        white-space: normal;
        overflow: hidden;
        max-width: 99%;
  	text-overflow: ellipsis;
  	vertical-align: middle;
}

.jp-wfl-io-radio label:hover span::before,
.jp-wfl-io-checkbox label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
     box-shadow: 0 0 2px #ccc;
}
 
.jp-wfl-io-radio label:hover span,
.jp-wfl-io-checkbox label:hover span
{
    color: inherit;
}
 
.jp-wfl-io-radio input[type="radio"] + span::before,
.jp-wfl-io-checkbox input[type="checkbox"] + span::before
{

    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    margin: 0 0.5em 0 0;
    border: 1px solid #999;
    line-height: 1.5em;
    text-align: center;
    padding-bottom: 1.15em;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;


   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.08),0 1px rgba(255,255,255,0.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.08),0 1px rgba(255,255,255,0.6)

    background: #f6f6f6 ;
    background: -moz-radial-gradient(#ffffff, #f6f6f6);
    background: -webkit-radial-gradient(#ffffff, #f6f6f6);
    background: -ms-radial-gradient(#ffffff, #f6f6f6);
    background: -o-radial-gradient(#ffffff, #f6f6f6);
    background: radial-gradient(#ffffff, #f6f6f6); 

 
 
}
 
.jp-wfl-io-radio input[type="radio"]:checked + span::before,
.jp-wfl-io-checkbox input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
.jp-wfl-io-radio input[type="radio"]:disabled + span,
.jp-wfl-io-checkbox input[type="checkbox"]:disabled + span
{
    cursor: default;     
    -moz-opacity: .4;
    -webkit-opacity: .4;
     opacity: .4;
}
 
.jp-wfl-io-checkbox input[type="checkbox"] + span::before
{
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
 
.jp-wfl-io-radio input[type="radio"]:checked + span::before
{
    content: "\2714";
    text-align: center;
    border: 1px solid #999;
    background: #4697fc;
    color: #fff;
}
 
.jp-wfl-io-checkbox input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    text-align: center;
    border: 1px solid #999;
    background: #4697fc;
    color: #fff;
}



/* 2. Button File uploader  */


.jp-wfl-io-file input[type="file"] {
     display: block;
     width: auto;
     height: auto;
     overflow: hidden;
     position: absolute;
     top: -1px;
     left: -1px;
     z-index: 10;
     border: 0;
     opacity: 0;
}








/* 3. MEDIA PLAYER FILER UPLOADER AND RENDERER */

.jp-wfl-io-attachment {
        padding: 0;
	background: rgba(0,0,0,0.1);
	border: 1px solid #999;


    }

.jp-wfl-io-attachment:hover {
        padding: 0;
	background: rgba(0,0,0,0.1);
	border: 1px solid #1b8dff;

    }    

.jp-wfl-io-attachment .jp-wfl-ip-bar {
        margin: 0 !important;

}

 .jp-wfl-io-attachment  input[type="file"] {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
 }

 .jp-wfl-io-attachment label {
	display: block !important;
	padding-top: 4em;
	padding-bottom: 4em;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	width: auto;

 }
 .jp-wfl-io-attachment label b{
	display: block !important;
	padding-top: 0.75em;
	width: auto;
	fonmt-weight: normal;
	text-align: center;

 }
.jp-wfl-io-attachment-preview  {
	position: relative;
	height: 100%;
	padding: 0;
        margin: 0;

}
.jp-box-masthead-controls  label {
	display: block !important;
	padding-top: 0em;
	padding-bottom: 0em;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	width: auto;

 }


/* START MEDIA EDITOR */

.jp-wfl-io-media-editor {
      position: relative;
      vertical-align: middle;

}

.jp-wfl-io-media-editor-image {
	position: relative;
	padding-bottom: 50% !important;
	height: 0;
	
}


.jp-wfl-io-media-editor-image img{
 	min-width: 2.5em;
	min-height: 2.5em;
	max-width: 100%;
	max-height: 100%; /*remove to disable retaining ratio */
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border: 2px solid #1b8dff !important;
 

}

.jp-wfl-io-media-editor-video {

}


/* END MEDIA EDITOR */

/* START MEDIA IMAGE ZOOM */

.jp-wfl-io-media-image-zoom {
	position: relative;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.jp-wfl-io-media-image-zoom-ratio {
	display: inline-block;
	padding: 0.25em;
	padding-top: 0.75em;
	font-size: 80%;
}

.jp-wfl-io-media-image-zoom-coordinates {
	display: inline-block;
	padding: 0.25em;
	padding-top: 0.75em;
	font-size: 80%;
}

/* END MEDIA IMAGE ZOOM */


.jp-wfl-io-attachment-preview .jp-nav-bar {
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 3em;

}

.jp-wfl-io-attachment-renderer  {
	/* add max-height and enable drag position */
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	text-align: center;
}

.jp-wfl-io-attachment-renderer img  {
	max-width: 100%;
	padding: 0;
	margin: 0 auto;
	border: 0px solid #fff;


}




.jp-wfl-io-media .jp-wfl-picker-io-cells [class*="jp-cell-width"] {
     padding-bottom: 24.28%;
     height: 0;
     position: relative !important;
     border: 2px solid transparent;

  }
.jp-wfl-io-media .jp-wfl-picker-io-cells [class*="jp-cell-width"]:first-child {
     border-left: 0px solid transparent !important;
 }
.jp-wfl-io-media .jp-wfl-picker-io-cells [class*="jp-cell-width"]:last-child {
     border-right: 0px solid transparent !important;
}

.jp-wfl-io-media .jp-wfl-picker-io-cells [class*="jp-cell-width"] .jp-bu {
     border-right: 0px solid transparent !important;
}

.jp-wfl-picker-io-cells [class*="jp-cell-width"] .jp-wfl-io-rendition {
    display:  block !important;
    width: 100% !important;
    height:  100% !important;
    position: absolute;
    top: 0  !important;
    bottom: 0px !important;
    left: 0  !important;
    right: 0  !important;
    line-height: inherit !important;

    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    font-weight: normal;

   }

.jp-wfl-io-media {
     font-size: 100% !important;
     border-left: 0px solid #DDD;
     border-top: 0px solid #DDD;
}



.jp-wfl-io-media .jp-wfl-picker-io-cells {
     padding-bottom: 60px;
     margin-bottom: 0.5em;
     margin-top: 0.5em;
 }

.jp-wfl-io-media .jp-wfl-io-rendition .jp-box-masthead  {
     position: absolute; 
     bottom: -60px; 
     left: 0px;  
     right:0px;
}

/*  HOVER EOVERLAY ACTIONS */  


.jp-wfl-io-media-editor .jp-wfl-io-overlay-prompt, 
.jp-wfl-io-rendition  .jp-wfl-io-overlay-prompt {
   visibility: hidden !important;
   display: none !important;

}

.jp-wfl-io-media-editor:hover .jp-wfl-io-overlay-prompt, 
.jp-wfl-io-rendition:hover  .jp-wfl-io-overlay-prompt {
   visibility: visible  !important;
   display: block !important;
 

}





/* 4. TEXTARA AND IFRAME */






/* ===============================
   4.1 Buttons basic rendering
   =============================== */



.jp-bu {
	position:relative;
        display: inline-block;
        zoom: 1;
        *display: inline;
        outline:0;
        box-sizing: border-box;
        -webkit-box-sizing:  border-box;
        -moz-box-sizing:  border-box;
	font-weight: normal;
	text-decoration:none;
	text-transform: none;
        margin: 0 !important;        
        vertical-align: middle;       
	color: #000;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px 8px;
        font-size: 1em;
        line-height: 2.5em;
        height: 2.5em; 
}

span.jp-bu {
        line-height: 200%;
}

/* disable this as it breaks a buttons in switchbiard */
/* a.jp-bu {  
        line-height: 200%;
        text-decoration: none !important;
        border: none !important;
}
*/

.jp-bu:hover {
         color: #ff0000;
}

.jp-bu-render-unmasked {
	 box-shadow: none;
	 border-radius: 0 !important;
         border: none;
/*	 border: 1px solid transparent; */
	 background: transparent;
	 cursor: pointer;
        -webkit-appearance:none;
        -webkit-box-shadow: none;
}

.jp-bu-render-content-box {
	 box-shadow: none;
	 border-radius: 0 !important;
         border: none;
/*	 border: 1px solid transparent; */
	 background: transparent;
	 cursor: pointer;
        -webkit-appearance:none;
        -webkit-box-shadow: none;
         height: auto;
         line-height: 2.5em;
         white-space: normal !important;
         padding: 0.5em;
         background-color: #FFF;
         border: 1px solid #999;
         width: 100%;
         color: #000
         font-size: 90%;
}


.jp-bu-render-button {
 	 background: #eee;
 	 background: -moz-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: -webkit-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: -o-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: -ms-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
	 border: 1px solid #b8b8b8;
	 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
	 border-radius:3px;
	 -moz-border-radius: 3px;
	 -webkit-border-radius: 3px;
}

.jp-bu-render-button:hover {
 	background: #e6e6e6;
 	background: -moz-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: -webkit-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: -o-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: -ms-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	color: #000;
}

.jp-bu .jp-ici {
 	display: inline-block;
 	vertical-align: middle;
 	line-height: normal;
}

.jp-bu-label {
 	display: inline-block;
        vertical-align: middle;
        line-height: 100%;
        position: relative;

}

.jp-bu-label-badge {
         position: absolute !important;
         right: 15px !important;
         top: 0;
         z-index: 999999;
         white-space: nowrap;
 	 display: inline-block;
         vertical-align: middle;
         line-height: 100%;
}
.jp-bu-label-badge button {
         display: inline-block !important;
         margin-left: 5px !important;
}

.jp-bu-label-badge b {
          display: inline-block;
          padding-left: 0.5em;
          padding-right: 0.5em;
}

.jp-bu-label-badge  span.jp-bu-label {
         display: inline !important;
         line-height: 100%;
}


/* ===============================
   4.2 Buttons sizes and scaling
   =============================== */

.jp-bu-size-mini {
	font-size: .85em;
	padding: 0 .5em;
}


.jp-bu-size-small {
	font-size: .9em;
}


.jp-bu-size-large {
	font-size: 1.2em;
	border-radius: 5px;
}


.jp-bu-size-xlarge  {
	border-radius: 7px;
	font-size: 1.5em;
	padding: 0 .7em;
}

.jp-bu-size-xxlarge  {
	border-radius: 7px;
	font-size: 2em;
}


input.jp-bu,
button.jp-bu {
 	line-height: normal;

}


button.jp-bu-render-button,
button.jp-bu-render-unmasked {
	top: 0;
}




/* ===============================
   4.3 Buttons grouping and panels
   =============================== */

.jp-bu-panel {
	display: inline-block;
	margin: 0 0em 0 0; /* Enable spacing in the parent containers */
	padding: 0;
	position: relative;
	white-space: nowrap;
}

.jp-bu-panel .jp-bu {
 	/* float:left; */
 	text-overflow: ellipsis;
 	overflow: hidden;
        border-left: none;
 	border-right: 1px solid #b8b8b8;
 	border-radius: 0;
 	margin: 0;
}

.jp-bu-panel .jp-bu span {
 	text-overflow: ellipsis;
 	overflow: hidden;
}


.jp-bu-panel .jp-bu:first-child,
.jp-bu-panel .jp-bu-append {
	border-left: 1px solid #b8b8b8;
	border-radius: 3px 0 0 3px;		
}

.jp-bu-panel a.jp-bu:first-child:last-child {
	border-radius: 3px;
}

.jp-bu-panel .jp-bu:last-child,
.jp-bu-panel .jp-bu-prepend {
	border-radius: 0 3px 3px 0;		
}

.jp-bu-panel .jp-bu-prepend {
	border-left: 1px solid #fff;
}



.jp-bu-render-button .jp-ici:first-child:last-child {
 	margin: 0;
}

.jp-bu-toggle {
	display: block  !important;
	white-space: nowrap;
	width: auto;
}

.jp-bu-toggle .jp-bu  {
 	display: inline-block !important;
 	margin: 0 !important;
 	border-radius: 0;
}

.jp-bu-toggle .jp-bu.jp-bu-size-small:first-child {
	border-radius: 3px 0 0 3px;
} 		

.jp-bu-toggle .jp-bu.jp-bu-size-small:last-child {
	border-radius: 0 3px 3px 0;
	border-left: none;
} 		


/* ===============================
   4.3  Workflow panels and wizards
   =============================== */

.jp-wfl-io-workflow {}

.jp-wfl-io-workflow-scale-default .jp-ici{  /* for desktop more 600 */
    font-size: 150%;

}

.jp-wfl-io-workflow-scale-default .jp-bu-label {
     display: block;
     font-size: 80%;
     padding: 0.5em !important;
     text-transform: uppercase;
     line-height: 150%;
}

.jp-wfl-io-workflow-scale-portable .jp-ici {
    font-size: 175%;

}

.jp-wfl-io-workflow-scale-portable .jp-bu-label {
     display: none !important;

}


/* ===============================
   4.5  Tag style buttons and labels
   =============================== */
   
 .jp-wfl-io-cluster  .jp-wfl-io-env {
        position: relative;
        z-index: 2;
        background-color: #fff; /* default rendering */
        border: 1px solid #999;
    	margin: 0;
 }


 .jp-wfl-io-cluster  .jp-wfl-io-env input[type="text"]:focus {
        border:  0px solid transparent !important;
 }



 .jp-wfl-io-cluster  input[type="text"] {
        float: left !important;
        /* border: none !important; */
        width: auto !important;
        padding: 8px;
        margin: 4px;
        border: 0px solid #000;
 }

.jp-wfl-io-tag .jp-bu {
        margin-left: 5px !important;
 }

.jp-wfl-io-tag {
         display: inline-block;
         float: left;
         line-height: 150% !important;
         padding-left: 0.5em;
         padding-right: 0 !important;
         margin: 0.25em;
         white-space: nowrap;
         border-radius: 4px;
  }

.jp-wfl-io-tag .jp-ici {
 
	 margin-bottom: 0.15em !important;
	  margin-right: 0.25em;
} 
.jp-wfl-io-tag  em,
.jp-wfl-io-tag  b,
.jp-wfl-io-tag  strong,
.jp-wfl-io-tag  a {
	  display: inline-block;
	  line-height: 100% !important;
	 
	  margin-top: 0.10em !important;
	  padding-left: 0.5em;
	  text-decoration: none;
	  color: inherit !important;
	  vertical-align: middle;
	  
  }

.jp-wfl-io-tag-label {
	position: absolute !important;
	top:0;
	bottom:0;
	left:0;
	line-height: 200% !important;
	padding-right: 0.5em !important;
	text-decoration: none;
	border-radius: 0 !important;
	max-width:98% !important;
	width: 100%;
 
}

.jp-wfl-io-tag-label a {
	width: 100%;
	padding-right: 1.5em;
	display: block;
	line-height: 150% !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}

.jp-wfl-io-label {
	height: 100%;
	display: inline-block;
	padding-left: 1em;
	line-height: 200% !important;
	border-left: 0px solid #ddd;
	vertical-align: middle;
        outline: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
}

.jp-wfl-io-label .jp-bu-label {
	max-width: 7em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}


/* ===============================
   4.6  Button toggles on and off
   =============================== */
   
   
  .jp-wfl-io-toggle {
       position: relative; 
       width: 7.0em;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select: none;
  }
     .jp-wfl-io-toggle input[type="checkbox"] {
      display: none !important;
 }

  .jp-wfl-io-toggle label {
      display: block; 
      overflow: hidden; 
      cursor: pointer;
      border: 1px solid #999999; border-radius: 3px;
  }

 .jp-wfl-io-toggle .jp-bu-label var {
      display: none !important;
  }
 .jp-wfl-io-toggle .jp-bu-label {
      display: block; 
      width: 200%;
      margin-left: -100%;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      -moz-transition: margin 0.3s ease-in 0s; 
      -webkit-transition: margin 0.3s ease-in 0s;
      -o-transition: margin 0.3s ease-in 0s;
      transition: margin 0.3s ease-in 0s;
      
  }

  .jp-wfl-io-toggle .jp-bu-label:before, 
  .jp-wfl-io-toggle .jp-bu-label:after {
      display: block; 
      float: left; 
      width: 50%; 
      height: 100%; 
      padding: 0; 
      line-height: 2em;
      color: white; 
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; 
      box-sizing: border-box;
  }

  .jp-wfl-io-toggle .jp-bu-label:before {
      content: "Undefined";
      padding-left: 0.5em;
      background-color: #4697FC; 
      color: #FFFFFF;
      box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3) !important;
      text-align: left;

  }
  .jp-wfl-io-toggle .jp-bu-label:after {
      content: "Undefined";
      padding-right: 0.5em;
      background: #ededed !important;
      color: #000 !important;
      box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3) !important;
      text-align: right;
  }
.jp-wfl-io-toggle .jp-bu {
      display: block; 
      width: 1.5em;
      margin: 4px;  
      height: 100% !important;
      background: #FFFFFF;
      border: 2px solid #999999;
      border-radius: 3px;
      position: absolute; 
      top: 0; 
      bottom: 0;
      right: 5.5em;
      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
     -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
 }

.jp-wfl-io-toggle input[type="checkbox"]:checked + label .jp-bu-label {
      margin-left: 0;
  }
.jp-wfl-io-toggle input[type="checkbox"]:checked + label .jp-bu {
      right: 0px;
  }


/* Data hooks for form controls and layouts 

[data-io-layout="workflow-form-section"] {background: #fff; border: 1px solid #eee;}
[data-io-status=""]
[data-io-state=""]
[data-io-control=""]
[data-io-layout="grid | row | rowgroup | rowheader | cell | column | columnheader"]
[data-io-layout="grid"]
[data-io-layout="row"]
[data-io-layout="rowgroup"]
[data-io-layout="rowheader]
[data-io-layout="cell"]
[data-io-layout="column"]
[data-io-layout="columnheader"]
[data-io-layout="array"] /* for mixed elemetns which should NOT break */


*/


[data-io-type-toggle="enabled::disabled"]  .jp-wfl-io-toggle .jp-bu  {
        right: 5em;
}
[data-io-type-toggle="enabled::disabled"]  .jp-wfl-io-toggle  {
      width: 6.5em !important;
}
[data-io-type-toggle="enabled::disabled"]  .jp-bu-label:before  {
      content: "Enabled" !important;
}
[data-io-type-toggle="enabled::disabled"]  .jp-bu-label:after  {
      content: "Disabled" !important;
}


[data-io-type-toggle="show::hide"]  .jp-wfl-io-toggle  {
      width: 5em !important;
}

[data-io-type-toggle="show::hide"]  .jp-wfl-io-toggle .jp-bu  {
        right: 3.5em;
}
[data-io-type-toggle="show::hide"]  .jp-bu-label:before  {
      content: "Show";
}
[data-io-type-toggle="show::hide"]  .jp-bu-label:after  {
      content: "Hide";
}



/* ===============================
   4.7 Button options drop downs
   =============================== */

.jp-bu-dropdown-content {
	padding: 0;	
        background: #fff; 
        border: 1px solid #999;
        border-top: none !important;        
        height: auto;  
        max-height: 600px; /* fallback to native scroll in case of very long options list */  
        overflow: hidden; 
        overflow-x: none; 
        overflow-y: auto;     
 
/*       
	position: absolute;
        z-index: 999999 !important; 
	left:  0;
	right: 0;
	width: auto;
	top: auto;
	margin: 1px;
	margin-top: -2px; 
*/	
       
}

.jp-bu-dropdown-content .jp-wfl-io-picker,
.jp-bu-dropdown-content ul,
.jp-bu-dropdown-content ol {
        postion: relative;
        display: block;
       	width: 100% !important; 
        overflow: hidden; /* clip background for  rounded corners */
        box-sizing: border-box;
        -webkit-box-sizing:  border-box;
        -moz-box-sizing:  border-box;	
	padding: 0;
        margin: 0;       
               
}

.jp-bu-dropdown-content li {
        position: relative;
	text-transform: none;
	text-align: left;
	display: block;
	white-space: normal
	margin: 0;
	border: none;
	 
}
.jp-bu-dropdown-content li:hover {
	background:  #4697FC;
}

.jp-bu-dropdown-content li:hover button,
.jp-bu-dropdown-content li:hover a {
	color: #fff !important;
}


/* THIS IS COLORING AND BORDERS IN THE OPTIONS LIST NEED TO BE SKINNED */

.jp-bu-dropdown-content  button span.jp-nav-caret{
       display: block;
       width:  100%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       border: none !important;

}

.jp-bu-dropdown-content li a {
	display: block;
        width: 100%;  
        padding: 0.5em;
	text-align: left;
	position: relative;
	font-size: inherit;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	overflow: hidden;
	margin:0;
	border: none !important;	
}

.jp-bu-dropdown-content li button {
	display: block;
        width: 100%;  
        padding:0 !important;
	text-align: left;
	position: relative;
	font-size: inherit;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	overflow: hidden;
	margin:0;
	border: none !important;	

}


/* .jp-bu-dropdown-content li:first-child {
	border-bottom: 1px solid #d0d0d0;
}
.jp-bu-dropdown-content li:last-child {
	border-top: 1px solid #d0d0d0;
}
*/



/* CORRECTION MARGIN-TOP OF DROPDOWN BLOCK 

.jp-bu + .jp-bu-dropdown-content {
	border-top: 1px solid #b8b8b8;
	margin: -3px 2px 0 0;
}
.jp-bu-size-large + .jp-bu-dropdown-content {
	border-top: 1px solid #b8b8b8;
	margin: -5px 2px 0 0;
}
.jp-bu-size-xlarge + .jp-bu-dropdown-content {
	border-top: 1px solid #b8b8b8;
	margin: -7px 2px 0 0;
}

.jp-bu-prepend .jp-bu + .jp-bu-dropdown-content,
.jp-bu-append .jp-bu + .jp-bu-dropdown-content {
	margin-top: -1px;
}

.jp-bu-prepend .jp-bu-size-large + .jp-bu-dropdown-content,
.jp-bu-append .jp-bu-size-large + .jp-bu-dropdown-content {
	margin-top: -1px;
}

.jp-bu-prepend .jp-bu-size-xlarge + .jp-bu-dropdown-content,
.jp-bu-append .jp-bu-size-xlarge + .jp-bu-dropdown-content {
	margin-top: -1px;
}

*/

/* ===============================
   4.5 Button pagers and pagination
   =============================== */

.jp-bu-panel-pagination {
        display: inline;
        margin: 0 auto;
/*	float:left;
	margin: 0 1em 1em 0;
*/
}

.jp-bu-panel-pagination .jp-bu {
 	float:left;
 	border-left: none;
 	border-right: 1px solid #b8b8b8;
 	border-radius: 0;
 	margin:0 !important;
}

.jp-bu-panel-pagination .jp-bu:first-child {
	border-left: 1px solid #b8b8b8;
	border-radius: 3px 0 0 3px;		
}

.jp-bu-panel-pagination .jp-bu:last-child {
	border-radius: 0 3px 3px 0;		
}

.jp-bu-panel-pagination .jp-bu:first-child:last-child {
	border-radius: 3px;
}
.jp-bu-panel-pagination .jp-bu:first-child.jp-bu-size-large {
	border-radius: 5px 0 0 5px;		
}

.jp-bu-panel-pagination .jp-bu:last-child.jp-bu-size-large {
	border-radius: 0 5px 5px 0;		
}

.jp-bu-panel-pagination .jp-bu:first-child:last-child.jp-bu-size-large {
	border-radius: 5px;
}

.jp-bu-panel-pagination .jp-bu:first-child.jp-bu-size-xlarge {
	border-radius: 7px 0 0 7px;		
}

.jp-bu-panel-pagination .jp-bu:last-child.jp-bu-size-xlarge {
	border-radius: 0 7px 7px 0;		
}

.jp-bu-panel-pagination .jp-bu:first-child:last-child.jp-bu-size-xlarge {
	border-radius: 7px;
}

.jp-bu-panel-pagination .jp-bu-previous:first-child {
	padding: .5em 8px .5em 24px;
}

.jp-bu-panel-pagination .jp-bu-next:last-child {
	padding: .5em 24px .5em 8px;
}

.jp-bu-panel-pagination .jp-bu-caret {
	padding: .5em 1em;
}

.jp-bu-panel-pagination .jp-bu-previous i {
	position: absolute;
	top: 50%;
	left: 4px;
	margin-top: -8px;
}

.jp-bu-panel-pagination .jp-bu-next i {
	position: absolute;
	top: 50%;
	right: 4px;
	margin-top: -8px;
}



 




/* 5. Combo input preloaders and selectors */

.jp-wfl-preloader  {  /* basic input preloader container */
    position: relative !important;
   margin-top: -2px !important;
}


/* 6. Workflow progress bars */




/*  ==============================
    5. Workflow and form layouts
    ==============================*/


/* Aligned form */



.jp-wfl-form-aligned .jp-wfl-io label {
        display: inline-block;
        position: relative;
        margin-right: -4px; /* removes white space between inline blocks */
        box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;

        width: 30%;
        vertical-align: top;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;   
        font-weight: 600;
        text-align: right;
        border: 1px solid  transparent;
    
        padding: 0; 
       /*  border: 1px solid transparent; */
       /*   border-bottom: 1px solid #eee; */
       /*  border: 1px solid  #ff0000;*/
       /*   font-weight: 600; */
}



.jp-wfl-form-aligned .jp-wfl-io label span{
        display: block;
        border: 1px solid transparent;
        padding: 6px;  /* Padding for alignment must be equal to inpout padding */

       /*  border: 1px solid transparent; */
       /*   border-bottom: 1px solid #eee; */
       /*  border: 1px solid  #ff0000;*/
       /*   font-weight: 600; */
}


.jp-wfl-form-aligned .jp-wfl-io-env {  
        width: 70% !important; 
        box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
}

.jp-wfl-form-aligned  .jp-wfl-io-get-message span{
       padding-left: 30%;
}

.jp-wfl-form-aligned  .jp-wfl-preloader {
       margin-left: 30% !important;
}

.jp-wfl-form-aligned .jp-wfl-io-checkbox label{
        width: 100% !important;
        padding-left: 0 !important;
        border: 1px solid transparent;
        text-align: left;
}

.jp-wfl-form-aligned .jp-wfl-io-checkbox .jp-wfl-io-env {
margin-left: 29% !important;
}

.jp-wfl-form-aligned .jp-wfl-io-checkbox span {
     padding-left: 0 !important;
}


.jp-wfl-io-aligned .jp-wfl-io-env {
         width: 66%; 
}

.jp-wfl-io-aligned .jp-wfl-io-get-message {
        margin-left: 31%;
        color: #666;
        font-size: 0.8em;
        white-space: pre-line !important;
}


/* Stacked layout form */


.jp-wfl-io-stacked  .jp-wfl-form-actions {
        margin-top: 1em;
        margin-bottom: 0.5em;
        background: #fff !important;
        

}



.jp-wfl-io-stacked .jp-wfl-io label span{ 
        padding-bottom: 0.15em;
        padding-top: 0.15em;
 
       /*  border: 1px solid transparent; */
       /*  border-bottom: 1px solid #eee; */
       /*  border: 1px solid  #ff0000;*/
       /*  font-weight: 600; */
}



.jp-wfl-io-stacked.jp-wfl-io-get-message {
        margin-left: 0;
        color: #666;
        font-size: 0.8em;
        white-space: pre-line !important;
}



/* Compact layout form */

.jp-wfl-io-compact .jp-wfl-io label {
        display: none;
}


.jp-wfl-io-compact .jp-wfl-io label {
        display: none;
}

.jp-wfl-io-compact .jp-wfl-io-checkbox label {
        display: block;
        visibility: !important;
}

.jp-wfl-io-compact .jp-wfl-io {
        margin-bottom: 0.25em;

}

.jp-wfl-io-compact .jp-wfl-form-actions {
        margin-top: 0.75em;
        margin-bottom: 0.5em;

}

