/*************************************************************************************

RESET

**************************************************************************************/


/* Generic CSS Reset */

/* 1) Better box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2) Remove default margin/padding */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre,
dl, dd,
ol, ul,
figure,
hr {
    margin: 0;
    padding: 0;
}

/* 3) Base body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

/* 4) Lists without bullets by default (optional - remove if you want default bullets) */
ol, ul {
    list-style: none;
}

/* 5) Media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 6) Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* 7) Buttons: consistent cursor */
button,
[type="button"],
[type="submit"] {
    cursor: pointer;
}

/* 8) Links */
a {
    color: inherit;
    text-decoration: none;
}
a:hover,
a:focus-visible {
    text-decoration: underline;
}

/* 9) Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 10) Prevent text overflow issues */
p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 11) Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.clearleft {
    clear:left;
}





/*************************************************************************************

BASE

**************************************************************************************/

html,
body {
    height: 100%;
    /* font-family: 'Inter var', 'Inter', arial, sans-serif; */
    font-family: arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.5;
    background:#eee;
}

.meru-style {
    display: flex !important;
}

/* main content wrapper grows */
#innerwrapper {
    flex: 1 0 auto;
}

/* footer stays at bottom when content is short */
.global-nav-footer {
    flex-shrink: 0;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}

h1 {
    font-size: 1.4rem;      /* 32px */
}

h2 {
    font-size: 1.3rem;    /* 24px */
}

h3 {
    font-size: 1.2rem;   /* 20px */
}

h4 {
    font-size: 1.125rem;  /* 18px */
}

h5 {
    font-size: 1rem;      /* 16px */
}

h6 {
    font-size: 0.875rem;  /* 14px */
}

.left {float:left;}
.right {float: right;}
.hundred {width:100%;}
.fifty {width:calc(50% - 10px);}
.marginbottom10px {margin-bottom:10px;}

@media (max-width: 768px){

.fifty {width:100%;}

}



/*************************************************************************************

GLOBAL HEADER

**************************************************************************************/

.global-nav-header {
	position: relative;
	width: 100%;
	height: 60px;
	color: #ffffff;
	z-index: 25; /* Refactor and Bring all z-index's down */
	font-size: 12px;
	padding: 0 20px;
	background: linear-gradient(
		61deg,
		#090e2c 0%,
		#122c69 59%,
		#078db3 100%
	);
	margin-bottom:20px;
}

.global-nav-logo {
    display: block;
    position: relative;
    width: 120px;
    height: 60px;
    z-index: 1;
    margin: 0 12px 0 0;
    background-image: url('opentext_logo.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    font-size: 0;
    color: transparent;
}

.global-nav-logo a {
    display: block;
    height: 100%;
    width: 100%;
}

#ce {
    float: left;
    display: inline-block;
    position: relative;
    color: #fff;
    border-left: 1px solid #fff;
    height: 17px;
    line-height: 19px;
    top: 20px;
    padding-left: 12px;
    font-size: 21px;

    @media(max-width: 992px) {
        display:none;
    }

    em {
        font-size:15px;
        font-style:normal;
    }

}

/* HIDE CE HEADER FROM ALL OUTSIDE PAGES */
#page_forgotpassword #ce,
#page_unsubscribe #ce,
#page_logoff #ce,
#page_regconfirm #ce,
#page_register #ce,
#page_registration #ce,
#page_registrationapi #ce,
#page_registrationtrial #ce,
#page_resetpassword #ce,
#page_sso #ce,
#page_login #ce {
    display:none;
}

.nav-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 2;
    padding: 0 20px;

    .nav-is-open-xs &{
        height: 100%;
    }

    .line{
        display: block;
        width: 25px;
        height: 2px;
        background: #ffffff;
        position: relative;
        -webkit-transition:  all 200ms;
        transition: all 200ms;

        &:nth-child(1){
            top: 18px;
        }
        &:nth-child(2){
            top: 27px;
        }
        &:nth-child(3){
            top: 36px;

            .nav-is-open-xs & {
                transform: translateY(-9px) rotate(-45deg);
            }
        }

        .nav-is-open-xs &:nth-child(1) {
            top: 25px;
            transform: translateY(5px) rotate(45deg);
        }

        .nav-is-open-xs &:nth-child(2) {
            display:none;
        }

    }

}


/* HEADER DROPDOWN */
.header-dropdown {
    transition: opacity 0.3s,
    top 0.3s;
    right: -6px;
    top: 40px;
    border-radius: 4px;
    overflow:hidden;
    float:right;
    position:absolute;
    border: 1px solid #c7c7c7;
    z-index:-1;
    margin:0;
    padding:0;
    pointer-events:none;
    background-color: #fff;

    li {
        a {
            text-align: left;
            display:block;
            white-space:nowrap;
            text-decoration:none;
            color: #1F272F;
            line-height: normal;
            position:relative;
            padding: 10px;
            &:before{
                display: none;
            }
        }
    }

    .header-console & {
        li + .header-console-change {
            border-top: 1px solid #c7c7c7;
        }
    }

    .header-console.has-consoles & {
        
        width: 227px;
        @media(min-width: 768px) {
            width: auto;
            max-width: 491px;
        }

        li + .header-console-change {
            border-top: 0;
            @media(min-width: 768px){
                border-top: 1px solid #c7c7c7;
            }
        }

        .header-console-change {
            border-radius: 4px;
            @media(min-width: 768px){
                border-radius: 0 0 4px 4px;
            }

            .header-console-container{
                overflow-x: hidden;
                overflow-y: auto;
                border-radius: 5px;
                max-height: 460px;

                .is-expired &{
                    max-height: 420px;
                    @media(min-width: 768px){
                        max-height: calc(100vh - 188px);
                    }
                }

                @media(min-width: 768px){
                    border-radius: 0;
                    max-height: calc(100vh - 157px);
                }

                & > li:first-of-type,& > li:first-of-type > a{
                    border-radius: 5px 5px 0 0;
                    @media(min-width: 768px){
                        border-radius: 0;
                    }
                }

                li{

                    &.header-console-group-header {
                        background-color: #dddddd;
                        border-bottom: 1px solid #c7c7c7;
                        height: 40px;
                        line-height: 40px;
                        text-align: left;
                        text-indent: 0;
                        font-weight: 500;
                        color: rgba(#1F272F,0.64);
                        cursor: auto;
                        padding: 0 10px;

                        &.is-gsm,&.is-uber{
                            color: white;
                        }

                        &.is-gsm{
                            background-color: #005799;
                            border-color: #005799;
                        }
                        &.is-uber{
                            background-color: #408740;
                            border-color: #408740;
                        }
                    }

                    &:last-of-type{
                        &,a{
                            border-bottom: 0;
                            border-radius: 0 0 5px 5px;
                        }
                    }

                    a {
                        padding: 8px 50px 8px 10px;
                        border-radius: 0;
                        border-bottom: 1px solid #c7c7c7;
                        &:hover {
                            background:rgba(0,0,0,.1);
                        }
                    }

                    &.is-gsm a,&.is-uber a{
                        &:after{
                            position: absolute;
                            right: 0;
                            margin: 0 10px;
                            font-size: 10px;
                            top: -1px;
                        }

                        &:hover,&:focus{
                            &:after{
                                color: #96bf36;
                            }
                        }
                    }

                    &.is-gsm a{
                        &:after{
                            color: #005799;
                        }
                    }

                    &.is-uber a{
                        &:after{
                            color: #799c2f;
                        }
                    }

                }

                a,.header-console-group-header {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    .browser-is-firefox &{
                        text-overflow: clip;
                    }
                }

            }

        }

    }

}

/* END .header-dropdown */


/* HEADER DROPDOWNS */
.has-dropdown{
    cursor: pointer;
    position: relative;
}

/* HEADER DROPDOWN - CLICKED */
.clicked{

    li a:hover{
        background-color: #f2f6f9;
    }

    .header-dropdown{
        @include opacity(1);
        z-index: 101;
        pointer-events: auto;
    }

}

.header-account{
    display:none;
}

.header-account-item {
    height:60px;
    line-height:60px;
    float:left;    
}

.header-account-help {
    span {
        padding:0 20px;
        font-size:20px;
        margin-bottom:-4px;
        position: relative;
    }
}

.header-account-email {
    margin-left:10px;
}

.dropdown-link {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dropdown-link::after {
    content: "";
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.2s ease;
}

.dropdown-link.open::after {
    transform: rotate(180deg);
}




@media (min-width: 768px){

	.global-nav-header{
		text-align: right;
		height: 60px;
		line-height: 60px;
		box-shadow: none;
		z-index: 3;

		.global-nav-logo{
			float: left;
		}

	}

	.hidden-md, .global-nav-header .nav-toggle{
		display: none;
	}

	.header-console,.header-account,.header-account-help,.header-account-notifications,.header-account-user{
		display: inline-block;
		/* line-height: 60px; */
	}

    .header-account{
		text-align: left;
        float: right;
		padding: 0;
	}



}


/* Make dropdown width follow content, but cap it so long items don't explode */
.has-dropdown > .header-dropdown {
    /* override earlier rules that conflict */
    left: auto;
    right: -6px;              /* keep your existing alignment */
    top: 40px;                /* keep your existing alignment */
    float: none;              /* just in case */
    z-index: 101;             /* override your earlier z-index:-1 when shown */

    /* sizing */
    width: max-content;       /* shrink to content */
    max-width: min(90vw, 360px); /* cap so "too long" doesn't run off screen */

    /* keep your existing look */
    padding: 0;
    margin: 0;
    list-style: none;

    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* show on hover (and keyboard) */
.has-dropdown:hover > .header-dropdown,
.has-dropdown:focus-within > .header-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* rows */
.has-dropdown > .header-dropdown > li {
    margin: 0;
    padding: 0;
}

/* anchors: dynamic, but don't overflow - truncate long labels */
.has-dropdown > .header-dropdown > li > a {
    display: block;
    padding: 10px 12px;
    background:#eee;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    max-width: 100%;

    &:hover {
        background:#fff;
    }

}



/*************************************************************************************

GLOBAL LEFT NAV (MOBILE / SMALL SCREEN)

**************************************************************************************/

.global-nav-left {
    background-color: #121736;
    font-size: 12px;
}

/* #page_gsm special hides */
#page_gsm .global-nav-left .nav-header:nth-of-type(1),
#page_gsm .global-nav-left .nav-header:nth-of-type(2),
#page_gsm .global-nav-left .nav-header:nth-of-type(3),
#page_gsm .global-nav-left .ion:not(.ion-ios-arrow-down) {
    display: none;
}

/* h2 inside left nav */
.global-nav-left h2 {
    font-size: 12px;
    margin: 0;
    padding: 12px 20px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.4);
    float: left;
    width: 100%;
    display: inline-block;
    text-transform: uppercase;
}

/* list items (excluding header-dropdown) */
.global-nav-left ul:not(.header-dropdown) > li {
    text-align: left;
    height: auto;
    float: left;
    width: 100%;
    display: inline-block;
}

.global-nav-left ul:not(.header-dropdown) > li.hidden {
    display: none;
}

.global-nav-left ul:not(.header-dropdown) > li::before {
    display: none;
}

/* links in list items (excluding .button) */
.global-nav-left ul:not(.header-dropdown) > li a:not(.button) {
    position: relative;
    text-decoration: none;
    display: inline-block;
    padding: 12px 20px;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
}

.global-nav-left ul:not(.header-dropdown) > li a:not(.button)::before {
    display: none;
}

@media (max-width: 767px) {
    .global-nav-left ul:not(.header-dropdown) > li a:not(.button):hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

/* console row */
.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console {
    background: rgba(0, 0, 0, 0.3);
    padding: 0 20px 0 0;
    height: 64px;
    line-height: 64px;
}

/* console button */
.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console .button {
    float: right;
    position: relative;
    margin-bottom: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 32px;
    width: 32px;
    margin-left: 8px;
    border-color: #000;
    color: #ffffff; /* matches header text color usage */
    background: rgba(255, 255, 255, 0.8);
}

.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console .button:hover {
    background: #fff;
}

.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console .button b {
    display: inline-block !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', Arial, sans-serif; /* best-effort */
    position: absolute;
    font-weight: 900;
}

.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console .button b::after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', Arial, sans-serif;
    display: block;
}

.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console .button.icon_edit b::after {
    content: "\f044";
}

/* console name */
.global-nav-left ul:not(.header-dropdown) > li.global-nav-left-console .header-console-name {
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 20px;
    max-width: calc(100% - (20px * 2) - 90px);
}

/* selected state (mixin replacement approximation) */
@media (min-width: 768px) {
    .global-nav-left ul:not(.header-dropdown) > li.nav-is-selected a:not(.button),
    .global-nav-left ul:not(.header-dropdown) > li.nav-is-selected a:not(.button):hover {
        background-color: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
    }
}

/* XS layout */
@media (max-width: 767px) {

    .global-nav-left {
        left: -100%;
        top: 60px;
        background: linear-gradient(
            61deg,
            #090e2c 0%,
            #122c69 59%,
            #078db3 100%
        );
        -webkit-transition: left 0.5s ease 0s, width 0.5s ease 0s;
        transition: left 0.5s ease 0s, width 0.5s ease 0s;
        color: #fff;
        position: absolute;
        z-index: 2;
        height: calc(100vh - 60px);
        width: calc(100% - 60px);
    }

    /* remove animation on resize */
    .is-resizing .global-nav-left {
        -webkit-transition: none;
        transition: none;
    }

    /* nav open */
    .nav-is-open-xs .global-nav-left {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        left: 0;
    }

    /* nav open w/ consoles showing */
    .nav-is-open-xs.show-consoles .global-nav-left {
        overflow: hidden;
        -webkit-overflow-scrolling: auto;
    }

    .nav-is-open-xs.show-consoles .global-nav-left h2,
    .nav-is-open-xs.show-consoles .global-nav-left li:not(.global-nav-left-console),
    .nav-is-open-xs.show-consoles .global-nav-left .header-console-name,
    .nav-is-open-xs.show-consoles .global-nav-left .renameconsole {
        opacity: 0.24;
    }

    /* expired */
    .is-expired .global-nav-left {
        top: 51px;
        min-height: calc(100% - 41px);
    }
}

/* Desktop layout */
@media (min-width: 768px) {
    .global-nav-left {
        top: 0;
        left: 0;
        position: relative;
        margin: -20px 0 20px;
        width: 100%;
        float: left;
    }

    .global-nav-left .global-nav-left-container {
        float: left;
        width: 100%;
    }

    .global-nav-left .global-nav-left-container h2,
    .global-nav-left .global-nav-left-container .header-logout,
    .global-nav-left .global-nav-left-container .header-account-settings {
        display: none;
    }

    .global-nav-left .global-nav-left-overflow {
        padding-left: 20px;
        line-height: 40px;
        font-weight: 500;
    }

    /* from SCSS: hide overflow section under sm-max (redundant here since min-width 768) */
    /* kept only if you later move this block */
    /*
    @media (max-width: 767px) {
        .global-nav-left .global-nav-left-overflow { display: none; }
    }
    */

    .global-nav-left .global-nav-left-overflow li a:hover {
        background-color: rgba(255, 255, 255, 0.05); /* best match to your theme */
        color: #96bf36; /* matches your existing green highlight usage */
    }

    .global-nav-left ul:not(.header-dropdown) > li {
        width: auto;
        display: inline-block;
        font-size: 12px;
        text-align: left;
        float: none;
    }

    .global-nav-left ul:not(.header-dropdown) > li a {
        padding: 0 20px;
        font-weight: 600;
        color: #fff;
        display: inline-block;
        width: auto;
        xline-height: 40px;
    }

    .global-nav-left ul:not(.header-dropdown) > li a:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .global-nav-left ul.nav-group-webroot {
        display: none;
    }
}

.global-nav-toggle {
    display: none;
}

/* SMALL SCREEN - STACK NAV VERTICALLY */
#page_home .global-nav-left ul,
#page_account .global-nav-left ul {
    float:none;
}

/* ONLY SHOW THE HORIZONTAL NAV ON CERTAIN PAGES */
@media (min-width: 768px) {

    .global-nav-left, .nav-toggle {display: none;}

    #page_home .global-nav-left,
    #page_account .global-nav-left {
        display: block;
    }

    #page_home .global-nav-left ul,
    #page_account .global-nav-left ul {
        float:left;
    }

}

body.nav-is-open-xs {
    overflow: hidden;
}



/*************************************************************************************

FOOTER

**************************************************************************************/


.global-nav-footer {
    display: none;
    width: 100%;
    z-index: 1;
    font-size: 12px;
    padding:10px 0;
}

.global-nav-footer p {
    margin: 0;
    text-align: center;
    line-height: 30px;
    font-size: 10px;
    color: #888;
}

.global-nav-footer a {
    color: #555;
}

.global-nav-footer p a:first-of-type {
    margin-left: 10px;
}

.global-nav-footer p a:not(:last-of-type) {
    margin-right: 10px;
}

@media (min-width: 768px) {
    .global-nav-footer {
        display: block;
    }
}


/*************************************************************************************

CONTENT

**************************************************************************************/


#innerwrapper {
    z-index: 1;
    float: left;
    -webkit-transition: left 0.5s ease 0s, width 0.5s ease 0s;
    transition: left 0.5s ease 0s, width 0.5s ease 0s;
    width: 100%;
}

@media (max-width: 767px) {
    /* .nav-is-open-xs & */
    .nav-is-open-xs #innerwrapper {
        opacity: 0.64;
        pointer-events: none;
    }

    /* .nav-is-open-xs.is-expired & */
    .nav-is-open-xs.is-expired #innerwrapper {
        padding: 112px 0 0 0;
    }

    /* .is-resizing & */
    .is-resizing #innerwrapper {
        -webkit-transition: none;
        transition: none;
    }
}

@media (min-width: 768px) {
    #innerwrapper {
        border-left: 0;
        -webkit-transition: none;
        transition: none;
    }
}

#contentarea {margin:0 20px 20px;}


/*************************************************************************************

TABLES

**************************************************************************************/

.tableheader {padding:20px 10px; background:#444; color:#fff; margin:0; font-size:0.77em; border-radius: 4px 4px 0 0; text-transform: uppercase;}
    .blue .tableheader {background:#005799;}
    .green .tableheader {background:#408740;}

.wrjs_table {width:100%; border-collapse: collapse; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.05);}

    .wrjs_table.fixed {table-layout: fixed;}
    
    .wrjs_table th,
    .wrjs_table td {text-align: left; padding:6px 10px; border:1px solid #ddd; font-size:0.77em; overflow: hidden; text-overflow: ellipsis;}

    .wrjs_table th {background:#ddd; color:#555; padding:8px 10px; text-transform: uppercase; font-weight:700; border-color:#ccc;}
    .wrjs_table td {}

    .wrjs_table td a {color:#00a7e1;}
    .wrjs_table em.light {color:#999;}

    .wrjs_table td .button {margin:0;}



/* =========================================================
   WRJS PAGING (SCSS -> vanilla CSS)
   Using prior assumptions:
   - $spacing-unit: 4px
   - $screen-sm-max: 767px
   - $wr-grey-border: #c7c7c7
   - $wr-grey-darkborder: #888
   - $disabled: #ededed
   - $primary: #078db3
   - $wr-icon-font: "Font Awesome 5 Pro"
   - $wr-gutter: 20px
   ========================================================= */

.wrjs_paging {
    display: block;
    float: left;
    clear: both;
    width: 100%;
    position: relative;
    padding: 6px 12px;              /* ($spacing-unit + 2)=6, ($spacing-unit*3)=12 */
    border: 1px solid #ddd;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;      /* $spacing-unit */
    margin-top: -1px;
}

.wrjs_paging ul {
    display: block;
}

@media (max-width: 767px) {
    .wrjs_paging ul {
        width: 230px;
        margin: auto;
    }
    .wrjs_paging ul li:nth-child(5) {
        margin-right: 0;
    }
}

.wrjs_paging ul li {
    float: left;
    font-size: 12px;                 /* $spacing-unit * 3 */
    margin: 0 4px 0 0;               /* $spacing-unit */
    list-style-type: none;
}

.wrjs_paging ul li.right {
    float: right;
}

.wrjs_paging ul li.pageinfo {
    line-height: 24px;
    color:#444;
}

/* Select styles inside pageinfo/pageselect/pagerowselect */
.wrjs_paging ul li.pageinfo select,
.wrjs_paging ul li.pageselect select,
.wrjs_paging ul li.pagerowselect select {
    margin: 0;
    border-radius: 4px;              /* $spacing-unit */
    min-height: 24px;
    padding-left: 8px;
    border-color: #888;
    width: 74px;
    background-color: #fff;
}

.wrjs_paging ul li.pageinfo select:active:not(.disabled),
.wrjs_paging ul li.pageinfo select:focus:not(.disabled),
.wrjs_paging ul li.pageselect select:active:not(.disabled),
.wrjs_paging ul li.pageselect select:focus:not(.disabled),
.wrjs_paging ul li.pagerowselect select:active:not(.disabled),
.wrjs_paging ul li.pagerowselect select:focus:not(.disabled) {
    border-color: #078db3;
}

/* pagerowselect select margin */
.wrjs_paging ul li.pagerowselect select {
    margin: 0 0 0 12px;              /* $spacing-unit * 3 */
}

/* Link buttons */
.wrjs_paging ul li a {
    display: inline-block;
    float: left;
    background-color: #fff;
    border: 1px solid #888;
    line-height: 24px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    width: 33px;
    color: #888;
}

/* hover */
.wrjs_paging ul li a:hover:not(.disabled) {
    border-color: #737373;
    color: #737373;
    text-decoration: none;
}

.wrjs_paging ul li a:hover:not(.disabled):after {
    border-color: #737373;
}

/* selected */
.wrjs_paging ul li a.selected,
.wrjs_paging ul li a.selected:hover,
.wrjs_paging ul li a.pageselected,
.wrjs_paging ul li a.pageselected:hover {
    background-color: #aaa;
    color: #fff;
    border-color: #888;
    cursor: default;
    position: relative;
    z-index: 1;
}

/* icon-only controls */
.wrjs_paging ul li a.pagefirst,
.wrjs_paging ul li a.pagelast,
.wrjs_paging ul li a.pageprev,
.wrjs_paging ul li a.pagenext,
.wrjs_paging ul li a.pagereload {
    font-size: 18px;
    height: 24px;
    border-radius: 4px;
    line-height:20px;
}

/* disabled links */
.wrjs_paging ul li a.disabled,
.wrjs_paging ul li a.disabled:hover {
    cursor: not-allowed;
    background-color: #ededed;
    color: #808080;
    border-color: transparent;
}

/* misc */
.wrjs_paging .pagesizeholder {
    position: relative;
    background: #888;
    border-radius: 5px;
    color: #eee;
    padding: 3px 0 3px 6px;
    margin: 6px 0 0 0;
    box-shadow: 0 0 5px #666 inset;
}

.wrjs_paging .pagesize {
    margin: -3px 0 -3px 5px;
    padding: 1px 5px 1px 1px;
    border-radius: 3px;
    border: 1px solid #777;
}

/* Hide .visible-md within certain contexts at <= 940px */
@media (max-width: 940px) {
    .thirty .wrjs_paging .visible-md,
    .thirtyfive .wrjs_paging .visible-md,
    .forty .wrjs_paging .visible-md,
    .fortyfive .wrjs_paging .visible-md,
    .fortynine .wrjs_paging .visible-md,
    .fifty .wrjs_paging .visible-md {
        display: none;
    }
}

/* module spacing */
.module .wrjs_paging {
    margin-bottom: 20px;             /* $wr-gutter */
}

/* inside grid scroller */
.wrjs_grid .scroller .wrjs_paging {
    border: none;
    border-top: 1px solid #c7c7c7;
    border-radius: 0;
}


    
/*************************************************************************************

LOADER

**************************************************************************************/

.spinner {
    width: auto;
    height: 32px;
    position: relative;
    display:inline-block;
}

.spinner-center {
    position: relative;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner p, .spinner span { float:left; display:inline-block;}

.spinner p {
    line-height:32px; margin-left:10px; color:#555;
}


.spinner span {
    width: 32px;
    height: 32px;
    display: block;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: #078db3;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.js-mask-content {
    background: #fff;
    border-radius: 10px;
    padding: 10px 15px;
    border: 1px solid #bbb;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}


/*************************************************************************************

BUTTONS

**************************************************************************************/
.button {
    outline: none !important;
    position: relative;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #005799;
    border-width: 1px;
    border-style: solid;
    transition: all 0.2s;
    padding: 8px 12px; /* 4*2, 4*3 */
    display: inline-block;
    text-decoration: none;
    border-radius: 4px; /* 4*1 */
    -webkit-appearance: none;
    background: #fff;
    border-color: #005799;
    text-transform: capitalize;
    margin-bottom:15px;
}

.bullets .button {
    margin: 8px 0; /* 4*2 */
}

.button.cancelclick {
    border: 0;
    color: #888;
}

.button.cancelclick:not(.disabled):hover {
    color: #666;
}

.button b {
    display: none;
}

.button * {
    outline: none !important;
}

.button:hover {
    text-decoration: none;
    outline: none !important;
}

.button:active,
.button.pressed {
    outline: none !important;
}

.button + .button {
    margin-left: 12px; /* 4*3 */
}

.tabcontent .button {
    margin-bottom: 16px; /* 4*4 */
}

.tabcontent td .button {
    margin-bottom: 0;
}

.boxfooter .button {
    margin-bottom: 0;
}

/* HELP BUTTON INSIDE BOX H1 OR TABLEHEADER */
#tab_reports_ondemand .box h1 .button,
#grid_accountinfo .tableheader .button {
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: -1px;
    border-radius: 0;
    height: 39px;
    line-height: 40px;
    border-top: 0;
    background-color: transparent;
}

#tab_reports_ondemand .box h1 .button.toggled .blanker,
#grid_accountinfo .tableheader .button.toggled .blanker {
    bottom: 0;
}

.button:not(.disabled):hover {
    border-color: #00457a;
    color: #00457a;
}

.button:active:hover {
    border-color: #00457a;
    color: #00457a;
}

/* WHITE VARIANT */
.button.white,
.button.white:only-child {
    background: #fff;
    border-color: #078db3;
    color: #078db3;
}

.button.white:not(.disabled):hover,
.button.white:only-child:not(.disabled):hover {
    color: #067a9a;
    background: #fff;
}

.button.white:active:hover,
.button.white.pressed,
.button.white:only-child:active:hover,
.button.white:only-child.pressed {
    border-color: #055f76;
    color: #055f76;
}

/* PRIMARY VARIANT */
.button.blue,
.button.green,
.button.darkgreen,
.button:only-child {
    background: #005799;
    border-color: transparent;
    color: #fff;
}

.button.blue:not(.disabled):hover,
.button.green:not(.disabled):hover,
.button.darkgreen:not(.disabled):hover,
.button:only-child:not(.disabled):hover {
    background: #00457a;
    color: #fff;
}

.button.blue:active:hover,
.button.green:active:hover,
.button.darkgreen:active:hover,
.button.blue.pressed,
.button.green.pressed,
.button.darkgreen.pressed,
.button:only-child:active:hover,
.button:only-child.pressed {
    background: #00457a;
    color: #fff;
}

/* RED VARIANT */
.button.red {
    color: #fff;
    background: #a6241d;
    border-color: transparent;
}

.button.red:not(.disabled):hover {
    background: #850000;
    border-color: transparent;
    color: #fff;
}

.button.red:active:hover,
.button.red.pressed {
    background: #530000;
    border-color: transparent;
    color: #fff;
}

/* DISABLED */
.button.disabled,
.button[disabled] {
    background-color: #ededed;
    border-color: transparent;
    color: #808080;
    cursor: not-allowed;
}

.button.disabled:focus,
.button.disabled:active,
.button[disabled]:focus,
.button[disabled]:active {
    background-color: #ededed;
    border-color: transparent;
    color: #808080;
    cursor: not-allowed;
}

.icon_arrow_left::before {
    content: "❮ ";
    font-size:13px;
    margin:0 5px 0 0;
    line-height:0;
    position: relative;
    font-weight:bold;
}

/* ---------------------------------------------------------
   MEDIA QUERIES
--------------------------------------------------------- */

@media (max-width: 767px) {
    .button-container .button:not(:first-child):not(.icon_help) {
        margin-left: -10px;
        border-radius: 0 4px 4px 0;
    }

    .button-container .button.disabled {
        opacity: 1;
        background-color: #ededed;
        color: rgba(85, 85, 85, 0.35);
        border-color: #DBDBDB;
    }

    .button-container .button.disabled > b {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
        filter: alpha(opacity=35);
        opacity: 0.35;
    }

    .left + .button-container,
    .icon_help + .button-container {
        clear: both;
    }
}

@media (max-width: 707px) {
    .button-container + .button-container {
        clear: both;
    }
}

/* ---------------------------------------------------------
   MISC BUTTON MODIFIERS
--------------------------------------------------------- */

.button.loading,
.button.loading:hover,
.button.loading:active {
    outline: none;
    text-indent: 23px;
    background-image: url(~images/loading_16x16.gif);
    background-repeat: no-repeat;
    background-position: 9px center;
}

.button.ultramicro {
    padding: 1px 4px;
    line-height: 13px;
    font-size: 10px;
    font-weight: normal;
    height: auto;
    text-indent: 0;
}

.button.ultramicro b {
    display: none;
}

.wrjs_table td .button.ultramicro {
    position: absolute;
    margin-left: 5px;
    top: 3px;
}

.button.drop {
    padding-right: 21px !important;
}

.moreinfo .button.drop {
    line-height: 15px;
}

.button.hidden,
.hidden {
    display: none;
}

/* dropdown arrow */
.button .buttonarrow {
    width: 6.25px;
    height: 10px;
    display: inline-block;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -4px;
    font-size: 10px;
}

.button.drop.toggled .buttonarrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* ---------------------------------------------------------
   ACTION BUTTON MENU
--------------------------------------------------------- */

.button.action ol {
    background-color: #f2f6f9;
    text-indent: 0;
    overflow: hidden;
    border: 1px solid #c7c7c7;
    border-radius: 0 4px 4px 4px;
    position: absolute;
    left: -1px;
    top: 24px;
}

.button.action ol li {
    padding: 0;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
}

.button.action ol li .ion {
    display: none;
}

.button.action ol li:hover {
    background-color: #c7c7c7;
}

.button.action.actionright ol {
    top: 37px;
    right: -1px;
    left: auto;
    border-radius: 4px 0 4px 4px;
}

.button.action.toggled {
    z-index: 999;
}

.button.action.icononly {
    text-indent: 10px;
}

/* toggled state */
.toggled {
    opacity: 0.99;
    background-color: #f2f6f9 !important;
    border-radius: 5px 5px 0 0;
}

/* actionmenu block */
.actionmenu {
    display: none;
}

.toggled .actionmenu {
    display: block;
}

.actionmenu > h2 {
    background: #5998c4;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 2.2em;
    margin: 0;
    text-indent: 5px;
    text-shadow: none;
}

.actionmenu li a {
    color: #1F272F;
    padding: 10.5px 20px;
    display: block;
    font-weight: normal;
}

.actionmenu li a:before {
    position: relative;
    top: 2px;
    color: #ffffff;
    font-size: 17px;
    margin: 0 10px 0 0; /* $wr-gutter/2 */
}

.actionmenu li a:hover {
    text-decoration: none;
}

/* ---------------------------------------------------------
   ICON BUTTON
--------------------------------------------------------- */

.iconbutton {
    float: left;
    background: #eee;
    border: 1px solid #d7d7d7;
    display: inline-block;
    border-radius: 3px;
    padding: 2px;
    position: relative;
    height: 28px;
    width: 28px;
    overflow: hidden;
    text-indent: -999em;
}

.iconbutton:hover {
    background: #f5f5f5;
}

.wrjs_table td .iconbutton {
    margin: -4px 4px -14px 0;
    top: -6px;
    left: -12px;
}

.iconbutton:before,
.iconbutton:after {
    display: none;
}




/*************************************************************************************

BOX

**************************************************************************************/

.masthead h1 {margin-bottom:15px;}
.masthead h1 em {display:none;}

.box {
    background: #fff;
    border: 1px solid #c7c7c7;
    border-radius: 4px;          /* 4px * 1 */
    position: relative;
    margin-bottom: 20px;         /* 4px * 5 */
    float:left;
}

.box:last-of-type {
    margin-bottom: 0;
}

.noresults .box {
    border-radius: 0;
}

@media (max-width: 767px) {
    .box {
        width: 100%;
    }

    .wrapper .box.blank {
        margin: 0 16px 16px 16px;
        width: calc(100% - 32px);
    }

    .xs-wrapper .box.blank {
        margin: 0 0 16px 0;
        width: 100%;
    }
}

/* BOX H1 */
.box h1 {
    background: #fff;
    border-radius: 4px 4px 0 0;
    color: #000;
    font-weight: 700;
    font-size: 13px;             /* 4px * 3 */
    padding: 22px;               /* 4px * 4 */
    border: 1px solid #c7c7c7;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 -1px;
    width: calc(100% + 2px);
    left: -1px;
    top: -1px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .box h1 {
        word-break: break-word !important;
        white-space: normal !important;
    }
}

.box h1 .button {
    top: -5px;
    margin: 0;
    right: -3px;
}

.box h1 .button.right {
    margin: -2px 0 -11px !important;
    right: -5px;
}

.box h1 em {
    color: #666666;
    font-size: 12px;             /* 4px * 3 */
    font-weight: normal;
    margin-left: 4px;
}

.box h1 select {
    position: absolute;
    right: 3px;
    top: 3px;
    border-radius: 3px;
    border: 1px solid #999;
    padding: 1px;
    font-size: 12px;
    background: #eee;
}

.box h1 select option {
    padding-right: 10px;
}

/* BOX H2 */
.box h2 {
    font-size: 14px;             /* 4px * 3.5 */
    font-weight: 600;
}

/* inner + h1 after inner */
.box > .inner + h1 {
    border-radius: 0;
    border-top: 1px solid #bbb;
}

.box .inner p {
    font-size:13px;
    margin-bottom:0.8em;
}

.box .inner p:last-child {
    margin-bottom:0;
}

/* loading paragraph inside box */
.box p.loading {
    border-radius: 0;
    color: #444;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    padding: 8px 0;
    text-indent: 34px;
    border: 1px solid #c7c7c7;
    background: url(~images/loading_16x16.gif) no-repeat 10px center #eeeeee;
    background-size: 16px 5px;
}

/* variants */
.box.blank {
    border: 0;
}

.box.fullheight {
    min-height: 86px;
}

/* inner padding blocks */
.box .inner,
.box .inner_padding {
    padding: 20px 20px 20px 20px !important; /* 4px * 5 */
}

.box .inner .button,
.box .inner_padding .button {
    margin-bottom: 0;
}

/* forms */
.wrjs_form .box .inner {
    float: left;
    width:100%;
}

@media (min-width: 768px) {
    .fullheight {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* INNER */
.inner_padding {
    padding: 0;
    float: left;
    width: 100%;
    margin: 0;
}

.box.padded .inner_padding {
    padding: 10px 10px 0;
}

/* BOX FOOTER */
.boxfooter {
    border-top: 1px solid #c7c7c7;
    clear: both;
    padding: 20px;               /* 4px * 5 */
    text-align: left;
    float: left;
    width: 100%;
}

/* alert container special case */
.alertcontainer .boxfooter #previewalert {
    margin: 0 12px 0 0;          /* 4px * 3 */
}

/* reports create special case */
#reports_ondemand_create .boxfooter {
    border-top: 0;
    text-align: left;
    padding-top: 0;
}

.boxfooter .button {
    float: left;
    margin-right: 12px;          /* 4px * 3 */
}

.boxfooter .button.right {
    margin-right: 0;
    margin-left: 12px;           /* 4px * 3 */
    float: right;
}



/*************************************************************************************

WRJS FORM

**************************************************************************************/

.wrjs_form {width:100%;}

    .wrjs_form dt,
    .wrjs_form dd {width:100%;}

    .wrjs_form dt {margin-bottom:4px; font-size:0.8em; font-weight:bold; color:#444; padding-left:2px;}
    .wrjs_form dd {margin-bottom:10px; position: relative;}

    .wrjs_form dt label {width:100%;  display:inline-block;  }
    .wrjs_form dd input,
    .wrjs_form dd select {width:100%; border:1px solid #bbb; border-radius:4px; font-size:0.8em; padding:6px 7px; display: inline-block; position:relative; z-index:10;}
    .wrjs_form dd select {padding:8px 7px;}

    /*
    .wrjs_form dd select {

        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        background-image: url("arrow.svg");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;

        padding-right: 36px;
    
    }
    */


/*************************************************************************************

REGISTRATION PAGE

**************************************************************************************/

#page_registration{
	.box{
		.inner{
			margin-bottom:10px;
		}
	}
	.box + .box{
		border: 1px solid #bbb;
		border-left: 0;
		border-right: 0;
		@media(min-width: 600px){
			border: 1px solid #bbb;
		}
	}
	.box + .box,.box + .info{
		margin-top: 12px;
	}
	.box + .info{
		@media(max-width: 599px){
			border-right: 0;
			border-left: 0;
		}
	}
	#Register{
		width: 100%;
		margin: 10px 0 0;
		padding:12px;
		@media (max-width: 768px){
			margin: 20px 0 0;
		}
	}
	#dterms:not(.hidden){

		display: block;
		margin-bottom: 0;

	}
}
.ui-tooltip {z-index:99999;}

#signupform, #signupform * {box-sizing:border-box;}

.registrationbox {float:left; margin:0;}
	.registrationbox dl {float:left; clear:both; width:100%;}
	.registrationbox dt, .registrationbox dd {float:left; width:100% ;}
	.registrationbox .star {display:none;}
	.registrationbox dt {width:40%; margin:0 0 5px;}
	.registrationbox dd {width:60%;}
	.registrationbox dd input[type="text"],
	.registrationbox dd input[type="tel"],
	.registrationbox dd input[type="email"],
	.registrationbox dd input[type="password"],
	.registrationbox dd select {padding:8px; background:#f6f6f6;}

	.registrationbox input#password {border-radius:3px 3px 0 0;}


.whyaccount {
	float:right;
	margin:10px 0;

	h2 {color:#81a32c; background:url(~images/icon_info_green.png) no-repeat 5px center; padding-left:55px; min-height:40px; font:bold 1.6em arial, sans-serif !important; max-width:320px;}

	p {
		font-size:1.1em;
		line-height:1.5em;
		color:#444;
		margin:0 0 12px;
	}

	li {color:#444;}
}

#strength {width:100%; z-index:2; float:left; width:100%; background:#eee; border:1px solid #bbb; padding:15px 4px 4px; top:-10px; position:relative; border-radius:5px;}
	#strength p {float:left; display:inline-block; width:auto; padding:7px 8px 0; font-size:11px;}
	#strength span {float:left; display: inline-block; background:url(strength.gif) no-repeat 5px bottom; padding-left:83px; margin:8px 0; font-size: 11px; height:12px; line-height:12px; overflow:hidden;}
		.password_strength_1 {background-position: 5px -80px !important;}
		.password_strength_2 {background-position: 5px -60px !important;}
		.password_strength_3 {background-position: 5px -40px !important;}
		.password_strength_4 {background-position: 5px -20px !important;}
		.password_strength_5 {background-position: 5px top !important;}

.formtip {position: absolute; font-family: arial;; font-size: 12px; border-radius: 8px; content: attr(data-formtip); padding: 10px; background:#005799; color: #fff; line-height: 1.4em; text-align: left; pointer-events: none; display: block; opacity: 0; transition: opacity .3s, top .3s; width: auto; z-index: 9999; right:0;}
	.formtip.show {opacity: 1; display:block !important;}
	.formtip b {width: 0; height: 0; border-bottom: 8px solid #005799; border-top: 8px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent; position:absolute; left: 50%; margin-left:-8px; top: -16px;}


p.error, p.info, p.warning, .mockinput.blue {
  background-color: #D6F0FF;
  border-bottom: 2px solid #005799;
  color: #005799;
  padding: 10px 8px 8px 31px;
  margin:0 0 15px;
  width:100%;
  text-align:left;
  overflow:hidden;
  box-sizing: border-box;
  position:relative;
  z-index:1;
  line-height:1.4em;
  display:inline-block;
  font-size: 0.9em;
}

.box .inner p.info {
   margin: -20px 0 15px -20px;
   width: calc(100% + 40px);
   padding: 15px 0 15px 20px;
}

.mockinput.blue {padding:12px; font-size: 0.8em; border:1px solid #bbb; border-radius:5px;}
.mockinput.blue.acceptterms {margin:15px 0 0;}
.mockinput.blue.acceptterms a {text-decoration:underline;}

.form-row p.error {
    background:#ffdfdd;
    color:#b10d0d;
    padding:12px 10px 8px;
    font-size:0.8em;
    border:1px solid #e6a3a3;
    border-top:0;
    border-radius:5px;
    position:relative;
    top:-4px;
    margin:0;
}

dl.rowwed {margin:0 0 10px;}


/*************************************************************************************

CHECKREPLACE

**************************************************************************************/



/* Container */
.mockinput.acceptterms label {
  position: relative;
  line-height: 1.4;
  font-size: 0.8rem;
}

/* Hide the native checkbox (still accessible) */
.mockinput.acceptterms input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom checkbox */
.mockinput.acceptterms .checkreplace {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  border: 2px solid #2563eb;
  border-radius: 3px;
  background-color: #fff;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  margin-right:5px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checkmark */
.mockinput.acceptterms .checkreplace::after {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
  position: relative;
  top:-1px;
}

/* Checked state */
.mockinput.acceptterms input[type="checkbox"]:checked + .checkreplace {
  background-color: #005799;
  border-color: #005799;
}

.mockinput.acceptterms input[type="checkbox"]:checked + .checkreplace::after {
  transform: rotate(45deg) scale(1);
}

/* Focus (keyboard accessibility) */
.mockinput.acceptterms input[type="checkbox"]:focus-visible + .checkreplace {
  outline: 2px solid #005799;
  outline-offset: 2px;
}

/* Hover */
.mockinput.acceptterms label:hover .checkreplace {
  border-color: #1d4ed8;
}

/* Disabled */
.mockinput.acceptterms input[type="checkbox"]:disabled + .checkreplace {
  background-color: #e5e7eb;
  border-color: #cbd5f5;
  cursor: not-allowed;
}

.mockinput.acceptterms input[type="checkbox"]:disabled + .checkreplace::after {
  border-color: #9ca3af;
}




/*************************************************************************************

HOME PAGE

**************************************************************************************/

.header-console {display:none;}

.module {
    background: #fff;
    margin: 0 20px 20px 0;
    border: 1px solid #c7c7c7;
    color: #1F272F;
    position: relative;
    width: 100%;
    border-radius: 4px;
}

.module h1 {
    background: #dddddd;
    height: 40px;
    line-height: 40px;
    color: #1F272F;
    font-weight: 600;
    font-size: 0.9em;
    padding: 0 10px;
    border-bottom: 1px solid #c7c7c7;
    border-radius: 3px 3px 0 0;
}

.module p {
    font-size: 0.9em;
    margin-bottom:15px;
}


@media (min-width: 768px) {
    #page_home .module {
        width: calc(50% - 10px);
    }
    #page_home .module:nth-child(2n) {
        margin-right:0;
    }
}


@media (min-width: 1320px) {
    #page_home .module {
        width: calc(33.33% - 14px);
    }
    #page_home .module:nth-child(2n) {
        margin-right:20px;
    }
    #page_home .module:nth-child(3n) {
        margin-right:0px;
    }
}



#page_home .module {
    min-height: 206px;
}

.module .inner {
    margin: 15px;
}