﻿/*  Utility.css

    Contains sets of single property rules defined as a group 
    where the given ruleset represents a range of standard values 
    for that property.  
    
    To better serve as a generic utility, the properties for a given 
    ruleset should be kept to a minimum (only 1 rule if possible).
    
    Future Use Note:
        Upon switching over to LESS/SASS we can use these rules as 
        variables that can be included in other rules.

    ju = "Jenzabar Utility"

    DISPLAY, FONT, TEXT, VERTICAL-ALIGN, HEIGHT MARGIN, PADDING, POSITION,
    WIDTH

    Index:
        Background Color    (ju-background-color-x)
        Border Top Color    (ju-border-top-color-x)
        Clear               (ju-clear-x)
        Float               (ju-float-x)
        Display             (ju-display-x)
        Font Size           (ju-font-size-x)
        Font Style          (ju-font-style-x)
        Font Weight         (ju-font-weight-x)
        Height              (ju-height-x)
        Margins             (ju-margin-x)
        Padding             (ju-padding-x)
        Position            (ju-position-x)
        Text Align          (ju-text-align-x)
        Text Color          (ju-text-x)
        White Space         (ju-whitespace-x)
        Width (em Based)    (ju-width-x)
        Width (Percent Based) (ju-x-colwidth-y)
        Word Wrap           (ju-word-wrap)
        Vertical Align      (ju-vertical-align-x)
        Text Align (by size)  (ju-text-align-x-x)
        Overlfow (ju-text-overflow-ellipsis)
*/



/******************************************
     Background Color
 ******************************************/
.ju-background-color-none  {background-color: transparent !important;}
.ju-background-color-white {background-color: #fff;}
.ju-background-color-gray {background-color: #eceef1;}
.ju-background-color-green {background-color: #dff0d8;}
.ju-background-color-yellow {background-color: #fcf8e3;}



/******************************************
     Border Top Color
 ******************************************/
.ju-border-top-color-white {border-top-color: #fff;}


/******************************************
     Clear
 ******************************************/
.ju-clear-both {clear: both;}
.ju-clear-left {clear: left;}
.ju-clear-right {clear: right;}


/******************************************
     Float
 ******************************************/
.ju-float-left {float: left;}
.ju-float-right {float: right;}



/******************************************
     Display 
 ******************************************/
.ju-display-none   {display: none;}
.ju-display-hidden {display: none;}
.ju-display-block  {display: block;}
.ju-display-inline-block {display: inline-block;}
.ju-display-inline {display: inline;}
.ju-display-table { display: table;}
.ju-display-table-cell { display: table-cell;}

/*******************************************
    Display (Conditional by viewport size)
 *******************************************/

@media (max-width: 1200px) {
    .ju-display-block-sm { display: block; }
    .ju-display-inline-block-sm { display: inline-block; }
}
@media (min-width: 1201px) {
    .ju-display-table-md { display: table; }
    .ju-display-table-cell-md { display: table-cell; }
}



/******************************************
     Font Size
 ******************************************/
/* Font Size Start */
.ju-font-size-xs {font-size: .8em;}
.ju-font-size-sm {font-size: .9em;}
.ju-font-size-md {font-size: 1em;}
.ju-font-size-lg { font-size: 1.2em;}
.ju-font-size-xl {font-size: 1.4em;}
.ju-font-size-2em {font-size: 2em;}
.ju-font-size-3em {font-size: 3em;}

.ju-font-size-12px {font-size: 12px;}

/* Depricated. Use ju-font-size instead. */
.jzb-small-text {font-size: 12px;} 

/* Deprecated and removed use Utility.css ju-font-size-<size> instead. 
.jzb-text-xs {font-size: 0.857em;} /* SJ was jzbx-text-xs 
.jzb-text-sm {font-size: 1.000em;} /* SJ was jzbx-text-sm 
.jzb-text-md {font-size: 1.143em;} /* SJ was jzbx-text-md 
.jzb-text-lg {font-size: 1.286em;} /* SJ was jzbx-text-lg 
.jzb-text-xl {font-size: 1.429em;} /* SJ was jzbx-text-xl */



/******************************************
     Font Style
 ******************************************/
.ju-font-style-italic {font-style: italic;}



/******************************************
     Font Weight
 ******************************************/
.ju-font-weight-normal,
.jzb-normal-text {font-weight: normal;}
.ju-font-weight-bold,
.jzb-strong-text {font-weight: bold;}



/******************************************
     Height
 ******************************************/
.ju-height-pt1em  {height: .1em;}
.ju-height-pt2em  {height: .2em;}
.ju-height-pt3em  {height: .3em;}
.ju-height-pt4em  {height: .4em;}
.ju-height-pt5em  {height: .5em;}
.ju-height-pt6em  {height: .6em;}
.ju-height-pt7em  {height: .7em;}
.ju-height-pt8em  {height: .8em;}
.ju-height-pt9em  {height: .9em;}
.ju-height-1em    {height: 1em;}
.ju-height-1pt1em {height: 1.1em;}
.ju-height-1pt2em {height: 1.2em;}
.ju-height-1pt3em {height: 1.3em;}
.ju-height-1pt4em {height: 1.4em;}
.ju-height-1pt5em {height: 1.5em;}
.ju-height-1pt6em {height: 1.6em;}
.ju-height-1pt7em {height: 1.7em;}
.ju-height-1pt8em {height: 1.8em;}
.ju-height-1pt9em {height: 1.9em;}
.ju-height-2em    {height: 2em;}
.ju-height-2pt1em {height: 2.1em;}
.ju-height-2pt2em {height: 2.2em;}
.ju-height-2pt3em {height: 2.3em;}
.ju-height-2pt4em {height: 2.4em;}
.ju-height-2pt5em {height: 2.5em;}
.ju-height-2pt6em {height: 2.6em;}
.ju-height-2pt7em {height: 2.7em;}
.ju-height-2pt8em {height: 2.8em;}
.ju-height-2pt9em {height: 2.9em;}
.ju-height-3em    {height: 3em;}
.ju-height-4em    {height: 4em;}



/******************************************
     Margins
 ******************************************/
/* All Sides Margins */
.ju-margin-none { margin: 0px !important; }

/* Top margin */
.ju-margin-top-pt0em  {margin-top: 0em;}
.ju-margin-top-pt1em  {margin-top: .1em;}
.ju-margin-top-pt2em  {margin-top: .2em;}
.ju-margin-top-pt3em  {margin-top: .3em;}
.ju-margin-top-pt4em  {margin-top: .4em;}
.ju-margin-top-pt5em  {margin-top: .5em;}
.ju-margin-top-pt6em  {margin-top: .6em;}
.ju-margin-top-pt7em  {margin-top: .7em;}
.ju-margin-top-pt8em  {margin-top: .8em;}
.ju-margin-top-pt9em  {margin-top: .9em;}
.ju-margin-top-1em    {margin-top: 1em;}
.ju-margin-top-1pt1em {margin-top: 1.1em;}
.ju-margin-top-1pt2em {margin-top: 1.2em;}
.ju-margin-top-1pt3em {margin-top: 1.3em;}
.ju-margin-top-1pt4em {margin-top: 1.4em;}
.ju-margin-top-1pt5em {margin-top: 1.5em;}
.ju-margin-top-1pt6em {margin-top: 1.6em;}
.ju-margin-top-1pt7em {margin-top: 1.7em;}
.ju-margin-top-1pt8em {margin-top: 1.8em;}
.ju-margin-top-1pt9em {margin-top: 1.9em;}
.ju-margin-top-2em    {margin-top: 2em;}
.ju-margin-top-2pt1em {margin-top: 2.1em;}
.ju-margin-top-2pt2em {margin-top: 2.2em;}
.ju-margin-top-2pt3em {margin-top: 2.3em;}
.ju-margin-top-2pt4em {margin-top: 2.4em;}
.ju-margin-top-2pt5em {margin-top: 2.5em;}
.ju-margin-top-2pt6em {margin-top: 2.6em;}
.ju-margin-top-2pt7em {margin-top: 2.7em;}
.ju-margin-top-2pt8em {margin-top: 2.8em;}
.ju-margin-top-2pt9em {margin-top: 2.9em;}
.ju-margin-top-3em    {margin-top: 3em;}
.ju-margin-top-4em    {margin-top: 4em;}

/* Right margin */
.ju-margin-right-pt0em  {margin-right: 0em;}
.ju-margin-right-pt1em  {margin-right: .1em;}
.ju-margin-right-pt2em  {margin-right: .2em;}
.ju-margin-right-pt3em  {margin-right: .3em;}
.ju-margin-right-pt4em  {margin-right: .4em;}
.ju-margin-right-pt5em  {margin-right: .5em;}
.ju-margin-right-pt6em  {margin-right: .6em;}
.ju-margin-right-pt7em  {margin-right: .7em;}
.ju-margin-right-pt8em  {margin-right: .8em;}
.ju-margin-right-pt9em  {margin-right: .9em;}
.ju-margin-right-1em    {margin-right: 1em;}
.ju-margin-right-1pt1em {margin-right: 1.1em;}
.ju-margin-right-1pt2em {margin-right: 1.2em;}
.ju-margin-right-1pt3em {margin-right: 1.3em;}
.ju-margin-right-1pt4em {margin-right: 1.4em;}
.ju-margin-right-1pt5em {margin-right: 1.5em;}
.ju-margin-right-1pt6em {margin-right: 1.6em;}
.ju-margin-right-1pt7em {margin-right: 1.7em;}
.ju-margin-right-1pt8em {margin-right: 1.8em;}
.ju-margin-right-1pt9em {margin-right: 1.9em;}
.ju-margin-right-2em    {margin-right: 2em;}
.ju-margin-right-2pt1em {margin-right: 2.1em;}
.ju-margin-right-2pt2em {margin-right: 2.2em;}
.ju-margin-right-2pt3em {margin-right: 2.3em;}
.ju-margin-right-2pt4em {margin-right: 2.4em;}
.ju-margin-right-2pt5em {margin-right: 2.5em;}
.ju-margin-right-2pt6em {margin-right: 2.6em;}
.ju-margin-right-2pt7em {margin-right: 2.7em;}
.ju-margin-right-2pt8em {margin-right: 2.8em;}
.ju-margin-right-2pt9em {margin-right: 2.9em;}
.ju-margin-right-3em    {margin-right: 3em;}
.ju-margin-right-4em    {margin-right: 4em;}

/* Bottom margin */
.ju-margin-bottom-pt0em  {margin-bottom: 0em;}
.ju-margin-bottom-pt1em  {margin-bottom: .1em;}
.ju-margin-bottom-pt2em  {margin-bottom: .2em;}
.ju-margin-bottom-pt3em  {margin-bottom: .3em;}
.ju-margin-bottom-pt4em  {margin-bottom: .4em;}
.ju-margin-bottom-pt5em  {margin-bottom: .5em;}
.ju-margin-bottom-pt6em  {margin-bottom: .6em;}
.ju-margin-bottom-pt7em  {margin-bottom: .7em;}
.ju-margin-bottom-pt8em  {margin-bottom: .8em;}
.ju-margin-bottom-pt9em  {margin-bottom: .9em;}
.ju-margin-bottom-1em    {margin-bottom: 1em;}
.ju-margin-bottom-1pt1em {margin-bottom: 1.1em;}
.ju-margin-bottom-1pt2em {margin-bottom: 1.2em;}
.ju-margin-bottom-1pt3em {margin-bottom: 1.3em;}
.ju-margin-bottom-1pt4em {margin-bottom: 1.4em;}
.ju-margin-bottom-1pt5em {margin-bottom: 1.5em;}
.ju-margin-bottom-1pt6em {margin-bottom: 1.6em;}
.ju-margin-bottom-1pt7em {margin-bottom: 1.7em;}
.ju-margin-bottom-1pt8em {margin-bottom: 1.8em;}
.ju-margin-bottom-1pt9em {margin-bottom: 1.9em;}
.ju-margin-bottom-2em    {margin-bottom: 2em;} /* Might need important for the old jzb-spacing-bottom class */
.ju-margin-bottom-2pt1em {margin-bottom: 2.1em;}
.ju-margin-bottom-2pt2em {margin-bottom: 2.2em;}
.ju-margin-bottom-2pt3em {margin-bottom: 2.3em;}
.ju-margin-bottom-2pt4em {margin-bottom: 2.4em;}
.ju-margin-bottom-2pt5em {margin-bottom: 2.5em;}
.ju-margin-bottom-2pt6em {margin-bottom: 2.6em;}
.ju-margin-bottom-2pt7em {margin-bottom: 2.7em;}
.ju-margin-bottom-2pt8em {margin-bottom: 2.8em;}
.ju-margin-bottom-2pt9em {margin-bottom: 2.9em;}
.ju-margin-bottom-3em    {margin-bottom: 3em;}
.ju-margin-bottom-4em    {margin-bottom: 4em;}

/* Left margin start */
.ju-margin-left-pt0em  {margin-left: 0em;}
.ju-margin-left-pt1em  {margin-left: .1em;}
.ju-margin-left-pt2em  {margin-left: .2em;}
.ju-margin-left-pt3em  {margin-left: .3em;}
.ju-margin-left-pt4em  {margin-left: .4em;}
.ju-margin-left-pt5em  {margin-left: .5em;}
.ju-margin-left-pt6em  {margin-left: .6em;}
.ju-margin-left-pt7em  {margin-left: .7em;}
.ju-margin-left-pt8em  {margin-left: .8em;}
.ju-margin-left-pt9em  {margin-left: .9em;}
.ju-margin-left-1em    {margin-left: 1em;}
.ju-margin-left-1pt1em {margin-left: 1.1em;}
.ju-margin-left-1pt2em {margin-left: 1.2em;}
.ju-margin-left-1pt3em {margin-left: 1.3em;}
.ju-margin-left-1pt4em {margin-left: 1.4em;}
.ju-margin-left-1pt5em {margin-left: 1.5em;}
.ju-margin-left-1pt6em {margin-left: 1.6em;}
.ju-margin-left-1pt7em {margin-left: 1.7em;}
.ju-margin-left-1pt8em {margin-left: 1.8em;}
.ju-margin-left-1pt9em {margin-left: 1.9em;}
.ju-margin-left-2em    {margin-left: 2em;}
.ju-margin-left-2pt1em {margin-left: 2.1em;}
.ju-margin-left-2pt2em {margin-left: 2.2em;}
.ju-margin-left-2pt3em {margin-left: 2.3em;}
.ju-margin-left-2pt4em {margin-left: 2.4em;}
.ju-margin-left-2pt5em {margin-left: 2.5em;}
.ju-margin-left-2pt6em {margin-left: 2.6em;}
.ju-margin-left-2pt7em {margin-left: 2.7em;}
.ju-margin-left-2pt8em {margin-left: 2.8em;}
.ju-margin-left-2pt9em {margin-left: 2.9em;}
.ju-margin-left-3em    {margin-left: 3em;}
.ju-margin-left-4em    {margin-left: 4em;}
.ju-margin-left-5em    {margin-left: 5em;}

@media (max-width: 480px) {

    .ju-margin-top-xs-1pt3em {
        margin-top: 1.3em;
    }
}



/******************************************
     Padding
 ******************************************/
/* All padding */
.ju-padding-none {padding: 0;}
.ju-padding-none-important {padding: 0 !important;}

/* Top padding start */
.ju-padding-top-ptem   {padding-top: 0em;}
.ju-padding-top-pt1em  {padding-top: .1em;}
.ju-padding-top-pt2em  {padding-top: .2em;}
.ju-padding-top-pt3em  {padding-top: .3em;}
.ju-padding-top-pt4em  {padding-top: .4em;}
.ju-padding-top-pt5em  {padding-top: .5em;}
.ju-padding-top-pt6em  {padding-top: .6em;}
.ju-padding-top-pt7em  {padding-top: .7em;}
.ju-padding-top-pt8em  {padding-top: .8em;}
.ju-padding-top-pt9em  {padding-top: .9em;}
.ju-padding-top-1em    {padding-top: 1em;}
.ju-padding-top-1pt1em {padding-top: 1.1em;}
.ju-padding-top-1pt2em {padding-top: 1.2em;}
.ju-padding-top-1pt3em {padding-top: 1.3em;}
.ju-padding-top-1pt4em {padding-top: 1.4em;}
.ju-padding-top-1pt5em {padding-top: 1.5em;}
.ju-padding-top-1pt6em {padding-top: 1.6em;}
.ju-padding-top-1pt7em {padding-top: 1.7em;}
.ju-padding-top-1pt8em {padding-top: 1.8em;}
.ju-padding-top-1pt9em {padding-top: 1.9em;}
.ju-padding-top-2em    {padding-top: 2em;}
.ju-padding-top-2pt1em {padding-top: 2.1em;}
.ju-padding-top-2pt2em {padding-top: 2.2em;}
.ju-padding-top-2pt3em {padding-top: 2.3em;}
.ju-padding-top-2pt4em {padding-top: 2.4em;}
.ju-padding-top-2pt5em {padding-top: 2.5em;}
.ju-padding-top-2pt6em {padding-top: 2.6em;}
.ju-padding-top-2pt7em {padding-top: 2.7em;}
.ju-padding-top-2pt8em {padding-top: 2.8em;}
.ju-padding-top-2pt9em {padding-top: 2.9em;}
.ju-padding-top-3em    {padding-top: 3em;}
.ju-padding-top-4em    {padding-top: 4em;}

/* Right padding start */
.ju-padding-right-ptem   {padding-right: 0em;}
.ju-padding-right-pt1em  {padding-right: .1em;}
.ju-padding-right-pt2em  {padding-right: .2em;}
.ju-padding-right-pt3em  {padding-right: .3em;}
.ju-padding-right-pt4em  {padding-right: .4em;}
.ju-padding-right-pt5em  {padding-right: .5em;}
.ju-padding-right-pt6em  {padding-right: .6em;}
.ju-padding-right-pt7em  {padding-right: .7em;}
.ju-padding-right-pt8em  {padding-right: .8em;}
.ju-padding-right-pt9em  {padding-right: .9em;}
.ju-padding-right-1em    {padding-right: 1em;}
.ju-padding-right-1pt1em {padding-right: 1.1em;}
.ju-padding-right-1pt2em {padding-right: 1.2em;}
.ju-padding-right-1pt3em {padding-right: 1.3em;}
.ju-padding-right-1pt4em {padding-right: 1.4em;}
.ju-padding-right-1pt5em {padding-right: 1.5em;}
.ju-padding-right-1pt6em {padding-right: 1.6em;}
.ju-padding-right-1pt7em {padding-right: 1.7em;}
.ju-padding-right-1pt8em {padding-right: 1.8em;}
.ju-padding-right-1pt9em {padding-right: 1.9em;}
.ju-padding-right-2em    {padding-right: 2em;}
.ju-padding-right-2pt1em {padding-right: 2.1em;}
.ju-padding-right-2pt2em {padding-right: 2.2em;}
.ju-padding-right-2pt3em {padding-right: 2.3em;}
.ju-padding-right-2pt4em {padding-right: 2.4em;}
.ju-padding-right-2pt5em {padding-right: 2.5em;}
.ju-padding-right-2pt6em {padding-right: 2.6em;}
.ju-padding-right-2pt7em {padding-right: 2.7em;}
.ju-padding-right-2pt8em {padding-right: 2.8em;}
.ju-padding-right-2pt9em {padding-right: 2.9em;}
.ju-padding-right-3em    {padding-right: 3em;}
.ju-padding-right-4em    {padding-right: 4em;}

/* Bottom padding start */
.ju-padding-bottom-ptem   {padding-bottom: 0em;}
.ju-padding-bottom-pt1em  {padding-bottom: .1em;}
.ju-padding-bottom-pt2em  {padding-bottom: .2em;}
.ju-padding-bottom-pt3em  {padding-bottom: .3em;}
.ju-padding-bottom-pt4em  {padding-bottom: .4em;}
.ju-padding-bottom-pt5em  {padding-bottom: .5em;}
.ju-padding-bottom-pt6em  {padding-bottom: .6em;}
.ju-padding-bottom-pt7em  {padding-bottom: .7em;}
.ju-padding-bottom-pt8em  {padding-bottom: .8em;}
.ju-padding-bottom-pt9em  {padding-bottom: .9em;}
.ju-padding-bottom-1em    {padding-bottom: 1em;}
.ju-padding-bottom-1pt1em {padding-bottom: 1.1em;}
.ju-padding-bottom-1pt2em {padding-bottom: 1.2em;}
.ju-padding-bottom-1pt3em {padding-bottom: 1.3em;}
.ju-padding-bottom-1pt4em {padding-bottom: 1.4em;}
.ju-padding-bottom-1pt5em {padding-bottom: 1.5em;}
.ju-padding-bottom-1pt6em {padding-bottom: 1.6em;}
.ju-padding-bottom-1pt7em {padding-bottom: 1.7em;}
.ju-padding-bottom-1pt8em {padding-bottom: 1.8em;}
.ju-padding-bottom-1pt9em {padding-bottom: 1.9em;}
.ju-padding-bottom-2em    {padding-bottom: 2em;}
.ju-padding-bottom-2pt1em {padding-bottom: 2.1em;}
.ju-padding-bottom-2pt2em {padding-bottom: 2.2em;}
.ju-padding-bottom-2pt3em {padding-bottom: 2.3em;}
.ju-padding-bottom-2pt4em {padding-bottom: 2.4em;}
.ju-padding-bottom-2pt5em {padding-bottom: 2.5em;}
.ju-padding-bottom-2pt6em {padding-bottom: 2.6em;}
.ju-padding-bottom-2pt7em {padding-bottom: 2.7em;}
.ju-padding-bottom-2pt8em {padding-bottom: 2.8em;}
.ju-padding-bottom-2pt9em {padding-bottom: 2.9em;}
.ju-padding-bottom-3em    {padding-bottom: 3em;}
.ju-padding-bottom-4em    {padding-bottom: 4em;}

/* Left padding start */
.ju-padding-left-ptem   {padding-left: 0em;}
.ju-padding-left-pt1em  {padding-left: .1em;}
.ju-padding-left-pt2em  {padding-left: .2em;}
.ju-padding-left-pt3em  {padding-left: .3em;}
.ju-padding-left-pt4em  {padding-left: .4em;}
.ju-padding-left-pt5em  {padding-left: .5em;}
.ju-padding-left-pt6em  {padding-left: .6em;}
.ju-padding-left-pt7em  {padding-left: .7em;}
.ju-padding-left-pt8em  {padding-left: .8em;}
.ju-padding-left-pt9em  {padding-left: .9em;}
.ju-padding-left-1em    {padding-left: 1em;}
.ju-padding-left-1pt1em {padding-left: 1.1em;}
.ju-padding-left-1pt2em {padding-left: 1.2em;}
.ju-padding-left-1pt3em {padding-left: 1.3em;}
.ju-padding-left-1pt4em {padding-left: 1.4em;}
.ju-padding-left-1pt5em {padding-left: 1.5em;}
.ju-padding-left-1pt6em {padding-left: 1.6em;}
.ju-padding-left-1pt7em {padding-left: 1.7em;}
.ju-padding-left-1pt8em {padding-left: 1.8em;}
.ju-padding-left-1pt9em {padding-left: 1.9em;}
.ju-padding-left-2em    {padding-left: 2em;}
.ju-padding-left-2pt1em {padding-left: 2.1em;}
.ju-padding-left-2pt2em {padding-left: 2.2em;}
.ju-padding-left-2pt3em {padding-left: 2.3em;}
.ju-padding-left-2pt4em {padding-left: 2.4em;}
.ju-padding-left-2pt5em {padding-left: 2.5em;}
.ju-padding-left-2pt6em {padding-left: 2.6em;}
.ju-padding-left-2pt7em {padding-left: 2.7em;}
.ju-padding-left-2pt8em {padding-left: 2.8em;}
.ju-padding-left-2pt9em {padding-left: 2.9em;}
.ju-padding-left-3em    {padding-left: 3em;}
.ju-padding-left-4em    {padding-left: 4em;}
.ju-padding-left-20px   {padding-left: 20px;}



/******************************************
     Position
 ******************************************/
.ju-position-relative {position: relative;}
.ju-position-absolute {position: absolute;}



/******************************************
     Text Align
 ******************************************/
.ju-text-align-left    {text-align: left;}
.ju-text-align-right   {text-align: right;}
.ju-text-align-center  {text-align: center;}
.ju-text-align-justify {text-align: justify;}
.ju-text-align-start   {text-align: start;}
.ju-text-align-end     {text-align: end;}
.ju-text-align-inherit {text-align: inherit;}
.ju-text-align-initial {text-align: initial;}
.ju-text-align-match-parent {text-align: match-parent;}



/******************************************
     Text Color
 ******************************************/
/* Deprecated: use ju-color-<name> classes */
/*.jzb-text-black {color: black;}
.jzb-text-blue {color: #428BCA;} */

/* ju colors */
.ju-text-black {color: black;}
.ju-text-white { color: #ffffff;}
.ju-text-blue  {color: #428BCA;}
.ju-text-warning {color: #d9534f}
.ju-text-muted {color: #d1d1d1;}

/* jzb colors */
.jzb-text-success {color: #3c763d;}
.jzb-text-warning {color: #8a6d3b;}
.jzb-text-danger {color: #a94442;}


/******************************************
     White Space
 ******************************************/
.ju-white-space-preserve {white-space: pre;}



/******************************************
     Width (em Based)
 ******************************************/
.ju-width-pt1em  {width: .1em;}
.ju-width-pt2em  {width: .2em;}
.ju-width-pt3em  {width: .3em;}
.ju-width-pt4em  {width: .4em;}
.ju-width-pt5em  {width: .5em;}
.ju-width-pt6em  {width: .6em;}
.ju-width-pt7em  {width: .7em;}
.ju-width-pt8em  {width: .8em;}
.ju-width-pt9em  {width: .9em;}
.ju-width-1em    {width: 1em;}
.ju-width-1pt1em {width: 1.1em;}
.ju-width-1pt2em {width: 1.2em;}
.ju-width-1pt3em {width: 1.3em;}
.ju-width-1pt4em {width: 1.4em;}
.ju-width-1pt5em {width: 1.5em;}
.ju-width-1pt6em {width: 1.6em;}
.ju-width-1pt7em {width: 1.7em;}
.ju-width-1pt8em {width: 1.8em;}
.ju-width-1pt9em {width: 1.9em;}
.ju-width-2em    {width: 2em;}
.ju-width-2pt1em {width: 2.1em;}
.ju-width-2pt2em {width: 2.2em;}
.ju-width-2pt3em {width: 2.3em;}
.ju-width-2pt4em {width: 2.4em;}
.ju-width-2pt5em {width: 2.5em;}
.ju-width-2pt6em {width: 2.6em;}
.ju-width-2pt7em {width: 2.7em;}
.ju-width-2pt8em {width: 2.8em;}
.ju-width-2pt9em {width: 2.9em;}
.ju-width-3em    {width: 3em;}
.ju-width-4em    {width: 4em;}
.ju-width-5em    {width: 5em;}
.ju-width-6em    {width: 6em;}
.ju-width-100-important {width: 100% !important;}

@media (max-width: 480px) {

    .ju-width-100-xs-important {
        width: 100% !important;
    }
}

/* Min Width */
.ju-min-width-100 {min-width: 100%;}



/***********************************
    Width (Percent Based)
 ***********************************/
@media (max-width: 689px) {
    .ju-xs-colwidth-three       {width: 3%;}
    .ju-xs-colwidth-five        {width: 5%;}
    .ju-xs-colwidth-ten         {width: 10%;}
    .ju-xs-colwidth-fifteen     {width: 15%;}
    .ju-xs-colwidth-twenty      {width: 20%;}
    .ju-xs-colwidth-twenty-five {width: 25%;}
    .ju-xs-colwidth-thirty      {width: 30%;}
    .ju-xs-colwidth-thirty-five      {width: 35%;}
    .ju-xs-colwidth-forty       {width: 40%;}
    .ju-xs-colwidth-forty-five  {width: 45%;}
    .ju-xs-colwidth-fifty       {width: 50%;}
    .ju-xs-colwidth-sixty       {width: 60%;}
    .ju-xs-colwidth-sixty-five  {width: 65%;}
    .ju-xs-colwidth-seventy-five  {width: 75%;}
    .ju-xs-colwidth-eighty-five {width: 85%;}
    .ju-xs-colwidth-hundred     {width: 100%;}
}

@media(max-width:1200px) {
    .ju-sm-colwidth-hundred { width: 100%;}
}

@media(min-width:1201px) {
    .ju-md-colwidth-fifteen { width: 15%; }
    .ju-md-colwidth-twenty-five { width: 25%; }
    .ju-md-colwidth-thirty-five { width: 35%; }
}

@media (min-width: 689px) {
    .ju-lg-colwidth-three       {width: 3%;}
    .ju-lg-colwidth-four        {width: 4%;}
    .ju-lg-colwidth-five        {width: 5%;}
    .ju-lg-colwidth-ten         {width: 10%;}
    .ju-lg-colwidth-fifteen     {width: 15%;}
    .ju-lg-colwidth-twenty      {width: 20%;}
    .ju-lg-colwidth-twenty-five {width: 25%;}
    .ju-lg-colwidth-twenty-seven {width: 27%;}
    .ju-lg-colwidth-thirty      {width: 30%;}
    .ju-lg-colwidth-forty       {width: 40%;}
    .ju-lg-colwidth-fifty       {width: 50%;}
    .ju-lg-colwidth-sixty       {width: 60%;}
    .ju-lg-colwidth-sixty-five  {width: 65%;}
    .ju-lg-colwidth-eighty-five {width: 85%;}
    .ju-lg-colwidth-eighty      {width: 80%;}
    .ju-lg-colwidth-ninety      {width: 90%;}
    .ju-lg-colwidth-ninety-five      {width: 95%;}
    .ju-lg-colwidth-hundred      {width: 100%;}
}

.ju-colwidth-zero             { width: 0%;}
.ju-colwidth-one              {width: 1%;}
.ju-colwidth-three            {width: 3%;}
.ju-colwidth-five             {width: 5%;}
.ju-colwidth-six              {width: 6%;}
.ju-colwidth-eight            {width: 8%;}
.ju-colwidth-ten              {width: 10%;}
.ju-colwidth-eleven           {width: 11%;}
.ju-colwidth-twelve           {width: 12%;}
.ju-colwidth-fourteen         {width: 14%;}
.ju-colwidth-fifteen          {width: 15%;}
.ju-colwidth-seventeen        {width: 17%;}
.ju-colwidth-twenty           {width: 20%;}
.ju-colwidth-twenty-five      {width: 25%;}
.ju-colwidth-thirty           {width: 30%;}
.ju-colwidth-thirty-five      {width: 35%;}
.ju-colwidth-thirty-eight     {width: 38%;}
.ju-colwidth-forty            {width: 40%;}
.ju-colwidth-forty-five       {width: 45%;}
.ju-colwidth-fifty            {width: 50%;}
.ju-colwidth-fifty-five       {width: 55%;}
.ju-colwidth-sixty            {width: 60%;}
.ju-colwidth-sixty-five       {width: 65%;}
.ju-colwidth-seventy          {width: 70%;}
.ju-colwidth-seventy-five     {width: 75%;}
.ju-colwidth-eighty      {width: 80%;}
.ju-colwidth-eighty-five      {width: 85%;}
.ju-colwidth-ninety           {width: 90%;}
.ju-colwidth-hundred          {width: 100%;}



/*******************************************
    Word Break
 *******************************************/
.ju-word-break-normal {word-break: normal;}



/*******************************************
    Word Wrap
 *******************************************/
.ju-word-wrap {word-break: break-all; word-wrap: break-word;}



/*******************************************
    Veritcal Align 
 *******************************************/
.ju-vertical-align-top      {vertical-align: top;}
.ju-vertical-align-middle   {vertical-align: middle;}
.ju-vertical-align-bottom   {vertical-align: bottom;}
.ju-vertical-align-sub      {vertical-align: sub;}
.ju-vertical-align-super    {vertical-align: super;}
.ju-vertical-align-baseline {vertical-align: baseline;}
.ju-vertical-align-central  {vertical-align: central;}
.ju-vertical-align-inherit  {vertical-align: inherit;}
.ju-vertical-align-initial  {vertical-align: initial;}
.ju-vertical-align-text-top {vertical-align: text-top;}
.ju-vertical-align-text-bottom {vertical-align: text-bottom;}



/*******************************************
    Text Align (Conditional by viewport size)
 *******************************************/
.ju-text-align-left-xs { text-align: left; }
.ju-text-align-center-xs { text-align: center; }
.ju-text-align-right-xs { text-align: right; }

@media (min-width: 768px) {
    .ju-text-align-left-sm { text-align: left; }
    .ju-text-align-center-sm { text-align: center; }
    .ju-text-align-right-sm { text-align: right; }
}
@media (min-width: 992px) {
    .ju-text-align-left-md { text-align: left; }
    .ju-text-align-center-md { text-align: center; }
    .ju-text-align-right-md { text-align: right; }
}
@media (min-width: 1200px) {
    .ju-text-align-left-lg { text-align: left; }
    .ju-text-align-center-lg { text-align: center; }
    .ju-text-align-right-lg { text-align: right; }
}




/*******************************************
    Overflow
 *******************************************/
.ju-text-overflow-ellipsis,
.truncate,
.truncate-hint {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
    padding-left: 1em !important;
    padding-right: 1em !important;
}


/***********************************
    Max-Width (Percent Based)
 ***********************************/
.ju-maxwidth-zero             {max-width: 0%;}
.ju-maxwidth-one              {max-width: 1%;}
.ju-maxwidth-three            {max-width: 3%;}
.ju-maxwidth-five             {max-width: 5%;}
.ju-maxwidth-ten              {max-width: 10%;}
.ju-maxwidth-eleven           {max-width: 11%;}
.ju-maxwidth-twelve           {max-width: 12%;}
.ju-maxwidth-fourteen         {max-width: 14%;}
.ju-maxwidth-fifteen          {max-width: 15%;}
.ju-maxwidth-twenty           {max-width: 20%;}
.ju-maxwidth-twenty-five      {max-width: 25%;}
.ju-maxwidth-thirty           {max-width: 30%;}
.ju-maxwidth-thirty-five      {max-width: 35%;}
.ju-maxwidth-forty            {max-width: 40%;}
.ju-maxwidth-forty-five       {max-width: 45%;}
.ju-maxwidth-fifty            {max-width: 50%;}
.ju-maxwidth-fifty-five       {max-width: 55%;}
.ju-maxwidth-sixty            {max-width: 60%;}
.ju-maxwidth-sixty-five       {max-width: 65%;}
.ju-maxwidth-seventy          {max-width: 70%;}
.ju-maxwidth-seventy-five     {max-width: 75%;}
.ju-maxwidth-eighty           {max-width: 80%;}
.ju-maxwidth-eighty-five      {max-width: 85%;}
.ju-maxwidth-ninety           {max-width: 90%;}
.ju-maxwidth-hundred          {max-width: 100%;}