/* ------ fonts ------ */ 

@font-face{font-family:"Segoe UI Light"; src:local("Segoe UI Light")} 
@font-face{font-family:"Segoe UI Semibold"; src:local("Segoe UI Semibold")} 

@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/opensans/opensans-bold-webfont.eot');
    src: url('fonts/opensans/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans/opensans-bold-webfont.woff') format('woff'),
         url('fonts/opensans/opensans-bold-webfont.ttf') format('truetype'),
         url('fonts/opensans/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/opensans/opensans-light-webfont.eot');
    src: url('fonts/opensans/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ------ resets ------ */

.i-body { line-height: 24px; }
.i-body a { text-decoration: none; }
.i-body a:hover { text-decoration: none;  }

html, body, div, span, object, iframe,
blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, 
fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, 
canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; }

/* https://css-tricks.com/box-sizing/ */
*, *:before, *:after  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ------ HTML 5 elements for < IE9 ------ */

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
    margin: 0; 
    padding: 0;
}

/* ------ global ------ */

h1, h2, h3, h4, h5, h6 {vertical-align: middle; font-weight: normal; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; }
header, footer, main, section, article, .i-row  { float: left; width: 100%; }

/* ------ grid ------ */

.i-container { display: block; }

.i-col-1, .i-col-2, .i-col-3, .i-col-4, .i-col-5, .i-col-6, .i-col-7, .i-col-8, .i-col-9, .i-col-10, .i-col-11, .i-col-12 {
    float: left;
    width: 100%;  
}

@media (min-width: 1024px) {
    .i-col-12 { width: 100%; }
    .i-col-11 { width: 91.66666667%; }
    .i-col-10 { width: 83.33333333%; }
    .i-col-9 { width: 75%; }
    .i-col-8 { width: 66.66666667%; }
    .i-col-7 { width: 58.33333333%; }
    .i-col-6 { width: 50%; }
    .i-col-5 { width: 41.66666667%; }
    .i-col-4 { width: 33.33333333%; }
    .i-col-3 { width: 25%; }
    .i-col-2 { width: 16.66666667%; }
    .i-col-1 { width: 8.33333333%; }
    .i-col-pull { width: 98%; }
}


/* ------ helpers ------ */

.i-break { float: left; width: 100%; line-height: normal;  }

.i-center,
.i-center-2x,
.i-center-3x,
.i-center-4x,
.i-center-5x { display: block; margin: 0 auto; width: 95%;  }
.i-center-2x { width: 90%; }
.i-center-3x { width: 85%; }
.i-center-4x {  width: 80%; }
.i-center-5x { width: 75%; }
.i-center-6x { width: 70%; }
.i-center-7x { width: 65%; }
.i-center-8x { width: 60%; }
.i-center-9x { width: 55%; }
.i-center-10x { width: 50%; }

.i-spacing { margin: 6px 0; }
.i-spacing-2x { margin: 12px 0; }
.i-spacing-3x { margin: 24px 0; }
.i-spacing-4x { margin: 48px 0; }
.i-spacing-5x { margin: 58px 0; }
.i-spacing-6x { margin: 84px 0; }
.i-spacing-7x { margin: 102px 0; }
.i-spacing-8x { margin: 124px 0; }

.i-clear { clear:both; } 
.i-float-left { float: left; }
.i-float-right { float: right; }

.i-list {float: left;width: 100%; list-style: none; margin: 0; padding: 0; }
.i-list li {float: left;width: 100%; margin: 0; padding: 0; }
.i-clear-list li { padding: 0; display: inline; }

.i-dimmed { opacity: .7;}
.i-dimmed-2x { opacity: .5;}
.i-dimmed-3x { opacity: .2;}

.i-margin { margin: 6px; }
.i-margin-2x { margin: 12px; }
.i-margin-3x { margin: 24px; }
.i-margin-4x { margin: 36px; }
.i-margin-5x { margin: 48px; }
.i-margin-6x { margin: 60px; }

.i-margin-top { margin-top: 6px; }
.i-margin-top-2x { margin-top: 12px; }
.i-margin-top-3x { margin-top: 24px; }
.i-margin-top-4x { margin-top: 36px; }
.i-margin-top-5x { margin-top: 48px; }
.i-margin-top-6x { margin-top: 60px; }

.i-margin-bottom { margin-bottom: 6px; }
.i-margin-bottom-2x { margin-bottom: 12px; }
.i-margin-bottom-3x { margin-bottom: 24px; }
.i-margin-bottom-4x { margin-bottom: 36px; }
.i-margin-bottom-5x { margin-bottom: 48px; }
.i-margin-bottom-6x { margin-bottom: 60px; }

.i-margin-left { margin-left: 6px; }
.i-margin-left-2x { margin-left: 12px; }
.i-margin-left-3x { margin-left: 24px; }
.i-margin-left-4x { margin-left: 36px; }
.i-margin-left-5x { margin-left: 48px; }
.i-margin-left-6x { margin-left: 60px; }

.i-margin-right { margin-right: 6px; }
.i-margin-right-2x { margin-right: 12px; }
.i-margin-right-3x { margin-right: 24px; }
.i-margin-right-4x { margin-right: 36px; }
.i-margin-right-5x { margin-right: 48px; }
.i-margin-right-6x { margin-right: 60px; }

.i-padding { padding: 6px; }
.i-padding-2x { padding: 12px; }
.i-padding-3x { padding: 24px; }
.i-padding-4x { padding: 36px; }
.i-padding-5x { padding: 48px; }
.i-padding-6x { padding: 60px; }

.i-align-middle { vertical-align: middle; }
.i-align-right { text-align: right; }
.i-align-cemter { text-align: center; }
.i-transition { -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }

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

.i-relative { position: relative; }
.i-fixed { position: fixed; }
.i-absolute { position: absolute; }

.i-to-upper { text-transform: uppercase; }
.i-to-lower { text-transform: lowercase; }

.i-pull-in-4x { width: 96%; }
.i-pull-in-3x { width: 97%; }
.i-pull-in-2x { width: 98%; }
.i-pull-in-1x { width: 99%; }

/* ------ user bar ------ */

.i-user-bar {float: left;width: 100%; margin: 0;padding: 0; border-bottom-width: 1px; border-style: solid; }
.i-user-bar a { text-decoration: none; }
.i-user-bar a.i-nav-link,
.i-user-bar a.i-app-name {float: left; padding: 18px 12px; }
.i-user-bar a.i-nav-link i { font-size: 12pt; }
.i-user-bar a.i-photo-link i { font-size: 8pt; }
.i-user-bar a.i-app-name > .padding { padding-left: 0; padding-right: 0; }

/* profile photo within user bar*/
.i-user-bar .i-photo span { line-height: 24px;}
.i-user-bar .i-photo,
.i-user-bar .i-photo-over,
.i-user-bar .i-photo img,
.i-user-bar .i-photo span{ width: 24px; height: 24px;  }

.i-user-bar .i-mobile-bread-crumb { margin: 18px 12px; }

.i-user-bar .mobile-nav li { padding-left: 6px; }
.i-user-bar .mobile-nav .icon .fa { font-size: 18pt; }
.i-user-bar .i-margin { margin: 12px; }

/* ------ banner ------ */

.i-banner {float: left;width: 100%; border-bottom-width: 1px; border-style: solid; }
.i-banner .i-logo { float: left; width: 300px; height: 80px; margin-right: 12px; background-position: center center; background-repeat: no-repeat;}
.i-banner .i-spacing { margin: 32px 0;}
.i-banner .i-float-right { margin-top: 12px; }

.i-banner-tabs { float: left; margin: 0; padding: 0; list-style: none;  }
.i-banner-tabs li { float: left; white-space: nowrap; margin: 0; padding: 0; margin-left: 3px; }
.i-banner-tabs a { float: left; font-weight: bold; text-transform: uppercase; border-width: 1px; border-style: solid; }
.i-banner-tabs a .padding { float: left; padding: 12px 14px; }
.i-banner-tabs a i { font-size: 10pt; }

/* tab laytouts */

.i-nav-content { float: left; width: 100%; padding: 1% 0; border: 0; border-top-width: 1px;border-style: solid; }
.i-nav-content-vertical { border: 0; padding: 1%; }

.i-nav-with-border { float: left;width: 100%; border-width: 1px;border-style: solid; padding: 1% }
.i-nav-with-border .i-nav-with-active-border .i-nav-content {padding: 1% 0; border: 0; border-top-width: 1px; border-style: solid;  }

.i-nav-with-border-vertical { float: left;width: 100%; border-width: 1px;border-style: solid; padding: 1%; }
.i-nav-with-border-vertical .i-nav {border: 0; border-right-width: 1px;border-style: solid; }
.i-nav-with-border-vertical .i-nav-content {border: 0; padding: 0 1% 1% 1%; }

.i-nav-with-active-border .i-nav-content {  padding: 1%; margin-top: -1px; border-width: 1px; border-style: solid; }
.i-nav-with-active-border a.i-nav-link { border-left-width: 1px;border-top-width: 1px;border-right-width: 1px;  }
.i-nav-with-active-border .i-nav-slider { display: none; }

/* tabs  */

.i-nav { float: left; margin: 0; border: 0;border-style: solid; position: relative; padding: 0; list-style: none;  }
   
.i-nav-right { float: right; }
.i-nav li {float: left; padding: 0; margin: 0; }
.i-nav-full,
.i-nav-full li { float: none;  display: block; }
.i-nav-with-margin li { margin: 0 12px; }
.i-nav-with-border .i-nav-with-margin li:first-child { margin-left: 0; }

.i-nav-header h1,
.i-nav-header h2,
.i-nav-header h3,
.i-nav-header h4,
.i-nav-header h5,
.i-nav-header h6 {margin: 0; padding: 12px; }

a.i-nav-link { float: left; position: relative;margin: 0; padding: 9px; border: 0;border-bottom-width: 3px; border-style: solid;border-color: transparent; border-bottom-color: transparent; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;  }
a.i-nav-link i {vertical-align: middle; font-weight: normal; }

a.i-nav-link.selected { border-bottom-color: currentColor; }


a.i-nav-link:hover { text-decoration: none; }
a.i-nav-link .i-label {margin: -3px 0; padding: 0 4px; }

.i-nav .i-tooltip, 
.i-nav .i-dropdown { float: left; }

/* helpers */
.i-nav li.i-nav-menu { display: none; }

/* vertical nav */

.i-nav-vertical { overflow: auto; border-right-width: 1px; }

.i-nav-vertical li a.i-nav-link.selected { border-right-color: currentColor !important; }
.i-nav-vertical.i-nav-slider-left li a.i-nav-link.selected { border-left-color: currentColor !important; }

.i-nav-vertical li,
.i-nav-vertical li a.i-nav-link {  margin: 0; width: 100%;  }

.i-nav-vertical li a.i-nav-link,
.i-nav-vertical.i-nav-slider-right li a.i-nav-link { border-bottom-width: 0;border-left-width: 0; border-right-width: 3px; }
.i-nav-vertical.i-nav-slider-left li a.i-nav-link { border-left-width: 3px;border-right-width: 0; }

.i-nav-vertical::-webkit-scrollbar { background:#fff; width: 8px; }
.i-nav-vertical::-webkit-scrollbar-thumb:vertical { margin: 0 6px; background-color: #34A4E5;  }
.i-nav-vertical::-webkit-scrollbar-thumb:vertical:hover { background-color: #34A4E5; }
.i-nav-vertical::-webkit-scrollbar-button:start:decrement,
.i-nav-vertical::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

.i-panel .i-nav-vertical { border-right-width: 0; }

/* nav justified */
.i-nav-justified {float: none; display: table; width: 100%; border-collapse: separate; }
.i-nav-justified > li {float: none; display: table-cell; }
.i-nav-justified a.i-nav-link { width: 100%; display: block;  text-align: center; }

/* nav slider */
.i-nav-slider { float: left; height: 3px; width: 0; position: absolute;display: none; bottom: 0; z-index:0; transition: all 0.2s; }
.i-nav-slider-vertical {right: 0; width: 3px;height: auto; }
.i-nav-slider-vertical-left { left: 0;right: initial; }

/* pilled slider */
.i-nav-pills a.i-nav-link,
.i-nav-pills a.i-btn {border: 0; z-index: 1;  }
.i-nav-pills .i-nav-slider { height: 100%; width: 100%; }

/* nav bar */
.i-nav-bar { float: left; width: 100%; border-width: 1px; border-style: solid; }
.i-nav-bar .i-nav { margin: 6px; }
.i-nav-bar .i-form-group { margin: 0; }
.i-nav-fixed { position: fixed; z-index: 3; }
.i-nav-bar .i-nav-header h1,
.i-nav-bar .i-nav-header h2,
.i-nav-bar .i-nav-header h3,
.i-nav-bar .i-nav-header h4,
.i-nav-bar .i-nav-header h5,
.i-nav-bar .i-nav-header h6 { line-height: normal; }

/* vertical navigation list */
.i-nav-list { width: 100%; }
.i-nav-list li { width: 100%; }
.i-nav-list li.i-nav-header { padding: 12px; }
.i-nav-list li a.i-nav-link {float: left; width: 100%;border: 0; padding: 12px;  }

.i-nav-list li a i.fa-chevron-right,
.i-nav-list li a i.fa-chevron-right { float: right; margin: 4px; opacity: 0.2; }
.i-nav-list li a.selected i.fa-chevron-right,
.i-nav-list li a:hover i.fa-chevron-right { opacity: 1; }


/* ------ PanelBar CSS ------ */  

.i-panel-toggle { cursor: pointer; }
.i-panel { float: left; width: 100%; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
.i-panel-collapsed { opacity: .6; }
.i-panel-collapsed .i-panel-footer { display: none; }

/* -- header - */

.i-panel-header { float: left; position: relative; border-style: solid; border-width: 1px; width: 100%;white-space: nowrap; min-width: 100px;  }
.i-panel-header-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: repeat;}

/* header layout */

.i-panel-header-left {float: left;  position: relative; margin: 9px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.i-panel-header-right { float: right; position: relative; margin: 9px; }

/* title text */

.i-panel-header h2 { display: inline-block; margin: 0; padding: 0;background-color: transparent !important; }
.i-panel-header a {  text-decoration: none; }
.i-panel-header a:hover { text-decoration: none; }
.i-panel-header h1,
.i-panel-header h2,
.i-panel-header h3,
.i-panel-header h4,
.i-panel-header h5,
.i-panel-header h6 { background-color: transparent !important; display: inline-block; margin: 0; padding: 0;vertical-align: middle; }
.i-panel-header-icon { padding: 0; margin: 12px; }

/* expand / collapse button */

a.i-panel-toggle-link { float: left; opacity: .5; }
a.i-panel-toggle-link:hover { opacity: 1; }

/* menus & link collections */

.i-panel-header .i-btn-group {float: right; }

/* -- content -- */

.i-panel-body { float: left; width: 100%; margin: 0; padding: 0; height: auto;position: relative; border-left-width: 1px; border-top-width: 0; border-right-width: 1px; border-bottom-width: 0; border-style: solid;  }

/* -- footer -- */

.i-panel-footer { float: left; position: relative; height: 1px; width: 100%; border-left-width: 1px; border-top-width: 0; border-bottom-width: 1px; border-right-width: 1px; border-style:solid; min-width: 100px;}

/* pop out */

.i-popout { z-index: 4; visibility: hidden; opacity: 0; position: fixed; margin: 0; padding: 0;   -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.i-popout a.close { float: right; }

.i-popout-header,
.i-popout-body { float: left;width: 100%; padding: 6px; }

.i-popout-top-left { left: 15px; top: 15px;  -moz-transform: translateY(-250px) scale(.8); -ms-transform: translateY(-250px) scale(.8); -o-transform: translateY(-250px) scale(.8); -webkit-transform: translateY(-250px) scale(.8); transform: translateY(-250px) scale(.8); }
.i-popout-top-right { right: 15px; top: 15px; -moz-transform: translateY(-250px) scale(.8); -ms-transform: translateY(-250px) scale(.8); -o-transform: translateY(-250px) scale(.8); -webkit-transform: translateY(-250px) scale(.8); transform: translateY(-250px) scale(.8); }
.i-popout-bottom-left { left: 15px; bottom: 15px; -moz-transform: translateY(250px) scale(.8); -ms-transform: translateY(250px) scale(.8); -o-transform: translateY(250px) scale(.8); -webkit-transform: translateY(250px) scale(.8); transform: translateY(250px) scale(.8); }
.i-popout-bottom-right { right: 15px; bottom: 15px; -moz-transform: translateY(250px) scale(.8); -ms-transform: translateY(250px) scale(.8); -o-transform: translateY(250px) scale(.8); -webkit-transform: translateY(250px) scale(.8); transform: translateY(250px) scale(.8);  }

.i-popout-visible { -moz-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); visibility: visible; opacity: 1; }

/* new menu */

.i-dropdown { display: inline-block; margin: 0; padding: 0; position: relative; }
.i-dropdown .i-btn span.caret {line-height: normal; padding: 0; margin: 0; }

.i-dropdown-toggle .caret {display: inline; margin: 0;border: 0; }
.i-dropdown-toggle .caret:before {line-height: normal; text-decoration:none;font-size: 10pt; font-family: 'FontAwesome'; content: '\f0d7'; vertical-align: middle; }

.i-dropdown-menu .i-loader-jumbo { position: relative;min-height: 250px; width: 100%;height: 100%; }

.i-dropdown-arrow {
    float: left;
    content: '-';
    position: absolute;
    z-index: 9;
    text-indent: -40000px;
    width: 24px;
    height: 12px;
    padding: 0;
    top: 100%;
    left: 50%;
    display: none;
    margin-left: -12px;
    background-color: transparent !important;
}

.i-dropdown-arrow-bottom {
    top: 100%;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-style: solid;
    border-left-width: 12px;
    border-right-width: 12px;
    border-bottom-width: 12px;
}

.i-dropdown-arrow-top {
    top: -12px;
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
    border-style: solid;
    border-left-width: 12px;
    border-right-width: 12px;
    border-top-width: 12px;
}

.i-dropdown-menu {
    float: left;
    position: absolute;
    z-index: 9;
    display: none;
    overflow: auto;
    min-width: 200px;
    padding: 0;
    text-align: left;
    list-style: none;
    border-width: 1px;
    border-style: solid;
    background-clip: padding-box;
    text-transform: initial;
}

/* used to reset a dropdown-menu within a dropdown-menu */
.i-dropdown-menu-reset { width: 100%; position: relative; left: 0; margin: 0; border: 0; z-index: 0; float: left; display: block; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

.i-asides .i-dropdown-menu { z-index: 12; }

.i-dropdown-menu > li { width: 100%;margin: 0;padding: 0; }
.i-dropdown-menu li a .i-pip,
.i-dropdown-menu li a .i-label { margin-top: -4px; }
.i-dropdown-menu .divider { height: 0;border: 0; border-bottom: 1px;border-style:solid; margin: 0; overflow: hidden;  }

.i-dropdown-header { border-bottom: 1px;border-style:solid; width: 100%; white-space: nowrap; }
.i-dropdown-menu li ul li.i-dropdown-header,
li.i-dropdown-header { padding: 9px; border: 0;  } 

.i-dropdown-header .i-nav-invert { background-color: transparent;  }

.i-dropdown-header a.i-btn,
.i-dropdown-header .i-dropdown { float: left;  margin: 0;  padding: 0;  }

.i-dropdown-header h1, 
.i-dropdown-header h2,
.i-dropdown-header h3,
.i-dropdown-header h4,
.i-dropdown-header h5,
.i-dropdown-header h6 {float: left; display: inline; margin: 9px; }

.i-dropdown-header .i-check-box-pills,
.i-dropdown-header .i-radio-button-pills { float: left; }

.i-dropdown-body {float: left;width: 100%; }

.i-dropdown-menu li .i-check-box,
.i-dropdown-menu li .i-radio-button { margin: 9px; }

.i-dropdown-menu li .i-check-box-pills,
.i-dropdown-menu li .i-check-box-pills .i-check-box,
.i-dropdown-menu li .i-radio-button-pills,
.i-dropdown-menu li .i-radio-button-pills .i-radio-button { float: left;;  margin: 0; }

.i-dropdown-menu li .i-check-box-pills .i-check-box input + label,
.i-dropdown-menu li .i-radio-button-pills .i-radio-button input + label { padding-top: 9px; padding-bottom: 9px; }

.i-dropdown-arrow.i-dropdown-visible,
.i-dropdown-menu.i-dropdown-visible { display: block; }

/* drop down positions */
.i-dropdown-menu-center { left: 50%; }
.i-dropdown-menu-right { left: auto; right: -6px; }

a.i-dropdown-link {text-align: left; display: block; padding: 9px; border:0;: width: 100%; }
a.i-dropdown-link:hover { text-decoration: none; }

/* above or below */
.i-dropdown-menu-bottom { top: 100%; margin-top: 12px; }
.i-dropdown-menu-top { bottom: 100%; margin-bottom: 12px; }

/* dropdown scrollbar */
.i-dropdown-menu::-webkit-scrollbar { background:#242424; width: 6px; }
.i-dropdown-menu::-webkit-scrollbar-thumb:vertical { margin: 0 6px; background-color: #888; -webkit-border-radius: 0; }
.i-dropdown-menu::-webkit-scrollbar-button:start:decrement,
.i-dropdown-menu::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

/* frame within drop down scroll */
.i-asides iframe,
.i-dropdown-menu iframe {float: left;height: 100%; width: 100%; }

.i-dropdown-menu-nowrap .i-dropdown-link { white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

/* pager within i-auto-complete */
.i-dropdown-menu li.pager .pager-left { float: left; width: 25%; }
.i-dropdown-menu li.pager .pager-center { float: left; width: 50%; text-align:center; }
.i-dropdown-menu li.pager .pager-center span { display: inline-block; padding: 9px; }
.i-dropdown-menu li.pager .pager-right { float: left; width: 25%; }
.i-dropdown-menu li.pager div { text-align: center; }
.i-dropdown-menu li.pager a span {display: block; width: 100%; padding-left: 0; padding-right: 0; text-align: center; }

/* ------ Paging ------ */

.i-pager { display: inline-block;vertical-align: middle; }
.i-pager a { display: inline-block; position: relative; text-decoration: none; border-width: 1px; border-style: solid; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } 
.i-pager a .i-pager-bg, 
.i-pager a .i-pager-active-bg { width: 100%; height: 100%; position: absolute; padding: 0; }
.i-pager a:hover { text-decoration: none; } 
.i-pager a.selected { font-weight: bold; border-width: 1px; border-style: solid; } 
.i-pager .dots { display: inline-block; position: relative; margin: 0 0 0 6px; text-decoration: none; border-width: 1px; border-style: solid; }
.i-pager .dots span { padding: 11px 12px 14px 12px; }

/* jump to page menu shown in some pagers */

.i-jump-to-page-menu .i-input-group { padding: 6px; }

/* ------ Bread Crumb CSS ------ */

.i-bread-crumb { float: left; width: 100%; position: relative; border-width: 1px; border-style: solid; }
.i-bread-crumb .i-bread-crumb-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0;  background-repeat: repeat; }

.i-bread-crumb ul { float: left; width: 100%; position: relative; margin: 12px; padding: 0; list-style: none; }
.i-bread-crumb ul li { float: left; margin: 0; padding: 0; list-style: none; }
.i-bread-crumb ul li.sep { float: left; padding: 0; margin: 0 9px;  }
.i-bread-crumb ul li.first a:before { font-family: 'FontAwesome'; content: '\f015'; font-size: 8pt; margin-right: 6px; display: none; vertical-align: middle; }
.i-bread-crumb ul a { float: left; padding: 0; }
.i-bread-crumb ul a:hover { text-decoration: none; }

.i-mobile-bread-crumb {float: left; display: none;  }    
.i-mobile-bread-crumb ul { float: left; position: relative;padding: 0;margin: 0;list-style: none; }
.i-mobile-bread-crumb ul li { float: left; display: none; margin: 0; padding: 0;  }
.i-mobile-bread-crumb ul li.loading { display: inline; }
.i-mobile-bread-crumb ul li.sep { display: none; }    
.i-mobile-bread-crumb ul li a { float: left; color:#fff; font-size: 8pt;padding: 0 6px; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.i-mobile-bread-crumb ul li a:hover { text-decoration: none;  }
.i-mobile-bread-crumb ul li:nth-last-child(3) { display: inline; }              
.i-mobile-bread-crumb ul li:before {
    float: left;
    content: '-';
    top: 0;
    left: -12px;
    position: absolute;
    z-index: 0;
    text-indent: -40000px;
    padding: 0;
    width: 0;
    height: 0;
    border: 0;
    border-color: currentColor;
    border-style: solid;
    border-bottom-color: transparent !important; 
    border-top-color: transparent !important; 
    border-left-color: transparent !important;
    border-bottom-width: 12px; 
    border-top-width: 12px;
    border-right-width: 12px;
}

/* ------ TreeView CSS ------ */

.i-tree { float: left; width: 100%; white-space: nowrap; line-height: 26px; }
.i-tree ul { width: 100%; list-style: none; margin: 0; padding: 0; }
.i-tree ul li { float: left; width: 100%; margin: 0; padding: 0; line-height: normal; }
.i-tree ul li img { float: left; width: 18px; height: 18px; cursor:pointer; vertical-align: middle; margin: 4px 2px; }
.i-tree ul li a  { display: inline-block; line-height: 26px;  width: auto !important; padding: 0;cursor: pointer; text-decoration: none !important; border: solid 1px transparent; vertical-align: middle; white-space: nowrap; border-radius: 2px; }
.i-tree ul li a span { float: left; padding: 0 3px;  border-radius: 2px; }
.i-tree ul li a.prnnode { text-decoration: none;border: solid 1px transparent; } 
.i-tree ul li .check { float: left; width: 18px; margin: 6px 6px; vertical-align: middle; }

/* node edit input & drag gesture */
.i-tree-edit { z-index: 10; font-size: 10pt; color: #666; width: 200px; border: solid 1px #7F9DB9;position: absolute;padding:4px;text-decoration: none; }
.i-tree-gesture { border:#f0f0f0 1px solid; }

/* ------ TreeView Context Menu CSS ------ */

.i-tree-context-menu { padding: 1px; font-family: Verdana, Arial, Tahoma;font-size: 10pt;border: #aaa 1px solid; z-index: 6; position: absolute;  background-color: #f6f6f6;box-shadow: 0px 0px 40px #aaa; }
.i-tree-context-menu .ctxtext { cursor: pointer; color: #444; text-decoration: none; }
.i-tree-context-menu .ctxitem { width: 100%;line-height: normal;cursor: pointer; background-color: #ffffff; }
.i-tree-context-menu .ctxitem a { float: left; line-height: normal; margin: 0; padding: 0px 9px 9px 9px; text-decoration: none; }
.i-tree-context-menu .ctxitem a:hover { color: #fff !important; text-decoration: none; background-color: #A7A8AA;border-radius: 6px; }
.i-tree-context-menu .ctxtextdisable { cursor: pointer; color: #999999; text-decoration: none}
.i-tree-context-menu .ctxtextoverdisable { cursor: pointer;  color: #999999; text-decoration: none}
.i-tree-context-menu .ctxseparator { border-top: solid #aaa 1px; font-size: 1px;line-height: normal; }

/* ------ Accordion CSS ------ */

/*
.i-accordion { float: left; line-height:normal; margin:0; padding:0; list-style:none; border-radius: 4px; border-width: 1px; border-style: solid; }
.i-accordion li { float: left; margin:0;  padding:0; list-style:none; }
.i-accordion li > a { float: left; width: 100%; cursor:pointer; margin-top: -1px; border-width:0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid; padding: 14px 0; font: normal 10pt Arial, Tahoma, Verdana; color: #333; outline:none; text-decoration: none; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-accordion li:first-child > a { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.i-accordion li:last-child > a { border-bottom-width: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.i-accordion li > a .padding { display: inline-block; padding: 0 9px 0 9px; }
.i-accordion li > a .img { float: left; margin-right: 6px; width: 16px; height: 16px; background: url(../Images/Common/Accordian/accord-expand.png) no-repeat 0 0;} 
.i-accordion li > a:hover, .i-accordion li a.button:hover { background:rgba(175, 175, 175, .1); text-decoration: none; }
.i-accordion li > a.item-on { background: rgba(200, 200, 200, .1); text-decoration: none; }
.i-accordion li > a.item-on .img { float: left; width: 16px; height: 16px; background: url(../Images/Common/Accordian/accord-collapse.png) no-repeat 0 0;} 
.i-accordion li > a.item-on:hover { background: rgba(200, 200, 200, .1); text-decoration: none;  }
.i-accordion li ul { float: left; width: 100%; display: none; list-style: none; margin: 0; padding: 0;}
.i-accordion li ul li { border: 0 !important; }
.i-accordion-full { width: 100%; }
.i-accordion-full li { width: 100%; }
.i-accordion-full li > a { width: 100%; }
.i-accordion { border-color: rgba(125, 125, 125, .1); }
.i-accordion li > a { border-color:rgba(125, 125, 125, .1); }
*/

/* ------ ToolTip Css ------ */

/* tooltip icon */

.i-tooltip-icon { cursor: help;  }
.i-input-group-addon-default .i-tooltip-icon {  opacity: .5; }

/* tip box */

.i-tip { display: block; visibility: hidden; opacity: 0; position: absolute; z-index: 20;border-width: 0;border-style: solid; top: 0; left: 0; }
.i-tip p {display: block; font-weight: normal; margin: 9px; padding: 0; }

.i-tip-invert { box-shadow: 0 0 15px rgba(125,125,125,0.5); }
 
/* tip arrow */

.i-tip-arrow {
    display: block;
    visibility:hidden;
    content: '-';
    opacity: 0;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 21;
    text-indent: -40000px;
    padding: 0;
    width: 8px;
    height: 8px;
    border: 0;
    border-style: solid;
    background-color:transparent;
}

.i-tip-arrow-top  { top: -8px; border-left-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-left-width: 8px; border-right-width: 8px; border-bottom-width: 8px; }
.i-tip-arrow-bottom { bottom: -8px; border-left-color: transparent !important; border-bottom-color: transparent !important; border-right-color: transparent !important; border-left-width: 8px; border-right-width: 8px; border-top-width: 8px;  } 
.i-tip-arrow-left  { left: -8px; border-bottom-color: transparent !important; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-width: 8px; border-top-width: 8px; border-right-width: 8px; }
.i-tip-arrow-right  { border-bottom-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important;  border-bottom-width: 8px; border-top-width: 8px; border-left-width: 8px; }

/* tip animation */

.i-tip-top-visible { visibility: visible; opacity: 1; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); }
.i-tip-bottom-visible { visibility: visible; opacity: 1; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); }
.i-tip-left-visible { visibility: visible; opacity: 1; -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); }
.i-tip-right-visible { visibility: visible; opacity: 1; -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); }

/* tip box (achievements) */

.i-achievement-tooltip { width: 300px; }
.i-achievement-tooltip p { float: left; line-height: 26px; font: normal 10pt Arial, Verdana, Sans-Serif; color: #fff; margin: 0;  }
.i-achievement-tooltip .title { float: left; width: 80%;  font: normal 14pt "Segoe UI Light", Tahoma, Verdana; color: #fff; padding: 9px 0 6px 9px; }
.i-achievement-tooltip .awarded { float: left;  padding: 0 9px 9px 9px; }
.i-achievement-tooltip .desc { float: left; line-height: 22px;  white-space: normal !important; border-top: 1px solid #444; padding: 9px; }
.i-achievement-tooltip .rep { float: right;  text-align: right; color: #aaa; margin-top: 26px; font-size: 18pt; font-weight: normal; margin: 12px; font: normal 16pt "Segoe UI Light", Tahoma, Verdana; margin-top: 12px; color: #aaa;  padding: 0 9px;  }

/* ------ Summary CSS ------ */

.i-summary { float: left;width: 100%; border-width: 1px;  border-left-width: 6px; border-style: solid; }
.i-summary .margin { display: inline-block; margin: 14px;  }
.i-summary .i-summary-header i {font-weight: normal; vertical-align:middle;margin-right: 6px; }
.i-summary .i-summary-header { font-weight: 700;  }
.i-summary .i-summary-body a { text-decoration: underline; }

/* ------ Label CSS ------ */

.i-label-group .i-label { float: left; }

.i-label-group-justified { display: table; width: 100%; table-layout: fixed; border-collapse: separate; }
.i-label-group-justified > .i-label, 
.i-label-group-justified > .i-dropdown,
.i-label-group-justified > .i-label-group { float: none;text-align: center; display: table-cell; width: 1%; }

.i-label {vertical-align: middle; text-transform: uppercase; font-weight: bold;  }
.i-label i { margin: 0;font-weight: normal; }

a.i-btn-primary .i-label,
a.i-btn-default .i-label,
a.i-btn-success .i-label,
a.i-btn-info .i-label,
a.i-btn-warning .i-label,
a.i-btn-danger .i-label { border-color: #fff; background-color: #fff; }

.i-btn .i-label.i-label-right,
.i-label-right { float: right; }

/* ------ auto complete ------ */

/*
.i-auto-complete { position: absolute; font-family: Arial, Tahoma;font-size: 10pt; color: #ddd;z-index: 999999 !important; border: 1px solid #242424; padding: 0; margin: -2px 0 0 0; background-color: #242424; }
.i-auto-complete-item { cursor:pointer; display: block; margin: 4px; padding: 9px; width: 100%; }
.i-auto-complete-item-over { color: #fff;background-color: #444; margin: 4px; padding: 9px; cursor:pointer; }
*/

/* ------ Table CSS ------ */

.i-table { width: 100%; border-spacing: 0; }
.i-table td { padding: 12px; }
.i-table tr:first-child td { border-top: 0; }
.i-panel .i-table { border: 0; }

/* table headers */

.i-col-header { position: relative; border-width: 0; border-style: solid;border-top-width: 1px;border-bottom-width: 1px;text-transform: uppercase;  }

.i-col-header a, 
.i-col-header img, 
.i-col-header input,
.i-col-header span { position: relative; }

.i-col-header-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.i-col-header .i-sort-arrow-desc { background: url(../Images/Misc_SortArrowDesc.gif) no-repeat top left; padding:4px; }
.i-col-header .i-sort-arrow-asc { background: url(../Images/Misc_SortArrowAsc.gif) no-repeat top left; padding:4px; }

/* used to reset padding within tables */
.i-table-reset { width: 100%; margin: 0 !important; border-spacing: 0 !important; }
.i-table-reset td { margin: 0 !important; padding: 0 !important;}

/* ------ Text CSS ------ */

.i-type-bold { font-weight: bold; }
.i-type-to-upper { text-transform:uppercase; }
.i-type-to-lower { text-transform:lowercase; }
.i-type-left { text-align: left; }
.i-type-center { text-align: center; }
.i-type-right { text-align: right; }
.i-type-small { font-size: 8pt; }

.i-type-validation { color:#ff0000 !important; }

/* highlighted keywords */
.i-type-highlighted { background-color: #F8FF40; font-weight: bold; }

/* ------ Tag CSS ------ */

.i-tag {opacity: .8; white-space:nowrap; max-width: 140px; display: inline-block;border: 0; text-overflow: ellipsis;vertical-align: middle; overflow: hidden; text-decoration: none !important; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-tag:hover { opacity: 1; text-decoration: none; }
.i-tag-count { display: inline-block;vertical-align: middle; padding: 6px; }

.i-tags .comma { display: none; }
.i-tags .i-btn { margin-right: 3px; }

/* column layout for tags */
.i-tags-100 { float: left; width: 100%; }
.i-tags-50 { float: left; width: 50%; }
.i-tags-33 { float: left; width: 33%; }
.i-tags-25 { float: left; width: 25%; }

/* ------ Dialog CSS ------ */

.i-dialog {
    display: block;
    top:50%;
    left:50%;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    z-index: 11;
    opacity: 0;
    visibility: hidden; 
    position: fixed;
    -webkit-box-orient: vertical;
    border-width: 7px;
    border-style: solid;
    transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    -webkit-transform-origin: top left;
    border-color: rgba(0,0,0,0.2);
    transform: scale(.8) translate(-50%, -50%);
}

.i-dialog-visible {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
}

.i-dialog-body::-webkit-scrollbar { background:#fff; width: 8px; }
.i-dialog-body::-webkit-scrollbar-thumb:vertical { margin: 0 6px; background-color: #34A4E5;  }
.i-dialog-body::-webkit-scrollbar-thumb:vertical:hover { background-color: #34A4E5; }
.i-dialog-body::-webkit-scrollbar-button:start:decrement,
.i-dialog-body::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

/* pop-up main */

.i-dialog iframe { float: left; width: 100%;height: 100%;overflow-y: auto; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-dialog iframe::-webkit-scrollbar { background:#eee; width: 8px; }
.i-dialog iframe::-webkit-scrollbar-thumb:vertical { margin: 0 12px;  background-color: #7289DA; }
.i-dialog iframe::-webkit-scrollbar-button:start:decrement,
.i-dialog iframe::-webkit-scrollbar-button:end:increment { height: 0; display: block; }
   
/* content */

.i-dialog-header,
.i-dialog-body,
.i-dialog-footer { float: left; width: 100%; border-style:solid;  }
.i-dialog-footer-fixed { position: fixed;z-index: 2; bottom: 0; }

.i-tip h1,
.i-tip h2,
.i-tip h3,
.i-tip h4,
.i-tip h5,
.i-tip h6,
.i-dialog-body h1,
.i-dialog-body h2,
.i-dialog-body h3,
.i-dialog-body h4,
.i-dialog-body h5,
.i-dialog-body h6  { margin: 0; }

.i-dialog-body .margin,
.i-dialog-footer .margin { display: block; margin: 16px 12px; }
.i-dialog-header .margin { display: block; margin: 18px 12px; }

.i-dialog-header {border: 0; border-bottom-width: 1px; border-style:solid; }
.i-dialog-footer {border: 0; border-top-width: 1px; border-style:solid; }

.i-dialog-header h1,
.i-dialog-header h2,
.i-dialog-header h3,
.i-dialog-header h4,
.i-dialog-header h5,
.i-dialog-header h6 { display: inline; margin: 0; padding: 0; }

/* vertical navigation within dialogs */

.i-dialog-body-with-fixed-vertical-nav {float: left; width: 100%; position: relative; }
.i-dialog-body-with-fixed-vertical-nav .i-nav-vertical {z-index: 6; position: fixed; width: 200px;height: 100%;border: 0; }
.i-dialog-body-with-fixed-vertical-nav .i-nav-content-vertical {float: left;width: 100%; padding: 0 0 0 200px;border: 0; }

/* ---------------- */
/* close button for dialog & asides */
/* ---------------- */

.i-popout-header a.i-popout-toggle,
.i-asides-header a.i-asides-toggle,
.i-dialog-header a.i-dialog-toggle {
    float: right;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    cursor: pointer;
    z-index: 9;
}

.i-popout-header a.i-popout-toggle i,
.i-asides-header a.i-asides-toggle i,
.i-dialog-header a.i-dialog-toggle i { display: none; }

.i-popout-header a.i-popout-toggle:before,
.i-asides-header a.i-asides-toggle:before,
.i-dialog-header a.i-dialog-toggle:before {
    position: absolute;
    left: 0;
    top: 10px;
    right: 0;
    width: 22px;
    height: 2px;
    content: '';
    display: inline-block;
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

.i-asides-header a.i-asides-toggle.i-bars:before,
.i-asides-header a.i-asides-toggle.i-bars:after { display: none; }

.i-popout-header a.i-popout-toggle:after,
.i-asides-header a.i-asides-toggle:after,
.i-dialog-header a.i-dialog-toggle:after {
    position: absolute;
    left: 0;
    top: 10px;
    right: 0;
    width: 22px;
    height: 2px;
    content: '';
    display: inline-block;
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

.i-popout-header a.i-popout-toggle:hover:before,
.i-asides-header a.i-asides-toggle:hover:before,
.i-dialog-header a.i-dialog-toggle:hover:before { transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); }

.i-popout-header a.i-popout-toggle:hover:after,
.i-asides-header a.i-asides-toggle:hover:after,
.i-dialog-header a.i-dialog-toggle:hover:after { transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }

/* ------ loader CSS ------ */

/* loader typically shown over overlay */

.i-loader-box { opacity: 0; visibility: hidden; -webkit-transform: scale(0); position: fixed; z-index: 999999;  width: 300px; background-color: #333; color:#fff; text-align: center; font: normal 10pt Arial;text-transform: uppercase; padding:12px;  }
.i-loader-box-visible { cursor:wait; opacity: .9; visibility: visible; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s;  }
.i-loader-box .i-row { margin: 24px 0; }

.i-loader-box-inverted { background: #eee;color: #000; }
.i-loader-box-inverted .i-loader-bars > div {  background-color: #000; }
.i-loader-box-inverted .i-loader:after {  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);   }

.i-loader-bars {display: inline-block; text-align: center; font-size: 10px; }
.i-loader-bars > div { background-color: #000;  height: 30px; width: 3px;display: inline-block; margin: 0; -webkit-animation: stretchdelay 1.8s infinite ease-in; animation: stretchdelay 1.8s infinite ease-in; }
.i-loader-bars div:nth-of-type(2) { -webkit-animation-delay: -1.7s; animation-delay: -1.7s; }
.i-loader-bars div:nth-of-type(3) { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; }
.i-loader-bars div:nth-of-type(4) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; }
.i-loader-bars div:nth-of-type(5) { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; }
.i-loader-bars div:nth-of-type(6) { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; }
.i-loader-bars div:nth-of-type(7) { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }
.i-loader-bars div:nth-of-type(8) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.i-loader-bars div:nth-of-type(9) { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.i-loader-bars div:nth-of-type(10) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.i-loader-bars div:nth-of-type(11) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.i-loader-bars div:nth-of-type(12) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.i-loader-bars div:nth-of-type(13) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.i-loader-bars div:nth-of-type(14) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.i-loader-bars div:nth-of-type(15) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.i-loader-bars div:nth-of-type(16) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.i-loader-bars div:nth-of-type(17) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.i-loader-bars div:nth-of-type(18) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
.i-loader-bars div:nth-of-type(19) { -webkit-animation-delay: 0s; animation-delay: 0s; }

.i-loader-bars-inverted > div {  background-color: #eee; }

.i-loader-bars-2x > div { height: 50px; }
.i-loader-bars-3x > div { height: 70px; }

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    opacity: .4;
    transform: scaleY(.2);
    -webkit-transform: scaleY(.2);
  }  20% { 
    opacity: 1;
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* loader */

.i-loader {
    display: inline-block;
    position: relative;    
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 50%; 
}

.i-loader:after {
    position: absolute;
    content: '-';
    z-index:2;
    text-indent: -5000px;
    top: 0;
    left: 0; 
    width: 20px;
    height: 20px; 
    overflow:hidden;    
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);  
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
    clip: rect(0,10px,20px,0);
    border-radius: 50%;
    -webkit-transform-origin: 10px 10px;
    -moz-transform-origin: 10px 10px;
    -o-transform-origin: 10px 10px;
    -ms-transform-origin: 10px 10px;      
    -webkit-animation: i-rotate .8s infinite linear;
    -moz-animation: i-rotate .8s infinite linear;
    -o-animation: i-rotate .8s infinite linear; 
    animation: i-rotate .8s infinite linear;    
}

.i-loader-2x {
    width: 40px;
    height: 40px;
}
.i-loader-2x:after  {
    width: 40px;
    height: 40px; 
    clip: rect(0,20px,40px,0);
    -webkit-transform-origin: 20px 20px;
    -moz-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;   
}

.i-loader-3x {
    width: 60px;
    height: 60px;
}
.i-loader-3x:after  {
    width: 60px;
    height: 60px; 
    clip: rect(0,30px,60px,0);
    -webkit-transform-origin: 30px 30px;
    -moz-transform-origin: 30px 30px;
    -o-transform-origin: 30px 30px;
    -ms-transform-origin: 30px 30px;   
}

.i-loader-inverted:after {  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1);   }

@-webkit-keyframes i-rotate { 
    0% { -webkit-transform: rotate(0);} 
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes i-rotate { 
    0% { -moz-transform: rotate(0);} 
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes i-rotate { 
    0% { -o-transform: rotate(0); } 
    100% { -o-transform: rotate(360deg); }
}
@keyframes i-rotate { 
    0% {-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0); } 
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg); }
}

/* disable content overlay */
.i-loader-overlay { float: left; width: 100%; z-index:10; position: absolute; text-align:center; cursor: wait;top: 0;left: 0;width: 100%;height: 100%; }

.i-loader-overlay .i-loader-overlay-bg { background:white;z-index: 1; position: absolute;width: 100%;height: 100%;  opacity: .7; }
.i-loader-overlay .i-loader-box {display: inline-block; position: relative;margin: 24px 0; } 

/* center loader with no effects within full size container */
.i-loader-jumbo { float: left;  width: 100%;height: 100%; min-height: 200px; text-align: center; cursor: wait;  }
.i-loader-jumbo .i-loader {position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%); }

/* ------ Percentage Bar Css ------ */

.i-percentage-bar  { background-color: #fff;border: solid 1px #ccc;line-height: normal; text-align:left; }
.i-percentage-bar-filled { background-color: #ccc;border: solid 1px #fff; line-height: normal; }

/* ------ Captcha Css ------ */

.i-captcha {display: inline-block;vertical-align: middle; border: #7F9DB9 1px solid; }
.i-captcha img { float: left; display: block; }

/* ------ Member Picture / Photo CSS ------ */

.i-photo { display: inline-block;vertical-align: middle; position:relative; text-align: center; }
.i-photo a { float: left; margin: 0; padding: 0; }
.i-photo img { float: left; border: 0; }
.i-photo span { float: left; line-height: 28px; font-size: 10pt; border: 0; padding: 0; margin: 0; font-family: open_sanslight; }

.i-photo-2x span { line-height: 38px; font-size: 14pt;}
.i-photo-3x span {  line-height: 48px; font-size: 20pt; }
.i-photo-4x span {  line-height: 60px; font-size: 26pt; }
.i-photo-5x span {  line-height: 72px; font-size: 32pt; }
.i-photo-6x span {  line-height: 84px; font-size: 38pt; }
.i-photo-7x span {  line-height: 96px; font-size: 44pt; }
.i-photo-8x span {  line-height: 108px; font-size: 50pt; }
.i-photo-9x span {  line-height: 120px; font-size: 56px; }
.i-photo-10x span {  line-height: 132px; font-size: 62px; }

.i-photo,
.i-photo img,
.i-photo span{ width: 28px; height: 28px;  }

.i-photo-2x,
.i-photo-2x img,
.i-photo-2x span { width: 36px; height: 36px; }

.i-photo-3x,
.i-photo-3x img,
.i-photo-3x span { width: 48px; height: 48px; }

.i-photo-4x,
.i-photo-4x img,
.i-photo-4x span { width: 60px; height: 60px; }

.i-photo-5x,
.i-photo-5x img,
.i-photo-5x span { width: 72px; height: 72px; }

.i-photo-6x,
.i-photo-6x img,
.i-photo-6x span { width: 84px; height: 84px; }

.i-photo-7x,
.i-photo-7x img,
.i-photo-7x span { width: 96px; height: 96px; }

.i-photo-8x,
.i-photo-8x img,
.i-photo-8x span { width: 108px; height: 108px; }

.i-photo-9x,
.i-photo-9x img,
.i-photo-9x span { width: 120px; height: 120px; }

.i-photo-10x,
.i-photo-10x img,
.i-photo-10x span { width: 132px; height: 132px; }

.i-photo-edit { display:inline-block; position: relative; text-decoration: none;  }
.i-photo-over {opacity: 0;visibility: hidden; border: 0; position: absolute; z-index: 4; top: 0; left: 0;  color:#fff; background:rgba(0,0,0,0.5); }
.i-photo-over span {display: block; font-size: 10pt; text-align: center; transform: scale(.7); }
.i-photo-edit:hover .i-photo-over { opacity: 1;visibility: visible;  }
.i-photo-edit:hover .i-photo-over span { transform: scale(1); }

/* ------ User Card CSS ------ */

.i-user-card { float: left; padding:0; }
.i-user-card h1,
.i-user-card h2,
.i-user-card h3,
.i-user-card h4,
.i-user-card h5,
.i-user-card h6 {max-width: 250px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; display: inline-block;margin: 0; padding: 0;margin-top: 12px; }

.i-user-card .i-photo-row { float: left; text-align: center; width: 100%; margin-top: -56px; }

.i-user-card-body { float: left; margin: 14px; text-align: center; }

/* ------ Online Pip ------ */

.i-online-pip { display: inline-block;  width: 12px; height: 12px;  background: #66ED1C;vertical-align: middle;  padding: 0; margin: 0; border-radius: 50%; }
a.i-online-pip { text-decoration: none; background: #66ED1C; }
a.i-online-pip:hover { text-decoration: none; }

/* ------ Rating Css ------ */

.i-rating-wrapper { margin: 0; padding: 0;  }
.i-rating { vertical-align: middle !important; margin: 0; padding: 0; display: inline-block; } 

/* ------ BlockUI notification box CSS ------ */

.i-notify { top: 6px; font-family: Arial, Verdana, Tahoma; font-weight: bold; font-size: 10pt; display: none;  }
.i-notify div { padding: 6px 16px; }
.i-notify a { font-weight: bold; }

/* ------ RichTextBox CSS ------ */

.i-rtb {float: left;width: 100%; position: relative;  border-width: 1px; border-style: solid; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-rtb-placeholder-text { pointer-events: none; position: absolute;top: 18px;left: 10px; color: #aaa;  -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }

.i-rtb-toolbar-wrapper { float: left; width: 100%; padding: 0; margin: 0; font-size: 10pt; }
.i-rtb-toolbar { float: left; position: relative; width: 100%; padding: 6px; border: 0;border-bottom-width: 1px;  border-style: solid; }
.i-rtb-toolbar:last-child { border-bottom-width: 0; }

.i-rtb-mobile-toolbar { display: none; }
.i-rtb-toolbar-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 
.i-rtb-seperator { display: inline-block; position: relative; width: 1px; height: 28px; vertical-align: middle;margin: 0 4px; border-left-width: 0; border-top-width: 0; border-bottom-width: 0; border-right-width: 1px; border-style: solid; }

.i-rtb-attachments-wrapper { float: left; line-height: 24px; width: 100%; background-color: #FFFFD9; border-top: solid 1px #ddd; }
.i-rtb-attachments { float: left; width: 100%; padding: 9px 6px;  color: #888 !important; }
.i-rtb-attachments .rtb_Attachment { float: left; }
.i-rtb-attachments a { color: #666 !important; text-decoration: none; }
.i-rtb-attachments img, .i-rtb-attachments i { margin: 0 4px; vertical-align: middle; }
.i-rtb-attachments .size { margin-right: 18px;  }
.i-rtb-attachments a:hover { text-decoration: none; }
.i-rtb-spell-preview { float: left; font-style: normal; padding: 0 8px; }
.i-rtb-spell-preview .if-quote-wrapper { opacity: 0.5; }

.i-rtb-btn {display: inline-block;  border: 1px solid transparent; position: relative; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;  }
.i-rtb-btn-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.i-rtb-btn span.padding {line-height: normal; display: inline-block; padding: 9px; }
.i-rtb-btn i {line-height: normal; vertical-align: middle; }

.i-rtb-btn-group .i-rtb-btn { float: left; }

.i-rtb-dropdown-text { display: inline-block; margin-right: 25px; }
.i-rtb-dropdown i { display: inline-block; margin: 0; vertical-align: middle; text-align: right; }

.i-rtb-emots-menu {margin: 0;padding: 0;list-style: none; width: 100%; }
.i-rtb-emots-menu li  {float: left; width: auto; }
.i-rtb-emots-menu li a {  width: auto !important; text-align: center; padding: 6px; }
.i-rtb-emots-menu li a img { padding: 3px; }

.i-rtb-textbox { float: left; width: 100%; padding: 0; margin: 0; background-color: #fff; }
.i-rtb-textbox body img, 
.i-rtb-textbox html img { cursor: move }
.i-rtb-html-textbox { float: left; width: 100%; cursor: text; background-color: #fff; }

.i-rtb-reize { float: left;border: 0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid; width: 100%; height: 7px; text-align: center; cursor: n-resize; line-height: normal; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-rtb-reize-over { float: left; width: 100%; border-top-width: 1px;border-style: solid; height: 7px; text-align: center;  cursor: n-resize; }
.i-rtb-reize img, 
.i-rtb-reize-over img {  float: left; margin: 0; margin-left: 50%; padding: 0; cursor: n-resize; line-height: normal; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-rtb-reize-focus { border-style: dashed; }

/* wrapper for plain text editor (no iframee) */
.i-rtb-plain-text-wrapper { float: left; width: 100%; background-color: #ffffff !important; border: 1px solid #ddd; border-radius: 2px; }
.i-rtb-plain-text-margin { margin: 6px; }
.i-rtb-plain-text-margin .i-text-area { margin: 0; float: left; width: 100% !important; padding: 0 !important; border-width: 0 !important; color:#222 !important; outline: none !important; background-color: transparent !important; }

.i-rtb-plain-text-button { }
.i-rtb-plain-text-button iframe { padding: 0; height: 42px;width: 42px; margin: 0;border: 0; float: left; }
.i-rtb-plain-text-button:hover { background-color: transparent !important; border-color: transparent !important; } 

/* ------ color picker ------ */

/* textbox input */
.i-color-picker-input { color: #fff; padding: 6px;border: 1px solid #DDDDDD; width: 70px;  }

/* dialog */
.i-color-picker { width: 356px; height: 176px; overflow: hidden;position: absolute;background: url(../Images/RichTextBox/ColorPicker/custom_background.png);font-family: Arial, Helvetica, sans-serif;display: none;z-index: 999; }
.i-color-picker-color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute;background: #f00;overflow: hidden;cursor: crosshair; }
.i-color-picker-color div { position: absolute;top: 0;left: 0;width: 150px;height: 150px;background: url(../Images/RichTextBox/ColorPicker/colorpicker_overlay.png); }
.i-color-picker-color div div { position: absolute;top: 0;left: 0;width: 11px;height: 11px;overflow: hidden;background: url(../Images/RichTextBox/ColorPicker/colorpicker_select.gif); margin: -5px 0 0 -5px; }
.i-color-picker-hue { position: absolute;top: 13px;left: 171px;width: 35px;height: 150px;cursor: n-resize; }
.i-color-picker-hue div  { position: absolute;width: 35px;height: 9px;overflow: hidden;background: url(../Images/RichTextBox/ColorPicker/colorpicker_indic.gif) left top;margin: -4px 0 0 0;left: 0; }
.i-color-picker-new-color { position: absolute;width: 60px;height: 30px;left: 213px;top: 13px;background: #f00; }
.i-color-picker-current-color  { position: absolute;width: 60px;height: 30px;left: 283px;top: 13px;background: #f00; }
.i-color-picker input  { background-color: transparent;border: 1px solid transparent;position: absolute;font-size: 10px;font-family: Arial, Helvetica, sans-serif;color: #898989;top: 4px;right: 11px;text-align: right;margin: 0;padding: 0;height: 11px; }
.i-color-picker-hex  { position: absolute;width: 72px;height: 22px;background: url(../Images/RichTextBox/ColorPicker/custom_hex.png) top;left: 212px;top: 142px; }
.i-color-picker-hex input  { right: 6px; }
.i-color-picker-field  { height: 22px;width: 62px;background-position: top;position: absolute; }
.i-color-picker-field span  { position: absolute;width: 12px;height: 22px;overflow: hidden;top: 0;right: 0;cursor: n-resize; }
.i-color-picker-rgb-r { background-image: url(../Images/RichTextBox/ColorPicker/custom_rgb_r.png);top: 52px;left: 212px; }
.i-color-picker-rgb-g { background-image: url(../Images/RichTextBox/ColorPicker/custom_rgb_g.png);top: 82px;left: 212px; }
.i-color-picker-rgb-b { background-image: url(../Images/RichTextBox/ColorPicker/custom_rgb_b.png);top: 112px;left: 212px; }
.i-color-picker-hsb-h { background-image: url(../Images/RichTextBox/ColorPicker/custom_hsb_h.png);top: 52px;left: 282px; }
.i-color-picker-hsb-s { background-image: url(../Images/RichTextBox/ColorPicker/custom_hsb_s.png);top: 82px;left: 282px; }
.i-color-picker-hsb-b { background-image: url(../Images/RichTextBox/ColorPicker/custom_hsb_b.png);top: 112px;left: 282px; }
.i-color-picker-submit { position: absolute;width: 22px;height: 22px;background: url(../Images/RichTextBox/ColorPicker/custom_submit.png) top;left: 322px;top: 142px;overflow: hidden; }
.i-color-picker-focus { background-position: center; }
.i-color-picker-hex.i-color-picker-focus  { background-position: bottom; }
.i-color-picker-submit.i-color-picker-focus  { background-position: bottom; }
.i-color-picker-slider  { background-position: bottom; }

/* preview for color selection drop down lists */
.i-color-drop-down-preview { background:transparent; display: inline-block; border-radius: 0px; line-height: normal;height: 38px; padding: 0 32px; border: 1px solid #ddd; }

/* ------ time picker ------ */

.i-time-picker { float: left; color:#fff; background:#333333;  }
.i-time-picker .hour,
.i-time-picker .minutes,
.i-time-picker .period { float: left; width: 100%; }

.i-time-picker-header { float: left; width: 100%; background:#444; }
.i-time-picker-header span { float: left; padding: 6px; text-transform: uppercase; font-weight: bold; font-size: 8pt; color:#888; }

.i-time-picker input { opacity: 0; position: absolute; visibility: hidden; }
.i-time-picker input + label { float: left; width: 38px; height: 38px; line-height: 40px; text-align:center; margin: 1px 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor:pointer; }
.i-time-picker input + label:hover { background:#555; color:#fff; }
.i-time-picker input:checked + label,
.i-time-picker input:checked + label:hover { background:#62C55A; color:#fff; }

/* ------ spell checker / suggestion box ------ */

.i-spell-suggest-box {position: absolute; display: none; z-index: 9999; overflow: hidden; padding: 0px; color: #000; font: normal 10pt arial; border: 1px solid #ddd; box-shadow: 0 0 10px #999; background: #fff;}
.i-spell-suggest-box em {padding: 4px 32px 8px 4px; display: block; margin: 0; text-decoration: none; color: #000; font-style: normal;}
.i-spell-suggest-box a, 
.i-spell-suggest-box a:visited { padding: 4px 32px 4px 4px; display: block; margin: 0; text-decoration: none; color: #000; outline: none;}
.i-spell-suggest-box a.first, 
.i-spell-suggest-box a.first:visited{border-top: 0 solid transparent;}
.i-spell-suggest-box a:hover {color: #000; background: #ddd;}
.i-spell-suggest-box-words {background: #fff;}
.i-spell-suggest-box-foot {background: #fff; border-top: 1px solid #999;}
.i-spell-suggest-box-foot a, 
.i-spell-suggest-box-foot a:visited {outline: none;} 
.i-spell-change-box{display: block; margin: 4px;}
.i-spell-change-box input{border: 1px solid #666; background-color: #eee; padding: 2px;}
.i-spell-words {margin-bottom: 2em; margin-top: -0.5em; font-size: 10pt; border: 1px solid #aaa; padding: 4px 6px;}
.i-spell-sep {padding-right: 0.5em; border-top: 1px solid #555;}
.i-spell-sep-last {display: none;}
.i-spell-error { color: #d70303; text-decoration: underline; background-color: #FFFF00; cursor: pointer;}

/* ------ form CSS ------ */

input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit;  }

.i-form-group {float: left; width: 100%; margin-bottom: 24px; }
.i-form-group label { display: block; margin-bottom: 6px; }

.i-input-group { float: left;width: 100%; position: relative; display: table; border-collapse: separate; }
.i-input-group .i-input { position: relative; }

.i-input-group .i-input-group-addon, 
.i-input-group .i-input,
.i-input-group .i-btn-group,
.i-input-group .i-pager,
.i-input-group .i-btn,
.i-input-group .i-dropdown {  vertical-align: middle; display: table-cell; }



/* add on */

.i-input-group .i-btn-group,
.i-input-group .i-dropdown,
.i-input-group .i-input-group-addon { width: 1%; }

.i-input-group-addon {display: inline-block; white-space: nowrap; vertical-align: middle; font-weight: normal; border-color: transparent; border-width: 1px;border-style: solid; text-align: center; }
.i-input-group-addon:first-child { border-right: 0; }

.i-input-group .i-input-group-addon:last-child {border-left: 0; margin-left: -1px; }

.i-input-group-addon .i-pip,
.i-input-group-addon .i-slider { margin: -4px 0; }

.i-input {  outline: 0; width: 100%; border-width: 1px; border-style: solid; }
.i-input,
.i-input-group-addon
.i-select { height: 40px;  } /* height */
  
 .i-text-area { line-height: 20px; }
 select[multiple], select[size] { height: auto; }
 
 /* IE 10+ pseudo elements to style file upload inputs */
.i-input::-ms-value { border: 0px solid #aaa; background:#fff; background: #fff; }
.i-input::-ms-browse { background: #fff; }

.i-input-group-inline { float: none; display: inline-block; width: auto; }
.i-input-group-inline .i-btn,
.i-input-group-inline .i-input,
.i-input-group-inline .i-btn-group,
.i-input-group-inline .i-dropdown,
.i-input-group-inline .i-input-group-addon { display: inline-block; width: auto;  }

/* used to overlay a hidden file element over the top of some other element */
.i-fake-file { position: relative; display: inline-block; overflow:hidden; width: 100%; }
.i-fake-file .i-fake-file-visible { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; outline: hidden; background:transparent; }
.i-fake-file .i-fake-file-visible a { width: 100%; }
.i-fake-file input { position: relative; overflow: hidden; width: 100%; height: 46px; margin: 0; z-index: 2; cursor:pointer; background: transparent; -moz-opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0.0; opacity: 0; }

/* CSS for row selection check-boxes within lists - referenced by editableGrid control */
.i-row-select, 
.i-row-select-all { cursor: pointer; text-align: center; }

/* ------ Buttons ------ */

/* button group */
.i-btn-group, 
.i-btn-group-vertical { display: inline-block; position: relative; vertical-align: middle; } 

.i-btn-group .i-btn,
.i-btn-group .i-btn + .i-btn, 
.i-btn-group .i-btn + .i-btn-group, 
.i-btn-group .i-btn-group + .i-btn, 
.i-btn-group .i-btn-group + .i-btn-group { margin-left: -1px; }

.i-btn-group > .i-btn,
.i-btn-group > .i-dropdown { display: table-cell; }
.i-btn-group > .i-btn:first-child { margin-left: 0; }

.i-btn-group-right { float: right; }

/* button group justified */
.i-btn-group-justified { display: table; width: 100%; table-layout: fixed; border-collapse: separate; }
.i-btn-group-justified > .i-btn, 
.i-btn-group-justified > .i-dropdown,
.i-btn-group-justified > .i-btn-group { float: none; display: table-cell; width: 1%; }
.i-btn-group-justified > .i-dropdown .i-btn { width: 100%; }
.i-btn-group-justified .i-dropdown {text-align: center; width: 100%; }

/* button */
.i-btn {vertical-align: middle; border-width: 1px; border-style: solid;  font-weight: bold; position: relative;border-color: transparent; display: inline-block; text-align:center; text-decoration: none;  -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;  }
.i-btn.disabled { opacity: .5; }
.i-btn .i-btn-bg { padding:0 !important; width: 100%; height: 100%; position: absolute; top: 0; left: 0;  }

 .i-input,
 .i-input-group-addon { padding: 7px 9px;  }
  
.i-label,
.i-btn-group .i-btn > span,
.i-btn > span,
.i-tag > span,
.i-pager a span { display: inline-block;  padding: 2px 7px; font-size: 80%;white-space: nowrap; }

.i-label-2x,
.i-btn-group-2x .i-btn > span,
.i-btn.i-btn-2x span,
.i-tag-2x > span,
.i-pager-2x a span  { font-size: 100%; padding: 8px 12px; }

.i-label-3x,
.i-btn-group-3x .i-btn > span,
.i-btn.i-btn-3x span,
.i-tag-3x > span,
.i-pager-3x a span { font-size: 120%; padding: 12px 16px; }

.i-btn:hover { text-decoration: none; }
.i-btn > .i-tooltip { float: left; }
.i-btn-full { width: 100%; display: block; }

/* pips within buttons */
.i-btn .i-pip { margin-left: 12px; padding: 0; }
.i-btn .i-pip span { padding: 0; }

/* labels within buttons */
.i-btn .i-label {float: left; border-width: 0; }

/* button outline */
.i-btn-o {border-width: 1px; background-color: transparent !important; }

/* input group sizing */

.i-input-group .i-btn,
.i-input-group .i-input,
.i-input-group .i-input-group-addon {float: none; height: 42px; }

.i-input-group-2x .i-btn,
.i-input-group-2x .i-input,
.i-input-group-2x .i-input-group-addon { height: 52px; }
.i-input-group-2x .i-input,
.i-input-group-2x .i-input-group-addon,
.i-input-group-2x .i-btn > span { font-size: 10pt; padding: 9px 12px;}

.i-input-group-3x .i-btn,
.i-input-group-3x .i-input,
.i-input-group-3x .i-input-group-addon { height: 62px; }
.i-input-group-3x .i-input,
.i-input-group-3x .i-input-group-addon,
.i-input-group-3x .i-btn > span { font-size: 12pt; padding: 16px; }


.i-btn-hoz span { margin-left: 12px;margin-right: 12px; }
.i-btn-hoz-2x span { margin-left: 24px; margin-right: 24px; }

/* --------- check box --------- */

.i-radio-button-group-horizontal,
.i-check-box-group-horizontal {
    float: left;
    width: 100%;
}

.i-check-box {line-height: normal; position: relative; display: inline-block; }
.i-check-box input { width: 18px; padding: 0; margin: 0; cursor: pointer; }
.i-check-box input + label { display: inline; cursor: pointer; }

/* filler */
.i-check-box input + label:after { 
    content: '-';
    text-indent: -5000px;
    -webkit-user-select: none; 
    -webkit-transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    border-width: 1px;
    border-style: solid; 
    height: 18px;
    width: 18px; 
    position: absolute; 
    z-index:1;
    left: 0;
    top: 0;
}

/* icon */
.i-check-box input + label:before {
    position: absolute;
    z-index: 2;  
    left: 0;
    top: 2px;
    text-align: center;
    height: 18px;
    width: 18px; 
    margin: 0;
    color: #fff;
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f00c';   
    opacity: 0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);   
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* --------- radio button --------- */

.i-radio-button-group-horizontal .i-radio-button label,
.i-check-box-group-horizontal .i-check-box label { margin-right: 12px; }

.i-radio-button { line-height: normal; position: relative; display: inline-block;  }
.i-radio-button input {z-index: 0; width: 18px; padding: 0; margin: 0; cursor: pointer; }
.i-radio-button input + label { display: inline; vertical-align: middle; cursor: pointer; }

/* filler */
.i-radio-button input + label:after { 
    content: '-';
    text-indent: -5000px;
    -webkit-user-select: none; 
    -webkit-transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    -webkit-tap-highlight-color: transparent;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;  
    height: 18px;
    width: 18px;
    margin: 0;
    position: absolute; 
    z-index:1;
    left: 0;
    top: 0;
}

/* icon */
.i-radio-button input + label:before {
    position: absolute;
    z-index: 2;  
    left: 0;
    top: 2px;
    text-align: center;
    height: 18px;
    width: 18px;
    vertical-align: middle;
    color: #fff;
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f00c';   
    opacity: 0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);   
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background-color: transparent !important;
    border-color: transparent !important;
}

.i-check-box-times input + label:before,
.i-radio-button-times input + label:before { content: '\f00d' !important;    }
.i-check-box-minus input + label:before,
.i-radio-button-minus input + label:before { content: '\f068' !important;    }
.i-check-box-plus input + label:before,
.i-radio-button-plus input + label:before { content: '\f067' !important;    }

.i-check-box input:checked + label:before,
.i-radio-button input:checked + label::before {
    transform: scale(1);
    opacity: 1;
}

/* filler inactive & hover */
.i-radio-button input + label:after,
.i-check-box input + label:after { border-color: #A9EFFF; background-color: #ffffff; }
.i-radio-button:hover input + label:after,
.i-check-box:hover input + label:after { border-color: #00B7E0; background-color: #ffffff; }

/* disabled */
.i-radio-button input:disabled:before { cursor: default; display: none; }
.i-radio-button input:disabled:after { cursor: default; opacity: 0; }

/* radio button & check box pills */

.i-radio-button-pills,
.i-check-box-pills { width: 100%; border-spacing: 0; margin: 0; padding: 0; display: inline-block; }

.i-radio-button-pills td {  padding: 0 !important; margin: 0 !important; }
.i-radio-button-pills input,
.i-check-box-pills input { position: absolute; top: 8px; left: 8px; margin: 0; }
.i-radio-button-pills input + label,
.i-check-box-pills input + label {display: block; padding: 8px 14px 8px 32px; cursor: pointer; }

/* filler */
.i-radio-button-pills input + label:after,
.i-check-box-pills input + label:after { top: 8px;left: 8px; }

/* icon */
.i-radio-button-pills input + label:before,
.i-check-box-pills input + label:before { top: 10px;left: 8px; }

.i-radio-button-pills .i-radio-button,
.i-check-box-pills .i-check-box {float: left; width: 100%; }
.i-radio-button-pills-horizontal .i-radio-button,
.i-check-box-pills-horizontal .i-check-box {width: auto; display: inline-block; }
 
/* Move Up / Move Down Buttons */

.i-button-move-up { display: inline-block; background: #fff url(../Images/Misc_ArrowUp.gif) no-repeat center center; padding: 0 4px; height: 28px; width: 24px; cursor: pointer; border: 1px #ccc solid; }
.i-button-move-up:hover { background: #ddd url(../Images/Misc_ArrowUp.gif) no-repeat center center; }

.i-button-move-down { display: inline-block; background: #fff url(../Images/Misc_ArrowDown.gif) no-repeat center center; 	padding: 0 4px;height: 28px; width: 24px; cursor: pointer; border: 1px #ccc solid; }
.i-button-move-down:hover { background: #ddd url(../Images/Misc_ArrowDown.gif) no-repeat center center; }

/* button */
.i-button {  cursor: pointer;  padding: 9px; border-width: 1px; border-style:solid; border-radius: 2px; }
.i-button-2x { padding: 12px; }

/* disabled input elements */
.disabled, .aspNetDisabled { cursor: default; opacity: 0.3 !important; }

/*  ----- slider (yes / no radio buttons) ----- */

.i-slider { height: 30px; background: #ffffff; min-width: 51px; line-height: 1; display: inline-block; border: 1px solid #ccc;  white-space: nowrap; vertical-align: middle;  }
.i-slider input { position: absolute; z-index: 0; opacity: 0; border: none; margin: 0; background: none; }
.i-slider input[type=radio] + label {cursor: pointer; height: 100%; float: left; position: relative; text-indent: -500000px; width: 25px; overflow: hidden;  }

/* icon */
.i-slider input[type=radio] + label:before { text-indent: 0; display:inline-block; position: absolute; z-index: 2; top: 6px;left: 0; text-align: center; width: 25px; font-size: 8pt; height: 30px; color:#ddd; font: normal normal normal 14px/1 FontAwesome; content: '\f0c9'; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;  transition: all 0.1s ease-in;   }

/* background */
.i-slider input[type=radio] + label:after { content: '-'; left: -25px; position: absolute; top: 0; z-index: 1; width: 0; height: 60px; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;  transition: all 0.1s ease-in;   }

/* active icon */
.i-slider input[type=radio]:first-child:checked + label:before { left: 0;z-index: 2; content: '\f00c'; }

/* active background  */
.i-slider input[type=radio]:first-child + label:after { left: 25px; }
.i-slider input[type=radio]:first-child:checked + label:after { left: 0; width: 25px; }

/* inactive icon */
.i-slider input[type=radio]:checked + label:before {left: 0; content: '\f00d'; }

/* inactive bacground */
.i-slider input[type=radio]:checked + label:after { left: 0; width: 25px; background:#bbb; }

/* ----- call out validation ----- */

.i-validator-callout { border-spacing: 0 !important; }
.i-validator-callout div, 
.i-validator-callout td { padding: 4px !important; margin: 0 !important; border:solid 1px transparent; background-color: none !important; font-size: 10pt; color: #ffffff; }

.ajax__validatorcallout_callout_arrow_cell_bottomleftpos, 
.ajax__validatorcallout_callout_cell { display: none; }

.ajax__validatorcallout_popup_table:before {
    content: '-';
    position: absolute;
    text-indent: -40000px;  
    width: 0;
    z-index: 1;
    height: 0;  
    display: inline-block;
    padding: 0;
    top: -6px;
    left: 45%;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #242424;
}
.ajax__validatorcallout_popup_table {  position: absolute; z-index:1; opacity: 1; border:solid 1px #aaaaaa !important; background-color: #242424 !important; }
.ajax__validatorcallout_popup_table table { display: none; }
.ajax__validatorcallout_icon_cell { vertical-align: top; width: 30px; }
.ajax__validatorcallout_icon_cell img { margin: 12px; }
.ajax__validatorcallout_arrow_cell div, .ajax__validatorcallout_close_button_cell { height: 0; width: 0; display: none; }
.ajax__validatorcallout_innerdiv { display : none; }
.ajax__validatorcallout_error_message_cell { line-height:26px; padding:6px 6px 6px 0 !important; }

/* ----- overlay (used for asides & dialog) - overlays the entire background ----- */

.i-overlay {top: 0;left: 0; position: fixed; visibility: hidden; width: 100%; height: 100%; z-index: 10; opacity: 0; background-color:rgba(0,0,0,.6);  }
.i-overlay-inverted { background-color:rgba(127,127,127,.5); }
.i-overlay-visible { opacity: 1; visibility: visible; }

/* ----- asides navigation ----- */

.i-asides {display: block;visibility: hidden; border: 0; border-style: solid; border-right-width: 1px; border-left-width: 0; position: fixed; z-index:11; height: 100%; overflow:auto; width: 260px; left: -260px; top: 0;  }
.i-asides-reset { height: 100%;position: relative; }
.i-asides a:hover { text-decoration: none; }
.i-asides-right { border-left-width: 1px; border-right-width:0; left: auto !important; right: -260px; }
.i-asides-visible { visibility: visible; }
.i-asides-visible-left { left: 0; }
.i-asides-visible-right { right: 0; }

.i-asides-collapsable { white-space: nowrap;overflow-y: hidden; }
.i-asides-collapsable a i { margin: 0 6px; }
.i-asides-collapsed { width: 48px; }
.i-asides-collapsed .i-asides-collapsed-hidden { display: none; }
.i-asides-expanded .i-asides-expanded-hidden { display: none; }
.i-asides-collapsed-content { float: left; width: 100%; position: relative; padding-left: 48px; }

.i-asides-squeeze-left { padding-left: 260px; }
.i-asides-squeeze-right { padding-right: 260px; }

.i-asides-header,
.i-asides-footer { padding: 12px; border:0; border-style:solid; border-bottom-width: 1px; margin: 0; }
.i-asides-header a.i-asides-toggle { text-align: center; }
.i-asides h1,
.i-asides h2,
.i-asides h3,
.i-asides h4,
.i-asides h5,
.i-asides h6 {display: inline-block; margin: 0; }

.i-asides-header,
.i-asides-body,
.i-asides-footer {float: left; width: 100%; }
.i-asides-footer-fixed { position: absolute;bottom: 0; }

.i-asides hr { height: 0; border-width: 1px;border-style: solid; border-bottom: 0 solid transparent; }

/* asides sizes */
.i-asides-1x {  width: 25%; }
.i-asides-2x {  width: 50%; }
.i-asides-3x { width: 75%; }
.i-asides-4x { width: 100%; }

.i-asides-left:not(.i-asides-visible-right).i-asides-1x  { left: -25%; }
.i-asides-left:not(.i-asides-visible-right).i-asides-2x  { left: -50%; }
.i-asides-left:not(.i-asides-visible-right).i-asides-3x  { left: -75%; }
.i-asides-left:not(.i-asides-visible-right).i-asides-4x  { left: -100%; }

.i-asides-right:not(.i-asides-visible-right).i-asides-1x  { right: -25%; }
.i-asides-right:not(.i-asides-visible-right).i-asides-2x  { right: -50%; }
.i-asides-right:not(.i-asides-visible-right).i-asides-3x  { right: -75%; }
.i-asides-right:not(.i-asides-visible-right).i-asides-4x  { right: -100%; }

a.i-asides-link {float: left; padding: 9px;  text-decoration:none;display: block; margin: 0;border: 0;border-bottom-width: 1px;border-style: solid; background:transparent; width: 100%; }
a.i-asides-link i { vertical-align: middle; margin-right: 6px; }

.i-asides::-webkit-scrollbar { background:#242424; width: 6px; }
.i-asides::-webkit-scrollbar-thumb:vertical { margin: 0 6px; background-color: #555; border-radius: 12px;  }
.i-asides::-webkit-scrollbar-thumb:vertical:hover { background-color: #888; }
.i-asides::-webkit-scrollbar-button:start:decrement,
.i-asides::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

.i-asides .i-panel-body {border: 0; background: transparent; }

/* panel within asides */

.i-asides .i-panel,
.i-asides .i-panel .i-panel-header,
.i-asides .i-panel-content-box,
.i-asides .i-panel-footer { border: 0 !important; }
.i-asides .i-panel-footer { display: none; }

.i-asides .i-panel .i-panel-header,
.i-asides .i-panel .i-panel-header-link,
.i-asides .i-panel .i-panel-header-expand,
.i-asides .i-panel .i-table { background-color: transparent; }

.i-responsive-asides-toggle { display: none; margin-bottom: 16px; }

/* ----- photo & user banner radio button image lists ----- */

.i-image-radio-buttons { width:100%; }
.i-image-radio-buttons label { float: left; position: relative; padding: 0; margin: 0; margin: 24px 24px 24px 0; cursor: pointer; background: none; height: 80px; }
.i-image-radio-buttons input[type=radio] { display: none; }
.i-image-radio-buttons input[type=radio]:checked + label:before,
.i-image-radio-buttons input[type=radio] + label.selected:before { position: absolute; z-index: 20; top: 5px; right: 0; padding: 6px; background:#00A900; color:#fff; border: 2px solid #fff; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; content: '\f00c'; border-radius: 50%; }
.i-image-radio-buttons-photos img { border-radius: 50%; width: 72px; height: 72px; border: 3px solid transparent; box-shadow: 0 0 3px #888; }
.i-image-radio-buttons-photos img:hover { box-shadow: 0 0 3px #777; opacity: 1.0; }
.i-image-radio-buttons-banners img { border-radius: 4px; width: 174px; height: 66px; border: 3px solid transparent; box-shadow: 0 0 3px #888; }
.i-image-radio-buttons-banners img:hover { box-shadow: 0 0 3px #777; opacity: 1.0; }

/* controls the icon & no results text shown when views have no data */
.i-no-results { text-align: center; }
.i-no-results h1,
.i-no-results h2,
.i-no-results h3,
.i-no-results h4,
.i-no-results h5,
.i-no-results h6 {opacity: .3; margin: 24px 0;  }
.i-no-results i { font-size: 100px;opacity: .1; }

/* ----- Pip / Badge CSS ----- */

.i-pip { border-radius: 100%; display: inline-block; text-align: center; line-height: 26px; width: 26px; height: 26px;border-width: 1px;border-style: solid; position: relative;  }
.i-pip-2x { font-size: 14pt; line-height: 40px; width: 40px; height: 40px; }
.i-pip-3x { font-size: 24pt; line-height: 55px; width: 55px; height: 55px;  }
.i-pip-group .i-pip { float: left; margin-right: 9px; }
.i-pip-right { float: right; }

/* ----- Footer CSS ----- */

.i-footer { text-align: center; font-size: 8pt; margin: 24px 0 48px 0;  }
.i-footer a.i-link { font-size: 8pt; }

/********** New common elements for InstantKB 2016 ******************* */

/* photo & name shown in user profile main */

.i-user-menu { width: 95%; overflow:hidden; margin: 6px 9px 0 9px; }
.i-user-menu .i-tooltip { float: left; }
.i-user-menu .i-username { float: left; padding: 0; margin: 0; font-weight: normal; max-width: 175px; overflow:hidden; text-overflow:ellipsis; margin: 3px 0 0 9px; font: normal 14pt "Segoe UI Light", Tahoma, Verdana; line-height:normal; }
.i-user-menu .i-photo a:hover { background: transparent !important; }

/* navigation bar for smaller screen sizes */

.i-mobile-nav { float: left;border: 0; width: 100%; display: none; border: 0; border-bottom-width: 1px; border-style: solid; }
.i-mobile-nav .left { float: left; width: 25%; padding: 0; margin: 0; }
.i-mobile-nav .left .btn { float: left; }
.i-mobile-nav .middle { color: #222; float: left; width: 50%; padding: 0; margin: 4px 0px; text-align: center; white-space:nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
.i-mobile-nav h1 { font-family:"Segoe UI Light"; font-weight: normal; font-size: 13pt !important; line-height: 34px; display: inline;  }
.i-mobile-nav .right { float: left; width: 25%; padding: 0; margin: 0; }
.i-mobile-nav .right .btn { float: right; }
.i-mobile-nav a.btn { float: left; border: 0 !important; }
.i-mobile-nav a.btn span { float: left; margin:0; padding: 12px 20px; }
.i-mobile-nav a.btn i, .mobile-menu a.btn i { font-weight: normal; font-size: 16pt; }

/* poll bar */

.i-poll-bar-wrapper { float: left;  width: 100%; vertical-align: middle; line-height: normal; background:rgba(125,125,125,.3); }
.i-poll-bar { float: left; line-height: normal;  height: 32px; }
.i-poll-bar img { float: left;  margin: 0; height: 32px; border-width: 0; padding: 0; }
.i-poll-bar span { display: inline-block; padding: 6px; }

/* user level image */
.i-user-level { display: inline-block; white-space:nowrap; margin: 0; padding:0; }
.i-user-level .pip { width: 13px; height: 13px; margin-right: 2px;}

/* search rank image */

.i-search-rank { display: inline-block; vertical-align: middle; }
.i-search-rank img { width: 68px; height: 11px; margin: 0 6px; }

/* rotates */
.i-rotate-45 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-45deg) !important;
    -ms-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
}
.i-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-90deg) !important;
    -ms-transform: rotate(-90deg) !important;
    -moz-transform: rotate(-90deg) !important;
    -o-transform: rotate(-90deg) !important;
    transform: rotate(-90deg) !important;
}
.i-rotate-135 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-135);
    -webkit-transform: rotate(-135deg) !important;
    -ms-transform: rotate(-135deg) !important;
    -moz-transform: rotate(-135deg) !important;
    -o-transform: rotate(-135deg) !important;
    transform: rotate(-135deg) !important;
}
.i-rotate-180 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-180deg) !important;
    -ms-transform: rotate(-180deg) !important;
    -moz-transform: rotate(-180deg) !important;
    -o-transform: rotate(-180deg) !important;
    transform: rotate(-180deg) !important;
}
.i-rotate-225 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-225);
    -webkit-transform: rotate(-225deg) !important;
    -ms-transform: rotate(-225deg) !important;
    -moz-transform: rotate(-225deg) !important;
    -o-transform: rotate(-225deg) !important;
    transform: rotate(-225deg) !important;
}
.i-rotate-270 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-270deg) !important;
    -ms-transform: rotate(-270deg) !important;
    -moz-transform: rotate(-270deg) !important;
    -o-transform: rotate(-270deg) !important;
    transform: rotate(-270deg) !important;
}
.i-rotate-315 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-315);
    -webkit-transform: rotate(-315deg) !important;
    -ms-transform: rotate(-315deg) !important;
    -moz-transform: rotate(-315deg) !important;
    -o-transform: rotate(-315deg) !important;
    transform: rotate(-315deg) !important;
}

/* attachment space image */
.i-available-space-bar { display:inline-block; max-width: 350px; width: 100%; text-align: center; }
.i-available-space-bar img { display:inline-block; border: 1px solid #ccc; width: 100%; }

/* paged auto complete suggestion list */

.i-suggest { float: left; display: none;  z-index: 1; left: 0; top: 0; }
.i-suggest ul { float: left; display: block; padding: 0; margin: 0; }
.i-suggest li { float: left; width: 100%; list-style: none; padding: 0; margin: 0; }
.i-suggest li a { float: left; width: 100%; }
.i-suggest li a:hover { text-decoration: none; }
.i-suggest li span.padding { float: left; padding: 9px; overflow: hidden; text-overflow:ellipsis; }
.i-suggest li span.left { float: left; white-space:nowrap; max-width: 400px; overflow: hidden; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; }
.i-suggest li span.right { float: right; }

.i-suggest li.pager .pager-left { float: left; width: 25%; }
.i-suggest li.pager .pager-center { float: left; width: 50%; text-align:center; }
.i-suggest li.pager .pager-center span { display: inline-block; padding: 9px; }
.i-suggest li.pager .pager-right { float: left; width: 25%; }
.i-suggest li.pager div { text-align: center; }
.i-suggest li.pager a span { width: 100%; padding-left: 0; padding-right: 0; text-align: center; }

/* animated hamburger icon */

.i-bars { vertical-align: middle;}
.i-bars .bars { background-color:currentColor; display: inline-block;width: 18px; vertical-align: middle; position: relative; }
.i-bars .text { margin-left: 6px;  display: inline-block; vertical-align: middle; }

.i-bars span.bar {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 !important;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 250ms ease-in-out;
    -moz-transition: 250ms ease-in-out;
    -o-transition: 250ms ease-in-out;
    -ms-transition: 250ms ease-in-out;
    transition: 250ms ease-in-out;
    float: left;
    opacity: 1;
    width: 18px;
    height: 2px;
    background-color:inherit; 
}

.i-bars span.bar:nth-of-type(1){margin:-6px 0 0}
.i-bars span.bar:nth-of-type(3){margin:6px 0 0}

.i-bars:hover span.bar:nth-of-type(1){margin:-4px 0 0}
.i-bars:hover span.bar:nth-of-type(3){margin:4px 0 0}

.i-bars.selected span.bar:nth-of-type(1){-webkit-transform:translate(-50%, -50%) rotate(45deg);-moz-transform:translate(-50%, -50%) rotate(45deg);-ms-transform:translate(-50%, -50%) rotate(45deg);-o-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg);margin: 0;}
.i-bars.selected span.bar:nth-of-type(2){opacity:0}
.i-bars.selected span.bar:nth-of-type(3){-webkit-transform:translate(-50%, -50%) rotate(-45deg);-moz-transform:translate(-50%, -50%) rotate(-45deg);-ms-transform:translate(-50%, -50%) rotate(-45deg);-o-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg);margin:0}


/* Css for collapsible plug-in */

.i-collapsed { display: none; }
.i-collapsing { } /* applied to collapsible elements during transition */
.i-collapsed-visible { display: block; }

/* -------------------------------- */
/* select2 */
/* -------------------------------- */

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px;
}
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container .select2-search--inline {
    float: left;
}
.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.select2-dropdown {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    font: normal 10pt Arial;
    z-index: 1051;
}

.select2-results {
    display: block;
}

.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.select2-results__option {
    padding: 6px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-results__option[aria-selected] {
    cursor: pointer;
}

.select2-container--open .select2-dropdown {
    left: 0;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-search--dropdown {
    display: block;
    padding: 4px;
}

.select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
    display: none;
}

.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    font: normal 10pt Arial;
    border-radius: 2px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    font: normal 10pt Arial;
    line-height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ddd transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    font: normal 10pt Arial;
    width: 0;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #ddd transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999;
    float: left;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f78b77;
    border: 1px solid #f78b77;
    cursor: default;
    float: left;
    margin-right: 5px;
    color: white;
    margin-top: 5px;
    padding: 3px 5px;
    font: normal 10pt Arial;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    cursor: pointer;
    font: bold 10pt Arial;
    float: right;
    font-weight: bold;
    margin-left: 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder {
    float: right;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #aaa 1px;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
}

.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}
.select2-container--default .select2-results__option[role=group] {
    padding: 0;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd;
}
.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -2em;
    padding-left: 3em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -3em;
    padding-left: 4em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -4em;
    padding-left: 5em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -5em;
    padding-left: 6em;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f78b77;
    color: white;
}
.select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
}

/* -------------------------------- */
/* alert */
/* -------------------------------- */

/* todo: add i-alert to theme roller */
.i-alert {display: block; border-style: solid;border-width: 1px; }
.i-alert strong { font-weight:900; }
.i-alert a {font-weight: 800;  }
.i-alert a:hover { text-decoration: underline; }

/* -------------------------------- */
/* flip css */
/* -------------------------------- */

.i-flip-reset {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    filter:none;
    -ms-filter: "none";
}

.i-flip-h {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.i-flip-v {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.i-flip-h-v {
      -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

/* -------------------------------- */
/* ignition elements */
/* -------------------------------- */

.ignition-logo { width: 42px;height: 65px; display: inline-block;vertical-align: middle;background-size: 100%; background-image: url(../Images/ignitionui.png) }
.ignition-logo-2x { width: 63px;height: 97px; }

/* social buttons */

.i-btn-facebook,
a.i-btn-facebook {border-color: #35739B; background-color: #3D85B3; color:#fff; }
.i-btn-twitter,
a.i-btn-twitter {border-color: #27A6BD; background-color: #2BBED9; color:#fff; }
.i-btn-google,
a.i-btn-google {border-color: #C55959; background-color: #D96060; color:#fff; }
.i-btn-github,
a.i-btn-github {border-color: #020202; background-color: #24292E; color:#fff; }

.i-btn-instantforum,
a.i-btn-instantforum { border-color: #2E98CB;background-color: #54BCF4; }
.i-btn-instantkb,
a.i-btn-instantkb { border-color: #57AB50;background-color: #62C55A; }
.i-btn-instantforum img,
.i-btn-instantkb img {margin: 0 1px; width: 11px;height: 11px; }

/* ---------------- */
/* animations */
/* ---------------- */

.i-anim { animation-delay: 0; animation-duration: 0.20s; }
.i-anim-2x { animation-duration: 0.25s;  }
.i-anim-3x { animation-duration: 0.30s;  }
.i-anim-4x { animation-duration: 0.35s;  }
.i-anim-5x { animation-duration: 0.40s;  }
.i-anim-6x { animation-duration: 0.45s;  }
.i-anim-7x { animation-duration: 0.50s;  }
.i-anim-8x { animation-duration: 0.55s;  }
.i-anim-9x { animation-duration: 0.60s;  }
.i-anim-10x { animation-duration: 0.65s;  }

.i-anim-infinite { animation-iteration-count: infinite; }

.i-anim-delay-1x { animation-delay: 0.20s; }
.i-anim-delay-2x { animation-delay: 0.25s; }
.i-anim-delay-3x { animation-delay: 0.30s; }
.i-anim-delay-4x { animation-delay: 0.35s; }
.i-anim-delay-5x { animation-delay: 0.40s; }
.i-anim-delay-6x { animation-delay: 0.45s; }
.i-anim-delay-7x { animation-delay: 0.50s; }
.i-anim-delay-8x { animation-delay: 0.50s; }
.i-anim-delay-9x { animation-delay: 0.60s; }
.i-anim-delay-10x { animation-delay: 0.65s; }

/* scale in */

.i-anim-scale-in {
    animation-name: scale-in;
    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}

@keyframes scale-in {
    0% { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* scale out */

.i-anim-scale-out {
    animation-name: scale-out;
    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}

@keyframes scale-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.7); }
}

/* bounce */

.i-anim-bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

/* slide in */

.i-anim-slide-in-down {
  animation-name: slideInDown;
}

@keyframes slideInDown {
  from { transform: translate3d(0, -100%, 0); visibility: visible; opacity: 0;}
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.i-anim-slide-in-up {
  animation-name: slideInUp;
}

@keyframes slideInUp {
  from { transform: translate3d(0, 100%, 0); visibility: visible; opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.i-anim-slide-in-left {
  animation-name: slideInLeft;
  transform-origin: top left;
}

@keyframes slideInLeft {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.i-anim-slide-in-right {
  animation-name: slideInRight;
}

@keyframes slideInRight {
  from { transform: translate3d(100%, 0, 0); visibility: visible; opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}


/* slide out */

.i-anim-slide-out-down {
  animation-name: slideOutDown;
}

@keyframes slideOutDown {
  from { transform: translate3d(0, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 100%, 0);opacity: 0; }
}

.i-anim-slide-out-up {
  animation-name: slideOutUp;
}

@keyframes slideOutUp {
  from { transform: translate3d(0, 0, 0); visibility: visible; }
  to { transform: translate3d(0, -100%, 0);opacity: 0; }
}

.i-anim-slide-out-left {
  animation-name: slideOutLeft;
}

@keyframes slideOutLeft {
  from { transform: translate3d(0, 0, 0); visibility: visible; }
  to { transform: translate3d(-100%, 0, 0);opacity: 0; }
}


.i-anim-slide-out-right {
  animation-name: slideOutRight;
}

@keyframes slideOutRight {
  from { transform: translate3d(0, 0, 0);opacity: 0; visibility: visible; }
  to { transform: translate3d(100%, 0, 0);opacity: 0; visibility: hidden; }
}

/* shake */

.i-anim-shake {
  animation-name: shake;
}

@keyframes shake {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

/* fade */

.i-anim-fade-out {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.i-anim-fade-in {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* pulse out */

.i-anim-pulse-out {
  animation-name: pulseOut;
}

@keyframes pulseOut {
     0% { transform: scale(1.0); } 
     50% { transform: scale(1.2); } 
     100% { transform: scale(1.0); } 
}

/* pulse in */

.i-anim-pulse-in {
    animation-name: pulseIn;
}

@keyframes pulseIn {
     0% { transform: scale(1.0); } 
     50% { transform: scale(0.8); } 
     100% { transform: scale(1.0); } 
}

/* spin in */

.i-anim-spin-in {
    animation-name: spinIn;
    transform-origin: center center;
}

@keyframes spinIn {
     0% { transform: rotate(0); } 
     100% { transform: rotate(360deg); } 
}

/* spin out */

.i-anim-spin-out {
    animation-name: spinOut;
    transform-origin: center center;
}

@keyframes spinOut {
     0% { transform: rotate(0); } 
     100% { transform: rotate(-360deg); } 
}