/* [START] Direct port of Bootstrap 4.0.0-alpha Responsive utilities to hide and show elements based on viewport size.  Breakpoints have been modified to match Bootstrap 3. */
/* breakpoint hides xs -> 768px and less, sm -> 768px to 991px, md -> 992px to 1199px, lg -> 1200 and greater */
.hidden-xs-up
{
	display: none !important;
}
@media (max-width: 767px)
{
    .hidden-xs-down
	{
    	display: none !important;
	}
}
@media (min-width: 768px) 
{
    .hidden-sm-up
    {
        display: none !important;
    }
}
@media (max-width: 991px) 
{
	.hidden-sm-down
	{
		display: none !important;
	}
}
@media (min-width: 992px) 
{
	.hidden-md-up
    {
    	display: none !important;
	}
}
@media (max-width: 1199px) 
{
	.hidden-md-down 
    {
		display: none !important;
	}
}
@media (min-width: 1200px)
{
	.hidden-lg-up
    {
    	display: none !important;
	}
}
.hidden-lg-down
{
    display: none !important;
}
/* print styles */
.visible-print-block
{
	display: none !important;
}
@media print
{
	.visible-print-block
    {
    	display: block !important;
	}
}
.visible-print-inline
{
	display: none !important;
}
@media print
{
	.visible-print-inline
    {
    	display: inline !important;
	}
}
.visible-print-inline-block
{
	display: none !important;
}
@media print
{
	.visible-print-inline-block 
    {
    	display: inline-block !important;
	}
}
@media print
{
	.hidden-print
    {
    	display: none !important;
	}
}
/* [END] Direct port of Bootstrap 4.0.0-alpha Responsive utilities to hide and show elements based on viewport size.  Breakpoints have been modified to match Bootstrap 3. */

/* [START] Bootstrap 3 enhancements and overwrites */
/* extension to Bootstrap 3 to shrink or remove the gutters between columns */
.row.small-gutter 
{
    margin-left: -5px;
    margin-right: -5px;
}
.row.small-gutter [class*='col-']:not(:first-child),
.row.small-gutter [class*='col-']:not(:last-child) 
{
    padding-right: 5px;
    padding-left: 5px;
}
.row.no-gutter 
{
    margin-left: 0;
    margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) 
{
    padding-right: 0;
    padding-left: 0;
}
/* [END] Bootstrap 3 enhancements and overwrites */

/* [START] Overrides to prevent the community page's CSS from breaking this CSS */
@media only screen and (min-aspect-ratio: 4/3) and (min-width: 48em), only screen and (min-width: 64.0625em)
{
    .siteforceNapiliBody .cCenterPanel
    {
        max-width:10000px!important;
        margin:0!important;
    }
}
.ui-widget
{
    margin:0!important;
}
.slds-col--padded
{
    padding:0!important;
}
/* [END] Overrides to prevent the community page's CSS from breaking this CSS */

/* [START] Remove default iOS Webkit styles */
input[type=text],
input[type=email],
input[type=password]
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.auraPlaceholder.spin, .spinner
{
    background: none;
}
/* [END] Remove default iOS Webkit styles */

/* ==================================================================================================================================================================== */

/* [START] Colors */
.janssen-white
{
    color:white!important;
}
.janssen-light-blue
{
	color : #00A0DF!important; 
}
.janssen-blue
{
    color : #1C75BC!important;
}
.janssen-dark-blue
{
    color : #31598A!important;
}
.janssen-light-gray
{
    color : #F8F7F6!important;
}
.janssen-gray
{
	color : #4E5054!important;    
}
.janssen-error-red
{
    color : #FF2D55!important;
}
.janssen-white-background
{
    background-color : white!important;
}
.janssen-light-blue-background
{
	background-color : #00A0DF!important;   
}
.janssen-blue-background
{
    background-color : #1C75BC!important;
}
.janssen-dark-blue-background
{
    background-color : #31598A!important;
}
.janssen-light-gray-background
{
    background-color : #F8F7F6!important;
}
.janssen-tiles-gray-background
{
    background-color : #FBFAFA!important;
}
.janssen-gray-background
{
	background-color : #4E5054!important;    
}
.janssen-error-red-background
{
    background-color : #FF2D55!important;
}
.janssen-white-border
{
    border-color : white!important;
}
.janssen-light-blue-border
{
	border-color : #00A0DF!important;    
}
.janssen-blue-border
{
    border-color : #1C75BC!important;
}
.janssen-dark-blue-border
{
    border-color : #31598A!important;
}
.janssen-light-gray-border
{
    border-color : #F8F7F6!important;
}
.janssen-gray-border
{
	border-color : #4E5054!important;    
}
.janssen-error-red-border
{
    border-color : #FF2D55!important;
}
/* [END] Colors */

/* [START] Typography */
.center-text
{
    text-align:center;
}
.right-text
{
    text-align:right;
}
.left-text
{
    text-align:left;
}
.slds-text-heading--xlarge
{
    font-weight: 300;
    font-size: 3rem;
    line-height: 1.25;
}
.karbon-font-light
{
    font-family : Karbon-Light, sans-serif;
}
.karbon-font-lightitalic
{
    font-family : Karbon-LightItalic, sans-serif;
}
.karbon-font
{
    font-family : Karbon-Regular, sans-serif;
}
.karbon-font-medium
{
    font-family : Karbon-Medium, sans-serif;
}
.karbon-font-semibold
{
    font-family : Karbon-Semibold, sans-serif;
}
.open-sans-font-light
{
    font-family:Open Sans, sans-serif;
    font-style:normal;
    font-weight:300;
}
.open-sans-font
{
    font-family:Open Sans, sans-serif;
    font-style:normal;
    font-weight:400;
}
.open-sans-font-semibold
{
    font-family:Open Sans, sans-serif;
    font-style:normal;
    font-weight:600;
}
.open-sans-font-bold
{
    font-family:Open Sans, sans-serif;
    font-style:normal;
    font-weight:700;
}
.open-sans-font-extrabold
{
    font-family:Open Sans, sans-serif;
    font-style:normal;
    font-weight:800;
}
.open-sans-font-lightitalic
{
    font-family:Open Sans, sans-serif;
    font-style:italic;
    font-weight:300;
}
.open-sans-fontitalic
{
    font-family:Open Sans, sans-serif;
    font-style:italic;
    font-weight:400;
}
.open-sans-font-semibolditalic
{
    font-family:Open Sans, sans-serif;
    font-style:italic;
    font-weight:600;
}
.open-sans-font-bolditalic
{
    font-family:Open Sans, sans-serif;
    font-style:italic;
    font-weight:700;
}
.open-sans-font-extrabolditalic
{
    font-family:Open Sans, sans-serif;
    font-style:italic;
    font-weight:800;
}
h1, h2, h3, h4, h5, h6
{
    color: #4E5054;
}
h1.headline
{
    font-family : Karbon-Regular, sans-serif;
    font-size:28pt;
}
h1.main-title
{
    font-family : Karbon-Regular, sans-serif;
    font-size:36pt;
}
h1.main-title-reg
{
    font-family : Karbon-Regular, sans-serif;
    font-size:30pt;
}
.para-text{
    font-size:22pt;
}
h1.headline-text{
   font-family : Karbon-Regular, sans-serif;
    font-size:24pt; 
}
.sub-title-text{
  font-family : Karbon-Regular, sans-serif;
  font-size:16pt;  
  line-height:26px;
}

h1.headline.title
{
    font-family : Karbon-Regular, sans-serif;
    line-height : 48px;
    color:#00A0DF;
}
h2.headline
{
    font-family : Karbon-Regular, sans-serif;
    font-size:36px;
}
h3.form-flow-header
{
    font-family : Karbon-Medium, sans-serif;
    font-size:16pt;
}
.sub-title
{
    font-family : Karbon-Regular, sans-serif;
    font-size:18pt;
}
.sub-title-reg
{
    font-family : Karbon-Regular, sans-serif;
    font-size:16pt;
}
.sub-title-medium
{
    font-family : Karbon-medium, sans-serif;
    font-size:16pt;
}
.font-medium
{
    font-family : Karbon-medium, sans-serif;
    font-size:12pt;
}
.font-reg
{
    font-family : Karbon-Regular, sans-serif;
    font-size:12pt;
}
h4.tile-label
{
    font-family : Karbon-Regular, sans-serif;
    font-size:20px;
}
h4.tile-label-medium
{
    font-family : Karbon-medium, sans-serif;
    font-size:16pt;
}
.tile-text
{
    font-family : Karbon-Regular, sans-serif;
    font-size:24pt;
}
.edit-table-header{
   font-family : Karbon-Regular, sans-serif;
   font-size:20pt; 
}
.strikethrough
{
    text-decoration: line-through;
    opacity:0.5;
}
/* default body copy */
body
{
    font-family : Karbon-Regular, sans-serif;
    font-size:14pt;
    color : #4E5054; /* janssen-gray */
}
/* default body copy link */
a
{
    font-family : Karbon-Medium, sans-serif;
    color: #31598A;/* janssen-dark-blue */
    text-decoration: underline;
}
a.forget-password
{
    text-decoration:underline;
    position:absolute;
    top:0;
    right:0;
    margin-right:19px;
    font-size:12pt;
}
.table-head-font
{
    font-size:12pt;
}
/* [START] check and remove this */
/*h1.janssen-title
{
    font-family : Karbon-Light, sans-serif;
    font-size:48px;
}
h1.janssen-headline
{
    font-family : Karbon-Light, sans-serif;
    font-size:36px;
}
h2.janssen-formflow-header
{
    font-family : Karbon-Regular, sans-serif;
    font-size:20px;
}
h3.janssen-keydata
{
    font-family : Karbon-Regular, sans-serif;
    font-size:18px;
}
.janssen-secondary-navigation
{
    font-family : Karbon-Medium, sans-serif;
    font-size:14px;
}
h3.form-label-link a
{
    font-family : Karbon-Medium, sans-serif;
    font-size:18px;
}*/
/* [END] check and remove this */

/* [END] Typography */

/* [START] Images */
.thumbnail.hide-thumbnail
{
    background : none;
    border : none;
}
/* [END] Images */
/* [START] Fluid SVG classes */
/*
	Example usage:
	<div class="containing-div">
        <div class="fluid-svg-wrap">
            <svg xmlns="http://www.w3.org/2000/svg" class="fluid-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
                <circle cx="50" cy="50" r="40" stroke="#00a0df" stroke-width="2" fill="none"/>
                <text x="22" y="56" fill="black" style="font-family:OpenSans-Regular,sans-serif;font-size:large">Patient</text>
            </svg>
        </div>
	</div>
	
	In the case of Aura, use the c:svg component.
	Because for some reason the Aura framework doesn't support SVG tags dispite the fact that the Lightning design system uses inline SVGs exclusively as icons and images.
	Example usage:
	<div class="fluid-svg-wrap">
        <c:svg class="fluid-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
            <c:svgCircle cx="50" cy="50" radius="40" stroke="#00a0df" strokeWidth="2" fill="none"/>
            <c:svgText posX="20" posY="56" fill="black" style="font-family:OpenSans-Regular,sans-serif;font-size:large">Patient</c:svgText>
        </c:svg>
    </div>
	
	No matter how much the div.containing-div is resized, the underlying SVG will maintain it's aspect ratio and rescale according to div.containing-div
*/
.fluid-svg-wrap
{
    display: inline-block;
    position: relative;
    height: 100%;
    width: 100%;
    padding-bottom:0;
    vertical-align: middle;
}
.fluid-svg
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
/* [END] Fluid SVG classes */

/* [START] Misc widgets */
hr
{
    margin-top: 8px;
    margin-bottom: 16px;
    border-top: 2px solid #4E5054;   
}
hr.separator
{
    margin:0;padding:0;
    border-top:1px solid #E1DEDB;
}
dl dt 
{
    float: left;
    clear: left;
    max-width: 100px;
}
.circle
{
    /* FIXME: Border Radius will not work in IE8 and lower */
    -webkit-border-radius:50%;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 50%;/* Firefox 1-3.6 */
    border-radius : 50%;/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
.blue-circle
{
    height: 180px; width:180px;
    display: inline-block;
    border: solid 3px #00A0DF;
    /* FIXME: Border Radius will not work in IE8 and lower */
    -webkit-border-radius:50%;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 50%;/* Firefox 1-3.6 */
    border-radius : 50%;/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
.blue-circle-small
{
    height: 90px; width:90px;
}
.blue-circle-large
{
    height: 240px; width:240px;
}
.frame-border
{
    border:1px solid #d8dde6;
}
/* [END] Misc widgets */

/* [START] Positioning and Sizing classes */
.fill-width
{
    width : 100%!important;
}
/* [END] Positioning and Sizing classes */

/* ==================================================================================================================================================================== */

/* layout stylings */

/* [START] Spinner overlay and animation for the page-level loading wheel */
.overlay
{
	top              : 0;
	right            : 0;
	width            : 100%;
	height           : 100%;
	position         : fixed;
	background-color : white;
	z-index          : 1000;
}
.overlay > div.jumbotron.spinner
{
	width            : 100%;
	position         : absolute;
	top              : 50%;
	transform        : translateY(-50%);/* FIXME: The translateY property may not work in old versions of IE */
	background-color : white;
}
.display-none
{
    display : none!important;
}
/* [END] Spinner overlay and animation for the page-level loading wheel */

/* [START] Navigation Bar */
.nav-bar
{
    position         : fixed;
    width            : 100%;
    z-index          : 999;
}
.sub-nav-bar
{
    width            : 100%;
    z-index          : 999;
    overflow 		 : hidden;
}
.sub-nav-gradient-background
{
    background: #1C75BC; /* Fallback for browsers that do not support gradients */
    background: -webkit-linear-gradient(#2789c8, #1d76bc); /* For Webkit browsers such as Safari 5.1 to 6.0 */
    background: -moz-linear-gradient(#2789c8, #1d76bc); /* For Firefox 3.6 to 15 */
    background: -ms-linear-gradient(#2789c8, #1d76bc); /* For IE10 and IE11 */
    background: -o-linear-gradient(#2789c8, #1d76bc); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(#2789c8, #1d76bc); /* Standard syntax */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#2789c8', endColorstr='#1d76bc', GradientType=0); /* For IE5.5 and above fallback */
}
nav.horizontal-nav-items > ul > li,
nav.horizontal-nav-items > ul > div
{
    display:inline-block;
}
/* [END] Navigation Bar */

/* [START] Main content */
main, div[role="main"]
{
	padding-top : 100px;
}
footer
{
    padding-top : 100px;
}
/* [END] Main content */

/* ==================================================================================================================================================================== */

/* table stylings */

/* [START] Basic responsive table layout styles */
.responsive-table-xs,
.responsive-table-sm,
.responsive-table-md,
.responsive-table-lg
{
    height: 100%;
}
.responsive-table-xs .table-container,
.responsive-table-sm .table-container,
.responsive-table-md .table-container,
.responsive-table-lg .table-container
{
    /*height: calc(100% - 6px - 14px);
    overflow-x: hidden;
    overflow-y: scroll;*/
}
.responsive-table-xs .responsive-table-faux-header,
.responsive-table-sm .responsive-table-faux-header,
.responsive-table-md .responsive-table-faux-header,
.responsive-table-lg .responsive-table-faux-header
{
    /*margin-bottom: -27px;*/
}
.responsive-table-xs .responsive-table-faux-header div,
.responsive-table-sm .responsive-table-faux-header div,
.responsive-table-md .responsive-table-faux-header div,
.responsive-table-lg .responsive-table-faux-header div
{
    border-bottom:2px solid #4E5054;
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
}
.responsive-table-xs table,
.responsive-table-sm table,
.responsive-table-md table,
.responsive-table-lg table
{
    width:100%;
    table-layout:fixed;
}
.responsive-table-xs table caption,
.responsive-table-sm table caption,
.responsive-table-md table caption, 
.responsive-table-lg table caption
{
    margin:0;
    padding:0;
    font-size: 0;
    height:0;
    width:0;
}
.responsive-table-xs table tr,
.responsive-table-sm table tr,
.responsive-table-md table tr,
.responsive-table-lg table tr
{
    /*cursor:pointer;*/
}
.responsive-table-xs table tbody,
.responsive-table-sm table tbody,
.responsive-table-md table tbody,
.responsive-table-lg table tbody
{
    border: 1px solid #E1DEDB;
}
.responsive-table-xs table tbody tr:not(:first-child),
.responsive-table-sm table tbody tr:not(:first-child),
.responsive-table-md table tbody tr:not(:first-child),
.responsive-table-lg table tbody tr:not(:first-child)
{
    border-top: 2px solid #E1DEDB;
}
.responsive-table-xs table tr:hover,
.responsive-table-sm table tr:hover,
.responsive-table-md table tr:hover,
.responsive-table-lg table tr:hover
{
    background-color:#FDFCFC;
}
.responsive-table-xs table tr td:first-child,
.responsive-table-sm table tr td:first-child,
.responsive-table-md table tr td:first-child,
.responsive-table-lg table tr td:first-child
{
    /*padding-left:12px;*/
    padding-top:22px;
}
.responsive-table-xs table tr td,
.responsive-table-sm table tr td,
.responsive-table-md table tr td,
.responsive-table-lg table tr td
{
    padding-right: 20px;
    padding-left: 20px;
}
.responsive-table-xs table tr td:last-child,
.responsive-table-sm table tr td:last-child,
.responsive-table-md table tr td:last-child,
.responsive-table-lg table tr td:last-child
{
    /*padding-right:12px;*/
    padding-bottom:22px;
}
.responsive-table-xs table thead span,
.responsive-table-sm table thead span,
.responsive-table-md table thead span,
.responsive-table-lg table thead span
{
    position:absolute;
    margin-top:-20px;
    width:100%;
    height:0;
    overflow: hidden;
}
.responsive-table-xs table th, .responsive-table-xs table td,
.responsive-table-sm table th, .responsive-table-sm table td,
.responsive-table-md table th, .responsive-table-md table td,
.responsive-table-lg table th, .responsive-table-lg table td
{
    display: table-cell;
}
.responsive-table-xs table td .responsive-header,
.responsive-table-sm table td .responsive-header,
.responsive-table-md table td .responsive-header,
.responsive-table-lg table td .responsive-header
{
    display: none;
}
.responsive-table-xs table td .responsive-cell,
.responsive-table-sm table td .responsive-cell,
.responsive-table-md table td .responsive-cell,
.responsive-table-lg table td .responsive-cell
{
    padding-left: 5px;
    padding-right: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
}
/* [END] Basic responsive table layout styles */
/* [START] Basic responsive table layout styles, collapsing breakpoints */
/* xs */
/* will not collapse */
/* sm */
@media only screen and (max-width: 767px)
{
    .responsive-table-sm .table-container
    {
        height: 100%;
    }
    .responsive-table-sm table > tbody > tr:nth-child(odd)
    {
        background-color: #FDFCFC;
    }
    .responsive-table-sm .responsive-table-faux-header, 
    .responsive-table-sm table colgroup
    {
        display:none;
    }
    .responsive-table-sm table thead
    {
        position: absolute;
        display: block;
        top:-9999px;
        left:-9999px;
    }
    .responsive-table-sm table th,
    .responsive-table-sm table td
    {
        display: block;
    }
    .responsive-table-sm table td .responsive-header,
    .responsive-table-sm table td .responsive-cell
    {
        display: inline-block;
    }
    .responsive-table-sm table td .responsive-cell
    {
        overflow: visible;
    }
}
/* md */
@media only screen and (max-width: 991px)
{
    .responsive-table-md .table-container
    {
        height: 100%;
    }
    .responsive-table-md table > tbody > tr:nth-child(odd)
    {
        background-color: #FDFCFC;
    }
    .responsive-table-md .responsive-table-faux-header, 
    .responsive-table-md table colgroup
    {
        display:none;
    }
    .responsive-table-md table thead
    {
        position: absolute;
        display: block;
        top:-9999px;
        left:-9999px;
    }
    .responsive-table-md table th,
    .responsive-table-md table td
    {
        display: block;
    }
    .responsive-table-md table td .responsive-header,
    .responsive-table-md table td .responsive-cell
    {
        display: inline-block;
    }
    .responsive-table-md table td .responsive-cell
    {
        overflow: visible;
    }
}
/* lg */
@media only screen and (max-width: 1199px)
{
    .responsive-table-lg .table-container
    {
        height: 100%;
    }
    .responsive-table-lg table > tbody > tr:nth-child(odd)
    {
        background-color: #FDFCFC;
    }
    .responsive-table-lg .responsive-table-faux-header, 
    .responsive-table-lg table colgroup
    {
        display:none;
    }
    .responsive-table-lg table thead
    {
        position: absolute;
        display: block;
        top:-9999px;
        left:-9999px;
    }
    .responsive-table-lg table th,
    .responsive-table-lg table td
    {
        display: block;
    }
    .responsive-table-lg table td .responsive-header,
    .responsive-table-lg table td .responsive-cell
    {
        display: inline-block;
    }
    .responsive-table-lg table td .responsive-cell
    {
        overflow: visible;
    }
}
/* [END] Basic responsive table layout styles, collapsing breakpoints */
/* [START] Table syles */
.responsive-table-xs table td .responsive-header,
.responsive-table-sm table td .responsive-header,
.responsive-table-md table td .responsive-header,
.responsive-table-lg table td .responsive-header
{
    width:6em;
}
/* [END] Table syles */

/* [START] Basic responsive editable table styles */
.editable-table .table-title
{
    font-size:16pt;
}
.editable-table .table-title-line
{
    padding:0;
}
.editable-table a
{
    text-decoration: none;
}
.editable-table a:not(:first-child)
{
    padding-left:25px;
}
.editable-table > div > .row > [class^="col-"],
.editable-table > div > form > .row > [class^="col-"]
{
    padding-top:5px;
    padding-bottom:5px;
}
.editable-table .row .editable-table-border
{
    border-top: 1px solid #E1DEDB;
    border-left: 1px solid #E1DEDB;
    height:68px;
    overflow:hidden;
    padding-top:10px;
    padding-bottom:5px;
}
.editable-table .row:last-child .editable-table-border
{
    border-bottom: 1px solid #E1DEDB;
}
.editable-table .row .editable-table-border:last-child
{
    border-right: 1px solid #E1DEDB;
}
@media (max-width: 991px) 
{
    .editable-table .row .editable-table-border
    {
        border-top: 1px solid #E1DEDB;
    	border-left: 1px solid #E1DEDB;
        border-right: 1px solid #E1DEDB;
    }
    .editable-table .row:last-child .editable-table-border
    {
        border-bottom: none;
    }
    .editable-table .row:last-child .editable-table-border:last-child
	{
        border-bottom: 1px solid #E1DEDB;
    }
}
.editable-table-border p.text-overflow
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* [START] Basic responsive editable table styles */

/* ==================================================================================================================================================================== */

/* [START] UI components: Overrides */
.hide-optional label [data-ng-if],
.hide-optional legend [data-ng-if]
{
    display:none;
}
/* input field label font color and size */
.slds-form-element__label, .slds-form-element__help
{
    font-size : 12pt;
    margin-bottom:0;
}
.hide-error-text .slds-form-element__help
{
    display:none;
}
/* input field background color */
input.slds-input,
select.slds-select
{
    height : 40px;
    color : #4E5054;
    font-size : 16px;
    /* FIXME: Border Radius will not work in IE8 and lower */
    -webkit-border-radius:2px;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 2px;/* Firefox 1-3.6 */
    border-radius : 2px;/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    box-shadow:0 0 0 transparent;
}
/* remove the SLDS default focus shaddow */
.slds-input:active, .slds-input:focus, 
.slds-checkbox [type=checkbox]:focus+.slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:focus~.slds-checkbox--faux,
.slds-select:active, .slds-select:focus,
.janssenui-radio.slds-radio [type=radio]:focus+.slds-radio--faux, 
.janssenui-radio.slds-radio [type=radio]:focus+.slds-radio__label .slds-radio--faux, 
.janssenui-radio.slds-radio [type=radio]:focus~.slds-radio--faux
{
    box-shadow : 0 0 0 #000;
}
.slds-checkbox [type=checkbox]:focus+.slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:focus~.slds-checkbox--faux,
.slds-select:focus,
.janssenui-radio.slds-radio [type=radio]:focus+.slds-radio--faux, 
.janssenui-radio.slds-radio [type=radio]:focus+.slds-radio__label .slds-radio--faux, 
.janssenui-radio.slds-radio [type=radio]:focus~.slds-radio--faux
{
    border-width:2px;
}
/* bold on radio or checkbox checked state */
.janssenui-checkbox .slds-checkbox [type=checkbox]:checked+.slds-checkbox--faux+.slds-form-element__label, 
.janssenui-checkbox .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label+.slds-checkbox--faux .slds-form-element__label, 
.janssenui-checkbox .slds-checkbox [type=checkbox]:checked~.slds-checkbox--faux+.slds-form-element__label,
.janssenui-radio.slds-radio [type=radio]:checked+.slds-radio--faux+.slds-form-element__label, 
.janssenui-radio.slds-radio [type=radio]:checked+.slds-radio__label+.slds-radio--faux .slds-form-element__label, 
.janssenui-radio.slds-radio [type=radio]:checked~.slds-radio--faux+.slds-form-element__label
{
    font-family : Karbon-Medium, sans-serif!important;
}
 /* select arrow stylings */
.slds-select_container .slds-select
{
    padding-right : 2rem;
}
.slds-select_container:before
{
    border-bottom :6px solid #4E5054;
    top : calc((1.75rem / 2) - 2px);
}
.slds-select_container:after
{
    border-top :6px solid #4E5054;
    bottom : calc((1.75rem / 2) - 2px);
}
.slds-select_container:before,
.slds-select_container:after
{
    display:none;
    right : 1rem;
    border-right : 6px solid transparent;
    border-left : 6px solid transparent;
}
.slds-select_container select.slds-select
{
    background-repeat: no-repeat;
    background-size:100% 100%;
    /*background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="width:100%;height:100%;" preserveAspectRatio="xMaxYMin meet"><polygon points="63 30, 50 45, 75 45" style="fill:%234E5054"/><polygon points="63 70, 50 55, 75 55" style="fill:%234E5054"/></svg>');*/
}
/* [END] UI components: Overrides */
/* [START] UI components: Buttons */
.janssenui-button
{
    width: 182px;
    height : 40px;
    font-size : 16px;
    padding-top: 5px;
    /* FIXME: Border Radius will not work in IE8 and lower */
    -webkit-border-radius:2px;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 2px;/* Firefox 1-3.6 */
    border-radius : 2px;/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
.janssenui-button span
{
    overflow: hidden;
    /*white-space: nowrap;*/ /* Prevent icons from sliding beneath the button text and outside the button */
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    
}
/* use in conjunction with slds-button and slds-button--brand */
.janssenui-button--primary
{
    background-color : #00A0DF;
    border-color : #00A0DF;
}
[disabled].janssenui-button--primary
{
    background-color : #00A0DF;
    border-color : #00A0DF;
}
.janssenui-button--primary:hover,
.janssenui-button--primary:focus
{
    cursor  : pointer;
    background-color : #1C75BC;
    border-color : #1C75BC;
}
.janssenui-button--primary.janssenui-button--disabled
{}
.janssenui-button--primary.janssenui-button--disabled:hover,
.janssenui-button--primary.janssenui-button--disabled:focus
{
    background-color : #00A0DF;
    border-color : #00A0DF;
}
/* use in conjunction with slds-button and NOT slds-button--brand and NOT slds-button--neutral */
.janssenui-button--secondary
{
    background : none;
    border-color : #00A0DF;
    color : #00A0DF;
}
.janssenui-button--secondary:hover,
.janssenui-button--secondary:focus
{
    cursor  : pointer;
    background : none;
    border-color : #1C75BC;
    color : #1C75BC;
}
[disabled].janssenui-button--secondary,
[disabled].janssenui-button--secondary:hover,
[disabled].janssenui-button--secondary:focus
{
    background : none;
    /*border-color : #00A0DF;
    color : #00A0DF;*/
    border-color : #1C75BC;
    color : #1C75BC;
    opacity: 0.5;
}
/* use in conjunction with slds-button and slds-button--neutral */
.janssenui-button--tertiary
{
    background-color : #FDFCFC;
    border-color : #E1DEDB;
    color:#31598A;
}
.janssenui-button--tertiary:hover,
.janssenui-button--tertiary:focus
{
    cursor  : pointer;
    background-color : #F8F7F6;
    /*color:black;*/
}
.janssenui-button--tertiary.janssenui-button--disabled
{}
.janssenui-button--tertiary.janssenui-button--disabled:hover,
.janssenui-button--tertiary.janssenui-button--disabled:focus
{
    cursor  : default;
    background-color : #FDFCFC;
    border-color : #E1DEDB;
}
.janssenui-button--link
{
    height: auto;
    width: auto;
    font-size:14pt;
    display:inline-block;
    background:none!important;
    border:none!important;
    padding:0!important;
    cursor: pointer;
}
.janssenui-button--link span
{
    font-family : Karbon-Medium, sans-serif;
    color: #31598A;/* janssen-dark-blue */
    text-decoration: underline;
}

[disabled].janssenui-button,
[disabled].janssenui-button *,
[disabled].janssenui-button:hover,
[disabled].janssenui-button:hover *
{
    cursor: not-allowed!important;
}
[disabled].janssenui-button.janssenui-button--primary,
[disabled].janssenui-button.janssenui-button--primary *,
[disabled].janssenui-button.janssenui-button--primary:hover,
[disabled].janssenui-button.janssenui-button--primary:hover *,
[disabled].janssenui-button.janssenui-button--link,
[disabled].janssenui-button.janssenui-button--link *,
[disabled].janssenui-button.janssenui-button--link:hover,
[disabled].janssenui-button.janssenui-button--link:hover *,
{
    opacity : 0.5!important;/* FIXME: This will not work in old versions of IE */
}

/* FIXME: Fix the primary-alt, secondary-alt, and tertiary-alt button styles */
.janssenui-button--secondary.on-janssen-dark-blue-background
{
    border-color:white;
    color:white;
}
.janssenui-button--secondary.on-janssen-dark-blue-background:hover
{
    /* FIXME: Will not work in IE8 and lower.  It will maintain solid white border and color. */
    border-color:rgba(255,255,255,.75);
    color:rgba(255,255,255,.75);
}
/* [END] UI components: Buttons */
/* [START] UI components: Input text, select, checkboxes */
.disabled
{
    opacity : 0.5!important;
}
.janssenui-inputtext.slds-form-element,
.janssenui-select.slds-form-element,
.janssenui-textarea.slds-form-element
{
    padding-bottom:22px;
}
.janssenui-checkbox.secondary .slds-form-element__label,
.janssenui-inputtext.secondary .slds-form-element__label,
.janssenui-textarea.secondary .slds-form-element__label
{
    color: white;
}
.janssenui-inputtext input.slds-input,
.janssenui-select select.slds-select,
.janssenui-textarea textarea.slds-textarea
{
    background-color : #FDFCFC;
}
.janssenui-inputtext input.slds-input:focus,
.janssenui-select select.slds-select:focus,
.janssenui-textarea textarea.slds-textarea:focus
{
    background-color : white;
    border-color:#00A0DF;
}
/* fixes the yellow background on the Chrome autofill */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active
{
    background-color: white !important;
    background-clip: content-box;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    /*-webkit-text-fill-color: red !important;*/
}
/* [END] UI components: Input text, select, checkboxes */
/* [START] UI components: Input text */
/* password textbox styles */
@media (min-width: 768px) 
{
	input[type="password"]
	{
	    /*font-size : 2rem;*/
        font-size:16px;
	}
}
/* textbox states */
/* TODO: Move this to the overrides section */
.janssenui-inputtext.error input.slds-input, /* error state */
.janssenui-inputtext input.slds-input:focus, .janssenui-inputtext input.slds-input:active, /* focus and active state */
.janssenui-textarea.error textarea.slds-textarea, /* error state */
.janssenui-textarea textarea.slds-textarea:focus, .janssenui-textarea textarea.slds-textarea:active /* focus and active state */
{
    border-width : 2px;
}
/* [END] UI components: Input text */
/* [START] UI components: checkboxes */
.janssenui-checkbox .slds-form-element__control
{
    padding-bottom: 12px;
}
.janssenui-checkbox .slds-checkbox
{
    padding-left:31px;
}
.janssenui-checkbox .slds-checkbox .slds-checkbox--faux
{
    margin-left:-31px;
    height:20px;
    width:20px;
}
.janssenui-checkbox .slds-checkbox .slds-form-element__label
{
    padding-left: 3px;
    font-size : 18px;
    line-height : 1;
}
.janssenui-checkbox .slds-checkbox [type=checkbox]:checked+.slds-checkbox--faux:after, 
.janssenui-checkbox .slds-checkbox [type=checkbox]:checked~.slds-checkbox--faux:after
{
    height: 9px;
    width: 16px;
    border-bottom: 4px solid #00A0DF;
    border-left: 4px solid #00A0DF;
    -webkit-transform: translate3d(-50%, -60%, 0) rotate(-45deg); /* iOS fix for the checkbox */
    transform: translate3d(-50%, -60%, 0) rotate(-45deg);
}
.janssenui-checkbox.disabled .slds-checkbox--faux,
.janssenui-checkbox.disabled .slds-form-element__label
{
    cursor: not-allowed;
}
/* checkbox error state */
.janssenui-checkbox.error .slds-checkbox--faux
{
    border-width:2px;
}
/* [END] UI components: checkboxes */
/* [START] UI components: select */
.janssenui-select.error select.slds-select
{
    border-width : 2px;
}
/* [END] UI components: select */
/* [START] UI components: radio */
.janssenui-radio-group legend.slds-form-element__legend.slds-form-element__label
{
    font-size:12pt;
}
.janssenui-radio.disabled .slds-radio--faux,
.janssenui-radio.disabled .slds-form-element__label
{
    cursor: not-allowed;
}
.janssenui-radio.slds-radio .slds-radio--faux
{
    width : 20px;
    height : 20px;
}
.janssenui-radio.slds-radio [type=radio]:checked+.slds-radio--faux:after, 
.janssenui-radio.slds-radio [type=radio]:checked+.slds-radio__label .slds-radio--faux:after, 
.janssenui-radio.slds-radio [type=radio]:checked~.slds-radio--faux:after
{
    width:10px;
    height:10px;
}
.janssenui-radio.slds-radio .slds-form-element__label
{
    font-size:18px;
    padding-left:11px;
}
.janssenui-radio-group .janssenui-radio.slds-radio .slds-form-element__label
{
    padding-left:3px;
}
/* radio error state */
.janssenui-radio.slds-radio.error .slds-radio--faux
{
    border-width:2px;
}
/* [END] UI components: radio */