@charset "UTF-8";
/**
* UltraWave base styles for iMIS
*
* This document contains the base styles required to properly render iMIS.
* DO NOT EDIT THIS DOCUMENT DIRECTLY. Your changes WILL be lost when you upgrade.
* Instead, create a new style sheet to override the styles that you want to change.
*
**/
/* ==========================================================================
NORMALIZE
========================================================================== */
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* HTML5 display definitions
========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none !important;
}
/* Base
========================================================================== */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
/* Links
========================================================================== */
a {
background: transparent;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:active,
a:hover {
outline: 0;
}
/* Typography
========================================================================== */
h1 {
font-size: 200%;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 100%;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Forms
========================================================================== */
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
/* Tables
========================================================================== */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ==========================================================================
SCAFFOLDING
========================================================================== */
/* From Bootstrap 3.0.2 */
/* Reset the box-sizing
* See http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*:before,
*:after {
box-sizing: border-box;
}
/* Body reset */
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.428571429;
color: #333333;
}
/**
* Standard container sizing.
* These are required to ensure popup windows size correctly,
* and for the sticky footer.
*/
html, body, form {
width: 100%;
height: 100%;
overflow: visible;
}
/* Reset fonts for relevant elements */
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* Images */
img {
vertical-align: middle;
}
/* Horizontal rules */
hr {
margin-top: 1.428571429em;
margin-bottom: 1.428571429em;
border: 0;
border-top: 1px solid #ddd;
}
/* disabled links */
a.aspNetDisabled, a.aspNetDisabled:hover, a.aspNetDisabled:focus, a.aspNetDisabled:active, a.aspNetDisabled:visited {
color: #999999;
text-decoration: none;
cursor: default;
}
.ContentPanel:focus {
outline: none;
}
/* ==========================================================================
YUI GRIDS
========================================================================== */
/*** NOTE: This grid system is now obsolete. Please use Bootstrap-style grids instead. ***/
#ft {
clear: both;
}
#doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 {
margin: auto;
text-align: left;
width: 57.69em;
*width: 56.301em;
min-width: 750px;
}
#doc2 {
width: 73.074em;
*width: 71.313em;
}
#doc3 {
margin: auto 10px;
width: auto;
}
#doc4 {
width: 74.923em;
*width: 73.117em;
}
.yui-b {
position: relative;
}
.yui-b {
_position: static;
}
#yui-main .yui-b {
position: static;
}
#yui-main {
width: 100%;
}
.yui-t1 #yui-main, .yui-t2 #yui-main, .yui-t3 #yui-main {
float: right;
margin-left: -25em;
}
.yui-t4 #yui-main, .yui-t5 #yui-main, .yui-t6 #yui-main {
float: left;
margin-right: -25em;
}
.yui-t1 .yui-b {
float: left;
width: 12.3207em;
*width: 12.0106em;
}
.yui-t1 #yui-main .yui-b {
margin-left: 13.3207em;
*margin-left: 13.0106em;
}
.yui-t2 .yui-b {
float: left;
width: 13.8456em;
*width: 13.512em;
}
.yui-t2 #yui-main .yui-b {
margin-left: 14.8456em;
*margin-left: 14.512em;
}
.yui-t3 .yui-b {
float: left;
width: 23.0759em;
*width: 22.52em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 24.0759em;
*margin-left: 23.52em;
}
.yui-t4 .yui-b {
float: right;
width: 13.8456em;
*width: 13.512em;
}
.yui-t4 #yui-main .yui-b {
margin-right: 14.8456em;
*margin-right: 14.512em;
}
.yui-t5 .yui-b {
float: right;
width: 18.4608em;
*width: 18.016em;
}
.yui-t5 #yui-main .yui-b {
margin-right: 19.4608em;
*margin-right: 19.016em;
}
.yui-t6 .yui-b {
float: right;
width: 23.0759em;
*width: 22.52em;
}
.yui-t6 #yui-main .yui-b {
margin-right: 24.0759em;
*margin-right: 23.52em;
}
.yui-t7 #yui-main .yui-b {
display: block;
margin: 0 0 1em 0;
}
#yui-main .yui-b {
float: none;
width: auto;
}
.yui-g .yui-gb .yui-u, .yui-gb .yui-g, .yui-gb .yui-gb, .yui-gb .yui-gc, .yui-gb .yui-gd, .yui-gb .yui-ge, .yui-gb .yui-gf, .yui-gb .yui-u, .yui-gc .yui-u, .yui-gc .yui-g, .yui-gd .yui-u {
float: left;
margin-left: 2%;
width: 32%;
}
.yui-gb .yui-gb .yui-u, .yui-gb .yui-gc .yui-u {
*margin-left: 1.8%;
_margin-left: 4%;
}
.yui-g .yui-gb .yui-u {
_margin-left: .8%;
}
.yui-gb .yui-u {
float: right;
}
.yui-gb div.first {
margin-left: 0;
float: left;
}
.yui-g .yui-gb div.first, .yui-gb .yui-gb div.first {
*margin-right: 0;
*width: 32%;
_width: 31.7%;
}
.yui-gb .yui-gc div.first, .yui-gb .yui-gd div.first {
*margin-right: 0;
}
.yui-gb .yui-gd .yui-u {
*width: 66%;
_width: 61.2%;
}
.yui-gb .yui-gd div.first {
*width: 31%;
_width: 29.5%;
}
.yui-g .yui-gc .yui-u, .yui-gb .yui-gc .yui-u {
width: 32%;
_float: right;
margin-right: 0;
_margin-left: 0;
}
.yui-gb .yui-gc div.first {
width: 66%;
*float: left;
*margin-left: 0;
}
.yui-gb .yui-ge .yui-u, .yui-gb .yui-gf .yui-u {
margin: 0;
}
.yui-g .yui-u, .yui-g .yui-g, .yui-g .yui-gb, .yui-g .yui-gc, .yui-g .yui-gd, .yui-g .yui-ge, .yui-g .yui-gf, .yui-gc .yui-u, .yui-gd .yui-g, .yui-g .yui-gc .yui-u, .yui-ge .yui-u, .yui-ge .yui-g, .yui-gf .yui-g, .yui-gf .yui-u {
float: right;
}
.yui-g .yui-gc div.first, .yui-g .yui-ge div.first, .yui-g div.first, .yui-gc div.first, .yui-gc div.first div.first, .yui-gd div.first, .yui-ge div.first, .yui-gf div.first {
float: left;
}
.yui-g .yui-g .yui-u, .yui-gb .yui-g .yui-u, .yui-gc .yui-g .yui-u, .yui-gd .yui-g .yui-u, .yui-ge .yui-g .yui-u, .yui-gf .yui-g .yui-u {
width: 49%;
*width: 48.1%;
*margin-left: 0;
}
.yui-g .yui-g div.first {
*margin: 0;
}
.yui-gb .yui-g div.first {
*margin-right: 4%;
_margin-right: 1.3%;
}
.yui-gb .yui-gb .yui-u {
_margin-left: .7%;
}
.yui-gb .yui-g div.first, .yui-gb .yui-gb div.first {
*margin-left: 0;
}
.yui-gc .yui-g .yui-u, .yui-gd .yui-g .yui-u {
*width: 48.1%;
*margin-left: 0;
}
.yui-g .yui-u, .yui-g .yui-g, .yui-g .yui-gb, .yui-g .yui-gc, .yui-g .yui-gd, .yui-g .yui-ge, .yui-g .yui-gf {
width: 49.1%;
}
.yui-g .yui-gb div.first, .yui-gb div.first, .yui-gc div.first, .yui-gd div.first {
margin-left: 0;
}
.yui-g .yui-gc div.first, .yui-gc div.first, .yui-gd .yui-g, .yui-gd .yui-u {
width: 66%;
}
.yui-gd div.first, .yui-gb .yui-gd div.first {
width: 32%;
}
.yui-g .yui-gd div.first {
_width: 29.9%;
}
.yui-ge .yui-u, .yui-ge .yui-g, .yui-gf div.first {
width: 24%;
}
.yui-gb .yui-ge div.yui-u, .yui-gb .yui-gf div.yui-u {
float: right;
}
.yui-gb .yui-ge div.first, .yui-gb .yui-gf div.first {
float: left;
}
.yui-ge div.first, .yui-gf .yui-g, .yui-gf .yui-u {
width: 74.2%;
}
.yui-gb .yui-ge .yui-u, .yui-gb .yui-gf div.first {
*width: 24%;
_width: 20%;
}
.yui-gb .yui-ge div.first, .yui-gb .yui-gf .yui-u {
*width: 73.5%;
_width: 65.5%;
}
#bd:after, .yui-g:after, .yui-gb:after, .yui-gc:after, .yui-gd:after, .yui-ge:after, .yui-gf:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#bd, .yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf {
zoom: 1;
}
.yui-gb .yui-u {
float: left;
}
/**
* Reduce the margins between the yui grid containers by overriding the following classes
*/
.yui-gb .yui-u {
margin-left: 1.9%;
}
.yui-gd .yui-u {
width: 67%;
margin-left: 0.9%;
float: left;
}
.yui-g .yui-u {
width: 49.9%;
float: right;
}
.yui-gc .yui-u {
width: 33%;
margin-left: 0;
float: left;
}
.yui-gf .yui-ge .yui-u {
width: 18%;
}
/* Left column on account layouts */
.yui-gf div.first {
width: 24% !important;
}
/* Middle column on account layouts */
/* IE7 Specific class */
* + html .yui-gf .yui-ge DIV.first {
width: 78% !important;
}
/* All other browsers */
.yui-gf .yui-ge DIV.first {
width: 54% !important;
}
/* Right column on account layouts */
.yui-gf .yui-ge .yui-u {
width: 22% !important;
}
/* Issue: 12188, 12264 BEGIN */
/* Styles below are special overrides of the YUI styles in order to properly display content
within a Content Collection Organizer (CCO) control. These styles should be updated whenever
a new Content Layout is added that will be used within a CCO. Content Collection Organizer
always adds a DIV with ID: ContentWizardDisplay_Wrapper and style: ContentWizardDisplay */
.ContentWizardDisplay .yui-ge .yui-u,
.ContentWizardDisplay .yui-ge .yui-g,
.ContentWizardDisplay .yui-gf div.first {
width: 24% !important;
}
.ContentWizardDisplay .yui-ge .yui-u.first {
width: 74.2% !important;
}
.ContentWizardDisplay .yui-g .yui-gc div.first,
.ContentWizardDisplay .yui-g .yui-ge div.first,
.ContentWizardDisplay .yui-g div.first,
.ContentWizardDisplay .yui-gc div.first,
.ContentWizardDisplay .yui-gc div.first div.first,
.ContentWizardDisplay .yui-gd div.first,
.ContentWizardDisplay .yui-ge div.first,
.ContentWizardDisplay .yui-gf div.first {
float: left;
}
.yui-g .ContentWizardDisplay .yui-u,
.yui-g .ContentWizardDisplay .yui-g,
.yui-g .ContentWizardDisplay .yui-gb,
.yui-g .ContentWizardDisplay .yui-gc,
.yui-g .ContentWizardDisplay .yui-gd,
.yui-g .ContentWizardDisplay .yui-ge,
.yui-g .ContentWizardDisplay .yui-gf {
width: 100%;
}
.yui-g .ContentWizardDisplay .yui-u,
.yui-g .ContentWizardDisplay .yui-g,
.yui-g .ContentWizardDisplay .yui-gb,
.yui-g .ContentWizardDisplay .yui-gc,
.yui-g .ContentWizardDisplay .yui-gd,
.yui-g .ContentWizardDisplay .yui-ge,
.yui-g .ContentWizardDisplay .yui-gf,
.yui-gc .ContentWizardDisplay .yui-u,
.yui-gd .ContentWizardDisplay .yui-g,
.yui-g .ContentWizardDisplay .yui-gc .yui-u,
.yui-ge .ContentWizardDisplay .yui-u,
.yui-ge .ContentWizardDisplay .yui-g,
.yui-gf .ContentWizardDisplay .yui-g,
.yui-gf .ContentWizardDisplay .yui-u {
float: none;
}
/* Center column */
.ContentWizardDisplay .yui-gf .yui-ge div.first {
margin-left: 0.8em !important;
width: 55.7% !important;
*width: 80.1% !important;
}
/* Right column */
.ContentWizardDisplay .yui-gf .yui-ge .yui-u {
margin-left: 0.8em !important;
width: 18% !important;
float: left;
}
.ContentWizardDisplay .yui-g .yui-u,
.ContentWizardDisplay .yui-g .yui-g,
.ContentWizardDisplay .yui-g .yui-gb,
.ContentWizardDisplay .yui-g .yui-gc,
.ContentWizardDisplay .yui-g .yui-gd,
.ContentWizardDisplay .yui-g .yui-ge,
.ContentWizardDisplay .yui-g .yui-gf,
.ContentWizardDisplay .yui-gc .yui-u,
.ContentWizardDisplay .yui-gd .yui-g,
.ContentWizardDisplay .yui-g .yui-gc .yui-u,
.ContentWizardDisplay .yui-ge .yui-u,
.ContentWizardDisplay .yui-ge .yui-g,
.ContentWizardDisplay .yui-gf .yui-g,
.ContentWizardDisplay .yui-gf .yui-u {
float: right;
}
.ContentWizardDisplay .yui-g .yui-u {
float: right;
width: 49.9% !important;
}
.ContentWizardDisplay .yui-g .yui-u,
.ContentWizardDisplay .yui-g .yui-g,
.ContentWizardDisplay .yui-g .yui-gb,
.ContentWizardDisplay .yui-g .yui-gc,
.ContentWizardDisplay .yui-g .yui-gd,
.ContentWizardDisplay .yui-g .yui-ge,
.ContentWizardDisplay .yui-g .yui-gf {
width: 49.1% !important;
}
/* Left column */
.ContentWizardDisplay .yui-g .yui-u,
.ContentWizardDisplay .yui-g .yui-g,
.ContentWizardDisplay .yui-g .yui-gb,
.ContentWizardDisplay .yui-g .yui-gc,
.ContentWizardDisplay .yui-g .yui-gd,
.ContentWizardDisplay .yui-g .yui-ge,
.ContentWizardDisplay .yui-g .yui-gf,
.ContentWizardDisplay .yui-gc .yui-u,
.ContentWizardDisplay .yui-gd .yui-g,
.ContentWizardDisplay .yui-g .yui-gc .ContentWizardDisplay .yui-u,
.ContentWizardDisplay .yui-ge .yui-u,
.ContentWizardDisplay .yui-ge .yui-g,
.ContentWizardDisplay .yui-gf .yui-g,
.ContentWizardDisplay .yui-gf .yui-u {
float: right;
}
/* Styles to properly display single column layout */
.ContentWizardDisplay .yui-g {
width: 100%;
}
/* If multiple CCO iParts are on a single content record this class */
/* is needed to handle the height correctly */
#ContentWizardDisplay_Wrapper #ContentWizardDisplay_Wrapper,
#ContentWizardDisplay_Wrapper #ContentWizardDisplay_Wrapper #ContentWizardDisplay_Wrapper {
height: 100%;
overflow: hidden;
zoom: 1;
}
/* Fix for 3 over 1 layout in Dashboard CCO */
.ContentWizardDisplay .yui-gb .yui-u {
width: 32.6% !important;
float: left !important;
margin-left: 0;
}
/* Fix for 33/66 layout in CCO */
.ContentWizardDisplay .yui-gd .yui-u {
margin-left: 0.8em;
width: 65.6% !important;
float: right !important;
}
.ContentWizardDisplay .yui-gd .yui-u.first {
width: 32.6% !important;
float: left !important;
margin-left: 0;
}
.ContentWizardDisplay .yui-gb .yui-u {
width: 32.6% !important;
float: left !important;
margin-left: 0;
}
/* To avoid doubling up the margins if ContentItemContainers are nested inside of another */
.ContentWizardDisplay .ContentItemContainer .ContentItemContainer {
margin-top: 0;
}
/* Styles to properly display nested CCO iParts */
.ContentWizardDisplay .yui-g .yui-g {
width: 100% !important;
float: left !important;
}
.row {
--bs-gutter-x: 30px;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
/* For backward compatibility, add -xs- infix grid classes */
/* Additionally ensure layout selector always displays grids as they would be on desktop */
.col-xs-1,
.layout-preview .col-sm-1,
.layout-preview .col-md-1,
.layout-preview .col-lg-1,
.layout-preview .col-xl-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-xs-2,
.layout-preview .col-sm-2,
.layout-preview .col-md-2,
.layout-preview .col-lg-2,
.layout-preview .col-xl-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-xs-3,
.layout-preview .col-sm-3,
.layout-preview .col-md-3,
.layout-preview .col-lg-3,
.layout-preview .col-xl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xs-4,
.layout-preview .col-sm-4,
.layout-preview .col-md-4,
.layout-preview .col-lg-4,
.layout-preview .col-xl-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-xs-5,
.layout-preview .col-sm-5,
.layout-preview .col-md-5,
.layout-preview .col-lg-5,
.layout-preview .col-xl-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-xs-6,
.layout-preview .col-sm-6,
.layout-preview .col-md-6,
.layout-preview .col-lg-6,
.layout-preview .col-xl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xs-7,
.layout-preview .col-sm-7,
.layout-preview .col-md-7,
.layout-preview .col-lg-7,
.layout-preview .col-xl-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-xs-8,
.layout-preview .col-sm-8,
.layout-preview .col-md-8,
.layout-preview .col-lg-8,
.layout-preview .col-xl-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-xs-9,
.layout-preview .col-sm-9,
.layout-preview .col-md-9,
.layout-preview .col-lg-9,
.layout-preview .col-xl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xs-10,
.layout-preview .col-sm-10,
.layout-preview .col-md-10,
.layout-preview .col-lg-10,
.layout-preview .col-xl-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-xs-11,
.layout-preview .col-sm-11,
.layout-preview .col-md-11,
.layout-preview .col-lg-11,
.layout-preview .col-xl-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-xs-12,
.layout-preview .col-sm-12,
.layout-preview .col-md-12,
.layout-preview .col-lg-12,
.layout-preview .col-xl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xs-1,
.layout-preview .offset-sm-1,
.layout-preview .offset-md-1,
.layout-preview .offset-lg-1,
.layout-preview .offset-xl-1 {
margin-left: 8.33333333%;
}
.offset-xs-2,
.layout-preview .offset-sm-2,
.layout-preview .offset-md-2,
.layout-preview .offset-lg-2,
.layout-preview .offset-xl-2 {
margin-left: 16.66666667%;
}
.offset-xs-3,
.layout-preview .offset-sm-3,
.layout-preview .offset-md-3,
.layout-preview .offset-lg-3,
.layout-preview .offset-xl-3 {
margin-left: 25%;
}
.offset-xs-4,
.layout-preview .offset-sm-4,
.layout-preview .offset-md-4,
.layout-preview .offset-lg-4,
.layout-preview .offset-xl-4 {
margin-left: 33.33333333%;
}
.offset-xs-5,
.layout-preview .offset-sm-5,
.layout-preview .offset-md-5,
.layout-preview .offset-lg-5,
.layout-preview .offset-xl-5 {
margin-left: 41.66666667%;
}
.offset-xs-6,
.layout-preview .offset-sm-6,
.layout-preview .offset-md-6,
.layout-preview .offset-lg-6,
.layout-preview .offset-xl-6 {
margin-left: 50%;
}
.offset-xs-7,
.layout-preview .offset-sm-7,
.layout-preview .offset-md-7,
.layout-preview .offset-lg-7,
.layout-preview .offset-xl-7 {
margin-left: 58.33333333%;
}
.offset-xs-8,
.layout-preview .offset-sm-8,
.layout-preview .offset-md-8,
.layout-preview .offset-lg-8,
.layout-preview .offset-xl-8 {
margin-left: 66.66666667%;
}
.offset-xs-9,
.layout-preview .offset-sm-9,
.layout-preview .offset-md-9,
.layout-preview .offset-lg-9,
.layout-preview .offset-xl-9 {
margin-left: 75%;
}
.offset-xs-10,
.layout-preview .offset-sm-10,
.layout-preview .offset-md-10,
.layout-preview .offset-lg-10,
.layout-preview .offset-xl-10 {
margin-left: 83.33333333%;
}
.offset-xs-11,
.layout-preview .offset-sm-11,
.layout-preview .offset-md-11,
.layout-preview .offset-lg-11,
.layout-preview .offset-xl-11 {
margin-left: 91.66666667%;
}
.col {
flex: 1 0 0%;
}
.row-cols-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-auto {
flex: 0 0 auto;
width: auto;
}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-1 {
margin-left: 8.33333333%;
}
.offset-2 {
margin-left: 16.66666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.33333333%;
}
.offset-5 {
margin-left: 41.66666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.33333333%;
}
.offset-8 {
margin-left: 66.66666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.33333333%;
}
.offset-11 {
margin-left: 91.66666667%;
}
.g-0,
.gx-0 {
--bs-gutter-x: 0;
}
.g-0,
.gy-0 {
--bs-gutter-y: 0;
}
.g-1,
.gx-1 {
--bs-gutter-x: 0.25rem;
}
.g-1,
.gy-1 {
--bs-gutter-y: 0.25rem;
}
.g-2,
.gx-2 {
--bs-gutter-x: 0.5rem;
}
.g-2,
.gy-2 {
--bs-gutter-y: 0.5rem;
}
.g-3,
.gx-3 {
--bs-gutter-x: 1rem;
}
.g-3,
.gy-3 {
--bs-gutter-y: 1rem;
}
.g-4,
.gx-4 {
--bs-gutter-x: 1.5rem;
}
.g-4,
.gy-4 {
--bs-gutter-y: 1.5rem;
}
.g-5,
.gx-5 {
--bs-gutter-x: 3rem;
}
.g-5,
.gy-5 {
--bs-gutter-y: 3rem;
}
@media (min-width: 768px) {
.col-sm {
flex: 1 0 0%;
}
.row-cols-sm-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-sm-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-sm-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-sm-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-sm-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-sm-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-sm-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
}
.col-sm-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-sm-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-sm-3 {
flex: 0 0 auto;
width: 25%;
}
.col-sm-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-sm-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-sm-6 {
flex: 0 0 auto;
width: 50%;
}
.col-sm-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-sm-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-sm-9 {
flex: 0 0 auto;
width: 75%;
}
.col-sm-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-sm-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-sm-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-sm-0 {
margin-left: 0;
}
.offset-sm-1 {
margin-left: 8.33333333%;
}
.offset-sm-2 {
margin-left: 16.66666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.33333333%;
}
.offset-sm-5 {
margin-left: 41.66666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.33333333%;
}
.offset-sm-8 {
margin-left: 66.66666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.33333333%;
}
.offset-sm-11 {
margin-left: 91.66666667%;
}
.g-sm-0,
.gx-sm-0 {
--bs-gutter-x: 0;
}
.g-sm-0,
.gy-sm-0 {
--bs-gutter-y: 0;
}
.g-sm-1,
.gx-sm-1 {
--bs-gutter-x: 0.25rem;
}
.g-sm-1,
.gy-sm-1 {
--bs-gutter-y: 0.25rem;
}
.g-sm-2,
.gx-sm-2 {
--bs-gutter-x: 0.5rem;
}
.g-sm-2,
.gy-sm-2 {
--bs-gutter-y: 0.5rem;
}
.g-sm-3,
.gx-sm-3 {
--bs-gutter-x: 1rem;
}
.g-sm-3,
.gy-sm-3 {
--bs-gutter-y: 1rem;
}
.g-sm-4,
.gx-sm-4 {
--bs-gutter-x: 1.5rem;
}
.g-sm-4,
.gy-sm-4 {
--bs-gutter-y: 1.5rem;
}
.g-sm-5,
.gx-sm-5 {
--bs-gutter-x: 3rem;
}
.g-sm-5,
.gy-sm-5 {
--bs-gutter-y: 3rem;
}
}
@media (min-width: 992px) {
.col-md {
flex: 1 0 0%;
}
.row-cols-md-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-md-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-md-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-md-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-md-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-md-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-md-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
}
.col-md-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-md-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-md-3 {
flex: 0 0 auto;
width: 25%;
}
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-md-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
.col-md-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-md-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-md-9 {
flex: 0 0 auto;
width: 75%;
}
.col-md-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-md-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-md-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-md-0 {
margin-left: 0;
}
.offset-md-1 {
margin-left: 8.33333333%;
}
.offset-md-2 {
margin-left: 16.66666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.33333333%;
}
.offset-md-5 {
margin-left: 41.66666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.33333333%;
}
.offset-md-8 {
margin-left: 66.66666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.33333333%;
}
.offset-md-11 {
margin-left: 91.66666667%;
}
.g-md-0,
.gx-md-0 {
--bs-gutter-x: 0;
}
.g-md-0,
.gy-md-0 {
--bs-gutter-y: 0;
}
.g-md-1,
.gx-md-1 {
--bs-gutter-x: 0.25rem;
}
.g-md-1,
.gy-md-1 {
--bs-gutter-y: 0.25rem;
}
.g-md-2,
.gx-md-2 {
--bs-gutter-x: 0.5rem;
}
.g-md-2,
.gy-md-2 {
--bs-gutter-y: 0.5rem;
}
.g-md-3,
.gx-md-3 {
--bs-gutter-x: 1rem;
}
.g-md-3,
.gy-md-3 {
--bs-gutter-y: 1rem;
}
.g-md-4,
.gx-md-4 {
--bs-gutter-x: 1.5rem;
}
.g-md-4,
.gy-md-4 {
--bs-gutter-y: 1.5rem;
}
.g-md-5,
.gx-md-5 {
--bs-gutter-x: 3rem;
}
.g-md-5,
.gy-md-5 {
--bs-gutter-y: 3rem;
}
}
@media (min-width: 1200px) {
.col-lg {
flex: 1 0 0%;
}
.row-cols-lg-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-lg-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-lg-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-lg-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-lg-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-lg-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-lg-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
}
.col-lg-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-lg-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-lg-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-lg-6 {
flex: 0 0 auto;
width: 50%;
}
.col-lg-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-lg-9 {
flex: 0 0 auto;
width: 75%;
}
.col-lg-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-lg-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-lg-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-lg-0 {
margin-left: 0;
}
.offset-lg-1 {
margin-left: 8.33333333%;
}
.offset-lg-2 {
margin-left: 16.66666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.33333333%;
}
.offset-lg-5 {
margin-left: 41.66666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.33333333%;
}
.offset-lg-8 {
margin-left: 66.66666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.33333333%;
}
.offset-lg-11 {
margin-left: 91.66666667%;
}
.g-lg-0,
.gx-lg-0 {
--bs-gutter-x: 0;
}
.g-lg-0,
.gy-lg-0 {
--bs-gutter-y: 0;
}
.g-lg-1,
.gx-lg-1 {
--bs-gutter-x: 0.25rem;
}
.g-lg-1,
.gy-lg-1 {
--bs-gutter-y: 0.25rem;
}
.g-lg-2,
.gx-lg-2 {
--bs-gutter-x: 0.5rem;
}
.g-lg-2,
.gy-lg-2 {
--bs-gutter-y: 0.5rem;
}
.g-lg-3,
.gx-lg-3 {
--bs-gutter-x: 1rem;
}
.g-lg-3,
.gy-lg-3 {
--bs-gutter-y: 1rem;
}
.g-lg-4,
.gx-lg-4 {
--bs-gutter-x: 1.5rem;
}
.g-lg-4,
.gy-lg-4 {
--bs-gutter-y: 1.5rem;
}
.g-lg-5,
.gx-lg-5 {
--bs-gutter-x: 3rem;
}
.g-lg-5,
.gy-lg-5 {
--bs-gutter-y: 3rem;
}
}
@media (min-width: 1400px) {
.col-xl {
flex: 1 0 0%;
}
.row-cols-xl-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-xl-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-xl-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-xl-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-xl-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-xl-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-xl-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-xl-auto {
flex: 0 0 auto;
width: auto;
}
.col-xl-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-xl-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-xl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xl-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-xl-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-xl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xl-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-xl-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-xl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xl-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-xl-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-xl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xl-0 {
margin-left: 0;
}
.offset-xl-1 {
margin-left: 8.33333333%;
}
.offset-xl-2 {
margin-left: 16.66666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.33333333%;
}
.offset-xl-5 {
margin-left: 41.66666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.33333333%;
}
.offset-xl-8 {
margin-left: 66.66666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.33333333%;
}
.offset-xl-11 {
margin-left: 91.66666667%;
}
.g-xl-0,
.gx-xl-0 {
--bs-gutter-x: 0;
}
.g-xl-0,
.gy-xl-0 {
--bs-gutter-y: 0;
}
.g-xl-1,
.gx-xl-1 {
--bs-gutter-x: 0.25rem;
}
.g-xl-1,
.gy-xl-1 {
--bs-gutter-y: 0.25rem;
}
.g-xl-2,
.gx-xl-2 {
--bs-gutter-x: 0.5rem;
}
.g-xl-2,
.gy-xl-2 {
--bs-gutter-y: 0.5rem;
}
.g-xl-3,
.gx-xl-3 {
--bs-gutter-x: 1rem;
}
.g-xl-3,
.gy-xl-3 {
--bs-gutter-y: 1rem;
}
.g-xl-4,
.gx-xl-4 {
--bs-gutter-x: 1.5rem;
}
.g-xl-4,
.gy-xl-4 {
--bs-gutter-y: 1.5rem;
}
.g-xl-5,
.gx-xl-5 {
--bs-gutter-x: 3rem;
}
.g-xl-5,
.gy-xl-5 {
--bs-gutter-y: 3rem;
}
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
/* Body text
========================================================================== */
p {
margin: 0 0 1em;
}
.lead {
margin-bottom: 1.5em;
font-size: 115%;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {
.lead {
font-size: 150%;
}
}
small,
.small {
font-size: 85%;
}
cite {
font-style: normal;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-uppercase {
text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.PageTitle, .PanelTitle, .SectionTitle, .SectionLabel, .SectionLabelSmaller {
font-weight: bold;
line-height: normal;
}
h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small,
.h1 small,
.h1 .small, .h2 small,
.h2 .small, .h3 small,
.h3 .small, .h4 small,
.h4 .small, .h5 small,
.h5 .small, .h6 small,
.h6 .small,
.PageTitle small,
.PageTitle .small, .PanelTitle small,
.PanelTitle .small, .SectionTitle small,
.SectionTitle .small, .SectionLabel small,
.SectionLabel .small, .SectionLabelSmaller small,
.SectionLabelSmaller .small {
font-weight: normal;
line-height: 1;
}
h1,
h2,
h3 {
margin-top: 18px;
margin-bottom: 9px;
}
h1 small,
h1 .small,
h2 small,
h2 .small,
h3 small,
h3 .small {
font-size: 65%;
}
h2,
.h2,
div.PanelTitle {
border-bottom: 1px solid #ddd;
margin: .2em 0;
}
h2.PanelTitle {
border-bottom: none;
margin: 0;
display: inline;
white-space: pre-wrap;
}
h4,
h5,
h6 {
margin-top: 9px;
margin-bottom: 9px;
}
h4 small,
h4 .small,
h5 small,
h5 .small,
h6 small,
h6 .small {
font-size: 75%;
}
h1, .h1, .PageTitle {
font-size: 250%;
}
h2, .h2, .PanelTitle {
font-size: 190%;
}
h3, .h3, .SectionTitle {
font-size: 130%;
}
h4, .h4, .SectionLabel {
font-size: 120%;
}
h5, .h5, .SectionLabelSmaller {
font-size: 100%;
}
h6, .h6 {
font-size: 85%;
}
ul,
ol {
margin-top: 0;
margin-bottom: 9px;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin-bottom: 0;
}
dl {
margin-bottom: 18px;
}
dt,
dd {
line-height: 1.428571429;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #ddd;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
blockquote {
padding: 9px 18px;
margin: 0 0 18px;
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote small {
display: block;
line-height: 1.428571429;
}
blockquote small:before {
content: '\2014 \00A0';
}
blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
border-left: 0;
}
blockquote.pull-right p,
blockquote.pull-right small,
blockquote.pull-right .small {
text-align: right;
}
blockquote.pull-right small:before,
blockquote.pull-right .small:before {
content: '';
}
blockquote.pull-right small:after,
blockquote.pull-right .small:after {
content: '\00A0 \2014';
}
blockquote:before,
blockquote:after {
content: "";
}
address {
margin-bottom: 18px;
font-style: normal;
line-height: 1.428571429;
}
/* ==========================================================================
FORMS
========================================================================== */
/* Basics
========================================================================== */
/* "Label" class can be used to style items like labels without needing to use the <label> tag.
Be aware that you always need one <label> tag associated with all <input> controls. */
/* NOTE: The "PanelFieldLabelFont" class is obsolete */
label,
.Label,
.PanelFieldLabelFont {
font-weight: bold;
color: #444;
/* This is to allow space for the required indicator */
padding-left: 7px;
margin-left: -7px;
}
/* set default input styles */
input,
textarea {
font-family: inherit;
font-weight: normal;
font-size: 98%;
padding-left: 0.25em;
padding-right: 0.25em;
}
/* default input width */
input, .RadComboBox.RadComboBox {
width: 100%;
max-width: 100%;
}
@media (min-width: 480px) {
input, .RadComboBox.RadComboBox {
width: 12.25em;
}
}
@media (max-width: 480px) {
select {
width: 100%;
}
}
/* reset widths for inputs where needed */
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto;
max-width: unset;
}
/* default textarea width and padding */
textarea {
max-width: 100%;
width: 15em;
/* Gives textarea the same padding as other input fields */
padding: 0.25em;
}
@media (min-width: 480px) {
textarea {
width: 22em;
}
}
/* put a gray background on disabled inputs */
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly],
.RadInput.RadInput .riTextBox[disabled] {
cursor: default;
background-color: #eeeeee;
}
/* override the gray background on particular types of inputs */
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly],
input[type="image"][disabled] {
background-color: transparent;
}
/* "gray out" image buttons when they are disabled */
input[type="image"][disabled] {
filter: alpha(opacity=50);
opacity: 0.5;
}
/* disabled span and labels */
span[disabled],
label[disabled],
[disabled] label,
.Disabled,
label.aspNetDisabled,
span.aspNetDisabled,
.aspNetDisabled label,
.aspNetDisabled .Label {
color: #666;
}
select[multiple="multiple"] {
min-width: 11em;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
margin-left: 6px;
}
/* Hide the numeric input spinner */
input.hide-spinner::-webkit-outer-spin-button,
input.hide-spinner::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number].hide-spinner {
-moz-appearance: textfield;
}
/* Event Pricing fields */
.FunctionPricingTable input[type=text][name*=TextPrice] {
width: 9em;
}
/* PanelField
========================================================================== */
/**
* PanelField should be used to wrap all form fields in iMIS.
* The correct syntax is automatically generated by asiweb controls when the property RenderPanelField is set to true.
* Classes Top, Bottom, Left or Right are generated when the property CaptionPosition is defined,
* and describe where the label renders relative to the associated input.
* If no caption position is set, the label will automatically render to the left.
*
* Example HTML:
* <div class="PanelField Left">
* <label for="MyInput">This is a label</label>
* <div class="PanelFieldValue">
* <input type="text" ID="MyInput" />
* </div>
* </div>
*
* Note: It is very important to assoicate a label with every form field.
* This is automatically handled by asiweb controls when using the built-in caption rendering,
* but will have to be set by hand when you opt not to use it.
* In ASP.NET, setting the property AssociatedControlID on a Label control (or asiweb:StyledLabel)
* will render the control as a label associated with the provided control ID.
*/
/* .PanelField <div> Wrapper for the label and value of a field in a form */
.PanelField {
float: left;
clear: left;
width: 100%;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
@media (min-width: 768px) {
.PanelField label, .PanelField .Label,
.PanelField .PanelFieldValue {
float: left;
}
}
.PanelField label, .PanelField .Label {
text-align: left;
word-wrap: break-word;
white-space: pre-line;
padding-right: .5em;
}
@media (min-width: 768px) {
.PanelField label, .PanelField .Label {
width: 11.5em;
}
}
.PanelFieldValue {
padding-right: .5em;
width: 100%;
}
@media (min-width: 768px) {
.PanelFieldValue {
width: auto;
}
}
.PanelField.Right > .PanelFieldValue:is(:first-child) {
width: auto;
float: left;
display: inline-block;
}
@media (min-width: 768px) {
.PanelFieldValue, .Left .PanelFieldValue, .Right .PanelFieldValue,
.PanelFieldLabel, .Left
.PanelFieldLabel, .Right
.PanelFieldLabel {
/* When the label is on the left (default) or right */
/* NOTE: The PanelFieldLabel class is obsolete */
display: inline-block;
float: left;
}
}
.Top .PanelFieldValue, .Bottom .PanelFieldValue, .Top
.PanelFieldLabel, .Bottom
.PanelFieldLabel {
/* When the label is on the top or bottom */
/* NOTE: The PanelFieldLabel class is obsolete */
display: block;
clear: left;
float: none;
}
.Top label, .Top .Label, .Bottom label, .Bottom .Label, .Right label, .Right .Label {
width: auto !important;
padding-right: 0;
}
@media (max-width: 767px) {
.TwoColumns .PanelField label,
.TwoColumns .PanelField .Label {
width: 100%;
}
}
/* Class LabelSpacer can be used as a wrapper to create a label-sized indention
to appropriately align fields in a form */
@media (min-width: 768px) {
.LabelSpacer,
.LabelSpacer.PanelField {
padding-left: 11em;
min-height: 1px;
}
}
/* Sizes of the HTML Editors and Textareas */
.PanelField .HtmlEditor {
width: 100% !important;
max-width: 100% !important;
}
/* Give radio buttons and checkboxes some room to breathe.
Always have auto width for label to spread. */
input[type="radio"] + label,
input[type="checkbox"] + label {
padding-left: 10px;
padding-right: 1em;
width: auto;
}
/* allow radio buttons to display to the left of their labels */
.PanelFieldValue input[type="radio"] {
float: left;
}
/* Override styling for PanelFields within grid headers */
.rgHeader .PanelField,
.PanelFieldReset.PanelField, .PanelFieldReset .PanelField {
float: none;
clear: none;
width: auto;
padding: 0;
display: inline;
}
/* Used to make bottom borders line up in tables */
.StandardPanel td {
vertical-align: top;
}
.StandardPanel td .PanelField {
border-bottom: 0;
}
/* PanelBlock
========================================================================== */
/* Wrapper class "PanelBlock" may be used to make PanelFields display like tables. */
/* Use once around all the PanelFields that you wish to display in table format. */
.PanelBlock {
display: table;
}
/* Second set of selectors necessary to override original PanelField styling */
.PanelBlock .PanelField {
display: table-row;
float: none;
width: 100%;
}
.PanelBlock .PanelField .PanelFieldLabel,
.PanelBlock .PanelField .PanelFieldValue {
display: table-cell;
float: none;
padding-right: 3px;
vertical-align: top;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.PanelBlock .PanelField label,
.PanelBlock .PanelField .Label {
width: auto;
}
.PanelBlock .PanelField.Top .PanelFieldLabel,
.PanelBlock .PanelField.Top .PanelFieldValue, .PanelBlock .PanelField.Bottom .PanelFieldLabel,
.PanelBlock .PanelField.Bottom .PanelFieldValue {
display: block;
}
.PanelBlock.MiddleAlign .PanelFieldLabel,
.PanelBlock.MiddleAlign .PanelFieldValue {
vertical-align: middle;
}
/* PanelFieldsFlex
========================================================================== */
/* PanelFieldsFlex: Wrapper class to make PanelFields display Flex rather than floating */
/* PanelFieldFlex should be placed directly on the PanelField div to have the same behavior */
.PanelFieldsFlex .PanelField,
.PanelFieldFlex.PanelField {
display: flex;
float: none;
align-items: baseline;
flex-wrap: wrap;
flex-direction: row;
}
.PanelFieldsFlex .PanelField label,
.PanelFieldFlex.PanelField label {
flex-shrink: 0;
}
.PanelFieldsFlex .PanelField.Left .PanelFieldValue,
.PanelFieldFlex.PanelField.Left .PanelFieldValue {
flex-grow: 1;
}
.PanelFieldsFlex .PanelField input,
.PanelFieldFlex.PanelField input {
margin: 0;
}
.PanelFieldsFlex .PanelField.Top,
.PanelFieldFlex.PanelField.Top {
flex-direction: column;
}
@media (min-width: 768px) {
.PanelFieldsFlexNoWrap .PanelField,
.PanelFieldFlexNoWrap.PanelField {
flex-wrap: nowrap;
}
}
/* Form guides
========================================================================== */
/* Indicators and helpers to guide a user through a form */
/* The required class should be applied to the label of a required field.
* It displays the red asterisk next to the label */
.Required {
background-position: left .45em !important;
background-image: url(../images/required.png) !important;
background-repeat: no-repeat;
display: inline;
}
.HideRequiredAsterisks .Required {
background-size: 0;
}
/* special case where a required label is displayed to the right of a field */
.Right .Required {
padding-left: 9px !important;
margin-left: 0 !important;
}
/* The important class should be applied to validation messages (eg. Required)
* that appear next to fields that fail validation on submit */
.Important, .ValidationError {
font-weight: normal;
color: #FF0000;
padding-left: 3px !important;
vertical-align: middle;
}
/* Helper text to describe the purpose of a field */
.Info {
font-size: 90%;
font-weight: normal;
color: #495057;
}
/* .moreInfo <div> used by the info control to display a help pop-up */
.moreInfo {
display: inline;
vertical-align: middle;
}
.moreInfoPanel {
display: block;
max-width: 25em;
}
.unitText {
margin-left: 2px;
white-space: nowrap;
}
/* Form style modifiers
========================================================================== */
/* Wrap several PanelFields in form-inline to make them display inline */
.form-inline .PanelField {
float: none;
clear: none;
width: auto;
display: inline-block;
vertical-align: top;
}
.AlignRight.InputXXSmall::-ms-clear, .InputXXSmallWrapper input.AlignRight[type='text']::-ms-clear, .InputXXSmallWrapper textarea.AlignRight::-ms-clear, .InputXXSmallWrapper .AlignRight.RadComboBox::-ms-clear,
.AlignRight.NarrowTextBox::-ms-clear, .AlignRight.InputXSmall::-ms-clear, .InputXSmallWrapper input.AlignRight[type='text']::-ms-clear, .InputXSmallWrapper textarea.AlignRight::-ms-clear, .InputXSmallWrapper .AlignRight.RadComboBox::-ms-clear {
/* if inputs are aligned right in IE10 the clear button hides the input value
* so we just don't display it
*/
display: none;
}
/* Use the following classes to size inputs (such as text fields)
* They are especially useful for small or large inputs such as quantity or long file paths
*/
.InputXXSmall, .InputXXSmallWrapper input[type='text'], .InputXXSmallWrapper textarea, .InputXXSmallWrapper .RadComboBox,
.NarrowTextBox {
/* NOTE: Narrow text box is obsolete. Use InputXXSmall instead */
width: 3em;
}
.InputXSmall, .InputXSmallWrapper input[type='text'], .InputXSmallWrapper textarea, .InputXSmallWrapper .RadComboBox {
width: 4.3em;
}
.InputSmall, .InputSmallWrapper input[type='text'], .InputSmallWrapper textarea, .InputSmallWrapper .RadComboBox {
width: 7em;
}
.InputMedium, .InputMediumWrapper input[type='text'], .InputMediumWrapper textarea, .InputMediumWrapper .RadComboBox {
width: 11.9em;
}
.InputLarge,
.InputXLarge,
.InputXXLarge {
width: 100%;
}
.InputLargeWrapper input[type='text'], .InputLargeWrapper textarea, .InputLargeWrapper .RadComboBox,
.InputXLargeWrapper input[type='text'],
.InputXLargeWrapper textarea,
.InputXLargeWrapper .RadComboBox,
.InputXXLargeWrapper input[type='text'],
.InputXXLargeWrapper textarea,
.InputXXLargeWrapper .RadComboBox {
width: 100%;
}
@media (min-width: 480px) {
.InputLarge, .InputLargeWrapper input[type='text'], .InputLargeWrapper textarea, .InputLargeWrapper .RadComboBox {
width: 18em;
max-width: 100%;
}
}
@media (min-width: 768px) {
.InputXLarge, .InputXLargeWrapper input[type='text'], .InputXLargeWrapper textarea, .InputXLargeWrapper .RadComboBox,
.WideTextBox {
/* NOTE: WideTextBox is obsolete. Use InputXLarge instead. */
width: 26.5em;
max-width: 100%;
}
.InputXXLarge, .InputXXLargeWrapper input[type='text'], .InputXXLargeWrapper textarea, .InputXXLargeWrapper .RadComboBox {
width: 42em;
max-width: 100%;
}
}
/* Add the WideTextBox class to a RadComboBox to widen its display */
.RadComboBox.WideTextBox {
width: 100%;
min-width: 8em;
max-width: 26.5em;
}
/* Apply the AutoWidth class to allow form fields to take up on the necessary amount of space */
.AutoWidth label, .AutoWidth .Label, .AutoWidth .PanelFieldValue, .AutoWidth {
width: auto !important;
min-width: 1em !important;
}
/* For AutoWidth labels, this adds padding to the right so there is more space between the label and value */
label.AutoWidth, .Label.AutoWidth {
padding-right: .6em;
}
/* Apply the FloatNone class to allow form fields to render without floats
* It is particulary useful for checkbox and radio button controls */
.FloatNone label, .FloatNone input {
float: none !important;
}
@media (max-width: 991px) {
.radio-inline-sm {
display: block;
}
.radio-inline-sm::after {
display: block;
clear: both;
content: "";
}
.radio-inline-sm input {
/* Apply the radio-inline-sm class to display horizontal radio button lists vertically on small displays, like mobile phones */
float: left !important;
}
.radio-inline-sm label {
float: left !important;
}
.radio-inline-sm label + input {
clear: both !important;
}
}
/* CheckBoxList: Wrapper class for a list of related checkboxes */
/* RadioButtonList: Wrapper class for a list of related checkboxes */
.CheckBoxList .PanelField,
.RadioButtonList .PanelField {
padding-top: 0;
}
.CheckBoxList label,
.RadioButtonList label {
float: none !important;
font-weight: normal !important;
}
.CheckBoxList input,
.RadioButtonList input {
float: none !important;
}
.CheckBoxList {
margin-top: .4em;
}
/* Use TotalBox as a wrapper for a PanelField to give it a visual distinction.
* It is intended to be used to call out the total combined price. */
.TotalBox .PanelField, .PanelField.TotalBox {
width: auto;
border: 1px solid #90979E;
}
.TotalBox .PanelField .PanelFieldValue, .PanelField.TotalBox .PanelFieldValue {
font-size: 120%;
font-weight: bold;
padding: .4em;
float: right;
}
/* Applies a consistent width and padding to System Configuration text fields and textareas */
/* Deprecated March 2024 */
.SystemConfigTextField textarea,
.SystemConfigTextField input[type="text"] {
width: 55%;
padding: 0.25em;
}
/* Deprecated March 2024 */
@media (max-width: 767px) {
.PanelWrapXs .PanelField.Left > .PanelFieldValue {
display: block;
clear: left;
float: none;
}
}
/* Form field groupings
========================================================================== */
/* These classes can be used to visually associate sections of a form */
/* Used as a wrapper for items that are a subset of another item
* eg. options that are only enabled if the checkbox above them is checked */
.SubItems {
padding-left: 2.2em;
padding-top: .5em;
}
.ShowLegend legend + .SubItems {
padding-top: 0;
/* don't want too much padding between the legend and the Sub Items*/
}
/* Used for configuration group titles */
.ConfigurationGroup {
text-decoration: underline;
}
/* Fieldsets are hidden by default, but if you use the class ShowFieldset
* either on the fieldset or as a wrapper it will display.
* ShowLegend can be used to display the legend without the border.
*/
div.ShowFieldset fieldset legend,
fieldset.ShowFieldset legend,
.ShowLegend legend {
display: block !important;
color: #444;
font-weight: bold;
}
div.ShowFieldset fieldset,
fieldset.ShowFieldset {
border: 1px solid gray;
padding: 1em;
margin: .05em;
}
div.ShowFieldset fieldset legend,
fieldset.ShowFieldset legend {
padding: 5px;
}
div.ShowFieldset fieldset.FieldsetFormBackground {
background-color: white;
}
/* Questions
========================================================================== */
/* These selectors affect form questions and responses displayed for events and program items */
.FormFieldResponse .PanelFieldValue {
padding-top: .5em;
padding-bottom: .5em;
}
.FormFieldResponse .PanelFieldLabel {
display: block;
float: none;
}
.PanelField.FormFieldResponse label,
.PanelField.FormFieldResponse .Label {
float: none;
}
.FormFieldResponse input {
text-align: left !important;
}
/* Buttons
========================================================================== */
/* IE7 and 8 - position text on the Upload button*/
.TextButton {
vertical-align: middle;
}
/* Buttons that display at the bottom of the page (eg. Save & Close, Save, Cancel buttons) */
.CommandBar {
padding-top: 5px;
z-index: 2;
text-align: right;
}
.CommandBar input,
.CommandBar button {
margin-left: 5px;
}
.ButtonPanel {
width: 100%;
}
/* ButtonBoxList
========================================================================== */
/* ButtonBoxList - used to display big buttons on the dashboards */
div.ButtonBox {
width: 100%;
text-align: center;
}
ul.ButtonBoxList {
padding: 10px;
list-style: none;
overflow: hidden;
margin: 0px 0px -30px 0px;
}
ul.ButtonBoxList li {
display: inline-block;
margin-right: 15px;
overflow: hidden;
padding: 0 0 15px 0;
position: relative;
}
ul.ButtonBoxList li a {
background: #fff;
border: 1px solid #ddd;
color: #333;
display: block;
height: 125px;
overflow: hidden;
padding: 10px 10px;
position: relative;
text-align: center;
text-decoration: none;
}
ul.ButtonBoxList li a:hover {
border: 1px solid #c8c8c8;
}
ul.ButtonBoxList li a p {
line-height: 20px;
padding-bottom: 20px;
}
.Span1 {
width: 40px;
}
.Span2 {
width: 80px;
}
.Span3 {
width: 160px;
}
.Span4 {
width: 200px;
}
/* Touch-friendly Form Controls
========================================================================== */
.radiobutton-buttons {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 0 10px;
}
.radiobutton-buttons li {
list-style: none;
flex: 1 0 100%;
position: relative;
display: flex;
align-items: center;
margin: 10px 0 10px 0;
}
.radiobutton-buttons input[type="radio"] {
appearance: none;
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: -9999px;
}
.radiobutton-buttons input[type="radio"] + label {
font-size: 22px;
font-weight: normal;
background: #fff;
transition: background 0.2s ease-in;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ddd;
display: flex;
align-self: stretch;
align-items: center;
justify-content: center;
padding: 10px 25px;
position: relative;
min-width: 100%;
}
@media (max-width: 767px) {
.radiobutton-buttons input[type="radio"] + label {
margin: 0px;
}
}
.radiobutton-buttons input:checked + label:after {
content: ' ';
display: block;
width: 15px;
height: 15px;
background: #fff;
position: absolute;
top: 8px;
right: 5px;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#confirm");
mask-image: url("../../Assets/images/IconSprite.svg#confirm");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (min-width: 768px) {
.radiobutton-buttons {
flex-direction: row;
}
.radiobutton-buttons li {
flex: 0 0 auto;
margin-right: 40px;
}
}
.radiobutton-btn-group li,
.radiobutton-btn-group-vertical li {
margin: 0;
}
.radiobutton-btn-group li input[type="radio"]:checked + label,
.radiobutton-btn-group li input[type="radio"] + label,
.radiobutton-btn-group-vertical li input[type="radio"]:checked + label,
.radiobutton-btn-group-vertical li input[type="radio"] + label {
border-radius: 0;
border-top: none;
}
.radiobutton-btn-group li:first-of-type input:checked + label,
.radiobutton-btn-group li:first-of-type input + label,
.radiobutton-btn-group-vertical li:first-of-type input:checked + label,
.radiobutton-btn-group-vertical li:first-of-type input + label {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top: 1px solid #ddd;
}
.radiobutton-btn-group li:last-of-type input:checked + label,
.radiobutton-btn-group li:last-of-type input + label,
.radiobutton-btn-group-vertical li:last-of-type input:checked + label,
.radiobutton-btn-group-vertical li:last-of-type input + label {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.radiobutton-btn-group li input:checked + label:after,
.radiobutton-btn-group-vertical li input:checked + label:after {
display: none;
}
@media (min-width: 768px) {
.radiobutton-btn-group li {
margin: 3px;
}
.radiobutton-btn-group li input[type="radio"]:checked + label,
.radiobutton-btn-group li input[type="radio"] + label {
border-radius: 0;
border-top: 1px solid #ddd;
border-left: none;
margin-left: -7px;
}
.radiobutton-btn-group li:first-of-type input:checked + label,
.radiobutton-btn-group li:first-of-type input + label {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left: 1px solid #ddd;
}
.radiobutton-btn-group li:last-of-type input:checked + label,
.radiobutton-btn-group li:last-of-type input + label {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.radiobutton-btn-group-vertical {
flex-direction: column;
max-width: 500px;
}
}
/* ==========================================================================
COMPONENT ANIMATIONS
========================================================================== */
.fade {
opacity: 0;
transition: opacity 0.15s linear;
}
@media screen and (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
.fade.in {
opacity: 1;
}
.collapse {
display: none;
}
.collapse.in {
display: block;
}
tr.collapse.in {
display: table-row;
}
tbody.collapse.in {
display: table-row-group;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
@media screen and (prefers-reduced-motion: reduce) {
.collapsing {
transition: none;
}
}
/* ==========================================================================
PANELS (Bootstrap)
========================================================================== */
/* This is for the new PanelTemplateControl2 and will replace StandardPanel */
/* Base class */
.panel, .StandardPanel {
border: 1px solid transparent;
}
/* this class is applied if the panel is configured to display a border */
.panel-border {
border-color: #ddd;
}
/* Panel contents */
.panel-body, .PanelBody {
padding: 10px;
}
.panel-body::after, .PanelBody::after {
display: block;
clear: both;
content: "";
}
/* Optional heading */
.panel-heading::after,
.panel-group .panel-heading::after,
.PanelHead.Distinguish::after,
.TitleBarCaption::after {
display: block;
clear: both;
content: "";
}
.panel-heading.Distinguish,
.panel-group .panel-heading,
.PanelHead.Distinguish,
.TitleBarCaption {
padding: 6px 10px;
border-bottom: 1px solid #ddd;
}
.panel-heading,
.PanelHead,
.InLineOption {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
/* Within heading, strip any `h*` tag of its default margins for spacing. */
.panel-title {
flex-grow: 2;
margin-top: 0;
margin-bottom: 0;
border-bottom: none;
white-space: pre-wrap;
}
.panel-title > a, .panel-title > a:hover, .panel-title > a:focus, .panel-title > a:active, .panel-title > a:visited {
color: inherit;
text-decoration: none;
}
.panel-heading-options, .PanelHeadOptions,
.InLineOption_Controls_Always_Display {
align-self: center;
margin-left: auto;
display: flex;
align-items: center;
}
.panel-heading-options .IconSprite, .PanelHeadOptions .IconSprite, .InLineOption_Controls_Always_Display .IconSprite,
.panel-heading-options .panel-heading-collapse-img,
.PanelHeadOptions .panel-heading-collapse-img,
.InLineOption_Controls_Always_Display .panel-heading-collapse-img,
.panel-heading-options .panel-heading-collapse-text,
.PanelHeadOptions .panel-heading-collapse-text,
.InLineOption_Controls_Always_Display .panel-heading-collapse-text,
.panel-heading-options .PanelHeadCollapseImage,
.PanelHeadOptions .PanelHeadCollapseImage,
.InLineOption_Controls_Always_Display .PanelHeadCollapseImage,
.panel-heading-options .PanelHeadCollapseText,
.PanelHeadOptions .PanelHeadCollapseText,
.InLineOption_Controls_Always_Display .PanelHeadCollapseText,
.panel-heading-options .PanelHeadOptionsBox,
.PanelHeadOptions .PanelHeadOptionsBox,
.InLineOption_Controls_Always_Display .PanelHeadOptionsBox,
.PanelHeadOptions .rbSkinnedButton {
margin-left: 4px;
margin-right: 0;
vertical-align: middle;
display: inline-block;
}
.panel-heading-options .TextButton, .PanelHeadOptions .TextButton, .InLineOption_Controls_Always_Display .TextButton {
margin-left: .5em;
}
span.panel-heading-collapse-img {
display: inline-block;
width: 20px;
height: 20px;
background-image: url("../images/chevron-up.png");
}
.collapsed span.panel-heading-collapse-img {
transform: rotate(180deg);
}
.panel-description {
padding-left: 1.5rem;
margin-top: -1rem;
}
/**
* Collapsible panels (aka, accordion)
*
* Wrap a series of panels in `.panel-group` to turn them into an accordion with
* the help of our collapse JavaScript plugin.
*/
.panel-group {
margin-bottom: 1.428571429em;
}
.panel-group .panel {
margin-bottom: 0;
overflow: hidden;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group accordion-panel {
display: block;
}
.panel-group accordion-panel + accordion-panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
background-color: #f5f5f5;
}
.panel-group .panel-heading::after {
display: block;
clear: both;
content: "";
}
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #ddd;
}
.panel-group .panel-title {
font-weight: normal;
color: inherit;
white-space: normal;
}
.panel-group .panel-title a {
color: inherit;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #ddd;
}
.panel-group .panel {
border: 1px solid #ddd;
}
/* By default don't display fieldsets
* They can be displayed using CSS classes "ShowFieldset" or "ShowLegend"
*/
.panel fieldset,
.StandardPanel fieldset {
border: none;
padding: 0;
margin: 0;
}
.panel fieldset legend,
.StandardPanel fieldset legend {
display: none;
}
/* ==========================================================================
STANDARD PANEL
========================================================================== */
/* Used by PanelTemplateControl */
/**
* Example HTML (automatically generated by the PanelTemplateControl):
* <div class="StandardPanel">
*
* <div class="PanelHead">
* <h2 class="PanelTitle">Title of the panel</h2>
* <div class="PanelHeadOptions">
* <a href="IconSprite EditIcon">Edit Panel</a>
* <input type="image" class="PanelHeadCollapseImage" />
* </div>
* </div>
*
* <div class="PanelBody">
* ...
* </div>
*
* </div>
*/
/* .StandardPanel <div> Entire panel - Used by skin PanelTemplateControl */
/* Puts a border on the bottom of PanelHeads that include a title */
/* Controls the behavior of a StandardPanel and the appearance of the expand/collapse element within the PanelHead */
/* Currently not used for any specific styling */
/*.Collapsible{}*/
/* PanelHeadOptions wraps any options for the panel (edit, add, collapse, etc.) added to the PanelHead
via the PanelTemplateControl base class */
/* The image or text used to hide a panel. Which displays is determined by the skin file.
(see <asiweb:PanelTemplateControl /> in the skin file.) */
.PanelHeadCollapseText {
text-decoration: underline;
font-weight: normal;
}
.InLineOption {
width: 100%;
}
.TitleBarTitle {
flex-grow: 2;
}
/* .PanelBody <div> Wrapper for the Body of a StandardPanel */
.PanelBody .PanelBody {
/* To prevent double padding in nested PanelBodies */
padding: 0;
}
/* .PanelColumn <div> Wrapper for a Column of a StandardPanel */
.PanelColumn {
display: table-cell;
float: none;
margin-left: 0.125em;
vertical-align: top;
}
/* ==========================================================================
COMPONENTS
========================================================================== */
/* A few components that are used site-wide */
/* Page Tasks: print, email and text-only buttons
========================================================================== */
.PrintButton, .TextOnlyButton, .ExitTextOnlyButton, .EmailButton {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
width: 16px;
height: 16px;
display: block;
background-repeat: no-repeat;
float: left;
margin-right: 3px;
margin-left: 3px;
}
.PrintButton {
background-image: url("../images/icon_printthispage.gif");
}
.TextOnlyButton {
background-image: url("../images/icon_textonly.gif");
}
.ExitTextOnlyButton {
background-image: url("../images/icon_exittextonly.gif");
}
.EmailButton {
background-image: url("../images/icon_email.gif");
}
/* On Behalf Of control
========================================================================== */
ul.obo-actions {
margin: 0;
padding: 0;
}
ul.obo-actions, ul.obo-actions > li {
list-style: none;
display: inline-block;
}
ul.obo-actions > li {
margin-left: .4em;
}
ul.obo-actions > li:first-child {
margin-left: .2em;
}
/* Sub (Left) Navigation
========================================================================== */
#pagesubnav {
width: 10em;
min-width: 10em;
}
#pagesubnav .RadTabStripVertical .rtsLink {
text-align: left;
}
.SubNavPanelHead {
font-size: 180%;
font-weight: bold;
padding: 10px;
}
/* Back-Link Control styling
========================================================================== */
.back-link-control {
padding-left: 10px;
padding-bottom: 7px;
}
.back-link-control::before {
content: '\00AB ';
}
/* Tags
========================================================================== */
/* The area displaying selected tags */
.SelectedTagList {
margin: .5em 0 0 0;
padding: 0;
}
.SelectedTagList li {
list-style-type: none;
display: inline-block;
padding: .2em .5em;
margin: 0 .5em .5em 0;
}
/* A tag within the selected tag area */
.SelectedTagList .Tag {
background-color: #f5f5f5;
}
/* The (None Selected) message within a tag selector */
.NoResults {
font-style: italic;
}
/* Attachments
========================================================================== */
.attachment {
display: inline-block;
border: 1px solid #ddd;
padding: 0.75rem 1rem;
color: #333333;
background-color: #f5f5f5;
font-weight: bold;
text-decoration: none;
border-radius: 3px;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.attachment:hover, .attachment:focus, .attachment:active {
color: #333333;
text-decoration: underline;
}
.attachment.Disabled, .attachment.aspNetDisabled, .attachment[disabled] {
color: #495057;
}
.attachment.Disabled:hover, .attachment.Disabled:focus, .attachment.Disabled:active, .attachment.aspNetDisabled:hover, .attachment.aspNetDisabled:focus, .attachment.aspNetDisabled:active, .attachment[disabled]:hover, .attachment[disabled]:focus, .attachment[disabled]:active {
color: #495057;
text-decoration: none;
}
/* Chosen 1.8.7
https://github.com/harvesthq/chosen
*/
.chosen-container {
min-width: 15em !important;
}
/* @group Base */
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
-webkit-user-select: none;
user-select: none;
}
.chosen-container * {
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
z-index: 1010;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
clip: rect(0, 0, 0, 0);
clip-path: inset(100% 100%);
}
.chosen-container.chosen-with-drop .chosen-drop {
clip: auto;
clip-path: none;
}
.chosen-container a {
cursor: pointer;
}
.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
margin-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #999999;
}
.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
content: ":";
padding-left: 2px;
vertical-align: top;
}
/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 25px;
border: 1px solid #aaa;
border-radius: 5px;
background-color: #fff;
background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
background-clip: padding-box;
box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 24px;
}
.chosen-container-single .chosen-default {
color: #999;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
background: url("../images/chosen-sprite.png") -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 18px;
height: 100%;
}
.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
background: url("../images/chosen-sprite.png") no-repeat 0px 2px;
}
.chosen-container-single .chosen-search {
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
background: url("../images/chosen-sprite.png") no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-single .chosen-drop {
margin-top: -1px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
clip: rect(0, 0, 0, 0);
clip-path: inset(100% 100%);
}
/* @end */
/* @group Results */
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 5px 6px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
background-color: #3875d7;
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 5px;
width: 100%;
height: auto;
border: 1px solid #aaa;
background-color: #fff;
background-image: linear-gradient(#eee 1%, #fff 15%);
cursor: text;
}
.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
margin: 1px 0;
padding: 0;
height: 25px;
outline: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
width: 25px;
}
.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 5px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eeeeee;
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 4px;
right: 3px;
display: block;
width: 12px;
height: 12px;
background: url("../images/chosen-sprite.png") -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
background-color: #e4e4e4;
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
/* @end */
/* @group Active */
.chosen-container-active .chosen-single {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
border: 1px solid #aaa;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-image: linear-gradient(#eee 20%, #fff 80%);
box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: none;
background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
color: #222 !important;
}
/* @end */
/* @group Disabled Support */
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}
.chosen-disabled .chosen-single {
cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
/* @end */
/* @group Right to Left */
.chosen-rtl {
text-align: right;
}
.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}
.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}
.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}
.chosen-rtl .chosen-choices li {
float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}
.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
background: url("../images/chosen-sprite.png") no-repeat -30px -20px;
direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}
/* @end */
/* @group Retina compatibility */
@media only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
.chosen-rtl .chosen-search input[type="text"],
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type="text"],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
background-image: url("../images/chosen-sprite@2x.png") !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
}
/* @end */
/* ==========================================================================
DROPDOWN MENUS
========================================================================== */
/* This comes from Bootstrap v. 3.4.1, but has been modified */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-bottom: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1100;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 8px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-menu > li > a,
.dropdown-menu > li > div {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.428571429;
white-space: nowrap;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
text-decoration: none;
background-color: #0096c7;
outline: 0;
}
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
.dropdown-menu-right,
.pull-right > .dropdown-menu,
.AlignRight .dropdown-menu {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 3px 20px;
color: #7c7c7c;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1090;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
@media (min-width: 992px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
.navbar-right .dropdown-menu-left {
left: 0;
right: auto;
}
}
/* ==========================================================================
BUTTON GROUPS
========================================================================== */
/* This comes from Bootstrap v. 3.4.1, but has been modified */
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar::after {
display: block;
clear: both;
content: "";
}
.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-group.open .dropdown-toggle.btn-link {
box-shadow: none;
}
.btn .caret {
margin-left: 0;
}
.btn-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group::after {
display: block;
clear: both;
content: "";
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 5px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 5px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
/* ==========================================================================
USER ALERTS
========================================================================== */
/* Loading Panels
========================================================================== */
/* Displays a loading indicator when the page is loading
Also used for user messages that are unobtrusive and disappear after time.
*/
.ProgressDiv,
.MiniMessage {
position: fixed;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 10000;
margin-top: 1px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #f5f5f5;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.ProgressDiv.Interior,
.MiniMessage.Interior {
/* For use on an interior progress bar, such as within a single iPart
* Must be contained within something with position:relative.
* You man use the class "PositionRelative" as a wrapper.
*/
position: absolute;
}
.ProgressDiv {
width: 200px;
height: 2.678571429em !important;
}
.MiniMessage {
width: 350px;
max-width: 100%;
}
/* Page Alerts
========================================================================== */
/**
* These display at the top of the page to alert users of errors, warnings, successful completion, etc.
* They are generated by the UserMessage control.
* The iMISUserMessage classes are obsolete - use AsiMessage and Asi[MessageType] instead
*
* Example HTML:
* <div class="AsiMessage">
* <ul>
* <li class="AsiError">
* <img class="iMISUserMessageIcon" src="images/AsiError.png" alt="Error" />
* <span>Oops! There's an error on this page!</span>
* </li>
* </ul>
* </div>
*/
/**
* May also be used along with the MiniMessage class to display a small,
* unobtrusive message at the top of the screen. Use attribute data-usermessage="autohide"
* to automatically hide the message after 5 seconds.
*
* Example HTML:
* <div class="AsiSuccess MiniMessage" data-usermessage="autohide">
* <img class="iMISUserMessageIcon" src="images/AsiSuccess.png" alt="Success" />
* <span>Successfully saved</span>
* </div>
*/
.AsiMessage > ul,
.AsiMessage > ol {
margin: 5px;
padding-left: 0;
}
.iMISUserMessageIcon {
float: left;
width: 32px;
margin-right: 10px;
}
.AsiValidation,
.AsiValidationSummary {
margin-left: 5px;
margin-right: 5px;
padding-top: 0;
padding-bottom: 0;
}
.AsiValidation.AlertSmall,
.AsiValidationSummary.AlertSmall {
width: 100%;
}
@media (min-width: 768px) {
.AsiValidation.AlertSmall,
.AsiValidationSummary.AlertSmall {
width: 25%;
}
}
.AsiInformation,
.AsiSuccess,
.AsiWarning,
.AsiError,
.AsiValidation,
.AsiValidationSummary,
.AsiNeutral,
.AsiImportant {
border: 1px solid;
margin-top: 5px;
margin-bottom: 5px;
padding: 12px 10px;
color: #000000;
list-style-type: none;
overflow: hidden;
}
span.AsiInformation,
span.AsiSuccess,
span.AsiWarning,
span.AsiError,
span.AsiValidation,
span.AsiValidationSummary,
span.AsiNeutral {
padding: .15em .25em .2em;
}
.AsiMessageText {
overflow: hidden;
}
.iMISUserMessageIcon + .AsiMessageText {
/* this basically middle-aligns the first line of text with the image */
margin-top: 8px;
}
.AsiInformation {
border-color: #007ba3;
background-color: #BDE5F8;
}
.AsiSuccess {
border-color: #45812f;
background-color: #dff0d8;
}
.AsiWarning {
border-color: #bb5000;
background-color: #FEEFB3;
}
.AsiError {
border-color: #d03528;
background-color: #ffd8d8;
}
.AsiValidation {
border-color: #D63301;
background-color: #FFCCBA;
}
.AsiImportant {
border-color: #c74b49;
}
/* To show a success message plus icon outside of the page level messages, apply class="AsiSuccess AsiSuccessIcon" */
.AsiInformationIcon, .AsiSuccessIcon, .AsiWarningIcon, .AsiErrorIcon, .AsiValidationSummary {
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 3.3em;
}
span.AsiInformationIcon, span.AsiSuccessIcon, span.AsiWarningIcon, span.AsiErrorIcon, span.AsiValidationSummary {
display: inline-block;
width: 30px;
height: 30px;
padding-left: 0;
background-position: 0 0;
flex-shrink: 0;
}
.AsiInformationIcon {
background-image: url("../images/AsiInformation.png");
}
.AsiSuccessIcon {
background-image: url("../images/AsiSuccess.png");
}
.AsiWarningIcon {
background-image: url("../images/AsiWarning.png");
}
.AsiErrorIcon {
background-image: url("../images/AsiError.png");
}
.AsiValidationSummary {
border-color: #D63301;
background-color: #FFCCBA;
background-image: url("../images/AsiValidation.png");
}
.AsiNeutral {
border-color: #ddd;
}
.AsiErrorInline {
border-color: #D8000C !important;
background-color: #FFBABA;
border: 1px solid;
font-weight: normal;
padding: .5em;
margin: 10px 0 5px 5px;
}
.AsiSystem ul li {
list-style-type: none;
}
div.AsiSystem {
display: block;
width: 100%;
overflow: hidden;
color: #000000;
background-color: #FEEFB3;
padding: .3em .3em .3em 1em;
}
/* The iMISUserMessage classes are obsolete */
.iMISUserMessage li {
list-style-type: none;
}
.iMISUserMessage img {
vertical-align: middle;
margin-right: 5px;
}
.iMISUserMessageError {
color: red;
font-weight: bold;
}
.iMISUserMessageWarning, .iMISUserMessageInformation {
color: blue;
font-weight: bold;
}
.iMISUserMessageLabel {
display: none;
/* hide the error/warning prefix */
}
/* Message Notification - I'm not sure if these are used anywhere - they may be able to be removed */
.info, .success, .warning, .validation {
margin: 5px 0;
padding: 5px;
text-align: center;
width: 100%;
display: block;
}
.info {
color: #00529B;
}
.success {
color: #4F8A10;
}
.warning {
color: #9F6000;
}
/* Inline alerts
========================================================================== */
.Error {
display: block;
padding-right: 0.188em;
padding-left: 0.188em;
margin-bottom: 0.25em;
width: auto;
color: #d03528;
font-weight: bold;
}
/* Used for guiding the user to the next step, such as in the Event Display */
.HelperText {
color: #007ba3;
font-weight: bold;
}
/* If there's an error rendering an iPart a message will display with this class */
.iPartRenderError {
color: red;
overflow-x: auto;
-ms-overflow-x: auto;
}
/* Page errors
========================================================================== */
/* These styles are for error pages (page not found, access denied, etc.) */
.ErrorNormal {
padding: 10px;
display: block;
margin: auto;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.ErrorNormalWide {
padding: 10px;
display: block;
margin: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.ErrorNormal .ErrorType,
.ErrorNormalWide .ErrorType {
font-weight: bold;
padding-top: 15px;
display: block;
font-size: 190%;
color: #cc0f16;
}
.ErrorNormal .ErrorTypeMessage,
.ErrorNormalWide .ErrorTypeMessage {
display: block;
padding-top: 15px;
font-size: 110%;
color: #444;
}
.ErrorNormal img,
.ErrorNormalWide img {
float: left;
}
/* ==========================================================================
GLOBAL STATES
========================================================================== */
/* Styles to indicate state (selected, hovered, etc.) - used throughout iMIS */
/* Used in the PeoplePanel and elsewhere to denote a selected item within a group. */
.SelectedItem {
background-color: lightblue;
opacity: 1;
filter: Alpha(opacity=100);
/* Sets the opacity for IE8 */
}
/* ==========================================================================
DESIGN FLAIR
========================================================================== */
/* Reusable classes that give a particular emphasis or deemphasis to a piece of content */
/* Callout Bubble
========================================================================== */
/* Puts the content it wraps in a lightly shaded bubble (similar to a conversation bubble) */
.CalloutBubbleItem {
display: inline-block;
vertical-align: top;
margin: 0;
padding-right: 15px;
}
.CalloutBubble {
position: relative;
display: inline-block;
min-width: 150px;
vertical-align: top;
padding: 3px 10px;
background: #eeeeee;
box-sizing: border-box;
}
.CalloutBubble:after {
content: "";
position: absolute;
top: 3px;
left: -15px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #eeeeee;
display: block;
width: 0;
z-index: 1;
}
/* Line Thru
========================================================================== */
/* A small piece of text with a line on either side */
/* E.g. the "or" text on the sign in iPart (when social networking sign in is enabled) */
.LineThruContainer {
padding-top: .5em;
padding-bottom: .5em;
}
.LineThruBlock {
border-bottom: 1px solid #eeeeee;
cursor: default;
line-height: 1px;
margin: 10px;
text-align: center;
}
.LineThru {
background-color: #fff;
font-size: 88%;
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
padding-bottom: 2px;
}
/* Grid Layout for Error Pages
========================================================================== */
.ErrorPageContainer {
display: flex;
align-items: center;
justify-content: center;
height: 85vh;
}
.ErrorPageContainer .ErrorPageGrid {
display: grid;
grid-template-columns: 30% 70%;
grid-template-areas: "PageHeading ."
"ErrorMessage BgImage"
"PageFooter PageFooter";
grid-template-rows: 1fr 2fr;
margin: 0 auto;
max-width: 800px;
}
.ErrorPageContainer .ErrorPageGrid img {
grid-area: 1 / 1 / 3 / 3;
}
.ErrorPageContainer .ErrorPageGrid .PageHeading {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: PageHeading;
display: none;
}
.ErrorPageContainer .ErrorPageGrid .ErrorMessage {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: ErrorMessage;
display: none;
}
.ErrorPageContainer .MobileErrorMessage {
text-align: center;
}
.EmptyCart {
min-height: 350px;
text-align: center;
background: url("../../Assets/images/emptycart.png") bottom center no-repeat;
background-size: 100% auto;
max-width: 375px;
margin: 0 auto 50px auto;
}
/* ==========================================================================
IMAGES
========================================================================== */
/* 6.1 Thumbnails
========================================================================== */
/* The thumbnail class is currently being used by the GroupListEditor control
* to render the group member thumbnails */
/* Makes tree thumbnail images a fixed size */
.MediumThumbnail img.rtImg,
.MediumThumbnail img.Thumbnail {
width: 32px;
height: 32px;
}
.MediumThumbnail img.Thumbnail {
padding-right: 3px;
}
.img-thumb-24 {
width: 24px;
}
.img-thumb-32 {
width: 32px;
}
.img-thumb-40 {
width: 40px;
}
.img-thumb-50 {
width: 50px;
}
.img-thumb-64 {
width: 64px;
}
.img-thumb-128 {
width: 128px;
}
.img-thumb-200 {
width: 200px;
}
.LargeThumbnail {
width: 100px;
}
.ExtraLargeThumbnail {
width: 150px;
}
/* ==========================================================================
TELERIK CONTROLS
========================================================================== */
/* Reset fonts on various Telerik Controls */
.RadUpload_Default, .RadUpload_Default a, .RadUpload_Default input,
.RadUploadProgressArea_Default, .RadUploadProgressArea_Default input, .RadUploadSubmit,
.RadGrid, .RadGrid .rgMasterTable, .RadGrid .rgDetailTable, .RadGrid .rgGroupPanel table, .RadGrid .rgCommandRow table,
.RadGrid .rgEditForm table, .RadGrid .rgPager table, .RadGrid .rgPagerCell, .RadGrid.RadGrid .rgPager .rgPagerButton,
.GridToolTip, .RadTreeView, .RadTreeView a.rtIn, .RadTreeView .rtEdit .rtIn input,
.RadSplitter, .reToolbar a, .reDropdown, .reSpinBox input, .RadEditor input, .reModule, .reModule td, .reEditorModes a, .reDropDownBody,
.reDropDownBody td, .reAjaxspell_wrapper, .reAjaxspell_button, .reAjaxspell_addicon, .reAjaxspell_ignoreicon, .reAjaxspell_okicon,
.reInsertTable .reTlbVertical ul a.reToolText, .reColorPicker .reCustomColor, .RadUploadProgressArea_Bootstrap,
.RadWindow, .RadInput {
font: inherit !important;
font-family: inherit !important;
}
.k-widget.k-widget {
font-size: inherit;
line-height: inherit;
}
.RadGrid.SelectableRow .rgSelectedRow, .RadGrid.SelectableRow td.rgSelectedRow {
font-weight: bold;
}
/* For IE the Rad date and time input field height behave different that Chrome & FF */
/*html body .PanelFieldValue .riSingle [type='text'].riTextBox {
height: 1.75em !important;
}*/
/* RadTreeView
========================================================================== */
/* Gives tree nodes a clickable look */
.RadTreeView .rtIn:hover {
cursor: pointer;
}
/* Remove bullets from list items in tree nodes */
.RadTreeView ul li.rtLI {
list-style: none;
}
/* RadTooTip
========================================================================== */
/* Links in the RadToolTip control were not obvious enough. Needed a little bit of tweeking.
* Example usage: the QueryMenu control's "Select a query" drop-down
*/
/* This is needed so that any StyledHyperlinks within a RadToolTip will show the 'hand' cursor on hover. */
.RadToolTip_Telerik a {
cursor: pointer !important;
color: Black;
}
.RadToolTip_Telerik a:hover {
background-color: #DDD;
}
.RadToolTip_Telerik a.fb_button:hover {
background-color: #29447e;
}
.RadToolTip .radToolTip_CloseButton {
width: 28px;
height: 28px;
border: 1px solid #cdcdcd;
border-radius: 45px;
margin: -5px -5px 0 0;
background-image: url(../images/IconSprite.png);
background-position: -486px 4px;
background-color: #f9f9f9;
right: -9px;
top: -10px;
display: block;
position: absolute;
}
.RadToolTip .radToolTip_CloseButton:hover {
background-position: -486px -31px;
}
/* Style of the QueryMenu popup column headers. */
.ColumnHeader {
font-weight: bold !important;
}
/* Style of the QueryMenu result grid headers. */
.ResultsHeader {
font-weight: bold !important;
}
/* The RadToolTip used by the GroupListEditor for the hover pop-up */
.AdvancedToolTip {
background: #ffffff;
padding: 5px;
font-size: 90%;
}
/* RadUpload
========================================================================== */
/* Fixes an alignment issue for the rad uploader */
.RadUploadPanelMessage {
width: 275px;
}
@media (max-width: 1024px) {
.RadUploadPanel input.ruButton.ruBrowse, .RadUploadPanel input.ruButton.ruRemove, .RadUploadRemoveFile {
display: block !important;
}
.RadUploadPanelMessage {
width: 200px;
}
}
@media (max-width: 768px) {
.RadUploadPanel input.ruButton.ruBrowse, .RadUploadPanel input.ruButton.ruRemove, .RadUploadRemoveFile {
display: inline !important;
}
.RadUploadPanelMessage {
width: 250px;
}
}
.RadUpload .ruFileInput,
.RadUpload .ruFakeInput,
.RadUpload .ruButton,
.RadUploadProgressArea .ruButton,
.RadUpload .ruFileWrap {
vertical-align: middle !important;
}
/* Upload Image displayed as a list and Upload buton is off */
.RadUpload .ruInputs li {
list-style-type: none;
}
.RadUpload.RadUpload .ruBrowse,
.RadUpload.RadUpload .ruButton {
height: auto;
width: auto;
}
/* Sets Button position next to the radUpload element */
.RadUpload + .TextButton {
float: left;
margin-left: 5px;
}
/* Special Style Override styles for Telerik RadUpload control */
.RadUploadProgressArea ul li {
list-style-type: none !important;
display: block;
}
.RadUpload .RadUpload_Default,
.RadUpload .ruFileWrap {
padding-right: 2px !important;
width: auto !important;
}
/* Sets left Padding for elements inside PanelTableValue */
.PanelTableValue img, .PanelTableValue .RadUpload {
padding-left: 0.250em;
}
.RadUpload.RadUpload .ruFileWrap {
height: auto !important;
white-space: break-spaces;
}
@media (min-width: 768px) {
.RadUpload.RadUpload .ruFileWrap {
white-space: nowrap;
}
}
.RadUpload.RadUpload .ruButton {
line-height: 1.6;
}
/* RadButton
========================================================================== */
/* Text on RadButtons in image mode are was not available for screen readers.
* This fixes that issue.
*/
.rbText.rbHideElement {
display: inline;
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
/* RadGrid
========================================================================== */
/* Force Radgrid to fit on small devices and become scrollable */
.RadGrid {
overflow: auto !important;
width: 100% !important;
}
.RadGrid .rgDataDiv {
overflow: inherit !important;
}
/* Resolve missing left border in the header and footer paging sections when rendered in Firefox */
.RadGrid_Default .rgPager .rgPagerCell {
border-width: 1px 0 1px 0 !important;
}
@media (max-width: 767px) {
.RadGrid .rgPager .rgAdvPart {
/* Hide the Page Size dropdown on smaller screens */
display: none;
}
}
.RadGrid .rgHeader a {
text-decoration: underline !important;
}
/* add a wide border to sub-grids to create visual separation */
.RadGrid .rgMasterTable .rgDetailTable,
.ChildGridWrapper .rgMasterTable {
border: 10px solid #ddd;
}
/* Use to style the lister grid when use in a compact view */
.SimpleGrid tr td {
padding-bottom: 0.188em;
padding-top: 0.188em;
}
.RadGrid .rgNoRecords TD {
padding: 4px 7px;
color: #707070;
}
.ListSearchPrompt {
padding: 5px 0;
color: #707070;
}
.rgHeader.rgExpandCol {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.rgEditForm {
padding: 10px;
}
.RadGrid.RadGrid .rgEditRow > td > [type="text"] {
border: 1px solid #ccc;
}
.RadGrid input[type="image"] {
vertical-align: middle;
}
/* Turn off borders for the Contact Community iPart */
.SimpleGrid .RadGrid {
border-style: none;
}
/* RadEditor
========================================================================== */
.RadEditor .reBottomProperties .reModuleLabel, .RadEditor .reBottomProperties input, .RadEditor .reBottomProperties .reDropdown {
font-size: 12px !important;
}
.RadEditor .reBottomProperties input {
height: auto;
padding: 1px 3px;
}
.reDropDownBody.reApplyClass {
width: auto !important;
max-width: 500px;
overflow: auto;
}
.reDropDownBody table td {
padding: 5px;
border-bottom: solid 1px #e8e8e8;
}
.InsertFieldBody {
width: auto !important;
max-width: 500px;
overflow: auto;
max-height: 250px;
}
/*RadEditor tool bar title dropdown*/
a.reDropdown.reFontSize {
width: 60px !important;
}
.RadEditor.RadEditor.SimpleContentEditor .reContentArea {
padding: 0;
margin: 3px;
min-height: 400px !important;
font-size: inherit !important;
border-color: unset !important;
}
.RadEditor.RadEditor.SimpleContentEditor .reContentArea:focus-visible {
outline: unset;
border-color: unset;
}
.RadEditor .reEmptyMessage {
margin: 3px;
}
/* Inserting an image when we don't have access to the image gallery
e.g. the Content Block iPart
*/
.reInsertImageWrapper label {
margin-left: 0;
padding-left: 0;
}
.reInsertImageWrapper .reConfirmCancelButtonsTblLight .reAllPropertiesLight button {
width: auto !important;
}
/* The image properties window was exceeding its bounds */
.RadWindow[id*='_dialogOpenerImageProperties'] {
overflow-y: auto;
}
/* the image for the Insert Content Link button */
.reToolIcon.reInsertContentLink:before {
content: '\e672';
}
.reToolBarWrapper a.reToolDisabled.reTool:focus,
.reToolBarWrapper a.reToolDisabled.reTool:focus .reSplitArrow {
background-color: #adb5bd;
border-color: #adb5bd;
}
.reAjaxspell_button {
border: 1px solid #d7d7d7 !important;
background-color: #ebebeb !important;
color: #000 !important;
}
/* Correct Content Html Editor right click dialog labels that are hidden by above screen ready style */
.reDropDownBody span + .reButton_text {
position: relative;
font-size: 12px;
left: 0;
}
.RadEditorTextArea {
min-height: 100px;
min-width: 100px;
height: auto !important;
width: auto !important;
}
.RadEditor.reWrapper.HtmlEditor .reContent,
.RadEditor.RadEditor.ContentHtmlEditor .reContent {
min-height: 130px;
}
.RadEditor.RadEditor.HtmlEditorTextBoxStyle {
border: 1px solid #ccc;
padding: 0;
background-color: #fff;
height: auto !important;
}
.RadEditor.RadEditor.HtmlEditorTextBoxStyle .reContent {
height: auto !important;
border-width: 0;
}
.RadEditor.RadEditor.HtmlEditorTextBoxStyle .reTableDiv,
.RadEditor.RadEditor.HtmlEditorTextBoxStyle .reToolBarWrapper,
.RadEditor.RadEditor.HtmlEditorTextBoxStyle .reToolCell,
.RadEditor.RadEditor.HtmlEditorTextBoxStyle .reBottomProperties {
display: none;
}
.RadEditor.RadEditor.HtmlEditorTextBoxStyle .reContentCell {
border: none !important;
}
.RadEditor.RadEditor.HtmlEditorTextBoxStyle.reSingleLineEdit textarea.reTextArea {
height: 2.2em !important;
padding: 5px 10px;
font: inherit;
color: inherit;
}
.RadEditor.RadEditor.HtmlEditorTextBoxStyle.reMultiLineEdit textarea.reTextArea {
height: 4.4em !important;
padding: 5px 10px;
font: inherit;
color: inherit;
}
/* RadScheduler
========================================================================== */
/* Used by the Event Calendar iPart */
/*IE8 browser hack so that the RadScheduler displays correctly */
.rsHorizontalHeaderTable, .rsContentTable {
width/*\**/: 100%\9;
}
/* Adds an ellipsis to long event titles in the Event Calendar */
.rsAptContent {
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
/* Keeps Calendar Header on top of grid */
.rsEventCalendar div.rsHeader {
z-index: 999 !important;
}
.RadScheduler .rsDateHeader {
height: auto !important;
color: #444 !important;
}
.RadScheduler .rsApt {
cursor: pointer;
}
/* Used by the Program Item Occurrences Display iPart */
.OccurrenceScheduler .rsMonthView .rsAptCreate, .OccurrenceScheduler .rsWeekView .rsAllDayRow .rsAptCreateRow1, .OccurrenceScheduler .rsWeekView .rsAptCreateRow2 {
background-image: url("../images/icon_add.png") !important;
background-repeat: no-repeat !important;
background-position: 1% 97% !important;
cursor: pointer;
}
.OccurrenceScheduler .rsWeekView .rsAllDayRow .rsAptCreateRow1 {
background-position: 1% 50% !important;
}
.OccurrenceScheduler .rsDayView .rsAllDayRow .rsLastCell:hover, .OccurrenceScheduler .rsDayView .rsAptCreateRow2 {
background-image: url(images/icon_add.png) !important;
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
cursor: pointer;
}
/* Used by the Program Occurrences Check-in */
.OccurrenceCheckin .rsDayView .rsAptContent, .OccurrenceCheckin .rsWeekView .rsAptContent {
position: relative;
top: 50% !important;
transform: translateY(-50%);
border-top: 0;
text-align: center;
font-weight: bold;
}
/* RadMenu
========================================================================== */
/* Used by the primary navigation bar (PageNavR) and ObjectBrowser */
/* Apply z-Index to RadMenu generally */
.RadMenu {
z-Index: 100 !important;
}
/* Make the navigation menu items overlay other RadMenu instances */
.rmSized, .MainMenu {
z-Index: 1001 !important;
}
/* Applies to links in navigation menu */
.RadMenu .rmItem a.rmLink {
min-width: 10px !important;
cursor: pointer;
}
.RadMenu .rmItem a.rmLink.rmDisabled {
cursor: default;
}
/* Handle the case where the menu bar does not expand horizontally to the size of the parent container */
.RadMenu.RadMenu ul.rmHorizontal {
float: none;
}
/* The RadContextMenu is used by the options drop-down control on TitleBar */
.RadMenu.RadMenu_Context {
/* This is required to display the On Behalf Of control's action dropdown
on top of the primary nav menu in the Staff Site */
z-Index: 7000 !important;
}
/* RadWindow
========================================================================== */
/* Remove the space in the RadWindow title bar where the window icon would display */
.RadWindow .rwIcon {
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* Styles for the Title in the Lister2 control */
.GridTitlePanel .Title {
font-weight: bold;
font-size: 120%;
}
/* To improve accessibility, this applies a style when RadWindow control buttons receive focus, so that keyboard users can see what is selected */
.RadWindow .rwControlButtons a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
/* RadSplitter
========================================================================== */
/* Lighten up the RadSplitter border color to better match the rest of Object Browser */
.RadSplitter_Default, .RadSplitter_Default .rspPaneTabContainer, .RadSplitter_Default .rspPane,
.RadSplitter_Default .rspResizeBar, .RadSplitter_Default .rspSlideContainerResize,
.RadSplitter_Default .rspPaneHorizontal, .RadSplitter_Default .rspResizeBarHorizontal,
.RadSplitter_Default .rspSlideContainerResizeHorizontal {
border-color: #ccc !important;
}
/* RadDateTimePicker
========================================================================== */
/* Adjust the width of control to make both date and time visible */
div[id$="rad_DTp_wrapper"] {
width: 15.5em;
}
/* RadTabStrip
========================================================================== */
/* These styles needed for accessibility - underline focused tabs */
a.rtsLink:focus, a.rtsLink.rtsSelected:focus {
text-decoration: underline;
}
a.rtsLink:hover {
text-decoration: underline !important;
}
a.rtsLink.rtsDisabled:hover {
text-decoration: none !important;
}
/**
* SubTabStrip
*/
/* RadTabStrip using the SubTabs skin id. Used in IQA */
.SubTabStrip {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.SubTabStrip a.rtsLink.rtsSelected {
font-weight: bold;
border-bottom: 3px solid #c0c0c0;
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
color: #000000;
color: rgba(0, 0, 0, 0.8);
}
.SubTabStrip a.rtsLink {
float: left;
padding-top: 5px;
padding-bottom: 5px;
transition: border-color 0.2s linear;
}
.SubTabStrip a.rtsLink.rtsDisabled {
opacity: 0.5;
filter: Alpha(opacity=50);
}
/* RadChart
========================================================================== */
/* Wrapper class "CenterChart" will force a RadChart to display in the center of its content zone */
.CenterChart .RadChart {
display: block;
margin: 1em auto;
}
/* Wrapper class "Chart" will give a RadChart a little extra spacing */
.Chart .RadChart {
display: block;
margin: 1em;
}
/* Chart/Grid toggle icon area */
.ChartToggle {
cursor: pointer;
}
/* RadSocialShare
========================================================================== */
/* Using the same selector twice makes it more specific,
* which means we don't have to use !important. :)
*/
.RadSocialShare.RadSocialShare {
border: none;
background-color: transparent;
}
.RadSocialShare .sshContent .sshText {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
/* RadRotator
========================================================================== */
/* Incomplete borders were showing for the RadRotator, so just turn them off */
.RadRotator.RadRotator_Default .rrClipRegion {
border-color: transparent;
}
/* ==========================================================================
KENDO CONTROLS
========================================================================== */
/* Notification
========================================================================== */
.k-notification-group.k-notification-group {
max-width: 50rem;
z-index: 2;
}
.k-notification.k-notification {
font-size: inherit;
line-height: inherit;
}
.NotificationAlertGroup.k-notification {
background-color: transparent;
box-shadow: none;
padding: .6em .5em 0 0;
}
.NotificationAlertGroup.k-notification .AlertItem {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
}
.NotificationAlertGroup.k-notification.k-notification-closable .k-i-close {
background-color: #cccccc;
border-radius: .5em;
margin-top: -.3em;
margin-left: -.6em;
font-size: 160%;
z-index: 99;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.NotificationAlertGroup.k-notification.k-notification-closable {
box-shadow: none;
border-style: none;
}
.RadLoadingPanel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ==========================================================================
RADMENU
========================================================================== */
/**
* For responsive design we have to turn the base RadMenu
* style sheet off. So these styles make sure the RadMenu still works
* wherever needed.
*/
/* specific selectors that won't conflict with the primary nav */
.rmNeedBaseStyles {
white-space: nowrap;
float: left;
position: relative;
z-index: 7000\9;
/* Left-to-right support */
}
.rmNeedBaseStyles:after,
.rmNeedBaseStyles .rmRootGroup:after {
content: "";
display: block;
height: 0;
overflow: hidden;
line-height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.rmNeedBaseStyles .rmRootGroup,
.rmNeedBaseStyles ul.rmVertical,
.rmNeedBaseStyles ul.rmHorizontal,
.rmNeedBaseStyles ul.rmRootScrollGroup {
margin: 0;
padding: 0;
position: relative;
left: 0;
display: inline-block;
}
.rmNeedBaseStyles ul.rmVertical,
.rmNeedBaseStyles ul.rmHorizontal,
.rmNeedBaseStyles ul.rmRootScrollGroup {
display: none;
float: left;
}
* html .rmNeedBaseStyles {
float: left;
}
.rmNeedBaseStyles ul.rmActive,
.rmNeedBaseStyles ul.rmRootGroup,
.rmNeedBaseStyles .rmText,
.rmNeedBaseStyles a.rmLink {
display: block;
}
.rmNeedBaseStyles div.rmText {
white-space: normal;
background: transparent;
}
.rmNeedBaseStyles a.rmLink {
cursor: default;
}
.rmNeedBaseStyles .rmItem {
float: left;
position: relative;
list-style-image: none;
list-style-position: outside;
list-style: none;
line-height: inherit;
}
* html .rmNeedBaseStyles {
display: inline;
}
.rmNeedBaseStyles .rmHorizontal .rmItem {
clear: none;
}
.rmNeedBaseStyles .rmVertical .rmItem {
clear: both;
}
.rmNeedBaseStyles .rmLeftArrow,
.rmNeedBaseStyles .rmTopArrow,
.rmNeedBaseStyles .rmBottomArrow,
.rmNeedBaseStyles .rmRightArrow {
position: absolute;
z-index: 2000;
text-indent: -1000em;
font-size: 0;
line-height: 0;
outline: 0;
overflow: hidden;
}
.rmNeedBaseStyles .rmLeftArrowDisabled,
.rmNeedBaseStyles .rmTopArrowDisabled,
.rmNeedBaseStyles .rmBottomArrowDisabled,
.rmNeedBaseStyles .rmRightArrowDisabled {
display: none;
text-indent: -1000em;
font-size: 0;
line-height: 0;
}
.rmNeedBaseStyles .rmBottomArrow,
.rmNeedBaseStyles .rmBottomArrowDisabled {
margin-bottom: -1px;
}
.rmNeedBaseStyles .rmLeftImage {
border: 0;
float: left;
}
.rmNeedBaseStyles.RadMenu_rtl {
text-align: right;
}
.rmNeedBaseStyles.RadMenu_rtl,
.rmNeedBaseStyles.RadMenu_rtl ul.rmVertical,
.rmNeedBaseStyles.RadMenu_rtl .rmItem {
float: right;
}
.rmNeedBaseStyles.RadMenu_rtl .rmLeftArrow, .rmNeedBaseStyles.RadMenu_rtl .rmTopArrow, .rmNeedBaseStyles.RadMenu_rtl .rmBottomArrow, .rmNeedBaseStyles.RadMenu_rtl .rmRightArrow,
.rmNeedBaseStyles.RadMenu_rtl .rmLeftArrowDisabled, .rmNeedBaseStyles.RadMenu_rtl .rmTopArrowDisabled, .rmNeedBaseStyles.RadMenu_rtl .rmBottomArrowDisabled, .rmNeedBaseStyles.RadMenu_rtl .rmRightArrowDisabled {
text-indent: 1000em !important;
}
.rmNeedBaseStyles.RadMenu_rtl .rmLeftImage,
.rmNeedBaseStyles.RadMenu_Context_rtl .rmLeftImage {
border: 0;
float: right;
}
.rmNeedBaseStyles .rmLink {
width: auto;
padding: 0 0 0 12px;
outline: 0;
float: left;
}
.rmNeedBaseStyles .rmSeparator,
.rmNeedBaseStyles .rmSeparator:after {
line-height: 0;
font-size: 0;
overflow: hidden;
}
.rmNeedBaseStyles div.rmRootGroup {
position: relative;
}
.rmNeedBaseStyles .rmItem {
padding: 0;
}
.rmNeedBaseStyles .rmText {
padding-bottom: 1px;
float: left;
}
.rmNeedBaseStyles .rmLeftImage {
margin: 4px 2px 0 -3px;
padding-bottom: 4px;
}
.rmNeedBaseStyles span.rmLeftImage {
width: 16px;
height: 16px;
}
.rmNeedBaseStyles .rmVertical .rmLeftImage + .rmText {
padding: 0 8px 1px 24px;
}
.rmNeedBaseStyles .rmVertical .rmText {
padding: 0 24px 1px 0;
}
.rmNeedBaseStyles .rmHorizontal .rmText {
padding: 0 12px 1px 0;
}
.rmNeedBaseStyles.RadMenu_rtl .rmLink {
padding: 0 12px 0 0;
margin-left: 2px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmText {
margin-left: -2px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmLeftImage {
margin: 4px -3px 0 2px;
padding-bottom: 2px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmHorizontal .rmText {
padding: 0 0 1px 12px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmVertical .rmText {
padding: 0 0 1px 24px;
}
.rmNeedBaseStyles .rmVertical .rmText,
.rmNeedBaseStyles .rmHorizontal .rmVertical .rmText {
display: block;
float: none;
}
.rmNeedBaseStyles .rmVertical .rmLink,
.rmNeedBaseStyles .rmHorizontal .rmVertical .rmLink {
float: none;
}
* html .rmNeedBaseStyles .rmGroup .rmVertical .rmLink,
* html .rmNeedBaseStyles .rmGroup .rmHorizontal .rmLink {
float: left;
}
.rmNeedBaseStyles .rmTopRight,
.rmNeedBaseStyles .rmBottomLeft,
.rmNeedBaseStyles .rmBottomRight {
border: 0;
background-position: 0 0;
}
.rmNeedBaseStyles .rmTopFix,
.rmNeedBaseStyles .rmTopRight,
.rmNeedBaseStyles .rmBottomFix,
.rmNeedBaseStyles .rmBottomLeft,
.rmNeedBaseStyles .rmBottomRight {
position: absolute;
width: 4px;
height: 4px;
list-style-type: none;
list-style-position: outside;
font-size: 0;
}
.rmNeedBaseStyles.RadMenu_rtl .rmTopRight,
.rmNeedBaseStyles.RadMenu_rtl .rmBottomRight {
width: 32px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmTopShadowRight,
.rmNeedBaseStyles.RadMenu_rtl .rmBottomShadowRight {
width: 4px;
}
.rmNeedBaseStyles .rmTopShadowRight,
.rmNeedBaseStyles .rmBottomShadowLeft,
.rmNeedBaseStyles .rmBottomShadowRight {
background-repeat: no-repeat;
background-color: transparent;
}
.rmNeedBaseStyles .rmTopRight {
background-position: 100% 0;
top: 0;
right: -4px;
height: 100%;
}
.rmNeedBaseStyles .rmBottomLeft {
background-position: 0 100%;
bottom: -4px;
left: 0;
width: 100%;
}
.rmNeedBaseStyles .rmBottomFix,
.rmNeedBaseStyles .rmTopFix {
background-position: -1px 0;
width: auto;
left: 5px;
right: 0;
}
.rmNeedBaseStyles .rmBottomFix {
bottom: -4px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.rmNeedBaseStyles .rmTopFix {
top: 0;
left: 5px;
border-top-width: 1px;
border-top-style: solid;
}
* html .rmNeedBaseStyles .rmTopFix,
* html .rmNeedBaseStyles .rmBottomFix,
* html .rmNeedBaseStyles .rmBottomShadowLeft {
width: 0;
}
.rmNeedBaseStyles .rmBottomRight {
background-position: 100% 100%;
bottom: -4px;
right: -4px;
width: 8px;
}
.rmNeedBaseStyles .rmAccessKey {
font-size: 10px;
font-weight: normal;
float: right;
padding-right: 8px;
}
.rmNeedBaseStyles .rmScrollWrapContainer {
position: absolute;
}
.rmNeedBaseStyles .rmScrollWrapContainer .rmTopFix {
height: 100%;
}
* html .rmNeedBaseStyles .rmScrollWrapContainer .rmTopFix {
height: 5px;
}
.rmNeedBaseStyles .rmRootGroup .rmItem .rmGroup {
padding-bottom: 1px;
}
.rmNeedBaseStyles .rmGroup .rmItem {
padding: 0;
}
.rmNeedBaseStyles .rmGroup .rmLink,
.rmNeedBaseStyles .rmSlide .rmGroup .rmTemplate {
padding: 0;
}
.rmNeedBaseStyles .rmSlide .rmHorizontal .rmText {
padding: 0 11px 0 10px;
}
.rmNeedBaseStyles .rmGroup .rmLeftImage {
margin: 4px 0 0 6px;
}
* html .rmNeedBaseStyles .rmGroup .rmLeftImage {
margin-left: 4px;
}
* + html .rmNeedBaseStyles .rmGroup .rmLeftImage {
margin-left: 4px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmGroup .rmLeftImage {
margin: 4px 6px 0 0;
}
* html .rmNeedBaseStyles .rmGroup .rmLeftImage {
position: absolute;
}
* + html .rmNeedBaseStyles .rmGroup .rmLeftImage {
position: absolute;
}
.rmNeedBaseStyles .rmGroup .rmText {
padding: 0 54px 0 28px;
margin: 0 0 0 4px;
}
.rmNeedBaseStyles .rmMultiColumn {
list-style: none;
display: block;
position: relative;
margin: 0;
padding: 0;
zoom: 1;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.rmNeedBaseStyles .rmMultiColumn .rmMultiGroup {
background: 0;
border: 0;
float: left;
display: block;
position: static;
}
.rmNeedBaseStyles .rmMultiColumn .rmGroupColumn {
float: left;
}
.rmNeedBaseStyles.RadMenu_rtl .rmGroup .rmLink,
.rmNeedBaseStyles.RadMenu_rtl .rmSlide .rmGroup .rmTemplate {
padding: 0;
}
.rmNeedBaseStyles.RadMenu_rtl .rmGroup .rmText {
padding: 0 28px 0 54px;
margin: 0 4px 0 0;
}
.rmNeedBaseStyles.RadMenu_rtl .rmMultiColumn .rmGroupColumn {
float: right;
}
* + html .rmNeedBaseStyles.RadMenu_rtl .rmMultiColumn .rmItem {
float: left;
}
* html .rmNeedBaseStyles.RadMenu_rtl .rmMultiColumn .rmItem {
float: left;
}
.rmNeedBaseStyles.RadMenu_rtl .rmSlide .rmVertical .rmLeftImage + .rmText,
.rmNeedBaseStyles.RadMenu_Context_rtl .rmGroup .rmLeftImage + .rmText {
padding: 0 28px 0 54px;
}
.rmNeedBaseStyles a.rmImageOnly .rmLeftImage,
.rmNeedBaseStyles .rmRootGroup a.rmImageOnly {
padding: 0;
margin: 0;
}
.rmNeedBaseStyles .rmRootGroup a.rmImageOnly span.rmText {
display: none;
}
* html .rmNeedBaseStyles .rmImageOnly .rmLeftImage {
position: static;
}
* + html .rmNeedBaseStyles .rmImageOnly .rmLeftImage {
position: static;
}
* html .rmNeedBaseStyles.RadMenu_rtl .rmGroup .rmLeftImage {
right: 0;
}
* + html .rmNeedBaseStyles.RadMenu_rtl .rmGroup .rmLeftImage {
right: 0;
}
* + html .rmNeedBaseStyles.RadMenu_Context_rtl ul.rmGroup {
position: absolute;
}
* html .rmNeedBaseStyles.RadMenu_Context_rtl ul.rmGroup {
position: absolute;
}
* + html .rmNeedBaseStyles.RadMenu_Context_rtl .rmGroup .rmItem {
float: left;
}
* html .rmNeedBaseStyles.RadMenu_Context_rtl .rmGroup .rmItem {
float: left;
}
.rmNeedBaseStyles .rmSeparator .rmText {
line-height: 0;
font-size: 0;
padding: 0;
background-repeat: repeat-x;
overflow: hidden;
}
.rmNeedBaseStyles .rmVertical .rmSeparator .rmText,
.rmNeedBaseStyles .rmHorizontal .rmVertical .rmSeparator .rmText {
height: auto;
width: auto;
padding-bottom: 2px;
}
* + html .rmNeedBaseStyles .rmSeparator .rmText,
* + html .rmNeedBaseStyles .rmVertical .rmSeparator .rmText,
* + html .rmNeedBaseStyles .rmHorizontal .rmVertical .rmSeparator .rmText {
height: 0;
padding: 0;
}
* html .rmNeedBaseStyles .rmVertical .rmSeparator {
height: 3px;
}
* html .rmNeedBaseStyles .rmVertical .rmSeparator .rmText {
height: auto;
padding: 2px 0 0;
}
* html .rmNeedBaseStyles .rmHorizontal .rmSeparator .rmText {
padding: 0;
}
* html .rmNeedBaseStyles .rmHorizontal .rmVertical .rmSeparator {
height: 3px;
}
* html .rmNeedBaseStyles .rmHorizontal .rmVertical .rmSeparator .rmText {
height: 2px;
}
.rmNeedBaseStyles .rmRootGroup .rmSeparator .rmText {
margin: 1px 12px;
}
.rmNeedBaseStyles .rmRootGroup .rmVertical .rmSeparator .rmText, .rmNeedBaseStyles .RadMenu_Context .rmVertical .rmSeparator .rmText {
margin: 1px 2px 1px 31px;
}
.rmNeedBaseStyles.RadMenu_rtl .rmRootGroup .rmVertical .rmSeparator .rmText,
.rmNeedBaseStyles.RadMenu_Context_rtl .rmVertical .rmSeparator .rmText {
margin: 1px 31px 1px 2px;
}
.rmNeedBaseStyles .rmHorizontal .rmSeparator .rmText,
.rmNeedBaseStyles .rmVertical .rmHorizontal .rmSeparator .rmText {
margin: 2px 0 0;
height: 20px;
width: 2px;
}
* html .rmNeedBaseStyles .rmHorizontal .rmVertical .rmSeparator .rmText {
zoom: 1;
}
.rmNeedBaseStyles .rmLeftArrow, .rmNeedBaseStyles .RadMenu .rmRightArrow {
width: 10px;
height: 24px;
}
.rmNeedBaseStyles .rmTopArrow, .rmNeedBaseStyles .RadMenu .rmBottomArrow {
height: 10px;
width: 100%;
}
.rmNeedBaseStyles .rmLink {
position: relative;
}
.rmNeedBaseStyles .rmIcon {
margin: -8px 0 0 -8px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
text-indent: -999em;
display: none;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
}
.rmNeedBaseStyles .rmToggle {
width: 23px;
height: 23px;
overflow: hidden;
position: absolute;
top: 0;
left: auto;
right: 0;
}
.rmNeedBaseStyles .rmHorizontal .rmRootLink .rmToggle {
margin-left: -12px;
float: left;
position: relative;
}
.rmNeedBaseStyles .rmHorizontal .rmRootLink .rmIcon {
display: block;
}
.rmNeedBaseStyles.RadMenu_rtl .rmToggle {
left: 0;
right: auto;
text-align: left;
}
.rmSized ul.rmVertical,
.rmSized .rmVertical .rmItem {
width: 100%;
}
.rmSized ul.rmRootGroup {
float: none;
}
.rmSized .rmRootGroup .rmVertical,
.rmSized .rmHorizontal .rmItem,
.rmSized .rmRootGroup .rmVertical .rmItem {
width: auto;
}
.rmNeedBaseStyles .rmSlide,
.RadMenu_Context {
position: absolute;
overflow: hidden;
display: none;
float: left;
}
* html .rmNeedBaseStyles .rmSlide, * html
.RadMenu_Context {
height: 1px;
}
.RadMenu_Context {
z-index: 1000;
overflow: visible;
}
.rmScrollWrap {
position: absolute;
float: left;
overflow: hidden;
left: 0;
}
.rmNotPrmiary .rmScrollWrapContainer .rmGroup,
.rmScrollWrapContainer .rmGroup .rmGroup,
.rmScrollWrapContainer .rmGroup {
padding: 0;
}
.rmNeedBaseStyles .rmSlide .rmVertical .rmLeftImage + .rmText,
.RadMenu_Context .rmGroup .rmLeftImage + .rmText {
padding: 0 54px 0 28px;
}
.RadMenu.MegaDropDownMenuOuter ul.rmLevel1 div.rmSlide,
.RadMenu.MegaDropDownMenuOuter ul.rmLevel1 ul div.rmSlide {
position: static;
left: auto;
top: auto;
clear: both;
}
.RadMenu.MegaDropDownMenuOuter div.rmSlide .rmItem {
clear: both;
}
.RadMenu.MegaDropDownMenuOuter ul.rmLevel2 {
display: flex !important;
left: auto !important;
flex-flow: row wrap;
min-width: 320px;
}
.RadMenu.MegaDropDownMenuOuter ul.rmLevel2 ul,
.RadMenu.MegaDropDownMenuOuter ul.rmLevel2 .rmSlide {
left: auto !important;
width: 100%;
}
.RadMenu.MegaDropDownMenuOuter ul.rmLevel2 > .rmItem {
width: 50%;
/* Unfortunately, we need to use width rather than flex: 0 0 50%; due to telerik javascript */
white-space: normal;
padding-left: 10px;
align-self: self-start;
}
/* ==========================================================================
UTILITY NAVIGATION
========================================================================== */
/* Navigation links
========================================================================== */
/* These styles apply to the auxiliary and footer navigation */
.NavigationUnorderedList {
padding-left: 0;
margin: 0;
display: inline-block;
}
.NavigationListItem {
list-style-type: none;
display: inline-block;
margin-left: 0;
}
.NavigationLink {
padding-left: 7.5px;
padding-right: 7.5px;
white-space: nowrap;
}
/* Search bar
========================================================================== */
/* There are 2 search boxes in the Utility iPart: one that displays on mobile-size screens when toggled
and another that always displays on larger screens
*/
.search-container {
/* this is the mobile screen search */
display: block;
padding: 5px 8px;
}
.search-container .search-field {
width: 100%;
}
@media (min-width: 768px) {
.search-container {
display: none;
}
}
.search-container-sm {
/* this is the larger screen search */
display: none !important;
}
@media (min-width: 768px) {
.search-container-sm {
display: inline-block !important;
}
}
/* ==========================================================================
Navbars
========================================================================== */
.navbar {
position: relative;
min-height: 52px;
margin-bottom: 0;
}
.navbar::after {
display: block;
clear: both;
content: "";
}
.navbar-header::after {
display: block;
clear: both;
content: "";
}
.navbar-collapse {
overflow: visible;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 992px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: auto;
}
.navbar-collapse .navbar-nav.navbar-left:first-child {
margin-left: -15px;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-collapse .navbar-text:last-child {
margin-right: 0;
}
}
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 992px) {
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
/* ==========================================================================
Breadcrumb
========================================================================== */
.breadcrumb {
padding: 0;
}
.breadcrumb li.breadcrumb-item {
list-style: none;
display: inline-block;
}
.breadcrumb li:not(:last-of-type):after {
content: '»';
display: inline-block;
padding: 0 0.5em;
}
/* ==========================================================================
RiSE
========================================================================== */
/* Easy Edit
========================================================================== */
/* The border that surrounds 'hidden' iParts when in Easy Edit mode */
.NoContentSTEContainer {
border: 1px dashed #D8D8D8;
padding: 0.313em;
}
@media (max-width: 767px) {
.SurfEdit, .ste-toggle, .UtilitySTEToggle,
.ContentItemButtonPanel,
.ContentRecordPageButtonPanel,
.NoContentSTEContainer {
/* We do not want surf-to-edit to appear in a mobile phone environment, but it should be available in desktop */
display: none !important;
}
}
.ContentRecordPageAnchor {
/* iPart and page edit icons */
display: block;
}
.ContentItemButtonPanel {
clear: both;
cursor: pointer;
margin-top: 0.5rem;
}
.ContentItemButtonPanel img {
margin-left: 0.25rem;
margin-right: 0.5rem;
}
.ContentRecordPageButtonPanel > a,
.ContentItemButtonPanel > a,
.ContentItemButtonPanel > div {
/* Content configuration */
opacity: .4;
color: #333333;
text-align: left;
font-size: 85%;
display: flex;
align-items: end;
flex-wrap: nowrap;
}
.ContentRecordPageButtonPanel > a:hover,
.ContentItemButtonPanel > a:hover,
.ContentItemButtonPanel > div:hover {
opacity: 1;
text-decoration: none;
}
.ContentRecordPageButtonPanel > a > span,
.ContentItemButtonPanel > a > span,
.ContentItemButtonPanel > div > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**
* Easy Edit hover outlines
*/
/* Hover outlines when in EasyEdit (Surf to Edit) */
/* Only display if the screen is wider than 768px (ie. don't display on a mobile phone) */
@media (min-width: 768px) {
.EasyEditOn .body-container,
.EasyEditOn .ContentPanel,
.EasyEditOn .EmptyMasterContentPanel,
.EasyEditOn .EasyEditContent,
.EasyEditOn .WebPartZoneDesignTime {
border: 1px solid transparent;
}
.EasyEditOn .WebPartZoneDesignTime .EasyEditContent {
border: none;
}
.EasyEditOn .EasyEditContent:hover,
.EasyEditOn .WebPartZoneDesignTime:hover {
/* iPart Areas */
border-color: #c5e2f9;
background-color: #fff4;
}
.EasyEditOn .EasyEditContent:hover > .ContentItemButtonPanel > a,
.EasyEditOn .EasyEditContent:hover > div > .ContentItemButtonPanel > a,
.EasyEditOn .EasyEditContent:hover + .ContentItemButtonPanel > a,
.EasyEditOn .NoContentSTEContainer:hover > .ContentItemButtonPanel > a,
.EasyEditOn .NoContentSTEContainer:hover > div > .ContentItemButtonPanel > a,
.EasyEditOn .NoContentSTEContainer:hover + .ContentItemButtonPanel > a {
background-color: #c5e2f9;
}
.EasyEditOn .body-container:hover,
.EasyEditOn .ContentPanel:hover,
.EasyEditOn .EmptyMasterContentPanel:hover {
/* Content item area */
border-style: dotted;
border-color: #7899CE;
background-color: #F7F9FD;
}
.EasyEditOn .body-container:hover .ContentRecordPageButtonPanel > a,
.EasyEditOn .ContentPanel:hover .ContentRecordPageButtonPanel > a,
.EasyEditOn .EmptyMasterContentPanel:hover .ContentRecordPageButtonPanel > a {
background-color: #6695DE;
}
/* Master page template areas with no iPart or Content Item */
.TemplateAreaEasyEditOn .body-container:hover, .TemplateAreaEasyEditOn .ContentPanel:hover, .TemplateAreaEasyEditOn .EmptyMasterContentPanel:hover {
border: 1px solid transparent;
background-color: transparent;
}
}
@media (max-width: 767px) {
/**
* Usually we don't hide content items in easy edit mode,
* but on xs screens we do to avoid showing content on mobile
* with no way of toggling off easy edit (since the toggle is hidden).
*/
.hidden-xs-ste-on,
tr.hidden-xs-ste-on,
th.hidden-xs-ste-on,
td.hidden-xs-ste-on {
display: none !important;
}
}
/* Content Designer
========================================================================== */
.PublishStatusTitle .panel-title::before {
content: "\a0!\a0";
padding: 2px;
border-color: #000000;
border-style: solid;
border-width: 1px;
width: 20px;
height: 16px;
font-weight: bold;
margin-right: 5px;
}
.Working .panel-title::before {
background-color: #ff0000;
}
.Pending .panel-title::before {
background-color: #ffcc00;
}
.PublishRequested .panel-title::before {
background-color: #ff9900;
}
.WebPartsPanel {
clear: both;
width: 100%;
}
.WebPartZoneDesignTime {
width: 99%;
background-color: #ffffff;
padding-bottom: 0.7em;
margin-left: auto;
margin-right: auto;
}
.WebPartZoneDesignTimeAction,
.WebPartZoneDesignTimeEmptyZoneText {
text-align: center;
}
.WebPartZoneDesignTimeAction a, .WebPartZoneDesignTimeAction a:visited,
.WebPartZoneDesignTimeEmptyZoneText a, .WebPartZoneDesignTimeEmptyZoneText a:visited {
color: #23749d !important;
text-decoration: underline !important;
font-weight: normal !important;
}
.WebPartZoneDesignTimeAction a.Disabled, .WebPartZoneDesignTimeAction a:visited.Disabled {
color: #999999 !important;
text-decoration: none !important;
}
.WebPartZoneDesignTimeEmptyZoneText {
text-align: center;
padding-top: 10px;
padding-bottom: 0;
color: #333333 !important;
}
.pull-left .WebPartZoneDesignTime,
.pull-right .WebPartZoneDesignTime {
width: auto;
}
.WebPartsTitleBar,
.ConnectionTitleBar {
background-position: left center;
font-weight: bold;
color: #000;
background-color: #f3f3f3;
line-height: 24px;
padding-left: 10px;
padding-right: 8px;
font-size: 80%;
background-image: url("../../AsiCommon/Images/draggable.gif");
background-repeat: repeat-y;
border-bottom-color: #E5E5E5;
border-bottom-width: 1px;
border-bottom-style: Solid;
}
.WebPartsTitleBar {
cursor: move;
}
.WebPartsTitleBar a,
.WebPartsTitleBar a:hover {
font-weight: normal;
color: #000;
font-size: 80%;
text-decoration: none;
padding-left: 2px;
}
.WebPartsTitleBar a:hover {
color: #dedede;
}
.WebPartDesignMenu {
border: 1px solid #293c7c;
width: 10px;
font-family: Verdana;
}
/* iParts Connection Panel */
.ConnectionWebPartsPanel {
clear: both;
margin-left: auto;
margin-right: auto;
}
.ConnectionWebPartLabel {
text-align: left;
min-width: 15em;
padding: 3px;
white-space: nowrap;
}
.ConnectionWebPartsPanel td table td {
padding-left: 5px;
color: #000000;
border-color: #e5e5e5;
border-width: 1px;
border-style: Solid;
}
.ConnectionTitleBar img {
max-width: none !important;
}
/* Define overflow so Content Edit page will properly display oversized iParts. */
.LayoutBorder {
overflow-y: hidden;
overflow-x: auto;
padding: 0;
}
/* Content editor drag-and-drop (used by jQueryUI)
* Adds our indicators when we drag iParts around to show where they can be dropped*/
.ui-state-hover, .ui-state-active {
background: repeating-linear-gradient(-55deg, #7A7A7A, #7A7A7A 10px, #999999 10px, #999999 20px);
}
.ui-state-hover {
height: 3em !important;
}
.ui-state-active {
height: 3em !important;
opacity: 0.8;
filter: alpha(opacity=80);
transition: opacity 0.2s ease-out;
}
.TemplateManagerArea .col-secondary.d-none {
/* always show the secondary column in template builder */
display: block !important;
}
/* Placeholders
========================================================================== */
/* Some placeholder content when the iPart is displayed in edit mode */
.EditModePlaceholder,
.MainContentPlaceholder {
width: 100%;
display: table;
max-width: none;
background-color: #555555;
color: #fff;
text-align: center;
}
.EditModePlaceholderInner,
.MainContentPlaceholderInner {
display: table-cell;
vertical-align: middle;
height: 45px;
}
.MainContentPlaceholder {
background-color: #222222;
}
.MainContentPlaceholderInner {
height: 200px;
}
.ContentDisplayPlaceholder {
background-color: #333333;
}
.ContentDisplayPlaceholderInner,
.EditModePlaceholder {
height: 45px;
}
/* Drag and drop edit mode
========================================================================== */
/* Currently used in the utility nav for the drag and drop selections */
.EditModePlaceholder .RadDock {
height: 30px;
width: auto !important;
}
.EditModePlaceholder .RadDockItem .RadDockContent {
padding: 4px 7px;
}
.DragZoneAvailable {
background-color: #999999;
}
.DragZoneSelected {
background-color: #555555;
}
.DragZoneAvailable,
.DragZoneSelected {
min-height: 33px;
width: 100%;
}
.RadDraggableItem {
background-image: url("../../AsiCommon/Images/draggable.gif");
background-repeat: repeat-y;
}
.RadDraggableItem.rdPlaceholder {
background-image: none;
}
.UtilityNavDraggableItem {
width: auto !important;
min-width: 140px;
max-width: 300px;
height: 35px;
}
/* Theme selector
========================================================================== */
/* Website theme selector grid */
.theme-item {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
margin: 10px;
display: inline-block;
border: 1px solid #ddd;
background-color: #ddd;
}
.theme-caption {
cursor: default;
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
background-color: rgba(0, 0, 0, 0.8);
top: 80%;
}
.theme-caption.theme-deprecated {
background-color: rgba(175, 0, 0, 0.8);
}
.theme-image {
width: 300px !important;
height: auto;
padding-left: 0;
padding-right: 0;
}
.theme-image.selected-preview {
border: 1px solid #ddd;
}
h3.theme-title {
font-size: 1.2em;
font-weight: normal;
font-style: normal;
color: #fff;
/* the following make the text overflow to */
width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-details {
color: #fff;
display: block;
clear: both;
}
.theme-title, .theme-details {
margin: 10px;
}
.theme-section {
max-width: 1000px;
margin: 0 auto;
}
.theme-item .theme-image,
.theme-caption {
transition: all 0.5s ease;
}
.theme-item:hover .theme-caption {
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.87);
}
.theme-item:hover .theme-caption.theme-deprecated {
background-color: rgba(175, 0, 0, 0.87);
}
.theme-item:hover .theme-title {
/* when the details are expanded, allow the title to wrap */
white-space: normal;
}
/* Page layout previews
========================================================================== */
.layout-preview {
font-size: 85%;
width: 120px;
text-align: center;
border: solid 1px white;
}
.layout-selector.layout-previews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-row-gap: .5em;
align-items: start;
}
.layout-selector .layout-preview {
padding: 5px;
width: 100px;
cursor: pointer;
}
.layout-selector .layout-preview-selected,
.layout-selector .layout-preview:hover {
background-color: #CCCCCC;
border: 1px dotted #333333;
}
.layout-summary .layout-preview {
float: right;
cursor: pointer;
}
.layout-preview-inner {
border: 1px solid #333333;
padding: 2px 2px 2px 2px;
min-height: 80px;
transition: all 0.2s ease;
}
@media screen and (prefers-reduced-motion: reduce) {
.layout-preview-inner {
transition: none;
}
}
.layout-preview-inner p {
border: solid 1px white;
text-align: center;
background-color: #808080;
font-weight: bold;
margin-bottom: 1px;
height: 100%;
}
/* Adjusts the display of the Bootstrap grid columns and rows when shown within the LayoutSelector */
.layout-preview div[class^="col"] {
padding-left: 0;
padding-right: 0;
}
.layout-preview .row {
margin-left: 0;
margin-right: 0;
}
/* Tagged List Editor
========================================================================== */
/* Icons used in tagged lists */
.ImportantContent,
.MembersOnlyContent {
padding: 0 10px;
}
.reToolBar {
/* The "new" icon in tagged lists */
/* The key icon to indicate member-only content in tagged lists */
/* The "{...}" icon used for conditional display in the HTML editor */
/* The iMIS link icon used in the HTML editor */
/* The iMIS link icon used in the HTML editor */
/* The iMIS label icon used in the HTMl editor */
}
.reToolBar .reToolIcon.reiMISNewContentTool:before,
.reToolBar .ImportantContent {
background: url(../../AsiCommon/Images/AtomPainter/iMISNewContentTool.gif) no-repeat center center;
content: '';
background-size: 100% auto;
}
.reToolBar .reToolIcon.reiMISMembersOnlyTool:before,
.reToolBar .MembersOnlyContent {
background: url(../../AsiCommon/Images/AtomPainter/iMISMembersOnlyTool.gif) no-repeat center center;
content: '';
background-size: 100% auto;
}
.reToolBar .reToolIcon.reiMISConditionalDisplayTool:before {
background: url(../../AsiCommon/Images/AtomPainter/iMISConditionalDisplayTool.gif) no-repeat center center;
content: '';
background-size: 100% auto;
}
.reToolBar .reToolIcon.reiMISLinkTool:before {
background: url(../../AsiCommon/Images/AtomPainter/iMISLinkTool.gif) no-repeat center center;
content: '';
background-size: 100% auto;
}
.reToolBar .reToolIcon.reiMISImageTool:before {
background: url(../../AsiCommon/Images/AtomPainter/iMISImageTool.gif) no-repeat center center;
content: '';
background-size: 100% auto;
}
.reToolBar .reToolIcon.reiMISLabelTool:before {
background: url(../../AsiCommon/Images/AtomPainter/iMISLabelTool.gif) no-repeat center center;
content: '';
background-size: 100% auto;
}
/* Invisible image tag within Block Tagged List Editor */
.contentTaggedListImageThumbnail {
display: inline-block;
min-width: 100px;
min-height: 100px;
border: 1px solid #dadada;
background-color: #ddd;
}
/* Panel Editor
========================================================================== */
/* Used in ObjectBrowser2 and PanelEditor when dragging/dropping */
.dragContainer {
position: absolute;
z-index: 999;
cursor: move;
background-repeat: no-repeat;
cursor: move;
background-color: White;
border: solid 1px black;
padding: 2px;
}
.dragItem {
cursor: default;
padding-left: 18px;
background-repeat: no-repeat;
min-height: 20px;
font-weight: bold;
}
/* Process Automation
========================================================================== */
/* Task defintion UI */
.TaskDefinition .chosen-container,
.TaskDefinition .chosen-container-multi {
/* for some reason the multi-selects were not sizing properly - need to force it here*/
width: 30em !important;
max-width: 100%;
}
.TaskDefinition .reModule {
display: none;
}
/* Pages and iParts
========================================================================== */
/* A zone that can contain iParts*/
.WebPartZone {
width: 100%;
}
/* Put a little padding between iParts */
/* the second line is necessary because iParts within a CCO do not have the wrapper class ".iMIS-WebPart" */
.iMIS-WebPart > .ContentItemContainer,
.WebPartZone > .ContentItemContainer {
margin-bottom: 0.9em;
display: block;
}
/* Add extra padding to content that uses the CommandBar to prevent overlap. */
.EmptyMasterContentPanel > .ContentItemContainer {
padding-bottom: 4em;
}
/*Make the popup window slightly shorter to prevent an extra scrollbar*/
#MainPanel .EmptyMasterContentPanel {
margin: -5px 0px;
padding: 5px 0px;
}
/* IQA
========================================================================== */
.QueryQuickSources a {
text-decoration: none;
}
.QueryQuickSources a:hover {
text-decoration: underline;
}
.QueryQuickSources span.panel-heading-collapse-img {
margin-top: 3px;
}
.QueryQuickSources .media-left img {
width: 28px;
min-width: 28px;
}
.QueryQuickSources .media-body {
vertical-align: middle;
}
.QueryQuickSources h3, .QueryQuickSources h4 {
margin: 0;
}
/* Other
========================================================================== */
/* This is the table of avilable permissions when editing a Content Authority Group members */
.PermissionTable td {
padding: 5px;
}
/* Expression builder in BO designer
========================================================================= */
.InnerExpression {
margin-left: 5px;
}
.Expression {
border: 1px solid #ddd;
padding: 5px 10px;
}
.ShadedExpression {
background-color: #f5f5f5;
}
.UnshadedExpression {
background-color: #fff;
}
/* ==========================================================================
ROBOT ASSISTANT
========================================================================== */
/* Icon */
.robot-assistant-wrapper {
position: fixed;
bottom: 20px;
right: 30px;
z-index: 555;
width: 50px;
}
.robot-assistant-link {
width: 50px;
height: 35px;
position: relative;
display: block;
border-radius: 5px;
background: #00a9e0;
}
.robot-assistant-link::before {
border: 8.3333333333px solid transparent;
border-top: 8.3333333333px solid #00a9e0;
border-bottom: 0;
border-top-width: 15px;
content: '';
display: block;
position: absolute;
left: 0;
bottom: -8.3333333333px;
transform-origin: center;
transform: rotate(-90deg) skew(8.3333333333deg) translateY(8.3333333333px);
}
.robot-assistant-link a.sysicon-robot-assistant {
display: block;
width: 100%;
height: 95%;
}
.robot-assistant-link a.sysicon-robot-assistant::after {
display: block;
margin: 0 auto;
}
/* Chat interface */
#webchat {
height: 100%;
}
#webchat textarea {
box-shadow: none;
}
/* ==========================================================================
ICONS
========================================================================== */
/**
* Sprites and other styles that define various icons used throughout iMIS
*/
/* System icons
========================================================================== */
/**
* Icons used for actions such as add, edit, delete, move up, move down, etc.
*/
.IconSprite,
.DeleteImage, .EditImage, .ArrowUp, .ArrowUpOff, .ArrowDown, .ArrowDownOff,
.obo-action,
.obo-toggle,
.ste-toggle,
.batch-toggle,
.transaction-date-toggle,
.page-statistics-toggle,
.list-toggle, .CancelChange, .Refresh {
display: inline-block;
background-image: url("../images/IconSprite.png");
background-repeat: no-repeat;
width: 20px;
height: 20px;
vertical-align: text-bottom;
}
.IconSprite,
.DeleteImage, .EditImage, .ArrowUp, .ArrowUpOff, .ArrowDown, .ArrowDownOff,
.obo-action,
.obo-toggle,
.ste-toggle,
.batch-toggle,
.transaction-date-toggle,
.page-statistics-toggle,
.list-toggle {
margin-left: .2em;
}
.obo-action,
.obo-toggle,
.ste-toggle,
.batch-toggle,
.search-toggle,
.notifications-toggle,
.transaction-date-toggle,
.js-show-table,
.js-show-chart,
.page-statistics-toggle,
.list-toggle {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
display: inline-block;
}
/* Disabled up and down arrows */
.ArrowUpOff, .ArrowDownOff {
opacity: .4;
filter: alpha(opacity=40);
/* filter needed for IE compatibility */
}
/* Toggle buttons
========================================================================== */
/* Toggles */
.navbar-toggle,
.obo-toggle,
.ste-toggle,
.batch-toggle,
.transaction-date-toggle,
.page-statistics-toggle,
.list-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background-color: transparent;
border: none;
vertical-align: middle;
}
.navbar-toggle:hover, .navbar-toggle:focus, .navbar-toggle:active,
.obo-toggle:hover,
.obo-toggle:focus,
.obo-toggle:active,
.ste-toggle:hover,
.ste-toggle:focus,
.ste-toggle:active,
.batch-toggle:hover,
.batch-toggle:focus,
.batch-toggle:active,
.transaction-date-toggle:hover,
.transaction-date-toggle:focus,
.transaction-date-toggle:active,
.page-statistics-toggle:hover,
.page-statistics-toggle:focus,
.page-statistics-toggle:active,
.list-toggle:hover,
.list-toggle:focus,
.list-toggle:active {
background-color: rgba(0, 0, 0, 0.05);
}
.navbar-toggle.on,
.obo-toggle.on,
.ste-toggle.on,
.batch-toggle.on,
.transaction-date-toggle.on,
.page-statistics-toggle.on,
.list-toggle.on {
background-color: #003a4d;
}
.navbar-toggle.on:hover, .navbar-toggle.on:focus, .navbar-toggle.on:active,
.obo-toggle.on:hover,
.obo-toggle.on:focus,
.obo-toggle.on:active,
.ste-toggle.on:hover,
.ste-toggle.on:focus,
.ste-toggle.on:active,
.batch-toggle.on:hover,
.batch-toggle.on:focus,
.batch-toggle.on:active,
.transaction-date-toggle.on:hover,
.transaction-date-toggle.on:focus,
.transaction-date-toggle.on:active,
.page-statistics-toggle.on:hover,
.page-statistics-toggle.on:focus,
.page-statistics-toggle.on:active,
.list-toggle.on:hover,
.list-toggle.on:focus,
.list-toggle.on:active {
background-color: #005875;
}
.obo-toggle {
background-position: 0px -70px;
}
.obo-toggle.on {
background-position: 0px -105px;
}
.ste-toggle {
background-position: -35px -70px;
}
.ste-toggle.on {
background-position: -35px -105px;
}
.batch-toggle {
background-position: -175px -70px;
}
.batch-toggle.on {
background-position: -175px -105px;
}
.transaction-date-toggle {
background-position: -210px -70px;
}
.transaction-date-toggle.on {
background-position: -210px -105px;
}
.page-statistics-toggle {
background-position: -315px -70px;
}
.page-statistics-toggle.on {
background-position: -315px -105px;
}
.list-toggle {
background-position: -350px -70px;
}
.list-toggle.on {
background-position: -350px -105px;
}
/* Navigation toggle buttons
========================================================================== */
.navbar-toggle .icon-bar {
/* Hamburger bars */
background-color: #ccc;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
.navbar-toggle .icon-search {
display: inline-block;
vertical-align: middle;
background-image: url("../images/IconSprite.png");
background-repeat: no-repeat;
width: 22px;
height: 22px;
background-position: -76px -76px;
}
@media (min-width: 992px) {
.navbar-toggle {
display: none;
}
}
/* Larger Icons for Angular */
.CancelChange, .Refresh {
width: 34px;
height: 34px;
}
.CancelChange {
background-position: -105px -70px;
}
.Refresh {
background-position: -140px -70px;
}
/* These are the old-style icons. We will soon update them to use the same code as the block above, instead of repeating. */
.IconSprite.AddIcon, .IconSprite.AddIcon[disabled]:hover, .IconSprite.AddIcon.Disabled:hover, .IconSprite.AddIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.AddIcon, .IconSprite.SaveIcon, .IconSprite.SaveIcon[disabled]:hover, .IconSprite.SaveIcon.Disabled:hover, .IconSprite.SaveIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.SaveIcon {
background-position: 0px 0;
}
.IconSprite.AddIcon:hover, .IconSprite.AddIcon:focus, a:hover .IconSprite.AddIcon, a:focus .IconSprite.AddIcon, .IconSprite.SaveIcon:hover, .IconSprite.SaveIcon:focus, a:hover .IconSprite.SaveIcon, a:focus .IconSprite.SaveIcon {
background-position: 0px -35px;
}
.IconSprite.EditIcon, .IconSprite.EditIcon[disabled]:hover, .IconSprite.EditIcon.Disabled:hover, .IconSprite.EditIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.EditIcon, .EditImage, .EditImage[disabled]:hover, .EditImage.Disabled:hover, .EditImage.aspNetDisabled:hover, a.aspNetDisabled:hover .EditImage {
background-position: -35px 0;
}
.IconSprite.EditIcon:hover, .IconSprite.EditIcon:focus, a:hover .IconSprite.EditIcon, a:focus .IconSprite.EditIcon, .EditImage:hover, .EditImage:focus, a:hover .EditImage, a:focus .EditImage {
background-position: -35px -35px;
}
.IconSprite.DeleteIcon, .IconSprite.DeleteIcon[disabled]:hover, .IconSprite.DeleteIcon.Disabled:hover, .IconSprite.DeleteIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.DeleteIcon, .DeleteImage, .DeleteImage[disabled]:hover, .DeleteImage.Disabled:hover, .DeleteImage.aspNetDisabled:hover, a.aspNetDisabled:hover .DeleteImage {
background-position: -70px 0;
}
.IconSprite.DeleteIcon:hover, .IconSprite.DeleteIcon:focus, a:hover .IconSprite.DeleteIcon, a:focus .IconSprite.DeleteIcon, .DeleteImage:hover, .DeleteImage:focus, a:hover .DeleteImage, a:focus .DeleteImage {
background-position: -70px -35px;
}
.IconSprite.UpIcon, .IconSprite.UpIcon[disabled]:hover, .IconSprite.UpIcon.Disabled:hover, .IconSprite.UpIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.UpIcon, .ArrowUp, .ArrowUp[disabled]:hover, .ArrowUp.Disabled:hover, .ArrowUp.aspNetDisabled:hover, a.aspNetDisabled:hover .ArrowUp, .ArrowUpOff, .ArrowUpOff[disabled]:hover, .ArrowUpOff.Disabled:hover, .ArrowUpOff.aspNetDisabled:hover, a.aspNetDisabled:hover .ArrowUpOff {
background-position: -105px 0;
}
.IconSprite.UpIcon:hover, .IconSprite.UpIcon:focus, a:hover .IconSprite.UpIcon, a:focus .IconSprite.UpIcon, .ArrowUp:hover, .ArrowUp:focus, a:hover .ArrowUp, a:focus .ArrowUp, .ArrowUpOff:hover, .ArrowUpOff:focus, a:hover .ArrowUpOff, a:focus .ArrowUpOff {
background-position: -105px -35px;
}
.IconSprite.DownIcon, .IconSprite.DownIcon[disabled]:hover, .IconSprite.DownIcon.Disabled:hover, .IconSprite.DownIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.DownIcon, .ArrowDown, .ArrowDown[disabled]:hover, .ArrowDown.Disabled:hover, .ArrowDown.aspNetDisabled:hover, a.aspNetDisabled:hover .ArrowDown, .ArrowDownOff, .ArrowDownOff[disabled]:hover, .ArrowDownOff.Disabled:hover, .ArrowDownOff.aspNetDisabled:hover, a.aspNetDisabled:hover .ArrowDownOff {
background-position: -140px 0;
}
.IconSprite.DownIcon:hover, .IconSprite.DownIcon:focus, a:hover .IconSprite.DownIcon, a:focus .IconSprite.DownIcon, .ArrowDown:hover, .ArrowDown:focus, a:hover .ArrowDown, a:focus .ArrowDown, .ArrowDownOff:hover, .ArrowDownOff:focus, a:hover .ArrowDownOff, a:focus .ArrowDownOff {
background-position: -140px -35px;
}
.IconSprite.SelectIcon, .IconSprite.SelectIcon[disabled]:hover, .IconSprite.SelectIcon.Disabled:hover, .IconSprite.SelectIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.SelectIcon {
background-position: -175px 0;
}
.IconSprite.SelectIcon:hover, .IconSprite.SelectIcon:focus, a:hover .IconSprite.SelectIcon, a:focus .IconSprite.SelectIcon {
background-position: -175px -35px;
}
.IconSprite.CheckIcon, .IconSprite.CheckIcon[disabled]:hover, .IconSprite.CheckIcon.Disabled:hover, .IconSprite.CheckIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.CheckIcon {
background-position: -245px 0;
}
.IconSprite.CheckIcon:hover, .IconSprite.CheckIcon:focus, a:hover .IconSprite.CheckIcon, a:focus .IconSprite.CheckIcon {
background-position: -245px -35px;
}
.IconSprite.UndoIcon, .IconSprite.UndoIcon[disabled]:hover, .IconSprite.UndoIcon.Disabled:hover, .IconSprite.UndoIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.UndoIcon, .IconSprite.ResetIcon, .IconSprite.ResetIcon[disabled]:hover, .IconSprite.ResetIcon.Disabled:hover, .IconSprite.ResetIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.ResetIcon {
background-position: -280px 0;
}
.IconSprite.UndoIcon:hover, .IconSprite.UndoIcon:focus, a:hover .IconSprite.UndoIcon, a:focus .IconSprite.UndoIcon, .IconSprite.ResetIcon:hover, .IconSprite.ResetIcon:focus, a:hover .IconSprite.ResetIcon, a:focus .IconSprite.ResetIcon {
background-position: -280px -35px;
}
.IconSprite.FindIcon, .IconSprite.FindIcon[disabled]:hover, .IconSprite.FindIcon.Disabled:hover, .IconSprite.FindIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.FindIcon {
background-position: -315px 0;
}
.IconSprite.FindIcon:hover, .IconSprite.FindIcon:focus, a:hover .IconSprite.FindIcon, a:focus .IconSprite.FindIcon {
background-position: -315px -35px;
}
.IconSprite.CancelIcon, .IconSprite.CancelIcon[disabled]:hover, .IconSprite.CancelIcon.Disabled:hover, .IconSprite.CancelIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.CancelIcon {
background-position: -350px 0;
}
.IconSprite.CancelIcon:hover, .IconSprite.CancelIcon:focus, a:hover .IconSprite.CancelIcon, a:focus .IconSprite.CancelIcon {
background-position: -350px -35px;
}
.IconSprite.ContactIcon, .IconSprite.ContactIcon[disabled]:hover, .IconSprite.ContactIcon.Disabled:hover, .IconSprite.ContactIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.ContactIcon {
background-position: -385px 0;
}
.IconSprite.ContactIcon:hover, .IconSprite.ContactIcon:focus, a:hover .IconSprite.ContactIcon, a:focus .IconSprite.ContactIcon {
background-position: -385px -35px;
}
.IconSprite.ConfigureIcon, .IconSprite.ConfigureIcon[disabled]:hover, .IconSprite.ConfigureIcon.Disabled:hover, .IconSprite.ConfigureIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .IconSprite.ConfigureIcon {
background-position: -420px 0;
}
.IconSprite.ConfigureIcon:hover, .IconSprite.ConfigureIcon:focus, a:hover .IconSprite.ConfigureIcon, a:focus .IconSprite.ConfigureIcon {
background-position: -420px -35px;
}
.obo-action.obo-change-contact, .obo-action.obo-change-contact[disabled]:hover, .obo-action.obo-change-contact.Disabled:hover, .obo-action.obo-change-contact.aspNetDisabled:hover, a.aspNetDisabled:hover .obo-action.obo-change-contact {
background-position: -455px 0;
}
.obo-action.obo-change-contact:hover, .obo-action.obo-change-contact:focus, a:hover .obo-action.obo-change-contact, a:focus .obo-action.obo-change-contact {
background-position: -455px -35px;
}
.obo-action.obo-clear, .obo-action.obo-clear[disabled]:hover, .obo-action.obo-clear.Disabled:hover, .obo-action.obo-clear.aspNetDisabled:hover, a.aspNetDisabled:hover .obo-action.obo-clear {
background-position: -490px 0;
}
.obo-action.obo-clear:hover, .obo-action.obo-clear:focus, a:hover .obo-action.obo-clear, a:focus .obo-action.obo-clear {
background-position: -490px -35px;
}
/* #region Inline SVGs
========================================== */
.svgicon {
display: block;
fill: currentColor;
}
a .svgicon {
fill: #999999;
}
a .svgicon:hover, a .svgicon:focus, a .svgicon:active {
fill: #555555;
}
/* #endregion */
/* File Tpe Icons (Separate) */
.file-icon--before:before {
content: '';
margin-right: 8px;
}
.file-icon, .file-icon--before:before {
background-image: url("../images/file-type-sprite.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
}
.file-icon-csv.file-icon, .file-icon-csv.file-icon--before:before {
background-position: -5px -5px;
width: 24px;
height: 24px;
}
.file-icon-excel.file-icon, .file-icon-excel.file-icon--before:before {
background-position: -39px -5px;
width: 24px;
height: 24px;
}
.file-icon-pdf.file-icon, .file-icon-pdf.file-icon--before:before {
background-position: -73px -5px;
width: 24px;
height: 24px;
}
.file-icon-word.file-icon, .file-icon-word.file-icon--before:before {
background-position: -107px -5px;
width: 24px;
height: 24px;
}
.file-icon-xml.file-icon, .file-icon-xml.file-icon--before:before {
background-position: -141px -5px;
width: 24px;
height: 24px;
}
/* Payment Method Icons (size: 40px by 36px, 10px gap between icons) */
.payment-method-icon-americanexpress::before {
background-position: 0 0;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-mastercard::before {
background-position: -50px -2px;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-visa::before {
background-position: -100px -2px;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-discover::before {
background-position: -150px -2px;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-jcb::before {
background-position: -200px -2px;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-checking::before, .payment-method-icon-saving::before {
background-position: 0 -48px;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-other::before {
background-position: -100px -48px;
width: 40px;
height: 36px;
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-image: url("../images/PaymentMethodSprite.png");
}
.payment-method-icon-americanexpress, .payment-method-icon-mastercard,
.payment-method-icon-visa, .payment-method-icon-discover, .payment-method-icon-jcb,
.payment-method-icon-checking, .payment-method-icon-saving, .payment-method-icon-other {
position: relative;
padding: 5px 0 5px 50px;
display: block;
}
/* #endregion */
/* Feature icons
========================================================================== */
/**
* Icons used to identify core pieces of iMIS
* Currently used by the recent history content item
*/
.FeatureSprite {
display: inline-block;
background-image: url(../images/FeatureSprite.png);
background-repeat: no-repeat;
display: inline-block;
vertical-align: baseline;
background-position: 0 40px;
/* Default to keep the wrong icon from appearing by default */
opacity: .7;
transition: opacity 0.2s ease-out;
}
@media screen and (prefers-reduced-motion: reduce) {
.FeatureSprite {
transition: none;
}
}
.FeatureSprite:hover, .FeatureSprite:focus, a:hover .FeatureSprite, a:focus .FeatureSprite {
opacity: 1;
}
.FeatureSprite.SmallIcon {
width: 18px;
height: 18px;
}
.FeatureSprite.SmallIcon.GroupIcon, .FeatureSprite.SmallIcon.GroupIcon[disabled]:hover, .FeatureSprite.SmallIcon.GroupIcon.Disabled:hover, .FeatureSprite.SmallIcon.GroupIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .FeatureSprite.SmallIcon.GroupIcon {
background-position: 0px -3px;
}
.FeatureSprite.SmallIcon.PersonIcon, .FeatureSprite.SmallIcon.PersonIcon[disabled]:hover, .FeatureSprite.SmallIcon.PersonIcon.Disabled:hover, .FeatureSprite.SmallIcon.PersonIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .FeatureSprite.SmallIcon.PersonIcon {
background-position: -30px -3px;
}
.FeatureSprite.SmallIcon.EventIcon, .FeatureSprite.SmallIcon.EventIcon[disabled]:hover, .FeatureSprite.SmallIcon.EventIcon.Disabled:hover, .FeatureSprite.SmallIcon.EventIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .FeatureSprite.SmallIcon.EventIcon {
background-position: -60px -3px;
}
.FeatureSprite.SmallIcon.CartIcon, .FeatureSprite.SmallIcon.CartIcon[disabled]:hover, .FeatureSprite.SmallIcon.CartIcon.Disabled:hover, .FeatureSprite.SmallIcon.CartIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .FeatureSprite.SmallIcon.CartIcon {
background-position: -90px -3px;
}
.FeatureSprite.SmallIcon.FindIcon, .FeatureSprite.SmallIcon.FindIcon[disabled]:hover, .FeatureSprite.SmallIcon.FindIcon.Disabled:hover, .FeatureSprite.SmallIcon.FindIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .FeatureSprite.SmallIcon.FindIcon {
background-position: -120px -3px;
}
.FeatureSprite.SmallIcon.PaperclipIcon, .FeatureSprite.SmallIcon.PaperclipIcon[disabled]:hover, .FeatureSprite.SmallIcon.PaperclipIcon.Disabled:hover, .FeatureSprite.SmallIcon.PaperclipIcon.aspNetDisabled:hover, a.aspNetDisabled:hover .FeatureSprite.SmallIcon.PaperclipIcon {
background-position: -150px -3px;
}
/* Device icons
========================================================================== */
/**
* Icons used to identify specific devices.
* Currently used in RWD configuration options.
* Note: these options also use the utility class 'text-hide-label' for
* image replacelment.
*/
.checkbox-display-xs label,
.checkbox-display-sm label,
.checkbox-display-md label,
.checkbox-display-lg label {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
background-image: url(../images/DeviceSprite.png);
height: 60px;
vertical-align: middle;
margin: 0 8px 0 3px;
cursor: pointer;
}
.checkbox-display-xs input[type="checkbox"],
.checkbox-display-sm input[type="checkbox"],
.checkbox-display-md input[type="checkbox"],
.checkbox-display-lg input[type="checkbox"] {
/* middle-align the checkboxes */
margin-top: 19px;
}
.checkbox-display-xs label {
background-position: 0 0;
width: 9px !important;
}
.checkbox-display-sm label {
background-position: -20px 0;
width: 24px !important;
}
.checkbox-display-md label {
background-position: -50px 0;
width: 55px !important;
}
.checkbox-display-lg label {
background-position: -120px 0;
width: 68px !important;
}
/* NEW SVG Icons
========================================================================== */
:root {
--system-icon-color: hsl(0, 0%, 70%);
--system-icon-color-hover: hsl(0, 0%, 60%);
--auxiliary-nav-icon-color: hsl(0, 0%, 16%);
}
.sysicon:after, .sysicon--before:before, .sysicon--after:after, .wrapper.SVG-enabled .obo-action.obo-clear:before, .wrapper.SVG-enabled .obo-action.obo-change-contact:before, .obo-action.obo-clear-cart:before, .wrapper.SVG-enabled .batch-toggle:before, .wrapper.SVG-enabled .list-toggle:before, .wrapper.SVG-enabled .obo-toggle:before, .wrapper.SVG-enabled .nav-aux-cart a:before, .wrapper.SVG-enabled .nav-aux-account a:before, .wrapper.SVG-enabled .navbar-toggle .icon-search:before, .wrapper.SVG-enabled .page-statistics-toggle:before, .wrapper.SVG-enabled .ste-toggle:before, .wrapper.SVG-enabled .transaction-date-toggle:before, .notifications-toggle:before, .search-toggle:before, .js-show-table:before, .js-show-chart:before, .wrapper.SVG-enabled .dropdown .caret:before, .wrapper.SVG-enabled .header-search > .header-search:before, .asi-common-finder-input::after,
.chosen-container:after {
content: '';
display: inline-block;
background-color: var(--system-icon-color);
}
/* #region System icons (A -> Z)
========================================================================== */
/* Global Setup */
.sysicon--container {
display: inline-block;
}
.sysicon,
button.sysicon {
width: 18px;
height: 18px;
padding: 0;
margin: 0.3em;
display: inline-block;
}
.sysicon:after, .sysicon--before:before, .sysicon--after:after {
width: 18px;
height: 18px;
}
.sysicon {
position: relative;
}
.sysicon input[type="image"] {
width: 18px;
height: 18px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.sysicon--before,
.sysicon--after {
display: inline-flex;
align-items: center;
}
.sysicon--before:before,
.sysicon--after:before {
margin-right: 4.5px;
}
.sysicon--before:after,
.sysicon--after:after {
margin-left: 4.5px;
}
.sysicon--input {
position: relative;
}
.sysicon--input input[type="text"] {
padding-left: 28px;
}
.sysicon--input:before, .sysicon--input:after {
width: 18px;
height: 18px;
position: absolute;
top: auto;
left: 5px;
z-index: 1;
}
button.sysicon.sysicon-xsmall,
.sysicon.sysicon-xsmall input[type="image"],
.sysicon.sysicon-xsmall,
.sysicon.sysicon-xsmall:after,
.sysicon--before.sysicon-xsmall:before,
.sysicon--after.sysicon-xsmall:after {
width: 8px;
height: 8px;
}
.sysicon--before.sysicon-xsmall:before {
margin-right: 2px;
}
.sysicon--after.sysicon-xsmall:after {
margin-left: 2px;
}
button.sysicon.sysicon-medium,
.sysicon.sysicon-medium input[type="image"],
.sysicon.sysicon-medium,
.sysicon.sysicon-medium:after,
.sysicon--before.sysicon-medium:before,
.sysicon--after.sysicon-medium:after {
width: 32px;
height: 32px;
}
.sysicon--before.sysicon-medium:before {
margin-right: 8px;
}
.sysicon--after.sysicon-medium:after {
margin-left: 8px;
}
button.sysicon.sysicon-large,
.sysicon.sysicon-large input[type="image"],
.sysicon.sysicon-large,
.sysicon.sysicon-large:after,
.sysicon--before.sysicon-large:before,
.sysicon--after.sysicon-large:after {
width: 64px;
height: 64px;
}
.sysicon--before.sysicon-large:before {
margin-right: 16px;
}
.sysicon--after.sysicon-large:after {
margin-left: 16px;
}
.sysicon.sysicon-add:after,
.sysicon--before.sysicon-add:before,
.sysicon--after.sysicon-add:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-add");
mask-image: url("../../Assets/images/IconSprite.svg#action-add");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-add:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-add:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-add:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-add:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-add:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-add:after,
a.sysicon.sysicon-add:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-add:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-add:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-add:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-add:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-add:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-add:not([disabled]):hover:after,
button.sysicon--before.sysicon-add:not([disabled]):hover:before,
button.sysicon--after.sysicon-add:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-add");
mask-image: url("../../Assets/images/IconSprite.svg#action-add");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-attachment:after,
.sysicon--before.sysicon-attachment:before,
.sysicon--after.sysicon-attachment:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#attachment");
mask-image: url("../../Assets/images/IconSprite.svg#attachment");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-attachment:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-attachment:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-attachment:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-attachment:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-attachment:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-attachment:after,
a.sysicon.sysicon-attachment:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-attachment:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-attachment:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-attachment:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-attachment:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-attachment:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-attachment:not([disabled]):hover:after,
button.sysicon--before.sysicon-attachment:not([disabled]):hover:before,
button.sysicon--after.sysicon-attachment:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#attachment");
mask-image: url("../../Assets/images/IconSprite.svg#attachment");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-cancel:after,
.sysicon--before.sysicon-cancel:before,
.sysicon--after.sysicon-cancel:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-cancel");
mask-image: url("../../Assets/images/IconSprite.svg#action-cancel");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-cancel:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-cancel:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-cancel:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-cancel:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-cancel:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-cancel:after,
a.sysicon.sysicon-cancel:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-cancel:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-cancel:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-cancel:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-cancel:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-cancel:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-cancel:not([disabled]):hover:after,
button.sysicon--before.sysicon-cancel:not([disabled]):hover:before,
button.sysicon--after.sysicon-cancel:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-cancel");
mask-image: url("../../Assets/images/IconSprite.svg#action-cancel");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-canceled:after,
.sysicon--before.sysicon-canceled:before,
.sysicon--after.sysicon-canceled:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#canceled");
mask-image: url("../../Assets/images/IconSprite.svg#canceled");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #d03528;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-canceled:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-canceled:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-canceled:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-canceled:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-canceled:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-canceled:after,
a.sysicon.sysicon-canceled:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-canceled:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-canceled:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-canceled:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-canceled:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-canceled:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-canceled:not([disabled]):hover:after,
button.sysicon--before.sysicon-canceled:not([disabled]):hover:before,
button.sysicon--after.sysicon-canceled:not([disabled]):hover:after {
background: #d03528;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#canceled");
mask-image: url("../../Assets/images/IconSprite.svg#canceled");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-caret:after,
.sysicon--before.sysicon-caret:before,
.sysicon--after.sysicon-caret:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#caret");
mask-image: url("../../Assets/images/IconSprite.svg#caret");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-caret:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-caret:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-caret:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-caret:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-caret:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-caret:after,
a.sysicon.sysicon-caret:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-caret:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-caret:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-caret:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-caret:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-caret:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-caret:not([disabled]):hover:after,
button.sysicon--before.sysicon-caret:not([disabled]):hover:before,
button.sysicon--after.sysicon-caret:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#caret");
mask-image: url("../../Assets/images/IconSprite.svg#caret");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-cart:after,
.sysicon--before.sysicon-cart:before,
.sysicon--after.sysicon-cart:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#cart");
mask-image: url("../../Assets/images/IconSprite.svg#cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-cart:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-cart:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-cart:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-cart:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-cart:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-cart:after,
a.sysicon.sysicon-cart:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-cart:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-cart:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-cart:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-cart:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-cart:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-cart:not([disabled]):hover:after,
button.sysicon--before.sysicon-cart:not([disabled]):hover:before,
button.sysicon--after.sysicon-cart:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#cart");
mask-image: url("../../Assets/images/IconSprite.svg#cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-chat-bubble:after,
.sysicon--before.sysicon-chat-bubble:before,
.sysicon--after.sysicon-chat-bubble:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#chat-bubble");
mask-image: url("../../Assets/images/IconSprite.svg#chat-bubble");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #00a9e0;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-chat-bubble:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-chat-bubble:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-chat-bubble:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-chat-bubble:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-chat-bubble:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-chat-bubble:after,
a.sysicon.sysicon-chat-bubble:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-chat-bubble:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-chat-bubble:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-chat-bubble:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-chat-bubble:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-chat-bubble:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-chat-bubble:not([disabled]):hover:after,
button.sysicon--before.sysicon-chat-bubble:not([disabled]):hover:before,
button.sysicon--after.sysicon-chat-bubble:not([disabled]):hover:after {
background: #00a9e0;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#chat-bubble");
mask-image: url("../../Assets/images/IconSprite.svg#chat-bubble");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-contact-find:after,
.sysicon--before.sysicon-contact-find:before,
.sysicon--after.sysicon-contact-find:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#contact-card");
mask-image: url("../../Assets/images/IconSprite.svg#contact-card");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-contact-find:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-contact-find:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-contact-find:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-contact-find:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-contact-find:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-contact-find:after,
a.sysicon.sysicon-contact-find:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-contact-find:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-contact-find:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-contact-find:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-contact-find:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-contact-find:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-contact-find:not([disabled]):hover:after,
button.sysicon--before.sysicon-contact-find:not([disabled]):hover:before,
button.sysicon--after.sysicon-contact-find:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#contact-card");
mask-image: url("../../Assets/images/IconSprite.svg#contact-card");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-configure:after,
.sysicon--before.sysicon-configure:before,
.sysicon--after.sysicon-configure:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#configuration");
mask-image: url("../../Assets/images/IconSprite.svg#configuration");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-configure:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-configure:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-configure:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-configure:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-configure:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-configure:after,
a.sysicon.sysicon-configure:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-configure:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-configure:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-configure:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-configure:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-configure:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-configure:not([disabled]):hover:after,
button.sysicon--before.sysicon-configure:not([disabled]):hover:before,
button.sysicon--after.sysicon-configure:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#configuration");
mask-image: url("../../Assets/images/IconSprite.svg#configuration");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-confirm:after,
.sysicon--before.sysicon-confirm:before,
.sysicon--after.sysicon-confirm:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#confirm");
mask-image: url("../../Assets/images/IconSprite.svg#confirm");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #45812f;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-confirm:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-confirm:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-confirm:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-confirm:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-confirm:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-confirm:after,
a.sysicon.sysicon-confirm:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-confirm:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-confirm:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-confirm:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-confirm:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-confirm:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-confirm:not([disabled]):hover:after,
button.sysicon--before.sysicon-confirm:not([disabled]):hover:before,
button.sysicon--after.sysicon-confirm:not([disabled]):hover:after {
background: #45812f;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#confirm");
mask-image: url("../../Assets/images/IconSprite.svg#confirm");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-copy:after,
.sysicon--before.sysicon-copy:before,
.sysicon--after.sysicon-copy:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#copy");
mask-image: url("../../Assets/images/IconSprite.svg#copy");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-copy:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-copy:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-copy:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-copy:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-copy:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-copy:after,
a.sysicon.sysicon-copy:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-copy:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-copy:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-copy:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-copy:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-copy:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-copy:not([disabled]):hover:after,
button.sysicon--before.sysicon-copy:not([disabled]):hover:before,
button.sysicon--after.sysicon-copy:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#copy");
mask-image: url("../../Assets/images/IconSprite.svg#copy");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-collapsed:after,
.sysicon--before.sysicon-collapsed:before,
.sysicon--after.sysicon-collapsed:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#collapsed");
mask-image: url("../../Assets/images/IconSprite.svg#collapsed");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-collapsed:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-collapsed:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-collapsed:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-collapsed:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-collapsed:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-collapsed:after,
a.sysicon.sysicon-collapsed:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-collapsed:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-collapsed:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-collapsed:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-collapsed:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-collapsed:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-collapsed:not([disabled]):hover:after,
button.sysicon--before.sysicon-collapsed:not([disabled]):hover:before,
button.sysicon--after.sysicon-collapsed:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#collapsed");
mask-image: url("../../Assets/images/IconSprite.svg#collapsed");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-check:after,
.sysicon--before.sysicon-check:before,
.sysicon--after.sysicon-check:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#checkmark");
mask-image: url("../../Assets/images/IconSprite.svg#checkmark");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #45812f;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-check:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-check:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-check:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-check:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-check:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-check:after,
a.sysicon.sysicon-check:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-check:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-check:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-check:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-check:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-check:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-check:not([disabled]):hover:after,
button.sysicon--before.sysicon-check:not([disabled]):hover:before,
button.sysicon--after.sysicon-check:not([disabled]):hover:after {
background: #45812f;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#checkmark");
mask-image: url("../../Assets/images/IconSprite.svg#checkmark");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-danger:after,
.sysicon--before.sysicon-danger:before,
.sysicon--after.sysicon-danger:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#warning");
mask-image: url("../../Assets/images/IconSprite.svg#warning");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #d03528;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-danger:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-danger:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-danger:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-danger:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-danger:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-danger:after,
a.sysicon.sysicon-danger:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-danger:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-danger:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-danger:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-danger:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-danger:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-danger:not([disabled]):hover:after,
button.sysicon--before.sysicon-danger:not([disabled]):hover:before,
button.sysicon--after.sysicon-danger:not([disabled]):hover:after {
background: #d03528;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#warning");
mask-image: url("../../Assets/images/IconSprite.svg#warning");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-delete:after,
.sysicon--before.sysicon-delete:before,
.sysicon--after.sysicon-delete:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #d03528;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-delete:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-delete:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-delete:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-delete:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-delete:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-delete:after,
a.sysicon.sysicon-delete:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-delete:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-delete:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-delete:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-delete:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-delete:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-delete:not([disabled]):hover:after,
button.sysicon--before.sysicon-delete:not([disabled]):hover:before,
button.sysicon--after.sysicon-delete:not([disabled]):hover:after {
background: #d03528;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-download:after,
.sysicon--before.sysicon-download:before,
.sysicon--after.sysicon-download:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#download");
mask-image: url("../../Assets/images/IconSprite.svg#download");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-download:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-download:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-download:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-download:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-download:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-download:after,
a.sysicon.sysicon-download:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-download:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-download:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-download:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-download:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-download:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-download:not([disabled]):hover:after,
button.sysicon--before.sysicon-download:not([disabled]):hover:before,
button.sysicon--after.sysicon-download:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#download");
mask-image: url("../../Assets/images/IconSprite.svg#download");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-edit:after,
.sysicon--before.sysicon-edit:before,
.sysicon--after.sysicon-edit:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-edit");
mask-image: url("../../Assets/images/IconSprite.svg#action-edit");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-edit:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-edit:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-edit:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-edit:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-edit:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-edit:after,
a.sysicon.sysicon-edit:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-edit:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-edit:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-edit:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-edit:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-edit:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-edit:not([disabled]):hover:after,
button.sysicon--before.sysicon-edit:not([disabled]):hover:before,
button.sysicon--after.sysicon-edit:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-edit");
mask-image: url("../../Assets/images/IconSprite.svg#action-edit");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-event:after,
.sysicon--before.sysicon-event:before,
.sysicon--after.sysicon-event:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#event");
mask-image: url("../../Assets/images/IconSprite.svg#event");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-event:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-event:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-event:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-event:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-event:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-event:after,
a.sysicon.sysicon-event:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-event:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-event:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-event:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-event:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-event:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-event:not([disabled]):hover:after,
button.sysicon--before.sysicon-event:not([disabled]):hover:before,
button.sysicon--after.sysicon-event:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#event");
mask-image: url("../../Assets/images/IconSprite.svg#event");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-expanded:after,
.sysicon--before.sysicon-expanded:before,
.sysicon--after.sysicon-expanded:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#expanded");
mask-image: url("../../Assets/images/IconSprite.svg#expanded");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-expanded:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-expanded:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-expanded:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-expanded:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-expanded:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-expanded:after,
a.sysicon.sysicon-expanded:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-expanded:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-expanded:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-expanded:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-expanded:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-expanded:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-expanded:not([disabled]):hover:after,
button.sysicon--before.sysicon-expanded:not([disabled]):hover:before,
button.sysicon--after.sysicon-expanded:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#expanded");
mask-image: url("../../Assets/images/IconSprite.svg#expanded");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-find:after,
.sysicon--before.sysicon-find:before,
.sysicon--after.sysicon-find:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-find:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-find:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-find:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-find:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-find:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-find:after,
a.sysicon.sysicon-find:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-find:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-find:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-find:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-find:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-find:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-find:not([disabled]):hover:after,
button.sysicon--before.sysicon-find:not([disabled]):hover:before,
button.sysicon--after.sysicon-find:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-donation:after,
.sysicon--before.sysicon-donation:before,
.sysicon--after.sysicon-donation:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#donation");
mask-image: url("../../Assets/images/IconSprite.svg#donation");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-donation:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-donation:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-donation:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-donation:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-donation:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-donation:after,
a.sysicon.sysicon-donation:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-donation:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-donation:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-donation:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-donation:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-donation:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-donation:not([disabled]):hover:after,
button.sysicon--before.sysicon-donation:not([disabled]):hover:before,
button.sysicon--after.sysicon-donation:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#donation");
mask-image: url("../../Assets/images/IconSprite.svg#donation");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-group:after,
.sysicon--before.sysicon-group:before,
.sysicon--after.sysicon-group:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#group");
mask-image: url("../../Assets/images/IconSprite.svg#group");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-group:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-group:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-group:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-group:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-group:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-group:after,
a.sysicon.sysicon-group:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-group:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-group:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-group:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-group:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-group:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-group:not([disabled]):hover:after,
button.sysicon--before.sysicon-group:not([disabled]):hover:before,
button.sysicon--after.sysicon-group:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#group");
mask-image: url("../../Assets/images/IconSprite.svg#group");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-help:after,
.sysicon--before.sysicon-help:before,
.sysicon--after.sysicon-help:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#help");
mask-image: url("../../Assets/images/IconSprite.svg#help");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #007ba3;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-help:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-help:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-help:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-help:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-help:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-help:after,
a.sysicon.sysicon-help:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-help:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-help:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-help:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-help:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-help:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-help:not([disabled]):hover:after,
button.sysicon--before.sysicon-help:not([disabled]):hover:before,
button.sysicon--after.sysicon-help:not([disabled]):hover:after {
background: #007ba3;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#help");
mask-image: url("../../Assets/images/IconSprite.svg#help");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-hide:after,
.sysicon--before.sysicon-hide:before,
.sysicon--after.sysicon-hide:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#hide");
mask-image: url("../../Assets/images/IconSprite.svg#hide");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-hide:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-hide:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-hide:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-hide:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-hide:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-hide:after,
a.sysicon.sysicon-hide:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-hide:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-hide:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-hide:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-hide:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-hide:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-hide:not([disabled]):hover:after,
button.sysicon--before.sysicon-hide:not([disabled]):hover:before,
button.sysicon--after.sysicon-hide:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#hide");
mask-image: url("../../Assets/images/IconSprite.svg#hide");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-info:after,
.sysicon--before.sysicon-info:before,
.sysicon--after.sysicon-info:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#info");
mask-image: url("../../Assets/images/IconSprite.svg#info");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-info:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-info:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-info:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-info:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-info:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-info:after,
a.sysicon.sysicon-info:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-info:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-info:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-info:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-info:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-info:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-info:not([disabled]):hover:after,
button.sysicon--before.sysicon-info:not([disabled]):hover:before,
button.sysicon--after.sysicon-info:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#info");
mask-image: url("../../Assets/images/IconSprite.svg#info");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-lock-closed:after,
.sysicon--before.sysicon-lock-closed:before,
.sysicon--after.sysicon-lock-closed:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#locked");
mask-image: url("../../Assets/images/IconSprite.svg#locked");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-lock-closed:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-lock-closed:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-lock-closed:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-lock-closed:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-lock-closed:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-lock-closed:after,
a.sysicon.sysicon-lock-closed:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-lock-closed:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-lock-closed:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-lock-closed:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-lock-closed:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-lock-closed:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-lock-closed:not([disabled]):hover:after,
button.sysicon--before.sysicon-lock-closed:not([disabled]):hover:before,
button.sysicon--after.sysicon-lock-closed:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#locked");
mask-image: url("../../Assets/images/IconSprite.svg#locked");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-lookup-search:after,
.sysicon--before.sysicon-lookup-search:before,
.sysicon--after.sysicon-lookup-search:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#lookup-search");
mask-image: url("../../Assets/images/IconSprite.svg#lookup-search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-lookup-search:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-lookup-search:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-lookup-search:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-lookup-search:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-lookup-search:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-lookup-search:after,
a.sysicon.sysicon-lookup-search:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-lookup-search:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-lookup-search:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-lookup-search:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-lookup-search:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-lookup-search:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-lookup-search:not([disabled]):hover:after,
button.sysicon--before.sysicon-lookup-search:not([disabled]):hover:before,
button.sysicon--after.sysicon-lookup-search:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#lookup-search");
mask-image: url("../../Assets/images/IconSprite.svg#lookup-search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-minus-circle:after,
.sysicon--before.sysicon-minus-circle:before,
.sysicon--after.sysicon-minus-circle:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#minus-circle");
mask-image: url("../../Assets/images/IconSprite.svg#minus-circle");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-minus-circle:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-minus-circle:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-minus-circle:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-minus-circle:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-minus-circle:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-minus-circle:after,
a.sysicon.sysicon-minus-circle:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-minus-circle:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-minus-circle:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-minus-circle:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-minus-circle:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-minus-circle:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-minus-circle:not([disabled]):hover:after,
button.sysicon--before.sysicon-minus-circle:not([disabled]):hover:before,
button.sysicon--after.sysicon-minus-circle:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#minus-circle");
mask-image: url("../../Assets/images/IconSprite.svg#minus-circle");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-move-up:after,
.sysicon--before.sysicon-move-up:before,
.sysicon--after.sysicon-move-up:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-up");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-up");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-move-up:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-move-up:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-move-up:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-move-up:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-move-up:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-move-up:after,
a.sysicon.sysicon-move-up:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-move-up:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-move-up:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-move-up:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-move-up:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-move-up:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-move-up:not([disabled]):hover:after,
button.sysicon--before.sysicon-move-up:not([disabled]):hover:before,
button.sysicon--after.sysicon-move-up:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-up");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-up");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-move-down:after,
.sysicon--before.sysicon-move-down:before,
.sysicon--after.sysicon-move-down:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-down");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-down");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-move-down:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-move-down:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-move-down:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-move-down:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-move-down:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-move-down:after,
a.sysicon.sysicon-move-down:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-move-down:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-move-down:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-move-down:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-move-down:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-move-down:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-move-down:not([disabled]):hover:after,
button.sysicon--before.sysicon-move-down:not([disabled]):hover:before,
button.sysicon--after.sysicon-move-down:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-down");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-down");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-move-right:after,
.sysicon--before.sysicon-move-right:before,
.sysicon--after.sysicon-move-right:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-move-right:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-move-right:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-move-right:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-move-right:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-move-right:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-move-right:after,
a.sysicon.sysicon-move-right:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-move-right:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-move-right:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-move-right:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-move-right:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-move-right:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-move-right:not([disabled]):hover:after,
button.sysicon--before.sysicon-move-right:not([disabled]):hover:before,
button.sysicon--after.sysicon-move-right:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-move-left:after,
.sysicon--before.sysicon-move-left:before,
.sysicon--after.sysicon-move-left:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-left");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-left");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-move-left:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-move-left:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-move-left:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-move-left:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-move-left:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-move-left:after,
a.sysicon.sysicon-move-left:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-move-left:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-move-left:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-move-left:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-move-left:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-move-left:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-move-left:not([disabled]):hover:after,
button.sysicon--before.sysicon-move-left:not([disabled]):hover:before,
button.sysicon--after.sysicon-move-left:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-left");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-left");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-notifications:after,
.sysicon--before.sysicon-notifications:before,
.sysicon--after.sysicon-notifications:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#notifications");
mask-image: url("../../Assets/images/IconSprite.svg#notifications");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-notifications:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-notifications:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-notifications:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-notifications:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-notifications:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-notifications:after,
a.sysicon.sysicon-notifications:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-notifications:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-notifications:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-notifications:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-notifications:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-notifications:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-notifications:not([disabled]):hover:after,
button.sysicon--before.sysicon-notifications:not([disabled]):hover:before,
button.sysicon--after.sysicon-notifications:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#notifications");
mask-image: url("../../Assets/images/IconSprite.svg#notifications");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-obo-change:after,
.sysicon--before.sysicon-obo-change:before,
.sysicon--after.sysicon-obo-change:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-change");
mask-image: url("../../Assets/images/IconSprite.svg#obo-change");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-obo-change:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-obo-change:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-obo-change:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-obo-change:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-obo-change:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-obo-change:after,
a.sysicon.sysicon-obo-change:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-obo-change:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-obo-change:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-obo-change:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-obo-change:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-obo-change:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-obo-change:not([disabled]):hover:after,
button.sysicon--before.sysicon-obo-change:not([disabled]):hover:before,
button.sysicon--after.sysicon-obo-change:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-change");
mask-image: url("../../Assets/images/IconSprite.svg#obo-change");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-obo-clear:after,
.sysicon--before.sysicon-obo-clear:before,
.sysicon--after.sysicon-obo-clear:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-clear");
mask-image: url("../../Assets/images/IconSprite.svg#action-clear");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-obo-clear:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-obo-clear:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-obo-clear:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-obo-clear:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-obo-clear:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-obo-clear:after,
a.sysicon.sysicon-obo-clear:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-obo-clear:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-obo-clear:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-obo-clear:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-obo-clear:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-obo-clear:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-obo-clear:not([disabled]):hover:after,
button.sysicon--before.sysicon-obo-clear:not([disabled]):hover:before,
button.sysicon--after.sysicon-obo-clear:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-clear");
mask-image: url("../../Assets/images/IconSprite.svg#action-clear");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-obo-clear-cart:after,
.sysicon--before.sysicon-obo-clear-cart:before,
.sysicon--after.sysicon-obo-clear-cart:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-clear-cart");
mask-image: url("../../Assets/images/IconSprite.svg#obo-clear-cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-obo-clear-cart:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-obo-clear-cart:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-obo-clear-cart:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-obo-clear-cart:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-obo-clear-cart:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-obo-clear-cart:after,
a.sysicon.sysicon-obo-clear-cart:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-obo-clear-cart:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-obo-clear-cart:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-obo-clear-cart:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-obo-clear-cart:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-obo-clear-cart:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-obo-clear-cart:not([disabled]):hover:after,
button.sysicon--before.sysicon-obo-clear-cart:not([disabled]):hover:before,
button.sysicon--after.sysicon-obo-clear-cart:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-clear-cart");
mask-image: url("../../Assets/images/IconSprite.svg#obo-clear-cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-organization:after,
.sysicon--before.sysicon-organization:before,
.sysicon--after.sysicon-organization:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#organization");
mask-image: url("../../Assets/images/IconSprite.svg#organization");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-organization:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-organization:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-organization:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-organization:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-organization:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-organization:after,
a.sysicon.sysicon-organization:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-organization:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-organization:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-organization:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-organization:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-organization:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-organization:not([disabled]):hover:after,
button.sysicon--before.sysicon-organization:not([disabled]):hover:before,
button.sysicon--after.sysicon-organization:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#organization");
mask-image: url("../../Assets/images/IconSprite.svg#organization");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-pending:after,
.sysicon--before.sysicon-pending:before,
.sysicon--after.sysicon-pending:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#pending");
mask-image: url("../../Assets/images/IconSprite.svg#pending");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #bb5000;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-pending:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-pending:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-pending:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-pending:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-pending:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-pending:after,
a.sysicon.sysicon-pending:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-pending:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-pending:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-pending:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-pending:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-pending:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-pending:not([disabled]):hover:after,
button.sysicon--before.sysicon-pending:not([disabled]):hover:before,
button.sysicon--after.sysicon-pending:not([disabled]):hover:after {
background: #bb5000;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#pending");
mask-image: url("../../Assets/images/IconSprite.svg#pending");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-plus-circle:after,
.sysicon--before.sysicon-plus-circle:before,
.sysicon--after.sysicon-plus-circle:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#plus-circle");
mask-image: url("../../Assets/images/IconSprite.svg#plus-circle");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-plus-circle:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-plus-circle:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-plus-circle:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-plus-circle:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-plus-circle:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-plus-circle:after,
a.sysicon.sysicon-plus-circle:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-plus-circle:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-plus-circle:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-plus-circle:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-plus-circle:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-plus-circle:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-plus-circle:not([disabled]):hover:after,
button.sysicon--before.sysicon-plus-circle:not([disabled]):hover:before,
button.sysicon--after.sysicon-plus-circle:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#plus-circle");
mask-image: url("../../Assets/images/IconSprite.svg#plus-circle");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-person:after,
.sysicon--before.sysicon-person:before,
.sysicon--after.sysicon-person:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#person");
mask-image: url("../../Assets/images/IconSprite.svg#person");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-person:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-person:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-person:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-person:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-person:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-person:after,
a.sysicon.sysicon-person:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-person:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-person:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-person:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-person:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-person:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-person:not([disabled]):hover:after,
button.sysicon--before.sysicon-person:not([disabled]):hover:before,
button.sysicon--after.sysicon-person:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#person");
mask-image: url("../../Assets/images/IconSprite.svg#person");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-product:after,
.sysicon--before.sysicon-product:before,
.sysicon--after.sysicon-product:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#cart");
mask-image: url("../../Assets/images/IconSprite.svg#cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-product:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-product:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-product:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-product:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-product:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-product:after,
a.sysicon.sysicon-product:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-product:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-product:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-product:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-product:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-product:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-product:not([disabled]):hover:after,
button.sysicon--before.sysicon-product:not([disabled]):hover:before,
button.sysicon--after.sysicon-product:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#cart");
mask-image: url("../../Assets/images/IconSprite.svg#cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-query:after,
.sysicon--before.sysicon-query:before,
.sysicon--after.sysicon-query:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-query:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-query:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-query:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-query:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-query:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-query:after,
a.sysicon.sysicon-query:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-query:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-query:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-query:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-query:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-query:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-query:not([disabled]):hover:after,
button.sysicon--before.sysicon-query:not([disabled]):hover:before,
button.sysicon--after.sysicon-query:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-refresh:after,
.sysicon--before.sysicon-refresh:before,
.sysicon--after.sysicon-refresh:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-refresh");
mask-image: url("../../Assets/images/IconSprite.svg#action-refresh");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-refresh:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-refresh:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-refresh:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-refresh:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-refresh:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-refresh:after,
a.sysicon.sysicon-refresh:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-refresh:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-refresh:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-refresh:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-refresh:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-refresh:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-refresh:not([disabled]):hover:after,
button.sysicon--before.sysicon-refresh:not([disabled]):hover:before,
button.sysicon--after.sysicon-refresh:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-refresh");
mask-image: url("../../Assets/images/IconSprite.svg#action-refresh");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-robot-assistant:after,
.sysicon--before.sysicon-robot-assistant:before,
.sysicon--after.sysicon-robot-assistant:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#imis-robot");
mask-image: url("../../Assets/images/IconSprite.svg#imis-robot");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #fff;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-robot-assistant:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-robot-assistant:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-robot-assistant:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-robot-assistant:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-robot-assistant:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-robot-assistant:after,
a.sysicon.sysicon-robot-assistant:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-robot-assistant:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-robot-assistant:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-robot-assistant:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-robot-assistant:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-robot-assistant:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-robot-assistant:not([disabled]):hover:after,
button.sysicon--before.sysicon-robot-assistant:not([disabled]):hover:before,
button.sysicon--after.sysicon-robot-assistant:not([disabled]):hover:after {
background: #fff;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#imis-robot");
mask-image: url("../../Assets/images/IconSprite.svg#imis-robot");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-save:after,
.sysicon--before.sysicon-save:before,
.sysicon--after.sysicon-save:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-add");
mask-image: url("../../Assets/images/IconSprite.svg#action-add");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-save:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-save:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-save:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-save:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-save:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-save:after,
a.sysicon.sysicon-save:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-save:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-save:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-save:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-save:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-save:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-save:not([disabled]):hover:after,
button.sysicon--before.sysicon-save:not([disabled]):hover:before,
button.sysicon--after.sysicon-save:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-add");
mask-image: url("../../Assets/images/IconSprite.svg#action-add");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-status-success:after,
.sysicon--before.sysicon-status-success:before,
.sysicon--after.sysicon-status-success:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#success");
mask-image: url("../../Assets/images/IconSprite.svg#success");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #45812f;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-status-success:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-status-success:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-status-success:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-status-success:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-status-success:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-status-success:after,
a.sysicon.sysicon-status-success:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-status-success:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-status-success:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-status-success:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-status-success:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-status-success:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-status-success:not([disabled]):hover:after,
button.sysicon--before.sysicon-status-success:not([disabled]):hover:before,
button.sysicon--after.sysicon-status-success:not([disabled]):hover:after {
background: #45812f;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#success");
mask-image: url("../../Assets/images/IconSprite.svg#success");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-status-error:after,
.sysicon--before.sysicon-status-error:before,
.sysicon--after.sysicon-status-error:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: #d03528;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-status-error:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-status-error:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-status-error:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-status-error:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-status-error:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-status-error:after,
a.sysicon.sysicon-status-error:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-status-error:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-status-error:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-status-error:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-status-error:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-status-error:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-status-error:not([disabled]):hover:after,
button.sysicon--before.sysicon-status-error:not([disabled]):hover:before,
button.sysicon--after.sysicon-status-error:not([disabled]):hover:after {
background: #d03528;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
mask-image: url("../../Assets/images/IconSprite.svg#action-remove");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-select:after,
.sysicon--before.sysicon-select:before,
.sysicon--after.sysicon-select:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-select:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-select:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-select:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-select:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-select:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-select:after,
a.sysicon.sysicon-select:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-select:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-select:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-select:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-select:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-select:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-select:not([disabled]):hover:after,
button.sysicon--before.sysicon-select:not([disabled]):hover:before,
button.sysicon--after.sysicon-select:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
mask-image: url("../../Assets/images/IconSprite.svg#arrow-right");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-event-template:after,
.sysicon--before.sysicon-event-template:before,
.sysicon--after.sysicon-event-template:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#template");
mask-image: url("../../Assets/images/IconSprite.svg#template");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-event-template:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-event-template:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-event-template:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-event-template:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-event-template:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-event-template:after,
a.sysicon.sysicon-event-template:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-event-template:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-event-template:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-event-template:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-event-template:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-event-template:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-event-template:not([disabled]):hover:after,
button.sysicon--before.sysicon-event-template:not([disabled]):hover:before,
button.sysicon--after.sysicon-event-template:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#template");
mask-image: url("../../Assets/images/IconSprite.svg#template");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-undo:after,
.sysicon--before.sysicon-undo:before,
.sysicon--after.sysicon-undo:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-undo");
mask-image: url("../../Assets/images/IconSprite.svg#action-undo");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-undo:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-undo:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-undo:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-undo:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-undo:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-undo:after,
a.sysicon.sysicon-undo:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-undo:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-undo:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-undo:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-undo:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-undo:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-undo:not([disabled]):hover:after,
button.sysicon--before.sysicon-undo:not([disabled]):hover:before,
button.sysicon--after.sysicon-undo:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-undo");
mask-image: url("../../Assets/images/IconSprite.svg#action-undo");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-upgrade:after,
.sysicon--before.sysicon-upgrade:before,
.sysicon--after.sysicon-upgrade:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#upgrade");
mask-image: url("../../Assets/images/IconSprite.svg#upgrade");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: linear-gradient(90deg, #00a9e0 0%, #8e51ae 100%);
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-upgrade:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-upgrade:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-upgrade:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-upgrade:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-upgrade:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-upgrade:after,
a.sysicon.sysicon-upgrade:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-upgrade:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-upgrade:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-upgrade:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-upgrade:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-upgrade:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-upgrade:not([disabled]):hover:after,
button.sysicon--before.sysicon-upgrade:not([disabled]):hover:before,
button.sysicon--after.sysicon-upgrade:not([disabled]):hover:after {
background: linear-gradient(90deg, #00a9e0 0%, #8e51ae 100%);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#upgrade");
mask-image: url("../../Assets/images/IconSprite.svg#upgrade");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-zoom-in:after,
.sysicon--before.sysicon-zoom-in:before,
.sysicon--after.sysicon-zoom-in:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#zoom-in");
mask-image: url("../../Assets/images/IconSprite.svg#zoom-in");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-zoom-in:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-zoom-in:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-zoom-in:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-zoom-in:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-zoom-in:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-zoom-in:after,
a.sysicon.sysicon-zoom-in:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-zoom-in:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-zoom-in:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-zoom-in:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-zoom-in:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-zoom-in:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-zoom-in:not([disabled]):hover:after,
button.sysicon--before.sysicon-zoom-in:not([disabled]):hover:before,
button.sysicon--after.sysicon-zoom-in:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#zoom-in");
mask-image: url("../../Assets/images/IconSprite.svg#zoom-in");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.sysicon.sysicon-zoom-out:after,
.sysicon--before.sysicon-zoom-out:before,
.sysicon--after.sysicon-zoom-out:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#zoom-out");
mask-image: url("../../Assets/images/IconSprite.svg#zoom-out");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a:not(.aspNetDisabled):hover .sysicon.sysicon-zoom-out:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-zoom-out:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-zoom-out:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-zoom-out:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-zoom-out:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-zoom-out:after,
a.sysicon.sysicon-zoom-out:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-zoom-out:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-zoom-out:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-zoom-out:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-zoom-out:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-zoom-out:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-zoom-out:not([disabled]):hover:after,
button.sysicon--before.sysicon-zoom-out:not([disabled]):hover:before,
button.sysicon--after.sysicon-zoom-out:not([disabled]):hover:after {
background: var(--system-icon-color-hover);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#zoom-out");
mask-image: url("../../Assets/images/IconSprite.svg#zoom-out");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* #endregion */
/* Icons ignored as part of the SVG refactor since they are not used in the product:
ArrowDown, ArrowUp, ArrowDownOff, ArrowUpOff, CancelChange, Refresh, DeleteImage, EditImage */
.wrapper.SVG-enabled .obo-action.obo-clear {
margin-left: .2em;
display: inline-flex;
align-items: center;
width: 18px;
height: 18px;
/* temporary */
background: none;
}
.wrapper.SVG-enabled .obo-action.obo-clear:before {
width: 18px;
height: 18px;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#action-clear");
mask-image: url("../../Assets/images/IconSprite.svg#action-clear");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 1;
}
.wrapper.SVG-enabled .obo-action.obo-clear:hover:before {
background: var(--system-icon-color-hover);
opacity: 1;
}
.wrapper.SVG-enabled .obo-action.obo-change-contact {
margin-left: .2em;
display: inline-flex;
align-items: center;
width: 18px;
height: 18px;
/* temporary */
background: none;
}
.wrapper.SVG-enabled .obo-action.obo-change-contact:before {
width: 18px;
height: 18px;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-change");
mask-image: url("../../Assets/images/IconSprite.svg#obo-change");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 1;
}
.wrapper.SVG-enabled .obo-action.obo-change-contact:hover:before {
background: var(--system-icon-color-hover);
opacity: 1;
}
.obo-action.obo-clear-cart {
margin-left: .2em;
display: inline-flex;
align-items: center;
width: 18px;
height: 18px;
/* temporary */
background: none;
}
.obo-action.obo-clear-cart:before {
width: 18px;
height: 18px;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-clear-cart");
mask-image: url("../../Assets/images/IconSprite.svg#obo-clear-cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 1;
}
.obo-action.obo-clear-cart:hover:before {
background: var(--system-icon-color-hover);
opacity: 1;
}
/* Toggle buttons (auxiliary)
========================================================================== */
.wrapper.SVG-enabled .batch-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .batch-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#batch");
mask-image: url("../../Assets/images/IconSprite.svg#batch");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .batch-toggle:hover, .wrapper.SVG-enabled .batch-toggle:focus, .wrapper.SVG-enabled .batch-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .batch-toggle.on {
background: #003a4d;
}
.wrapper.SVG-enabled .batch-toggle.on:before {
background: #fff;
}
.wrapper.SVG-enabled .batch-toggle.on:hover, .wrapper.SVG-enabled .batch-toggle.on:focus, .wrapper.SVG-enabled .batch-toggle.on:active {
background: #005875;
}
.wrapper.SVG-enabled .batch-toggle.text-hide {
position: relative;
}
.wrapper.SVG-enabled .batch-toggle.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .list-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .list-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#list");
mask-image: url("../../Assets/images/IconSprite.svg#list");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .list-toggle:hover, .wrapper.SVG-enabled .list-toggle:focus, .wrapper.SVG-enabled .list-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .list-toggle.on {
background: #003a4d;
}
.wrapper.SVG-enabled .list-toggle.on:before {
background: #fff;
}
.wrapper.SVG-enabled .list-toggle.on:hover, .wrapper.SVG-enabled .list-toggle.on:focus, .wrapper.SVG-enabled .list-toggle.on:active {
background: #005875;
}
.wrapper.SVG-enabled .list-toggle.text-hide {
position: relative;
}
.wrapper.SVG-enabled .list-toggle.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .obo-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .obo-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#obo-toggle");
mask-image: url("../../Assets/images/IconSprite.svg#obo-toggle");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .obo-toggle:hover, .wrapper.SVG-enabled .obo-toggle:focus, .wrapper.SVG-enabled .obo-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .obo-toggle.on {
background: #003a4d;
}
.wrapper.SVG-enabled .obo-toggle.on:before {
background: #fff;
}
.wrapper.SVG-enabled .obo-toggle.on:hover, .wrapper.SVG-enabled .obo-toggle.on:focus, .wrapper.SVG-enabled .obo-toggle.on:active {
background: #005875;
}
.wrapper.SVG-enabled .obo-toggle.text-hide {
position: relative;
}
.wrapper.SVG-enabled .obo-toggle.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .nav-aux-cart a {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .nav-aux-cart a:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#cart");
mask-image: url("../../Assets/images/IconSprite.svg#cart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .nav-aux-cart a:hover, .wrapper.SVG-enabled .nav-aux-cart a:focus, .wrapper.SVG-enabled .nav-aux-cart a:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .nav-aux-cart a.on {
background: #003a4d;
}
.wrapper.SVG-enabled .nav-aux-cart a.on:before {
background: #fff;
}
.wrapper.SVG-enabled .nav-aux-cart a.on:hover, .wrapper.SVG-enabled .nav-aux-cart a.on:focus, .wrapper.SVG-enabled .nav-aux-cart a.on:active {
background: #005875;
}
.wrapper.SVG-enabled .nav-aux-cart a.text-hide {
position: relative;
}
.wrapper.SVG-enabled .nav-aux-cart a.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .nav-aux-account a {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .nav-aux-account a:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#person");
mask-image: url("../../Assets/images/IconSprite.svg#person");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .nav-aux-account a:hover, .wrapper.SVG-enabled .nav-aux-account a:focus, .wrapper.SVG-enabled .nav-aux-account a:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .nav-aux-account a.on {
background: #003a4d;
}
.wrapper.SVG-enabled .nav-aux-account a.on:before {
background: #fff;
}
.wrapper.SVG-enabled .nav-aux-account a.on:hover, .wrapper.SVG-enabled .nav-aux-account a.on:focus, .wrapper.SVG-enabled .nav-aux-account a.on:active {
background: #005875;
}
.wrapper.SVG-enabled .nav-aux-account a.text-hide {
position: relative;
}
.wrapper.SVG-enabled .nav-aux-account a.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .navbar-toggle .icon-search {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .navbar-toggle .icon-search:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .navbar-toggle .icon-search:hover, .wrapper.SVG-enabled .navbar-toggle .icon-search:focus, .wrapper.SVG-enabled .navbar-toggle .icon-search:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .navbar-toggle .icon-search.on {
background: #003a4d;
}
.wrapper.SVG-enabled .navbar-toggle .icon-search.on:before {
background: #fff;
}
.wrapper.SVG-enabled .navbar-toggle .icon-search.on:hover, .wrapper.SVG-enabled .navbar-toggle .icon-search.on:focus, .wrapper.SVG-enabled .navbar-toggle .icon-search.on:active {
background: #005875;
}
.wrapper.SVG-enabled .navbar-toggle .icon-search.text-hide {
position: relative;
}
.wrapper.SVG-enabled .navbar-toggle .icon-search.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .page-statistics-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .page-statistics-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#page-statistics");
mask-image: url("../../Assets/images/IconSprite.svg#page-statistics");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .page-statistics-toggle:hover, .wrapper.SVG-enabled .page-statistics-toggle:focus, .wrapper.SVG-enabled .page-statistics-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .page-statistics-toggle.on {
background: #003a4d;
}
.wrapper.SVG-enabled .page-statistics-toggle.on:before {
background: #fff;
}
.wrapper.SVG-enabled .page-statistics-toggle.on:hover, .wrapper.SVG-enabled .page-statistics-toggle.on:focus, .wrapper.SVG-enabled .page-statistics-toggle.on:active {
background: #005875;
}
.wrapper.SVG-enabled .page-statistics-toggle.text-hide {
position: relative;
}
.wrapper.SVG-enabled .page-statistics-toggle.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .ste-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .ste-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#easy-edit");
mask-image: url("../../Assets/images/IconSprite.svg#easy-edit");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .ste-toggle:hover, .wrapper.SVG-enabled .ste-toggle:focus, .wrapper.SVG-enabled .ste-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .ste-toggle.on {
background: #003a4d;
}
.wrapper.SVG-enabled .ste-toggle.on:before {
background: #fff;
}
.wrapper.SVG-enabled .ste-toggle.on:hover, .wrapper.SVG-enabled .ste-toggle.on:focus, .wrapper.SVG-enabled .ste-toggle.on:active {
background: #005875;
}
.wrapper.SVG-enabled .ste-toggle.text-hide {
position: relative;
}
.wrapper.SVG-enabled .ste-toggle.text-hide:before {
position: absolute;
}
.wrapper.SVG-enabled .transaction-date-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .transaction-date-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#calendar");
mask-image: url("../../Assets/images/IconSprite.svg#calendar");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .transaction-date-toggle:hover, .wrapper.SVG-enabled .transaction-date-toggle:focus, .wrapper.SVG-enabled .transaction-date-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.wrapper.SVG-enabled .transaction-date-toggle.on {
background: #003a4d;
}
.wrapper.SVG-enabled .transaction-date-toggle.on:before {
background: #fff;
}
.wrapper.SVG-enabled .transaction-date-toggle.on:hover, .wrapper.SVG-enabled .transaction-date-toggle.on:focus, .wrapper.SVG-enabled .transaction-date-toggle.on:active {
background: #005875;
}
.wrapper.SVG-enabled .transaction-date-toggle.text-hide {
position: relative;
}
.wrapper.SVG-enabled .transaction-date-toggle.text-hide:before {
position: absolute;
}
.notifications-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.notifications-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#notifications");
mask-image: url("../../Assets/images/IconSprite.svg#notifications");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.notifications-toggle:hover, .notifications-toggle:focus, .notifications-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.notifications-toggle.on {
background: #003a4d;
}
.notifications-toggle.on:before {
background: #fff;
}
.notifications-toggle.on:hover, .notifications-toggle.on:focus, .notifications-toggle.on:active {
background: #005875;
}
.notifications-toggle.text-hide {
position: relative;
}
.notifications-toggle.text-hide:before {
position: absolute;
}
.search-toggle {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.search-toggle:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.search-toggle:hover, .search-toggle:focus, .search-toggle:active {
background: rgba(0, 0, 0, 0.05);
}
.search-toggle.on {
background: #003a4d;
}
.search-toggle.on:before {
background: #fff;
}
.search-toggle.on:hover, .search-toggle.on:focus, .search-toggle.on:active {
background: #005875;
}
.search-toggle.text-hide {
position: relative;
}
.search-toggle.text-hide:before {
position: absolute;
}
.js-show-table {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.js-show-table:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#datagrid");
mask-image: url("../../Assets/images/IconSprite.svg#datagrid");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.js-show-table:hover, .js-show-table:focus, .js-show-table:active {
background: rgba(0, 0, 0, 0.05);
}
.js-show-table.on {
background: #003a4d;
}
.js-show-table.on:before {
background: #fff;
}
.js-show-table.on:hover, .js-show-table.on:focus, .js-show-table.on:active {
background: #005875;
}
.js-show-table.text-hide {
position: relative;
}
.js-show-table.text-hide:before {
position: absolute;
}
.js-show-chart {
width: 34px;
height: 34px;
border-radius: 3px;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
/* Temporary override until SVGs are standard */
background-image: none;
/* End of temporary override */
}
.js-show-chart:before {
width: 18px;
height: 18px;
background: var(--auxiliary-nav-icon-color);
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#chart");
mask-image: url("../../Assets/images/IconSprite.svg#chart");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.js-show-chart:hover, .js-show-chart:focus, .js-show-chart:active {
background: rgba(0, 0, 0, 0.05);
}
.js-show-chart.on {
background: #003a4d;
}
.js-show-chart.on:before {
background: #fff;
}
.js-show-chart.on:hover, .js-show-chart.on:focus, .js-show-chart.on:active {
background: #005875;
}
.js-show-chart.text-hide {
position: relative;
}
.js-show-chart.text-hide:before {
position: absolute;
}
.open .search-toggle:before {
filter: invert(100%);
}
.wrapper.SVG-enabled {
/* Temporary duplicate code for transition period */
/* Temporary override until SVGs are standard */
/* End of temporary override */
}
.wrapper.SVG-enabled .dropdown .caret {
border: none;
height: 10px;
margin-left: .2em;
position: relative;
background: none;
}
.wrapper.SVG-enabled .dropdown .caret:before {
width: 10px;
height: 10px;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#caret");
mask-image: url("../../Assets/images/IconSprite.svg#caret");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
background: var(--system-icon-color);
}
.wrapper.SVG-enabled .header-search > .header-search {
display: flex;
align-items: center;
}
.wrapper.SVG-enabled .header-search > .header-search:before {
position: static;
background: var(--auxiliary-nav-icon-color);
width: 18px;
height: 18px;
opacity: 0.4;
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#search");
mask-image: url("../../Assets/images/IconSprite.svg#search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
margin-left: 0.4em;
/* Temporary override until all themes are moved to SVG only */
background-image: none;
/* End of temporary override */
}
.wrapper.SVG-enabled .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text,
.wrapper.SVG-enabled .navbar-toggle .icon-search {
background-image: none;
}
/* Field signifier icons (read-only, usually applied to form fields)
========================================================================== */
.asi-common-finder-input::after,
.chosen-container:after {
width: 18px;
height: 18px;
background: var(--system-icon-color);
position: absolute;
top: 6px;
right: 5px;
opacity: 0.7;
}
.asi-common-finder-input {
position: relative;
display: inline-block;
}
.asi-common-finder-input input[formcontrolname="finderInput"] {
padding-right: 24px;
}
.asi-common-finder-input::after,
.chosen-container:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#lookup-search");
mask-image: url("../../Assets/images/IconSprite.svg#lookup-search");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Social networking icons
========================================================================== */
/**
* Social Share
*/
.RadSocialShare.SmallButtons .sshCustomIcon {
background-image: url(../images/social-small.png);
width: 16px;
height: 16px;
}
.RadSocialShare.MediumButtons .sshCustomIcon {
background-image: url(../images/social-medium.png);
width: 24px;
height: 24px;
}
.RadSocialShare.LargeButtons .sshCustomIcon {
background-image: url(../images/social-large.png);
width: 32px;
height: 32px;
}
.sshLinkItem:hover .sshCustomIcon {
opacity: .7;
filter: Alpha(opacity=70);
}
.sshCustomShareOnFacebook {
background-position: 0 0 !important;
}
.sshCustomShareOnTwitter {
background-position: -40px 0 !important;
}
.sshCustomLinkedIn {
background-position: -80px 0 !important;
}
.sshCustomMailTo {
background-position: -240px 0 !important;
}
.sshCustomCompactButton {
background-position: -280px 0 !important;
}
/* PBI 53440 & 53739 SocialShare icons added to DisplayTaggedList */
.ShareThisInline {
display: inline;
float: left;
}
.ShareThisInline:before,
.ShareThisInline:after {
clear: none;
}
.ShareThisInline .panel-body {
padding: 0;
}
.ShareThisInline .RadSocialShare {
padding: 0 0 0 5px;
}
.CommunityRepeaterTable .SectionTitle {
padding-right: 10px;
float: left;
}
/**
* Social Profiles & "Connect With Us" content areas
*/
.SocialSprite:after, .SignInButton i:after {
content: '';
display: block;
}
/* Global social sprite styles */
.SocialSprite {
width: 24px;
height: 24px;
padding: 0;
margin: 0.3em;
display: inline-flex;
align-items: center;
justify-content: center;
background: none !important;
/* Help upgrades with custom themes, remove eventually */
/* Hide text for sighted users */
text-indent: 100%;
overflow: hidden;
font-size: 0;
transition: opacity 0.2s ease-out;
opacity: .70;
}
@media screen and (prefers-reduced-motion: reduce) {
.SocialSprite {
transition: none;
}
}
.SocialSprite:hover, .SocialSprite:focus, .SocialSprite:active {
opacity: 1;
}
.SocialSprite:after {
width: 16.8px;
height: 16.8px;
}
.SocialSprite.LargeButtons {
width: 32px;
height: 32px;
}
.SocialSprite.LargeButtons:after {
width: 22.4px;
height: 22.4px;
}
/* Individual social sprite buttons */
.SocialSprite.FacebookIcon {
background: #3b5998 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.FacebookIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-facebook");
mask-image: url("../../Assets/images/IconSprite.svg#social-facebook");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.FacebookIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-facebook");
mask-image: url("../../Assets/images/IconSprite.svg#social-facebook");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.TwitterIcon {
background: #000 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.TwitterIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.TwitterIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.XIcon {
background: #000 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.XIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.XIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
mask-image: url("../../Assets/images/IconSprite.svg#social-twitter");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.LinkedInIcon {
background: #0077b5 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.LinkedInIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-linkedin");
mask-image: url("../../Assets/images/IconSprite.svg#social-linkedin");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.LinkedInIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-linkedin");
mask-image: url("../../Assets/images/IconSprite.svg#social-linkedin");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.YouTubeIcon {
background: #c4302b !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.YouTubeIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-youtube");
mask-image: url("../../Assets/images/IconSprite.svg#social-youtube");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.YouTubeIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-youtube");
mask-image: url("../../Assets/images/IconSprite.svg#social-youtube");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.EmailIcon {
background: #0a629a !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.EmailIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-email");
mask-image: url("../../Assets/images/IconSprite.svg#social-email");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.EmailIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-email");
mask-image: url("../../Assets/images/IconSprite.svg#social-email");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.PinterestIcon {
background: #E60023 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.PinterestIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-pinterest");
mask-image: url("../../Assets/images/IconSprite.svg#social-pinterest");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.PinterestIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-pinterest");
mask-image: url("../../Assets/images/IconSprite.svg#social-pinterest");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.GPlusIcon {
background: #db4a39 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.GPlusIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-gplus");
mask-image: url("../../Assets/images/IconSprite.svg#social-gplus");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.GPlusIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-gplus");
mask-image: url("../../Assets/images/IconSprite.svg#social-gplus");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.SkypeIcon {
background: #00aff0 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.SkypeIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-skype");
mask-image: url("../../Assets/images/IconSprite.svg#social-skype");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.SkypeIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-skype");
mask-image: url("../../Assets/images/IconSprite.svg#social-skype");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.InstagramIcon {
background: #e1306c !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.InstagramIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-instagram");
mask-image: url("../../Assets/images/IconSprite.svg#social-instagram");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.InstagramIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-instagram");
mask-image: url("../../Assets/images/IconSprite.svg#social-instagram");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.MediumIcon {
background: #000 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.MediumIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-medium");
mask-image: url("../../Assets/images/IconSprite.svg#social-medium");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.MediumIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-medium");
mask-image: url("../../Assets/images/IconSprite.svg#social-medium");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.TikTokIcon {
background: #000 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.TikTokIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-tiktok");
mask-image: url("../../Assets/images/IconSprite.svg#social-tiktok");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
img.SocialSprite.TikTokIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-tiktok");
mask-image: url("../../Assets/images/IconSprite.svg#social-tiktok");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SocialSprite.SnapChatIcon {
background: #fffc00 !important;
/* !important - Help upgrades with custom themes, remove eventually */
}
.SocialSprite.SnapChatIcon:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-snapchat");
mask-image: url("../../Assets/images/IconSprite.svg#social-snapchat");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #000;
}
img.SocialSprite.SnapChatIcon {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-snapchat");
mask-image: url("../../Assets/images/IconSprite.svg#social-snapchat");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #000;
}
/**
* Social sign in buttons
*/
/* The network icons within the sign in buttons */
.SignInButton.TextButton {
/* had to make this a little more specific to override theme styles */
width: 100%;
margin-bottom: 1em;
text-align: center;
}
.SignInButton i {
padding: 0;
margin-right: 0.5em;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.SignInButton i:after {
width: 11.2px;
height: 11.2px;
}
.SignInButton.Facebook {
background-color: #3b5998;
border-color: transparent;
}
.SignInButton.Facebook, .SignInButton.Facebook:hover, .SignInButton.Facebook:focus, .SignInButton.Facebook:active, .SignInButton.Facebook:visited {
text-decoration: none;
}
.SignInButton.Facebook, .SignInButton.Facebook:visited {
color: #fff;
}
.SignInButton.Facebook:hover, .SignInButton.Facebook:focus, .SignInButton.Facebook:active {
color: #fff;
text-decoration: none;
background-color: #30487b;
border-color: rgba(0, 0, 0, 0);
}
.SignInButton.Facebook:active {
background-image: none;
}
.SignInButton.Facebook:disabled, .SignInButton.Facebook:disabled:hover, .SignInButton.Facebook:disabled:focus, .SignInButton.Facebook:disabled:active, .SignInButton.Facebook.disabled, .SignInButton.Facebook.disabled:hover, .SignInButton.Facebook.disabled:focus, .SignInButton.Facebook.disabled:active, .SignInButton.Facebook.aspNetDisabled, .SignInButton.Facebook.aspNetDisabled:hover, .SignInButton.Facebook.aspNetDisabled:focus, .SignInButton.Facebook.aspNetDisabled:active {
color: #fff;
background-color: #3b5998;
border-color: transparent;
}
.SignInButton.Facebook i {
background-color: #3b5998;
}
.SignInButton.Facebook i:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-facebook");
mask-image: url("../../Assets/images/IconSprite.svg#social-facebook");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
.SignInButton.LinkedIn {
background-color: #0077b5;
border-color: transparent;
}
.SignInButton.LinkedIn, .SignInButton.LinkedIn:hover, .SignInButton.LinkedIn:focus, .SignInButton.LinkedIn:active, .SignInButton.LinkedIn:visited {
text-decoration: none;
}
.SignInButton.LinkedIn, .SignInButton.LinkedIn:visited {
color: #fff;
}
.SignInButton.LinkedIn:hover, .SignInButton.LinkedIn:focus, .SignInButton.LinkedIn:active {
color: #fff;
text-decoration: none;
background-color: #005c8c;
border-color: rgba(0, 0, 0, 0);
}
.SignInButton.LinkedIn:active {
background-image: none;
}
.SignInButton.LinkedIn:disabled, .SignInButton.LinkedIn:disabled:hover, .SignInButton.LinkedIn:disabled:focus, .SignInButton.LinkedIn:disabled:active, .SignInButton.LinkedIn.disabled, .SignInButton.LinkedIn.disabled:hover, .SignInButton.LinkedIn.disabled:focus, .SignInButton.LinkedIn.disabled:active, .SignInButton.LinkedIn.aspNetDisabled, .SignInButton.LinkedIn.aspNetDisabled:hover, .SignInButton.LinkedIn.aspNetDisabled:focus, .SignInButton.LinkedIn.aspNetDisabled:active {
color: #fff;
background-color: #0077b5;
border-color: transparent;
}
.SignInButton.LinkedIn i {
background-color: #0077b5;
}
.SignInButton.LinkedIn i:after {
-webkit-mask-image: url("../../Assets/images/IconSprite.svg#social-linkedin");
mask-image: url("../../Assets/images/IconSprite.svg#social-linkedin");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: #fff;
}
/**** End Social Netowrking Icon Styling ****/
.badge,
.PlusLink:after,
.PlusFeature label:after {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 50rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
.badge:empty {
display: none;
}
.TextButton .badge {
position: relative;
top: -1px;
}
.btn-xs .badge,
.btn-group-xs > .btn .badge {
top: 0;
padding: 1px 5px;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: #00a8b4;
background-color: #fff;
}
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}
a.badge:hover, a.badge:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
/* Indicator on links that are part of the Plus package */
.PlusLink:after,
.PlusFeature label:after {
background-color: #68bd49;
content: 'PLUS';
margin-left: 6px;
vertical-align: baseline;
}
/* ==========================================================================
SPINNERS
========================================================================== */
.spinner-light, .spinner-dark {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
animation: 2s rotate linear infinite;
margin: 20px;
}
.spinner-light:before, .spinner-dark:before, .spinner-light:after, .spinner-dark:after {
content: '';
top: 0;
left: 0;
position: absolute;
border: 10px solid transparent;
border-bottom-color: #fff;
transform: translate(-10px, 19px) rotate(-35deg);
}
.spinner-light::after, .spinner-dark::after {
border-color: #fff transparent transparent transparent;
transform: translate(32px, 3px) rotate(-35deg);
}
.spinner-dark {
border-color: var(--system-icon-color) transparent var(--system-icon-color) transparent;
}
.spinner-dark:before {
border-bottom-color: var(--system-icon-color);
}
.spinner-dark::after {
border-color: var(--system-icon-color) transparent transparent transparent;
}
/*==========================================================================
CARDS
========================================================================== */
/* From Bootstrap 5.1.3 */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
box-shadow: none;
}
.card > hr {
margin-right: 0;
margin-left: 0;
}
.card > .list-group {
border-top: inherit;
border-bottom: inherit;
}
.card > .list-group:first-child {
border-top-width: 0;
border-top-left-radius: subtract(5px, 1px);
border-top-right-radius: subtract(5px, 1px);
}
.card > .list-group:last-child {
border-bottom-width: 0;
border-bottom-right-radius: subtract(5px, 1px);
border-bottom-left-radius: subtract(5px, 1px);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
border-top: 0;
}
.card-body {
flex: 1 1 auto;
padding: 1rem 1rem;
}
.card-title {
margin-bottom: 0.5rem;
}
.card-subtitle {
margin-top: -0.25rem;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link + .card-link {
margin-left: 1rem;
}
.card-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-header:first-child {
border-radius: subtract(5px, 1px) subtract(5px, 1px) 0 0;
}
.card-footer {
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card-footer:last-child {
border-radius: 0 0 subtract(5px, 1px) subtract(5px, 1px);
}
.card-header-tabs {
margin-right: -0.5rem;
margin-bottom: -0.5rem;
margin-left: -0.5rem;
border-bottom: 0;
}
.card-header-tabs .nav-link.active {
background-color: #fff;
border-bottom-color: #fff;
}
.card-header-pills {
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
border-radius: subtract(5px, 1px);
}
.card-img,
.card-img-top,
.card-img-bottom {
width: 100%;
}
.card-img,
.card-img-top {
border-top-left-radius: subtract(5px, 1px);
border-top-right-radius: subtract(5px, 1px);
}
.card-img,
.card-img-bottom {
border-bottom-right-radius: subtract(5px, 1px);
border-bottom-left-radius: subtract(5px, 1px);
}
.card-group > .card {
margin-bottom: 15px;
}
@media (min-width: 768px) {
.card-group {
display: flex;
flex-flow: row wrap;
}
.card-group > .card {
flex: 1 0 0%;
margin-bottom: 0;
}
.card-group > .card + .card {
margin-left: 0;
border-left: 0;
}
.card-group > .card:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header {
border-top-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer {
border-bottom-right-radius: 0;
}
.card-group > .card:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header {
border-top-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer {
border-bottom-left-radius: 0;
}
}
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
transform: translate(0, -25%);
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
transform: translate(0, 0);
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.in {
opacity: 0.5;
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-header::after {
display: block;
clear: both;
content: "";
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.428571429;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer::after {
display: block;
clear: both;
content: "";
}
.modal-footer .btn + .btn, .modal-footer .TextButton + .TextButton {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .TextButton + .TextButton {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
justify-content: center;
}
@media (min-width: 768px) {
.modal-dialog {
max-width: 600px;
margin: 30px auto;
}
}
@media (min-width: 768px) {
.modal-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 768px) {
.modal-sm {
max-width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg {
max-width: 900px;
}
}
.close {
float: right;
font-size: 19.5px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: none;
opacity: .5;
}
.close:hover {
color: #000;
text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
opacity: .75;
}
button.close,
input[type="button"].close {
padding: 0;
background-color: transparent;
border: 0;
}
a.close.disabled {
pointer-events: none;
}
.modal-dialog-status {
animation: pulse 5s linear infinite;
}
.modal-dialog-status .modal-body {
display: flex;
align-items: center;
}
/* ==========================================================================
MEDIA ELEMENT
========================================================================== */
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}
/* Backwards compatibility for the older version of media */
.media > img:first-child,
.media > .media-left,
.media > .pull-left {
margin-right: 1rem;
}
.media {
margin-top: 1rem;
}
.media:first-child {
margin-top: 0;
}
/* ==========================================================================
SEARCH
========================================================================== */
.SearchField * {
vertical-align: middle;
}
.SearchField {
padding: 8px 12px;
display: inline-flex;
align-items: center;
}
.SearchResult {
margin: .5em 0;
}
.SearchResultSummary .ImageSection {
float: left;
width: 8em;
text-align: center;
}
.SearchResultSummary .ImageSection img {
max-width: 7.5em;
}
.SearchResultSummary .ListItemTitle a {
font-size: 140%;
font-weight: bold;
}
.SearchResultSummary .ListItemTitle a span {
white-space: pre-wrap;
}
.SearchResultSummary .ListItemTitle img {
vertical-align: middle;
padding-left: 8px;
}
.SearchResultSummary .Description {
float: none;
text-align: left;
}
@media (min-width: 768px) {
.SearchResultSummary .Description {
margin-left: 8.5em;
}
}
.SearchResultSummary .PublishDate {
color: #666;
}
/*==========================================================================
PAGINATION
========================================================================== */
/* From Bootstrap 5.1.3 */
.pagination {
display: flex;
padding-left: 0;
list-style: none;
}
.page-link {
position: relative;
display: block;
color: #00a8b4;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
.page-link {
transition: none;
}
}
.page-link:hover {
z-index: 2;
color: #007881;
background-color: #e9ecef;
border-color: #dee2e6;
}
.page-link:focus {
z-index: 3;
color: #007881;
background-color: #e9ecef;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}
.page-item:not(:first-child) .page-link {
margin-left: -1px;
}
.page-item.active .page-link {
z-index: 3;
color: #fff;
background: #0096c7 linear-gradient(180deg, #26a6cf, #0096c7) repeat-x;
border-color: #0096c7;
}
.page-item.disabled .page-link {
color: #6c757d;
pointer-events: none;
background-color: #fff;
border-color: #dee2e6;
}
.page-link {
padding: 0.375rem 0.75rem;
}
.page-item:first-child .page-link {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.page-item:last-child .page-link {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 125%;
}
.pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.pagination-lg .page-item:last-child .page-link {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 85%;
}
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm .page-item:last-child .page-link {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
/* ==========================================================================
MINI PROFILE
========================================================================== */
.mini-profile-standard .mini-profile .mini-profile-name-section,
.mini-profile-standard .mini-profile .mini-profile-picture-section,
.mini-profile-standard .mini-profile .mini-profile-address-section {
margin-bottom: 1em;
}
.mini-profile-banner-large .mini-profile,
.mini-profile-banner-small .mini-profile {
display: grid;
grid-template: "picture" auto "picture-push" auto "name" auto "address" auto "status" auto/auto;
}
@media (min-width: 768px) {
.mini-profile-banner-large .mini-profile {
/* autoprefixer: ignore next */
grid-template: "picture name" 1fr "picture address" auto "picture-push status" auto/fit-content(33%) auto;
}
}
.mini-profile-banner-large .mini-profile .PanelField label, .mini-profile-banner-large .mini-profile .PanelField .Label,
.mini-profile-banner-small .mini-profile .PanelField label,
.mini-profile-banner-small .mini-profile .PanelField .Label {
width: auto;
}
.mini-profile-banner-large .mini-profile-name-section,
.mini-profile-banner-small .mini-profile-name-section {
-ms-grid-row: 3;
-ms-grid-column: 1;
/* flex need to make the contents display at the end but maintain the bg color */
grid-area: name;
display: flex;
align-items: flex-end;
}
.mini-profile-banner-large .mini-profile-name-section > div,
.mini-profile-banner-small .mini-profile-name-section > div {
width: 100%;
}
.mini-profile-banner-large .mini-profile-picture-section,
.mini-profile-banner-small .mini-profile-picture-section {
-ms-grid-row: 1;
-ms-grid-column: 1;
/* flex need to make the contents display at the end but maintain the bg color */
grid-area: picture;
display: flex;
align-items: flex-end;
justify-content: center;
}
.mini-profile-banner-large .mini-profile-picture-section-after,
.mini-profile-banner-small .mini-profile-picture-section-after {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: picture-push;
}
.mini-profile-banner-large .mini-profile-address-section,
.mini-profile-banner-small .mini-profile-address-section {
-ms-grid-row: 4;
-ms-grid-column: 1;
grid-area: address;
}
.mini-profile-banner-large .mini-profile-status-section,
.mini-profile-banner-small .mini-profile-status-section {
-ms-grid-row: 5;
-ms-grid-column: 1;
grid-area: status;
}
@media (min-width: 768px){
.mini-profile-banner-large .mini-profile-name-section,
.mini-profile-banner-small .mini-profile-name-section {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.mini-profile-banner-large .mini-profile-picture-section,
.mini-profile-banner-small .mini-profile-picture-section {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
}
.mini-profile-banner-large .mini-profile-picture-section-after,
.mini-profile-banner-small .mini-profile-picture-section-after {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.mini-profile-banner-large .mini-profile-address-section,
.mini-profile-banner-small .mini-profile-address-section {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
.mini-profile-banner-large .mini-profile-status-section,
.mini-profile-banner-small .mini-profile-status-section {
-ms-grid-row: 3;
-ms-grid-column: 2;
}
}
.mini-profile-banner-large .panel:not(.panel-border),
.mini-profile-banner-small .panel:not(.panel-border) {
border-width: 0;
}
.mini-profile-banner-large .panel-body,
.mini-profile-banner-small .panel-body {
padding: 0;
}
.mini-profile-banner-large .mini-profile-name-section,
.mini-profile-banner-large .mini-profile-picture-section,
.mini-profile-banner-large .mini-profile-address-section,
.mini-profile-banner-large .mini-profile-status-section,
.mini-profile-banner-small .mini-profile-name-section,
.mini-profile-banner-small .mini-profile-picture-section,
.mini-profile-banner-small .mini-profile-address-section,
.mini-profile-banner-small .mini-profile-status-section {
z-index: 1;
padding-left: 15px;
padding-right: 15px;
}
.mini-profile-banner-large .mini-profile-name-section,
.mini-profile-banner-large .mini-profile-picture-section,
.mini-profile-banner-small .mini-profile-name-section,
.mini-profile-banner-small .mini-profile-picture-section {
padding-top: 15px;
}
.mini-profile-banner-large,
.mini-profile-banner-small {
text-align: center;
}
.mini-profile-banner-large .PanelField, .mini-profile-banner-large .PanelFieldValue, .mini-profile-banner-large .Label, .mini-profile-banner-large label,
.mini-profile-banner-small .PanelField,
.mini-profile-banner-small .PanelFieldValue,
.mini-profile-banner-small .Label,
.mini-profile-banner-small label {
float: none;
width: auto;
}
.mini-profile-banner-large .PanelField,
.mini-profile-banner-small .PanelField {
padding-top: .2em;
padding-bottom: .2em;
}
.mini-profile-banner-large .mini-profile-picture-section,
.mini-profile-banner-large .panel-heading,
.mini-profile-banner-small .mini-profile-picture-section,
.mini-profile-banner-small .panel-heading {
background-color: #f9f9f9;
color: #000;
}
.mini-profile-banner-large .mini-profile-picture-section .panel,
.mini-profile-banner-small .mini-profile-picture-section .panel {
display: inline-block;
}
.mini-profile-banner-large .mini-profile-picture-section .profile-picture-container,
.mini-profile-banner-small .mini-profile-picture-section .profile-picture-container {
margin-bottom: -2em;
}
.mini-profile-banner-large .mini-profile-picture-section-after,
.mini-profile-banner-small .mini-profile-picture-section-after {
height: 2em;
}
.mini-profile-banner-large .mini-profile-name-section-inner,
.mini-profile-banner-small .mini-profile-name-section-inner {
display: grid;
grid-template-columns: 1fr fit-content(95%) 1fr;
}
.mini-profile-banner-large .mini-profile-name-section-inner:before,
.mini-profile-banner-small .mini-profile-name-section-inner:before {
content: '';
grid-column: 1;
}
.mini-profile-banner-large .mini-profile-name-section-inner .mini-profile-edit-wrapper,
.mini-profile-banner-small .mini-profile-name-section-inner .mini-profile-edit-wrapper {
grid-column: 3;
text-align: left;
margin-left: .8em;
margin-top: .2em;
}
.mini-profile-banner-large .mini-profile-address-section,
.mini-profile-banner-small .mini-profile-address-section {
padding-bottom: .4em;
}
.mini-profile-banner-large .mini-profile-status-section,
.mini-profile-banner-small .mini-profile-status-section {
margin-top: .4em;
}
.mini-profile-banner-large .mini-profile-status-section .PanelField,
.mini-profile-banner-small .mini-profile-status-section .PanelField {
float: none;
display: inline-block;
clear: none;
width: auto;
line-height: 1;
}
.mini-profile-banner-large .mini-profile-status-section .PanelFieldValue,
.mini-profile-banner-small .mini-profile-status-section .PanelFieldValue {
margin-right: .6em;
}
.mini-profile-banner-large .mini-profile-status-section .PanelField:last-child .PanelFieldValue,
.mini-profile-banner-small .mini-profile-status-section .PanelField:last-child .PanelFieldValue {
border-right: none;
margin-right: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.mini-profile-banner-large {
text-align: left;
}
.mini-profile-banner-large .mini-profile:after {
/* display the background behind the first 2 rows */
grid-area: picture-start / picture-start / picture-push-start / name-end;
}
.mini-profile-banner-large .mini-profile-name-section,
.mini-profile-banner-large .mini-profile-address-section {
background-color: #f9f9f9;
}
.mini-profile-banner-large .mini-profile-name-section-inner {
grid-template-columns: 0 fit-content(95%) 1fr;
}
}
.account-page-with-banner .ContentItemContainer > .account-page-top-area {
background-color: #f9f9f9;
/* get rid of the gap between iParts */
margin-bottom: -0.9em;
padding-bottom: 0.9em;
}
.account-banner {
display: grid;
grid-template: "area-top-left" auto
"area-middle-left" auto
"area-bottom-left" auto
"area-center" auto
"area-right" auto / auto;
}
.account-banner .iMIS-WebPart > .ContentItemContainer,
.account-banner .WebPartZone > .ContentItemContainer {
margin-bottom: 0.5rem;
}
.account-banner .iPartChain.LastPart,
.account-banner .iPartChain.MiddlePart {
margin-top: 0;
margin-bottom: 0;
}
.account-banner .area-top-left {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: area-top-left;
}
.account-banner .area-middle-left {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: area-middle-left;
}
.account-banner .area-bottom-left {
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: area-bottom-left;
}
.account-banner .area-center {
-ms-grid-row: 4;
-ms-grid-column: 1;
grid-area: area-center;
}
.account-banner .area-right {
-ms-grid-row: 5;
-ms-grid-column: 1;
grid-area: area-right;
}
.account-banner:before {
-ms-grid-row: 1;
-ms-grid-column: 1;
content: '';
grid-area: area-top-left;
background-color: #f9f9f9;
}
.account-banner .ContentItemContainer > .panel > .panel-heading.Distinguish,
.account-banner .ContentItemContainer > .panel > .panel-body-container > .panel-body,
.account-banner .ContentItemContainer > div > .panel > .panel-heading.Distinguish,
.account-banner .ContentItemContainer > div > .panel > .panel-body-container > .panel-body {
padding: 0;
}
.account-banner .area-middle-left .iMIS-WebPart:not(:last-child) {
margin-right: 0.5rem;
}
@media (max-width: 767px) {
.account-banner:before,
.account-banner .area-top-left {
margin-bottom: 0.9em;
}
.account-banner .area-middle-left .WebPartZone,
.account-banner .area-bottom-left .WebPartZone,
.account-banner .area-bottom-left .summary-display {
justify-content: center;
text-align: center;
}
}
@media (min-width: 768px) {
.account-banner {
grid-template: "area-top-left area-right" auto "area-middle-left area-right" minmax(0, 1fr) "area-bottom-left area-bottom-left" auto "area-center area-center" auto/minmax(min-content, 100%) fit-content(50%);
}
.account-banner:before {
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
margin-bottom: 0.9em;
}
.account-banner .area-top-left, .account-banner .area-right {
padding-top: 15px;
}
.account-banner .area-top-left, .account-banner .area-middle-left, .account-banner .area-bottom-left, .account-banner .area-right {
padding-right: 15px;
}
.account-banner .area-bottom-left {
padding-bottom: 15px;
margin-bottom: 0.9em;
}
.account-banner .area-top-left, .account-banner .area-middle-left, .account-banner .area-bottom-left {
padding-left: 15px;
}
.account-banner .area-top-left {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.account-banner .area-middle-left {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.account-banner .area-bottom-left {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.account-banner .area-center {
-ms-grid-row: 4;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.account-banner .area-right {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
}
.account-banner:before {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
}
@media (min-width: 992px) {
.account-banner {
grid-template: "area-top-left area-center area-right" auto "area-middle-left area-center area-right" minmax(0, 1fr) "area-bottom-left area-bottom-left area-bottom-left" auto/minmax(min-content, 100%) fit-content(33%) Min(33%, 28em);
margin-bottom: 0.9em;
}
.account-banner .area-center {
padding-top: 15px;
}
.account-banner .area-center .iMIS-WebPart {
/* adding the padding to the iPart avoids having padding on an empty div */
padding-right: 15px;
}
.account-banner:before {
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 4;
}
.account-banner .col-scrollable {
display: flex;
flex-direction: column;
min-height: 5em;
position: relative;
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
}
.account-banner .col-scrollable:hover {
-webkit-mask-image: none;
mask-image: none;
}
.account-banner .col-scrollable > .ContentItemContainer {
flex-basis: 0;
flex-grow: 1;
overflow-y: auto;
margin-right: -5px;
padding-right: 5px;
}
.account-banner .area-top-left {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.account-banner .area-middle-left {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.account-banner .area-bottom-left {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.account-banner .area-center {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
}
.account-banner .area-right {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 3;
}
.account-banner:before {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
}
.account-banner .mini-profile-banner-large .mini-profile-name-section,
.account-banner .mini-profile-banner-small .mini-profile-name-section {
padding-top: 0;
}
.account-banner .mini-profile-banner-large .mini-profile-picture-section,
.account-banner .mini-profile-banner-small .mini-profile-picture-section {
padding-top: 0;
padding-left: 0;
}
.account-banner .summary-display .PanelField {
padding-bottom: 0;
}
/* Account area
========================================================================== */
.account-toggle {
display: flex;
align-items: center;
padding: 5px 8px;
}
.account-toggle .nav-text {
padding-left: 5px;
padding-right: 5px;
display: inline-block;
max-width: 15em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: text-bottom;
}
.account-toggle .caret {
margin-left: -1px;
}
@media (max-width: 991px) {
.account-toggle {
padding: 0;
}
.account-menu > li > .account-toggle:hover {
background-color: transparent;
}
.account-toggle .nav-text, .account-toggle.dropdown-toggle .caret {
position: absolute;
left: -10000px;
z-index: 2000;
font-size: 70%;
}
.open .account-toggle .picture-primary {
box-shadow: 0 0 0 3px #003a4d;
}
}
.account-menu {
margin: 0;
padding: 0;
}
.account-menu, .account-menu > li {
list-style: none;
display: inline-block;
}
.account-menu.obo-off .obo-section,
.account-menu.obo-off .obo-divider {
/* only display the obo section of the dropdown if we are in obo mode */
display: none;
}
.account-menu .obo-label,
.account-menu .dropdown-header {
display: block !important;
font-weight: bold;
margin-bottom: 5px;
color: #7c7c7c;
}
@media (max-width: 991px) {
.account-menu .obo-actions > li:first-child {
display: block;
white-space: normal;
margin-bottom: .2em;
}
}
.account-menu .profile-picture-wrapper {
position: relative;
display: inline-block;
width: 34px;
}
.account-menu .profile-picture-wrapper img {
/* default for profile picture */
width: 34px;
height: 34px;
border-radius: 3px;
}
.account-menu .profile-picture-wrapper .picture-secondary {
position: absolute;
width: 18px;
height: 18px;
top: 20px;
left: 25px;
bottom: 3px;
border: 2px solid #fff;
border-radius: 2px;
}
.account-menu.obo-on .profile-picture-wrapper {
width: 38px;
}
.account-menu .batch-toggle {
margin-left: 5px;
}
/* UtilityNavigation Account Area
========================================================================== */
.UtilitySection.UtilityAccountArea {
float: none;
}
.UtilityNavigation .account-menu > li > a {
font-weight: bold;
}
.UtilityNavigation .account-menu > li > a,
.UtilityNavigation .account-menu > li > a:hover,
.UtilityNavigation .account-menu > li > a:visited,
.UtilityNavigation .account-menu > li > a:active {
text-decoration: none;
color: #333333;
}
/* ==========================================================================
ALERTS IPART
========================================================================== */
.Alerts ul.AlertSet {
padding: 0;
margin: 0;
list-style: none;
}
.Alerts .AlertItem {
list-style: none;
border: 1px solid #ddd;
margin-top: -1px !important;
padding: 12px 10px;
background-color: #f2f6fb;
/* if using the user message style remove the extra padding */
}
.Alerts .AlertItem:first-child {
margin-top: 0;
}
.Alerts .AlertItem .AsiInformation, .Alerts .AlertItem .AsiSuccess, .Alerts .AlertItem .AsiWarning, .Alerts .AlertItem .AsiError,
.Alerts .AlertItem .AsiValidation, .Alerts .AlertItem .AsiValidationSummary, .Alerts .AlertItem .AsiNeutral {
margin: -1px -11px;
}
.Alerts .AlertItem .AsiInformation:first-child, .Alerts .AlertItem .AsiSuccess:first-child, .Alerts .AlertItem .AsiWarning:first-child, .Alerts .AlertItem .AsiError:first-child,
.Alerts .AlertItem .AsiValidation:first-child, .Alerts .AlertItem .AsiValidationSummary:first-child, .Alerts .AlertItem .AsiNeutral:first-child {
margin-top: -13px;
}
.Alerts .AlertItem .AsiInformation:last-child, .Alerts .AlertItem .AsiSuccess:last-child, .Alerts .AlertItem .AsiWarning:last-child, .Alerts .AlertItem .AsiError:last-child,
.Alerts .AlertItem .AsiValidation:last-child, .Alerts .AlertItem .AsiValidationSummary:last-child, .Alerts .AlertItem .AsiNeutral:last-child {
margin-bottom: -12px;
}
/* ==========================================================================
EVENTS AND PRODUCTS
========================================================================== */
/**
* Event and product display - the overall layout of the event, program item or product display
* Includes the image, description, price, etc.
*
* Example HTML:
* <div class="EventDisplay">
* <div class="EventSummary">...</div>
* <div class="EventDetails">...</div>
* </div>
*/
/*.EventSummary, .EventSummary .DetailsBlock,
.ProductSummary, .ProductSummary .DetailsBlock {
display: table;
width: 100%;
}*/
/**
* 10.3.2 Event summary */
/* Contains the event or product image and description
*
* Example event HTML:
* <div class="EventSummary">
* <div class="PhotoArea">
* <img src="path/to/image.jpg" alt="Cairns at night" />
* </div>
* <div class="Description">Come to our super-cool event!</div>
*/
.EventSummary::after {
display: block;
clear: both;
content: "";
}
.EventSummary .PhotoArea {
text-align: center;
}
@media (min-width: 768px) {
.EventSummary .PhotoArea {
float: left;
}
}
.EventSummary .Description .PanelField {
float: none;
clear: none;
padding: 0;
}
.EventDisplay .PricingData {
padding-top: 1em;
}
/**
* Program item summary
* Contains all details of the program item and
* the itenerary information and displays them a grid-like format in the program item list iPart
*
* Example program item HTML:
* <div class="ProgramItemSummary">
*
* <div class="DescriptionColumn">
* <div class="ListItemTitle">The title of the program item <span class="InItinerary">In Itenerary</span></div>
* <div class="Description">Some info about the program item.</div>
* <div class="PanelBlock Details">
* <div class="PanelField">
* <span class="Label">Track:</span>
* <div class="PanelFieldValue">Technical</div>
* </div>
* </div>
* </div>
*
* <div class="WhenColumn">9:00 AM</div>
*
* <div class="ItineraryColumn">
* <input type="button" class="TextButton" value="Add" />
* </div>
* </div>
*
*/
.ProgramItemSummary .DeleteColumn {
width: 7em;
float: right;
clear: right;
}
@media (min-width: 768px) {
.ProgramItemSummary .WhenColumn,
.ProgramItemSummary .IteneraryColumn {
width: 28%;
float: left;
clear: left;
padding-right: .5em;
}
.ProgramItemSummary .DescriptionColumn {
width: 72%;
float: right;
clear: right;
}
}
@media (max-width: 767px) {
.ProgramItemSummary .WhenColumn {
clear: both;
border-top: 1px solid #ddd;
padding-top: .5em;
}
}
.ProgramItemSummary .WhenData {
display: block;
}
.ProgramItemSummary .ListItemTitle,
.ProgramItemSummary .WhenData {
font-weight: bold;
padding-bottom: .25em;
line-height: 1.7em;
/* to ensure none of the title is covered when the InItinerary indicator wraps */
}
.ProgramItemSummary .InItinerary,
.ProgramItemSummary .HasConflict,
.ProgramItemSummary .OnWaitlist {
/* Program item itenerary indicators */
padding: .15em .25em .2em;
border: 1px solid #CCC;
white-space: nowrap;
}
.ProgramItemSummary .InItinerary {
/* Indicator when the program item is in your itenarary - Note the spelling mistake... */
background-color: yellow;
}
.ProgramItemSummary .HasConflict {
/* Indicator when the program item is in your itenarary
* but confilcts with another program item in your itenaray */
background-color: #D8000C;
color: #FFFFFF;
}
.ProgramItemSummary .OnWaitlist {
/* Indicator when you are on the waitlist for the program item */
background-color: #FFCCBA;
}
/**
* Event details
* Contains event details such as date/time, price, and location.
* Also includes the registration buttons and badge edit button.
*
* Example program item HTML:
* <div class="EventDetails">
*
* <div class="ContactLocationArea">
* <div class="PanelField Left">
* <span class="Label">Price:</span>
* <div class="PanelFieldValue">450.00</div>
* </div>
* <div class="PanelField Left">
* <span class="Label">When:</span>
* <div class="PanelFieldValue">5/15/13 1:00 PM - 5/16/13 5:00 PM</div>
* </div>
* </div>
* </div>
*
* <div class="RegistrationArea">
* <input type="button" class="TextButton PrimaryButton" value="Register Myself" />
* <input type="button" class="TextButton" value="Register Someone Else" />
* <div class="PanelField Left">
* <span class="Label">My Registration Status:</span>
* <div class="PanelFieldValue">Not Registered</div>
* </div>
* </div>
*
* </div>
*
*/
.EventDetails {
padding-bottom: 1em;
padding-top: 1em;
}
.RegistrationArea div:not(.PriceOverrideForm) > .PrimaryButton.LargeButton {
width: 100%;
max-width: 425px;
font-size: 120% !important;
}
.RegistrationArea div:not(.PriceOverrideForm) > .TextButton {
margin-bottom: 1em;
}
.RegistrationArea div:not(.PriceOverrideForm) > .SmallButton {
max-width: 200px;
padding: 5px;
}
.RegistrationArea {
text-align: center;
}
@media (min-width: 1200px) {
.RegistrationArea {
max-width: 600px;
margin-left: auto;
text-align: left;
}
}
@media (min-width: 1200px) {
.RegistrationArea .RegistrationArea-currentUser {
display: flex;
justify-content: space-between;
}
}
.RegistrationArea .RegistrationArea-status {
margin-top: 20px;
word-wrap: normal;
text-align: center;
}
@media (min-width: 1200px) {
.RegistrationArea .RegistrationArea-status {
max-width: 160px;
margin-top: 0;
text-align: right;
}
}
.RegistrationArea .RegistrationArea-info {
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 1200px) {
.RegistrationArea .RegistrationArea-info {
justify-content: left;
}
}
.RegistrationEditSection {
margin-top: .8em;
}
.ContactLocationArea .PanelField .PanelField {
padding-bottom: .5em;
}
.PricingData .rgMasterTable label {
font-weight: normal;
}
.EventQuestions {
margin-top: 1em;
}
.FormDefinitionQuestions .LocalPadTop {
padding-top: 10px !important;
}
.FormDefinitionQuestions .LocalMarginTop {
margin-top: 10px;
}
.FormDefinitionQuestions .LocalPadBottom {
padding-bottom: 10px;
}
.FormDefinitionQuestions .LocalPadRight {
padding-right: 17px;
}
/**
* Registrant info center - contains badge information for a registrant in an editable format
*
* Example HTML:
* <div class="ReginstrantInfoContainer">
* <a href="javascript(...)">Add a new address</a>
* <div class="RegistrantInfoAddressList">
* <div class="RegistrantInfoAddressListItem">
* <a href="javascript(...)">Use this address</a>
* <!-- One available address -->
* </div>
* ...
* </div>
*
* <div class="RegistrantInfoEntry">
* <div class="RegistrantInfoBadgeBackground">
* <div class="RegistrantInfoBadge">
* <img src="path/to/event/image.jpg" alt="Cairns at night" />
* <fieldset>
* ... <!-- Name (read only), informal name, title and organization -->
* </fildset>
* </div>
* </div>
*
* <div class="RegistrantInfoAddressEntry">
* <h3>Home Address</h3>
* <table>
* <!-- address entry -->
* </table>
* </div>
* </div>
* </div>
*/
.RegistrantInfoContainer {
padding: 1em;
position: relative;
}
@media (min-width: 768px) {
.RegistrantInfoEntry {
position: absolute;
top: .375em;
left: 1em;
width: 69%;
border-right: 1px dotted darkgray;
padding-right: 1.5em;
}
}
@media (min-width: 768px) {
.RegistrantInfoAddressList {
margin-left: 77%;
}
}
.RegistrantInfoAddressListItem {
padding-top: .5em;
}
@media (min-width: 768px) {
.RegistrantInfoAddressListItem {
border-bottom: 1px dotted darkgray;
}
}
.RegistrantInfoBadgeBackground {
background-color: #ececeb;
padding: 1em;
margin-bottom: .375em;
}
.RegistrantInfoBadge {
background-color: white;
border: 1px solid #adadad;
padding: 1em;
margin: .625em;
}
.RegistrantInfoBadge img {
float: left;
width: 130px;
height: auto;
padding-right: 10px;
}
.RegistrantInfoBadge label,
.RegistrantInfoBadge .Label {
width: 8em;
}
.RegistrantInfoAddressEntry {
background-color: #f8f7f6;
padding: 1em;
display: inline-block;
}
.RegistrantInfoAddressEntry .SectionTitle {
padding-bottom: 8px;
padding-left: 8px;
}
/**
* Currently registering area (aka PeoplePanel)
* Displays a list of people the current user is regitering (using "Register someone else")
* as selectable toggles to choose the active record.
*
* Example HTML:
* <div class="PeoplePanel">
* <div class="PersonDisplay SelectedItem">
* <img src="path/to/profile/picture1.jpg" alt="[Selected Registrant's Name]" />
* <span>[Selected Registrant's Name]</span>
* </div>
* <div class="PersonDisplay">
* <a href="javascript(...)">
* <img src="path/to/profile/picture2.jpg" alt="[Unselected Registrant's Name]" />
* <span>Unselected Registrant's Name</span>
* </a>
* </div>
* </div>
*/
.PeoplePanel {
display: block;
}
.PersonDisplay {
margin: .25em;
padding: 1em .5em;
display: inline-block;
vertical-align: top;
text-align: center;
opacity: 0.7;
filter: Alpha(opacity=70);
/* Sets the opacity for IE8 */
min-width: 7em;
max-width: 9em;
word-wrap: break-word;
}
.PersonDisplay:hover, .PersonDisplay.SelectedItem {
opacity: 1;
}
.PersonDisplay span {
display: block;
padding-top: .25em;
}
/* Remove underline from selectable items in person list */
.PersonDisplay a:link {
text-decoration: none;
}
.RegistrantDisplay {
margin: .25em;
padding: 1em .5em;
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 7em;
max-width: 9em;
word-wrap: break-word;
}
/**
* Product display */
/* Contains the product image and description
*
* Example product HTML:
* <div class="ProductDisplay">
* <div class="ProductImageArea">
* <img class="ProductImage" src="path/to/image.jpg" alt="Mug with organization logo" />
* </div>
* <div class="ProductDetails">
* <div class="PricingSection">
* </div>
* <div class="AddToCartSection">
* </div>
* </div>
*/
.ProductDisplay {
overflow: auto;
}
.ProductDisplay .ProductTitle {
display: block;
}
.ProductDisplay .ProductImageArea {
text-align: center;
padding: 1em;
}
.ProductDisplay .PricingSection {
padding-top: 1.5em;
}
.ProductDisplay .ProductLabel {
padding-right: .3em;
margin-left: 0;
vertical-align: top;
}
.ProductDisplay .AddToCartSection {
padding-top: .3em;
}
.ProductDisplay .AddToCartButton {
width: 100%;
margin-top: 1.5em;
}
@media (min-width: 768px) {
.ProductDisplay .AddToCartButton {
width: auto;
margin-left: .3em;
margin-top: 0;
vertical-align: top;
}
}
@media (min-width: 768px) {
.Horizontal .ProductDisplay .ProductImageArea {
float: left;
}
}
.Horizontal .ProductDisplay .ProductDetails {
overflow: hidden;
zoom: 1;
}
@media (min-width: 480px) {
.Horizontal .ProductDisplay .ProductDetails {
padding: 1em;
}
}
.Horizontal .ProductDisplay .ProductLabel {
width: 12em;
text-align: right;
display: inline-block;
}
.InventoryDetails {
background-color: #f5f5f5;
}
.InventoryDetailsLastReceivedDateDisplay {
padding: 1em 0 1em 0;
}
/**
* Gift item display */
/* Contains the gift item title, image, and description
*
* Example product HTML:
* <div class="GiftItemName SectionTitle">
* <!-- Gift Name -->
* </div>
* <div class="media">
* <div id="GiftImageArea" runat="server" class="GiftItemImageArea">
* <!-- Gift image -->
* </div>
* <div class="media-body">
* <div id="TitleDescriptionDiv" runat="server">
* <!-- Gift Description -->
* </div>
* </div>
* </div>
*/
.GiftItemImageArea {
text-align: center;
}
@media (min-width: 768px) {
.GiftItemImageArea {
float: left;
margin-right: 2em;
}
}
/* ==========================================================================
RELATED ITEMS
========================================================================== */
/* Horizontal display
========================================================================== */
.RelatedItemsHorizontal {
margin-left: 0;
padding-left: 0;
}
.RelatedItemsHorizontal div.rrRelativeWrapper {
padding-top: 10px;
}
.RelatedItemsHorizontalBlock {
text-align: center;
width: 100%;
}
.RelatedItemsHorizontalCentered {
display: inline-block;
}
ul.RelatedItemsHorizontal li,
.RelatedItemsHorizontal ul.rrItemsList li {
list-style: none;
float: left;
margin: 0 9px 18px;
padding-top: 9px;
text-align: center;
width: 120px;
min-height: 130px;
}
ul.RelatedItemsHorizontal li a[disabled=disabled],
ul.RelatedItemsHorizontal li a.LabelLinkDisabled,
.HorizontalScrollItem a[disabled=disabled],
.HorizontalScrollItem a.LabelLinkDisabled {
font-weight: normal;
text-decoration: none;
color: inherit;
display: block;
}
ul.RelatedItemsHorizontal li a.LabelLink,
.HorizontalScrollItem a.LabelLink {
display: block;
}
.RelatedItemsHorizontalLessSpace li {
padding: 3px !important;
width: 75px !important;
height: 75px !important;
}
/* Horizontal with hover transition */
.RelatedItemsHorizontalEffect li a.ImageLink {
display: block;
}
.RelatedItemsHorizontalEffect li {
-webkit-transition: all .2s ease-in-out;
}
.RelatedItemsHorizontalEffect li:hover {
background-color: #eeeeee;
transform: scale(1.5);
border-radius: 10px;
}
/* Vertical display
========================================================================== */
ul.RelatedItemsVertical li {
display: block;
padding: .5em;
white-space: normal;
overflow: hidden;
}
ul.RelatedItemsVertical li img {
padding-right: 5px;
float: left;
}
ul.RelatedItemsVertical li a {
vertical-align: middle;
}
ul.RelatedItemsVertical li a[disabled=disabled] {
font-weight: normal;
text-decoration: none;
color: inherit;
}
ul.RelatedItemsVertical li label {
font-weight: normal;
vertical-align: middle;
display: block;
}
/* ==========================================================================
PROGRESS TRACKER
========================================================================== */
/* The progress tracker is a visual display of progress toward a goal */
/**
* Example HTML:
* <div class="ProgressTracker"> <!-- this is the class defined in iPart configuration -->
* <div class="ProgressTrackerPanel">
* <ul>
* <li>
* <span class="inset">
* <!-- the percentage of the goal reached -->
* <span class="count">80%</span>
* <span class="label">achieved</span>
* </span>
* </li>
* <li>
* <span class="inset">
* <!-- the amount acheived -->
* <span class="count">30,548</span>
* <span class="label">given this year</span>
* </span>
* </li>
* <li>
* <span class="inset">
* <!-- days left before the end date -->
* <span class="count">7</span>
* <span class="label">days remaining</span>
* </span>
* </li>
* </ul>
* <div class="ProgessBar">
* <span style="width:80%"></span><!-- the width is equal to the percentage achieved -->
* </div>
* </div>
* </div>
*/
/* Default progress tracker
========================================================================== */
/**
* This class is configured by default on the progress tracker, but the content editor may assign
* a different class, or remove it all together (which would make it display with default list item styles).
* The default class will display small, with the three numbers displaying in a row above or below the progress bar.
*/
.ProgressTracker ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
.ProgressTracker li {
list-style-type: none;
display: inline;
}
.ProgressTracker .inset {
display: block;
}
.ProgressTracker .label {
display: block;
}
.ProgressTracker p {
color: #999;
}
.ProgressTracker .SuccessfulMessage {
background: #316ac5;
color: #fff;
padding: 5px;
margin: 3px 0;
display: block;
width: 100%;
}
.ProgressTracker .ProgressBar, .ProgressTracker .ProgressBar > span {
position: relative;
border-radius: 15px;
}
.ProgressTracker .ProgressBar {
height: 10px;
margin-top: 3px;
margin-bottom: 3px;
background: #ddd;
width: 100%;
}
.ProgressTracker .ProgressBar > span {
display: block;
height: 100%;
background-color: #316ac5;
}
/* Progress tracker 2
========================================================================== */
/**
* The alternative view for the progress tracker.
* Displays in a large block format with each number on its own row.
*/
.ProgressTracker2 ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
.ProgressTracker2 li {
list-style-type: none;
display: inline;
}
.ProgressTracker2 .ProgressTrackerPanel {
margin: 0;
}
.ProgressTracker2 .ProgressTrackerPanel .inset {
text-align: center;
line-height: 0.8;
padding: 15px;
display: block;
}
.ProgressTracker2 .ProgressTrackerPanel .count {
margin-bottom: 5px;
font-size: 350%;
line-height: 1em;
display: block;
}
.ProgressTracker2 .ProgressTrackerPanel .label {
color: #333;
font-size: 130%;
display: block;
}
.ProgressTracker2 div p {
color: #333;
}
/* The progress bar */
.ProgressTracker2 .ProgressBar, .ProgressTracker2 .ProgressBar > span {
position: relative;
border-radius: 25px;
}
.ProgressTracker2 .ProgressBar {
height: 40px;
/* Can be anything */
margin-top: 3px;
margin-bottom: 3px;
background: #555;
padding: 10px;
}
.ProgressTracker2 .ProgressBar > span {
display: block;
height: 100%;
background-color: #73a5f3;
}
/* The message that displays when the goal is reached.
* When it displays the progress bar is hidden. */
.ProgressTracker2 .SuccessfulMessage {
background: #316ac5;
color: white;
padding: 5px;
margin: 3px 0;
display: block;
}
/* ==========================================================================
CHECK-IN
========================================================================== */
.icon-club-status-in {
fill: #45812f;
width: 48px;
height: 32px;
}
.icon-club-status-out {
fill: #007ba3;
width: 48px;
height: 32px;
}
.check-in-grid .profile-picture-wrapper {
min-width: 40px;
min-height: 40px;
}
/* Grid card view */
@media (max-width: 991px) {
.check-in-grid.k-grid {
border-width: 0;
}
.check-in-grid .k-grid-aria-root {
margin-top: 1em;
}
.check-in-grid thead {
display: none;
}
.check-in-grid .check-in-row {
display: flex;
flex-flow: row;
flex-wrap: wrap;
border: 1px solid #ddd;
margin-top: 1em;
}
.check-in-grid .check-in-row:first-child {
margin-top: 0;
}
.check-in-grid .check-in-row td {
border: none;
padding: 7px;
}
.check-in-grid .check-in-select-cell,
.check-in-grid .check-in-membership-cell {
display: none;
}
.check-in-grid .check-in-name-cell {
width: 100%;
font-size: 140%;
}
.check-in-grid .check-in-school-cell,
.check-in-grid .check-in-grade-cell,
.check-in-grid .check-in-action-cell,
.check-in-grid .check-in-status-cell {
width: 50%;
}
.check-in-grid .check-in-school-cell label,
.check-in-grid .check-in-grade-cell label,
.check-in-grid .check-in-action-cell label,
.check-in-grid .check-in-status-cell label {
display: block !important;
font-weight: bold;
}
.check-in-grid .check-in-action-cell,
.check-in-grid .check-in-grade-cell {
text-align: center;
}
.check-in-grid .check-in-status-cell {
display: flex;
vertical-align: middle;
}
.check-in-grid .check-in-status-cell span {
display: flex;
align-self: center;
}
.check-in-grid .pageSize {
display: none;
}
.check-in-grid .k-grid-pager {
flex-wrap: wrap;
}
}
@media (min-width: 992px) {
.check-in-grid .check-in-membership-cell label,
.check-in-grid .check-in-school-cell label,
.check-in-grid .check-in-grade-cell label {
display: none;
}
.check-in-grid .check-in-status-cell span {
display: flex;
align-self: end;
}
}
.ms-wizard .rightSide-link-title {
color: #333333;
font-weight: 600;
margin-bottom: 10px;
margin-top: 0;
}
.ms-wizard .reviewSubmitCardHeight {
height: calc(100% - 3rem);
}
.ms-wizard .label.no-bold, .ms-wizard label.no-bold {
font-weight: normal;
}
.ms-wizard h2 {
padding: 10px 0;
}
.fluid-table {
margin: 0 20px;
}
.fluid-table .rgHeader {
border-bottom: 1px solid #222;
padding: 12px;
font-weight: bold;
}
.fluid-table .rgRow {
border-bottom: 1px solid #cccccc;
}
.fluid-table .rgRow > div[class^="col-"] {
padding: 12px;
}
@media (max-width: 991px) {
.fluid-table label.screen-reader-text {
position: static;
font-size: inherit;
}
}
.resetBtn {
margin: 0 0 22px !important;
}
.linktree + .linktree {
margin-top: 35px;
}
.linktree ul {
padding: 0;
}
.linktree ul li {
list-style: none;
margin-bottom: 5px;
}
.linktree ul li a {
font-weight: 400;
}
.PanelField .PanelFieldValue .membership-fields-input {
font-size: 20px;
font-weight: bold;
max-width: 560px;
}
.PanelField .PanelFieldValue .pointer-events-none {
pointer-events: none;
}
/* ==========================================================================
COMMUNITIES
========================================================================== */
.has-community-sidebar .col-secondary.d-none {
display: block !important;
}
/* Community name, picture and description */
.CommunitySummaryBlock {
border: 1px solid #ddd;
text-align: center;
margin-bottom: 20px;
padding: 10px;
}
.CommunitySummaryBlock::after {
display: block;
clear: both;
content: "";
}
.CommunitySummaryBlock .PanelFieldValue {
float: none;
}
.CommunitySummaryImage img {
max-width: 170px;
}
/* Community left nav */
.CommunityLinksBlock a {
display: block;
text-decoration: none;
padding: 8px 10px;
border-bottom: 1px solid #ddd;
color: #333333;
}
.CommunityLinksBlock a:first-child {
border-top: 1px solid #ddd;
}
.CommunityLinksBlock a:hover {
background-color: #80c8df;
text-decoration: none;
}
.CommunityLinksBlock a:hover, .CommunityLinksBlock a:visited, .CommunityLinksBlock a:active {
color: #333333;
}
.CommunityLinksBlock a.CommunityLinksSelected, .CommunityLinksBlock a.CommunityLinksSelected:hover {
background-color: #0096c7;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.CommunityActionButtons {
text-align: center;
}
.CommunityActionButtons a {
display: inline-block;
margin-bottom: .3em;
}
/* CommunityBreadCrumb */
.BreadCrumbCurrent {
font-size: 120%;
font-weight: bold;
}
.CommunityRepeaterList {
margin: 10px 0 0;
padding: 0;
}
.CommunityRepeaterList > li {
list-style-type: none;
}
.CommunityRepeaterList ul {
list-style-type: disc;
}
.CommunityItemBody .PanelField, .CommunityItemBody .PanelFieldValue {
padding-left: 0;
padding-right: 0;
}
/*** Communities common elements ***/
.CommunityItemActionLinks {
clear: both;
text-align: right;
padding: .25em 0;
}
.CommunityItemActionLinks a {
display: inline-block;
padding: 0 4px 2px 4px;
margin-left: -4px;
border-left: 1px solid #ddd;
}
.CommunityItemActionLinks a:hover {
background-color: #0096c7;
color: #fff;
text-decoration: none;
}
.CommunityItemActionLinks a:first-child {
border-left: none;
}
.CommunityItemActionLinks a.aspNetDisabled {
background-color: transparent;
text-decoration: none;
}
.CommunityItemTitle {
font-size: 110%;
padding: .25em 0;
}
.CommunityDateLine {
font-size: 85%;
font-style: italic;
}
.CommunityDateLine div {
float: none !important;
display: inline !important;
padding: 0 !important;
}
.CommunityNewItem {
color: red;
text-align: right;
float: right;
}
.CommunitySideBarSearch {
width: 70% !important;
margin-right: .25em;
}
.CommunityProfileTitle,
.CommunityTitleDate {
/* this makes the title display to the right of the image and
makes it so it will not wrap under. */
overflow: hidden;
zoom: 1;
}
.CommunityProfileTitle {
margin-bottom: 10px;
}
.CommunityProfilePicture {
float: left;
margin-right: 10px;
}
.CommunityLastComment {
padding-top: 10px;
padding-bottom: 5px;
float: right;
color: #999999;
font-size: 85%;
}
.CommunityCommentItem {
background: #eeeeee;
border-left: 10px solid #ddd;
padding: 10px;
margin-left: 15px;
}
@media (min-width: 768px) {
.CommunityCommentItem {
margin-left: 40px;
}
}
.CommunityWikiItem .CommunityRepeaterList .CommunityCommentItem {
background: #eeeeee;
border-left: 0;
margin-left: 0;
}
/* For adding comments */
.CommunityWikiReplyForm, .CommunityReplyForm {
padding: 10px;
background: #eeeeee;
}
.CommunityReplyForm {
border-left: 10px solid #ddd;
margin-left: 25px;
margin-right: 10px;
}
@media (min-width: 768px) {
.CommunityReplyForm {
margin-left: 50px;
}
}
/*** Contents List ***/
.ContentsListHeader {
font-weight: bold;
font-size: 105%;
}
.ContentsListItem {
padding: .2em 0;
}
/* Paging styles used in forums, blogs, and other community areas */
.CommunityListPager {
text-align: center !important;
margin-left: auto;
margin-right: auto;
}
.CommunityListPager td {
text-align: center !important;
padding: 5px;
}
.CommunityListPager a {
padding: 2px;
}
.CommunityListPager a.CurrentPage {
font-weight: bold;
text-decoration: none;
color: #333333;
}
.CommunityListPager a.CurrentPage:hover {
text-decoration: none;
}
/*==========================================================================
OBJECT BROWSER
========================================================================== */
/**
* Object Browser (aka document browser) is the Windows Explorer-like control
* that displays a tree view of the folder structure in the left-hand panel
* and the list of available documents in the right.
* It is used in Content Designer, Site Designer, Resource Library, and many other places.
*/
.ObjectBrowser_OuterTable {
border: 1px solid #ddd;
}
.Toolbars {
width: 100%;
float: left;
padding-top: 3px;
padding-bottom: 3px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.Toolbars input {
vertical-align: top;
float: left;
}
.OBNavIcons {
padding-left: 4px;
padding-right: 4px;
}
.OBNavIcon:hover, .OBNavIcon:focus, .OBNavIcon:active {
opacity: .9;
}
.TreePane hr {
display: none;
}
.ContentTreePane {
overflow: hidden;
float: left;
height: 100%;
width: 30%;
border-right: 1px solid #ddd;
}
.TreeHeaderPaneText {
padding: 3px;
font-weight: bold;
}
.RootList {
width: 98%;
}
.ContentListUpdatePanel {
height: 100% !important;
width: 100%;
}
.ContentContainerPane {
height: 100% !important;
width: 100%;
position: relative;
}
.ObjectBrowserContentList {
width: 100%;
padding-left: 5px;
padding-right: 5px;
border-collapse: separate;
}
.ContentSummaryPane {
width: 99%;
position: relative;
bottom: 0;
left: 0;
border-top: 1px solid #ddd;
background-color: #ffffff;
}
.ObjectBrowserIcon {
padding-left: 18px;
background-repeat: no-repeat;
min-height: 18px;
background-size: auto 16px;
}
.ObjectBrowserDocumentIcon {
height: 16px;
width: 16px;
}
.ObjectBrowserContentItem td {
overflow: hidden;
padding: 4px 20px 3px 3px;
/* the 20px right padding is here for IE 7*/
vertical-align: top;
text-align: left;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.ObjectBrowserContentItem td:first-child {
border-left: 1px solid transparent;
}
.ObjectBrowserContentItem td:last-child {
border-right: 1px solid transparent;
}
.ObjectBrowserContentItem:focus td {
border-color: #333333;
}
.MenuPane {
overflow: visible !important;
white-space: nowrap;
}
.ObjectBrowserWrapper .RadMenu {
float: none;
}
.ObjectBrowserWrapper .RadMenu .rmSlide .rmVertical .rmLeftImage,
.ObjectBrowserWrapper .RadTreeView .rtImg {
width: 16px;
}
#Toolbars {
overflow: hidden;
}
.AddressPane {
white-space: nowrap;
}
.FilenamePane {
clear: both;
padding: 3px;
padding-left: 0;
}
.FilenamePane label,
.FilenamePane input[type="text"] {
white-space: nowrap;
display: inline-block;
}
.FilenamePane label {
float: left;
padding-right: 3px;
}
.TreeHeaderPane {
background-color: #f0f0f0;
padding: 3px;
}
.TreeHeaderPane select {
width: 100%;
}
.CompletionList {
border: solid 1px #ddd;
height: auto;
max-height: 250px;
overflow: auto;
background-color: #FFFFFF;
padding-left: 0;
list-style: none;
}
.CompletionList li {
list-style: none;
padding-top: 3px;
padding-bottom: 3px;
}
/* style used on the text that is displayed next to a
node while its content is being retrieved from the server */
.LoadingMessage {
background-color: InfoBackground;
color: InfoText;
}
.ObjectBrowserContentList .even {
background-color: #F0F4FA;
}
.ObjectBrowserContentItem.hover,
.ObjectBrowserContentItem:hover,
.ObjectBrowserContentItem:focus {
background-color: #97CFFB;
cursor: pointer;
outline: none;
}
.ObjectBrowserContentItem.selected,
.ObjectBrowserContentItem:active {
background-color: #316AC5;
color: #FFFFFF;
}
.ObjectBrowserContentList div,
.dragItem {
cursor: default;
padding: 1px;
height: 1.5em;
}
/* Handles objects that have very long names and prevents the name from wrapping or overflowing the container */
.ObjectBrowserContentListName {
white-space: nowrap;
display: inline-block;
}
.ShowDescription {
white-space: normal !important;
}
.ObjectBrowserContentListDescription {
width: 60%;
}
.ObjectBrowserContentListEmpty {
font-style: italic;
font-weight: bolder;
width: 97%;
height: 97%;
text-align: center;
vertical-align: middle;
}
.unPublishedNode,
.unPublishedRow {
border-right: solid 4px red;
margin-right: 2px;
}
.unPublishedPendingNode,
.unPublishedPendingRow {
border-right: solid 4px gold;
margin-right: 2px;
}
.breakNode {
font-style: italic;
}
.HomePageNode {
background-image: url(../images/icon_homepage.gif);
background-position: right;
background-repeat: no-repeat;
padding-right: 20px;
}
.ObjectBrowserImportPanel {
border: 1px solid #ddd;
height: 200px;
overflow: auto;
margin-bottom: 5px;
padding: 5px;
border-radius: 3px;
}
/* Read only nodes
========================================================================== */
/* The following adds a lock icon overlay on the document type icon on IsSystem documents */
.ReadOnlyRow,
.ReadOnlyNode .TreeNode {
position: relative;
}
.ReadOnlyRow:before,
.ReadOnlyNode .TreeNode:before {
content: url(../images/icon_lock.png);
position: absolute;
}
.ReadOnlyRow:before {
left: 8px;
}
.ReadOnlyNode .TreeNode:before {
left: -12px;
top: 5px;
}
/* Quick find
========================================================================== */
/* The quick find search box in the top right corner of object browser */
.QuickFindWrapper {
float: right;
}
.QuickFindWrapper label {
float: left;
padding-top: .2em;
/* Force the label before the input field */
}
.QuickFindWrapper input {
margin-left: .2em;
margin-right: .2em;
}
/* ==========================================================================
CAROUSEL
========================================================================== */
/* Bootstrap carousel styles, used by the Slideshow iPart*/
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .item {
display: none;
position: relative;
transition: 0.6s ease-in-out left;
/*> img,
> a > img {
@include img-responsive;
line-height: 1;
}*/
}
@media screen and (prefers-reduced-motion: reduce) {
.carousel-inner > .item {
transition: none;
}
}
.carousel-inner > .item .carousel-link {
display: block;
width: 100%;
height: 100%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
}
.carousel-inner > .item.next, .carousel-inner > .item.active.right {
transform: translate3d(100%, 0, 0);
left: 0;
}
.carousel-inner > .item.prev, .carousel-inner > .item.active.left {
transform: translate3d(-100%, 0, 0);
left: 0;
}
.carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active {
transform: translate3d(0, 0, 0);
left: 0;
}
}
.carousel-inner.bg-img > .item {
background-color: #222222;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-size: cover;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: 0.5;
font-size: 50px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
}
.carousel-control.right {
left: auto;
right: 0;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
}
.carousel-control:hover, .carousel-control:focus, .carousel-control:visited, .carousel-control:active {
outline: 0;
color: #fff;
text-decoration: none;
opacity: .9;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 50%;
margin-top: -35px;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev {
left: 50%;
margin-left: -20px;
}
.carousel-control .icon-next {
right: 50%;
margin-right: -20px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #fff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
margin: 0;
width: 12px;
height: 12px;
background-color: #fff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .TextButton {
text-shadow: none;
}
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3, .carousel-caption h4, .carousel-caption h5, .carousel-caption h6 {
color: #fff;
}
@media (min-width: 768px) {
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
font-size: 60px;
}
.carousel-control .icon-prev {
margin-left: -35px;
}
.carousel-control .icon-next {
margin-right: -35px;
}
}
@media (min-width: 768px) {
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
}
@media (min-width: 768px) {
.carousel-indicators {
bottom: 20px;
}
}
/* carousel2 displays the caption at the top with a background behind the text
* It can be used on the entire Slideshow iPart or on a single slide.
*/
.carousel2 .carousel-link {
text-decoration: none;
}
.carousel2 .carousel-caption {
background-color: #000;
background-color: rgba(0, 0, 0, 0.55);
left: 0;
right: 0;
padding-left: 15%;
padding-right: 15%;
position: static;
}
/* ==========================================================================
DONUT CHARTS
========================================================================== */
/* 'Tiny' Donut
========================================================================== */
.tiny-chartbox {
display: -webkit-flexbox;
display: flex;
justify-content: center;
}
.tiny-chartbox div[data-chart-type*="donut"] {
position: relative;
}
.tiny-chartbox .donut-wrapper {
width: 60px;
height: 60px;
}
.tiny-chartbox .donut-hole {
height: 42px;
width: 42px;
background-color: #fff;
z-index: 20;
position: absolute;
top: 9px;
left: 9px;
border-radius: 42px;
line-height: 15px;
}
.tiny-chartbox span.donut-filling {
position: absolute;
display: block;
vertical-align: middle;
font-size: 14.6664px;
top: 50%;
margin-top: -7.5px;
width: 42px;
height: 15px;
text-align: center;
overflow: none;
}
.tiny-chartbox .donut-caption-wrapper {
width: 60px;
align-content: center;
position: relative;
display: block;
text-align: center;
font-size: 10px;
font-weight: 600;
margin-top: 1em;
}
.tiny-chartbox .donut-caption {
margin: 0 auto;
}
.tiny-chartbox .donut-bite {
position: absolute;
width: 30px;
height: 60px;
overflow: hidden;
top: 0;
left: 30.5px;
transform-origin: left center;
}
.tiny-chartbox .donut-bite.large {
width: 60px;
height: 60px;
left: 0;
transform-origin: center center;
}
.tiny-chartbox .donut-bite:BEFORE {
content: "";
position: absolute;
width: 30px;
height: 60px;
top: 0;
left: -30px;
border-radius: 30px 0 0 30px;
transform-origin: right center;
}
.tiny-chartbox .donut-bite.large:BEFORE {
left: 0;
}
.tiny-chartbox .donut-bite.large:AFTER {
content: "";
position: absolute;
width: 30px;
height: 60px;
left: 30px;
border-radius: 0 30px 30px 0;
}
/* 'Small' Donut
========================================================================== */
.small-chartbox {
display: -webkit-flexbox;
display: flex;
justify-content: center;
}
.small-chartbox div[data-chart-type*="donut"] {
position: relative;
}
.small-chartbox .donut-wrapper {
width: 110px;
height: 110px;
}
.small-chartbox .donut-hole {
height: 74.8px;
width: 74.8px;
background-color: #fff;
z-index: 20;
position: absolute;
top: 17.6px;
left: 17.6px;
border-radius: 74.8px;
line-height: 27.5px;
}
.small-chartbox span.donut-filling {
position: absolute;
display: block;
vertical-align: middle;
font-size: 26.8884px;
top: 50%;
margin-top: -13.75px;
width: 74.8px;
height: 27.5px;
text-align: center;
overflow: none;
}
.small-chartbox .donut-caption-wrapper {
width: 110px;
align-content: center;
position: relative;
display: block;
text-align: center;
font-size: 10.56px;
font-weight: 600;
margin-top: 1em;
}
.small-chartbox .donut-caption {
margin: 0 auto;
}
.small-chartbox .donut-bite {
position: absolute;
width: 55px;
height: 110px;
overflow: hidden;
top: 0;
left: 55.5px;
transform-origin: left center;
}
.small-chartbox .donut-bite.large {
width: 110px;
height: 110px;
left: 0;
transform-origin: center center;
}
.small-chartbox .donut-bite:BEFORE {
content: "";
position: absolute;
width: 55px;
height: 110px;
top: 0;
left: -55px;
border-radius: 55px 0 0 55px;
transform-origin: right center;
}
.small-chartbox .donut-bite.large:BEFORE {
left: 0;
}
.small-chartbox .donut-bite.large:AFTER {
content: "";
position: absolute;
width: 55px;
height: 110px;
left: 55px;
border-radius: 0 55px 55px 0;
}
/* 'Medium' Donut
========================================================================== */
.medium-chartbox {
display: -webkit-flexbox;
display: flex;
justify-content: center;
}
.medium-chartbox div[data-chart-type*="donut"] {
position: relative;
}
.medium-chartbox .donut-wrapper {
width: 160px;
height: 160px;
}
.medium-chartbox .donut-hole {
height: 96px;
width: 96px;
background-color: #fff;
z-index: 20;
position: absolute;
top: 32px;
left: 32px;
border-radius: 96px;
line-height: 40px;
}
.medium-chartbox span.donut-filling {
position: absolute;
display: block;
vertical-align: middle;
font-size: 39.1104px;
top: 50%;
margin-top: -20px;
width: 96px;
height: 40px;
text-align: center;
overflow: none;
}
.medium-chartbox .donut-caption-wrapper {
width: 160px;
align-content: center;
position: relative;
display: block;
text-align: center;
font-size: 15.36px;
font-weight: 600;
margin-top: 1em;
}
.medium-chartbox .donut-caption {
margin: 0 auto;
}
.medium-chartbox .donut-bite {
position: absolute;
width: 80px;
height: 160px;
overflow: hidden;
top: 0;
left: 80.5px;
transform-origin: left center;
}
.medium-chartbox .donut-bite.large {
width: 160px;
height: 160px;
left: 0;
transform-origin: center center;
}
.medium-chartbox .donut-bite:BEFORE {
content: "";
position: absolute;
width: 80px;
height: 160px;
top: 0;
left: -80px;
border-radius: 80px 0 0 80px;
transform-origin: right center;
}
.medium-chartbox .donut-bite.large:BEFORE {
left: 0;
}
.medium-chartbox .donut-bite.large:AFTER {
content: "";
position: absolute;
width: 80px;
height: 160px;
left: 80px;
border-radius: 0 80px 80px 0;
}
/* 'Large' Donut
========================================================================== */
.large-chartbox {
display: -webkit-flexbox;
display: flex;
justify-content: center;
}
.large-chartbox div[data-chart-type*="donut"] {
position: relative;
}
.large-chartbox .donut-wrapper {
width: 240px;
height: 240px;
}
.large-chartbox .donut-hole {
height: 144px;
width: 144px;
background-color: #fff;
z-index: 20;
position: absolute;
top: 48px;
left: 48px;
border-radius: 144px;
line-height: 60px;
}
.large-chartbox span.donut-filling {
position: absolute;
display: block;
vertical-align: middle;
font-size: 58.6656px;
top: 50%;
margin-top: -30px;
width: 144px;
height: 60px;
text-align: center;
overflow: none;
}
.large-chartbox .donut-caption-wrapper {
width: 240px;
align-content: center;
position: relative;
display: block;
text-align: center;
font-size: 23.04px;
font-weight: 600;
margin-top: 1em;
}
.large-chartbox .donut-caption {
margin: 0 auto;
}
.large-chartbox .donut-bite {
position: absolute;
width: 120px;
height: 240px;
overflow: hidden;
top: 0;
left: 120.5px;
transform-origin: left center;
}
.large-chartbox .donut-bite.large {
width: 240px;
height: 240px;
left: 0;
transform-origin: center center;
}
.large-chartbox .donut-bite:BEFORE {
content: "";
position: absolute;
width: 120px;
height: 240px;
top: 0;
left: -120px;
border-radius: 120px 0 0 120px;
transform-origin: right center;
}
.large-chartbox .donut-bite.large:BEFORE {
left: 0;
}
.large-chartbox .donut-bite.large:AFTER {
content: "";
position: absolute;
width: 120px;
height: 240px;
left: 120px;
border-radius: 0 120px 120px 0;
}
/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/
.sp-container {
position: absolute;
top: 0;
left: 0;
display: inline-block;
*display: inline;
*zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994;
overflow: hidden;
}
.sp-container.sp-flat {
position: relative;
}
/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
box-sizing: content-box;
}
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
position: relative;
width: 100%;
display: inline-block;
}
.sp-top-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.sp-color {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 20%;
}
.sp-hue {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 84%;
height: 100%;
}
.sp-clear-enabled .sp-hue {
top: 33px;
height: 77.5%;
}
.sp-fill {
padding-top: 80%;
}
.sp-sat, .sp-val {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.sp-alpha-enabled .sp-top {
margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
display: block;
}
.sp-alpha-handle {
position: absolute;
top: -4px;
bottom: -4px;
width: 6px;
left: 50%;
cursor: pointer;
border: 1px solid black;
background: white;
opacity: .8;
}
.sp-alpha {
display: none;
position: absolute;
bottom: -14px;
right: 0;
left: 0;
height: 8px;
}
.sp-alpha-inner {
border: solid 1px #333;
}
.sp-clear {
display: none;
}
.sp-clear.sp-clear-display {
background-position: center;
}
.sp-clear-enabled .sp-clear {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 84%;
height: 28px;
}
/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
.sp-container.sp-input-disabled .sp-input-container {
display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
display: none;
}
.sp-palette-only .sp-picker-container {
display: none;
}
.sp-palette-disabled .sp-palette-container {
display: none;
}
.sp-initial-disabled .sp-initial {
display: none;
}
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
.sp-sat {
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}
.sp-hue {
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
/* IE filters do not support multiple color stops.
Generate 6 divs, line them up, and do two color gradients for each.
Yes, really.
*/
.sp-1 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
height: 16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
height: 16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}
.sp-hidden {
display: none !important;
}
/* Clearfix hack */
.sp-cf:before, .sp-cf:after {
content: "";
display: table;
}
.sp-cf:after {
clear: both;
}
.sp-cf {
*zoom: 1;
}
/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
.sp-color {
right: 40%;
}
.sp-hue {
left: 63%;
}
.sp-fill {
padding-top: 60%;
}
}
.sp-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid #fff;
background: #000;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.sp-slider {
position: absolute;
top: 0;
cursor: pointer;
height: 3px;
left: -1px;
right: -1px;
border: 1px solid #000;
background: white;
opacity: .8;
}
/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/
.sp-container {
border-radius: 0;
background-color: #ECECEC;
border: solid 1px #f0c49B;
padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.sp-top {
margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
border: solid 1px #666;
}
/* Input */
.sp-input-container {
float: right;
width: 100px;
margin-bottom: 4px;
}
.sp-initial-disabled .sp-input-container {
width: 100%;
}
.sp-input {
font-size: 12px !important;
border: 1px inset;
padding: 4px 5px;
margin: 0;
width: 100%;
background: transparent;
border-radius: 3px;
color: #222;
}
.sp-input:focus {
border: 1px solid orange;
}
.sp-input.sp-validation-error {
border: 1px solid red;
background: #fdd;
}
.sp-picker-container, .sp-palette-container {
float: left;
position: relative;
padding: 10px;
padding-bottom: 300px;
margin-bottom: -290px;
}
.sp-picker-container {
width: 172px;
border-left: solid 1px #fff;
}
/* Palettes */
.sp-palette-container {
border-right: solid 1px #ccc;
}
.sp-palette-only .sp-palette-container {
border: 0;
}
.sp-palette .sp-thumb-el {
display: block;
position: relative;
float: left;
width: 24px;
height: 15px;
margin: 3px;
cursor: pointer;
border: solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: orange;
}
.sp-thumb-el {
position: relative;
}
/* Initial */
.sp-initial {
float: left;
border: solid 1px #333;
}
.sp-initial span {
width: 30px;
height: 25px;
border: none;
display: block;
float: left;
margin: 0;
}
.sp-initial .sp-clear-display {
background-position: center;
}
/* Buttons */
.sp-palette-button-container,
.sp-button-container {
float: right;
}
/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
margin: 0;
overflow: hidden;
cursor: pointer;
padding: 4px;
display: inline-block;
*zoom: 1;
*display: inline;
border: solid 1px #91765d;
background: #eee;
color: #333;
vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111;
}
.sp-replacer.sp-disabled {
cursor: default;
border-color: silver;
color: silver;
}
.sp-dd {
padding: 2px 0;
height: 16px;
line-height: 16px;
float: left;
font-size: 10px;
}
.sp-preview {
position: relative;
width: 25px;
height: 20px;
border: solid 1px #222;
margin-right: 5px;
float: left;
z-index: 0;
}
.sp-palette {
*width: 220px;
max-width: 220px;
}
.sp-palette .sp-thumb-el {
width: 16px;
height: 16px;
margin: 2px 1px;
border: solid 1px #d0d0d0;
}
.sp-container {
padding-bottom: 0;
}
/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
background-color: #eeeeee;
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-size: 14px;
line-height: 1;
padding: 5px 4px;
text-align: center;
text-shadow: 0 1px 0 #eee;
vertical-align: middle;
}
.sp-container button:hover {
background-color: #dddddd;
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
font-size: 11px;
color: #d93f3f !important;
margin: 0;
padding: 2px;
margin-right: 5px;
vertical-align: middle;
text-decoration: none;
}
.sp-cancel:hover {
color: #d93f3f !important;
text-decoration: underline;
}
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
border-color: #000;
}
.sp-preview, .sp-alpha, .sp-thumb-el {
position: relative;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.sp-palette .sp-thumb-inner {
background-position: 50% 50%;
background-repeat: no-repeat;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}
.sp-clear-display {
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}
/* ==========================================================================
Cookie Consent
========================================================================== */
/* Layout
========================================================================== */
/* This file should contain CSS that modifies the popup layout. */
/* By layout, we mean the physical position of the elements on the popup window, and the margin / padding around those elements. */
.cc-revoke.cc-top {
top: 0;
left: 3em;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.cc-revoke.cc-bottom {
bottom: 0;
left: 3em;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
.cc-revoke.cc-left {
left: 3em;
right: unset;
}
.cc-revoke.cc-right {
right: 3em;
left: unset;
}
/**************************************** FLOATING ****************************************/
/* these classes position the floating element */
.cc-top {
top: 1em;
}
.cc-left {
left: 1em;
}
.cc-right {
right: 1em;
}
.cc-bottom {
bottom: 1em;
}
/* links that are direct decendants should be displayed as block */
.cc-floating > .cc-link {
margin-bottom: 1em;
}
.cc-floating .cc-message {
display: block;
margin-bottom: 1em;
}
.cc-window.cc-floating .cc-compliance {
flex: 1;
}
/**************************************** BANNER ****************************************/
.cc-window.cc-banner {
align-items: center;
}
.cc-banner.cc-top {
left: 0;
right: 0;
top: 0;
}
.cc-banner.cc-bottom {
left: 0;
right: 0;
bottom: 0;
}
.cc-banner .cc-message {
flex: 1;
}
/* COMPLIANCE BOX */
.cc-compliance {
display: flex;
align-items: center;
align-content: space-between;
}
.cc-compliance > .cc-btn {
flex: 1;
}
.cc-btn + .cc-btn {
margin-left: .5em;
}
/* Animations
========================================================================== */
.cc-window {
opacity: 1;
transition: opacity 1s ease;
}
.cc-window.cc-invisible {
opacity: 0;
}
/* only animate ifhas class 'cc-animate' */
.cc-animate.cc-revoke {
transition: transform 1s ease;
}
.cc-animate.cc-revoke.cc-top {
transform: translateY(-2em);
}
.cc-animate.cc-revoke.cc-bottom {
transform: translateY(2em);
}
.cc-animate.cc-revoke.cc-active.cc-top {
transform: translateY(0);
}
.cc-animate.cc-revoke.cc-active.cc-bottom {
transform: translateY(0);
}
.cc-revoke:hover {
transform: translateY(0);
}
.cc-grower {
/* Initially we don't want any height, and we want the contents to be hidden */
max-height: 0;
overflow: hidden;
/* Set our transitions up. */
transition: max-height 1s;
}
/* Base
========================================================================== */
/* the popup window */
.cc-window, .cc-revoke {
position: fixed;
overflow: hidden;
box-sizing: border-box;
/* exclude padding when dealing with width */
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 16px;
/* by setting the base font here, we can size the rest of the popup using CSS `em` */
line-height: 1.5em;
display: flex;
flex-wrap: nowrap;
/* the following are random unjustified styles - just because - should probably be removed */
z-index: 9999;
}
.cc-window.cc-static {
position: static;
}
/* 2 basic types of window - floating / banner */
.cc-window.cc-floating {
padding: 2em;
max-width: 24em;
/* 1em == 16px therefore 24em == 384px */
flex-direction: column;
}
.cc-window.cc-banner {
padding: 1em 1.8em;
width: 100%;
flex-direction: row;
}
.cc-revoke {
padding: .5em;
}
.cc-revoke:hover {
text-decoration: underline;
}
.cc-header {
font-size: 18px;
font-weight: bold;
}
/* clickable things */
.cc-btn, .cc-link, .cc-close, .cc-revoke {
cursor: pointer;
}
.cc-link {
opacity: .8;
display: inline-block;
padding: .2em;
text-decoration: underline;
}
.cc-link:hover {
opacity: 1;
}
.cc-link:active, .cc-link:visited {
color: initial;
}
.cc-btn {
display: block;
padding: .4em .8em;
font-size: 0.9em;
font-weight: bold;
border-width: 2px;
border-style: solid;
text-align: center;
white-space: nowrap;
}
.cc-banner .cc-btn:last-child {
min-width: 140px;
}
.cc-highlight .cc-btn:first-child {
background-color: transparent;
border-color: transparent;
}
.cc-highlight .cc-btn:first-child:hover,
.cc-highlight .cc-btn:first-child:focus {
background-color: transparent;
text-decoration: underline;
}
.cc-close {
display: block;
position: absolute;
top: .5em;
right: .5em;
font-size: 1.6em;
opacity: .9;
/* seeing as this contains text and not an image, the element taller than it is wide (because it is text) */
/* - we want it to be a square, because it's acting as an icon */
/* - setting the line height normalises the height */
line-height: .75;
}
.cc-close:hover,
.cc-close:focus {
opacity: 1;
}
/* Media
========================================================================== */
@media print {
.cc-window, .cc-revoke {
display: none;
}
}
@media screen and (max-width: 900px) {
.cc-btn {
white-space: normal;
}
}
/* dimensions for 'iPhone6 Plus' and lower */
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
.cc-window.cc-top {
top: 0;
}
.cc-window.cc-bottom {
bottom: 0;
}
.cc-window.cc-banner, .cc-window.cc-right, .cc-window.cc-left {
left: 0;
right: 0;
}
.cc-window.cc-banner {
flex-direction: column;
}
.cc-window.cc-banner .cc-compliance {
flex: 1;
}
.cc-window.cc-floating {
max-width: none;
}
.cc-window .cc-message {
margin-bottom: 1em;
}
.cc-window.cc-banner {
align-items: unset;
}
}
/* Styles
========================================================================== */
.cc-window {
background-color: #333333;
color: #fff;
}
.cc-window .cc-link, .cc-window .cc-link:active, .cc-window .cc-link:visited, .cc-window .cc-btn, .cc-window .cc-btn:active, .cc-window .cc-btn:visited {
color: #fff;
font-weight: bold;
text-decoration: none;
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
overflow: hidden;
height: 18px;
margin-bottom: 18px;
background-color: #f5f5f5;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 85%;
line-height: 18px;
color: #fff;
text-align: center;
background-color: #0096c7;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: width 0.6s ease;
}
@media screen and (prefers-reduced-motion: reduce) {
.progress-bar {
transition: none;
}
}
.progress-striped .progress-bar,
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress.active .progress-bar,
.progress-bar.active {
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #68bd49;
}
.progress-bar-info {
background-color: #00a9e0;
}
.progress-bar-warning {
background-color: #e98300;
}
.progress-bar-danger {
background-color: #d03528;
}
/* ==========================================================================
SSRS REPORT
========================================================================== */
/* Remove the blank.gif icon due to a missing parm that results in a broken image
* icon in non-IE browsers...
* https://connect.microsoft.com/VisualStudio/feedback/details/556989/#tabs */
img[src*="OpType=ReportImage&ResourceStreamID=Blank.gif"] {
display: none;
}
.SSRSReportViewer {
overflow-x: auto;
}
.SSRSReportViewer table > tbody > tr > td > div:first-of-type {
background-image: none !important;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 5px;
}
.SSRSReportViewer table > tbody > tr > td > div > div table > tbody > tr > td {
vertical-align: middle;
}
.SSRSReportViewer table > tbody > tr > td > div > div > table > tbody > tr > td:last-of-type {
vertical-align: middle;
padding-right: 5px;
}
.SSRSReportViewer table > tbody > tr:nth-child(4) {
background-color: #ffffff;
}
.SSRSReportViewer table > tbody > tr > td input[type="image"] {
height: auto !important;
width: auto !important;
vertical-align: middle;
}
/* ==============================================================================
Report Display
============================================================================== */
.ReportContainerPanel {
display: table;
width: 100%;
height: 100%;
background-color: #525659;
}
.ReportContainerPanel .ui-resizable-e {
background: #c8c8c8;
cursor: col-resize;
}
.ReportPanel {
display: table-cell;
vertical-align: top;
}
.ReportLeftPanel {
background: #fff;
z-index: 1;
padding: 0;
padding-right: 1px;
position: absolute;
}
.ReportLeftPanel .ReportLeftInnerPanel {
overflow-x: hidden;
overflow-y: auto;
padding: 10px;
padding-top: 0;
}
.ReportRightPanel {
background-color: #525659;
}
.ReportRightPanel .ReportRightInnerPanel {
overflow-x: auto;
overflow-y: auto;
padding: 10px;
}
/* ==========================================================================
TABS AND CONTENT COLLECTION ORGANIZER
========================================================================== */
.tabs-wrapper {
clear: both;
}
@media (min-width: 768px) {
.tabs-wrapper.tabs-left {
display: grid;
grid-template-columns: auto minmax(60%, 100%);
}
.tabs-wrapper.tabs-left > .RadTabStripVertical {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1;
grid-row: 1;
z-index: 1;
}
.tabs-wrapper.tabs-left > .RadMultiPage {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
z-index: 1;
}
.tabs-wrapper.tabs-right {
display: grid;
grid-template-columns: minmax(60%, 100%) auto;
}
.tabs-wrapper.tabs-right > .RadTabStripVertical {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
z-index: 1;
}
.tabs-wrapper.tabs-right > .RadMultiPage {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1;
grid-row: 1;
z-index: 1;
}
}
.RadTabStripVertical > .rtsLevel .rtsLink {
white-space: normal;
}
.tab-step-number {
display: inline-block;
text-align: center;
line-height: 1.428571429;
min-width: 1.428571429em;
border-radius: 50%;
color: #333333;
background-color: #cccccc;
}
.RadMultiPage {
border-style: solid;
border-color: #ddd;
border-width: 0 1px 1px 1px;
padding: 10px;
}
.tabs-bottom > .RadMultiPage {
border-width: 1px 1px 0 1px;
}
.tabs-right > .RadMultiPage,
.tabs-left > .RadMultiPage {
border-width: 1px;
}
/* This puts a border around content below a set of tabs (e.g. Contact Address Editor iPart)*/
.ContentTabbedDisplay {
border: 1px solid #ddd;
border-top: none !important;
/* !important needed for overriding StandardPanel styles*/
}
/* ==========================================================================
CART CHARGES
========================================================================== */
.CartCharges {
max-width: 30em;
padding: 3px;
}
.CartCharges label, .CartCharges .Label {
width: auto !important;
padding-right: 2em;
margin: 0;
}
.CartCharges .PanelFieldValue {
float: right !important;
text-align: right;
width: auto;
}
.CartCharges .PanelField {
border-bottom: 1px solid #ddd;
}
.CartCharges .GrandTotal {
font-weight: bold;
}
/* ==========================================================================
OPEN INVOICES
========================================================================== */
.OpenInvoicesTotals {
float: right;
}
.OpenInvoicesTotals .PanelFieldValue,
.OpenInvoicesTotals .TextButton {
float: right;
clear: right;
}
.OpenInvoicesTotals .SelectedTotal {
font-weight: bold;
}
/* ==========================================================================
INVOICE PAYMENT LINK
========================================================================== */
.invoice-payment-link-container .message-container > span {
display: block;
margin-bottom: 0.25rem;
}
.invoice-payment-link-container .adjust-button-container > .TextButton {
margin-top: 1rem;
}
.invoice-payment-link-inline .invoice-payment-link-container,
.iPartsHorizontal .invoice-payment-link-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
}
.invoice-payment-link-inline .invoice-payment-link-container .message-container,
.iPartsHorizontal .invoice-payment-link-container .message-container {
order: 3;
}
.invoice-payment-link-inline .invoice-payment-link-container .message-container > span,
.iPartsHorizontal .invoice-payment-link-container .message-container > span {
margin-bottom: 0;
margin-left: 0.5rem;
}
.invoice-payment-link-inline .invoice-payment-link-container .adjust-button-container > .TextButton,
.iPartsHorizontal .invoice-payment-link-container .adjust-button-container > .TextButton {
margin-top: 0;
margin-left: 0.5rem;
}
/* ==========================================================================
GROUP LIST EDITOR
========================================================================== */
.RadTreeView.GLE {
white-space: normal;
}
/* hide the expand image when the list is not expandable*/
.DoNotShowExpandImage > .rtUL > .rtLI > .rtTop, .DoNotShowExpandImage > .rtUL > .rtLI > .rtMid, .DoNotShowExpandImage > .rtUL > .rtLI > .rtBot {
padding-left: 0;
}
.DoNotShowExpandImage > .rtUL > .rtLI .rtSp, .DoNotShowExpandImage > .rtUL > .rtLI .rtPlus {
display: none;
}
/* Style GLE nodes differntly since they include 2 links */
.RadTreeView.GLE .rtHover .rtIn,
.RadTreeView.GLE .rtSelected .rtIn {
border-color: transparent;
background: none;
}
.RadTreeView.GLE a {
padding: 1px 6px 3px 6px;
}
.RadTreeView.GLE a:hover, .RadTreeView.GLE a:focus, .RadTreeView.GLE a:active,
.RadTreeView.GLE span[onclick]:hover,
.RadTreeView.GLE span[onclick]:focus,
.RadTreeView.GLE span[onclick]:active {
background-color: #c7edf9;
}
.RadTreeView.GLE a[onclick].rtIn:hover {
padding: 3px 5px 3px 5px;
color: #000;
border-color: transparent;
background: none;
}
/* ==========================================================================
BIG BUTTON PANEL
========================================================================== */
.BigButtonList {
margin: 0;
}
.BigButtonList:not(.dropdown-menu) {
padding-left: 0;
list-style: none;
}
.BigButtonList:not(.dropdown-menu) li {
list-style: none;
padding-top: 3px;
padding-bottom: 3px;
}
.HorizontalButtons .BigButtonWrapper, .HorizontalButtonsLeft .BigButtonWrapper, .HorizontalButtonsRight .BigButtonWrapper {
padding: 0;
}
.HorizontalButtons .BigButtonWrapper li, .HorizontalButtonsLeft .BigButtonWrapper li, .HorizontalButtonsRight .BigButtonWrapper li {
display: inline-block;
}
.HorizontalButtons .BigButtonWrapper {
text-align: center;
}
.HorizontalButtonsLeft .BigButtonWrapper {
text-align: left;
}
.HorizontalButtonsRight .BigButtonWrapper {
text-align: right;
}
.BigButtonWrapper.HasImage img {
max-width: 100px;
margin-right: 5px;
float: left;
}
.BigButtonWrapper.HasImage .BigButtonLinkList {
display: table-cell;
}
/* ==========================================================================
QUERY MENU
========================================================================== */
/* The map canvas when the Query Menu is configured to show a map of the results */
.MapCanvas {
width: 100%;
height: 728px;
margin-bottom: 2px;
}
/* ==========================================================================
Query Template Display iPart
========================================================================== */
.QueryTemplateItem.card {
height: 100%;
}
/* ==========================================================================
RECENT HISTORY
========================================================================== */
.RecentHistoryList {
margin: 0 0 .5em 0;
padding: 0;
}
.RecentHistoryList > li {
list-style-type: none;
margin: 0 .5em .5em 0;
}
.RecentHistoryList > li > a {
display: flex;
align-items: center;
white-space: nowrap;
}
.RecentHistoryList > li > a img {
margin-right: 3px;
}
.RecentHistoryList > li > a span {
text-overflow: ellipsis;
overflow: hidden;
flex: 1 1 100%;
}
.RecentHistoryListHorizontal {
display: flex;
flex-wrap: wrap;
}
.RecentHistoryTitleHorizontal {
font-weight: 600;
color: #444;
padding-top: 3px;
}
.RecentHistoryListHorizontal > li > a {
display: inline-flex;
padding: 5px 10px;
}
/* ==========================================================================
SIGN IN
========================================================================== */
/* SignIn iPart */
.SignIn {
max-width: 18em;
margin-left: auto;
margin-right: auto;
}
.SignIn input[type="submit"],
.SignIn input[type="text"],
.SignIn input[type="password"] {
width: 100%;
}
.forgot-link-field {
position: relative;
}
.forgot-link-field > a {
position: absolute;
top: 10px;
right: 10px;
display: none;
border-left: 1px solid #DDD;
font-size: 13px;
border-left: 1px solid #ddd;
padding-left: 10px;
line-height: 30px;
}
/* ==========================================================================
SIGN UP
========================================================================== */
/* Content Account Creator iPart */
.SignUp {
max-width: 18em;
}
.SignUp input[type="submit"] {
width: 100%;
}
/* ==========================================================================
COMMUNICATION PREFERENCES
========================================================================== */
.CommunicationPreferencesSection {
background-color: #f5f5f5;
padding: 10px;
}
.CommunicationPreferencesSection::after {
display: block;
clear: both;
content: "";
}
/* ==========================================================================
CONTENT BLOCK AND COMMUNITIES
========================================================================== */
.ContentBlock img,
.ContentBlockPost img,
.CommunityAttachmentImage img,
.CommunityItemBody img {
max-width: 100%;
height: auto !important;
}
.ContentBlockPostBody,
.ContentBlockCommentBody {
word-wrap: break-word;
}
.CommunityItemBody,
.CommunityItemDescription {
word-wrap: break-word;
}
.CommunityItemBody .PanelFieldValue,
.CommunityItemDescription .PanelFieldValue {
max-width: 100%;
}
/* ==========================================================================
QUERY PROFILE PICTURE LIST
========================================================================== */
.ListThumbnail {
margin-right: 1px;
margin-bottom: 1px;
vertical-align: middle;
}
.NameHyperlink {
margin-left: 2px;
}
/* ==========================================================================
DIRECT DEBITS
========================================================================== */
.Ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
/* ==========================================================================
EMBEDDED WEB PAGE
========================================================================== */
.EmbeddedWebPage {
border: none;
margin: 0;
}
/* ==========================================================================
UTILITY NAVIGATION
========================================================================== */
.UtilitySection {
display: inline-block;
}
.UtilitySearch,
.UtilityNavigationList,
.UtilityAuthentication,
.UtilitySTEToggle,
.UtilityTranslation {
vertical-align: middle;
}
.UtilitySearch,
.UtilitySTEToggle,
.UtilityAuthentication,
.UtilityTranslation,
.UtilityPTSToggle {
margin-left: 7.5px;
}
.UtilityNavigationList .NavigationUnorderedList > li > a {
display: inline-block;
}
/* ==========================================================================
VIDEO PLAYER
========================================================================== */
.videoplayer-ipart-container {
position: relative;
height: 56.25%;
width: 100%;
overflow: hidden;
}
.videoplayer-ipart-wrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoplayer-ipart-wrapper iframe,
.videoplayer-ipart-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.cinemagraph-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
z-index: 1;
padding: 20px;
}
.cinemagraph-black-and-white video {
filter: grayscale(100%);
}
.cinemagraph-sepia video {
filter: sepia(100%);
}
.cinemagraph-blur video {
filter: blur(5px);
width: 120%;
margin-left: -10%;
margin-top: -2px;
}
/* ==========================================================================
PANEL EDITOR
========================================================================== */
.PanelEditorEditForm td,
.PanelEditorReadOnlyForm td {
vertical-align: top;
}
.PanelEditorEditForm .cell-empty,
.PanelEditorReadOnlyForm .cell-empty {
/* make sure empty cells do not take up vertical space,
but their horizontal space is still reserved */
height: 0px;
}
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: resizable.css
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
touch-action: none;
}
.ui-resizable-disabled.ui-resizable-handle,
.ui-resizable-autohide.ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
/* ==========================================================================
PAGE TURN STATISTICS
========================================================================== */
/* Internal debugging tool */
.PageTurnStatistics {
background-color: #efafa9;
position: fixed;
bottom: 0%;
width: 80em;
max-width: 100%;
z-index: 100;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.PageTurnStatistics .panel-title {
font-weight: bold;
font-size: 110%;
}
.close {
font-size: 22px;
font-weight: bold;
color: #777;
line-height: 80%;
}
/* ==========================================================================
SYSTEM STATUS
========================================================================== */
.system-status-row {
border: 1px solid #ddd;
padding: 10px 10px;
background-color: #fff;
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.system-status-row.system-status-error {
background-color: #ffd8d8;
border-color: #d03528;
}
/* ==========================================================================
SUMMARY DISPLAY
========================================================================== */
.summary-display-inline {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
}
.summary-display-inline .Label {
width: auto;
float: none;
}
.summary-display-inline .PanelFieldValue {
float: none;
}
.summary-display-item .Label {
min-height: 1px;
}
/* ==========================================================================
TABLES
========================================================================== */
/* Basics
========================================================================== */
table {
border-width: 0;
}
th, td {
border: none;
padding: 0;
}
th {
/*distinguishing table headers from data cells*/
font-weight: bold;
text-align: center;
}
caption {
/*coordinated margin to match cell's padding*/
margin-bottom: .5em;
/*centered so it doesn't blend in to other content*/
text-align: center;
}
table.align-middle td, table.align-middle th {
vertical-align: middle;
}
/* SimpleTable
========================================================================== */
/* A simple table - currently used in Promotion Creator design mode and
* Communication Creator attachments grid */
.SimpleTable {
border: 1px solid #ddd;
}
.SimpleTable th, .SimpleTable .TableHeaderCell {
border-bottom: 2px solid #ddd;
text-align: left;
}
.SimpleTable td, .SimpleTable th {
padding: 4px 11px;
}
.SimpleTable.RowGridlinesOnly tr, .SimpleTable.ShowTableBorders tr {
border-top: 1px solid #ddd;
}
.SimpleTable.StripedTable > tbody > tr:nth-of-type(odd) {
background-color: #eeeeee;
}
.SimpleTable.ShowTableBorders td, .SimpleTable.ShowTableBorders th {
border-left: 1px solid #ddd;
}
.SimpleTable.ShowTableBorders td:first-child, .SimpleTable.ShowTableBorders th:first-child {
border-left: none;
}
.SimpleTable.VAlignTop th, .SimpleTable.VAlignTop td {
vertical-align: top;
}
/* Form
========================================================================== */
/* A table-based form */
.Form {
padding: 5px;
}
.Form th {
font-weight: normal;
text-align: left;
}
.Form th,
.Form td {
padding: 0.188em;
vertical-align: top;
}
/* Grid
========================================================================== */
/* These styles are used to style Grids like the default Telerik RadGrid */
/* Use class "RowGridlinesOnly" to turn off column gridlines */
/* define the width of a column that contains only icons such as edit, delete */
.grid-icon-column {
width: 50px;
}
.GridTitlePanel,
.GridFooterPanel {
margin-top: 3px;
margin-bottom: 3px;
}
.GridTitlePanel .Title {
float: left;
}
table.Grid {
margin: 5px;
border: #ddd 1px solid !important;
}
table.Grid.no-border,
table.Grid.no-border tr:not(.GridHeader) td {
border: none !important;
}
table.Grid.no-border .GridHeader td {
border-width: 0 0 1px 0 !important;
}
table.Grid,
table.Grid td,
table.Grid th {
border-collapse: collapse;
}
table.Grid,
table.Grid th,
table.Grid tr.GridHeader td {
padding: 8px;
}
td.ListerColumnHeader {
text-align: center;
}
/* Column Row with Name, Total Revenue, Target Revenue, Overhead Cost, ROI %, Start Date, End Date, Status */
tr.ExpGridHeader th,
tr.ExpGridRow1 td,
tr.ExpGridRow2 td,
table.Grid th,
table.Grid tr.GridHeader td {
background: #f5f5f5;
}
table.Grid th,
table.Grid tr.GridHeader td {
color: black !important;
text-align: left;
}
table.Grid .ajax__calendar_container td {
padding: 0;
margin: 0;
border: none;
}
table.Grid th a,
tr.GridHeader th.NumberStyle,
tr.GridHeader th.PriceStyles {
white-space: nowrap;
}
tr.GridHeader th.NumberStyle,
tr.GridHeader th.PriceStyles,
th.AlignCenter {
text-align: center !important;
}
table.Grid td {
padding: 8px;
background-color: #fff;
border: solid;
border-color: #ddd;
border-width: 0 1px 1px 1px;
}
.Grid.RowGridlinesOnly td {
/* turn off the column grid lines */
border-width: 0 0 1px 0;
}
table.Grid tr.ExpGridAlternateRow td,
table.Grid tr.GridAlternateRow td,
table.Grid tr.tableRowAlt td,
table.Grid tr.GridRowHover:hover td,
table.Grid tr.GridAlternateRowHover:hover td {
background-color: #fafafa;
}
table.Grid th,
table.Grid tr.GridHeader td,
tr.ExpGridHeader th,
tr.ExpGridRow1 td,
tr.ExpGridRow2 table.ExpGrid td {
border-bottom: solid 1px #ddd;
height: 28px !important;
}
table.Grid th,
table.Grid tr.GridHeader td,
tr.ExpGridHeader th,
tr.ExpGridRow1 td,
tr.ExpGridRow2 td {
color: #000;
text-align: left;
padding-left: 7px;
padding-right: 7px;
}
tr.GridHeader th,
tr.GridHeader td {
font-weight: bold;
vertical-align: middle;
}
/* Header row with Code, Segments, 1st Resp, Last Drop, Type, Member Type, Status */
table.ExpGrid tr.ExpGridHeaderSourceCode td,
table.ExpGrid tr.ExpTableRowAlt td {
background-color: #CCC;
height: 28px !important;
}
table.ExpGrid .DisplayCurrency {
width: auto;
padding-left: 10px;
padding-right: 5px;
}
.DeleteImage,
.EditImage {
margin: 1px;
padding: 0;
background-repeat: no-repeat;
background-position: center 50%;
border: 0;
background-color: transparent;
display: block;
cursor: pointer;
}
table.Grid .DisplayCurrency {
width: auto;
padding-left: 5px !important;
padding-right: 5px !important;
}
.NavBullet li {
color: #fe7921;
list-style-type: square;
}
.NavSpan li span {
color: #000000;
}
td.DisplayCurrency {
text-align: right !important;
width: auto;
padding-left: 5px !important;
padding-right: 5px !important;
}
/* = Campaign Management using the expandable grid = */
table.ExpGrid,
table.ExpGrid td,
Table.ExpGrid th {
border-collapse: collapse;
}
table.ExpGrid {
margin: 3px;
border: #898d8f 1px solid !important;
}
/* Cart check out process tables */
.CartGridTable,
span.CartGridTable table.Grid {
width: 375px;
}
.GridPrice,
.GridSelect {
width: 40px;
}
.GridTableTitle {
width: 60%;
}
.rgWrap {
white-space: normal !important;
}
/* IQA tables and layout
========================================================================== */
/* Nested table IQA query filter popup calendar */
table.GridFilterCalendar,
table.GridFilterCalendar td,
table.GridFilterCalendar th {
border-collapse: collapse !important;
margin: 0px !important;
border: 0px !important;
padding: 0px !important;
display: inline-block;
}
.SQLExpression td textarea, textarea.SQLText {
white-space: pre-wrap;
font-family: Consolas, monospace;
font-size: 14px;
min-width: 300px;
}
/* Tables for Available and Selected Properties in IQA */
#SelectedProperty {
min-width: 800px;
}
#CustomProperty {
min-width: 600px;
width: 1024px;
}
#AvailablePropertyPanel {
width: 600px;
}
#AvailablePropertyPanel table {
border-width: 0px;
border-collapse: collapse;
width: 100%;
display: block;
max-height: 400px;
overflow-y: auto;
overscroll-behavior: contain;
}
#AvailablePropertyPanel tr > td {
padding: 8px;
}
table.iqa-filter-condition-box {
display: block;
position: relative;
border: 1px solid #dee2e6;
border-radius: 5px;
margin: 40px 0;
padding: 12px;
}
table.iqa-filter-condition-box > tbody {
display: table;
width: 100%;
}
@media (max-width: 1366px) {
table.iqa-filter-condition-box > tbody > tr > td:first-of-type {
max-width: 125px;
}
}
table.iqa-filter-condition-box tr td {
border: none;
vertical-align: middle;
}
table.iqa-filter-condition-box input[type="text"] {
max-width: 200px;
min-width: 75px;
width: 100%;
}
table.iqa-filter-condition-box .GridFilterCalendar input[type="text"] {
max-width: 95px;
}
table.iqa-filter-condition-box select {
width: auto;
}
table.iqa-filter-condition-box select.property, table.iqa-filter-condition-box select.value-property {
max-width: 200px;
}
table.iqa-filter-condition-box select.value {
max-width: 120px;
}
table.iqa-filter-condition-box tr.GridHeader .sysicon-move-up,
table.iqa-filter-condition-box tr.GridHeader .sysicon-move-down,
table.iqa-filter-condition-box .sysicon-delete {
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #dee2e6;
}
table.iqa-filter-condition-box tr.GridHeader .sysicon-move-up:after,
table.iqa-filter-condition-box tr.GridHeader .sysicon-move-down:after,
table.iqa-filter-condition-box .sysicon-delete:after {
padding: 10px;
}
table.iqa-filter-condition-box tr.GridHeader .sysicon-move-up,
table.iqa-filter-condition-box tr.GridHeader .sysicon-move-down {
width: 30px;
height: 30px;
}
table.iqa-filter-condition-box .sysicon-delete {
width: 40px;
height: 40px;
position: absolute;
top: -20px;
right: -20px;
}
table.iqa-filter-condition-box .radiobutton-buttons {
position: absolute;
top: -30px;
left: 5px;
}
table.iqa-filter-condition-box .radiobutton-buttons input[type="radio"] + label {
font-size: 16px;
padding: 7px 10px;
}
table.iqa-filter-condition-box tr.GridHeader td {
white-space: nowrap;
}
table.iqa-filter-condition-box tr.GridHeader td div {
display: inline-block;
white-space: nowrap;
}
/* Kendo Grid
========================================================================== */
.k-grid.k-grid th, .k-grid.k-grid td {
border-left-width: 0;
}
.k-grid.k-grid td {
border-top-width: 1px;
}
.k-grid.k-grid tr:first-child td {
border-top-width: 0;
}
.k-grid.k-grid tr.k-alt {
background-color: transparent;
}
/* ==========================================================================
LEGACY
========================================================================== */
/* These styles support old functionality such as Marketing suite.
* They should not be used for any new functionality. */
/* Adjusts height for legacy tabs used input areas like Certification*/
.ajax__tab_xp .ajax__tab_tab {
height: 21px !important;
}
/* TitleBar: Header controls used by legacy iParts
========================================================================== */
/* This makes the bottom border on TitleBarCaptions extend all the way to the border of its container */
.ContentBorder .TitleBarCaption {
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
}
/* The title in the TitleBarCaption */
.TitleBarTitle {
float: left;
}
.TitleBarActionBox {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
width: 22px;
height: 22px;
display: inline-block;
background-image: url("../images/titlebaractionbox.gif");
background-repeat: no-repeat;
margin-left: 3px;
vertical-align: middle;
}
/* The option controls on title bar captions */
.InLineOption_Controls, .InLineOption_Controls_Always_Display {
float: right;
}
/* The drop-down button on title bar captions */
.InLineOption_Controls input, .InLineOption_Controls_Always_Display input {
vertical-align: middle;
}
/* .InLineOption <div> used in the top title area of iParts */
.InLineOption .InLineOption_Controls {
display: none;
cursor: pointer;
background-color: #F4F4F4;
}
/* Can be used to enable a hover effect for the .InLineOption <div> used in the top title area of iParts */
.InLineOption:hover .InLineOption_Controls, .InLineOption .InLineOption_Controls_Always_Display {
display: block;
cursor: pointer;
}
/* Headings
========================================================================== */
.mdTitle, #mainTitle {
padding-top: .3em;
font-weight: bold;
}
.mdTitle {
font-size: 130%;
}
#mainTitle {
font-size: 150%;
line-height: 2em;
white-space: nowrap;
}
/* Process Manager/Marketing Suite
========================================================================== */
.StageHeader {
background-color: #f5f5f5;
font-weight: bold;
}
.StageHeader.StageSetup {
cursor: pointer;
border-top: 1px solid #ddd;
}
.StageBlock {
border: 1px solid #ddd;
margin: .5em;
clear: both;
}
.TaskHeading, .TaskBar, .WorkSpace {
padding: 3px;
}
/* Navigation
========================================================================== */
.NavBullet li {
color: #fe7921;
list-style-type: square;
}
.NavSpan li span {
color: #000;
}
/* ==========================================================================
UTILITY CLASSES
========================================================================== */
/* Styling of the iMIS logo (Not currently in use)
.iMIS {}*/
/* ClearFix - place on the container of floating elements to fix alignment
* issues usually solved with a <div style="clear:both"></div>
* For more information on this fix visit http://nicolasgallagher.com/micro-clearfix-hack/
*/
.ClearFix::after,
.PanelHead::after,
.StandardPanel::after,
.PanelBody::after,
.CommandBar::after,
.GridTitlePanel::after,
.ContentTabbedDisplay::after,
.BigButtonWrapper::after,
.ContentItemContainer::after {
display: block;
clear: both;
content: "";
}
/*Used for Website Layouts*/
.clear-right {
clear: right;
}
.clear-left {
clear: left;
}
.clear-none {
clear: none;
}
/* Floating and positioning
========================================================================== */
/* Float a section to the right */
.FloatRight,
.pull-right {
float: right;
}
.PanelField.FloatRight,
.PanelFieldValue.FloatRight {
float: right;
width: auto;
clear: right;
}
/* Float a section to the left */
.FloatLeft,
.pull-left {
float: left;
}
/* Place an element in the top right hand corner of the screen (e.g. the iPart help icon) */
.PositionTopRight {
position: absolute;
right: 0;
margin-right: 2em;
/* needed to give room for the scroll bar */
margin-top: .5em;
}
/* Relatively position an element. Useful if containing an absolutely positioned element. */
.PositionRelative {
position: relative;
}
/* Text
========================================================================== */
/* Hide text visually but allow it to be used by screen reader and tab-only users*/
span + .reButton_text,
.screen-reader-text,
.CaptionTextInvisible .rgCaption,
.sr-only {
position: absolute;
left: -10000px;
z-index: 2000;
font-size: 70%;
}
/* Display the text when focused so tab-only users can use it */
.screen-reader-text.show-on-focus:focus,
.screen-reader-text.show-on-focus:active {
padding: 3px;
left: 3px;
background-color: white;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.text-strikethrough {
text-decoration: line-through !important;
}
.text-decoration-none {
text-decoration: none !important;
}
/* To break words that are too long (eg. email addresses) */
.BreakWord {
-ms-word-break: break-word;
word-break: break-word;
word-break: break-word;
}
.TextTruncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* use to make sure parts of text are never broken */
.NoWrap {
white-space: nowrap;
}
.Wrap {
white-space: normal;
}
/* Used to bold text (Note: not sure if this is a necessary class - you should be able to use <strong> or <b> if it is non-symantic) */
.Significant {
font-weight: bold;
}
/* Reset the font to the normal body font.
* This can be used on labels or headers for example to make them look like normal body text.
*/
.ResetFont {
font-size: 100%;
font-weight: normal;
color: #333333;
}
/* Usually for code blocks you should use the <code> or <pre> elements,
* but sometimes these are not available, such as on a textbox element.
* Use this class to make other elements use a monospace font.
*/
.CodeBlock, .CodeBlock textarea, .CodeBlock input {
font-family: Consolas, Courier New, Courier, monospace;
}
.text-white {
color: #fff !important;
}
.text-muted {
color: #495057 !important;
}
.text-primary {
color: #007ba3 !important;
}
a.text-primary:hover, a.text-primary:focus {
color: #004156 !important;
}
.text-success {
color: #45812f !important;
}
a.text-success:hover, a.text-success:focus {
color: #27491a !important;
}
.text-info {
color: #007ba3 !important;
}
a.text-info:hover, a.text-info:focus {
color: #004156 !important;
}
.text-warning {
color: #bb5000 !important;
}
a.text-warning:hover, a.text-warning:focus {
color: #6f2f00 !important;
}
.text-danger {
color: #d03528 !important;
}
a.text-danger:hover, a.text-danger:focus {
color: #90251c !important;
}
.text-light {
color: #f5f5f5 !important;
}
a.text-light:hover, a.text-light:focus {
color: #cfcfcf !important;
}
.text-dark {
color: #333333 !important;
}
a.text-dark:hover, a.text-dark:focus {
color: #0d0d0d !important;
}
/* Borders
========================================================================== */
/* Used by legacy iParts to display a border. */
/* AR: The ContentBorder class is obsolete. Use the border-0 class along with p-4 instead. */
.ContentBorder {
border: 1px solid #ddd;
padding: 10px;
}
/* AR: The NoBorder class is obsolete. Use border-0 instead. */
.NoBorder {
border: none;
}
.border {
border: 1px solid #ddd !important;
}
.border-top {
border-top: 1px solid #ddd !important;
}
.border-right {
border-right: 1px solid #ddd !important;
}
.border-bottom {
border-bottom: 1px solid #ddd !important;
}
.border-left {
border-left: 1px solid #ddd !important;
}
.border-0 {
border: 0 !important;
}
.border-top-0 {
border-top: 0 !important;
}
.border-right-0 {
border-right: 0 !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.border-left-0 {
border-left: 0 !important;
}
.rounded-circle {
border-radius: 50% !important;
}
/* Alignment
========================================================================== */
/* Used for styling of currency values */
.DisplayCurrency {
text-align: right;
}
/* Align text */
.AlignLeft {
text-align: left;
}
/* Note: AlignCenter is the preferred class to use for centering text*/
.AlignCenter,
.Center,
.CenterText {
text-align: center;
}
.AlignRight {
text-align: right;
}
.VAlignTop {
vertical-align: top;
}
.VAlignMiddle {
vertical-align: middle;
}
.VAlignBottom {
vertical-align: bottom;
}
/* Sizing
========================================================================== */
/*generic width specifiers*/
.FullWidth {
width: 100%;
}
input[type=button].FullWidth {
width: 100%;
}
.FullSize {
width: 100%;
height: 100%;
}
/* AR: These classes shouldn't be necessary anymore. Use grid classes instead. */
.TwoColumns {
width: 50%;
}
.ThreeColumns {
width: 33%;
}
.width-auto {
width: auto;
}
/* Scrolling and overflow
========================================================================== */
/* Scrolling boxes will use vertical scrollbars if over a determined height */
.ScrollBox200, .ScrollBox300, .ScrollBox500 {
overflow: auto;
}
.ScrollBox200 {
max-height: 200px;
}
.ScrollBox300 {
max-height: 300px;
}
.ScrollBox500 {
max-height: 500px;
}
.Scroll,
.StandardPanel .AutoScroll div {
overflow: auto;
}
.ScrollHorizontal {
overflow-x: auto;
}
/* List options
========================================================================== */
.list-unstyled, .list-inline,
.list-unstyled-wrapper ul,
.UnstyledList,
.UnstyledListWrapper ul {
padding-left: 0;
list-style: none;
}
.list-unstyled li, .list-inline li,
.list-unstyled-wrapper ul li,
.UnstyledList li,
.UnstyledListWrapper ul li {
list-style: none;
padding-top: 3px;
padding-bottom: 3px;
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.list-inline > li:first-child {
padding-left: 0;
}
/* Addresses
========================================================================== */
.address-display {
white-space: pre-line;
}
/* Background colors
========================================================================== */
.NeutralShading {
background-color: #f5f5f5;
padding: 10px;
}
.bg-success {
background-color: #45812f !important;
}
a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
background-color: #315b21 !important;
}
.bg-success-light {
background-color: #dff0d8 !important;
}
a.bg-success-light:hover, a.bg-success-light:focus,
button.bg-success-light:hover,
button.bg-success-light:focus {
background-color: #c1e2b3 !important;
}
.bg-info {
background-color: #00a9e0 !important;
}
a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
background-color: #0083ad !important;
}
.bg-info-light {
background-color: #BDE5F8 !important;
}
a.bg-info-light:hover, a.bg-info-light:focus,
button.bg-info-light:hover,
button.bg-info-light:focus {
background-color: #8fd3f3 !important;
}
.bg-warning {
background-color: #e98300 !important;
}
a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
background-color: #b66600 !important;
}
.bg-warning-light {
background-color: #FEEFB3 !important;
}
a.bg-warning-light:hover, a.bg-warning-light:focus,
button.bg-warning-light:hover,
button.bg-warning-light:focus {
background-color: #fde481 !important;
}
.bg-danger {
background-color: #d03528 !important;
}
a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
background-color: #a52a20 !important;
}
.bg-danger-light {
background-color: #ffd8d8 !important;
}
a.bg-danger-light:hover, a.bg-danger-light:focus,
button.bg-danger-light:hover,
button.bg-danger-light:focus {
background-color: #ffa5a5 !important;
}
.bg-light {
background-color: #f5f5f5 !important;
}
a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
background-color: #dcdbdb !important;
}
.bg-dark {
background-color: #333333 !important;
}
a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
background-color: #1a1919 !important;
}
.bg-white {
background-color: #fff !important;
}
a.bg-white:hover, a.bg-white:focus,
button.bg-white:hover,
button.bg-white:focus {
background-color: #e6e5e5 !important;
}
.bg-transparent {
background-color: transparent !important;
}
a.bg-transparent:hover, a.bg-transparent:focus,
button.bg-transparent:hover,
button.bg-transparent:focus {
background-color: rgba(0, 0, 0, 0) !important;
}
/* Spacing (Margin and Padding)
========================================================================== */
/* These helper classes come from Bootstrap 4.2: http://getbootstrap.com/docs/4.2/utilities/spacing/ */
.m-0 {
margin: 0 !important;
}
.mt-0,
.my-0 {
margin-top: 0 !important;
}
.mr-0,
.mx-0 {
margin-right: 0 !important;
}
.mb-0,
.my-0 {
margin-bottom: 0 !important;
}
.ml-0,
.mx-0 {
margin-left: 0 !important;
}
.m-1 {
margin: 0.25rem !important;
}
.mt-1,
.my-1 {
margin-top: 0.25rem !important;
}
.mr-1,
.mx-1 {
margin-right: 0.25rem !important;
}
.mb-1,
.my-1 {
margin-bottom: 0.25rem !important;
}
.ml-1,
.mx-1 {
margin-left: 0.25rem !important;
}
.m-2 {
margin: 0.5rem !important;
}
.mt-2,
.my-2 {
margin-top: 0.5rem !important;
}
.mr-2,
.mx-2 {
margin-right: 0.5rem !important;
}
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important;
}
.ml-2,
.mx-2 {
margin-left: 0.5rem !important;
}
.m-3 {
margin: 1rem !important;
}
.mt-3,
.my-3 {
margin-top: 1rem !important;
}
.mr-3,
.mx-3 {
margin-right: 1rem !important;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
}
.ml-3,
.mx-3 {
margin-left: 1rem !important;
}
.m-4 {
margin: 1.5rem !important;
}
.mt-4,
.my-4 {
margin-top: 1.5rem !important;
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important;
}
.m-5 {
margin: 3rem !important;
}
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.mr-5,
.mx-5 {
margin-right: 3rem !important;
}
.mb-5,
.my-5 {
margin-bottom: 3rem !important;
}
.ml-5,
.mx-5 {
margin-left: 3rem !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0,
.py-0 {
padding-top: 0 !important;
}
.pr-0,
.px-0 {
padding-right: 0 !important;
}
.pb-0,
.py-0 {
padding-bottom: 0 !important;
}
.pl-0,
.px-0 {
padding-left: 0 !important;
}
.p-1 {
padding: 0.25rem !important;
}
.pt-1,
.py-1 {
padding-top: 0.25rem !important;
}
.pr-1,
.px-1 {
padding-right: 0.25rem !important;
}
.pb-1,
.py-1 {
padding-bottom: 0.25rem !important;
}
.pl-1,
.px-1 {
padding-left: 0.25rem !important;
}
.p-2 {
padding: 0.5rem !important;
}
.pt-2,
.py-2 {
padding-top: 0.5rem !important;
}
.pr-2,
.px-2 {
padding-right: 0.5rem !important;
}
.pb-2,
.py-2 {
padding-bottom: 0.5rem !important;
}
.pl-2,
.px-2 {
padding-left: 0.5rem !important;
}
.p-3 {
padding: 1rem !important;
}
.pt-3,
.py-3 {
padding-top: 1rem !important;
}
.pr-3,
.px-3 {
padding-right: 1rem !important;
}
.pb-3,
.py-3 {
padding-bottom: 1rem !important;
}
.pl-3,
.px-3 {
padding-left: 1rem !important;
}
.p-4 {
padding: 1.5rem !important;
}
.pt-4,
.py-4 {
padding-top: 1.5rem !important;
}
.pr-4,
.px-4 {
padding-right: 1.5rem !important;
}
.pb-4,
.py-4 {
padding-bottom: 1.5rem !important;
}
.pl-4,
.px-4 {
padding-left: 1.5rem !important;
}
.p-5 {
padding: 3rem !important;
}
.pt-5,
.py-5 {
padding-top: 3rem !important;
}
.pr-5,
.px-5 {
padding-right: 3rem !important;
}
.pb-5,
.py-5 {
padding-bottom: 3rem !important;
}
.pl-5,
.px-5 {
padding-left: 3rem !important;
}
.m-n1 {
margin: -0.25rem !important;
}
.mt-n1,
.my-n1 {
margin-top: -0.25rem !important;
}
.mr-n1,
.mx-n1 {
margin-right: -0.25rem !important;
}
.mb-n1,
.my-n1 {
margin-bottom: -0.25rem !important;
}
.ml-n1,
.mx-n1 {
margin-left: -0.25rem !important;
}
.m-n2 {
margin: -0.5rem !important;
}
.mt-n2,
.my-n2 {
margin-top: -0.5rem !important;
}
.mr-n2,
.mx-n2 {
margin-right: -0.5rem !important;
}
.mb-n2,
.my-n2 {
margin-bottom: -0.5rem !important;
}
.ml-n2,
.mx-n2 {
margin-left: -0.5rem !important;
}
.m-n3 {
margin: -1rem !important;
}
.mt-n3,
.my-n3 {
margin-top: -1rem !important;
}
.mr-n3,
.mx-n3 {
margin-right: -1rem !important;
}
.mb-n3,
.my-n3 {
margin-bottom: -1rem !important;
}
.ml-n3,
.mx-n3 {
margin-left: -1rem !important;
}
.m-n4 {
margin: -1.5rem !important;
}
.mt-n4,
.my-n4 {
margin-top: -1.5rem !important;
}
.mr-n4,
.mx-n4 {
margin-right: -1.5rem !important;
}
.mb-n4,
.my-n4 {
margin-bottom: -1.5rem !important;
}
.ml-n4,
.mx-n4 {
margin-left: -1.5rem !important;
}
.m-n5 {
margin: -3rem !important;
}
.mt-n5,
.my-n5 {
margin-top: -3rem !important;
}
.mr-n5,
.mx-n5 {
margin-right: -3rem !important;
}
.mb-n5,
.my-n5 {
margin-bottom: -3rem !important;
}
.ml-n5,
.mx-n5 {
margin-left: -3rem !important;
}
.m-auto {
margin: auto !important;
}
.mt-auto,
.my-auto {
margin-top: auto !important;
}
.mr-auto,
.mx-auto {
margin-right: auto !important;
}
.mb-auto,
.my-auto {
margin-bottom: auto !important;
}
.ml-auto,
.mx-auto {
margin-left: auto !important;
}
@media (min-width: 768px) {
.m-sm-0 {
margin: 0 !important;
}
.mt-sm-0,
.my-sm-0 {
margin-top: 0 !important;
}
.mr-sm-0,
.mx-sm-0 {
margin-right: 0 !important;
}
.mb-sm-0,
.my-sm-0 {
margin-bottom: 0 !important;
}
.ml-sm-0,
.mx-sm-0 {
margin-left: 0 !important;
}
.m-sm-1 {
margin: 0.25rem !important;
}
.mt-sm-1,
.my-sm-1 {
margin-top: 0.25rem !important;
}
.mr-sm-1,
.mx-sm-1 {
margin-right: 0.25rem !important;
}
.mb-sm-1,
.my-sm-1 {
margin-bottom: 0.25rem !important;
}
.ml-sm-1,
.mx-sm-1 {
margin-left: 0.25rem !important;
}
.m-sm-2 {
margin: 0.5rem !important;
}
.mt-sm-2,
.my-sm-2 {
margin-top: 0.5rem !important;
}
.mr-sm-2,
.mx-sm-2 {
margin-right: 0.5rem !important;
}
.mb-sm-2,
.my-sm-2 {
margin-bottom: 0.5rem !important;
}
.ml-sm-2,
.mx-sm-2 {
margin-left: 0.5rem !important;
}
.m-sm-3 {
margin: 1rem !important;
}
.mt-sm-3,
.my-sm-3 {
margin-top: 1rem !important;
}
.mr-sm-3,
.mx-sm-3 {
margin-right: 1rem !important;
}
.mb-sm-3,
.my-sm-3 {
margin-bottom: 1rem !important;
}
.ml-sm-3,
.mx-sm-3 {
margin-left: 1rem !important;
}
.m-sm-4 {
margin: 1.5rem !important;
}
.mt-sm-4,
.my-sm-4 {
margin-top: 1.5rem !important;
}
.mr-sm-4,
.mx-sm-4 {
margin-right: 1.5rem !important;
}
.mb-sm-4,
.my-sm-4 {
margin-bottom: 1.5rem !important;
}
.ml-sm-4,
.mx-sm-4 {
margin-left: 1.5rem !important;
}
.m-sm-5 {
margin: 3rem !important;
}
.mt-sm-5,
.my-sm-5 {
margin-top: 3rem !important;
}
.mr-sm-5,
.mx-sm-5 {
margin-right: 3rem !important;
}
.mb-sm-5,
.my-sm-5 {
margin-bottom: 3rem !important;
}
.ml-sm-5,
.mx-sm-5 {
margin-left: 3rem !important;
}
.p-sm-0 {
padding: 0 !important;
}
.pt-sm-0,
.py-sm-0 {
padding-top: 0 !important;
}
.pr-sm-0,
.px-sm-0 {
padding-right: 0 !important;
}
.pb-sm-0,
.py-sm-0 {
padding-bottom: 0 !important;
}
.pl-sm-0,
.px-sm-0 {
padding-left: 0 !important;
}
.p-sm-1 {
padding: 0.25rem !important;
}
.pt-sm-1,
.py-sm-1 {
padding-top: 0.25rem !important;
}
.pr-sm-1,
.px-sm-1 {
padding-right: 0.25rem !important;
}
.pb-sm-1,
.py-sm-1 {
padding-bottom: 0.25rem !important;
}
.pl-sm-1,
.px-sm-1 {
padding-left: 0.25rem !important;
}
.p-sm-2 {
padding: 0.5rem !important;
}
.pt-sm-2,
.py-sm-2 {
padding-top: 0.5rem !important;
}
.pr-sm-2,
.px-sm-2 {
padding-right: 0.5rem !important;
}
.pb-sm-2,
.py-sm-2 {
padding-bottom: 0.5rem !important;
}
.pl-sm-2,
.px-sm-2 {
padding-left: 0.5rem !important;
}
.p-sm-3 {
padding: 1rem !important;
}
.pt-sm-3,
.py-sm-3 {
padding-top: 1rem !important;
}
.pr-sm-3,
.px-sm-3 {
padding-right: 1rem !important;
}
.pb-sm-3,
.py-sm-3 {
padding-bottom: 1rem !important;
}
.pl-sm-3,
.px-sm-3 {
padding-left: 1rem !important;
}
.p-sm-4 {
padding: 1.5rem !important;
}
.pt-sm-4,
.py-sm-4 {
padding-top: 1.5rem !important;
}
.pr-sm-4,
.px-sm-4 {
padding-right: 1.5rem !important;
}
.pb-sm-4,
.py-sm-4 {
padding-bottom: 1.5rem !important;
}
.pl-sm-4,
.px-sm-4 {
padding-left: 1.5rem !important;
}
.p-sm-5 {
padding: 3rem !important;
}
.pt-sm-5,
.py-sm-5 {
padding-top: 3rem !important;
}
.pr-sm-5,
.px-sm-5 {
padding-right: 3rem !important;
}
.pb-sm-5,
.py-sm-5 {
padding-bottom: 3rem !important;
}
.pl-sm-5,
.px-sm-5 {
padding-left: 3rem !important;
}
.m-sm-n1 {
margin: -0.25rem !important;
}
.mt-sm-n1,
.my-sm-n1 {
margin-top: -0.25rem !important;
}
.mr-sm-n1,
.mx-sm-n1 {
margin-right: -0.25rem !important;
}
.mb-sm-n1,
.my-sm-n1 {
margin-bottom: -0.25rem !important;
}
.ml-sm-n1,
.mx-sm-n1 {
margin-left: -0.25rem !important;
}
.m-sm-n2 {
margin: -0.5rem !important;
}
.mt-sm-n2,
.my-sm-n2 {
margin-top: -0.5rem !important;
}
.mr-sm-n2,
.mx-sm-n2 {
margin-right: -0.5rem !important;
}
.mb-sm-n2,
.my-sm-n2 {
margin-bottom: -0.5rem !important;
}
.ml-sm-n2,
.mx-sm-n2 {
margin-left: -0.5rem !important;
}
.m-sm-n3 {
margin: -1rem !important;
}
.mt-sm-n3,
.my-sm-n3 {
margin-top: -1rem !important;
}
.mr-sm-n3,
.mx-sm-n3 {
margin-right: -1rem !important;
}
.mb-sm-n3,
.my-sm-n3 {
margin-bottom: -1rem !important;
}
.ml-sm-n3,
.mx-sm-n3 {
margin-left: -1rem !important;
}
.m-sm-n4 {
margin: -1.5rem !important;
}
.mt-sm-n4,
.my-sm-n4 {
margin-top: -1.5rem !important;
}
.mr-sm-n4,
.mx-sm-n4 {
margin-right: -1.5rem !important;
}
.mb-sm-n4,
.my-sm-n4 {
margin-bottom: -1.5rem !important;
}
.ml-sm-n4,
.mx-sm-n4 {
margin-left: -1.5rem !important;
}
.m-sm-n5 {
margin: -3rem !important;
}
.mt-sm-n5,
.my-sm-n5 {
margin-top: -3rem !important;
}
.mr-sm-n5,
.mx-sm-n5 {
margin-right: -3rem !important;
}
.mb-sm-n5,
.my-sm-n5 {
margin-bottom: -3rem !important;
}
.ml-sm-n5,
.mx-sm-n5 {
margin-left: -3rem !important;
}
.m-sm-auto {
margin: auto !important;
}
.mt-sm-auto,
.my-sm-auto {
margin-top: auto !important;
}
.mr-sm-auto,
.mx-sm-auto {
margin-right: auto !important;
}
.mb-sm-auto,
.my-sm-auto {
margin-bottom: auto !important;
}
.ml-sm-auto,
.mx-sm-auto {
margin-left: auto !important;
}
}
@media (min-width: 992px) {
.m-md-0 {
margin: 0 !important;
}
.mt-md-0,
.my-md-0 {
margin-top: 0 !important;
}
.mr-md-0,
.mx-md-0 {
margin-right: 0 !important;
}
.mb-md-0,
.my-md-0 {
margin-bottom: 0 !important;
}
.ml-md-0,
.mx-md-0 {
margin-left: 0 !important;
}
.m-md-1 {
margin: 0.25rem !important;
}
.mt-md-1,
.my-md-1 {
margin-top: 0.25rem !important;
}
.mr-md-1,
.mx-md-1 {
margin-right: 0.25rem !important;
}
.mb-md-1,
.my-md-1 {
margin-bottom: 0.25rem !important;
}
.ml-md-1,
.mx-md-1 {
margin-left: 0.25rem !important;
}
.m-md-2 {
margin: 0.5rem !important;
}
.mt-md-2,
.my-md-2 {
margin-top: 0.5rem !important;
}
.mr-md-2,
.mx-md-2 {
margin-right: 0.5rem !important;
}
.mb-md-2,
.my-md-2 {
margin-bottom: 0.5rem !important;
}
.ml-md-2,
.mx-md-2 {
margin-left: 0.5rem !important;
}
.m-md-3 {
margin: 1rem !important;
}
.mt-md-3,
.my-md-3 {
margin-top: 1rem !important;
}
.mr-md-3,
.mx-md-3 {
margin-right: 1rem !important;
}
.mb-md-3,
.my-md-3 {
margin-bottom: 1rem !important;
}
.ml-md-3,
.mx-md-3 {
margin-left: 1rem !important;
}
.m-md-4 {
margin: 1.5rem !important;
}
.mt-md-4,
.my-md-4 {
margin-top: 1.5rem !important;
}
.mr-md-4,
.mx-md-4 {
margin-right: 1.5rem !important;
}
.mb-md-4,
.my-md-4 {
margin-bottom: 1.5rem !important;
}
.ml-md-4,
.mx-md-4 {
margin-left: 1.5rem !important;
}
.m-md-5 {
margin: 3rem !important;
}
.mt-md-5,
.my-md-5 {
margin-top: 3rem !important;
}
.mr-md-5,
.mx-md-5 {
margin-right: 3rem !important;
}
.mb-md-5,
.my-md-5 {
margin-bottom: 3rem !important;
}
.ml-md-5,
.mx-md-5 {
margin-left: 3rem !important;
}
.p-md-0 {
padding: 0 !important;
}
.pt-md-0,
.py-md-0 {
padding-top: 0 !important;
}
.pr-md-0,
.px-md-0 {
padding-right: 0 !important;
}
.pb-md-0,
.py-md-0 {
padding-bottom: 0 !important;
}
.pl-md-0,
.px-md-0 {
padding-left: 0 !important;
}
.p-md-1 {
padding: 0.25rem !important;
}
.pt-md-1,
.py-md-1 {
padding-top: 0.25rem !important;
}
.pr-md-1,
.px-md-1 {
padding-right: 0.25rem !important;
}
.pb-md-1,
.py-md-1 {
padding-bottom: 0.25rem !important;
}
.pl-md-1,
.px-md-1 {
padding-left: 0.25rem !important;
}
.p-md-2 {
padding: 0.5rem !important;
}
.pt-md-2,
.py-md-2 {
padding-top: 0.5rem !important;
}
.pr-md-2,
.px-md-2 {
padding-right: 0.5rem !important;
}
.pb-md-2,
.py-md-2 {
padding-bottom: 0.5rem !important;
}
.pl-md-2,
.px-md-2 {
padding-left: 0.5rem !important;
}
.p-md-3 {
padding: 1rem !important;
}
.pt-md-3,
.py-md-3 {
padding-top: 1rem !important;
}
.pr-md-3,
.px-md-3 {
padding-right: 1rem !important;
}
.pb-md-3,
.py-md-3 {
padding-bottom: 1rem !important;
}
.pl-md-3,
.px-md-3 {
padding-left: 1rem !important;
}
.p-md-4 {
padding: 1.5rem !important;
}
.pt-md-4,
.py-md-4 {
padding-top: 1.5rem !important;
}
.pr-md-4,
.px-md-4 {
padding-right: 1.5rem !important;
}
.pb-md-4,
.py-md-4 {
padding-bottom: 1.5rem !important;
}
.pl-md-4,
.px-md-4 {
padding-left: 1.5rem !important;
}
.p-md-5 {
padding: 3rem !important;
}
.pt-md-5,
.py-md-5 {
padding-top: 3rem !important;
}
.pr-md-5,
.px-md-5 {
padding-right: 3rem !important;
}
.pb-md-5,
.py-md-5 {
padding-bottom: 3rem !important;
}
.pl-md-5,
.px-md-5 {
padding-left: 3rem !important;
}
.m-md-n1 {
margin: -0.25rem !important;
}
.mt-md-n1,
.my-md-n1 {
margin-top: -0.25rem !important;
}
.mr-md-n1,
.mx-md-n1 {
margin-right: -0.25rem !important;
}
.mb-md-n1,
.my-md-n1 {
margin-bottom: -0.25rem !important;
}
.ml-md-n1,
.mx-md-n1 {
margin-left: -0.25rem !important;
}
.m-md-n2 {
margin: -0.5rem !important;
}
.mt-md-n2,
.my-md-n2 {
margin-top: -0.5rem !important;
}
.mr-md-n2,
.mx-md-n2 {
margin-right: -0.5rem !important;
}
.mb-md-n2,
.my-md-n2 {
margin-bottom: -0.5rem !important;
}
.ml-md-n2,
.mx-md-n2 {
margin-left: -0.5rem !important;
}
.m-md-n3 {
margin: -1rem !important;
}
.mt-md-n3,
.my-md-n3 {
margin-top: -1rem !important;
}
.mr-md-n3,
.mx-md-n3 {
margin-right: -1rem !important;
}
.mb-md-n3,
.my-md-n3 {
margin-bottom: -1rem !important;
}
.ml-md-n3,
.mx-md-n3 {
margin-left: -1rem !important;
}
.m-md-n4 {
margin: -1.5rem !important;
}
.mt-md-n4,
.my-md-n4 {
margin-top: -1.5rem !important;
}
.mr-md-n4,
.mx-md-n4 {
margin-right: -1.5rem !important;
}
.mb-md-n4,
.my-md-n4 {
margin-bottom: -1.5rem !important;
}
.ml-md-n4,
.mx-md-n4 {
margin-left: -1.5rem !important;
}
.m-md-n5 {
margin: -3rem !important;
}
.mt-md-n5,
.my-md-n5 {
margin-top: -3rem !important;
}
.mr-md-n5,
.mx-md-n5 {
margin-right: -3rem !important;
}
.mb-md-n5,
.my-md-n5 {
margin-bottom: -3rem !important;
}
.ml-md-n5,
.mx-md-n5 {
margin-left: -3rem !important;
}
.m-md-auto {
margin: auto !important;
}
.mt-md-auto,
.my-md-auto {
margin-top: auto !important;
}
.mr-md-auto,
.mx-md-auto {
margin-right: auto !important;
}
.mb-md-auto,
.my-md-auto {
margin-bottom: auto !important;
}
.ml-md-auto,
.mx-md-auto {
margin-left: auto !important;
}
}
@media (min-width: 1200px) {
.m-lg-0 {
margin: 0 !important;
}
.mt-lg-0,
.my-lg-0 {
margin-top: 0 !important;
}
.mr-lg-0,
.mx-lg-0 {
margin-right: 0 !important;
}
.mb-lg-0,
.my-lg-0 {
margin-bottom: 0 !important;
}
.ml-lg-0,
.mx-lg-0 {
margin-left: 0 !important;
}
.m-lg-1 {
margin: 0.25rem !important;
}
.mt-lg-1,
.my-lg-1 {
margin-top: 0.25rem !important;
}
.mr-lg-1,
.mx-lg-1 {
margin-right: 0.25rem !important;
}
.mb-lg-1,
.my-lg-1 {
margin-bottom: 0.25rem !important;
}
.ml-lg-1,
.mx-lg-1 {
margin-left: 0.25rem !important;
}
.m-lg-2 {
margin: 0.5rem !important;
}
.mt-lg-2,
.my-lg-2 {
margin-top: 0.5rem !important;
}
.mr-lg-2,
.mx-lg-2 {
margin-right: 0.5rem !important;
}
.mb-lg-2,
.my-lg-2 {
margin-bottom: 0.5rem !important;
}
.ml-lg-2,
.mx-lg-2 {
margin-left: 0.5rem !important;
}
.m-lg-3 {
margin: 1rem !important;
}
.mt-lg-3,
.my-lg-3 {
margin-top: 1rem !important;
}
.mr-lg-3,
.mx-lg-3 {
margin-right: 1rem !important;
}
.mb-lg-3,
.my-lg-3 {
margin-bottom: 1rem !important;
}
.ml-lg-3,
.mx-lg-3 {
margin-left: 1rem !important;
}
.m-lg-4 {
margin: 1.5rem !important;
}
.mt-lg-4,
.my-lg-4 {
margin-top: 1.5rem !important;
}
.mr-lg-4,
.mx-lg-4 {
margin-right: 1.5rem !important;
}
.mb-lg-4,
.my-lg-4 {
margin-bottom: 1.5rem !important;
}
.ml-lg-4,
.mx-lg-4 {
margin-left: 1.5rem !important;
}
.m-lg-5 {
margin: 3rem !important;
}
.mt-lg-5,
.my-lg-5 {
margin-top: 3rem !important;
}
.mr-lg-5,
.mx-lg-5 {
margin-right: 3rem !important;
}
.mb-lg-5,
.my-lg-5 {
margin-bottom: 3rem !important;
}
.ml-lg-5,
.mx-lg-5 {
margin-left: 3rem !important;
}
.p-lg-0 {
padding: 0 !important;
}
.pt-lg-0,
.py-lg-0 {
padding-top: 0 !important;
}
.pr-lg-0,
.px-lg-0 {
padding-right: 0 !important;
}
.pb-lg-0,
.py-lg-0 {
padding-bottom: 0 !important;
}
.pl-lg-0,
.px-lg-0 {
padding-left: 0 !important;
}
.p-lg-1 {
padding: 0.25rem !important;
}
.pt-lg-1,
.py-lg-1 {
padding-top: 0.25rem !important;
}
.pr-lg-1,
.px-lg-1 {
padding-right: 0.25rem !important;
}
.pb-lg-1,
.py-lg-1 {
padding-bottom: 0.25rem !important;
}
.pl-lg-1,
.px-lg-1 {
padding-left: 0.25rem !important;
}
.p-lg-2 {
padding: 0.5rem !important;
}
.pt-lg-2,
.py-lg-2 {
padding-top: 0.5rem !important;
}
.pr-lg-2,
.px-lg-2 {
padding-right: 0.5rem !important;
}
.pb-lg-2,
.py-lg-2 {
padding-bottom: 0.5rem !important;
}
.pl-lg-2,
.px-lg-2 {
padding-left: 0.5rem !important;
}
.p-lg-3 {
padding: 1rem !important;
}
.pt-lg-3,
.py-lg-3 {
padding-top: 1rem !important;
}
.pr-lg-3,
.px-lg-3 {
padding-right: 1rem !important;
}
.pb-lg-3,
.py-lg-3 {
padding-bottom: 1rem !important;
}
.pl-lg-3,
.px-lg-3 {
padding-left: 1rem !important;
}
.p-lg-4 {
padding: 1.5rem !important;
}
.pt-lg-4,
.py-lg-4 {
padding-top: 1.5rem !important;
}
.pr-lg-4,
.px-lg-4 {
padding-right: 1.5rem !important;
}
.pb-lg-4,
.py-lg-4 {
padding-bottom: 1.5rem !important;
}
.pl-lg-4,
.px-lg-4 {
padding-left: 1.5rem !important;
}
.p-lg-5 {
padding: 3rem !important;
}
.pt-lg-5,
.py-lg-5 {
padding-top: 3rem !important;
}
.pr-lg-5,
.px-lg-5 {
padding-right: 3rem !important;
}
.pb-lg-5,
.py-lg-5 {
padding-bottom: 3rem !important;
}
.pl-lg-5,
.px-lg-5 {
padding-left: 3rem !important;
}
.m-lg-n1 {
margin: -0.25rem !important;
}
.mt-lg-n1,
.my-lg-n1 {
margin-top: -0.25rem !important;
}
.mr-lg-n1,
.mx-lg-n1 {
margin-right: -0.25rem !important;
}
.mb-lg-n1,
.my-lg-n1 {
margin-bottom: -0.25rem !important;
}
.ml-lg-n1,
.mx-lg-n1 {
margin-left: -0.25rem !important;
}
.m-lg-n2 {
margin: -0.5rem !important;
}
.mt-lg-n2,
.my-lg-n2 {
margin-top: -0.5rem !important;
}
.mr-lg-n2,
.mx-lg-n2 {
margin-right: -0.5rem !important;
}
.mb-lg-n2,
.my-lg-n2 {
margin-bottom: -0.5rem !important;
}
.ml-lg-n2,
.mx-lg-n2 {
margin-left: -0.5rem !important;
}
.m-lg-n3 {
margin: -1rem !important;
}
.mt-lg-n3,
.my-lg-n3 {
margin-top: -1rem !important;
}
.mr-lg-n3,
.mx-lg-n3 {
margin-right: -1rem !important;
}
.mb-lg-n3,
.my-lg-n3 {
margin-bottom: -1rem !important;
}
.ml-lg-n3,
.mx-lg-n3 {
margin-left: -1rem !important;
}
.m-lg-n4 {
margin: -1.5rem !important;
}
.mt-lg-n4,
.my-lg-n4 {
margin-top: -1.5rem !important;
}
.mr-lg-n4,
.mx-lg-n4 {
margin-right: -1.5rem !important;
}
.mb-lg-n4,
.my-lg-n4 {
margin-bottom: -1.5rem !important;
}
.ml-lg-n4,
.mx-lg-n4 {
margin-left: -1.5rem !important;
}
.m-lg-n5 {
margin: -3rem !important;
}
.mt-lg-n5,
.my-lg-n5 {
margin-top: -3rem !important;
}
.mr-lg-n5,
.mx-lg-n5 {
margin-right: -3rem !important;
}
.mb-lg-n5,
.my-lg-n5 {
margin-bottom: -3rem !important;
}
.ml-lg-n5,
.mx-lg-n5 {
margin-left: -3rem !important;
}
.m-lg-auto {
margin: auto !important;
}
.mt-lg-auto,
.my-lg-auto {
margin-top: auto !important;
}
.mr-lg-auto,
.mx-lg-auto {
margin-right: auto !important;
}
.mb-lg-auto,
.my-lg-auto {
margin-bottom: auto !important;
}
.ml-lg-auto,
.mx-lg-auto {
margin-left: auto !important;
}
}
@media (min-width: 1400px) {
.m-xl-0 {
margin: 0 !important;
}
.mt-xl-0,
.my-xl-0 {
margin-top: 0 !important;
}
.mr-xl-0,
.mx-xl-0 {
margin-right: 0 !important;
}
.mb-xl-0,
.my-xl-0 {
margin-bottom: 0 !important;
}
.ml-xl-0,
.mx-xl-0 {
margin-left: 0 !important;
}
.m-xl-1 {
margin: 0.25rem !important;
}
.mt-xl-1,
.my-xl-1 {
margin-top: 0.25rem !important;
}
.mr-xl-1,
.mx-xl-1 {
margin-right: 0.25rem !important;
}
.mb-xl-1,
.my-xl-1 {
margin-bottom: 0.25rem !important;
}
.ml-xl-1,
.mx-xl-1 {
margin-left: 0.25rem !important;
}
.m-xl-2 {
margin: 0.5rem !important;
}
.mt-xl-2,
.my-xl-2 {
margin-top: 0.5rem !important;
}
.mr-xl-2,
.mx-xl-2 {
margin-right: 0.5rem !important;
}
.mb-xl-2,
.my-xl-2 {
margin-bottom: 0.5rem !important;
}
.ml-xl-2,
.mx-xl-2 {
margin-left: 0.5rem !important;
}
.m-xl-3 {
margin: 1rem !important;
}
.mt-xl-3,
.my-xl-3 {
margin-top: 1rem !important;
}
.mr-xl-3,
.mx-xl-3 {
margin-right: 1rem !important;
}
.mb-xl-3,
.my-xl-3 {
margin-bottom: 1rem !important;
}
.ml-xl-3,
.mx-xl-3 {
margin-left: 1rem !important;
}
.m-xl-4 {
margin: 1.5rem !important;
}
.mt-xl-4,
.my-xl-4 {
margin-top: 1.5rem !important;
}
.mr-xl-4,
.mx-xl-4 {
margin-right: 1.5rem !important;
}
.mb-xl-4,
.my-xl-4 {
margin-bottom: 1.5rem !important;
}
.ml-xl-4,
.mx-xl-4 {
margin-left: 1.5rem !important;
}
.m-xl-5 {
margin: 3rem !important;
}
.mt-xl-5,
.my-xl-5 {
margin-top: 3rem !important;
}
.mr-xl-5,
.mx-xl-5 {
margin-right: 3rem !important;
}
.mb-xl-5,
.my-xl-5 {
margin-bottom: 3rem !important;
}
.ml-xl-5,
.mx-xl-5 {
margin-left: 3rem !important;
}
.p-xl-0 {
padding: 0 !important;
}
.pt-xl-0,
.py-xl-0 {
padding-top: 0 !important;
}
.pr-xl-0,
.px-xl-0 {
padding-right: 0 !important;
}
.pb-xl-0,
.py-xl-0 {
padding-bottom: 0 !important;
}
.pl-xl-0,
.px-xl-0 {
padding-left: 0 !important;
}
.p-xl-1 {
padding: 0.25rem !important;
}
.pt-xl-1,
.py-xl-1 {
padding-top: 0.25rem !important;
}
.pr-xl-1,
.px-xl-1 {
padding-right: 0.25rem !important;
}
.pb-xl-1,
.py-xl-1 {
padding-bottom: 0.25rem !important;
}
.pl-xl-1,
.px-xl-1 {
padding-left: 0.25rem !important;
}
.p-xl-2 {
padding: 0.5rem !important;
}
.pt-xl-2,
.py-xl-2 {
padding-top: 0.5rem !important;
}
.pr-xl-2,
.px-xl-2 {
padding-right: 0.5rem !important;
}
.pb-xl-2,
.py-xl-2 {
padding-bottom: 0.5rem !important;
}
.pl-xl-2,
.px-xl-2 {
padding-left: 0.5rem !important;
}
.p-xl-3 {
padding: 1rem !important;
}
.pt-xl-3,
.py-xl-3 {
padding-top: 1rem !important;
}
.pr-xl-3,
.px-xl-3 {
padding-right: 1rem !important;
}
.pb-xl-3,
.py-xl-3 {
padding-bottom: 1rem !important;
}
.pl-xl-3,
.px-xl-3 {
padding-left: 1rem !important;
}
.p-xl-4 {
padding: 1.5rem !important;
}
.pt-xl-4,
.py-xl-4 {
padding-top: 1.5rem !important;
}
.pr-xl-4,
.px-xl-4 {
padding-right: 1.5rem !important;
}
.pb-xl-4,
.py-xl-4 {
padding-bottom: 1.5rem !important;
}
.pl-xl-4,
.px-xl-4 {
padding-left: 1.5rem !important;
}
.p-xl-5 {
padding: 3rem !important;
}
.pt-xl-5,
.py-xl-5 {
padding-top: 3rem !important;
}
.pr-xl-5,
.px-xl-5 {
padding-right: 3rem !important;
}
.pb-xl-5,
.py-xl-5 {
padding-bottom: 3rem !important;
}
.pl-xl-5,
.px-xl-5 {
padding-left: 3rem !important;
}
.m-xl-n1 {
margin: -0.25rem !important;
}
.mt-xl-n1,
.my-xl-n1 {
margin-top: -0.25rem !important;
}
.mr-xl-n1,
.mx-xl-n1 {
margin-right: -0.25rem !important;
}
.mb-xl-n1,
.my-xl-n1 {
margin-bottom: -0.25rem !important;
}
.ml-xl-n1,
.mx-xl-n1 {
margin-left: -0.25rem !important;
}
.m-xl-n2 {
margin: -0.5rem !important;
}
.mt-xl-n2,
.my-xl-n2 {
margin-top: -0.5rem !important;
}
.mr-xl-n2,
.mx-xl-n2 {
margin-right: -0.5rem !important;
}
.mb-xl-n2,
.my-xl-n2 {
margin-bottom: -0.5rem !important;
}
.ml-xl-n2,
.mx-xl-n2 {
margin-left: -0.5rem !important;
}
.m-xl-n3 {
margin: -1rem !important;
}
.mt-xl-n3,
.my-xl-n3 {
margin-top: -1rem !important;
}
.mr-xl-n3,
.mx-xl-n3 {
margin-right: -1rem !important;
}
.mb-xl-n3,
.my-xl-n3 {
margin-bottom: -1rem !important;
}
.ml-xl-n3,
.mx-xl-n3 {
margin-left: -1rem !important;
}
.m-xl-n4 {
margin: -1.5rem !important;
}
.mt-xl-n4,
.my-xl-n4 {
margin-top: -1.5rem !important;
}
.mr-xl-n4,
.mx-xl-n4 {
margin-right: -1.5rem !important;
}
.mb-xl-n4,
.my-xl-n4 {
margin-bottom: -1.5rem !important;
}
.ml-xl-n4,
.mx-xl-n4 {
margin-left: -1.5rem !important;
}
.m-xl-n5 {
margin: -3rem !important;
}
.mt-xl-n5,
.my-xl-n5 {
margin-top: -3rem !important;
}
.mr-xl-n5,
.mx-xl-n5 {
margin-right: -3rem !important;
}
.mb-xl-n5,
.my-xl-n5 {
margin-bottom: -3rem !important;
}
.ml-xl-n5,
.mx-xl-n5 {
margin-left: -3rem !important;
}
.m-xl-auto {
margin: auto !important;
}
.mt-xl-auto,
.my-xl-auto {
margin-top: auto !important;
}
.mr-xl-auto,
.mx-xl-auto {
margin-right: auto !important;
}
.mb-xl-auto,
.my-xl-auto {
margin-bottom: auto !important;
}
.ml-xl-auto,
.mx-xl-auto {
margin-left: auto !important;
}
}
/* AR: The directional padding and margin classes below are deprecated. Use "p*-4" or "m*-4" instead */
/* This class visually separates pieces of content */
.Section {
margin-bottom: 1em;
}
.Section::after {
display: block;
clear: both;
content: "";
}
/* Adds some padding - particularly useful when the required indicator is cut off */
.AddPadding {
padding: 10px;
}
.AddPaddingVertical {
padding-top: 10px;
padding-bottom: 10px;
}
.AddPaddingHorizontal {
padding-left: 10px;
padding-right: 10px;
}
.AddPaddingTop {
padding-top: 10px;
}
.AddPaddingBottom {
padding-bottom: 10px;
}
.AddPaddingLeft {
padding-left: 10px;
}
.AddPaddingRight {
padding-right: 10px;
}
.MarginLeft {
margin-left: 1em;
}
.MarginRight {
margin-right: 1em;
}
/* Display
========================================================================== */
/* Used to display elements in a certain way (e.g. block, inline, etc.)
These helper classes come from Bootstrap v4.1: http://getbootstrap.com/docs/4.1/utilities/display/
*/
.d-none {
display: none !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-block {
display: block !important;
}
.d-table {
display: table !important;
}
.d-table-row {
display: table-row !important;
}
.d-table-cell {
display: table-cell !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
@media (min-width: 768px) {
.d-sm-none {
display: none !important;
}
.d-sm-inline {
display: inline !important;
}
.d-sm-inline-block {
display: inline-block !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-table {
display: table !important;
}
.d-sm-table-row {
display: table-row !important;
}
.d-sm-table-cell {
display: table-cell !important;
}
.d-sm-flex {
display: flex !important;
}
.d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 992px) {
.d-md-none {
display: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-block {
display: block !important;
}
.d-md-table {
display: table !important;
}
.d-md-table-row {
display: table-row !important;
}
.d-md-table-cell {
display: table-cell !important;
}
.d-md-flex {
display: flex !important;
}
.d-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
.d-lg-none {
display: none !important;
}
.d-lg-inline {
display: inline !important;
}
.d-lg-inline-block {
display: inline-block !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-table {
display: table !important;
}
.d-lg-table-row {
display: table-row !important;
}
.d-lg-table-cell {
display: table-cell !important;
}
.d-lg-flex {
display: flex !important;
}
.d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1400px) {
.d-xl-none {
display: none !important;
}
.d-xl-inline {
display: inline !important;
}
.d-xl-inline-block {
display: inline-block !important;
}
.d-xl-block {
display: block !important;
}
.d-xl-table {
display: table !important;
}
.d-xl-table-row {
display: table-row !important;
}
.d-xl-table-cell {
display: table-cell !important;
}
.d-xl-flex {
display: flex !important;
}
.d-xl-inline-flex {
display: inline-flex !important;
}
}
/* AR: The DisplayInlineBlock class is deprecated. Use d-inline-block instead. */
.DisplayInlineBlock {
display: inline-block;
}
/* AR: These classes are deprecated. Use d-none instead. */
.DisplayNone,
.hidden {
display: none;
}
/* iPart Classes
========================================================================== */
/* Utility classes to modify the look and feel of certain iParts */
/* Use the iPartChain class along with the appropriate placement class (FirstPart, MiddlePart or LastPart)
to give several stacked iParts a conjoined look. */
.iPartChain.FirstPart > .panel {
border-bottom-width: 0 !important;
}
.iPartChain.FirstPart > .panel > .panel-body {
padding-bottom: 0;
}
.iPartChain.LastPart > .panel {
border-top-width: 0 !important;
}
.iPartChain.LastPart > .panel > .panel-body {
padding-top: 0;
}
.iPartChain.MiddlePart > .panel {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
.iPartChain.MiddlePart > .panel > .panel-body {
padding-top: 0;
padding-bottom: 0;
}
.iPartChain.MiddlePart, .iPartChain.LastPart {
margin-top: -0.9em;
}
.TemplateManagerArea .iPartChain.MiddlePart, .TemplateManagerArea .iPartChain.LastPart {
margin-top: 0;
}
/* Alter the padding of the iPart*/
/* Use the PanelNoPadding class to remove the padding from a panel when it's not needed
Note this class will remove the padding from ALL panels inside the classes.
*/
.PanelNoPadding .panel, .PanelNoPadding.panel, .PanelNoPadding .StandardPanel {
border-width: 0;
}
.PanelNoPadding .panel-heading,
.PanelNoPadding .panel-heading.Distinguish,
.PanelNoPadding .ListSearchPrompt {
padding-left: 0;
padding-right: 0;
}
.PanelNoPadding .panel-body {
padding: 0;
}
/* Remove the left and right padding of an iPart. Does not remove the padding of child panels. */
.iPartNoPadding > .panel > .panel-heading.Distinguish,
.iPartNoPadding > .panel > .panel-body-container > .panel-body,
.iPartNoPaddingHorizontal > .panel > .panel-heading.Distinguish,
.iPartNoPaddingHorizontal > .panel > .panel-body-container > .panel-body {
padding-left: 0;
padding-right: 0;
}
/* Remove the top and bottom padding of an iPart. Does not remove the padding of child panels. */
.iPartNoPadding > .panel > .panel-heading.Distinguish,
.iPartNoPaddingVertial > .panel > .panel-heading.Distinguish {
padding-top: 0;
}
.iPartNoPadding > .panel > .panel-body-container > .panel-body,
.iPartNoPaddingVertial > .panel > .panel-body-container > .panel-body {
padding-top: 0;
padding-bottom: 0;
}
/* Use the class `iPartsDisplayInlineBlock` as a Zone CSS class to make all iParts in the zone display inline-block
This can be used to make iParts display side-by-side instead of stacked.
*/
.iPartsDisplayInlineBlock .ContentItemContainer {
display: inline-block;
}
.iPartsHorizontal > .ContentItemContainer > .WebPartZone {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* Display the iPart title horizontal relative to the content. Note that the body will wrap when it's too large to fit inline */
.iPartTitleHorizontal > .panel {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.iPartTitleHorizontal > .panel .panel-body-container {
flex-grow: 1;
}
/* Other
========================================================================== */
/* Apply padding to the Document specific icon */
.icon {
/* since you can't set width on an inline element, just set enough padding so our background image (the icon) will show */
padding: 3px 7px 3px 7px;
background-position: center;
background-repeat: no-repeat;
}
/* Use a minimal, Mac-like scrollbar for a scrollable area */
.scrollbar-minimal {
scrollbar-width: thin;
}
.scrollbar-minimal ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scrollbar-minimal ::-webkit-scrollbar-track {
background: transparent;
border-radius: 6px;
}
.scrollbar-minimal ::-webkit-scrollbar-thumb {
background: #bebebe;
border-radius: 5px;
}
.scrollbar-minimal ::-webkit-scrollbar-thumb:hover {
background: #999;
}
/* ==========================================================================
FLEX VARIATION
========================================================================== */
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-fill {
flex: 1 1 auto !important;
}
.flex-grow-0 {
flex-grow: 0 !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
.flex-shrink-0 {
flex-shrink: 0 !important;
}
.flex-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.align-content-start {
align-content: flex-start !important;
}
.align-content-end {
align-content: flex-end !important;
}
.align-content-center {
align-content: center !important;
}
.align-content-between {
align-content: space-between !important;
}
.align-content-around {
align-content: space-around !important;
}
.align-content-stretch {
align-content: stretch !important;
}
.align-self-auto {
align-self: auto !important;
}
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.align-self-stretch {
align-self: stretch !important;
}
@media (min-width: 768px) {
.flex-sm-row {
flex-direction: row !important;
}
.flex-sm-column {
flex-direction: column !important;
}
.flex-sm-row-reverse {
flex-direction: row-reverse !important;
}
.flex-sm-column-reverse {
flex-direction: column-reverse !important;
}
.flex-sm-wrap {
flex-wrap: wrap !important;
}
.flex-sm-nowrap {
flex-wrap: nowrap !important;
}
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-sm-fill {
flex: 1 1 auto !important;
}
.flex-sm-grow-0 {
flex-grow: 0 !important;
}
.flex-sm-grow-1 {
flex-grow: 1 !important;
}
.flex-sm-shrink-0 {
flex-shrink: 0 !important;
}
.flex-sm-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-sm-start {
justify-content: flex-start !important;
}
.justify-content-sm-end {
justify-content: flex-end !important;
}
.justify-content-sm-center {
justify-content: center !important;
}
.justify-content-sm-between {
justify-content: space-between !important;
}
.justify-content-sm-around {
justify-content: space-around !important;
}
.align-items-sm-start {
align-items: flex-start !important;
}
.align-items-sm-end {
align-items: flex-end !important;
}
.align-items-sm-center {
align-items: center !important;
}
.align-items-sm-baseline {
align-items: baseline !important;
}
.align-items-sm-stretch {
align-items: stretch !important;
}
.align-content-sm-start {
align-content: flex-start !important;
}
.align-content-sm-end {
align-content: flex-end !important;
}
.align-content-sm-center {
align-content: center !important;
}
.align-content-sm-between {
align-content: space-between !important;
}
.align-content-sm-around {
align-content: space-around !important;
}
.align-content-sm-stretch {
align-content: stretch !important;
}
.align-self-sm-auto {
align-self: auto !important;
}
.align-self-sm-start {
align-self: flex-start !important;
}
.align-self-sm-end {
align-self: flex-end !important;
}
.align-self-sm-center {
align-self: center !important;
}
.align-self-sm-baseline {
align-self: baseline !important;
}
.align-self-sm-stretch {
align-self: stretch !important;
}
}
@media (min-width: 992px) {
.flex-md-row {
flex-direction: row !important;
}
.flex-md-column {
flex-direction: column !important;
}
.flex-md-row-reverse {
flex-direction: row-reverse !important;
}
.flex-md-column-reverse {
flex-direction: column-reverse !important;
}
.flex-md-wrap {
flex-wrap: wrap !important;
}
.flex-md-nowrap {
flex-wrap: nowrap !important;
}
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-md-fill {
flex: 1 1 auto !important;
}
.flex-md-grow-0 {
flex-grow: 0 !important;
}
.flex-md-grow-1 {
flex-grow: 1 !important;
}
.flex-md-shrink-0 {
flex-shrink: 0 !important;
}
.flex-md-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-md-start {
justify-content: flex-start !important;
}
.justify-content-md-end {
justify-content: flex-end !important;
}
.justify-content-md-center {
justify-content: center !important;
}
.justify-content-md-between {
justify-content: space-between !important;
}
.justify-content-md-around {
justify-content: space-around !important;
}
.align-items-md-start {
align-items: flex-start !important;
}
.align-items-md-end {
align-items: flex-end !important;
}
.align-items-md-center {
align-items: center !important;
}
.align-items-md-baseline {
align-items: baseline !important;
}
.align-items-md-stretch {
align-items: stretch !important;
}
.align-content-md-start {
align-content: flex-start !important;
}
.align-content-md-end {
align-content: flex-end !important;
}
.align-content-md-center {
align-content: center !important;
}
.align-content-md-between {
align-content: space-between !important;
}
.align-content-md-around {
align-content: space-around !important;
}
.align-content-md-stretch {
align-content: stretch !important;
}
.align-self-md-auto {
align-self: auto !important;
}
.align-self-md-start {
align-self: flex-start !important;
}
.align-self-md-end {
align-self: flex-end !important;
}
.align-self-md-center {
align-self: center !important;
}
.align-self-md-baseline {
align-self: baseline !important;
}
.align-self-md-stretch {
align-self: stretch !important;
}
}
@media (min-width: 1200px) {
.flex-lg-row {
flex-direction: row !important;
}
.flex-lg-column {
flex-direction: column !important;
}
.flex-lg-row-reverse {
flex-direction: row-reverse !important;
}
.flex-lg-column-reverse {
flex-direction: column-reverse !important;
}
.flex-lg-wrap {
flex-wrap: wrap !important;
}
.flex-lg-nowrap {
flex-wrap: nowrap !important;
}
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-lg-fill {
flex: 1 1 auto !important;
}
.flex-lg-grow-0 {
flex-grow: 0 !important;
}
.flex-lg-grow-1 {
flex-grow: 1 !important;
}
.flex-lg-shrink-0 {
flex-shrink: 0 !important;
}
.flex-lg-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-lg-start {
justify-content: flex-start !important;
}
.justify-content-lg-end {
justify-content: flex-end !important;
}
.justify-content-lg-center {
justify-content: center !important;
}
.justify-content-lg-between {
justify-content: space-between !important;
}
.justify-content-lg-around {
justify-content: space-around !important;
}
.align-items-lg-start {
align-items: flex-start !important;
}
.align-items-lg-end {
align-items: flex-end !important;
}
.align-items-lg-center {
align-items: center !important;
}
.align-items-lg-baseline {
align-items: baseline !important;
}
.align-items-lg-stretch {
align-items: stretch !important;
}
.align-content-lg-start {
align-content: flex-start !important;
}
.align-content-lg-end {
align-content: flex-end !important;
}
.align-content-lg-center {
align-content: center !important;
}
.align-content-lg-between {
align-content: space-between !important;
}
.align-content-lg-around {
align-content: space-around !important;
}
.align-content-lg-stretch {
align-content: stretch !important;
}
.align-self-lg-auto {
align-self: auto !important;
}
.align-self-lg-start {
align-self: flex-start !important;
}
.align-self-lg-end {
align-self: flex-end !important;
}
.align-self-lg-center {
align-self: center !important;
}
.align-self-lg-baseline {
align-self: baseline !important;
}
.align-self-lg-stretch {
align-self: stretch !important;
}
}
@media (min-width: 1400px) {
.flex-xl-row {
flex-direction: row !important;
}
.flex-xl-column {
flex-direction: column !important;
}
.flex-xl-row-reverse {
flex-direction: row-reverse !important;
}
.flex-xl-column-reverse {
flex-direction: column-reverse !important;
}
.flex-xl-wrap {
flex-wrap: wrap !important;
}
.flex-xl-nowrap {
flex-wrap: nowrap !important;
}
.flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-xl-fill {
flex: 1 1 auto !important;
}
.flex-xl-grow-0 {
flex-grow: 0 !important;
}
.flex-xl-grow-1 {
flex-grow: 1 !important;
}
.flex-xl-shrink-0 {
flex-shrink: 0 !important;
}
.flex-xl-shrink-1 {
flex-shrink: 1 !important;
}
.justify-content-xl-start {
justify-content: flex-start !important;
}
.justify-content-xl-end {
justify-content: flex-end !important;
}
.justify-content-xl-center {
justify-content: center !important;
}
.justify-content-xl-between {
justify-content: space-between !important;
}
.justify-content-xl-around {
justify-content: space-around !important;
}
.align-items-xl-start {
align-items: flex-start !important;
}
.align-items-xl-end {
align-items: flex-end !important;
}
.align-items-xl-center {
align-items: center !important;
}
.align-items-xl-baseline {
align-items: baseline !important;
}
.align-items-xl-stretch {
align-items: stretch !important;
}
.align-content-xl-start {
align-content: flex-start !important;
}
.align-content-xl-end {
align-content: flex-end !important;
}
.align-content-xl-center {
align-content: center !important;
}
.align-content-xl-between {
align-content: space-between !important;
}
.align-content-xl-around {
align-content: space-around !important;
}
.align-content-xl-stretch {
align-content: stretch !important;
}
.align-self-xl-auto {
align-self: auto !important;
}
.align-self-xl-start {
align-self: flex-start !important;
}
.align-self-xl-end {
align-self: flex-end !important;
}
.align-self-xl-center {
align-self: center !important;
}
.align-self-xl-baseline {
align-self: baseline !important;
}
.align-self-xl-stretch {
align-self: stretch !important;
}
}
/* ==========================================================================
RESPONSIVE UTILITIES
========================================================================== */
/* From Bootstrap 3.0.2 */
/* Visibility utilities */
.visible-xs,
tr.visible-xs,
th.visible-xs,
td.visible-xs {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-xs.visible-sm {
display: block !important;
}
tr.visible-xs.visible-sm {
display: table-row !important;
}
th.visible-xs.visible-sm,
td.visible-xs.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-xs.visible-md {
display: block !important;
}
tr.visible-xs.visible-md {
display: table-row !important;
}
th.visible-xs.visible-md,
td.visible-xs.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-xs.visible-lg {
display: block !important;
}
tr.visible-xs.visible-lg {
display: table-row !important;
}
th.visible-xs.visible-lg,
td.visible-xs.visible-lg {
display: table-cell !important;
}
}
.visible-sm,
tr.visible-sm,
th.visible-sm,
td.visible-sm {
display: none !important;
}
@media (min-width: 767px) {
.visible-sm.visible-xs {
display: block !important;
}
tr.visible-sm.visible-xs {
display: table-row !important;
}
th.visible-sm.visible-xs,
td.visible-sm.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-sm.visible-md {
display: block !important;
}
tr.visible-sm.visible-md {
display: table-row !important;
}
th.visible-sm.visible-md,
td.visible-sm.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-sm.visible-lg {
display: block !important;
}
tr.visible-sm.visible-lg {
display: table-row !important;
}
th.visible-sm.visible-lg,
td.visible-sm.visible-lg {
display: table-cell !important;
}
}
.visible-md,
tr.visible-md,
th.visible-md,
td.visible-md {
display: none !important;
}
@media (max-width: 767px) {
.visible-md.visible-xs {
display: block !important;
}
tr.visible-md.visible-xs {
display: table-row !important;
}
th.visible-md.visible-xs,
td.visible-md.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-md.visible-sm {
display: block !important;
}
tr.visible-md.visible-sm {
display: table-row !important;
}
th.visible-md.visible-sm,
td.visible-md.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-md.visible-lg {
display: block !important;
}
tr.visible-md.visible-lg {
display: table-row !important;
}
th.visible-md.visible-lg,
td.visible-md.visible-lg {
display: table-cell !important;
}
}
.visible-lg,
tr.visible-lg,
th.visible-lg,
td.visible-lg {
display: none !important;
}
@media (max-width: 767px) {
.visible-lg.visible-xs {
display: block !important;
}
tr.visible-lg.visible-xs {
display: table-row !important;
}
th.visible-lg.visible-xs,
td.visible-lg.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-lg.visible-sm {
display: block !important;
}
tr.visible-lg.visible-sm {
display: table-row !important;
}
th.visible-lg.visible-sm,
td.visible-lg.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-lg.visible-md {
display: block !important;
}
tr.visible-lg.visible-md {
display: table-row !important;
}
th.visible-lg.visible-md,
td.visible-lg.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
.hidden-xs {
display: block !important;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
.hidden-xs-wrapper, .hidden-xs-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-xs.hidden-sm,
tr.hidden-xs.hidden-sm,
th.hidden-xs.hidden-sm,
td.hidden-xs.hidden-sm {
display: none !important;
}
.hidden-xs-wrapper.hidden-sm-wrapper, .hidden-xs-wrapper.hidden-sm-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-xs.hidden-md,
tr.hidden-xs.hidden-md,
th.hidden-xs.hidden-md,
td.hidden-xs.hidden-md {
display: none !important;
}
.hidden-xs-wrapper.hidden-md-wrapper, .hidden-xs-wrapper.hidden-md-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xs.hidden-lg,
tr.hidden-xs.hidden-lg,
th.hidden-xs.hidden-lg,
td.hidden-xs.hidden-lg {
display: none !important;
}
.hidden-xs-wrapper.hidden-lg-warpper, .hidden-xs-wrapper.hidden-lg-warpper + .rtUL {
display: none !important;
}
}
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
.hidden-sm-wrapper.hidden-xs-wrapper, .hidden-sm-wrapper.hidden-xs-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm,
tr.hidden-sm,
th.hidden-sm,
td.hidden-sm {
display: none !important;
}
.hidden-sm-wrapper, .hidden-sm-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-sm.hidden-md,
tr.hidden-sm.hidden-md,
th.hidden-sm.hidden-md,
td.hidden-sm.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-sm.hidden-lg,
tr.hidden-sm.hidden-lg,
th.hidden-sm.hidden-lg,
td.hidden-sm.hidden-lg {
display: none !important;
}
.hidden-lg-wrapper, .hidden-lg-wrapper + .rtUL {
display: none !important;
}
}
.hidden-md {
display: block !important;
}
tr.hidden-md {
display: table-row !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-md.hidden-xs,
tr.hidden-md.hidden-xs,
th.hidden-md.hidden-xs,
td.hidden-md.hidden-xs {
display: none !important;
}
.hidden-md-wrapper.hidden-xs-wrapper, .hidden-md-wrapper.hidden-xs-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-md.hidden-sm,
tr.hidden-md.hidden-sm,
th.hidden-md.hidden-sm,
td.hidden-md.hidden-sm {
display: none !important;
}
.hidden-md-wrapper.hidden-sm-wrapper, .hidden-md-wrapper.hidden-sm-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md,
tr.hidden-md,
th.hidden-md,
td.hidden-md {
display: none !important;
}
.hidden-md-wrapper, .hidden-md-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-md.hidden-lg,
tr.hidden-md.hidden-lg,
th.hidden-md.hidden-lg,
td.hidden-md.hidden-lg {
display: none !important;
}
.hiddne-md-wrapper.hidden-lg-wrapper, .hiddne-md-wrapper.hidden-lg-wrapper + .rtUL {
display: none !important;
}
}
.hidden-lg {
display: block !important;
}
tr.hidden-lg {
display: table-row !important;
}
th.hidden-lg,
td.hidden-lg {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-lg.hidden-xs,
tr.hidden-lg.hidden-xs,
th.hidden-lg.hidden-xs,
td.hidden-lg.hidden-xs {
display: none !important;
}
.hidden-lg-wrapper.hidden-xs-wrapper, .hidden-lg-wrapper.hidden-xs-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-lg.hidden-sm,
tr.hidden-lg.hidden-sm,
th.hidden-lg.hidden-sm,
td.hidden-lg.hidden-sm {
display: none !important;
}
.hidden-lg-wrapper.hidden-sm-wrapper, .hidden-lg-wrapper.hidden-sm-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-lg.hidden-md,
tr.hidden-lg.hidden-md,
th.hidden-lg.hidden-md,
td.hidden-lg.hidden-md {
display: none !important;
}
.hidden-lg-wrapper.hidden-md-wrapper, .hidden-lg-wrapper.hidden-md-wrapper + .rtUL {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg,
tr.hidden-lg,
th.hidden-lg,
td.hidden-lg {
display: none !important;
}
.hidden-lg-wrapper, .hidden-lg-wrapper + .rtUL {
display: none !important;
}
}
/* Print utilities */
.visible-print,
tr.visible-print,
th.visible-print,
td.visible-print {
display: none !important;
}
@media print {
.visible-print {
display: block !important;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print {
display: none !important;
}
}
/* ==========================================================================
STYLE GUIDE
========================================================================== */
.RefPage :not(pre) > code {
padding: 0 2px;
white-space: nowrap;
}
/* Keep the borders and backgrounds consistent */
.RefExample,
.RefExample:before,
.RefCode,
.RefTOC {
border: 1px solid #ddd;
}
.RefExample:before,
.RefTOC,
.RefIconList li,
.RefPage code {
background-color: #f5f2f0;
}
.RefPage .RefExample,
.RefPage table {
background-color: #fff;
}
.RefExample {
padding: 2.3em 1.5em 1.5em;
position: relative;
margin: 15px 0;
}
.RefExample::after {
display: block;
clear: both;
content: "";
}
.RefExample:before {
content: "Example";
position: absolute;
left: -1px;
top: -1px;
padding: 0.15em 0.385em 0.307em;
}
.RefCode {
position: relative;
margin: 0 0 15px 0;
padding: 1.5em !important;
font-size: 13px;
}
.RefExample + .RefCode {
margin-top: -16px;
}
.RefTOC {
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 1.5em;
padding: 0.5em;
}
.RefTOC ul {
margin: 0;
padding: 0;
}
.RefTOC li {
list-style-type: none;
padding: 0.5em;
}
.RefContent {
margin-bottom: 0.5em;
}
.RefContent h2, .RefContent h3 {
margin-top: 1em;
}
.RefIconList {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
/* make up for the negative margin on the items */
padding-left: 1px;
padding-top: 1px;
}
.RefIconList li {
min-height: 7em;
padding: 10px;
text-align: center;
list-style: none;
border: 1px solid #ddd;
margin-left: -1px;
margin-top: -1px;
vertical-align: top;
line-height: 1.2;
}
.RefPage {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
.RefPage {
grid-template: "nav main" auto/15em minmax(0, 1fr);
}
.RefPage .RefTOC {
grid-area: nav;
height: auto;
}
.RefPage .RefContent {
grid-area: main;
}
}
@media (min-width: 768px){
.RefPage .RefTOC {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.RefPage .RefContent {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
}
/* ==========================================================================
UNORGANIZED
========================================================================== */
/* use this area to define styles that need to be organized later */
.ButtonActions {
margin-bottom: -3px;
margin-right: 3px;
}
/* QueryMenu uses these when displaying filters horizontally */
.FilterPanelHorizontal input,
.FilterPanelHorizontal select {
margin: 0 !important;
}
.FilterPanelHorizontal .chosen-container,
.FilterPanelHorizontal input[type="text"],
.FilterPanelHorizontal select {
width: 100% !important;
}
.FilterPanelHorizontal .CalendarInput input[type="text"] {
width: 7em !important;
}
.FilterPanelHorizontal .CalendarInput2 .rdfd_ {
float: inherit !important;
}
/* ==========================================================================
Utility Navigation iPart
========================================================================== */
/* Used in design time edit */
.RadDockItem, .rdPlaceHolder {
margin-left: 3px;
}
.RadDockItem .rdContent {
margin: 0 !important;
}
.RadDockItem .RadDockContent {
padding: 7px;
text-align: center;
}
.RadDockItem .rdTitleWrapper {
display: none !important;
}
/* =========================================================================
CERTIFICATION
=========================================================================
*/
#CertificationProgramDescriptionDiv .reContentCell,
#CertificationProgramDescriptionDiv .RadEditorTextArea,
#CertificationDescriptionDiv .reContentCell,
#CertificationDescriptionDiv .RadEditorTextArea {
height: 100px !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#CertificationProgramDescriptionDiv table,
#CertificationProgramDescriptionDiv textarea,
#CertificationDescriptionDiv table,
#CertificationDescriptionDiv textarea {
height: 100px !important;
width: 30em !important;
max-width: none;
}
#CertificationDescriptionDiv .PanelFieldValue {
padding: 0 !important;
margin: 0 !important;
}
/* ==============================================================================
Modal Background
============================================================================== */
.modalBackground70 {
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
/* ==============================================================================
Redirect rules
============================================================================== */
.ConditionGroup {
padding-left: .5em;
border-left-width: .5em;
border-left-color: #bababa;
border-left-style: solid;
margin-left: .4em;
}
/* ==============================================================================
Site search recent history menu
============================================================================== */
.searchfieldplus-dropdown {
position: relative;
display: inline-block;
}
.searchfieldplus-dropdown-content {
display: none;
position: absolute;
background-color: #fff;
width: auto;
min-width: 330px;
max-width: 600px;
border: 1px solid #ddd;
z-index: 500;
}
/* ==============================================================================
Contact Adder Container Component - originally from asi-ng-libraries/contacts
============================================================================== */
asi-contact-adder-container .floatingAdder {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
min-width: 600px;
left: calc(50% - 350px);
padding: 15px;
position: absolute;
top: calc(50% - 350px);
z-index: 9999900000000000000009999999;
}
asi-contact-adder-container .modalclickblock {
position: fixed;
overflow: auto;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
padding: 0;
margin: 0;
left: 0px;
top: 0px;
}
/* ==========================================================================
For better readability in the HTML tab of the Rad Editor
========================================================================== */
.ContentHtmlEditor textarea.reTextArea, .HtmlEditor textarea.reTextArea {
font-size: 14px;
font-family: monospace;
line-height: 1.5em;
}