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

/*
*  1. Close and open 
*  
*/
   
.jp-view-closed     {display:none !important;}
.jp-view-opened     {display: block !important;}
.jp-view-hidden     {display: none !important;visibility: hidden;} 
.jp-view-invisible  {visibility: hidden;}
.jp-view-masked     {border: 0;clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} .masked.focusable:active, .masked.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}


/*
*  2. Positions and clears
*  
*/


.jp-position-clear {clear:both; padding:0; margin:auto;}
.jp-position-clear:after {content: ".";  display: block;  height: 0; clear: both; visibility: hidden; }
.jp-position-clear {display: inline-block;}
 * html .jp-position-clear {height: 1%;}
.jp-position-clear {display: block;}


.jp-position-vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
 /* parent element
 
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  */
   
}

.jp-position-glue-right {        /*  Glue elements to the right side  */
        position:absolute !important;
        right: 0 !important;
        z-index: 100;
}

.jp-position-glue-left {        /*  Glue elements to the right side  */
        position:absolute !important;
        left: 0 !important;
        z-index: 100;
}

.jp-position-clip-test {             /*  Enable child container boxes clipping  */
        position:relative;
        z-index: 99;
        max-width: 93% !important; 
        white-space: nowrap; 
        text-overflow: ellipsis;
}        

.jp-position-clip {                  /*  Enable child container text clipping  */
        position: relative; 
        overflow: hidden;  
        width: 100% !important;

}        

.jp-position-reset {                  /*  Reset absolute polisitioned elements  */
        position: relative !important; 
 
}      

.jp-position-clip .jp-view-clip {
 	padding: 0;
 	margin: 0;
}


.jp-position-overlay {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right:0;
   z-index: 90000000 !important;
   border: none;
   transform: translateX(0) translateY(0) !important;
   -webkit-transform: translateX(0) translateY(0) !important;
   -ms-transform: translateX(0) translateY(0) !important;
  
}

/*
*  3. Text masks and clipping
*  
*/

.jp-view-semitransparent {
       opacity:.50;
       -moz-opacity:.50; 
       filter:alpha(opacity=50);
}


.jp-view-clip {                  /*  Clip  text lines without set width */
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width: 75% !important; 
}
.jp-nav-dock-pull-left .jp-view-clip {
        max-width: 90% !important;
 }
	
.jp-view-clip-text {               		/* preset for long text */
        max-width: 95% !important; 
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap; 
}


.jp-view-label {                    /*  Mask hyperlinks - mimic label */
       text-decoration:none; !important;
       border: none;
       color: #333;
       font-weight: 600;
 }

.jp-view-v-disabled {            /*  Highlight disabled content */
       color: #666 !important;
       text-decoration:none; !important;
}
.jp-view-v-negative {           /*  Highlight negative and error content */
       color: #ff4000; !important;
       text-decoration:none; !important;
}
.jp-view-v-positive {           /*  Highlight positive and confirmation content */
       color:#00c066; !important;
       text-decoration:none; !important;
 }

/*
*  3. Loaders, Errors and Confirmaton screens
*  
*/

.jp-view-loader {
	width: 100%;
	height: 100%;
	min-height: 5em;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: center;
	overflow: hidden;
}


.jp-view-loader p {
 	position: absolute;
 	top: 25%; 	
 	left: 0;
 	right: 0;
 	text-align: center;
 	width: 100%;
 	display: block;
 	vertical-align: middle;

}
.jp-view-loader p var {
        display: block;
        padding: 0.5em;
}       
       
.jp-view-default {
        font-weight: 600;
        color: #000;
        background: #fff;
}

.jp-view-normal {
       font-weight: 600;
       color: #000;
       background: #fff;
}
.jp-view-invert {
       font-weight: 600;
       color: #000;
       background: #fff;
}
.jp-view-alert {
       font-weight: 600;
       color: #000;
       background: #fff;
}


/*
*  4. NEW Loaders, Errors and Confirmaton screens
*  
*/



 .jp-position-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 90000000 !important;
    border: none;
    transform: translateX(0) translateY(0) !important;
    -webkit-transform: translateX(0) translateY(0) !important;
    -ms-transform: translateX(0) translateY(0) !important;

  }

.jp-position-overlay .jp-bu{

   text-transform: uppercase;
   font-size: 0.8em !important;
}


.jp-position-center {
    text-align: center;
}
.jp-position-vertical-align-centered {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    padding: 3%;
    max-height: 90%;
    margin-right: -50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    border: 0px solid #fff;
    z-index: 9 !important;
    overflow: hidden;
}