/* 	UATP default stylesheet 
	Using #uatp (id) and .uatp (class) on body tag.   For other issuers, leave id as UATP and change class, eg body #uatp .delta
	This allows overriding kendo or bootstrap as needed with id #uatp
	
*****	COLORS   ************
Greys
@gray-darker:   #222   #333333   text
@gray-dark:     #333   #5f5f5f
@gray:          #555   #606060 
@gray-light:    #777   #838383
@gray-lighter:  #eee   #eeeeee  light grey on input boxes rgba(238, 238, 238, 1)


GREENS
#5cb85c     #87db87 @brand-success, green on buttons
#63bc5d
#012e1a    dark green on page header divider, UATP dark green
	
k-grids  
#5f5f5f;   dark grey bg
#f5f5f5;   almost white 

#f00  inputs-container bg
#8e8e8e   bootstrap gray-lighter table cell borders
*/


/*-------------------END OF CSS RESET---------------------      */
/* using cdn instead
@font-face	{
	font-family: 'OpenSansRegular' ;
	src: url('../uatp/fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansLight' ;
	src: url('../uatp/fonts/OpenSans-Light.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansBold' ;
	src: url('../uatp/fonts/OpenSans-Bold.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansSemiBold' ;
	src: url('../uatp/fonts/OpenSans-Semibold.ttf') format('truetype');
}  */
/*  not being used
@font-face	{
	font-family: 'OpenSansExtraBold' ;
	src: url('../uatp/fonts/OpenSans-Extrabold.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansItalic' ;
	src: url('../uatp/fonts/OpenSans-LightItalic.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansLightItalic' ;
	src: url('../uatp/fonts/OpenSans-LightItalic.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansBoldItalic' ;
	src: url('../uatp/fonts/OpenSans-BoldItalic.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansSemiBoldItalic' ;
	src: url('../uatp/fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
}
@font-face	{
	font-family: 'OpenSansExtraBoldItalic' ;
	src: url('../uatp/fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
}
*/

/*  default bootstrap code. bug: missing from customizer downloads */
@font-face {
    font-family: 'Glyphicons Halflings';
  src: url('../bootstrap/fonts/glyphicons-halflings-regular.eot');
    src: url('../bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
         url('../bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
        url('../bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), 
        url('../bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
        url('../bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
/*    src: url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot');
    src: url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
         url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
         url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff') format('woff'), 
         url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
         url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');*/
}

/*------------------INDEX STYLES-----------------------------*/

/*Slider*/
.text-1, .text-2, .text-3, .text-4 {
    display: none;
    padding-right: 16%;
    font-size: 56px;
}

.text-2, .text-4 {
    margin-top: -50px;
}

div.wrapper {
    height: 100vh;
    margin-top: -20px;
}

.menu li a {
    color: #000000;
}

.login-wrapper {
    background-color: transparent;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    position: absolute;
    left: 8.33%;
    top: 50vh;
    margin-top: -300px;
    max-width: 450px;
    height: 500px;
}

    .login-wrapper img.uatp-login {
        margin: auto;
        padding: 20px 0;
        width: 30%;
        margin-bottom: -75px;
        max-width: 300px;
    }

    .login-wrapper img.data {
        margin: auto;
        padding: 10px 0;
        margin-top: -140px;
        width: 90%;
    }

    .login-wrapper img.vdos {
        position: absolute;
        bottom: -45px;
        right: 20px;
        width: 30px;
    }

form.sign-in {
    background-color: rgba(0,0,0,0.5);
    margin-bottom: -10px;
}

.login-container {
    border-top: 60px solid #fff;
    border-right: 15px solid #fff;
    border-left: 15px solid #fff;
    border-bottom: 145px solid #fff;
    background: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

    .login-container input.user-name, .login-container input.password {
        border: none;
        color: #999999;
        font-family: OpenSansLight;
        margin: auto;
        padding: 10px 10px;
        width: 90%;
    }

    .login-container input.user-name {
        border-radius: 5px 5px 0 0;
        margin-top: 45px;
    }

    .login-container input.password {
        border-radius: 0 0 5px 5px;
        border-top: 1px solid #0a2e1c;
    }

    .login-container button {
        background-color: #000000;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-family: OpenSansSemiBold;
        font-size: 22px;
        padding: 10px 0;
        width: 70%;
        margin-top: -8px;
    }

        .login-container button:hover {
            background-color: #01a12a;
            cursor: pointer;
        }

    .login-container p {
        color: #fff;
        font-family: OpenSansLight;
        font-size: 16px;
        padding: 25px;
    }

div.float-right {
    float: right;
}

div.float-right {
    color: #ffffff;
    font-family: OpenSansSemiBold;
    margin-top: 40vh;
}
/*   **************************   COMMON styles    *************************************************  */
#uatp .container,
#uatp .container-fluid {
    margin-left: 0;
    margin-right: 0;
}

#uatp /* JK commented out  - add this to Bootstrap custom theme???
	h1, body.uatp h2, body.uatp p, body.uatp a, body.uatp li, body.uatp button, body.uatp input*/ {
    font-family: OpenSansRegular;
}

body#uatp td {
    font-family: OpenSansLight;
}

body#uatp .k-grid td {
    font-family: OpenSansRegular;
}

/************************************************ LINKS ******************/

/*#uatp li a:hover {
	text-decoration: underline;
}*/
#uatp .show-hide a {
    text-decoration: underline;
}

/* fix - don't let it apply to #NavMenucolor: #5f5f5f;*/
body.uatp li a {
    outline: none;
}

/*body.uatp li a:hover {
	background-color:  transparent;   
	color: #ffffff;
}*/

div.header {
    background-color: #fff;
}

/* HEADER  */
.header-logo {
    margin-top: 15px;
}
    /* img logo container*/
    .header-logo a {
        display: block;
        height: 60px;
    }
        /* img logo */
        .header-logo a .img-responsive {
            display: block;
            width: auto;
            max-height: 100%;
        }

    .header-logo .uatp_logo_sm {
        margin-top: 20px;
    }

div.divider h2, div.divider h2 small {
    color: #fff;
}

legend .glyphicon {
    margin-right: 5px;
}

/*  DEFAULTS  if branding isn't activated for Issuer*/
body {
    background-color: #fff;
}

div.divider, div.divider2, footer {
    background-color: #606060;
}

/*------------------UATP  STYLES moved to branding A96-----------------------------  */

/********************************************************   IMAGES    *******************************************  */

/* for basic layout pages without the nav menu */
img.issuer-uatp-basic {
    width: 150px;
}

img.uatp_logo_sm {
    float: right;
    width: 100px;
    height: 37px;
    vertical-align: baseline;
}

/*  logos  background: url('/Content/uatp/images/uatp-logo150x56.png');  */
img.issuer-uatp {
    /* padding-left: 150px;  Equal to width of new image */
    margin-bottom: -50px;
    width: 150px; /* Width of new image */
    max-height: 60px; /*  Height of new image */
}

img.uatp-responsive {
    margin-top: 50px;
    margin-bottom: -50px;
    width: 100px;
}

img.menu-responsive {
    width: 25px;
}

/* The colored divider with Page title on it   background-color: #012e1a;   */
body#uatp div.divider, div.divider2, div.divider-uatp, div.divider2-uatp {
    margin-top: 0px;
    margin-bottom: 20px;
}

    body#uatp div.divider h2, div.divider2 h2 {
        color: #fff;
        margin-top: 5px;
        margin-bottom: 5px;
        min-height: 33px; /* for the pages without text in the title*/
    }

html, body:not(.sign-in) {
    height: 100%;
}
/* 
 Bootstrap handles this once reset.css is removed
	div.divider h2, div.divider-uatp h2 {   
	margin-bottom: 10px;
	font-size: 30px;
}*/


/**************************************  User Greeting */
div.User {
    text-align: right;
}

/**************************************** ALERT MESSAGE    ****/

.alert.uatp {
    background-color: #5f5f5f;
    color: #fff;
}

.alert.msg {
    background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #e8e8e8 100%);
    background-image: -o-linear-gradient(top, #e8e8e8 0%, #e8e8e8 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#e8e8e8));
    background-image: linear-gradient(to bottom, #e8e8e8 0%, #e8e8e8 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#e8e8e8', GradientType=0);
    border-color: #DBDBDB;
    padding: 5px;
}

/****   NAV MENU    ****/
#nav-home div.menu {
    float: right;
}

#NavMenu a {
    text-decoration: none;
}

/* 1ST LEVEL  Grey text on white bg
	HighlightPath is disabled in TopMenu, if enabled CSS may need to deal with :not(.k-state-highlight) */
#NavMenu.k-header.k-menu > .k-state-default:not(.k-state-active):not(.k-state-highlight) {
    background-color: #fff;
}
/*#NavMenu.k-header.k-menu > .k-state-default > .k-link:not(.k-state-active):not(.k-state-highlight):not(.k-state-selected) {
	color: #606060;   
}*/
/* 1st Level item reverses color with dropdown activated = White text on Dark Grey bg */
#NavMenu > li .k-state-border-down {
    color: #fff;
    background-color: #606060;
}

/*  1st LEVEL  remove border  */
#NavMenu.k-widget.k-menu {
    border: 0 none;
    margin: 0px;
}
/*    remove right item border from top level nav menu   */
#NavMenu.k-widget.k-menu-horizontal > li.k-item,
#NavMenu.k-menu .k-item {
    border-right: 0 none;
}
/*remove dropdown icon from 1st level top nav menu*/
#NavMenu.k-header span.k-icon.k-i-arrow-s {
    background-image: none;
}

/*  Dropdown grey border to show around white bg  */
#NavMenu .k-menu-group.k-group.k-popup {
    border-color: #606060;
    margin: 0px;
}

/*  Remove kendo dropdown icon image & replace with glyphicon and change color*/
#NavMenu span.k-icon.k-i-arrow-e {
    background-image: none; /* removing url("https://kendo.cdn.telerik.com/2015.3.1111/styles/Bootstrap/sprite.png");  */
    font-family: "Glyphicons Halflings";
    font-size: inherit;
    overflow: visible;
    line-height: inherit;
}

#NavMenu .k-i-arrow-e::before { /* remove box */
    content: " ";
}

#NavMenu span.k-icon.k-i-arrow-e::after {
    content: "\e250"; /* halflings triangle-right  */
}

/*   NAVMENU DROPDOWN        ***/

/* turn off the Kendo k-state-disabled opacity (greyed out) over the white seperator line*/
#NavMenu .k-item.k-state-disabled {
    opacity: 1.0;
}
/* defaults for selected  */
#NavMenu .k-state-selected,
#NavMenu .k-state-border-left,
#NavMenu .k-state-border-right {
    color: #fff;
    background-color: #606060;
}
/* the dropdown containers default */
#NavMenu .k-menu .k-popup,
#NavMenu.k-menu .k-popup {
    color: #fff;
}

#NavMenu.k-menu .k-group .k-item.k-state-default {
    background-color: #606060;
}

/* links in dropdown that are not selected are white text :not(.k-state-selected)*/
#NavMenu .k-group .k-link:link,
#NavMenu .k-group .k-link:visited {
    color: #fff;
}

/* links in dropdown that are active or selected are grey text on white*/
#NavMenu .k-group .k-link.k-state-selected:link,
#NavMenu .k-group .k-link.k-state-active:link,
#NavMenu .k-group .k-link.k-state-active {
    color: #606060;
    background-color: #fff;
}

/*  remove gap between dropdown and popup */
#NavMenu.k-menu .k-animation-container .k-menu-group {
    margin: 0px;
}

#NavMenu .k-group li.k-state-disabled .k-link,
#NavMenu .k-group .k-separator {
    color: #fff;
}

/*  active and selected states  */
#NavMenu .k-menu .k-group .k-state-active,
#NavMenu .k-menu .k-group .k-state-selected,
#NavMenu .k-menu .k-group .k-state-selected .k-icon {
    background-color: #fff;
}

#NavMenu .k-group .k-state-selected > a.k-link.k-state-selected:link {
    color: #606060;
}

#NavMenu .k-menu .k-item > .k-state-border-right,
#NavMenu .k-menu .k-item > .k-state-border-left {
    background-color: #fff;
}

/* Hover = Grey text on white bg */
#NavMenu .k-group .k-state-default.k-state-hover:hover > .k-link {
    color: #606060;
    background-color: #fff;
    text-decoration: none;
}

#NavMenu ul.k-group .k-link:hover,
#NavMenu .k-group .k-state-active .k-link,
#NavMenu .k-state-selected > .k-link {
    color: #606060;
    text-decoration: none;
}

/*   ~ 471 is working instead
	#NavMenu .k-state-selected:link {
	background-color: #fff;
	color: #606060;
}*/
#NavMenu .k-menu .k-item.k-state-selected.k-state-default > .k-link {
    background-color: #fff;
    color: #606060;
}

/*   Remove Kendo green from dropdown  (also set .HighlightPath(false) in TopMenu)  */
#NavMenu .k-state-border-right .k-state-border-right:link,
#NavMenu .k-state-border-left .k-state-border-left:link {
    background-color: #fff;
}

ul#NavMenu .k-menu .k-item > .k-state-border-left,
ul#NavMenu .k-menu .k-item > .k-state-border-right,
ul#NavMenu .k-menu .k-item > .k-state-border-left {
    background-color: #fff;
}

/*  */
#NavMenu .k-group .k-link.k-state-active.k-state-selected {
    color: #606060;
    background-color: #fff;
}

/*END OF DROPDOWN*/

img.calendar {
    cursor: pointer;
    margin-left: -27px;
    width: 27px;
}

div.page-container {
    background-color: #fff;
    border-radius: 10px;
    /*padding-top:1%;
	padding-bottom:1%;*/
}

/* *******************************************************  FORMS   ***************************************************** */
/*  just use bootstrap Panels to layout?    
div.inputs-container {
	background-color: #f00;
	border-radius: 10px;	
}*/

form label {
    font-weight: 400;
}

#tabstrip .form-group label, #r-ts .form-group label {
    font-weight: 400; /*  normal, not bold */
    margin-bottom: 0;
}

#tabstrip .form-group label {
    /* padding-top: 0;  use form-control instead and won't need this..   To DO narrow this to only those tabstrips that aren't using panels  */
    text-align: right;
}
/*#tabstrip label {   not on IssuerAdminProfile
	margin-top:5px;
}*/

.currency {
    text-align: right;
    padding-right: 15px;
}

/* Add red * after label for required form fields */
.required:after {
    content: " *";
    color: #a94442;
}

/* it's applying to 'input' buttons on  all forms. So buttons end up on right side of form. let bootstrap do this.*/
div.inputs-container form {
    padding: 10% 0 10% 0;
    text-align: right; /*  want labels on left when screen < ~768   */
}

/* Move Save or submit buttons to the right on forms    .panel-body .panel-footer  BUT NOR ON k-window  */
.form-group a.btn.right[role="button"],
a.btn.right[role="button"] {
    float: right;
    margin-left: 10px;
    margin-right: 10px;
}

.btn-space {
    margin-left: 10px;
}

.btn-space-2 {
    margin-left: 25px;
}

.k-widget.k-window .k-window-content.k-content a.btn[role="button"] {
    margin-left: 0px;
    margin-right: 0px;
}

/*  style those input elements (input, a) to look like buttons  uatp green 
div.inputs-container form input.submit-uatp, a.submit-uatp {
	background-color: #63bc5d;   
	border:none;
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}*/

button.submit {
    background-color: #63bc5d;
    border: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    color: #fff;
    font-size: 26px;
    width: 80%;
    margin: auto;
    padding: 50px 0px;
    margin-top: 17%;
}

button.export {
    background-color: #63bc5d;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    width: 20%;
    margin: auto;
    padding: 20px 0px;
    margin-top: 15px;
    margin-left: 15px;
}

h3.drag {
    background-color: #5f5f5f;
    color: #fff;
    padding: 15px 0 15px 15px;
}

/***********************    GRID   *********************************/

/* KENDO GRID div.k-grid-custom-horizontal-scroller  Narrow to only wide results grids, not smaller grids inside panels AdminIssuer/IssuerAdminProfile */

.grid-wide .k-grid-header:not(.k-popup) {
    font-size: 10px;
}

.grid-wide div.k-grid-custom-horizontal-scroller tbody {
    font-size: 12px;
}

/*  disabled style is greyed out.  Note: There is universel class ".is-disabled" into pages.css stylesheet which is important too! */
.export.disable {
    opacity: .5;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* it's squishing tooltips against submit buttons on forms
	span.k-tooltip-validation {   
	position: absolute;
}*/

.k-grid-template-column-row {
    display: block;
    clear: both;
    min-width: 80px;
}

tr .k-grid-template-column-row {
    padding: 0px 2px 0px 2px;
}

    tr .k-grid-template-column-row.alternate {
        background-color: #f2f2f2;
    }

tr.k-alt .k-grid-template-column-row.alternate {
    background-color: #ffffff;
}

/*.k-grid .k-grid-header .groupable-column {
	background-image: url(../../Content/uatp/images/group_icon/group_16x16.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}*/

/***************************************************************** Kendo GRID HEADER  *************************** */
/* Style kendo grid header columns */
.k-grid .k-grid-header .k-header .k-link {
    height: auto;
    overflow: visible !important;
    white-space: normal !important;
}
/* Kendo grid custom horizontal scroller */
div.k-grid-custom-horizontal-scroller {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/*  k-grid results header 
div.k-grid-custom-horizontal-scroller  on Issuer Lists, table role = treegrid on TransSearch */

.k-grid-header tr th.k-header,
.k-grid-header tr th.k-header .k-link,
.k-grouping-header {
    background-color: #5f5f5f; /* dark grey */
    color: #fff;
    font-family: OpenSansSemiBold;
}

#uatp .k-grouping-header {
    border-bottom: 5px;
    border-bottom-color: #f5f5f5; /* almost white */
    border-bottom-style: solid;
}
    /*  grid results - drag drop field to filter by */
    #uatp .k-grouping-header .k-group-indicator,
    .k-grouping-header .k-group-indicator .k-link {
        background-color: #fff;
    }

/*  Remove kendo dropdown icon image & replace with glyphicon and change color*/
.k-grid .k-grid-filter .k-icon.k-filter {
    /*background-image: none;*/
    font-family: "Glyphicons Halflings";
    font-size: inherit;
    overflow: visible;
    line-height: inherit;
}
/* remove box */
div.k-grid-custom-horizontal-scroller .k-grid-filter .k-filter::before {
    content: " ";
}

div.k-grid-custom-horizontal-scroller .k-grid-header tr th.k-header a {
    color: #fff;
}
/* add glyphicons-filter   */
div.k-grid-custom-horizontal-scroller .k-grid-filter span.k-icon.k-filter::after {
    content: "\e138";
}

/* prevent table from overflowing it's containing div*/
div#GridTransactionResults.k-widget.k-grid {
    float: left;
}

.k-grid .k-state-active .k-loading {
    background-color: #fff;
    background-image: none;
    border-color: #012e1a !important;
}
/*
#uatp .k-loading-image {
background-position: top center;
background-repeat: no-repeat;
}
.uatp .k-loading-text {
text-align: left;
}*/

.k-loading-image {
    background-image: url("/Content/uatp/images/loading_progress_bar.gif");
}

/*******************************************************   TABLES   *************/
/* regular text on the rich text editor icons */
body#uatp .k-editor-toolbar {
    font-family: OpenSansRegular;
}

div.table-container {
    width: 100%;
    overflow-x: scroll;
}

table {
    margin-bottom: 10px;
}

tr#table-header {
    background-color: #5f5f5f;
    color: #fff;
    font-family: OpenSansSemiBold;
}

td {
    border: 1px solid #8e8e8e;
    vertical-align: middle;
    text-align: center;
}
/*   narrow to ??   not in k-editor-toolbar  */
/*table:not(.k-editor) td span {
    font-size: 8px;
    vertical-align: middle;
}*/

tbody tr:nth-child(even) {
    background-color: #eeeeee;
}
/*  narrow to tbody, or it's styling the headers as well*/
tbody tr:nth-child(odd) {
    background-color: #fff;
}

.table-nav {
    margin-bottom: 25px;
}

    .table-nav img {
        cursor: pointer;
    }

        .table-nav img:hover {
            opacity: 0.8;
            filter: alpha(opacity=80);
        }

/*  FOOTER  */
footer {
    height: 70px;
    text-align: center;
}

    footer ul.footer li {
        color: #fff;
        margin-top: 25px;
    }

        /*footer ul.footer li:hover a {
	background-color: transparent;
	color: #fff;
}*/

        footer ul.footer li a {
            color: #fff;
            padding: 10px;
        }

/*  User Tree View page*/
/*.users-tree-section {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	text-align: left;
	margin: 0 2em;
}*/

.users-tree-section ul.list-group {
    margin-bottom: 0px;
}

.users-tree-section .list-group-item {
    padding-top: 0;
    padding-bottom: 0;
}

.list-group-horizontal .list-group-item {
    display: inline-block;
}

.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left: -4px;
    margin-right: 0;
}

    .list-group-horizontal .list-group-item:first-child {
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
    }

    .list-group-horizontal .list-group-item:last-child {
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0;
    }

/*-----------------------MEDIA QUERY-----------------------*/

/* Medium devices Landscape tablets and medium desktops */
@media (min-width:992px) and (max-width:1199px) {
}
/** end MEDIUM to LARGE   */


/*** MEDIUM   */
@media (max-width: 768px ) {
    div.inputs-container p {
        padding-right: 30%;
    }

    div.table-container {
        width: 100%;
        overflow-x: scroll;
    }

    table {
        width: 250%;
    }

    .login-wrapper {
        position: relative;
        margin-left: 8.33%;
        margin-top: 5%;
        top: 0;
        left: 0;
    }
    /*  only targets Firefox (Gecko), add URL 
	@-moz-document url-prefix() {
	   div.inputs-container {margin-top: 50px; }
	}*/

    ul.submenu {
        position: relative;
        display: none;
        background-color: #fff;
        color: #000;
        text-align: right;
        padding: 5px;
        margin-right: 30px;
        width: 200px;
        z-index: 100;
    }

        ul.submenu li {
            cursor: pointer;
        }

            ul.submenu li a {
                color: #5f5f5f;
                font-style: italic;
            }

            ul.submenu li:hover {
                background-color: #ffffff;
            }

                ul.submenu li:hover a {
                    color: #606060;
                    background-color: #ffffff;
                }

    li.menu-dropdown:hover {
        background-color: transparent;
    }

        li.menu-dropdown:hover a {
            color: #5f5f5f;
        }

        li.menu-dropdown:hover ul.submenu {
            display: none;
        }

    button.submit {
        margin-top: 12%;
    }

    div.divider h2, div.divider-uatp h2 {
        padding-left: 25px;
    }

    div.divider2 h2, div.divider2-uatp h2 {
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 10px 0 10px 25px;
    }
}
/** end MEDIUM   */


/* centered columns styles */
.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}

.layout-body {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -70px;
}

.layout-footer, .layout-push {
    height: 70px;
    margin-top: 20px; /* JK  add space between footer & content (tabstrip panels are resting on footer) */
}

.clean-buttons {
    margin: 2px;
}

.show-pointer {
    cursor: pointer;
}

div[id^='tabStrip_'], div[id*=' tabStrip_'] ul {
    text-align: left;
}

/* SMALL devices Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/** end  SMALL   */



/*** EXTRA SMALL   */
@media (max-width: 544px) {
    div.inputs-container p {
        padding-right: 0;
    }

    form label {
        text-align: left;
    }

    .btn-space {
        margin-left: 0px;
    }
}
/** end EXTRA SMALL   */

.expire-password-notification-container {
    width: 100vw;
    height: 55px;
    overflow: hidden;
    position: fixed;
    top: 20px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.expire-password-notification {
    display: block;
    position: absolute;
    font-size: 15px;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    transition: all 600ms ease-out 0s;
    word-wrap: break-word;
    max-width: 90%;
    pointer-events: all;
}