/* Minification failed. Returning unminified contents.
(5687,8): run-time error CSS1035: Expected colon, found '{'
(5758,24): run-time error CSS1035: Expected colon, found '.'
(11225,17): run-time error CSS1030: Expected identifier, found '#leftNav'
(11225,31): run-time error CSS1031: Expected selector, found ')'
(11225,31): run-time error CSS1025: Expected comma or open brace, found ')'
(11321,10): run-time error CSS1030: Expected identifier, found '#leftNav'
(11321,24): run-time error CSS1031: Expected selector, found ')'
(11321,24): run-time error CSS1025: Expected comma or open brace, found ')'
(11354,27): run-time error CSS1030: Expected identifier, found '#main'
(11354,37): run-time error CSS1031: Expected selector, found ')'
(11354,37): run-time error CSS1025: Expected comma or open brace, found ')'
(11638,40): run-time error CSS1030: Expected identifier, found '['
(11638,45): run-time error CSS1031: Expected selector, found '='
(11638,45): run-time error CSS1025: Expected comma or open brace, found '='
(11645,40): run-time error CSS1030: Expected identifier, found '['
(11645,45): run-time error CSS1031: Expected selector, found '='
(11645,45): run-time error CSS1025: Expected comma or open brace, found '='
(11651,40): run-time error CSS1030: Expected identifier, found '['
(11651,45): run-time error CSS1031: Expected selector, found '='
(11651,45): run-time error CSS1025: Expected comma or open brace, found '='
(12116,40): run-time error CSS1030: Expected identifier, found '['
(12116,45): run-time error CSS1031: Expected selector, found '='
(12116,45): run-time error CSS1025: Expected comma or open brace, found '='
(12124,40): run-time error CSS1030: Expected identifier, found '['
(12124,45): run-time error CSS1031: Expected selector, found '='
(12124,45): run-time error CSS1025: Expected comma or open brace, found '='
(12129,40): run-time error CSS1030: Expected identifier, found '['
(12129,45): run-time error CSS1031: Expected selector, found '='
(12129,45): run-time error CSS1025: Expected comma or open brace, found '='
(12135,40): run-time error CSS1030: Expected identifier, found '['
(12135,45): run-time error CSS1031: Expected selector, found '='
(12135,45): run-time error CSS1025: Expected comma or open brace, found '='
(12143,40): run-time error CSS1030: Expected identifier, found '['
(12143,45): run-time error CSS1031: Expected selector, found '='
(12143,45): run-time error CSS1025: Expected comma or open brace, found '='
(12164,35): run-time error CSS1030: Expected identifier, found '.'
(12164,42): run-time error CSS1031: Expected selector, found ')'
(12164,42): run-time error CSS1025: Expected comma or open brace, found ')'
(12171,35): run-time error CSS1030: Expected identifier, found '#narrowByPlaceholder'
(12171,68): run-time error CSS1031: Expected selector, found ')'
(12171,68): run-time error CSS1025: Expected comma or open brace, found ')'
(12176,35): run-time error CSS1030: Expected identifier, found '#narrowByPlaceholder'
(12176,62): run-time error CSS1031: Expected selector, found ')'
(12176,62): run-time error CSS1025: Expected comma or open brace, found ')'
(12374,24): run-time error CSS1030: Expected identifier, found '.'
(12374,37): run-time error CSS1031: Expected selector, found ')'
(12374,37): run-time error CSS1025: Expected comma or open brace, found ')'
(12383,45): run-time error CSS1030: Expected identifier, found '.'
(12383,58): run-time error CSS1031: Expected selector, found ')'
(12383,58): run-time error CSS1025: Expected comma or open brace, found ')'
(12397,24): run-time error CSS1030: Expected identifier, found '.'
(12397,36): run-time error CSS1031: Expected selector, found ')'
(12397,36): run-time error CSS1025: Expected comma or open brace, found ')'
(12410,17): run-time error CSS1030: Expected identifier, found '.'
(12410,29): run-time error CSS1031: Expected selector, found ')'
(12410,29): run-time error CSS1025: Expected comma or open brace, found ')'
(13212,19): run-time error CSS1030: Expected identifier, found '.'
(13212,37): run-time error CSS1031: Expected selector, found ')'
(13212,37): run-time error CSS1025: Expected comma or open brace, found ')'
(13220,32): run-time error CSS1030: Expected identifier, found '.'
(13220,50): run-time error CSS1031: Expected selector, found ')'
(13220,50): run-time error CSS1025: Expected comma or open brace, found ')'
 */
@charset "UTF-8";
/*General Styles*/


/*--- Column Percentage Styles ---*/
.dataCol20, .dataCol30, .dataCol40, .dataCol50, .dataCol60, .dataCol70, .dataCol80, .dataCol100 { float: left; overflow: hidden; position: relative; }
.dataCol20 { width: 20%; }
.dataCol30 { width: 30%; }
.dataCol40 { width: 40%; }
.dataCol50 { width: 50%; }
.dataCol60 { width: 60%; }
.dataCol70 { width: 70%; }
.dataCol80 { width: 80%; }
.dataCol100 { width: 100%; }

/*----- End Column Percentage Styles -----*/

.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.floatLeft { float:left; }
.floatRight { float: right; }
.bold { font-weight: bold; }
.italic { font-style: inherit; }
.underline { text-decoration: underline; }

.blue { background: blue; }
.yellow { background: yellow; }
body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a:link,
a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: underline;
}

#bkgContainer {
    margin-right: auto;
    margin-left: auto;
    top: 0px;
    min-height: 700px;
    background-image: url(../images/bkgMain.png);
    background-repeat: no-repeat;
    background-position: center 45px;
    overflow: visible;
}

.navOverview a {
    background: url(../images/navOver.png) no-repeat center top;
}

.navOrders a {
    background: url(../images/navOrder.png) no-repeat center top;
}

.navCommissions a {
    background: url(../images/navComm.png) no-repeat center top;
}

.navFeeds a {
    background: url(../images/navFeed.png) no-repeat center top;
}

.navLeads a {
    background: url(../images/navLead.png) no-repeat center top;
}

.navCustomers a {
    background: url(../images/navCust.png) no-repeat center top;
}

.navOrganization a {
    background: url(../images/navOrg.png) no-repeat center top;
}

.navAutoship a {
    background: url(../images/navAuto.png) no-repeat center top;
}

.navMail a {
    background: url(../images/navMess.png) no-repeat center top;
}

.navShowcase a {
    background: url(../images/navShow.png) no-repeat center top;
}

.navCalendar a {
    background: url(../images/navCal.png) no-repeat center top;
}

.navParty a {
    background: url(../images/navParty.png) no-repeat center top;
}

.navMobile a {
    background: url(../images/navMobile.png) no-repeat center top;
}

.navResources a {
    background: url(../images/navResources.png) no-repeat scroll center top;
}

.navFolder a {
    background: url(../images/navFolder.png) no-repeat scroll center top;
}

.navCoins a {
    background: url(../images/navCoins.png) no-repeat center top;
}

.navEnroll a {
    background: url(../images/navEnroll.png) no-repeat center top;
}

.navNewOrder a {
    background: url(../images/navNewOrder.png) no-repeat center top;
}

.navTraining a {
    background: url(../images/navTraining.png) no-repeat center top;
}

#main {
    background-color: #f7f7f7;
    position: static;
    margin: 0 auto;
    background-image: url(../images/midTopBkg.png);
    background-repeat: repeat-x;
    background-position: top;
}

#mainTop {
    position: relative;
        position: relative;
    display: block;
    text-align: right;
}


#mainTopMid {

}

.welcome {
    float: left;
    color: #545455;
    font-size: 12px;
    margin-left: 5px;
    padding-top: 10px;
}

.repLinks {
    padding: 9px 0 0;
    margin: 0 5px 0 0;
    font-size: 12px;
}

.repLinks li {
    display: inline;
    border-left: 1px solid #000000;
    padding: 0 5px 0 6px;
}

.repLinks li:first-child {
    border: none;
}

.repLinks li a {
    color: #0060A5;
}

#mainTopR {
    background-image: url(../images/topR.png);
    background-repeat: none;
    width: 10px;
    height: 33px;
    float: left;
}

.main2col1 {
    padding: 10px;
    float: left;
    width: 300px;
}


/*----- Dashboard2 -----*/

.dashboard2col1L {
    background: url(../images/dash2Col1BgL.png) repeat-y left top;
    margin: 0;
    padding: 0 0 0 4px;
}

.dashboard2col1R {
    background: url(../images/dash2Col1BgR.png) repeat-y right top;
    margin: 0;
    padding: 0 4px 0 0;
}

.dashboard2col1T,
.dashboard2col1BgT,
.dashboard2col1BgLT,
.dashboard2col1BgRT {
    height: 4px;
}

.dashboard2col1BgT {
    background: url(../images/dash2Col1BgT.png) repeat-x left top;
    margin: 0;
    padding: 0;
}

.dashboard2col1BgLT {
    background: url(../images/dash2Col1BgLT.png) no-repeat left top;
    margin: 0;
    padding: 0 0 0 4px;
}

.dashboard2col1BgRT {
    background: url(../images/dash2Col1BgRT.png) no-repeat right top;
    margin: 0;
    padding: 0 4px 0 0;
}

.dashboard2col1B,
.dashboard2col1BgB,
.dashboard2col1BgLB,
.dashboard2col1BgRB {
    height: 4px;
}

.dashboard2col1BgB {
    background: url(../images/dash2Col1BgB.png) repeat-x left top;
    margin: 0;
    padding: 0;
}

.dashboard2col1BgLB {
    background: url(../images/dash2Col1BgLB.png) no-repeat left top;
    margin: 0;
    padding: 0 0 0 4px;
}

.dashboard2col1BgRB {
    background: url(../images/dash2Col1BgRB.png) no-repeat right top;
    margin: 0;
    padding: 0 4px 0 0;
}

.dashboard2col1 {
    background: #FAF3EA;
    font-size: 12px;
    margin: 0;
    padding: 7px;
    overflow: hidden;
}

.dashboard2col1 p,
.dashboard2col1 h2 {
    color: #545455;
}

.dashRColumnWidget {
    margin-left: -15px;
    margin-right: -15px;
}


/*--- END Dashboard2 ---*/

.main2col2 {
    padding: 10px;
    float: left;
    width: 620px;
}

.panel {
    background-position: 0 top;
    background-repeat: repeat-x;
    background-color: #faf3ea;
    position: static;
    overflow: hidden;
    box-shadow: none;
}

.panelOverflowY {
    background-position: 0 top;
    background-repeat: repeat-x;
    background-color: #faf3ea;
    position: static;
    overflow-x: hidden;
    overflow-y: visible;
    box-shadow: none;
}

.panelHeader {
    padding: 8px;
    border-bottom: 1px solid #dddddd;
}

.panelContentContainer {
    background-image: url(../images/panelR.png);
    background-repeat: repeat-y;
    background-position: right top;
}

.panelContentMain {
    padding-left: 12px;
    font-size: 12px;
    color: #333;
    padding: 0;
}

.panel .btn-container {
    padding: 10px;
}

.main2col1Cont p {
    border-bottom: 1px dotted #222222;
    padding: 5px 0 3px;
}

.main2col1Rank p span {
    position: absolute;
    right: 20px;
}

.main2col1Cont p em {
    color: green;
    font-style: normal;
}

.main2col1Cont p span.options {
    position: absolute;
    right: 10px;
}

.main2col1Cont p span.commisions,
.main2col1Cont p span.growth {
    color: #0E69AA;
    position: absolute;
    right: 20px;
}

.main2col2Cont {}

.main2col2Cont p {
    border-bottom: 1px dotted #222222;
    padding: 5px 0 3px;
}

.main2col2Cont p a {
    color: #0E609A;
}

.main2col2Cont p img {
    position: absolute;
    left: 15px;
}

.main2col2Cont p span {
    margin-left: 27px;
    display: block;
}

.main2col2Cont p.alertWarning {}

.main2col2Cont p.alertFB {
    background: url(../images/icons/iconFb.png) no-repeat left center;
    padding-left: 25px;
}

.main2col2Cont p.alertTwitter {
    background: url(../images/icons/iconTwitter.png) no-repeat left center;
    padding-left: 25px;
}

.main2col2Cont p.alertStar {
    background: url(../images/icons/iconStar.png) no-repeat left center;
    padding-left: 25px;
}

.panelBottom {
    background: url(../images/panelBottomBkg.png) repeat-x top;
    height: 4px;
}

.panelBottomL {
    background: url(../images/panelBottomL.png) no-repeat left top;
}

.panelBottomR {
    background: url(../images/panelBottomR.png) no-repeat right top;
}

.panelBgGradient {
    background-color: #faf3ea;
    background-image: url(../images/panelColorBkg.png);
    background-repeat: repeat-x;
    background-position: top;
}

#homeOrganizationCols {
    text-align: center;
    margin: 0 auto;
    width: 600px;
}

#homeOrganizationCol1 {
    float: left;
    width: 35px;
}

#homeOrganizationCol2 {
    float: left;
    width: 500px;
    max-width: 600px;
    padding: 0 15px;
}

#homeOrganizationCol3 {
    float: right;
    width: 35px;
}

.lArrow,
.rArrow {
    display: block;
    width: 32px;
    height: 32px;
}

.lArrow {
    background: url(../images/icons/arrowLeft.png) no-repeat left top;
}

.rArrow {
    background: url(../images/icons/arrowRight.png) no-repeat left top;
}


/*----- LEFT NAV -----*/

#leftNavTop {
    background: url(../images/leftNavTopShadow.png) repeat-x top;
    float: left;
    margin: 0;
    padding: 0;
    width: 180px;
    height: 4px;
}

#leftNavTopCorner {
    background: url(../images/leftNavCornerShadow.png) no-repeat left top;
    float: right;
    width: 4px;
    height: 4px;
}

#leftNavBot {
    background: url(../images/leftNavBottom.png) no-repeat left bottom;
    width: 180px;
    height: 110px;
}

#leftNav {
    clear: both;
    min-height: 500px;
    margin-top: 35px;
}

#leftNav ul {
    list-style: none;
    width: 176px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#leftNav ul li {
    list-style: none;
    font-size: 12px;
}

#leftNav ul li.selected a {
    background: url(../images/leftNavBgOver.png) repeat-y left transparent;
}

#leftNav ul li a {
    text-align: left;
    background: url(../images/leftNavBg.png) no-repeat left bottom;
    color: #857D74;
    text-decoration: none;
    display: block;
    min-height: 23px;
    margin: 0;
    padding: 6px 0 6px 10px;
    width: 170px;
    line-height: 23px;
}

#leftNav ul li a:hover {
    background: url(../images/leftNavBgOver.png) repeat-y left transparent;
}

#leftNav ul li a.newMail {
    font-weight: bold;
    font-style: italic;
}


/*--- END LEFT NAV ---*/


/*-----SUBNAV-----*/

div#subNav {
    border: 1px solid #cccccc;
    border-radius: 3px;
    margin: 0;
    padding: 0;
}

div#subNav .nav-pills > li > a {
    border-radius: 0;
}

ul#subMenu {
    font-size: 14px;
    list-style: none;
    margin: 0 0 5px;
    padding: 6px 0 12px;
    overflow: auto;
}

ul#subMenu li {
    position: relative;
    z-index: 5;
    margin: 3px 0 3px 10px;
    padding: 3px 10px 2px;
    float: left;
}

ul#subMenu li a {
    color: #0060A5;
    text-decoration: none;
    position: relative;
    z-index: 5;
}

ul#subMenu li.backLava {
    position: absolute;
    z-index: 3;
    background-color: #fcfbfa;
    border: 1px solid #dacfd0;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}


/*---END SUBNAV---*/


/*BUTTON*/

.rightButton {
    float: right;
    margin: 10px 15px 5px 10px;
}

.rightButton a {
    font-size: 11px;
    background: url(../images/button02.png) no-repeat 0 0;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    height: 20px;
}

.rightButton a span {
    background: url(../images/button02.png) no-repeat right -40px;
    padding: 4px 10px 0 0;
    color: #EFEFEF;
    display: block;
    cursor: pointer;
    height: 16px;
}

.rightButton input {
    font-size: 11px;
    background: url(../images/button02.png) no-repeat 0 0;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    height: 20px;
}

.rightButton a:hover {
    background-position: 0 -20px
}

.rightButton a:hover span {
    background-position: right -60px;
}

.rightButtonDisabled {
    float: right;
    margin: 10px 15px 5px 10px;
}

.rightButtonDisabled a {
    font-size: 11px;
    background: url(../images/button02.png) no-repeat 0 0;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    cursor: default !important;
    opacity: .35;
    filter: Alpha(Opacity=35);
    height: 20px;
}

.rightButtonDisabled a span {
    background: url(../images/button02.png) no-repeat right -40px;
    padding: 4px 10px 0 0;
    color: #EFEFEF;
    display: block;
    cursor: default !important;
    height: 16px;
}

.leftButton {
    float: left;
    margin: 10px 10px 5px 0;
}

.leftButton a {
    font-size: 11px;
    background: url(../images/button02.png) no-repeat 0 0;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    height: 20px;
}

.leftButton a span {
    white-space: nowrap;
    background: url(../images/button02.png) no-repeat right -40px;
    padding: 4px 10px 0 0;
    color: #EFEFEF;
    display: block;
    cursor: pointer;
    height: 16px;
}

.leftButton a:hover {
    background-position: 0 -20px
}

.leftButton a:hover span {
    background-position: right -60px;
}

.leftButtonDisabled {
    float: left;
    margin: 10px 10px 5px 0;
}

.leftButtonDisabled a {
    font-size: 11px;
    background: url(../images/button02.png) no-repeat 0 0;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    cursor: default !important;
    opacity: .35;
    filter: Alpha(Opacity=35);
    height: 20px;
}

.leftButtonDisabled a span {
    white-space: nowrap;
    background: url(../images/button02.png) no-repeat right -40px;
    padding: 4px 10px 0 0;
    color: #EFEFEF;
    display: block;
    cursor: default !important;
    height: 16px;
}

.titleButton a {
    background: url(../images/button03.png) no-repeat 0 0;
}

.titleButton a span {
    background: url(../images/button03.png) no-repeat right -40px;
    color: #0060A5;
}

.titleButton a:hover {
    background-position: 0 -20px;
}

.titleButton a:hover span {
    background-position: right -60px;
}

.floatL {
    float: left;
}

.floatR {
    float: right;
}

.clear {
    clear: both;
    margin: 0px;
    padding: 0px;
    height: 1px;
}


/*END BUTTON*/


/*INPUTS*/
.input-with-addon input {
    padding-right: 30px !important;
}

.input-with-addon i {
    position: absolute;
    z-index: 2;
    height: 32px;
    width: 32px;
    transform: translateX(-100%);
    cursor: pointer;
}

.input-with-addon i::before {
    position: absolute;
    transform: translateX(50%) translateY(50%);
}
/*END INPUTS*/


/*----- CONTENT PAGE -----*/

.leftNavCol {
    background: #FAF3EA url(../images/leftNavShadow.png) repeat-y right;
    padding: 0;
    float: left;
    width: 180px;
    margin-right: 15px;
}

.contentCol {
    position: relative;
    width: auto;
    font-size: 12px;
}

@media screen and (min-width: 992px) {
    .leftNavCol.leftNavCol--active + .contentCol {
        width: calc(100% - 200px);
        float: left;
    }
}

#contentColTitle {
    padding-bottom: 5px;
    overflow: visible;
    border-bottom: none;
    position: relative;
}

#contentColTitle h1,
#contentColTitle h2 {
    display: inline-block;
    font-size: 24px;
    color: #999999;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#contentColTitle div.contentColSearch {
    position: absolute;
    right: 25px;
    top: 13px;
}

#contentColTitle div.contentColSearch input {
    background: url(../images/icons/iconView.png) no-repeat 3px 1px #FFFFFF;
    padding: 3px 3px 2px 22px;
    color: #999999;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#contentColTitle div.contentColOptions {
    float: right;
    right: 25px;
    top: 6px;
}

.contentSubTitle {
	background: url(../images/col2TitleBg.jpg) repeat-x top #6077A8;
	overflow: visible;
	border-bottom: none;
	position: relative;
    padding: 5px 20px 5px 20px;
    margin-bottom: 10px;
    margin-top: 5px;
	font-size: 16px;
	color: #fafafa;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.contentColNoLeft {
    float: left;
    width: 960px;
}

.org1col1 {
    position: relative;
    padding: 10px;
    float: left;
    width: 750px;
    max-width: 100%;
}

.org2col1 {
    position: relative;
    padding: 10px;
    float: left;
    width: 274px;
}

.org2col1 .repInfo {
    overflow: hidden;
    margin-bottom: 1em;
}

.org2col2 {
    padding: 10px 0;
    float: left;
    width: 466px;
}

.org2col1 h2 {
    font-size: 24px;
    font-weight: bold;
}

.org2col1 p {
    font-size: 12px;
    overflow: hidden;
    margin-bottom: .35em;
    line-height: 1.3em;
}

@media only screen and (max-width: 450px) {
    .editProfileFormLong p input {
        width: auto !important;
    }
}

.editProfileFormLong p label {
    width: 100%;
}


.contactButton {
    display: inline-block;
}

.contactInfo {
    clear: both;
    position: relative;
}

.contactInfo a {
    color: #2275B1;
}

.contactInfo h3 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333333;
}

.divTable {
    display: table;
    width: 60%;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}

.divTableCell,
.divTableHead {
    display: table-cell;
    padding: 3px 10px;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

.valignTop {
    vertical-align: top;
}

.reportCriteria {
    font-size: 13px;
    font-weight: bold;
    color: #304475;
    margin-bottom: 10px;
    display: inline-block;
}

.reportData {
    margin-top: 10px;
    overflow: auto;
}

.reportDataHeader {
    margin: 10px;
}

.reportHeaderContainer {
    font-size: smaller;
}

.reportSearchFeature {
    margin: 1%;
    float: right;
}

.reportMessageFeature {
    margin: 1%;
    float: left;
}

.reportSearchFeature input {
    margin-top: 5%;
}

.reportSelectAll {
    vertical-align: text-bottom;
    margin-left: 5%;
}

.t-grid  .t-grid-header .t-header .t-link {
    height: auto;
    margin: 0;
}

.exportButtonWrapper {
    float:right; 
    padding: 0 3px 15px 3px;
}

.exportButtonWrapper li.t-item {
    min-height: 27px;
}

@media screen and (max-width: 991px) {
    .exportButtonWrapper {
        float: none;
        width: 100%;
    }
    .exportButtonWrapper li.t-item {
       width: 100%;
       text-align: center;
    }
    .exportButtonWrapper .t-animation-container, 
    .exportButtonWrapper .t-animation-container ul {
        width: 100% !important;
    }

}



/*--- END CONTENT PAGE ---*/


/* MVC validation styles */

.error {
    color: Red;
}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: White;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: white;
    text-decoration: none;
}

.field-validation-error {
    color: #ff0000;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}


/* graph styles */

.btnSubmitSM,
.btnLeftArrow {
    background-image: url(../images/btn-submit.png);
    background-repeat: no-repeat;
    height: 17px;
    width: 18px;
    border: none;
}

.btnLeftArrow {
    background-image: url(../images/btn-submit-leftarrow.png);
}

.graphContainer {
    width: 280px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}


/*----- GRAPHSCROLL LAYOUT -----*/

.graphScroll {
    position: relative;
    text-align: center;
    margin: 15px auto 15px;
    width: 780px;
}

.graphScroll div.graphContainer {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: 780px !important;
}

.graphScroll div div.graphsGraphs {
    position: relative;
    border: 1px solid #999999;
    padding: 10px 5px;
    width: 660px;
    overflow: hidden;
}

.graphScroll div div {
    font-size: 12px;
    float: left;
    overflow: hidden;
}

.graphScroll div.arrows a {
    vertical-align: -110px;
}

.graphScroll div.arrows a img {
    margin: 0 10px
}

.graphScroll img {
    margin: 0 10px;
}


/*--- END GRAPHSCROLL LAYOUT ---*/


/*----- PAGINATION -----*/

.contentPagination {
    line-height: 1.8em;
    padding: 0.2em 0.6em;
}

.paginationPager {
    display: block;
    float: left;
    margin: 5px 10px;
}

.paginationNumeric {
    float: left;
    margin: 0 5px;
    vertical-align: top;
}

.paginationStatusText {
    display: block;
    float: right;
    margin: 5px 10px;
}

.paginationLink {
    margin: 0;
    padding: 1px;
    text-decoration: none;
    cursor: pointer;
    float: left;
}

.paginationNumeric a:hover.paginationLink,
.paginationNumeric .paginationStateActive {
    line-height: 20px;
    padding: 1px 4px;
    vertical-align: top;
    float: left;
}

.paginationNumeric .paginationLink,
.paginationNumeric .paginationStateActive {
    line-height: 22px;
    margin-top: 0;
    padding: 1px 5px;
    vertical-align: top;
}

.paginationNumeric .paginationStateActive {
    line-height: 22px;
    margin-top: 0;
    padding: 0 5px;
    vertical-align: top;
}

a:hover.paginationLink,
.paginationStateActive {
    cursor: pointer;
    background: #A4C2F1 url(../images/gridRowBackgroundSprite.jpg) repeat scroll 0 -47px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
}

.paginationStateActive {
    background: #FFFFFF;
}

.paginationArrows {
    padding: 3px 2px 1px;
    overflow: hidden;
    position: relative;
}

a:hover.paginationArrows {
    padding: 2px 1px;
}

.paginationIcon {
    overflow: hidden;
    background: url(Telerik/Current/Telerik/sprite.png) no-repeat scroll 0 0;
    margin-top: 2px;
    display: block;
    float: left;
    height: 16px;
    width: 16px;
    text-indent: -99999px;
}

.paginationArrowFirst {
    background-position: 0 -192px;
}

.paginationArrowPrev {
    background-position: -16px -192px;
}

.paginationArrowNext {
    background-position: -32px -192px;
}

.paginationArrowLast {
    background-position: -48px -192px;
}

a:hover span.paginationArrowFirst {
    background-position: 0 -224px;
}

a:hover span.paginationArrowPrev {
    background-position: -16px -224px;
}

a:hover span.paginationArrowNext {
    background-position: -32px -224px;
}

a:hover span.paginationArrowLast {
    background-position: -48px -224px;
}

.paginationStateDisabled span.paginationArrowFirst {
    background-position: 0 -208px;
}

.paginationStateDisabled span.paginationArrowPrev {
    background-position: -16px -208px;
}

.paginationStateDisabled span.paginationArrowNext {
    background-position: -32px -208px;
}

.paginationStateDisabled span.paginationArrowLast {
    background-position: -48px -208px;
}


/*--- END PAGINATION ---*/


/*----- GENERAL COLOUR -----*/

.gray {
    color: #999999;
}

.darkgray {
    color: #666666;
}

.lightgray {
    color: #CCCCCC;
}


/*--- END GENERAL COLOUR ---*/

.dotUnderline {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #333;
}

.displayNone {
    display: none;
}


/* used on Contact and Profile for hidden data */

.viewMore {
    padding-left: 10px;
}


/* used when to add padding when graphs are not displayed (non-paid)*/

.noGraphPadding {
    padding-bottom: 10px;
}


/* Footer */

#footer {
    clear: both;
    display: flex;
    margin: 0 auto;
    flex-wrap:wrap;
    background-color: #f7f7f7;
}

#footer::before {
    content: '';
    flex: 1;
}

.footer-language {
    flex: 1;
    padding: 10px 15px 20px;
    text-align: right;
    font-size:14px;
}

.footer-language select#localeID {
    padding: 6px;
    border-radius: 4px;
}

.footer-language .language-label {
    font-weight: 600;
}

.dash-footer {
    max-width: 1200px;
}

.versionLabel {
    flex: 1;
    text-align: center;
    font-size: 10px;
    margin: 10px 0 10px;
    flex-basis: 100%;
    order:99999;
}

.showFalse,
.showfalse {
    display: none;
}

@media screen and (max-width: 767px) {
    #footer::before {
        flex: 0;
    }
}


/* HELPER TEXT */

div#fancy_div {
    background: White !important;
}

div#fancy_div p {
    margin-bottom: 1em;
}

.popUpHelperHeader {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 0.75em;
}


/* Modal Overlay Layout Override */

.TelerikModalOverlay {
    z-index: 5000 !important;
}

.modalBackground {
    background: none;
}

.errorContainer {
    padding-left: 55px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-top: 15px;
    background: url(images/warning.png) 10px 10px no-repeat;
    width: 560px;
    background-color: #fff4a4;
    margin: 30px auto;
    position: relative;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ff8008;
}

.errorContainer h1 {
    color: #ef7c00;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
}

.errorContainer p {
    line-height: 24px;
    font-size: 14px;
}


/* Export Menu Style*/


/* Export Menu Style*/

.exportMenu {
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    padding: 5px 20px 0;
    right: 15px;
    top: 8px;
}

.exportMenuFilter {
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    padding: 8px 20px 0;
}

.exportMenu ul.t-group li.t-item a.t-link {
    color: #000 !important;
    white-space: nowrap;
}

.exportMenu ul.t-group li.t-item span.t-link {
    color: #000 !important;
    white-space: nowrap;
}

.exportMenuFilter ul.t-group li.t-item a.t-link {
    color: #000 !important;
    white-space: nowrap;
}

.exportMenuFilter ul.t-group li.t-item span.t-link {
    color: #000 !important;
    white-space: nowrap;
}

h2.Unused-GiftCertificate-SubTitle {
    font-size: 1.5em;
    margin: 1%;
}

.subTitleContainer {
    padding: 10px;
}

.subTitle {
    font-size: 1.5em;
    margin: 1%;
}

.dark-overlay {
    filter: alpha(opacity=50);
    /* IE */
    opacity: 0.5;
    /* Safari, Opera */
    -moz-opacity: 0.50;
    /* FireFox */
    z-index: 999;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.message-dark-overlay {
    top: 50%;
    position: absolute;
    left: 17%;
    font-size: 1.5em;
    z-index: 30;
}

.tp-li {
    width: 40px !important;
}

.tp-li a {
    background-image: url(../images/topnavsprite.png);
    background-repeat: no-repeat;
    background-position: center top;
    width: 58px;
    height: 58px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.tp-li.orders a {
    background-position: 0 -860px;
}

.tp-li.alerts a {
    background-position: 0 -425px;
}

.tp-li.messages a {
    background-position: 0 -750px
}

.profilemenu {}


/* CSSTerm.com Simple CSS menu */

.tp-menu ul ul {
    padding: 0;
    margin-top: 71px !important;
    background: white;
    width: 185px;
    list-style-type: none;
    float: none !important;
    height: 100px;
    display: none;
}

.tp-menu ul ul li {
    float: none !important;
    height: 20px !important;
    /*width: 50px;*/
}

.tp-menu ul ul li a:hover {
    background: grey;
}

.tp-menu li:hover ul {
    display: block !important;
}

.tp-menu ul ul li a:hover {
    background: grey;
}

.tp-menu li:hover ul {
    display: block !important;
}

.customer-note-icon {
    width: 18pt;
}

.rev-sub-general {
    width: 22%;
    display: inline-block;
    margin-left: 2%;
    font-weight: bold;
}

.rev-sub-card-info {
    display: block;
    float: left;
    width: 210px;
    height: 100px;
    background-color: #e5e5e5;
    margin: 0 2%;
    padding: 1%;
    font-weight: bold;
}

.rev-sub-billing-header {
    margin-left: 1%;
}

.rev-sub-billing {
    width: 15%;
    display: inline-block;
    padding-top: 1%;
    margin-left: 2%;
}

.rev-sub-billing-button {
    width: 10%;
    display: inline-block;
    margin: 2% 2px 0 1%;
}

.rev-sub-cancel-warning {
    margin: 2% 0 2% 3%;
    font-weight: bold;
}

.rev-sub-cancel {
    width: 23%;
    display: inline-block;
    font-weight: bold;
    margin: 1% 0 1% 2%
}

/* LOGIN PAGE */

#loginLogo {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 20px auto;
    height: 71px;
    max-width: 100%;
}

.wrongCredentials {
    padding-top: 10px;
}

#loginMain {
    min-height: 220px;
    position: relative;
    background-repeat: repeat-x;
    background-position: top;
    padding: 0px 15px 10px;
}

#loginMain.lockoutMain,
.lockoutMain {
    min-height: 110px;
    height: auto;
}

#login.lockout {
    padding: 20px;
}

#login.lockout p {
    font-size: 1em;
}

#login label {
    font-size: 14px;
    font-weight: 400;
}

#login input {
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

#login .input-validation-error {
    border: 1px solid red;
}

#login .btn.btn-primary {
    min-width: 120px;
}

#userPass p {
    position: relative;
}

#userPass .field-validation-error {
    position: relative;
    font-size: 12px;
    left: 0px;
    top: 5px;
}

#rememberMe {
    display: block;
    margin: 0;
    color: #3B3F4F;
}

#rememberMe label {
    margin: 0;
    margin-right: 5px;
    display: inline;
    vertical-align: middle;
}

#rememberMe .checkbox {
    display: inline;
    vertical-align: middle;
    width: 15px;
    margin: 1px 50px 0 0;
    padding: 0;
}

#rememberMe input {
    background: none;
}

#forgotPass {
    margin: 0;
    color: #3B3F4F;
    font-size: 13px;
    display: inline-block;
    margin-left: 21px;
    line-height: 0;
}

#RequestPassword {
    padding: 5px;
    border-top: 1px solid #333;
}

#RequestPassword p.instruction {
    text-align: justify;
    font-size: 12px;
    margin-bottom: 10px;
}

#loginIcon {
    float: right;
}

#loginIcon img {
    margin-right: 50px;
    src: url(../images/loginIcon.png);
}

#login .loginButton {
    margin: 10px 50px 0 0;
}

#loginBot {
    background: url(../images/loginBot.png) no-repeat left top;
    height: 8px;
}


/* ERROR PAGE */

#error {
    padding-top: 35px;
    background-color: White;
    overflow: hidden;
}

#errorIcon {
    float: left;
    padding: 10px 15px;
}

#errorMessage {
    margin-left: 75px;
    overflow: hidden;
}

#errorMessage p {
    margin-bottom: 1em;
}

.return2Login {
    font-size: .875em;
}

#errorRef {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 10px;
    margin: 10px 20px;
}

#errorRef p {
    border-bottom: 1px solid #3b4d7b;
}


/* DEFAULT PAGE */

#defaultCont {
    position: relative;
    margin: 25px auto 0 auto;
}

#default {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFF;
    padding: 15px;
    border: solid #FFF 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.defaultHeaderText {
    font-size: 26px;
    color: #333;
}

#defaultInner {
    font-size: 14px;
    color: #555;
    margin-top: 20px;
    line-height: 1.5;
    margin-bottom: 15px;
}

#defaultInner p {
    margin-bottom: 15px;
}

#default a {
    font-size: 1.1em;
    color: #0060a5;
}

#location-select {
    padding: 6px;
    max-width: 200px;
    float: right;
}

#location-select .input-field {
    background: #ffffff;
}
#location-select .input-wrapper-select::before {
    top: 0;
}

@media screen and (max-width: 768px) {
#location-select {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
    float: none;
}
}

@media screen and ( max-width: 768px) {
    #forgotPass {
        display: block;
        text-align: center;
        padding-top: 10px;
    }

    .welcome-login,
    .location-select {
        display: block;
        text-align: center;
    }

    #location-select .form-group .input-wrapper-select {
        margin-bottom: 5px;
    }

    .location-select {
        float: none;
    }

    .location-select select {
        width: 100%; 
        padding: 4px;
        border-radius: 3px;
    }

}
#setupContainer {
	width: 560px;
	margin: 25px auto;
	top: 0px;
	min-height: 700px;
}

#setupLogo {
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	text-align: center;
	margin: 0 auto;
	height: 65px;
	width: 180px;
	position: relative;
}

#setupTop {
	position: relative;
	width: 560px;
	height: 33px;
}

#setupTopL {
	background-image: url(../images/topL.png);
	background-repeat: none;
	width: 10px;
	height: 33px;
	float: left;
}

#setupTopMid {
	background-image: url(../images/topBkg.png);
	background-repeat: repeat-x;
	width: 540px;
	height: 33px;
	float: left;
}

#setupTopMid .welcome {
	float: left;
	color: #545455;
	font-size: 14px;
	margin-left: 5px;
	padding-top: 10px;
}

#setupTopR {
	background-image: url(../images/topR.png);
	background-repeat: none;
	width: 10px;
	height: 33px;
	float: left;
}

#setupMain {
	background-color: #FFF;
	width: 560px;
	min-height: 175px;
	position: relative;
	background-image: url(../images/midTopBkg.png);
	background-repeat: repeat-x;
	background-position: top;
}

#setup {
	padding: 25px 25px 15px 15px;
	background-color: White;
	font-size: 0.9em;
	line-height: 1.2em;
}

.setupContent {
	margin-left: 75px;
}

#setup p {
	margin: .5em 0;
	text-align: justify;
}

.setupContent .textBox {
	width: 250px;
}

.setupHeader {
	position: relative;
}

#setup h2 {
	margin: 20px 10px 5px 0;
	font-size: 1.2em;
	border-bottom: solid 1px #255291;
	color: #255291;
	font-weight: bold;
}

#setup h2.setupHeader {
	margin: 0 0 .5em;
	font-size: 1.8em;
	border: none;
	color: #255291;
}

#setup .setupButton {
	clear: both;
	text-align: left;
	margin: 15px 0;
	width: auto;
}

.setupLater {
	margin-left: 50px;
	font-size: 0.9em;
}

#setupBot {
	background: url(../images/loginBot.png) no-repeat left top;
	width: 560px;
	height: 8px;
}


/* Pop Up */

.setupWhatIsThisMessagesSettings,
.setupWhatIsThisAlertsSettings,
.setupWhatIsThisSmsSettings {
	font-size: .850em;
	line-height: 1.4em;
	position: absolute;
	background: #FFFFFF;
	border: 1px solid #000000;
	width: 250px;
	right: 10px;
	top: 4px;
	padding: 14px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	text-align: justify;
    z-index: 1;
}

.setupWhatIsThisMessagesSettings h3,
.setupWhatIsThisAlertsSettings h3,
.setupWhatIsThisSmsSettings h3 {
	font-size: 16px;
	margin-bottom: .5em;
	font-weight: bold;
}

.WIThidden {
	display: none;
}

.WITclose {
	float: right;
	cursor: pointer;
}


/* End Pop Up */


/*-- SETUP PAID ACCOUNT --*/

.setupPaidWelcome,
.setupPaidCommSettings,
.setupPaidComplete,
.setupPaidSignupPro {
	padding-left: 67px;
	min-height: 64px;
}

.setupPaidWelcome p {
	text-align: justify;
}

.setupPaidCommSettings p {
	text-align: justify;
}

.setupPaidWelcome,
.setupFreeWelcome {
	background: url(../images/icons/setupNewIcon.png) no-repeat left top transparent;
}

.setupPaidCommSettings {
	background: url(../images/icons/setupCommIcon.png) no-repeat left top transparent;
}

.setupPaidComplete {
	background: url(../images/icons/setupComplete.png) no-repeat left top transparent;
}

.setupPaidSignupPro {
	background: url(../images/icons/setupSignup.png) no-repeat left top transparent;
}

.whatIsThis {
	cursor: pointer;
}

.setupBillingInfo {
	overflow: auto;
}

.setupBillingInfo p {
	clear: left;
}

.setup2ColL,
.setup2ColR {
	float: left;
	width: 48%;
}

.setup2ColL {
	clear: left;
}

.shortTextBox {
	width: 100px;
}

.paidCC {
	font-size: 0.8em;
}

.paidCCimg {
	position: relative;
	padding: 0;
    width: 30px;
    margin-top: -5px;
}


/*-- END SETUP PAID ACCOUNT --*/


/*-- SETUP FREE ACCOUNT --*/

.setupFreeWelcome,
.setupFreeMissing {
	padding-left: 75px;
	min-height: 64px;
}

.setupFreeMissing {
	background: url(../images/icons/setupMissing.png) no-repeat left top transparent;
}

#setup p.setupViewMore {
	margin: 0 0 15px;
}

.setupViewMore span {
	color: #0E609A;
	cursor: pointer;
}

.setupViewMore span:hover {
	text-decoration: underline;
}

table.setupComparison {
	border-collapse: collapse;
}

.setupComparison th {
	background: #6077A8;
	color: #FFFFFF;
	text-align: left;
	padding: 3px 6px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2em;
	border: 1px solid #FFF;
}

.setupComparison th + th {
	border-left: 1px solid #FFF;
}

.setupComparison th span {
	font-size: 10px;
}

.setupComparison td {
	padding: 3px 0 3px 30px;
	font-size: 0.9em;
	line-height: 1.2em;
	border-bottom: 1px solid #c2c9db;
	height: 32px;
}

.setupComparison td + td {
	padding: 3px 6px;
	font-size: 0.9em;
	line-height: 1.2em;
	border-left: 1px solid #c2c9db;
}


/*.setupComparison tr.alt { background: #DFDFDF; }*/

.moreFeaturesHidden {
	display: none;
}

.checked {
	background: url(../images/icons/setupCheck.png) no-repeat center;
}

td.pro {
	background: #c2c9db url(../images/icons/setupCheck.png) no-repeat center;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}

.setupFreeDisabled {
	color: #AAAAAA;
}

#setup h2.setupFreeDisabled {
	border-bottom: 1px solid #AAAAAA;
}


/*-- END SETUP FREE ACCOUNT --*/

.iphone {
	background: url(../images/icons/setupChartiPhone.jpg) no-repeat left;
}

.web {
	background: url(../images/icons/setupChartWeb.jpg) no-repeat left;
}

.dash {
	background: url(../images/icons/setupChartDash.jpg) no-repeat left;
}

.mess {
	background: url(../images/icons/setupChartMess.jpg) no-repeat left;
}

.cal {
	background: url(../images/icons/setupChartCal.jpg) no-repeat left;
}

.lead {
	background: url(../images/icons/setupChartLead.jpg) no-repeat left;
}

.org {
	background: url(../images/icons/setupChartOrg.jpg) no-repeat left;
}

.order {
	background: url(../images/icons/setupChartOrder.jpg) no-repeat left;
}

.comm {
	background: url(../images/icons/setupChartComm.jpg) no-repeat left;
}

.show {
	background: url(../images/icons/setupChartShow.jpg) no-repeat left;
}

.feed {
	background: url(../images/icons/setupChartFeed.jpg) no-repeat left;
}

.setupBillingInfo .editProfileAddress p {
	clear: none;
}
#dashboard, #dashboard #main, #content-wrapper #revMainContentContainer, #wrapper #content-wrapper, #wrapper #content-wrapper #content {
    background: #f7f7f7;
}

.freeTextWidget h2 {
    margin-bottom: 3px;
    padding-bottom: 2px;
    font-size: 18px;
    border-bottom: 1px dotted #545455;
}

.genericDataWidget h2 {
    margin-bottom: 3px;
    padding-bottom: 2px;
    font-size: 18px;
    border-bottom: 1px dotted #545455;
}

.birthdayGreetingWidget {
    margin-bottom: 6px;
    padding-bottom: 3px;
    font-size: 18px;
    background-color: white;
    border: 1px solid #000;
}

.birthdayGreetingWidget label {
    font-size: x-small;
    margin-right: 2px;
}

#dashRecentStatistics h2 {
    margin-bottom: 3px;
    padding-bottom: 2px;
    font-size: 18px;
    border-bottom: 1px dotted #545455;
}

#dashLastVisit h2 {
    margin-bottom: 3px;
    padding-bottom: 2px;
    font-size: 18px;
    border-bottom: 1px dotted #545455;
}

#dashLastVisit .lastVisitRow {
    margin: 5px 0 3px;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.lastVisitRow div {
    text-align: left;
}


#dashAddLead h2 {
    margin-bottom: 15px;
    padding-bottom: 2px;
    font-size: 18px;
    border-bottom: 1px dotted #545455;
}

#dashAddLead p {
    margin-bottom: 0.35em;
}

.dashLeadInput {
    display: block;
}

.dashLeadInput input {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 3px 5px;
}

.dashAddLeadInput {
    width: 100%;
}

#dashEvents h2 {
    margin-bottom: 3px;
    padding-bottom: 2px;
    font-size: 18px;
    border-bottom: 1px dotted #545455;
}

#dashEvents ul {
    margin: 0;
    padding: 0;
    clear: both;
}

#dashEvents ul li {
    position: relative;
    margin: 4px 0 6px;
    padding: 8px 0 2px;
    display: block;
    border: 1px solid black;
    border-radius: 3px;
    padding: 10px 20px 10px 15px;
    margin: 12px 0px;
    background: #f5f5f5;
    border: 1px solid #e6e6e6;
}

#dashEvents ul li:hover {
    background: #e8e8e8;
}

#dashEvents .event-title {
    font-size: 14px;
}

#dashEvents .event-date-time {
    font-weight: 500;
    color: black;
}

#dashEvents ul li a {
    text-decoration: none;
}

#dashEvents ul li a:hover {
    text-decoration: none;
}

#dashEvents ul li i {
    font-size: 24px;
}

.dashUpcomingEvents {
    font-weight: bold;
    color: #000;
    position: absolute;
    left: 6px;
    top: 10px;
}

.dashUpcomingEventsDate {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashUpcomingDates {
    margin-top: 2px;
}

.widgetEventsStart {
    font-weight: bold;
}

.widgetEventsEnd {
    font-weight: bold;
    margin-left: 5px;
}

.widgetEventsDesc {
    display: block;
    margin-top: 10px;
}

#WidgetGroupAlerts p {
    border-bottom: 1px dotted #222222;
    padding: 5px 0 3px;
}

#WidgetGroupAlerts p span {
    display: block;
    margin-left: 27px;
}

#WidgetGroupAlerts p img {
    left: 15px;
    position: absolute;
}

#WidgetGroupAlerts p a {
    color: #0E609A;
}


/*== WIDGETS FOR INDIVIDUAL CLIENTS ==*/

#WidgetGroupLeftSide {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    padding: 10px 10px 0;
    width: 40%;
}

#WidgetGroupRightSide {
    display: inline-block;
    vertical-align: top;
    width: 59%;
    padding-bottom: 10px;
}

@media screen and (max-width: 1255px) {
    #WidgetGroupRightSide {
        width: 100%;
    }

    #WidgetGroupLeftSide {
        width: 100%;
    }
}

#WidgetGroupRightSide .dashboard {
    margin-top: 15px;
}

#WidgetGroupLeftSide .dashboard {
    border: none !important;
    padding: 0 7px 7px 7px !important;
    background: #f7f7f7 !important;
}

#WidgetGroupLeftSide .dashboard .dashboardWidget, #WidgetGroupLeftSide .dashboard .widget, #dashDynamicRankQual {
    border: 1px solid #ccc;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#WidgetGroupLeftSide .dashboard .dashboardWidget .collapsable-header, #WidgetGroupLeftSide .dashboard .widget .collapsable-header {
    font-size: 16px;
}

#WidgetGroupLeftSide .dashboard .dashboardWidget .collapsable-header:before, #WidgetGroupLeftSide .dashboard .widget .collapsable-header:before {
    right: 0px; 
    top: 1px;
    font-size: 24px;
}

#WidgetGroupLeftSide .dashboard #dashRep {
    display: flex;
    align-items: center;
    padding: 20px;
}

#WidgetGroupLeftSide .dashboard #dashLastVisit h2 {
    margin-top: 8px;
    margin-bottom: 10px; 
    border-bottom: none; 
    font-weight: 600;
    font-size: 16px;
}

#WidgetGroupLeftSide .dashboard #dashRep p.rep-ID, #WidgetGroupLeftSide .dashboard #dashRep p.rep-rank {
    margin-bottom: 0 !important;
}

#WidgetGroupLeftSide .dashboard #dashRep p.rep-name {
    margin-bottom: 8px !important;
}

#WidgetGroupLeftSide .dashboard #dashRep .profile-image {
    margin-right: 15px;
    width: 75px;
}

#WidgetGroupLeftSide .dashboard #dashRep .rep-info {
}

#WidgetGroupLeftSide .dashboard #dashRep img.repProfileImage {
    border-radius: 50%;
    object-fit: cover;
    width: 75px;
    height: 75px;
}

#WidgetGroupRightSide .dashboard .panel {
    margin-top: 20px;
    clear: both;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#WidgetGroupRightSide #dashGlobalSearch #globalSearch {
    border-radius: 6px;
    box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    margin-bottom: 20px !important;
}

#WidgetGroupLeftSide #dashGlobalSearch #globalSearch {
    float: none !important;
    margin-bottom: 0px !important;
}

#WidgetGroupLeftSide #dashGlobalSearch {
    padding: 0px !important;
}

#dashDivFeedContainer,
#dashDivGraphContainer {
    padding: 15px;
}

.dashDivFeedItems p {
    line-height: 1.4em;
    margin-bottom: 0.5em;
}

.dashDivFeedItems p strong {
    font-size: 1.25em;
    margin-left: 5px;
}

.dashDivFeedItems .iconCol {
    float: left;
    margin: 0 5px 0 0;
}

.dashDivFeedItems .feeds {
    overflow: hidden;
    margin: 0 0 15px;
    border-bottom: 1px dotted #333;
}

.dashDivFeedItems p.feedsAuthor {
    font-size: 1.4em;
    margin: 0;
}

/*----- dashboard -----*/

#WidgetGroupLeftSide .dashboardL {
    background: url(../images/dash2Col1BgL.png) repeat-y left top;
    margin: 0;
    padding: 0 0 0 4px;
}

#WidgetGroupLeftSide .dashboardR {
    background: url(../images/dash2Col1BgR.png) repeat-y right top;
    margin: 0;
    padding: 0 4px 0 0;
}

#WidgetGroupLeftSide .dashboardT,
#WidgetGroupLeftSide .dashboardBgT,
#WidgetGroupLeftSide .dashboardBgLT,
#WidgetGroupLeftSide .dashboardBgRT {
    height: 4px;
}

#WidgetGroupLeftSide .dashboardBgT {
    background: url(../images/dash2Col1BgT.png) repeat-x left top;
    margin: 0;
    padding: 0;
}

#WidgetGroupLeftSide .dashboardBgLT {
    background: url(../images/dash2Col1BgLT.png) no-repeat left top;
    margin: 0;
    padding: 0 0 0 4px;
}

#WidgetGroupLeftSide .dashboardBgRT {
    background: url(../images/dash2Col1BgRT.png) no-repeat right top;
    margin: 0;
    padding: 0 4px 0 0;
}

#WidgetGroupLeftSide .dashboardB,
#WidgetGroupLeftSide .dashboardBgB,
#WidgetGroupLeftSide .dashboardBgLB,
#WidgetGroupLeftSide .dashboardBgRB {
    height: 4px;
}

#WidgetGroupLeftSide .dashboardBgB {
    background: url(../images/dash2Col1BgB.png) repeat-x left top;
    margin: 0;
    padding: 0;
}

#WidgetGroupLeftSide .dashboardBgLB {
    background: url(../images/dash2Col1BgLB.png) no-repeat left top;
    margin: 0;
    padding: 0 0 0 4px;
}

#WidgetGroupLeftSide .dashboardBgRB {
    background: url(../images/dash2Col1BgRB.png) no-repeat right top;
    margin: 0;
    padding: 0 4px 0 0;
}

#WidgetGroupLeftSide .dashboard {
    background: #FAF3EA;
    font-size: 12px;
    margin: 0;
    padding: 7px;
    overflow: hidden;
}

#WidgetGroupLeftSide .dashboard p,
#WidgetGroupLeftSide .dashboard h2 {
    color: #545455;
    clear: left;
}

.dashboard .panel {
    margin: 0;
    box-shadow: none;
}

.dashboard .btn-container {
    padding: 15px 5px;
    text-align: center;
}

.dashRColumnWidget {
    margin-left: -15px;
    margin-right: -15px;
}

#WidgetGroupLeftSide .secondary-title {
    color: #333;
    font-weight: 300;
    font-size: 12px;
}

#WidgetGroupRightSide .secondary-title {
    font-size: 12px;
    margin-left: 8px;
}


/*--- END dashboard ---*/


/*- END WIDGETS FOR INDIVIDUAL CLIENTS -*/

.graphScrollDash {
    position: relative;
    text-align: center;
    margin: 5px 5px 5px 5px;
    width: 570px;
}

.graphScrollDash div.graphContainer {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: 570px !important;
}

.graphScrollDash div div.graphsGraphs {
    position: relative;
    border: 1px solid #999999;
    padding: 10px 5px;
    width: 440px;
    overflow: hidden !important;
}

.graphScrollDash div div {
    font-size: 12px;
    float: left;
    overflow: hidden;
}

.graphScrollDash div.arrows a {
    vertical-align: -110px;
}

.graphScrollDash div.arrows a img {
    margin: 0 10px
}

.graphScrollDash img {
    margin: 0 10px;
}


/*--- DASHBOARD NEWS WIDGET ---*/

#dashDivNewsContainer {
    padding: 10px 0 0;
}

.dashDivNewsItem {
    clear: left;
}

.divNewsItem {
    margin-top: 5px;
    position: relative;
}

.divNewsItemImage {
    position: absolute;
    padding-top: 5px;
    left: 10px;
    width: 57px;
}

.divNewsItemImage img {
    width: 50px;
}

.divNewsItemText {
    margin-left: 75px;
    padding-right: 20px;
}

.divNewsItemText span {
    display: block;
    font-size: 14px;
    line-height: 22px;
}

.divNewsItemText span.spanNewsItemTextHeadline {
    font-size: 16px;
    font-weight: bold;
}

.spanNewsItemTextSummary {}

.spanNewsItemTextLink {}

.dashNewsItemDiv {
    height: 1px;
    background: none;
    margin: 10px 25px;
    border-top: 1px dotted #333;
}


/*- END DASHBOARD NEWS WIDGET -*/


/* DASHBOARD UPGRADE WIDGET */

#WidgetGroupLeftSide #dashboardUpgrade {
    clear: left;
    margin: 15px 0;
}

#WidgetGroupRightSide #dashboardUpgrade {
    display: none;
    visibility: hidden;
}

.dashboardUpgrade img,
.dashboardMobileInstructions img {
    width: 100%;
}


/*- DASHBOARD END UPGRADE WIDGET -*/


/* DASHBOARD RANK PROGRESS WIDGET */

#breakDown td.CompQualSummaryLeft {
    max-width: 180px;
    padding: 0 8px 5px 5px;
}


/*- DASHBOARD RANK PROGRESS WIDGET -*/

td.members-contact-card-col {
    white-space: nowrap;
}
#messageOptions {
	background: url(../images/messageOptionBg.jpg) repeat-x top #6077A8;
	height: 70px;
	overflow: visible;
}

.getMail,
.newMail,
.sendMail,
.saveMail,
.delete,
.reply,
.forward,
.util {
	text-align: center;
	float: left;
	padding: 5px 0 0;
	width: 75px;
	position: relative;
}

.getMail a,
.newMail a,
.sendMail a,
.saveMail a,
.delete a,
.reply a,
.forward a,
.util a {
	display: block;
	background: url(../images/messageButtons.png) no-repeat 0 0;
	width: 52px;
	height: 28px;
	margin: 0 auto;
	padding: 3px;
	text-align: center;
}

#messageOptions div a:hover {
	background-position: 0 -34px;
	text-decoration: none;
}

#messageOptions div a:active {
	background-position: 0 -68px;
	padding: 4px 2px 2px 4px;
}

.getMail a img {
	margin-top: 2px;
}

.newMail a img {
	margin-top: 2px;
}

.delete a img {
	margin-top: 2px;
}

.reply a img {
	margin-top: 1px;
}

.forward a img {
	margin-top: 1px;
}

.sendMail a img {
	margin-top: 1px;
	margin-left: 2px;
}

.saveMail a img {
	margin-top: 1px;
	margin-left: 2px;
}

#messageOptions div span {
	color: #EFEFEF;
	font-size: 12px;
}

#messageOptions div.util {
	overflow: visible;
	position: relative;
	float: right;
	margin-right: 50px;
}

#messageOptions div.util div.messageMore {
	position: absolute;
	top: 25px;
	left: 0px;
	min-width: 85px;
	padding: 0 10px;
	width: auto;
}

#messageOptions div.util div.messageMore ul {
	margin: 0;
	padding: 0;
	text-align: left;
}

#messageOptions div.util div.messageMore li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 11px;
	list-style: none;
}

#messageOptions div.util div.messageMore li a {
	display: block;
	background: none;
	text-align: left;
	margin: 0;
	padding: 3px 5px;
	width: 100%;
	height: auto;
	text-decoration: none;
	color: #333333;
}

#messageOptions div.util div.messageMore li a:hover {
	background: #d8def3;
}

#messageOptions .inactiveMail {
	background: url(../images/messageInactive.png) repeat-x 0 0px;
	height: 60px;
	width: 75px;
	position: absolute;
	left: 0;
	top: 0;
	color: #8495ba;
}

.messageMoreTopLeft {
	display: block;
	height: 14px;
	padding-left: 13px;
	background: url(../images/sTLBg.png) no-repeat left top;
}

.messageMoreTopRight {
	display: block;
	height: 14px;
	width: 100%;
	background: url(../images/sTRrBg.png) no-repeat right top;
	margin: 0;
}

.messageMoreBotLeft {
	display: block;
	height: 14px;
	padding-left: 13px;
	background: url(../images/sBLBg.png) no-repeat left top;
}

.messageMoreBotRight {
	display: block;
	height: 14px;
	width: 100%;
	background: url(../images/sBRrBg.png) no-repeat right top;
	margin: 0;
}

.messageMoreBodyLeft {
	background: url(../images/sLBg.png) repeat-y left;
	margin: 0px;
	padding-left: 4px;
}

.messageMoreBodyRight {
	background: url(../images/sRBg.png) repeat-y right;
	margin: 0px;
	padding-right: 4px;
}

.messageMoreBody {
	background: white;
	width: 100%;
}

#messages {
	margin: 0;
    padding-top: 10px;
}

.messageTable {
	width: 100%;
	border-collapse: collapse;
}

.messageTable th {
	font-size: 12px;
	background: #faf3ea;
	color: #666666;
	padding: 4px 15px;
	;
	text-align: left;
}

.messageTable tbody tr {
	border-bottom: 1px solid #999999;
	padding: 15px;
}

.messageTable td {
	font-size: 12px;
	color: #333333;
	padding: 3px 15px;
}

.messageTable a {
	text-decoration: none;
	color: #38599c;
}


/* override the Telerik styling grid */

.rgMasterTable {
	width: 100% !important;
	border-collapse: collapse !important;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

.rgHeader {
	font-size: 12px !important;
	background: #faf3ea !important;
	color: #666666 !important;
	padding: 4px 15px !important;
	text-align: left !important;
}

.rgRow,
.rgAltRow {
	border-bottom: 1px solid #999999 !important;
	padding: 15px !important;
	background-color: White !important;
}

.rgRow .rgSorted,
.rgAltRow .rgSorted {
	background-color: Transparent !important;
}

.rgRow td,
.rgAltRow td {
	font-size: 12px !important;
	color: #333333 !important;
	padding: 3px 15px !important;
}

.rgPager {
	margin-top: 5px !important;
	padding: 9px 0 0 15px !important;
	background-color: #CED6EB !important;
	height: 20px !important;
	font-size: 12px !important;
}

#pagination {
	margin-top: 5px;
	padding: 9px 0 0 15px;
	background: url(../images/messagePaginationBg.jpg) repeat-x top;
	height: 25px;
	font-size: 12px;
}

#pagination a {
	text-decoration: none;
	margin: 0 5px;
	color: #38599c;
}

.pageSize {
	margin-left: 20px;
}

.pageCount {
	color: #38599c;
	margin-left: 10px;
	padding: 2px 5px;
	border: 1px solid #657cac;
	background: url(../images/pageSizeBg.jpg) repeat-x #8b9dc1 top;
	overflow: visible;
}


/* override the Telerik styling listbox */

#leftNav .rlbGroup ul li.rlbSelected {
	background-image: url(../images/leftNavBgOver.png);
}

#leftNav .rlbGroup ul li.rlbHovered {
	background-image: url(../images/leftNavBgOver.png);
}

#leftNav .rlbGroup ul li {
	text-align: left;
	background: url(../images/leftNavBg.png) no-repeat left top;
	color: #857D74;
	text-decoration: none;
	display: block;
	height: 23px;
	margin: 0;
	padding: 6px 0 0 10px;
	width: 166px;
}

#leftNav .rlbGroup ul li:hover {
	background-image: url(../images/leftNavBgOver.png);
	cursor: pointer;
}

#leftNav .rlbGroup ul li.newMail {
	font-weight: bold;
	font-style: italic;
}


/*.rlbGroup .rlbList ul li.rlbSelected { background-color:pink; background-image: url(../images/leftNavBgOver.png); }
#leftNav ul li a:rlbHovered { background-image: url(../images/leftNavBgOver.png); }


#leftNav ul li.selected a { background-image: url(../images/leftNavBgOver.png); }
#leftNav ul li a {
	text-align: left;
	background: url(../images/leftNavBg.png) no-repeat left top;
	color: #857D74;
	text-decoration: none;
	display: block;
	height: 23px;
	margin: 0;
	padding: 6px 0 0 10px;
	width: 166px;
}
#leftNav ul li a:hover {
	background-image: url(../images/leftNavBgOver.png);
}
#leftNav ul li a.newMail {
	font-weight: bold;
	font-style: italic;
}*/

#messageDetails {
	font-size: 12px;
	padding: 15px 20px;
	height: 500px;
}

#messageDetails p {
	line-height: 1.6em;
}

.messageInfo {
	display: block;
	float: left;
	text-align: right;
	width: 70px;
	margin-right: 10px;
	font-weight: bold;
}

.messageInfoDetail {
	text-align: left;
}

.messageDiv {
	border: none;
	border-bottom: 1px solid #AAAAAA;
	width: 100%;
	margin: 15px auto;
}

#contactList div {
	float: left;
}


#contactList {
	padding-left: 5px;
	margin-bottom: 0px !important;
}

#contactList .contactListLeftColWidth {
	width: 230px !important;
}

#contactList .contactListRightColWidth {
	width: 200px !important;
}

#contactList .contactListDataRowHeight {
	height: 150px !important;
}

#contactList .contactListHeader {
	width: 100%;
	background-color: #faf3ea;
	padding-top: 5px;
	color: #857D74;
	font-weight: bold;
	font-size: 12px;
}

#messages #subject {
	padding-left: 5px;
	font-weight: bold;
	font-size: 12px;
	overflow: hidden;
	margin: 10px 0;
}


/*#messages #subject label { width:10%;}*/

.writeMessageCol {
	position: relative;
}


/*#messages #recipientSelectList { position: absolute; right: 25px; top: 20px; }*/

#messages #recipientSelectList {
    display: inline;
    margin-left: 5px;
}

#messages #recipients {
	overflow: hidden;
	padding-left: 5px;
	font-weight: bold;
	font-size: 12px;
	float: left;
	margin: 5px 0;
}

#messages #recipients #selectedRecipients {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin-top: -2px;
}


/*--Write Message Page--*/

#messages div#contactList {
	margin-bottom: 5px;
}

/*End Write Message Page*/

.messageCol {
	overflow: hidden;
}

.pnlEditDraft a:hover {
	background-position: 0 -34px;
}

.pnlEditDraft a:active {
	background-position: 0 -68px;
	padding: 4px 2px 2px 4px;
}

.newMailIndicator {
	font-weight: bold;
	font-style: italic;
}

.RadWindow.RadWindow_Vista.rwNormalWindow.rwTransparentWindow {
	z-index: 10990 !important;
}


/*  --   PW# 130507      --*/

#messages .recipient i {
	cursor: pointer;
	display: inline-block;
	height: 16px;
	width: 16px;
	position: absolute;
	top: 1px;
	right: 1px;
	font-size: 14px;
	line-height: 16px;
	opacity: 0.7;
}

#messages .recipient i:hover {
	opacity: 1;
}
/*--- FEEDS PAGE ---*/

#feedsList {
    position: relative;
    margin: 0;
    padding: 0;
}


#feedsList li.selected {
    background: url(../images/feedsSelectedBg.jpg) repeat-x top #96a8cc;
}

#feedslist li div {
    overflow: visible;
}


.feedsAuthor {
    font-weight: bold;
}

.feedsDate {
    color: #999;
}

#feedsList p {
    margin-bottom: .5em;
}

.feedsHidden {
    display: none;
}

#feedsNoneToDisplay {
    background: url(../images/icons/iconDelete.png) no-repeat;
    margin: 10px;
    padding: 3px 0 0 33px;
    font-size: 1.6em;
    color: #6077A8;
}

#feedsList span {
    background-repeat: no-repeat;
}

#feedsList .iconCol span {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    top: auto;
}

.facebookPhoto,
.facebookPhotoMessage,
.facebookPhotoContent,
.facebookVideo,
.facebookVideoMessage,
.facebookStatus {
    display: block;
}

.facebookPhotoMessage,
.facebookVideoMessage {
    line-height: 1.6em;
}

.facebookPhotoContent {
    display: block;
}

.facebookPhotoContent a img {
    overflow: hidden;
    padding: 2px;
    border: 1px solid #6A991F;
}

.facebookStatus {
    line-height: 1.4em;
    margin: 5px 0;
}

.facebookPhotoName {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0 0 5px 0;
}

.facebookPhoto .facebookPhotoCaption {
    color: #999999;
}

.facebookActions {
    display: block;
    margin: 1px 0;
}

.FacebookIcon span img,
.FacebookIcon span a {
    margin: 0 5px 0 0;
}

.TwitterBird {
    background: url(https://si0.twimg.com/images/dev/cms/intents/bird/bird_blue/bird_16_blue.png) no-repeat left center transparent;
}

a.TwitterReply,
a.TwitterRetweet,
a.TwitterFavorite {
    margin: 2px 10px 2px 0;
    padding-left: 18px;
}

a.TwitterReply {
    background: url(https://si0.twimg.com/images/dev/cms/intents/icons/reply.png) no-repeat left center transparent;
}

a.TwitterReply:hover {
    background: url(https://si0.twimg.com/images/dev/cms/intents/icons/reply_hover.png) no-repeat left center transparent;
}

a.TwitterRetweet {
    background: url(https://si0.twimg.com/images/dev/cms/intents/icons/retweet.png) no-repeat left center transparent;
}

a.TwitterRetweet:hover {
    background: url(https://si0.twimg.com/images/dev/cms/intents/icons/retweet_hover.png) no-repeat left center transparent;
}

a.TwitterFavorite {
    background: url(https://si0.twimg.com/images/dev/cms/intents/icons/favorite.png) no-repeat left center transparent;
}

a.TwitterFavorite:hover {
    background: url(https://si0.twimg.com/images/dev/cms/intents/icons/favorite_hover.png) no-repeat left center transparent;
}

.personalMessage {
    background-image: url(../images/icons/personalMessage.png);
}

.corpMessage {
    background-image: url(../images/icons/corpMessage.png);
}

.twitterMessage {
    background-image: url(../images/icons/twitterMessage.png);
}

.linkedinMessage {
    background-image: url(../images/icons/linkedinMessage.png);
}

.facebookMessage {
    background-image: url(../images/icons/facebookMessage.png);
}


/*.alertMessage { background-image: url(../images/icons/alertMessage.png); }*/

.feeds-context {
    height: 1px; 
    border: none; 
    color:#CCCCCC;
    background-color:#CCCCCC;
    margin: 8px;
}

.more-content span {
    display: none;
}
.more-link {
    display: inline;
}


.btn-icon {
  border-radius: 50%;
  width: 40px;
  line-height: 42px;
  height: 40px;
  padding: 0;
  text-align: center;
  color: #ffffff;
}

.btn-icon.zmdi {
  display: inline-block;
  margin-right: 8px;
  font-size: 20px;
  box-sizing: border-box;
  padding: 10px;
}

.btn-icon-text > .zmdi {
  font-size: 15px;
  vertical-align: top;
  display: inline-block;
  margin-top: 2px;
  line-height: 100%;
  margin-right: 5px;
}

.btn-block {
  display: block;
  width: 100%;
  padding: 5px;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
/* 
 * Material Background Colors
 */
.bgm-white {
  background-color: #ffffff !important;
}
.c-white {
  color: #ffffff !important;
}
.bgm-black {
  background-color: #000000 !important;
}
.c-black {
  color: #000000 !important;
}
.bgm-brown {
  background-color: #795548 !important;
}
.c-brown {
  color: #795548 !important;
}
.bgm-pink {
  background-color: #E91E63 !important;
}
.c-pink {
  color: #E91E63 !important;
}
.bgm-red {
  background-color: #F44336 !important;
}
.c-red {
  color: #F44336 !important;
}
.bgm-blue {
  background-color: #00789B !important;
}
.c-blue {
  color: #00789B !important;
}
.bgm-purple {
  background-color: #9C27B0 !important;
}
.c-purple {
  color: #9C27B0 !important;
}
.bgm-deeppurple {
  background-color: #673AB7 !important;
}
.c-deeppurple {
  color: #673AB7 !important;
}
.bgm-lightblue {
  background-color: #03A9F4 !important;
}
.c-lightblue {
  color: #03A9F4 !important;
}
.bgm-cyan {
  background-color: #00BCD4 !important;
}
.c-cyan {
  color: #00BCD4 !important;
}
.bgm-teal {
  background-color: #009688 !important;
}
.c-teal {
  color: #009688 !important;
}
.bgm-green {
  background-color: #4CAF50 !important;
}
.c-green {
  color: #4CAF50 !important;
}
.bgm-lightgreen {
  background-color: #8BC34A !important;
}
.c-lightgreen {
  color: #8BC34A !important;
}
.bgm-lime {
  background-color: #CDDC39 !important;
}
.c-lime {
  color: #CDDC39 !important;
}
.bgm-yellow {
  background-color: #FFEB3B !important;
}
.c-yellow {
  color: #FFEB3B !important;
}
.bgm-amber {
  background-color: #FFC107 !important;
}
.c-amber {
  color: #FFC107 !important;
}
.bgm-orange {
  background-color: #FF9800 !important;
}
.c-orange {
  color: #FF9800 !important;
}
.bgm-deeporange {
  background-color: #FF5722 !important;
}
.c-deeporange {
  color: #FF5722 !important;
}
.bgm-gray {
  background-color: #9E9E9E !important;
}
.c-gray {
  color: #9E9E9E !important;
}
.bgm-bluegray {
  background-color: #607D8B !important;
}
.c-bluegray {
  color: #607D8B !important;
}
.bgm-indigo {
  background-color: #3F51B5 !important;
}
.c-indigo {
  color: #3F51B5 !important;
}

.recognitionMessage {
    background-image: url(../images/icons/recognitionMessage.png);
}

.customerMessage {
    background-image: url(../images/icons/customerMessage.png);
}

/*- END FEEDS PAGE -*/


/*--- NEWS PAGE ---*/

.newsColLeft {
    position: relative;
    width: 500px;
    padding: 10px;
    padding-right: 20px;
    float: left;
}

.newsColRight {
    width: 250px;
    padding: 10px 0;
    float: right;
    position: relative;
}

.newsHorDiv {
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}

.newsTopStory {
    position: relative;
    font-size: 14px;
    color: #222222;
    overflow: hidden;
}

.newsTopStory .newsTopStoryImage {
    width: 180px;
    float: left;
    margin: 5px 10px 0 0;
}

.newsTopStory .newsTopStoryImage img {
    width: 180px;
}

.newsTopStory .newsTopStoryHeadline {
    font-size: 24px;
    color: #31436b;
    margin: 5px 0 0 0;
}

.newsTopStory .newsTopStoryDate {
    margin: 0 0 1em;
}

.newsTopStory .newsTopStorySummary {
    line-height: 1.3em;
}

.newsTopStory .newsTopStoryLink {
    color: #0E609A;
    margin-top: .5em;
}

.newsNoNews h3 {
    font-size: 18px;
    color: #31436b;
    margin: 0 0 10px 5px;
}

.newsLatestContainer {
    color: #222222;
    overflow: hidden;
}

.newsLatestContainer h3 {
    font-size: 18px;
    color: #31436b;
    margin: 0 0 10px 5px;
}

.newsLatestContainer h3 span {}

.newsLatest {
    float: left;
    width: 156px;
    padding: 5px;
}

.newsLatest .newsLatestHeader {}

.newsLatest .newsLatestImage {
    float: left;
    width: 50px;
    overflow: hidden;
    margin: 2px 2px 0 0;
}

.newsLatest .newsLatestImage img {
    float: left;
    width: 48px;
    max-height: 48px;
}

.newsLatest .newsLatestHeadline {
    font-size: 13px;
    color: #31436b;
}

.newsLatest .newsLatestDate {
    font-size: 10px;
}

.newsLatest .newsLatestSummary {
    clear: both;
    line-height: 1.3em;
    padding-top: 5px;
    word-wrap: break-word;
}

.newsLatest .newsLatestLink {
    color: #0E609A;
    margin-top: .5em;
}

.newsArchivedContainer {}

.newsArchivedContainer h3 {
    font-size: 18px;
    color: #31436b;
    margin: 0 0 10px 10px;
}

.newsArchivedContainer h3 span {}

ul#newsArchivedList {
    margin: 0 0 0 25px;
    padding: 0px;
}

ul#newsArchivedList li {
    margin-bottom: .25em;
    list-style: disc outside;
}

ul#newsArchivedList li span {
    display: block;
}

ul#newsArchivedList li span.newsArchivedHeadline {
    font-size: 12px;
    color: #31436b;
}

ul#newsArchivedList li span.newsArchivedDate {
    font-size: 11px;
}

.newsColRight .contentPagination {
    padding: 5px 10px;
    margin-top: 10px;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.newsColRight .contentPagination .paginationArrows {}

.newsColRight .contentPagination .paginationLink {}

.newsColRight .contentPagination .paginationStatusText {
    clear: both;
    float: none;
    text-align: right;
    font-size: 11px;
    margin: 0 0 5px 0;
}


/*- Individual Page -*/

#NewsItem {
    padding: 10px;
}

#NewsItemImage {
    float: left;
    margin-right: 10px;
    padding-top: 5px;
}

#NewsItemImage img {
    max-width: 750px;
}

@media screen and (max-width: 768px) {
    #NewsItemImage img {
        width:100%;
    }
}

#NewsItemText {}

#NewsItemText h3#NewsItemTextHeadline {
    color: #31436B;
    font-size: 28px;
    font-weight: bold;
}

#NewsItemText div#NewsItemTextStory {
    font-size: 13px;
    line-height: 1.6em;
}

#NewsItemText div#NewsItemTextStory h1,
#NewsItemText div#NewsItemTextStory h2,
#NewsItemText div#NewsItemTextStory h3,
#NewsItemText div#NewsItemTextStory h4,
#NewsItemText div#NewsItemTextStory h5,
#NewsItemText div#NewsItemTextStory h6 {
    color: #31436B;
    font-weight: bold;
    margin-bottom: .25em;
    line-height: 1.3em;
}

#NewsItemText div#NewsItemTextStory h1 {
    font-size: 22px;
}

#NewsItemText div#NewsItemTextStory h2 {
    font-size: 18px;
}

#NewsItemText div#NewsItemTextStory h3 {
    font-size: 16px;
}

#NewsItemText div#NewsItemTextStory h4,
#NewsItemText div#NewsItemTextStory h5,
#NewsItemText div#NewsItemTextStory h6 {
    font-size: 14px;
}

#NewsItemText div#NewsItemTextStory p {
    margin-bottom: 1em;
}


/*- End Individual Page -*/


/*- Individual News Styles -*/


/*== iPhone Revolutionize Business - NewsID 4 ==*/

#NewsItemText div#NewsItemTextStory .fLeft {
    float: left;
    margin-right: 5px;
}

#NewsItemText div#NewsItemTextStory .fRight {
    float: right;
    margin-left: 5px;
}

#NewsItemText div#NewsItemTextStory .phoneLeft,
#NewsItemText div#NewsItemTextStory .phoneRight {
    padding: 5px 10px;
    width: 55%;
    overflow: hidden;
}

#NewsItemText div#NewsItemTextStory .phoneLeft {
    border: 1px solid #dfdfdf;
    background: #efefef;
}

#NewsItemText div#NewsItemTextStory .phoneRight {
    margin-left: 20%;
    border: 1px solid #dfdfdf;
    background: #CCCCCC;
}


/*== DS Values - NewsID 2 ==*/

#NewsItemText div#NewsItemTextStory .news2Challenge,
#NewsItemText div#NewsItemTextStory .news2Solution {
    width: 55%;
    padding: 5px 10px;
}

#NewsItemText div#NewsItemTextStory .news2Challenge {
    border: 1px solid #dfdfdf;
    background: #efefef;
    margin-bottom: 1em;
}

#NewsItemText div#NewsItemTextStory .news2Solution {
    margin-left: 15%;
    border: 1px solid #cfcfcf;
    background: #cccccc;
    margin-bottom: 2em;
}


/*- End Individual News Styles -*/


@media screen and (max-width: 992px) {
    .newsLatest,
    .newsColLeft,
    .newsColRight {
        width: 100%;
        float: none;
        padding: 0;
    }

    .newsTopStory .newsTopStoryHeadline {
        font-size: 20px;

    }

    .newsLatest {
        border-bottom: 1px solid #cccccc;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .newsTopStory .newsTopStoryImage,
    .newsLatest .newsLatestImage {
        float: none;
        width: auto;
        margin-bottom: 15px;
    }

    .paginationNumeric {
        display: none;
    }
    .newsColRight .contentPagination .paginationStatusText {
        text-align: left;
        margin: 5px 0;
    }

    .paginationLink {
        float: none;
    }

}




/*- END NEWS PAGE -*/
/*----- SHOWCASE PAGE -----*/

.showcaseButton {
    margin-top: 10px;
    margin-left: 10px;
}

#showcaseContainer
{
    text-align: center;
}
#showcaseContainer h3
{
    padding-top: 2px;
    font-size: 20px;
}
#showcaseContainer h3.fav
{
    background: url(../images/icons/iconFavShow.png) no-repeat left top;
    padding-left: 30px;
}
#showcase-watch-container #contentColTitle, #showcase-show-container #contentColTitle {
    display: flex; 
    justify-content: space-between;
    align-items: center;
}
.displayShowcase
{
    text-align: center;
    margin: 0 auto;
    max-width: 900px;
}
#previewVideo
{
    width: 480px;
    height: 340px;
    margin: 0px auto;
}
.displayShowcase #showcaseOptions
{
    margin: 5px 60px 0 0;
    overflow: hidden;
}
#showcaseOptions p
{
    font-size: 12px;
    line-height: 14px;
    margin-bottom: .5em;
}
.showcaseDescription
{
    margin: 10px 15px;
    clear: both;
    padding-top: 10px;
    text-align: left;
}
.showcaseDescription h4
{
    margin-bottom: 1em;
    color: #0060A5;
}
.showcaseDescription p
{
    font-size: 14px;
    margin-bottom: 1em;
}
#showcaseOptions #showcaseStar
{
    margin: 5px 0 8px;
}
#showcaseOptions #showcaseStar li
{
    display: block;
    float: left;
    cursor: pointer;
}
#showcaseOptions p
{
    clear: both;
}
/*--- END SHOWCASE PAGE ---*/

/*----- PRESENTATION PAGE -----*/
.presentationThumbs
{
    width: 780px;
    text-align: center;
    margin: 20px 7px;
}
/*SCROLLABLE*/
/*	root element for the scrollable.
			when scrolling occurs this element stays still.
		*/
div.scrollable
{
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 680px;
    height: 120px;
    margin-bottom: 30px; /* custom decorations */
    border: 1px solid #ccc;
    background: url(../images/scrollable/h200.jpg) repeat-x;
}
/*	root element for scrollable items. Must be absolutely positioned
			and it should have a extremely large width to accomodate scrollable items.
			it's enough that you set the width and height for the root element and
			not for this element.
		*/
div.scrollable div.items
{
    /* this cannot be too large */
    width: 20000em;
    position: relative;
    clear: both;
}
/* single scrollable item */
div.scrollable img
{
    float: left;
    margin: 22px 5px 15px 21px;
    padding: 2px;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 100px;
    height: 67px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
/* active item */
.scrollable .active
{
    border: 2px solid #000;
    z-index: 9999;
    position: relative;
}
#image_wrap
{
    /* dimensions */
    position: relative;
    overflow: hidden;
    width: 677px;
    margin: 25px auto;
    padding: 25px 0; /* centered */
    text-align: center; /* some "skinning" */
    background-color: #DCE0EB;
    border: 2px solid #fff;
    outline: 1px solid #ddd;
    -moz-ouline-radius: 4px;
}
#image_wrap img
{
    width: 480px;
    height: 320px;
}
/*-- END SCROLLABLE --*/
/*ARROWS*/
/* this makes it possible to add next button beside scrollable */
.scrollable
{
    float: left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse
{
    background: url(../images/scrollable/hori_large.png) no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin: 40px 10px;
    cursor: pointer;
    font-size: 1px;
}
/* right */
a.right
{
    background-position: 0 -30px;
    clear: right;
    margin-right: 0px;
}
a.right:hover
{
    background-position: -30px -30px;
}
a.right:active
{
    background-position: -60px -30px;
}

/* left */
a.left
{
    margin-left: 0px;
}
a.left:hover
{
    background-position: -30px 0;
}
a.left:active
{
    background-position: -60px 0;
}

/* disabled navigational button */
a.disabled
{
    visibility: hidden !important;
}
/*END ARROWS*/
/*--- END PRESENTATION PAGE ---*/


/*--- RESOURCES LIST ---*/
.resourcesContainer
{
    margin: 0 auto 25px 15px;
    padding: 0;
    border: 1px solid #666666;
    border-top: none;
}
.resourcesContainer p
{
    margin-right: 100px;
}
.resourcesContainer ul, .resourcesContainer ul li
{
    clear: both;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.resourcesContainer ul li
{
    border-top: 1px solid #666666;
    padding: 10px;
}
.resourcesContainer ul li img
{
    float: left;
    margin-right: 10px;
}
.resourcesContainer h3.resourceDesc
{
    clear: both;
    font-size: 15px;
    font-weight: bold;
    color: #304475;
    line-height: 1.6em;
}
.resourcesContainer h4
{
    font-size: 12px;
    font-weight: bold;
    color: #304475;
    line-height: 1.6em;
    width: 475px;
    word-wrap: break-word;
}
.resourcesContainer h4 span
{
    font-weight: normal;
    color: #222222;
}
.resourcesContainer .resourceCategory
{
    font-size: 11px;
    font-weight: normal;
    color: #116611;
    line-height: 1.6em;
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: right;
    width: 225px;
    margin-right: 10px;
}
.resourcesContainer .rightButton
{
    position: relative;
    bottom: 0px;
}
/*-- SHOWCASE RESOURCES --*/
.showcaseResources
{
    overflow: auto;
    position: relative;
    padding: 0 10px;
}
.resourceTree
{
    float: left;
    max-width: 25%;
    padding: 0 10px 0 0;
    margin: 40px 60px 0 0;
}
.resourceTree ul li {
    padding: 0 !important;
}
.resourceTree ul li span {
    margin-left: 0 !important;
}
.resourceTree .category-heading {
    font-weight: 600;
    font-size: 16px; 
    margin-bottom: 15px; 
    display: inline-block;
}
.resourceFiles
{
    overflow: hidden;
    padding: 0;
    border: 1px solid #829CBF;
}
.resourceFiles table tr td
{
    padding: 10px;
}
.resourceFiles .t-header, .resourceFiles .t-grid-header
{
    display: none;
}
.resourceFiles .rightButton a span
{
    padding: 1px 10px 3px 0;
}
.resourceFileType
{
    display: block;
    float: left;
}
.resourceFileInfo
{
    overflow: auto;
}
.resourceFileInfo p span, .resourceDesc span
{
    font-weight: bold;
    color: #304475;
}
.resourceFileInfo p.resourceCategory
{
    color: #116611;
}
.resourceFileInfo p.resourceCategory span
{
    color: #304475;
}

@media screen and (max-width: 991px) {
    .resourceTree {
        width: 100%;
        max-width: 100%;
    }

    .resourceFiles .resourceFileInfo .resourceCategory {
        width: 100% !important;
    }
}
/*- END SHOWCASE RESOURCES -*/
/*--- END RESOURCES LIST ---*/

/* --- for sharing */

.contactSelected
{
    cursor:pointer;
    font-weight:bold;
    padding-left:5px; 
    font-family:Verdana;    
}

#addFavoriteContainer #contactSearchContainer 
{
  padding-top:5px;
  float:right;
  padding-right:9px;
}

#addFavoriteContainer .shareCol
{
    width:100%;
    padding-top:5px;
    float:left;    
}

#addFavoriteContainer .shareColLeft
{
    width:15%;
    float:left;    
}
#addFavoriteContainer .shareColRight
{
    width:83%;
    float:left;
}


.microSiteShare {
    padding: 10px;
}

.addthis_toolbox {
    margin: 10px;
}

   .CategoryExplanation
    {
        padding:0 0 10px 10px;    
            
    }  

.resourceSearch {
    float: right;
}

/* this removes the download button from the HTML5 Video Player*/
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

.showcase-btn-container .btn {
    min-width: 120px;
}

.showcase-btn-container .btn + .btn {
    margin-left: 5px;
}

@media screen and (max-width: 767px) {

    #showcaseList li div div.showcaseThumb {
        text-align: center;
        margin-bottom: 15px;
        display: inline-block;
    }

    #showcaseList li div div.showcaseThumb img {
        width: auto;
        float: none;
        display: block;
    }

    .showcase-btn-container a {
        display: block;
        text-align: center;
    }

    .showcase-btn-container .btn + .btn {
        margin-left: 0;
    }

    .resourceTree {
        float: none;
        width: 100%;
        margin-bottom: 15px;
    }

}

@media screen and (max-width: 568px) {
    #showcaseList {
        text-align: center;
    }

    #subNav .nav-pills > li {
        float: none;
        text-align: center;
    }
}
/*----- CALENDAR LEFT COLUMN -----*/
#leftNav div.RadPanelBar_Default {
    background: transparent;
}

#leftNav ul.rpRootGroup {
    border-color: #a38f76;
    width: 181px;
    border: none;
}

#leftNav .rpRootGroup .rpItem {
    clear: both;
    border: 1px solid #a38f76;
    margin-top: 10px;
}

    #leftNav .rpRootGroup .rpItem .rpGroup .rpItem {
        border-bottom: none;
        margin-top: 0;
    }

#leftNav ul.rpRootGroup li ul {
    width: auto;
}

#leftNav ul.rpRootGroup li a {
    background: url(../images/calendarNavMain.jpg) repeat-x top left #d0c3b1;
    color: #31436b;
    display: inherit;
    height: auto;
    padding: 0;
    width: auto;
    border: none;
}

    #leftNav ul.rpRootGroup li a span.rpOut {
        padding-left: 5px;
    }

    #leftNav ul.rpRootGroup li a span.rpText, #leftNav ul.rpRootGroup li a.rpExpanded span.rpText {
        padding-left: 0;
    }

.RadPanelBar_Default .rpOut {
    border-color: #a38f76 !important;
}

.RadPanelBar_Default .rpGroup {
    background-color: none !important;
}

.rpTemplate .RadListBox_Default .rlbGroup {
    border: none;
}


.navCalendarsContainer {
    width: 100%;
}

    .navCalendarsContainer ul li {
        position: relative;
        overflow: hidden;
    }

        .navCalendarsContainer ul li span.navCalendarsEdit a {
            background: none !important;
        }

            .navCalendarsContainer ul li span.navCalendarsEdit a:hover {
                -webkit-transform: translate(-2px,0px);
                -moz-transform: translate(-2px,0px);
                -o-transform: translate(-2px,0px);
                padding-right: 2px;
            }

            .navCalendarsContainer ul li span.navCalendarsEdit a:active {
                -webkit-transform: translate(-4px,0px);
                -moz-transform: translate(-4px,0px);
                -o-transform: translate(-4px,0px);
                padding-right: 4px;
            }

    .navCalendarsContainer ul li {
        background: url(../images/leftNavBg.png) no-repeat scroll left top transparent;
        color: #857D74;
        display: block;
        height: 26px;
        margin: 0;
        padding: 3px 0 0 10px;
        text-align: left;
        text-decoration: none;
    }

.navCalendarsText {
    padding-left: 5px;
    padding-right: 5px;
}

.navCalendarsEdit {
    width: 16px;
    position: absolute;
    top: 4px;
    right: 2px;
}

/*----- MAIN CALENDAR -----*/
.RadScheduler_Default .rsHeader, .RadScheduler_Default .rsHeader ul a:hover, .RadScheduler_Default .rsHeader ul a:hover span, .RadScheduler_Default .rsHeader .rsSelected, .RadScheduler_Default .rsHeader .rsSelected em, .RadScheduler_Default .rsHeader .rsDatePickerActivator, .RadScheduler_Default .rsHeader .rsPrevDay, .RadScheduler_Default .rsHeader .rsNextDay {
    background-image: url(../images/WebResource.png) !important;
}

.RadScheduler_Default .rsSpacerCell, .RadScheduler_Default .rsAllDayHeader, .RadScheduler_Default .rsVerticalHeaderWrapper, .RadScheduler_Default .rsVerticalHeaderTable {
    background: url(../images/calendarWebResources.png) repeat-y scroll 0 0 #edf1fa !important;
}

.RadScheduler .rsAdvancedModal {
    z-index: 9001 !important;
}

.rcbSlide {
    z-index: 9002 !important;
}

div.RadScheduler .rsTopWrap {
}

div.RadScheduler_Default .rsHeader {
    background: url(../images/calendarMainHeader.jpg) repeat-x left top transparent !important;
    height: 53px;
    line-height: 53px;
    border: none;
    position: relative;
    z-index: 1000;
    border-left: 1px solid #929292;
    border-right: 1px solid #929292;
}
/*- Main Calendar Header -*/
.RadScheduler .rsHeader .rsPrevDay {
    margin: 19px 0 0 6px !important;
}

.RadScheduler .rsHeader .rsNextDay {
    margin: 19px 6px 0 0 !important;
}

.RadScheduler .rsHeader .rsDatePickerActivator {
    margin: 15px 0 0 5px !important;
}

.RadScheduler .rsHeader h2 {
    height: 54px !important;
    color: #31436B;
    font-size: 22px !important;
}

.RadScheduler .rsHeader ul {
    margin-top: 11px;
}

.RadScheduler_Default .rsHeader ul span, .RadScheduler_Default .rsHeader ul em {
    color: #33539B !important;
    font-size: 13px !important;
}

.RadScheduler .rsHeader .rsToday {
    color: #33539B;
}

.RadScheduler_Default .rsHeader .rsSelected em, .RadScheduler_Default .rsHeader ul a:hover span {
    color: #FFFFFF !important;
}

RadScheduler .rsTopWrap .rsHeader ul a {
    font-size: 14px !important;
}

.RadScheduler_Default .rsHorizontalHeaderTable th {
    background-image: none !important;
    background: #ebedf9 !important;
    color: #33539B;
    font-size: 14px;
    padding: 10px 0;
}

.RadScheduler_Default .rsMonthView .rsOtherMonth {
    background-color: #EFEFEF !important;
}

.RadScheduler_Default .rsAptCreate, .RadScheduler_Default .rsMonthView .rsAptCreate {
    background-color: #C5C5C5 !important;
}

.RadScheduler_Default .rsContentTable td {
    border-color: #D2D2D2 !important;
}

/* Calendar Colors */
.CalendarList-Blue-On {
    border: solid 1px blue;
    background-color: blue;
}

.CalendarList-Blue-Off {
    border: solid 1px blue;
}

.CalendarList-DarkBlue-On {
    border: solid 1px DarkBlue;
    background-color: DarkBlue;
}

.CalendarList-DarkBlue-Off {
    border: solid 1px DarkBlue;
}

.CalendarList-Green-On {
    border: solid 1px Green;
    background-color: Green;
}

.CalendarList-Green-Off {
    border: solid 1px Green;
}

.CalendarList-DarkGreen-On {
    border: solid 1px DarkGreen;
    background-color: #255725;
}

.CalendarList-DarkGreen-Off {
    border: solid 1px DarkGreen;
}

.CalendarList-Pink-On {
    border: solid 1px Pink;
    background-color: Pink;
}

.CalendarList-Pink-Off {
    border: solid 1px Pink;
}

.CalendarList-Red-On {
    border: solid 1px Red;
    background-color: Red;
}

.CalendarList-Red-Off {
    border: solid 1px Red;
}

.CalendarList-DarkRed-On {
    border: solid 1px DarkRed;
    background-color: DarkRed;
}

.CalendarList-DarkRed-Off {
    border: solid 1px DarkRed;
}

.CalendarList-Orange-On {
    border: solid 1px Orange;
    background-color: Orange;
}

.CalendarList-Orange-Off {
    border: solid 1px Orange;
}

.CalendarList-Yellow-On {
    border: solid 1px Yellow;
    background-color: Yellow;
}

.CalendarList-Yellow-Off {
    border: solid 1px Yellow;
}

.CalendarList-Violet-On {
    border: solid 1px Violet;
    background-color: Violet;
}

.CalendarList-Violet-Off {
    border: solid 1px Violet;
}

/*TELERIK CALENDAR COLOR OVERIDE*/
.RadScheduler .rsCategoryYellow .rsAptContent, .RadScheduler .rsCategoryYellow .rsAptIn, .RadScheduler .rsCategoryYellow .rsAptMid {
    background-color: yellow !important;
}

.RadScheduler .rsCategoryViolet .rsAptContent, .RadScheduler .rsCategoryViolet .rsAptIn, .RadScheduler .rsCategoryViolet .rsAptMid {
    background-color: violet !important;
    color: #000000 !important;
}

.RadScheduler .rsCategoryRed .rsAptContent, .RadScheduler .rsCategoryRed .rsAptIn, .RadScheduler .rsCategoryRed .rsAptMid {
    background-color: red !important;
    color: #ffffff !important;
}

.RadScheduler .rsCategoryPink .rsAptContent, .RadScheduler .rsCategoryPink .rsAptIn, .RadScheduler .rsCategoryPink .rsAptMid {
    background-color: pink !important;
}

.RadScheduler .rsCategoryOrange .rsAptContent, .RadScheduler .rsCategoryOrange .rsAptIn, .RadScheduler .rsCategoryOrange .rsAptMid {
    background-color: orange !important;
}

.RadScheduler .rsCategoryDarkRed .rsAptContent, .RadScheduler .rsCategoryDarkRed .rsAptIn, .RadScheduler .rsCategoryDarkRed .rsAptMid {
    background-color: darkred !important;
}

.RadScheduler .rsCategoryDarkGreen .rsAptContent, .RadScheduler .rsCategoryDarkGreen .rsAptIn, .RadScheduler .rsCategoryDarkGreen .rsAptMid {
    background-color: darkgreen !important;
}

.RadScheduler .rsCategoryGreen .rsAptContent, .RadScheduler .rsCategoryGreen .rsAptIn, .RadScheduler .rsCategoryGreen .rsAptMid {
    background-color: green !important;
    color: #ffffff !important;
}

.RadScheduler .rsCategoryDarkBlue .rsAptContent, .RadScheduler .rsCategoryDarkBlue .rsAptIn, .RadScheduler .rsCategoryDarkBlue .rsAptMid {
    background-clor: darkblue !important;
}

.RadScheduler .rsCategoryBlue .rsAptContent, .RadScheduler .rsCategoryBlue .rsAptIn, .RadScheduler .rsCategoryBlue .rsAptMid {
    background-color: blue !important;
    color: #ffffff !important;
}
/* End Calendar Colors */

/* Calendar Options */
#calendarOptions div a:hover {
    background-position: 0 -34px;
    text-decoration: none;
}

#calendarOptions div a:active {
    background-position: 0 -68px;
    padding: 4px 2px 2px 4px;
}

.viewCalendar a img {
    margin-top: 2px;
}

.manageCalendar a img {
    margin-top: 2px;
}

.subscribeCalendar a img {
    margin-top: 2px;
}

.newCalendar a img {
    margin-top: 1px;
}

.newEvent a img {
    margin-top: 1px;
}

#calendarOptions div span {
    color: #EFEFEF;
    font-size: 10px;
}

#calendarOptions .inactiveItem {
    background: url(../images/messageInactive.png) repeat-x 0 0px;
    height: 60px;
    width: 75px;
    position: absolute;
    left: 0;
    top: 0;
    color: #8495ba;
}
/* End Calendar Options */

/* Manage My Calendar */
.tab_container_myCalendar {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left;
    width: 98%;
    background: #fff;
}

.tab_content_myCalendar {
    padding: 10px;
    font-size: 1em;
}

ul.tabs_myCalendar {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 27px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 98%;
}

    ul.tabs_myCalendar li {
        float: left;
        margin: 0;
        padding: 0;
        height: 26px; /*--Subtract 1px from the height of the unordered list--*/
        line-height: 26px; /*--Vertically aligns the text within the tab--*/
        border: 1px solid #999;
        border-left: none;
        margin-bottom: -1px; /*--Pull the list item down 1px--*/
        overflow: hidden;
        position: relative;
        background: url(../images/col2TitleBg.jpg) repeat-x scroll center top #6077A8;
    }

        ul.tabs_myCalendar li a {
            text-decoration: none;
            color: #FAFAFA;
            display: block;
            font-size: 1em;
            padding: 0 17px;
            border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
            outline: none;
        }

            ul.tabs_myCalendar li a:hover {
                background: #DADADA;
                color: #6077A8;
            }

html ul.tabs_myCalendar li.active a {
    color: #6077A8;
}

html ul.tabs_myCalendar li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
/* End Manage My Calendar */

/* Create New Calendar */
.calendarManageCalendar {
    color: #31436B;
    font-size: 18px;
    line-height: 20px;
}

.calendarManageCalendarContent p {
    margin-top: .5em;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6em;
}

    .calendarManageCalendarContent p label {
        clear: left;
        display: block;
        float: left;
        font-weight: normal;
        width: 52px;
    }
/* End Create New Calendar */

/* iFrame FancyBox */
#fancyBoxMediumContainer h2 {
    font-size: 24px;
}
/* End iFrame FancyBox */

div.rsAdvPatternPanel ul li span, 
div.rsAdvPatternPanel ul li div, 
div.rsAdvPatternPanel div div {
    float: left;
}
h2.lead-name {
    font-size: 22px;
    margin: 10px 0;
}

.lead-info-wrap a.btn {
    color: #ffffff;
}

.row.lead-info-wrap {
    color: #3B3F4F;
    padding: 10px 0px 0px 0px;
    border-radius: 6px;
    margin: 25px 0;
    background: #fff;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.row.lead-info-wrap .col-sm-4,
.row.lead-info-wrap .col-sm-4 .col-md-12 {
    padding-left: 0;
}

.row.lead-info-wrap .col-sm-8,
.row.lead-info-wrap .col-sm-8 .col-md-12 {
    padding-right: 0;
}

@media screen and (max-width: 768px) {
    .row.lead-info-wrap .col-sm-4,
    .row.lead-info-wrap .col-sm-4 .col-md-12,
    .row.lead-info-wrap .col-sm-8,
    .row.lead-info-wrap .col-sm-8 .col-md-12 {
        padding-right: 0;
        padding-left: 0;
    }
}

.leads-mobile-btn.col-md-12 {
    margin: 20px 0;
    padding: 0;

}

.leadsGeneral {
    width: 100%;
    border-collapse: collapse;
}

.leadsGeneral tr.alt td {
    background: #ccd1e3;
}

.leadsGeneral th,
.leadsGeneral td {
    padding: 5px 7px 4px;
}

.leadsGeneral th {
    border-left: 1px solid #bbc0d2;
    border-right: 1px solid #bbc0d2;
    background: #faf3ea;
    font-size: 15px;
    text-align: left;
}

.leadsGeneral td {
    border: 1px solid #bbc0d2;
}

.leadsPages {
    position: relative;
    left: 50%;
    float: left;
    clear: both;
    margin: 10px 0;
    text-align: left;
}

.leadsP {
    padding: 0;
    position: relative;
    left: -50%;
    text-align: left;
    font-size: 13px;
}

.leadsPagination {
    margin: 12px 30px 0 15px;
    padding: 0;
    float: left;
}

.leadsPagination li {
    display: inline;
    list-style: none;
}


/* LEADS Edit, Add pages */



.leadInfoCol2 p {
    font-size: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.leadInfoCol2 select {
    width: 200px;
}

.lead2col1 {
    padding: 10px;
    float: left;
    width: 274px;
}

.lead2col2 {
    padding: 10px 0;
    float: left;
    width: 466px;
}

.leadImg {
    float: left;
    margin-right: 10px;
}

.lead2col1 h2 {
    font-size: 24px;
    font-weight: bold;
}

.lead2col1 p {
    font-size: 12px;
    overflow: hidden;
}

.leadInfo {
    clear: both;
    margin-bottom: 20px;
}

.leadInfo p {
    margin-bottom: 1em;
}

.leadInfoDesc {
    float: left;
    text-align: left;
    width: 50%;
    position: relative;
}

.leadInfoDesc textarea {
    width: 160px;
    height: 60px;
}


/* Validation Error */

.validation-summary-errors {
    border: 1px solid #ff0000;
    margin-bottom: 1em;
    padding: 10px 0 0 5px;
}

.validation-summary-errors ul {
    padding-left: 1em;
    margin-left: 0;
}

.field-validation-error {
    /*position:absolute;*/
    right: -25px;
    top: 2px;
}

.importedContact {
    /*text-decoration: line-through;*/
    color: #9a9a9a;
}


/* Google Credential */

.leads_CredentialMissing {
    margin: 15px 20px 0;
}

.leads_CredentialMissing p {
    margin-bottom: 1em;
    line-height: 1.6em;
}


/*Google contacts Import*/

#ContactsGrid {
    clear: both;
}

.importDesc {
    margin: 10px 15px;
    line-height: 1.6em;
    float: left;
    overflow: hidden;
}

.importLeads {
    margin: 10px 15px;
    float: right;
    overflow: hidden;
}

.archived {
    color: #777;
    background-color: #dfdfdf;
}

.archivedIndicator {
    background: #eee;
    color: #33aa33;
    display: block;
    float: left;
    font-size: 10px;
    line-height: 1.6em;
    margin: 0 10px 0 0;
    padding: 1px 5px 0;
    border: 1px solid #d0d0d0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.leadUpload {
    clear: both;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
}

.failedleads {
    clear: both;
    margin-top: 20px;
    margin-right: 20px;
}

.addedleadds {
    clear: both;
    margin-top: 20px;
    margin-right: 20px;
}

.leadUploadButton {
    margin-left: 10px;
}

.my-profile-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.profile-contact-info, .activity-timeline-table {
    width: 70% !important;
    margin: auto;
}

@media screen and (max-width: 1024px) {
    .profile-contact-info, .activity-timeline-table {
        width: 100% !important;
    }
}

.lead-info-wrap .lead-data-value-container {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.lead-info-wrap .lead-data-value-container .lead-label {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    color: #000;
}

.lead-info-wrap .lead-data-value-container .lead-value {
    font-weight: 400;
    font-size: 14px;
}

.lead-info-wrap .collapsable-panels-container {
    padding: 0; 
    margin-top: 20px;
}

.lead-info-wrap .collapsable-header {
    border-top: 1px solid #ccc;
    padding: 11px 15px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600 !important;
    color: #000;
}

.lead-info-wrap .collapsable-section {
    border-bottom: none !important;
    padding: 0 15px !important;
}

.lead-info-wrap .collapsable-header:before {
    right: 15px !important;
}

/* Styles specific to the Leads page */
.lead-page-container .row.lead-info-wrap {
    padding: 20px;
}

.lead-page-container .lead-info-wrap a.btn {
    margin: 15px 0;
}

.lead-page-container h2.lead-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.lead-page-container .lead-info-wrap .collapsable-header {
    border-top: none;
}

.lead-page-container .lead-info-wrap .collapsable-section {
    border-bottom: 1px solid #ccc !important;
}
/*----- ORDER DETAIL Page -----*/

a {
    color: #0e609a;
}

a:hover {
    color: #0060a5;
}

#orderDetailHeader {
    position: relative;
    overflow: hidden;
    margin: 15px 15px 0;
}

#orderDetailHeader h2 {
    float: left;
    font-size: 22px;
    margin: 3px 0 7px;
    color: #585f70;
}

#orderDetailHeader h2 span {
    float: left;
    margin: 5px 0 0;
}

#orderDetailHeader a img {
    margin: 0 10px 0 0;
    float: left;
}

.orderDetailTrack {
    position: absolute;
    left: 0;
    margin-top: 50px;
}

#orderDetailSummary {
    float: right;
    overflow: hidden;
    font-size: 12px;
    margin-bottom: 15px;
}

#orderDetailSummary ul {
    margin: 0;
    padding: 0;
}

#orderDetailSummary ul li {
    margin: 0;
    padding: 0;
    line-height: 1.6em;
}

.orderDetailTopic {
    overflow: hidden;
    display: block;
    float: left;
    text-align: right;
    width: 200px;
    margin-right: 7px;
}

.orderDetailDesc {
    text-align: left;
}

.orderDetailAddress {
    overflow: hidden;
    margin-bottom: 15px;
}

.orderDetailAddress li {
    overflow: hidden;
    display: block;
    float: left;
    width: 50%;
}

.orderDetailAddress li ul li {
    width: 100%;
    line-height: 1.6em;
}

.orderDetailAddress li p {
    font-size: 18px;
    color: #0e609a;
}


/*----- ORDER DETAIL PANEL -----*/

.orderDetailPanel {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 95%;
}

.orderDetailPanelContentR {
    background: url(../images/panelR.png) repeat-y right top;
}

.orderDetailPanelContentL {
    background: url(../images/panelL.png) repeat-y left top;
    padding: 0;
}

.orderDetailPanelContent {
    font-size: 12px;
    color: #333;
    padding: 0;
    overflow: hidden;
}

.orderDetailPanelBottom {
    background: url(../images/panelBottomBkg.png) repeat-x top;
    height: 4px;
}

.orderDetailPanelBottomL {
    background: url(../images/panelBottomL.png) no-repeat left top;
}

.orderDetailPanelBottomR {
    background: url(../images/panelBottomR.png) no-repeat right top;
}


/*--- END ORDER DETAIL PANEL ---*/

.orderDetailContent {
    clear: both;
    line-height: 1.4em;
    font-size: 14px;
}

.orderDetailContent table {
    position: relative;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.orderDetailContent thead,
.orderDetailContent tfoot,
.orderDetailContent tbody,
.orderDetailContent thead tr,
.orderDetailContent tfoot tr,
.orderDetailContent tbody tr {
    position: relative;
}

.orderDetailContent thead {
    background: url(../images/panelHeaderBkg.png) repeat-x top;
    color: #585F70;
    text-align: right;
    font-size: 12px;
}

.orderDetailContent th {
    position: relative;
    padding: 5px 15px;
    white-space: nowrap;
}

.orderDetailContent th span.leftTableHeader {
    position: absolute;
    background: url(../images/panelHeaderL.png) no-repeat left top;
    display: block;
    width: 6px;
    height: 28px;
    top: 0;
    left: 0;
}

.orderDetailContent th span.rightTableHeader {
    position: absolute;
    background: url(../images/panelHeaderR.png) no-repeat right top;
    display: block;
    width: 6px;
    height: 28px;
    top: 0px;
    right: 0;
}

.orderDetailContent tfoot {}

.orderDetailContent tfoot td {
    padding: 5px 15px;
    text-align: right;
}

.orderDetailContent tfoot tr.topFooter td {
    white-space: nowrap;
    position: relative;
    text-align: right;
    background: url(../images/panelMidBkg.png) repeat-x left top;
}

.orderDetailContent tfoot tr.topFooter td.orderFoot,
.orderDetailContent tfoot td.orderFoot {
    text-align: left;
}

.orderDetailContent tfoot tr.topFooter td.orderTotal,
.orderDetailContent tfoot td.orderTotal {
    font-size: 14px;
    font-weight: bold;
    color: #111111;
}

.orderDetailContent tfoot tr.topFooter td span.noBgL,
.orderDetailContent tfoot tr.topFooter td span.noBgR {
    position: absolute;
    display: block;
    width: 4px;
    height: 26px;
}

.orderDetailContent tfoot tr.topFooter td span.noBgL {
    left: 0;
    margin-top: -25px;
    background: url(../images/panelL.png) repeat-y left top;
}

.orderDetailContent tfoot tr.topFooter td span.noBgR {
    right: 0;
    margin-top: -25px;
    background: url(../images/panelR.png) repeat-y right top;
}

.orderDetailContent table tbody {
    text-align: right;
}

.orderDetailContent tbody td {
    padding: 10px 15px;
    vertical-align: top;
}

.orderDetailContent tbody td img {
    float: left;
    margin-right: 10px;
    max-width: 150px;
}

.orderDetailContent tbody td p {
    font-size: 16px;
    color: #2275b1;
    text-align: left;
}


.taxAmount {
    text-align: right;
}

.taxAmountTotal {
    border-top: 1px solid #aaaaaa;
}

/*--- End ORDER DETAIL Page ---*/


/*----- ORDER SEARCH -----*/

.orders-search-form {
    margin: 10px auto;
}

.orders-search-form input[type="text"],
.orders-search-form select  {
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 27px;
    padding: 3px;
}

.orders-search-form input[type="text"] {
    min-width: 140px;
}

.orders-search-form select {
    min-width: 110px;
}

.orders-search-form .btn.btn-primary {
    padding: 3px 6px;
}

.orders-search-form .orders-sort-label {
    font-weight: bold;
}

.orders-search-form .orders-search,
.orders-search-form .orders-sort {

}


@media screen and (max-width: 767px) {

.orders-search-form input[type="text"],
.orders-search-form select {
    width: 100%;
    margin-bottom: 10px;
}

.orders-search-form .orders-sort-label {
    display: block;
    margin-bottom: 10px;
    text-align: center;
    font-size: 15px;
}

}

/*--- End ORDER SEARCH ---*/


/*----- ORDER VIEW -----*/
.order-details-container {
    ul {
        padding-left: 0;
    }

    h2 {
        font-size: 24px;
        margin-bottom: 3px;
    }

    .sub-header-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; 

        .btn {
            min-width: 130px;
        }
    }

    .sub-header-value {
        font-size: 12px;
        margin-bottom: 5px;
        text-transform: uppercase;
        font-weight: 600;        
        color: #666666;
    }

    .sub-header-separator {
        margin: 0 4px;
        font-size: 16px;
        color: #bdbdbd;
    }

    .order-container {
        flex-direction: column;

        .order-summary {
            align-items: flex-start;
            padding: 15px 5px;

            .payments-container {
                margin-top: 15px;
            }
        }

        .orders-detail .order-items .image-container .quantity {
            padding: 10px 10px 9px;
        }
    }

    .bill-address, .ship-address {
        p {
            margin-bottom: 0;
        }
    }

    .payments-container {
        padding-top: 15px;
    }
}

.ordersContainer.autoship-orders-container .order-container {
    flex-direction: column;
}

.ordersContainer.autoship-orders-container .order-container .order-summary {
    align-items: flex-start;
}

@media screen and (max-width: 767px) {
    .order-details-container {
        .order-summary .detail-data-value {
            margin-bottom: 15px;
        }

        .sub-header-container .button-container {
            flex: 100%;
            margin-top: 8px;
        }

        .addresses-container {
            margin-bottom: 10px;
        }

        .payments-container {
            border-bottom: 1px solid #ccc;
            padding-top: 0;
        }

        .responsive-table.order-payment-table td, .responsive-table.order-payment-table th {
            font-size: 14px;
            margin: 15px 5px;
        }
    }
}

.ordersContainer {
    padding: 0;
    border-top: none;
}

.ordersContainer ul#listView,
.ordersContainer .k-pager-wrap {
    border: 0;
}

.ordersContainer ul#listView,
.ordersContainer ul#listView li,
.ordersContainer ul#listView li ul {
    display: block;
    position: relative;
    padding: 0;
}

ul li.order-container {
    border: 1px solid #ccc;
    margin-bottom: 25px;
}

ul li.order-container:last-child {
    margin-bottom: 0;
}

ul li.order-container .order-summary .btn span {
    display: block;
    white-space: normal;
}

/* Party item totals */

.order-container .t-grid-pager {
    min-height: 40px;
}

.order-summary {
    background: #eee;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px 5px;
    margin: 0 !important;
    border-radius: 6px 6px 0 0;
}

.order-summary p {
    margin-bottom: 5px;
}

.order-summary .detail-label:after {
    content: ":";
}

.orders-detail {
   padding: 10px 15px;
   border-radius: 0 0 6px 6px;
}

.orders-detail p.shipped {
    font-size: 18px;
    font-weight: bold;
    color: #00789a;
    margin: 0;
}

.orders-detail p.shipped-method {
    font-size: 14px;
    color: #3B3F4F;
    margin-bottom: 5px;
}

.orders-detail .shipping-status-info .shipped-info{
    margin-top: 4px;
}

.orders-detail ul li .order-item-info {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    width: 60%;
}

.orders-detail ul li {
    padding: 10px;
    min-height: 135px;
}

.orders-detail ul li .order-item-info .order-item-description {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 4px;
    display: block;
    font-size: 15px;
}

.orders-detail ul li .order-item-info p {
    margin-bottom: 2px;
}

.orders-detail .order-items {
    margin: 0;
}

.orders-detail .order-items .image-container {
    max-height: 90px;
    max-width: 90px;
    position:relative;
    display:inline-block;
    vertical-align: top;
    margin-right: 20px;
}

.orders-detail .order-items .image-container img {
    margin: 0 auto;
    display:block;
    max-width: 90px;
    max-height: 90px;
}

.orders-detail .order-items .image-container .quantity {
    position: absolute;
    color: #1c1c1c;
    width: 14px;
    height: 14px;
    border: 1px solid #a5a5a5;
    border-radius: 50%;
    bottom: -10px;
    right: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    font-weight: 400;
    font-size: 12px;
    background: #fff;
}

.order-invoice-note {
    padding: 7px 10px;
}

.order-invoice-note h3 {
    font-weight: bold;
    margin: 0 0 5px;
    font-size: 12px;
    color: #333333;
}

.order-invoice-note p {
    margin-bottom: 0;
    color: #333333;
}

.ordersContainer #listView_pager{
    background: #f7f7f7;
}

@media screen and (max-width: 1024px) {
    .order-container .order-summary {
        flex-direction: column;
    }

    .order-container .left-align-detail-row, .order-container .right-align-detail-row {
        width: 100%;
        flex-direction: column;
        text-align: left;
    }

    .order-container .detail-label {
        text-align: left !important;
        margin-top: 12px;
    }

    .order-container .order-details .btn-primary, .order-container .order-status-container .btn {
        width: auto;
    }

    .order-container .order-status-container {
        flex-direction: column;
    }
}

.responsive-table.order-payment-table {
    width: 100%;
    border: 1px solid #dddddd;
    margin: 5px;
    color: #333333;
}

.responsive-table.order-payment-table th {
    background: #eeeeee;
}

.responsive-table.order-payment-table td,
.responsive-table.order-payment-table th {
    padding: 2px 5px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

.responsive-table.order-payment-table td:last-child {
    padding-bottom: 3px;
}

@media screen and (max-width: 991px) {
    .responsive-table.order-payment-table {
        margin: 0;
        border-width: 0 0 1px 0;
    }

    .responsive-table.order-payment-table td:last-child,
    .responsive-table.order-payment-table th:last-child {
        border-right: 0;
    }
}

    
    .ordersContainer li.order-container {
        border-radius: 6px;
        box-shadow: 0 0px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        display: flex;
    }

    .order-container .left-align-detail-row {
        display: flex;
        flex: 1;
    }

    .order-container .left-align-detail-row .order-summary-column {
        margin-right: 75px;
    }

    .order-container .right-align-detail-row {
        display: flex;
        justify-content: right;
        flex-direction: column;
    }

    .order-summary {
        display: flex;
        align-items: center;
        padding: 15px 20px;
    }

    .order-summary p {
        display: flex;
        flex-direction: column;
    }

    .order-summary .detail-label {
        text-transform: uppercase;
        font-size: 11px;
        margin-bottom: 5px;
        font-weight: 600;
        color: #666666;
    }

    .order-summary .detail-label:after {
        content: "";
    }

    .order-summary .detail-value {
        font-weight: 600;
        font-size: 15px;
    }

    .order-details.right-align-detail-row .detail-label {
        text-align: right;
    }

    .order-container .order-sub-summary {
        background: #fff;
        padding: 20px;
    }

    .order-container .order-sub-summary .order-status {
        font-weight: 600;
        font-size: 16px;
    }

    .order-container .order-sub-summary .ship-date-label {
        display: none;
    }

    .orders-detail {
        border-radius: 0 0 6px 6px;
    }

    .order-status-container {
        display: flex; 
        justify-content: space-between;
    }


@media screen and (max-width: 767px) {

    .order-summary {
        padding: 10px 10px 0;
    }

    .order-summary .col-sm-3 {
        position: static;
    }

    .order-summary .autoship {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    ul.order-items li.col-md-6 {
        width: 100%;
    }

    .orders-detail .order-items .image-container {
        max-width: 35%;
        width: auto
    }

    .responsive-table.order-payment-table {
        border: 0;
        margin: 0;
    }

    .responsive-table.order-payment-table td,
    .responsive-table.order-payment-table th {
        font-size: 12px;
        padding: 0;
        border-bottom: 0;
        border-right: 0;
        margin: 0 5px;
    }

    .responsive-table.order-payment-table td {
        padding: 0 5px;
    }

    .responsive-table.order-payment-table td:before {
        content: attr(data-title);
        margin-bottom: 3px;
    }
}


.orders-detail ul li div.subItemDiv {
    display: none;
}

.totalVolume,
.totalOrder {
    font-size: 13px;
    font-weight: bold;
}

.totalVolume {
    color: #116611;
}

.totalOrder {
    color: #000000;
}

.ordersDetailHidden {
    display: none;
}

.ordersDetailFoot {
    margin: 0;
    padding: 10px;
}

.ordersDetailFoot p {
    margin: 0;
    padding: 0;
}

span.viewAllItems {
    cursor: pointer;
    color: #0060A5;
}

span:hover.viewAllItems {
    text-decoration: underline;
}


/*--- END ORDER VIEW ---*/

table,
thead,
tfoot,
tbody,
tr,
td,
th {
    overflow: visible;
}

.panelContainer {
    overflow: hidden;
    clear: both;
}

.panelContentOrder {
    padding-left: 12px;
    font-size: 12px;
    color: #333;
    padding: 0px;
}

.ordersSummaryTable thead th {
    background: #faf3ea;
    border-bottom: 1px solid #DDDDDD;
}

.ordersTable table {
    width: 100%;
    border-spacing: 0px;
    overflow: visible !important;
    border-collapse: collapse;
}

.ordersTable table tr th,
.ordersTable table tr td {
    text-align: left;
    padding: 5px 5px 4px;
}

.ordersTable table tr {}

.ordersTable table tr.altRow {
    background-color: rgba(207, 217, 231, 0.2);
}

.orderingSummary {
    float: left;
    width: 35%;
    padding: 2.25%;
}

.recentOrders {
    padding: 2.25%;
}

#ordersList {
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #AAAAAA;
}

#ordersList li {
    position: relative;
    overflow: hidden;
    font-size: 13px;
    padding: 9px 10px 8px;
    margin: 0;
    border-top: 1px dotted #777777;
    display: block;
}

#ordersList li div {
    overflow: visible;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

#ordersList li div span {
    margin: 0;
    padding: 0;
}

#ordersList p {
    margin-bottom: .5em;
}

.ordersPages {
    position: relative;
    left: 50%;
    float: left;
    clear: both;
    margin: 10px 0;
    text-align: left;
}

.ordersP {
    padding: 0;
    position: relative;
    left: -50%;
    text-align: left;
    font-size: 13px;
}

.ordersPagination {
    margin: 12px 30px 0 15px;
    padding: 0;
    float: left;
}

.ordersPagination li {
    display: inline;
    list-style: none;
}

.subItemDiv {
    display: block;
}

.subItemProductId {
    font-size: 11px;
}

.subItemDesc {
    font-size: 11px;
}

.subItemQty {
    font-size: 11px;
}


/* Autoship */

.autoshipCancel {
    margin: 15px 10px 10px;
    width: 240px;
    background: url(../images/icons/iconAlert.png) no-repeat left top transparent;
    padding-left: 55px;
    line-height: 1.3em;
}

.autoshipCancelButtonFirst {
    margin-left: 10px;
}

.autoshipDetailLinks {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.orderDetailAddress li ul li.autoshipDetailOptions {
    width: 150px;
    margin-right: 5px;
    line-height: 1em;
    float: right;
}

.autoshipDetailOptions a {
    font-size: 12px;
    width: 100px;
    text-align: center;
}

#EditPaymentModalContent {
    text-align: left;
}

#EditPaymentModalContent ul.t-reset {
    font-size: 12px;
}

#EditPaymentModalContent .t-widget.t-combobox.t-header {
    margin-left: 3px;
    width: 50%;
}

.autoShipCreditAccount {
    display: flex;
    align-items: center;
}


/* Autoship Not Enrolled */

.autoshipNotEnrolledHeader {
    background: url(../images/icons/iconAlert.png) no-repeat left top transparent;
    color: #304475;
    font-size: 20px;
    line-height: 42px;
    height: 42px;
    margin: 15px;
    padding-left: 48px;
}

.autoshipNotEnrolled {
    margin: 0 15px;
    font-size: 14px;
}

.reportBinaryOnly {
    padding: 15px;
    color: Red;
}

.reportContainer {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
/* Organizational Summary */

.organizationalSummaryEnrollmentsLeftCol {
	float: left;
	width: 50%
}

.organizationalSummaryEnrollmentsRightCol {
	float: right;
	width: 45%
}

.organizationalSummaryGraphs input,
.organizationalSummaryGraphs div {
	float: left;
}

.organizationalPadding {
	padding: 10px;
}

.t-grid {
	font-size: 12px !important;
}


/* Organizational Summary */


/* Reps Page */

.downlineGroups,
.personalGroups {
	float: left;
	width: 390px;
	margin-top: 15px;
}


/* End Reps Page */


/* Downline Report */

#downlineReportGridContainer {
	overflow: auto;
}

#downlineReportGridContainer .RadGrid_Default {
	border: none !important;
}

#downlineReportGridContainer .RadGrid_Default .rgRow td,
#downlineReportGridContainer .RadGrid_Default .rgAltRow td {
	border: none;
}

#downlineReportDetailsContainer {
	display: none;
	position: absolute;
	top: 0px;
	left: 300px;
	z-index: 1000;
	background-color: White;
}

#downlineReportContainer {
	position: relative;
	height: auto;
    padding-bottom: 80px;
	/*AZ set height to auto, 700px was hiding scrollbar*/
}


/* Downline Report */


/* override the Telerik styling grid */

.rgMasterTable {
	width: 100% !important;
	border-collapse: collapse !important;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	border: 1px solid #666666;
}

.rgHeader {
	font-size: 12px !important;
	background: #faf3ea !important;
	color: #666666 !important;
	padding: 4px 15px !important;
	text-align: left !important;
}

.rgRow {
	border-bottom: none !important;
	padding: 15px !important;
	background-color: White !important;
}

.rgAltRow {
	border-bottom: none !important;
	padding: 15px !important;
	background-color: #EEEEEE !important;
}

.rgRow .rgSorted,
.rgAltRow .rgSorted {
	background-color: Transparent !important;
}

.rgRow td,
.rgAltRow td {
	font-size: 12px !important;
	color: #333333 !important;
	padding: 3px 15px !important;
	vertical-align: middle;
}

.rgPager {
	margin-top: 5px !important;
	padding: 9px 0 0 15px !important;
	background-color: #CED6EB !important;
	height: 20px !important;
	font-size: 12px !important;
}


/* Form Items  */

form h3 {
	font-size: 18px;
	margin-top: 15px;
}

form td label {}

form label {
	font-weight: bold;
	color: #333;
}

input {
	margin-bottom: 0px;
}


/* Treeview Page */

#chooseView {
	margin: 15px 15px 0 15px;
}

#chooseView p {
	color: #fafafa;
}

#GenealogyLegend {
	position: relative;
	/*float: right;*/
	color: #646464;
	border: solid 1px #d2d2d2;
	background-color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 11px;
	padding: 8px;
	box-shadow: 0px 0px 5px #ccc;
	-moz-box-shadow: 0px 0px 5px #ccc;
	-webkit-box-shadow: 0px 0px 5px #ccc;
}

#GenealogyLegend h3 {
	font-size: 13px;
	text-transform: uppercase;
	margin-bottom: 2px;
	border-bottom: dotted 1px #646464;
	color: #646464;
}

#GenealogyLegend img {
	margin-right: 5px
}

#treeviewContainer {
	margin: 10px 15px 15px 15px;
	background-color: #e8e8e8;
	padding: 10px;
	border: solid 1px #d2d2d2;
	position: relative;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	overflow: hidden;
}


/* Graphical Genealogy */

#center-container,
#center-container select,
#center-container #infoSearch input {
    color: #000000;
}

#center-container a#fullscreen {
    z-index: 1;
}

#center-container #infovis {
    z-index: 0;
}

.genalogyHelp {
	position: absolute;
	right: 60px;
	width: 32px;
	margin: 10px 0 0 0;
	color: #666666;
	text-align: center;
	z-index: 1;
}

.genealogy-top-menu {
    position: relative;
    top: -2.8em;
}

/*.detailsContainer{
	margin: 10px 15px 0 15px;
}*/

.contactDetailsContainer h3 {
	color: #333;
	font-size: 18px;
	font-weight: bold;
	border-bottom: dotted 1px #333;
	padding: 5px;
	margin-bottom: 5px;
}

.contactDetailsContainer p {
	overflow: hidden;
	margin-bottom: 0.25em;
}

.contactDetailsContainer .repInfo {
	padding: 7px;
}

.contactDetailsContainer .repInfo img {
	width: 75px;
}

.contactDetailsContainer .repInfo h2 {
	font-size: 1.3em;
}

.profileCardTabs {
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	background: #FAF3EA;
	border-bottom: 1px solid #000;
}

.profileCardTabs div {
	padding: 5px;
	height: 25px;
}

.profileCardName {
	font-size: 1.4em;
    margin-bottom: 10px;
}

.contactInfoDesc {
	width: 50%;
}

ul.tabs {
	position: absolute;
	left: 0px;
	bottom: -23px;
	/*-moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;*/
	margin: 0 5px;
	padding: 0;
	float: left;
	list-style: none;
	height: 22px;
	/*--Set height of tabs--*/
	/*border-top: 1px solid #999;*/
	/*border-left: 1px solid #999;*/
	width: 98%;
}

ul.tabs li {
	-moz-border-radius-bottomleft: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
	float: left;
	margin: 0 -1px;
	padding: 0;
	padding-bottom: 2px;
	height: 21px;
	/*--Subtract 1px from the height of the unordered list--*/
	line-height: 21px;
	/*--Vertically aligns the text within the tab--*/
	border: 1px solid #000;
	border-top: none;
	/*border-left: none;*/
	margin-top: -1px;
	/*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: url(../images/col2TitleBg.jpg) repeat-x scroll center top #6077A8;
	/*-- background: #e0e0e0; -- Old tab color --*/
}

ul.tabs li a {
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	text-decoration: none;
	color: #FAFAFA;
	display: block;
	font-size: 11px;
	padding: 0 5px;
	border: 1px solid #fff;
	/*--Gives the bevel look with a 1px white border inside the list item--*/
	border-top: 1px solid #000;
	outline: none;
}

ul.tabs li a:hover {
	background: #DADADA;
	color: #6077A8;
}

html ul.tabs li.active a {
	color: #6077A8;
}

html ul.tabs li.active,
html ul.tabs li.active a:hover,
html ul.tabs li.active,
html ul.tabs li.active a {
	/*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	/*border-top: 1px solid #fff; removed to allow multiple rows TABS /*--Makes the active tab look like it's connected with its content--*/
}


/*-- Organization Customers --*/

div.orgCustomerContent {
	margin: 20px;
}

.customerSortBy {
	margin-bottom: 10px;
	text-align: right;
}

.customerSortBy span {
	color: #31436b;
}

ul.orgCustomers {
	margin: 0;
	padding: 0;
}

ul.orgCustomers li {
	position: relative;
	padding: 0px;
	border: 1px solid #333333;
	border-top: none;
}

ul.orgCustomers li:first-child {
	border-top: 1px solid #333333;
}

.customerContentCol {
	overflow: hidden;
	padding: 10px;
}

.customerContentCol div {
	width: 32%;
	float: left;
}

.customerContentName {
	color: #31436b;
	font-size: 18px;
}

ul.orgCustomers li div.t-last {
	border-bottom: none;
	border-left: 1px solid #333333;
	padding: 0px;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
}

ul.orgCustomers li div.t-last input {
	margin: 5px;
}

div.orgCustomerButtons {
	overflow: hidden;
	margin-top: 10px;
}


/*-- End Organization Customers --*/


/*-- Profile Card Content --*/

.tab_content .org2col1 {
	overflow: hidden;
	width: 100%;
	max-width: 370px;
	min-height: 220px;
}

.tab_content .org2col1 .contactInfo.proCardGeneral img {
	width: 75px;
	position: absolute;
}

.tab_content .org2col1 .contactInfo.proCardGeneral p {
	margin-bottom: 0;
	line-height: 1.6em;
	/* margin-left: 85px Moved to .contactInfoDiv PW 62965 */
}

.tab_container {
	min-height: 220px;
}

.tab_content .org2col1 .contactInfo .contactInfoDiv {
	overflow: hidden;
	position: relative;
}

#contactGroups ul {
    width: 100%;
    padding-left: 5px;
}

/*-- End Profile Card Content --*/


/*-- Contact Page: Message History: Fancybox PopUp --*/

#readMessage {
	width: 99%;
}

#readMessage #messageFrom,
#readMessage #messageTo,
#readMessage #messageDate,
#readMessage #messageSubject {
	font-size: 14px;
	line-height: 1.6em;
}

#readMessage #messageFrom {
	margin-top: 5px;
}

#readMessage .messageDiv {
	width: 90%;
	margin: 10px auto 15px;
}


/*-- End Contact Page: Message History: Fancybox PopUp --*/


/*--- Groups Drag-N-Drop ---*/

#grdCompanyGroups table tr.t-alt {
	background-color: #f5f7fa !important;
}

#grdCompanyGroups table tr.dnd_DragClass.t-alt td {
	background-color: #f5f7fa !important;
}

#grdCompanyGroups table {
	border-collapse: collapse;
}

tr.dnd_DragClass td {
	border-top: 1px solid #ddd !important;
	border-bottom: 1px solid #ddd !important;
}

tr.dnd_DragClass td:first-child {
	background: url(../images/arrowUpDown.png) no-repeat 5px center transparent !important;
}

tr.dnd_DragClass {
	background: none transparent;
	z-index: 500;
}


/*-- End --*/


/* ContactGroupMembers */

.membersContactCardCol {
	width: 16px;
}

.contactCardImage {
	vertical-align: bottom;
}


/* end ContactGroupMembers */


/* Add to Group */

#AddContactToContactGroup {
	height: 100%;
	position: relative;
	overflow: hidden;
}

label.addToGroupTitle {
	font-size: 26px;
	color: #585F70;
}

.addToGroupImg {
	margin-right: 2px;
}

#addToGroupList {
	margin-left: 40px;
	padding-left: 10px;
}

#addToGroupList li {
	line-height: 1.4em;
	font-size: 15px;
}

#addToGroupList input {
	margin-right: 2px;
}

.addToGroupButton {
	background: #FAF3EA;
	/*#CED6EB;*/
	overflow: hidden;
	width: 100%;
	bottom: 0;
	right: 0;
	position: relative;
	height: 40px;
}


/* End Add to Group */


/* HoldingTank */

.fancyBoxThrow {
	margin: 5px;
}

.fancyBoxThrow p {
	clear: both;
	overflow: hidden;
	margin-bottom: 5px;
}

.fancyBoxThrow p label {
	float: left;
	width: auto;
	margin-right: 7px;
}

.errorHoldingTank {
	margin: 15px;
	color: #dd0000;
	font-weight: bold;
	font-size: 16px;
}

#holdingTankForm {
	margin: 10px 0;
}

#holdingTankForm p {
	margin: 0 0 10px 0;
}

.question {
	font-weight: bold;
	display: block;
	margin-bottom: 3px;
}

#submitHoldingTank {
	overflow: hidden;
	margin: 15px;
}


/* End HoldingTank */


/* Report Header (Created with Advanced Genealogy Report) */

#reportHeader {
	padding: 10px;
}

#reportHeader .t-content {
	overflow: hidden;
	padding: 5px;
}

.reportHeaderItem {
	display: block;
	float: left;
	margin: 0 15px 0 0;
	line-height: 1.6em;
}

#reportHeader .listItem {
	float: left;
	-webkit-border-radius: 8px 8px;
	background-color: #3363C9;
	color: white;
	text-shadow: #18425D -1px -1px 0px;
	padding: 2px 7px;
	margin: 2px 4px;
}

#headerButtons > div > .rightButton {
	width: 140px;
	text-align: center;
}
.hidden {
	display: none;
}

#periodDetails {
	overflow: hidden;
}

#periodDetails h3 {
	float: left;
}

#periodDetails .periodDetail {
	padding-right: 15px;
}

h3 span#period {
	color: #6077A8;
	font-size: 13px;
	margin-left: 5px;
	line-height: 1.6em;
	font-weight: bold;
}

h3 span#bonusName {
	color: #6077A8;
	font-size: 13px;
	margin-left: 5px;
	line-height: 1.6em;
	font-weight: bold;
}

div.periodDetail span {
	color: #6077A8;
	font-size: 12px;
	margin-left: 5px;
	line-height: 1.6em;
}

.dataHeader {
	font-weight: bold;
}

.grdBonusPeriods {
	overflow: hidden;
}

.grdBonusDetail {
	overflow: hidden;
}

#fancyBoxLargeContainer {
	color: #333333;
}

#fancyBoxLargeHeader {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.6em;
	margin-bottom: 5px;
}

#fancyBoxLargeContent table {
	width: 100% !important;
	border-collapse: collapse;
	font-size: 14px;
}

#fancyBoxLargeContent table tr {
	width: 100%;
}

tr.arrowDown td {
	background: url(../images/gridRowBackgroundSprite.jpg) repeat-x 0 -24px;
	border-bottom: 1px solid #999999;
}

tr.results td {
	border-top: 1px dotted #666666;
	padding: 2px 7px;
	cursor: pointer;
}

tr.results:hover {
	background: url(../images/gridRowBackgroundSprite.jpg) repeat-x 0 -48px;
}

tr.resultsInfo {
	display: none;
}

tr.show {
	display: table-row;
}

tr.resultsInfo table {
	width: 95%;
	margin: 5px 25px 15px;
	float: left;
}

tr.resultsInfo table td {
	font-size: 12px;
}

.topright {
	font-weight: bold;
	text-align: right;
}

.periodIsPaid {
	background: url(../images/periodIsPaid.png) no-repeat center top;
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

tr.resultsInfo table td.label {
	text-align: right;
	padding-right: 7px;
	color: #999999;
}

tbody.resultsInfo {
	float: left;
}


/*----- COMMISSIONS PANELS -----*/

.panelHeaderComm {
	background: url(../images/panelHeaderBkgComm.png) repeat-x transparent;
	height: 35px;
}

.panelHeaderComm h1 {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	background: url(../images/panelHeaderLComm.png) no-repeat left top;
	line-height: 15px;
	color: #585f70;
	float: left;
	padding-top: 5px;
	padding-left: 8px;
	height: 30px;
}

.panelHeaderComm h1 span#checkNumber {
	color: #585F70;
}

.panelHeaderComm h1 span#payoutDate {
	color: #585F70;
}

.panelHeaderRComm {
	background: url(../images/panelHeaderRComm.png) no-repeat right top;
	height: 39px;
	width: 6px;
	position: relative;
	float: right;
}


/*--- END COMMISSIONS PANELS ---*/


/*----- VOLUMES -----*/

ul.results {
	padding-left: 1em;
}

ul.results li {
	line-height: 1.4em;
}

#VolumeDetails ul.results {
	padding: 1em;
}

#VolumeDetails ul.results li {
	position: relative;
}

#VolumeDetails ul.results li ul.results {
	margin-left: 1em;
	padding: 0;
}

#volumesTable .t-state-hover,
#volumesTable .t-state-hover:hover {
    background-color: #ffffff;
    background: none;
    outline: none;
    border-color: #ddd;
    cursor: default;
}

#volumesTable .volumeSelected {
    background: none;
}

.volumeSelected a {
	outline: none;
}

.dollar,
.t-grid table#volumesTable th.dollarHeader {
	text-align: right;
}

.volumeGenType {
	position: absolute;
	padding: 5px 20px 0;
	font-size: 14px;
	color: #fafafa;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	right: 15px;
	top: 8px;
}

.dataDescVolumes {
	text-align: right;
}


/*--- END VOLUMES ---*/


/*----- STATEMENT -----*/

.commissionsStatementsDiv {
	margin-bottom: 1em;
	line-height: 1.6em;
}

#companyInfo {}

#companyInfo .companyName {
	margin: 15px 25px 0 0;
	padding: 0;
	font-size: 1.6em;
	text-align: left;
}

#companyInfo .companyAddress {
	margin: 0;
	padding: 0;
}

#repInfo table {
	border-collapse: collapse;
}

#repInfo table td.repInfoLabel {
	padding-right: 7px;
	color: #888888;
}

.repAddress {
	margin-top: 1.5em;
	font-weight: bold;
}

.repAddress ul {
	margin: 0;
	padding: 0;
}

#periodTotals table {
	border-collapse: collapse;
}

#periodTotals table tr td {
    padding: 2px 5px ;
    margin-bottom: 5px;
}

#periodTotals table tr td:before {
    margin-bottom: 3px;
}

#periodTotals table tr td.periodDesc {
	padding-right: 10px;
}

#periodTotals table tr.periodTotalRow {
	font-size: 1.2em;
	font-weight: bold;
	text-align: right;
}

@media screen and (min-width: 768px) {
     #periodTotals table tr td.periodAmt {
	    text-align: right;
    }

    #periodTotals table tr.periodTotalRow td {
	    border-top: 1px solid #aaaaaa;
    }
}

#periodTotals .periodTotal {
	text-align: left;
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {

    #periodTotals table tr td {
        margin: 0 5px 3px;
        padding: 2px;
    }

    #periodTotals table tr.periodTotalRow {
        text-align: left;
    }

    #periodTotals table tr.periodTotalRow td {
        display: inline-block;
        vertical-align: top;
        padding: 2px;
        margin-bottom: 3px;
    }

    #periodTotals table tr.periodTotalRow td.periodTotal {
        font-weight: bold;
    }
}

#periodDetails {
	clear: both;
    margin-top: 15px;
}

#periodDetails .panel {
	margin: 0;
}

#periodDetails .commissionsDetail {
	margin-bottom: 1.5em;
}

#periodDetails .commissionsDetail table {
	border-collapse: collapse;
    width: 100%;
}

#periodDetails .commissionsDetail table tr td {
	padding: 2px 5px;
	border-top: 1px solid #FFFFFF;
}

#periodDetails .commissionsDetail table tr td:first-child {
	border-left: none;
}

#periodDetails .commissionsDetail .periodHeader {
	color: #6077A8;
	font-size: 1.2em;
	margin: 0;
}

.commissionsDetail .periodDataHeader {
	padding: .3em .6em;
	background: #eee;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

.commissionsDetail .periodDataHeader:first-child {
	border-left: none;
}

#projectionWarning {
	margin-bottom: 5px;
}

#projectionWarning span {
	font-size: 18px;
	font-weight: bold;
	color: Red;
	padding: 0 10px;
}


/*--- END STATEMENT ---*/


/*--- COMP REPORT ---*/


/* Qualification Details */

.compReport {
	padding: 10px;
}

.compReport .compBreakdown,
.compReport .compAchievement {
	width: 100%;
	margin: 0 0 15px;
	padding: 10px 15px;
	border: 1px solid #999999;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    display: inline-block;
}

.compReport h3 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0 5px;
}

.compReport table {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.compReport table td {
	padding: 0 0 8px;
}

.compReport table td.CompQualSummaryLeft {
    width:100%
}

.compReport table td.CompQualSummaryCheck {
	width: 100%;
	padding: 0 5px;
}

.compReport table td.CompQualSummaryValue {
	width: 100%;
}

.compReport table td span {
	font-size: 1.1em;
	line-height: 1.4em;
}

.compReport table td span.CompQualSummaryValue {
	white-space: nowrap;
}


/*----- Dynamic Engine -----*/

.CompYes {
	color: green;
}

.CompNo {
	color: red;
}

.NoWrapGrid {
	overflow: auto;
	overflow-y: hidden;
	overflow-x: hidden;
	padding: 0 0 15px;
}

.NoWrapGrid td {
	white-space: nowrap;
}


/*----- End Dynamic Engine -----*/


/*--- END COMP REPORT ---*/


/* Commissions details responsive styling */

#commissions .k-hierarchy-col, #commissions .k-hierarchy-cell {
	display: none !important;
}

#commissions .commissions-mobile-details-container {
	margin-left: 30px;
}

@media screen and (max-width: 768px) {
	#commissions .responsive-table table {
		display: grid;
	}

	#commissions .responsive-table thead {
		display: none;
	}

	#commissions .responsive-table td[title]:before {
		display: initial;
		padding-right: 8px;
	}

	#commissions .responsive-table td {
		padding: 0 !important;
	}

	#commissions .responsive-table tr {
		padding: 5px 8px;
	}

	#commissions .responsive-table .responsive-hidden {
		display: none;
	}

	#commissions .responsive-table .k-hierarchy-cell {
		display: inline-block !important;
		position: absolute;
		right: 10px;
		width: auto;
		height: auto;
		line-height: 0;
	}

	#commissions .responsive-table .k-hierarchy-cell:before {
		margin: 0;
	}

	#commissions .responsive-table .k-hierarchy-cell .k-icon {
		outline: 0;
		box-shadow: none;
		width: 25px;
		height: 25px;
	}

	#commissions .responsive-table .k-hierarchy-cell .k-icon:before {
		font-family: FontAwesome;
		font-size: 20px;
		color: #666;
		position: absolute;
		right: 8px;
		top: 3px;
	}

	#commissions .responsive-table .k-hierarchy-cell .k-i-expand:before {
		content: "\f0d7";
	}

	#commissions .responsive-table .k-hierarchy-cell .k-i-collapse:before {
		content: "\f0d8";
	}

	#commissions .responsive-table .k-picker-wrap .k-icon.k-i-calendar,
	.form-group .t-picker-wrap .t-icon.t-icon-calendar {
		font-family: 'FontAwesome' !important;
		font-size: 16px;
		background-image: none;
		color: #666;
		position: absolute;
		right: 6px;
		top: 5px;
		text-indent: 0;
		line-height: normal;
	}

	#commissions .responsive-table .detail-row-item {
		margin-left: 15px;
	}

	#commissions .commissions-statement-table td:nth-child(3) {
		font-weight: 700;
	}
}

@media screen and (max-width: 1400px) {
	.commissions-wrapper {
		width: 100%;
	}
}

@media screen and (min-width: 1700px) {
	.commissions-wrapper {
		max-width: 1700px;
	}
}
#settingsHeader { padding: 15px 20px 10px; }
	#settingsHeader h1 { font-size: 30px; color: #5E75A7; }

.settingsOdd { clear: left; }

#profile, #settings, #system { width: 475px; float: left; }


#profile .panelContentMain { background-image: url(../Images/icons/settingsProfile.png); }
#settings .panelContentMain { background-image: url(../Images/icons/settingsAccount.png); }
#system .panelContentMain { background-image: url(../Images/icons/settingsSystem.png); }

.settingsPanels .panelContentMain {
	background-repeat: no-repeat;
	background-position: 350px 20px;
	padding: 10px;
	}

.settingsPanels .panelContentMain > ul {
	margin: 0 0 1em;
	padding: 0;
	}

.settingsPanels .panelContentMain > ul > li {
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	}

.settingsNotification, .settingsFbFanPage { margin: 15px 20px; padding: 0; line-height: 1.6em; }
.settingsNotification h3, .settingsFbFanPage h3, .externalApplications h3 { font-size: 1.6em; margin-bottom: .25em; }

.settingsNotification { }

.settingsFbFanPage { }

.externalApplications { width: 500px; margin-left: 20px; }

.externalApplicationName { font-weight: bold; }


/* FacebookListFanPages */
.settings_FbFanPageSelection {  }
	.settings_FbFanPageSelection p { margin: 15px 20px; line-height: 1.6em; }
.settings_FbFanPage { margin: 15px 20px; padding: 0; line-height: 1.6em; }
.settings_FbFanUpdate { }

/* Settings Apps Edit Page */
.info-collect { margin: 15px 20px; padding: 0; line-height: 1.6em; }
	.info-collect li label {
		display: block;
		width: 80px;
		float: left;
		clear: left;
		margin-right: 5px;
		text-align: right;
	}
.settings_AppsInfoSave { margin: 15px 20px; }
/*----- EDIT PROFILE PAGE -----*/

.editProfile h3.editProfileHeader {
	clear: both;
	font-size: 20px;
	color: #33539B;
	margin: 10px 0px;
	font-weight: normal;
}

.editProfileForm {
	clear: both;
	overflow: hidden;
	margin-bottom: 10px;
}

.editProfileForm p label {
	display: block;
	margin-bottom: 3px;
}

.editProfileForm p input,
.editProfileForm p select {
	display: block;
	width: 175px;
}

.editProfileFormLong {
	clear: both;
}

.editProfileFormLong p {
	float: left;
	width: 400px;
	margin-bottom: 10px;
}

.editProfileFormLong p input {
	width: 379px;
}

.editProfileAddress {
	clear: both;
	float: left;
	overflow: hidden;
	margin-bottom: 10px;
}

.editProfileAddress p {
	float: left;
	width: 200px;
}

.editProfileAddress p label {
	display: block;
	margin-bottom: 3px;
}

.editProfileAddress p input,
.editProfileValidationAddress p select {
	display: block;
	margin-bottom: 5px;
}

.editProfileAddress p.editProfileFormLong input {
	width: 379px;
}

.editProfileAddress p.editProfileFormLong {
	float: none;
	width: 400px;
	margin-bottom: 10px;
}

.editProfileValidation {
	overflow: unset;
}

.editProfileValidation .field-validation-error {
	right: 0;
}

.editProfileValidation .field-validation-error::before {
    display: none;
}

.editProfileValidation p.field-validation-error {
	right: 0;
	top: 0;
	float: none;
	width: auto;
	line-height: 1.4em;
	font-size: 1em;
}

.editProfileForm p input.input-validation-error,
.editProfileForm p select.input-validation-error {
	width: 179px;
}

.editProfileAddress p.editProfileFormLong input.input-validation-error {
	clear: both;
	float: left;
	width: 383px;
}

.editProfileButton {
	clear: both;
	margin: 10px 10px 5px 0;
}

.editProdiletextArea {
	width: 380px;
	height: 60px;
}

.editProfileFormLong .check-box {
	display: inline;
	margin-left: 5px;
	width: auto;
	vertical-align: bottom;
}


/* Edit My Profile */
.edit-my-profile .form.no-adaptive {
	display: flex;
	flex-direction: column;
}

.edit-my-profile .form.no-adaptive .row {
	width: 100%;
	display: flex;
}

.edit-my-profile .form.no-adaptive label {
	font-weight: 600;
}

.edit-my-profile .card-container {
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	padding: 15px 30px;
	border-radius: 5px;
	width: 50%;
	margin: 0 15px;
}

.edit-my-profile .card-container h3 {
	font-weight: 600;
	margin-bottom: 30px;
}

.edit-my-profile .btn-container-fixed {
	width: 100%;
	padding: 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	margin: 0;
	background: rgba(152,152,152,0.8);
	text-align: right;
	padding-right: 90px;
}

.edit-my-profile #editProfileSaveButtonContainer .btn {
	font-size: 18px;
}

.edit-my-profile .edit-profile-checkbox-container {
	margin-top: 20px;
}

.edit-profile-checkbox-container input[type=checkbox] {
	margin: 0 8px 0 0;
}

@media screen and (max-width: 1024px) {
	.edit-my-profile .form.no-adaptive .row {
		flex-wrap: wrap;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.edit-my-profile .card-container {
		width: 100%;
		margin-bottom: 25px;
	}
}

@media screen and (max-width: 767px) {
	.edit-my-profile .btn-container-fixed {
		text-align: left;
	}

	.edit-my-profile #editProfileSaveButtonContainer .btn {
		font-size: 16px;
		margin: 0;
	}
}

 /* Withdrawal Accounts */
 .withdrawal-account-edit {
	width: auto;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	padding: 15px 30px;
	border-radius: 5px;
	margin: 50px 10%;
}

.withdrawal-account-edit .form-group {
	display: flex;
	flex-direction: column;
	max-width: 50%;
}

.withdrawal-account-edit h3.editHeader {
	font-weight: 600;
	margin-bottom: 30px;
	margin-top: 15px;
	font-size: 18px;
}

.withdrawal-account-edit .form-group input {
	padding: 5px 0 !important;
	height: auto !important;
	margin: 0 !important;
}

.withdrawal-account-edit .form-group .t-combobox {
	width: auto;
}

.withdrawal-account-edit .form-group .t-dropdown-wrap input {
	border: none !important;
}

.withdrawal-account-edit .form-group .t-dropdown-wrap .t-select {
	height: 28px !important;
	padding: 2px 4px 0;
}

.withdrawal-account-edit .button-row {
	padding-top: 15px;
}

.withdrawal-account-edit .button-row .btn {
	margin-right: 8px;
}

.withdrawal-account-edit .back-button {
	border: none;
}

.withdrawal-account-edit .withdrawal-notice {
	border-radius: 5px;
	background: #d2d2d2;
	padding: 10px 15px;
	max-width: 650px;
}

@media screen and (max-width: 1024px) {
	.withdrawal-account-edit .form-group {
		max-width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.withdrawal-account-edit {
		margin: 40px 0;
	}
}

/*--- END EDIT PROFILE PAGE ---*/

#fancy_bg.fancyFancyBg { position: relative; }
#fancy_ajax.fancyFancyAjax {
	position: relative !important;
	width: 340px; height: 320px;
}
#fancy_content.fancyFancyContent {
	position: relative;
	left: 10px;
	top: -100%;
	padding-top: 10px;
}

#addFavoriteContainer {
	position: relative;
	overflow: hidden;
	font-size:12px;
}
	#addFavoriteContainer h3 {
		font-size: 20px;
		color: #0060A5;
	}
	#addFavoriteContainer h3 img {
		margin-right: 5px;
	}
#addFavoriteDescription {
	font-size: 14px;
	margin: 10px 0;
}

#fancyBoxContent { position: relative; z-index: 10200; overflow: hidden; }

#fancyBoxLargeContainer { color: #333333; position: relative; }
#fancyBoxLargeHeader {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.6em;
	margin-bottom: 5px;
}
#fancyBoxLargeContent { position: relative; z-index: 10200; overflow: hidden; }
#fancyBoxLargeContent table {
	width: 98%;
	border-collapse: collapse;
	font-size: 14px;
}
#fancyBoxLargeContent table tr { width: 100%; }
.fancyBoxLargeFooter { }

#fancyBoxSmallHeader {
	font-size: 24px;
	color: #333333;
	margin: 0 5px 10px 0;
	line-height: 1.6em;
	font-weight: bold;
	border-bottom: 1px solid #aaa;
}
#fancyBoxSmallHeader h3 {
	margin-top: 0;
}
#fancyBoxSmallContent ul {
	font-size: 14px;
	padding-left: 1em;
	margin: 0 0 1em;
}
#fancyBoxSmallContent ul li { line-height: 1.4em; }

.fancyBoxSmallIndicatorContainer  {position:absolute; top:75px; left:125px;z-index:10000; }
.fancyBoxMediumIndicatorContainer {position:absolute; top:175px; left:250px;z-index:10000; }
.fancyBoxLargeIndicatorContainer  {position:absolute; top:325px; left:250px;z-index:10000; }



/*====== CUSTOM CSS FOR SPECIFIC CLIENTS =====*/
/*====== NewULife Dash Facelift - NW #872831 =====*/
/*====== Updated: October 2025 - 2025 Brand Guidelines =====*/

/* ========================================
   ALL GRIDS OVERRIDES - NW #872831
   Moved from shared Content/css/custom.css to client CSS
   ======================================== */

.k-grid tr td,
.k-grid .k-grid-header th,
.t-grid tr td,
.t-grid tr td.t-last,
.t-grid th.t-header .t-link {
    padding: 5px 8px !important;
    white-space: nowrap;
}

@media screen and (max-width: 991px) {
    .t-grid.scrollable-table.t-grid .t-last,
    .t-grid.scrollable-table.t-grid td {
        padding: 5px 8px;
    }
}

@media screen and (max-width: 1024px) {
    .k-webkit .k-pager-numbers + .k-link {
        margin-left: 65px;
    }
}

/* ========================================
   DASHBOARD LAYOUT - Early Breakpoint at 1500px
   Forces two-column layout to stack to single column earlier
   This gives widgets more room before they get cramped
   ======================================== */

/* Between 992px and 1500px - Force single column layout */
@media (max-width: 1500px) and (min-width: 992px) {
    /* Left side widgets - full width */
    #WidgetGroupLeftSide,
    .dashboard #WidgetGroupLeftSide,
    #main .dashboard #WidgetGroupLeftSide {
        width: 100% !important;
        float: none !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    /* Right side widgets - full width, stacked below */
    #WidgetGroupRightSide,
    .dashboard #WidgetGroupRightSide,
    #main .dashboard #WidgetGroupRightSide {
        width: 100% !important;
        float: none !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        clear: both !important;
    }

    /* Override Bootstrap col-md-8 and col-md-4 for dashboard */
    .dashboard .col-md-8,
    .dashboard .col-lg-8,
    #main .col-md-8,
    #main .col-lg-8 {
        width: 100% !important;
        float: none !important;
    }

    .dashboard .col-md-4,
    .dashboard .col-lg-4,
    #main .col-md-4,
    #main .col-lg-4 {
        width: 100% !important;
        float: none !important;
    }

    /* Row should not have negative margins causing issues */
    .dashboard .row,
    #main .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ========================================
   FONT DECLARATIONS
   ======================================== */

/* Avenir Next LT Pro - Bold (Headings) */
@font-face {
    font-family: 'Avenir Next LT Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../Fonts/AvenirNextLTPro-Bold.woff2) format('woff2'),
         url(../Fonts/AvenirNextLTPro-Bold.woff) format('woff');
}

/* Avenir Next LT Pro - Regular */
@font-face {
    font-family: 'Avenir Next LT Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../Fonts/AvenirNextLTPro-Regular.woff2) format('woff2'),
         url(../Fonts/AvenirNextLTPro-Regular.woff) format('woff');
}

/* Inter Variable - Body Text */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../Fonts/InterVariable.woff2) format('woff2-variations'),
         url(../Fonts/InterVariable.woff2) format('woff2');
}

/* ========================================
   BASE STYLES
   ======================================== */

/* ========================================
   TYPOGRAPHY - Avenir Next + Inter
   ======================================== */

/* H1 - Avenir Next Heavy (40pt / 2.5rem) */
h1 {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.5rem !important; /* 40px at 16px base - per brand guide */
    line-height: 1.2 !important;
    color: #0f100f !important;
}

/* H2 - Avenir Next Heavy (28pt / 1.75rem) */
h2 {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important; /* 28px at 16px base - per brand guide */
    line-height: 1.3 !important;
    color: #0f100f !important;
}

/* H3 - Avenir Next Bold (23pt / 1.5rem) */
h3 {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important; /* 24px at 16px base */
    line-height: 1.4 !important;
    color: #0f100f !important;
}

/* H4 - Avenir Next Bold (20pt / 1.25rem) */
h4 {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important; /* 20px at 16px base */
    line-height: 1.4 !important;
    color: #0f100f !important;
}

/* H5 - Avenir Next Demi Bold (20pt / 1.25rem) */
h5 {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important; /* 20px at 16px base */
    line-height: 1.4 !important;
    color: #0f100f !important;
}

/* H6 - Inter Semi Bold (17pt / 1.0625rem) */
h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.0625rem !important; /* 17px at 16px base */
    line-height: 1.4 !important;
    color: #0f100f !important;
}

/* Body Text - Inter Regular (16px base) */
body {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* UI Elements - Inter */
a, button, li, label, input, select, textarea {
    font-family: 'Inter', sans-serif !important;
}

/* ========================================
   KENDO UI ICON FONT PRESERVATION
   Prevents Kendo grid expand/collapse icons from showing as garbled text
   The k-icon class uses WebComponentsIcons font for expand/collapse arrows
   ======================================== */

/* Preserve Kendo UI icon font - must override the global font-family */
.k-icon,
.k-i-expand,
.k-i-collapse,
.k-i-plus,
.k-i-minus,
.k-i-arrow-chevron-right,
.k-i-arrow-chevron-down,
.k-treeview .k-icon,
.k-grid .k-icon,
.k-hierarchy-cell .k-icon,
.k-scheduler-table .k-icon,
a.k-icon,
span.k-icon,
.k-tool-icon {
    font-family: 'WebComponentsIcons' !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    text-transform: none !important;
    speak: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Kendo Grid hierarchy cell icons - ensure proper display */
.k-grid .k-hierarchy-cell .k-icon,
.k-grid .k-hierarchy-cell .k-i-expand,
.k-grid .k-hierarchy-cell .k-i-collapse,
.k-grid td.k-hierarchy-cell a.k-icon {
    font-family: 'WebComponentsIcons' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    text-align: center !important;
    vertical-align: middle !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Icon hover states for hierarchy cells */
.k-grid .k-hierarchy-cell .k-icon:hover,
.k-grid .k-hierarchy-cell a.k-icon:hover {
    color: #003460 !important;
    text-decoration: none !important;
}

/* ========================================
   KENDO GRID HIERARCHY CELL - Fix Arrow Overlap
   Ensures expand/collapse arrow doesn't overlap with content
   ======================================== */

/* Hierarchy column width - ensure consistent space for expand arrow */
.k-grid col.k-hierarchy-col,
.k-grid .k-hierarchy-col,
.recentStatistics-grid col.k-hierarchy-col,
.recentStatistics-grid .k-hierarchy-col {
    width: 32px !important;
    min-width: 32px !important;
}

/* Hierarchy cell - proper sizing and positioning */
.k-grid .k-hierarchy-cell,
.k-grid td.k-hierarchy-cell,
.k-grid th.k-hierarchy-cell,
.recentStatistics-grid .k-hierarchy-cell,
.recentStatistics-grid td.k-hierarchy-cell {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 4px 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: visible !important;
    position: relative !important;
}

/* Ensure the expand/collapse anchor is properly positioned */
.k-grid .k-hierarchy-cell a.k-icon,
.k-grid td.k-hierarchy-cell a.k-i-expand,
.k-grid td.k-hierarchy-cell a.k-i-collapse,
.recentStatistics-grid .k-hierarchy-cell a.k-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* First column after hierarchy should have proper left padding */
.k-grid .k-hierarchy-cell + td,
.k-grid td.k-hierarchy-cell + td,
.recentStatistics-grid .k-hierarchy-cell + td {
    padding-left: 10px !important;
}

/* Hide border on hierarchy cell for cleaner look */
.k-grid .k-hierarchy-cell,
.recentStatistics-grid .k-hierarchy-cell {
    border-left: none !important;
}

/* ========================================
   WIDGET TEXT & LIST ITEMS - Improved Readability
   ======================================== */

/* Widget tile/list containers */
.tile-container,
.list-container {
    font-family: 'Inter', sans-serif !important;
}

/* List item labels/titles - bold to match Figma */
/* More specific selectors to override competing styles */
.list-title,
.tile-container .list-title,
.list-item .list-title,
.list-item2 .list-title,
.tile-container .list .list-content p.list-title,
.tile-container .list .list-content .list-title,
#compReportContent .list-title,
#compReportContent p.list-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; /* Increased to match Figma mockup */
    font-weight: 700 !important; /* Bold to match Figma */
    color: #4d4f53 !important; /* Darker for better contrast like Figma */
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

/* List item values - larger size to match Figma */
/* More specific selectors to override competing styles */
.list-value,
.tile-container .list-value,
.list-item .list-value,
.list-item2 .list-value,
.tile-container .list .list-content p.list-value,
.tile-container .list .list-content .list-value,
#compReportContent .list-value,
#compReportContent p.list-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important; /* Increased to match Figma mockup */
    font-weight: 400 !important;
    color: #0f100f !important;
    line-height: 1.6 !important;
}

/* Remove gray boxes from Business Snapshot component */
/* Specific to #compReportContent to avoid affecting other tile-containers */
#compReportContent.tile-container .list .list-content,
#compReportContent .tile-container .list .list-content,
div.tile-container#compReportContent .list .list-content {
    background-color: transparent !important;
    border: none !important;
}

/* Widget table cells */
.widget-table td,
.widget-table th,
.t-grid td,
.t-grid th {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important; /* Increased for better readability */
    line-height: 1.6 !important;
}

/* Widget table headers */
.widget-table th,
.t-grid th,
.t-header {
    font-weight: 600 !important;
    color: #0f100f !important;
}

/* General widget content text */
.widget p,
.dashboardWidget p,
.panel p,
.panelContentMain p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Widget labels and spans */
.widget label,
.dashboardWidget label,
.widget span:not(.CompNo):not(.CompYes):not(.fa):not([class*="fa-"]),
.dashboardWidget span:not(.CompNo):not(.CompYes):not(.fa):not([class*="fa-"]) {
    font-size: 15px !important;
}

/* Font Awesome icons - preserve their size */
.widget .fa,
.widget [class*="fa-"],
.dashboardWidget .fa,
.dashboardWidget [class*="fa-"] {
    font-size: inherit !important; /* Don't override font-awesome icon sizes */
}

/* Social Networks widget - larger icons */
/* Target social icons specifically within panelContentContainer tables with inline styles */
.panelContentContainer table td[style*="FONT-SIZE: 50px"] .fa-facebook,
.panelContentContainer table td[style*="FONT-SIZE: 50px"] .fa-twitter,
.panelContentContainer table td[style*="FONT-SIZE: 50px"] .fa-youtube,
.panelContentContainer table td[style*="FONT-SIZE: 50px"] .fa-instagram,
.panelContentContainer table td[style*="font-size: 50px"] .fa-facebook,
.panelContentContainer table td[style*="font-size: 50px"] .fa-twitter,
.panelContentContainer table td[style*="font-size: 50px"] .fa-youtube,
.panelContentContainer table td[style*="font-size: 50px"] .fa-instagram {
    font-size: 64px !important; /* Override inline 50px with larger 64px for better visibility */
    color: #003460 !important; /* Navy blue brand color */
    transition: all 0.3s ease !important;
}

/* Hover state for social icons */
.panelContentContainer table td[style*="FONT-SIZE: 50px"] a:hover .fa-facebook,
.panelContentContainer table td[style*="FONT-SIZE: 50px"] a:hover .fa-twitter,
.panelContentContainer table td[style*="FONT-SIZE: 50px"] a:hover .fa-youtube,
.panelContentContainer table td[style*="FONT-SIZE: 50px"] a:hover .fa-instagram,
.panelContentContainer table td[style*="font-size: 50px"] a:hover .fa-facebook,
.panelContentContainer table td[style*="font-size: 50px"] a:hover .fa-twitter,
.panelContentContainer table td[style*="font-size: 50px"] a:hover .fa-youtube,
.panelContentContainer table td[style*="font-size: 50px"] a:hover .fa-instagram {
    color: #0f100f !important; /* Black on hover */
    transform: scale(1.1) !important; /* Slight grow effect */
}

/* ========================================
   QUICK LINKS WIDGET - Larger Icons
   ======================================== */

/* Target Quick Links icons VERY specifically using:
   - freeTextWidget class (not other widget types)
   - table with height: 300px (unique to Quick Links widget)
   - td with TEXT-ALIGN: center (Quick Links grid cells)
   - .icon span class (Quick Links icons specifically)
   This ensures we ONLY affect Quick Links and not other icon widgets */

/* Quick Links icons - Much larger and prominent */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
    font-size: 64px !important; /* Much larger - increased from 48px to 64px */
    display: inline-block !important;
    width: 80px !important; /* Explicit width to ensure proper sizing */
    height: 80px !important; /* Explicit height to match width */
    line-height: 80px !important; /* Center icon vertically */
    margin-bottom: 12px !important; /* More spacing below icon */
    color: #003460 !important; /* Navy blue brand color */
    transition: all 0.3s ease !important;
    text-align: center !important;
}

/* Hover effect for Quick Links icons */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"]:hover .icon,
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"]:hover .icon,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"]:hover .icon,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"]:hover .icon {
    color: #0f100f !important; /* Black on hover */
    transform: translateY(-3px) scale(1.05) !important; /* Slight lift and grow effect */
}

/* Quick Links link text styling */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #003460 !important;
    line-height: 1.5 !important;
    display: block !important; /* Make link block-level for better spacing */
}

/* Quick Links link hover */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a:hover,
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a:hover,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a:hover,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a:hover {
    color: #0f100f !important;
    text-decoration: underline !important;
}

/* Table cell padding for Quick Links - Give icons breathing room */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
    padding: 20px 15px !important; /* Generous padding for better spacing */
    vertical-align: top !important;
}

/* ========================================
   QUICK LINKS WIDGET - Responsive Layout Fix
   Fixes icon cutoff issue when screen width decreases
   UX improvements: consistent 3-column grid, better text handling
   Earlier breakpoints to prevent overlap with adjacent widgets
   ======================================== */

/* Convert table-based layout to flexbox for responsiveness */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"],
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
}

.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] tbody,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] tr,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] tr {
    display: contents !important;
}

/* Base cell styling - always 3 columns with consistent height */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px 8px !important;
    min-height: 130px !important;
}

/* Link text - prevent excessive wrapping */
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
.dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
.dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    min-height: 2.6em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* Extra large desktop (1600px+) - full size */
@media (min-width: 1600px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 20px 12px !important;
        min-height: 140px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 14px !important;
    }
}

/* Large desktop (1400px - 1599px) - start scaling */
@media (max-width: 1599px) and (min-width: 1400px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 16px 8px !important;
        min-height: 130px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 52px !important;
        width: 62px !important;
        height: 62px !important;
        line-height: 62px !important;
        margin-bottom: 8px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 12px !important;
    }
}

/* Medium-large desktop (1200px - 1399px) - compact mode starts */
@media (max-width: 1399px) and (min-width: 1200px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 12px 4px !important;
        min-height: 110px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 38px !important;
        width: 46px !important;
        height: 46px !important;
        line-height: 46px !important;
        margin-bottom: 6px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

/* Medium desktop (1100px - 1199px) - very compact */
@media (max-width: 1199px) and (min-width: 1100px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 10px 2px !important;
        min-height: 100px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 32px !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        margin-bottom: 4px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }
}

/* Small-medium desktop (992px - 1099px) - ultra compact */
@media (max-width: 1099px) and (min-width: 992px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 8px 2px !important;
        min-height: 90px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 28px !important;
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        margin-bottom: 3px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 8px !important;
        line-height: 1.15 !important;
    }
}

/* Tablet portrait (768px - 991px) - widget is full width, can expand */
@media (max-width: 991px) and (min-width: 768px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 18px 10px !important;
        min-height: 130px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 48px !important;
        width: 58px !important;
        height: 58px !important;
        line-height: 58px !important;
        margin-bottom: 10px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}

/* Large phone / Small tablet (480px - 767px) */
@media (max-width: 767px) and (min-width: 480px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 14px 8px !important;
        min-height: 115px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 40px !important;
        width: 50px !important;
        height: 50px !important;
        line-height: 50px !important;
        margin-bottom: 8px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
}

/* Phone (< 480px) */
@media (max-width: 479px) {
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"],
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] {
        padding: 12px 5px !important;
        min-height: 100px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] .icon,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] .icon {
        font-size: 32px !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        margin-bottom: 6px !important;
    }

    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[style*="height: 300px"] td[style*="text-align: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="TEXT-ALIGN: center"] a,
    .dashboardWidget.freeTextWidget .collapsable-section table[align="center"][style*="height: 300px"] td[style*="text-align: center"] a {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

/* Links within widgets */
.widget a,
.dashboardWidget a,
.list-value a,
.ActionLink {
    font-size: inherit !important; /* Inherit from parent for consistency */
    text-decoration: none !important;
}

.widget a:hover,
.dashboardWidget a:hover,
.list-value a:hover,
.ActionLink:hover {
    text-decoration: underline !important;
}

/* Secondary title text (like "Last Updated") */
.secondary-title,
#101-secondary-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; /* Slightly smaller but still readable */
    font-weight: 400 !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* Form controls sizing */
select.form-control,
input.form-control,
textarea.form-control {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* ========================================
   FREE TEXT WIDGET & QUICK LINKS - Larger Text
   ======================================== */

/* All links in freeTextWidget */
.freeTextWidget a,
.dashboardWidget.freeTextWidget a,
.freeTextWidget .collapsable-section a {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important; /* Increased for better readability */
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #003460 !important;
    text-decoration: none !important;
}

.freeTextWidget a:hover,
.dashboardWidget.freeTextWidget a:hover {
    text-decoration: underline !important;
    color: #0f100f !important;
}

/* Text content in freeTextWidget */
.freeTextWidget,
.freeTextWidget p,
.freeTextWidget td,
.freeTextWidget div,
.dashboardWidget.freeTextWidget {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* Icon labels under Quick Links icons */
.freeTextWidget .icon + br + a,
.freeTextWidget td a {
    display: inline-block !important;
    margin-top: 8px !important;
}

/* ========================================
   BUTTONS - Pill-shaped, Black/Navy
   ======================================== */

.btn, .k-button {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; /* Increased for better readability */
    border-radius: 30px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    padding: 12px 24px !important; /* Increased padding for better touch targets */
}

/* ========================================
   WIDGET STYLES
   ======================================== */

/* Panel Headers - Navy Theme with Curved Lines */
.panelHeader {
    background: #003460 !important;
    background-color: #003460 !important;
    color: #ffffff !important;
    border-radius: 17px 17px 0 0 !important; /* Curved lines on top like collapsable-header */
    overflow: hidden !important; /* Ensure content respects border radius */
    padding: 20px 20px !important; /* Increased vertical padding */
}

/* Panel and Widget containers - Rounded to match header */
.dashboardWidget .panel,
.freeTextWidget .panel,
.panel {
    border-radius: 17px !important; /* Rounded corners for entire panel */
    overflow: hidden !important; /* Ensure children respect border radius */
}

.dashboardWidget,
.freeTextWidget {
    border-radius: 17px !important; /* Rounded corners for widget container */
    overflow: visible !important; /* Allow shadow to show */
}

.panelHeader h1,
.panelHeader h2,
.panelHeader h3,
.panelHeader h4,
.panelHeader h5,
.panelHeader h6,
.panelHeader p,
.panelHeader span,
.panelHeader div {
    color: #ffffff !important;
}

/* Panel header H1 specific sizing */
.panelHeader h1 {
    font-size: 1.75rem !important; /* 28px - match H2 size for widget headers */
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important; /* Remove h1 padding - panelHeader has it */
}

.widget-subheader {
    color: #003460 !important;
}

.widget-info, .widget-info i.fa {
    float: right;
    font-size: 22px;
    cursor: pointer;
    color: #003460 !important;
}

#WidgetGroupRightSide .dashboard .dashboardWidget, #WidgetGroupRightSide .dashboard .widget {
    border: none;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

#main.hkcm .dashboard #dashRep {
    margin-bottom: 0px;
}

.progress-tracking-resource {
    width: 260px;
    height: 260px;
}

.form--container__header {
    margin: 0 auto;
    background: #FFFFFF;
    padding: 15px 20px;
    width: 100%;
    display: flex;
    -o-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    position: initial;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .form--container__header {
        -moz-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.18));
        -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.18));
        filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.18));
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        padding: 20px;
        border-radius: 17px 17px 0 0;
        position: sticky;
        z-index: 10;
    }
}

/* ========================================
   LINKS - Navy Blue
   ======================================== */

a {
    color: #003460 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

a:hover {
    color: #003460 !important; /* Navy blue on hover - brand color */
    text-decoration: underline !important;
}

/* IMPORTANT: Remove underline from ALL button types on hover */
a.btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.button:hover,
a.cta-button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-container a:hover,
.btn-container .btn:hover,
button:hover {
    text-decoration: none !important;
}

/* Override link color for buttons only */
a.button,
a.cta-button,
a.btn {
    color: #ffffff !important; /* White text on buttons */
}

/* ========================================
   PRIMARY BUTTONS - Black with Navy Hover
   ======================================== */

a.button, button {
    padding: 11px 20px 13px !important;
    background-color: #0f100f !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 30px !important;
    border: 1px solid #0f100f !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
}

a.button:hover, button:hover {
    background-color: #003460 !important;
    border-color: #003460 !important;
    text-decoration: none !important;
}

a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Secondary/Ghost Buttons */
a.button.secondary, button.secondary {
    background-color: transparent !important;
    color: #003460 !important;
    border: 1px solid #003460 !important;
}

a.button.secondary:hover, button.secondary:hover {
    background-color: #003460 !important;
    color: #ffffff !important;
}

/* Disabled State */
a.button.disabled, a.button:disabled, button.disabled, button:disabled {
    background-color: #9a9b9c !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.next-button, .back-button {
    position: fixed;
    bottom: 20px;
    z-index: 1000;
}

.next-button {
    right: 20px;
}


.progress-container-text {
    list-style: none;
    display: flex;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: row;
    list-style: none;
    width: 100%;
    padding: 0;
    position: relative;
    margin: 0 auto;
    max-width: initial;
}

.progress-container-text * {
        box-sizing: border-box;
    }

    .progress-container-text li {
        flex-direction: column;
        display: flex;
        -ms-align-items: center;
        -o-align-items: center;
        -webkit-align-items: center;
        align-items: center;
        -o-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        position: relative;
    }

.progress-container-text li:before {
            position: absolute;
            content: '';
            top: 16px;
            left: -50%;
            width: 100%;
            height: 1px;
            background-color: #9A9B9C;
        }

    .progress-container-text :first-child:before {
        content: none;
    }

    .progress-container-text li a {
        width: 100%;
        display: flex;
        flex-direction: column;
        -ms-align-items: center;
        -o-align-items: center;
        -webkit-align-items: center;
        align-items: center;
        -o-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

/* ========================================
   PROGRESS INDICATORS - Navy Theme
   ======================================== */

.progress-container-text li .digit, .progress-container-text li .circle {
    border: 1px solid #003460 !important;
    background-color: #FFFFFF !important;
    font-size: 12px !important;
    color: #003460 !important;
    height: 30px !important;
    width: 30px !important;
    border-radius: 50% !important;
    padding: 15px !important;
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: 2px solid #FFFFFF !important;
    transition: all 0.2s ease !important;
}

.progress-container-text li .digit {
    outline-color: #FFFFFF;
}

.progress-container-text li.active .digit {
    background-color: #003460 !important;
    color: #FFFFFF !important;
}

.progress-container-text li .text {
    text-align: center;
    color: #9a9b9c;
    padding-top: 6px;
    display: none;
    font-size: 12px;
}

.progress-container-text li.active .text {
    color: #003460 !important;
    font-weight: 600 !important;
}

.progress-container-text li.complete:before,
.progress-container-text li.active:before {
    background-color: #003460 !important;
}

    .progress-container-text li:not(:first-child) {
        margin-left: auto;
    }

.button .icon {
    display: none;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    margin-right: 5px;
    width: initial;
    stroke: #FFFFFF;
}

.icon .rotate-90-left {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform-origin: center;
    -o-transform-origin: center;
    -webkit-transform-origin: center;
    transform-origin: center;
}

.rotate-90-left.arrow {
    margin-top: 2px;
}

@media screen and (min-width: 992px) {
    #main.hkcm {
        margin-top: 67px;
    }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (min-width: 768px) {
    a.button.back-button {
        background: none;
        color: #003460;
    }

    a.button.back-button .icon {
        stroke: #003460;
    }

    .progress-container-text {
        margin: 20px auto;
        max-width: 80%;
    }

    .next-button, .back-button {
        position: relative;
        bottom: initial;
        left: initial;
        right: initial;
    }

    .button .icon {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .progress-container-text li .text {
        display: inline-flex;
    }
}

#wrapper .content {
    padding: 0 15px;
}

div#header.hkcm ul#desktopMenu {
    display: flex;
    justify-content: space-between;
}

/*For HKCM menu, we will hide the Logout item in desktop*/
#header.hkcm div.hkcm-menu li.navLogout {
    display: none !important;
}

/* Fix HKCM menu padding to prevent overlap with header border */
#header.hkcm .hkcm-menu li a {
    padding: 0 10px !important; /* Remove bottom padding that causes overlap */
}

/* ========================================
   HKCM CHINA SITE - HEADER MENU ICONS
   Updated for 2025 Brand Guidelines (NW #872831)
   ======================================== */

/* China Site Header Menu - Icon Colors (icon font) */
#header.hkcm .hkcm-menu li a:before {
   
    color: #003460 !important; /* Navy - per 2025 brand guidelines */
   
}

/* China Site Header Menu - Hover State */
#header.hkcm .hkcm-menu li a:hover:before {
    color: #0f100f !important; /* Black hover - per 2025 brand guidelines */
}

/* China Site Header Menu - Active State */
#header.hkcm .hkcm-menu li.active a:before {
    color: #0f100f !important; /* Black for active state */
}

@media screen and (max-width: 991px) {
    #header.hkcm ul#desktopMenu {
        display: none !important;
    }

    /* Hide leftNav-top-menu-container on mobile for China site - show left-mobile-navigation instead */
    #main.hkcm #leftNav-top-menu-container,
    #main.hkcm .newulife-top-menu-container {
        display: none !important;
    }
}



/* ========================================
   FORM INPUTS - Floating Label System
   ======================================== */

.input-wrapper {
    position: relative;
    width: 100%;
    padding-top: 5px;
    text-align: left;
}

.input-wrapper label {
    color: rgb(153, 159, 181) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transform-origin: left top !important;
    transform: translate(12px, 20px) scale(1) !important;
    transition: color 200ms cubic-bezier(0, 0, 0.2, 1),
                transform 200ms cubic-bezier(0, 0, 0.2, 1) !important;
    background: #fff !important;
    padding: 0 4px !important;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    padding: 20px 12px 8px !important;
    color: rgb(3, 7, 18) !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(102, 112, 133, 0.3) !important;
    width: 100% !important;
    min-height: 48px !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.2s ease !important;
}

/* Focus State */
.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: #003460 !important;
    border-width: 2px !important;
    box-shadow: rgb(255, 255, 255) 0 0 0 0,
                rgb(208, 213, 221) 0 0 0 1px,
                rgba(0, 0, 0, 0) 0 0 0 0 !important;
    outline: none !important;
}

/* Hover State */
.input-wrapper input:hover,
.input-wrapper select:hover,
.input-wrapper textarea:hover {
    border-color: rgb(0, 52, 96) !important;
}

/* Label Animation - Focus */
.input-wrapper input:focus + label,
.input-wrapper select:focus + label,
.input-wrapper textarea:focus + label {
    transform: translate(12px, 10px) scale(0.75) !important;
    font-weight: 800 !important;
    color: #0f100f !important;
}

/* Label Animation - Filled */
.input-wrapper input:not(:placeholder-shown) + label,
.input-wrapper select:not(:placeholder-shown) + label,
.input-wrapper textarea:not(:placeholder-shown) + label {
    transform: translate(12px, 10px) scale(0.75) !important;
    font-weight: 800 !important;
    color: #0f100f !important;
}

/* Error State */
.input-wrapper.error input,
.input-wrapper.error select,
.input-wrapper.error textarea {
    border-color: #9a3b26;
}

.input-wrapper.error label {
    color: #9a3b26;
}

.input-wrapper .helper-text {
    font-size: 12px;
    color: #656667;
    margin-top: 4px;
}

.input-wrapper.error .helper-text {
    color: #9a3b26;
    font-weight: 600;
}

/* Placeholder Styling */
input::placeholder,
select::placeholder,
textarea::placeholder {
    color: #9a9b9c;
    opacity: 0.4;
}

/* ========================================
   CARDS & WIDGETS - Modern Shadows
   ======================================== */

/* ========================================
   REP PROFILE CARD - Figma Design Match
   ======================================== */

/* Rep Info Card - Gray Background (merged with loyalty section) */
#WidgetGroupLeftSide #dashRep,
#dashRep.dashboardWidget,
.rep-info-card {
    border: none !important;
    border-radius: 17px 17px 0 0 !important; /* Rounded only on top */
    padding: 20px !important;
    margin-bottom: 0 !important; /* No gap - merged with loyalty */
    background-color: #f5f5f5 !important; /* Gray background like Figma */
    background: #f5f5f5 !important; /* Gray background like Figma */
    box-shadow: none !important; /* No shadow - part of merged container */
    transition: box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

/* Profile Image Container */
#dashRep .profile-image,
.rep-info-card .profile-image {
    flex-shrink: 0 !important;
}

/* Circular Profile Image - base styling */
/* Only shows Avatar.svg fallback for default repImg placeholder */
#dashRep .profile-image img,
#dashRep .repProfileImage,
.rep-info-card .profile-image img,
.rep-info-card .repProfileImage {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background-color: #e0e0e0 !important;
    /* Removed background-image - only apply to default/missing images */
    display: block !important;
}

/* Replace default repImg.jpg with custom Avatar.svg */
/* Only applies when the src contains "repImg" (the system default placeholder) */
#dashRep .profile-image img[src*="repImg"],
#dashRep .repProfileImage[src*="repImg"],
.rep-info-card .profile-image img[src*="repImg"],
.rep-info-card .repProfileImage[src*="repImg"] {
    content: url(../Images/icons/Avatar.svg) !important;
}

/* Rep Info Section */
#dashRep .rep-info,
.rep-info-card .rep-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Rep Name - Large and Bold (Avenir Next) - Matches Figma */
/* Override #WidgetGroupLeftSide .dashboard #dashRep p.rep-name from app.min.css */
#dashRep .rep-name,
#dashRep .rep-name-wrap p,
#dashRep p.rep-name,
#dashRep .rep-name-wrap p.rep-name,
#WidgetGroupLeftSide .dashboard #dashRep p.rep-name,
#WidgetGroupLeftSide .dashboard #dashRep .rep-name-wrap p,
#WidgetGroupLeftSide #dashRep p.rep-name,
.rep-info-card .rep-name,
.rep-info-card .rep-name-wrap p {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important; /* Increased from 22px to match Figma */
    line-height: 1.2 !important;
    color: #0f100f !important;
    margin: 0 0 12px 0 !important; /* Increased margin for better spacing */
    padding: 0 !important;
    text-transform: none !important;
}

#dashRep .rep-name strong,
#dashRep p.rep-name strong,
.rep-info-card .rep-name strong {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important; /* Increased from 22px to match Figma */
    text-transform: none !important;
}

/* Rep Details - Distributor #, Rank, etc. - Larger Size */
#dashRep .rep-ID,
#dashRep .rep-rank,
.rep-info-card .rep-ID,
.rep-info-card .rep-rank {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important; /* Increased to 18px for better readability */
    line-height: 1.6 !important;
    color: #656667 !important;
    margin: 0 0 8px 0 !important; /* More spacing between lines */
    padding: 0 !important;
}

/* Labels ARE semi-bold - "Distributor #:", "Rank:", etc. */
/* Override .dashboardWidget strong rule that applies Open Sans */
#dashRep .rep-ID strong,
#dashRep .rep-rank strong,
.rep-info-card .rep-ID strong,
.rep-info-card .rep-rank strong,
#dashRep.dashboardWidget .rep-ID strong,
#dashRep.dashboardWidget .rep-rank strong {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important; /* Semi-bold for labels */
    font-size: 18px !important; /* Increased to 18px for better readability */
    color: #4d4f53 !important; /* Darker color for labels */
    text-transform: none !important;
}

/* Override any .dashboardWidget label or strong rules */
#dashRep.dashboardWidget label,
#dashRep.dashboardWidget strong,
#dashRep label,
#dashRep strong {
    font-family: 'Inter', sans-serif !important;
    text-transform: none !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 480px) {
    #dashRep,
    .rep-info-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #dashRep .profile-image,
    .rep-info-card .profile-image {
        margin-bottom: 12px !important;
    }
}

/* ========================================
   LOYALTY SECTION MERGE - Remove Navy Header & Merge with Rep Info
   ======================================== */

/* Hide the navy collapsable-header between dashRep and loyalty widget */
.collapsable-header[data-target="#259-content"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Loyalty Widget Container - Merge with gray background */
#WidgetGroupLeftSide #259-content,
div#259-content {
    background-color: #f5f5f5 !important; /* Same gray as rep info */
    background: #f5f5f5 !important; /* Same gray as rep info */
    border: none !important;
    border-radius: 0 0 17px 17px !important; /* Rounded only on bottom */
    padding: 0 20px 20px 20px !important; /* No top padding - reduce gap */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1) !important; /* Shadow on merged container */
}

/* Loyalty Widget Content */
#widgetLoyaltyProgram,
div#widgetLoyaltyProgram,
#widgetLoyaltyProgram .progress-container {
    background-color: transparent !important; /* Transparent - uses parent gray */
    background: transparent !important; /* Transparent - uses parent gray */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Add separator line between rep info and loyalty */
#259-content::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: #d9d9d9 !important; /* Light gray separator line matching Figma */
    margin: 0 0 16px 0 !important; /* Reduced margin for tighter spacing */
}

/* Make loyalty widget content visible (override collapse) */
#widgetLoyaltyProgram.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* Ensure loyalty section doesn't have separate card styling */
#259-content .collapsable-section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Ensure the rep info card connects visually to loyalty section */
#dashRep {
    position: relative !important;
    z-index: 1 !important;
}

#WidgetGroupLeftSide .dashboard .dashboardWidget,
#WidgetGroupLeftSide .dashboard .widget,
#dashDynamicRankQual {
    border: none !important;
    border-radius: 17px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1) !important;
    transition: box-shadow 0.2s ease !important;
    overflow: hidden !important;
}

/* OVERRIDE: Rep info and loyalty section merged with gray background */
#WidgetGroupLeftSide .dashboard #dashRep.dashboardWidget {
    background-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
    border-radius: 17px 17px 0 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    overflow: visible !important;
}

#WidgetGroupLeftSide .dashboard .dashboardWidget > div:not(.collapsable-header),
#WidgetGroupLeftSide .dashboard .widget > div:not(.collapsable-header) {
    padding: 20px !important;
}

#WidgetGroupLeftSide .dashboard .dashboardWidget:hover,
#WidgetGroupLeftSide .dashboard .widget:hover {
    box-shadow: 0 0 25px 0 rgba(0,0,0,0.2) !important;
}

/* Collapsible Widget Headers - Navy Theme */
/* Override magenta/pink background (#A91259) with navy blue */
#WidgetGroupLeftSide .dashboard .dashboardWidget .collapsable-header,
#WidgetGroupLeftSide .dashboard .widget .collapsable-header,
.collapsable-header,
.dynamic-tab-header.collapsable-header,
.dynamic-tab-header,
div.collapsable-header,
div.dynamic-tab-header {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #003460 !important;
    background-color: #003460 !important;
    background-image: none !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    border-radius: 17px 17px 0 0 !important;
}

/* Resources Widget - Fix link hover text visibility */
.rsc-widget-resources-list a {
    color: #007EC3 !important;
    text-decoration: none !important;
}

.rsc-widget-resources-list a:hover {
    background-color: #007EC3 !important;
    color: #FFF !important;
    text-decoration: none !important;
}

.rsc-widget-resources-list a:visited {
    color: #007EC3 !important;
}

.rsc-widget-resources-list a:visited:hover {
    background-color: #007EC3 !important;
    color: #FFF !important;
}

.collapsable-header h2,
.collapsable-header h3,
.collapsable-header h4,
.collapsable-header h5,
.collapsable-header span,
.collapsable-header div {
    color: #ffffff !important;
}

/* Content below collapsable header needs padding */
.collapsable-header + * {
    padding: 20px !important;
}

/* ========================================
   CONTACT CARD DETAILS - Fix Header Styling
   ======================================== */

/* Contact Card Details Container */
#contactCardDetails {
    padding: 0 !important;
}

/* Fix col-md-12 divs to take full width */
#contactCardDetails > .col-md-12,
#contactCardDetails .col-md-12 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Contact Card Headers - Full Width with Individual Rounding */
#contactCardDetails .collapsable-header,
#contactCardDetails .dynamic-tab-header {
    width: 100% !important;
    display: block !important;
    margin: 0 0 0 0 !important;
    padding: 15px 20px !important;
    border-radius: 17px !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}

/* When section is expanded, header only gets top rounding */
#contactCardDetails .collapsable-header[aria-expanded="true"],
#contactCardDetails .collapsable-header:not(.collapsed),
#contactCardDetails .dynamic-tab-header.active {
    border-radius: 17px 17px 0 0 !important;
    margin-bottom: 0 !important;
}

/* Collapsable sections within contact card - Each section is independent card */
#contactCardDetails .collapsable-section {
    width: 100% !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: none !important;
    box-sizing: border-box !important;
    border-radius: 0 0 17px 17px !important;
    margin-bottom: 15px !important;
}

/* When collapsed, hide the section completely - Bootstrap collapse states */
/* Only hide if it has the collapse class and is not expanded */
#contactCardDetails .collapsable-section.collapse:not(.in):not(.show) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Wrapper divs for spacing between card sections */
#contactCardDetails > .col-md-12 {
    margin-bottom: 0 !important;
}

/* Content inside collapsable sections */
#contactCardDetails .collapsable-section p {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

#contactCardDetails .collapsable-section strong {
    color: #0f100f !important;
    font-weight: 600 !important;
}

/* Links within contact card */
#contactCardDetails .collapsable-section a {
    color: #003460 !important;
    text-decoration: none !important;
}

#contactCardDetails .collapsable-section a:hover {
    text-decoration: underline !important;
}

/* Panel styling within contact card */
#contactCardDetails .panel {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
}

#contactCardDetails .panelContentContainer {
    padding: 0 !important;
}

/* Tables within contact card */
#contactCardDetails table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 15px !important;
}

#contactCardDetails table tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

#contactCardDetails table tr:last-child {
    border-bottom: none !important;
}

#contactCardDetails table td {
    padding: 10px 0 !important;
    vertical-align: top !important;
}

#contactCardDetails table td:first-child {
    font-weight: 600 !important;
    color: #656667 !important;
    width: 150px !important;
}

/* Button container styling */
#contactCardDetails .btn-container {
    margin-top: 15px !important;
}

/* List styling in dynamic tabs */
#contactCardDetails .list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#contactCardDetails .list-item {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#contactCardDetails .list-item:last-child {
    border-bottom: none !important;
}

#contactCardDetails .list-title {
    font-weight: 600 !important;
    color: #656667 !important;
    margin-bottom: 4px !important;
    font-size: 14px !important;
}

#contactCardDetails .list-content p:last-child {
    margin-bottom: 0 !important;
}

/* Rank Progress Widget within Contact Card */
#contactCardDetails #dashDynamicRankQual {
    margin: 0 !important;
    margin-bottom: 15px !important;
}

/* Rank Progress header follows same pattern as other headers */
#contactCardDetails #dashDynamicRankQual .collapsable-header {
    border-radius: 17px !important;
    margin-bottom: 15px !important;
}

/* When expanded, header only gets top rounding */
#contactCardDetails #dashDynamicRankQual .collapsable-header.active,
#contactCardDetails #dashDynamicRankQual .collapsable-header[aria-expanded="true"] {
    border-radius: 17px 17px 0 0 !important;
    margin-bottom: 0 !important;
}

/* Rank Progress section gets bottom rounding */
#contactCardDetails #dashDynamicRankQual .collapsable-section {
    border-radius: 0 0 17px 17px !important;
}

/* Action buttons */
#contactCardDetails #rightButton {
    margin: 0 !important;
}

#contactCardDetails #rightButton a,
#contactCardDetails .btn,
#contactCardDetails .btn-primary,
#contactCardDetails a.btn,
#contactCardDetails a.btn-primary,
#contactCardDetails .btn-container a,
#contactCardDetails .btn-container .btn {
    display: inline-block !important;
    padding: 10px 20px !important;
    background-color: #0f100f !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

#contactCardDetails #rightButton a:hover,
#contactCardDetails .btn:hover,
#contactCardDetails .btn-primary:hover,
#contactCardDetails a.btn:hover,
#contactCardDetails a.btn-primary:hover,
#contactCardDetails .btn-container a:hover,
#contactCardDetails .btn-container .btn:hover {
    background-color: #003460 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Contact Groups list */
#contactCardDetails #contactGroups ul {
    list-style: none !important;
    padding: 0 !important;
}

#contactCardDetails #contactGroups li {
    padding: 8px 0 !important;
}

/* ========================================
   NAVIGATION HEADER - Modern Navy Theme
   ======================================== */

nav, #header {
    background-color: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px -2px, rgba(0, 0, 0, 0.06) 0px 2px 4px -2px !important;
}

nav .logo, #header .logo {
    height: 29px;
    width: auto;
}

/* Mobile Hamburger Button - White Icon Color & Centered */
.mobile-hamburger-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.mobile-hamburger-button i,
.mobile-hamburger-button i.fa,
.mobile-hamburger-button i.fa-bars {
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
	position: static !important;
}

/* ========================================
   SIDEBAR NAVIGATION - Clean White Theme
   ======================================== */

/* Remove blurred background and use clean white */
.navbar-nav.sidebar,
#accordionSidebar {
    background-image: none !important;
    background-color: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px -2px, rgba(0, 0, 0, 0.06) 0px 2px 4px -2px !important;
}

/* Update logo to colored DASH version - High specificity selectors */
div.navbar-nav.sidebar#accordionSidebar div.sidenav-top-row a#clientLogo img,
div.navbar-nav.sidebar#accordionSidebar div.sidenav-top-row a.client-logo img,
#accordionSidebar #clientLogo img,
#accordionSidebar .client-logo img,
.sidebar .sidenav-top-row .client-logo img,
.sidenav-top-row #clientLogo img,
.sidenav-top-row .client-logo img,
a.client-logo img[alt="logo"],
a#clientLogo img[alt="logo"],
img[alt="logo"][src="/Content/Images/logo.png"],
img[src="/Content/Images/logo.png"] {
    content: url(../Images/logo.png) !important;
    max-height: 45px !important;
    width: auto !important;
    max-width: 200px !important;
    display: block !important;
}

/* Ensure logo container has proper styling */
#clientLogo,
.sidebar .client-logo,
.sidenav-top-row .client-logo,
.sidenav-top-row #clientLogo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
}

/* Sidebar menu items */
.sidebar .nav-item .nav-link {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important; /* Increased from 400 to 500 (medium) for better visibility */
    font-size: 17px !important; /* Increased from 16px for better readability */
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Space between text/icon and chevron */
    text-decoration: none !important;
    padding: 12px 16px !important; /* Consistent padding */
    background-color: transparent !important; /* Ensure no background by default */
}

.sidebar .nav-item .nav-link span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; /* Gap between icon and text */
    flex: 1 !important; /* Take available space, pushing chevron to the right */
    font-size: 17px !important; /* Explicit size for span text */
}

/* Chevron/arrow positioning - move closer to text */
.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    content: '\f107' !important; /* Down chevron - fa-chevron-down (rotates centered) */
    margin-left: auto !important; /* Push to the right side */
    padding-left: 8px !important; /* Small gap between text and chevron */
    transition: transform 0.2s ease !important;
    transform-origin: center center !important; /* Keep centered during rotation */
    color: #656667 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Rotate chevron when expanded - rotate 180deg (down to up) */
.sidebar .nav-item .nav-link[data-toggle="collapse"]:not(.collapsed)::after {
    transform: rotate(180deg) !important;
}

/* Hover state - only when hovering, not persistent */
.sidebar .nav-item .nav-link:hover {
    color: #003460 !important;
    background-color: #d9edfa !important; /* Light blue hover like Figma */
    text-decoration: none !important;
}

/* Remove hover background when not hovering */
.sidebar .nav-item .nav-link:not(:hover) {
    background-color: transparent !important;
}

.sidebar .nav-item .nav-link:hover::after {
    color: #003460 !important; /* Chevron changes color on hover */
}

/* Hide Font Awesome icons and replace with custom SVG */
.sidebar .nav-item .nav-link i.navOrganization,
.sidebar .nav-item .nav-link i.navOrders,
.sidebar .nav-item .nav-link i.navCommissions,
.sidebar .nav-item .nav-link i.navReports,
.sidebar .nav-item .nav-link i.navResources,
.sidebar .nav-item .nav-link i.navGraduation,
.sidebar .nav-item .nav-link i.navFeeds {
    font-size: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin-right: 10px !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
}

.sidebar .nav-item .nav-link i.navOrganization:before,
.sidebar .nav-item .nav-link i.navOrders:before,
.sidebar .nav-item .nav-link i.navCommissions:before,
.sidebar .nav-item .nav-link i.navReports:before,
.sidebar .nav-item .nav-link i.navResources:before,
.sidebar .nav-item .nav-link i.navGraduation:before,
.sidebar .nav-item .nav-link i.navFeeds:before {
    content: '' !important;
    display: none !important;
}

.sidebar .nav-item .nav-link i.navOrganization:after,
.sidebar .nav-item .nav-link i.navOrders:after,
.sidebar .nav-item .nav-link i.navCommissions:after,
.sidebar .nav-item .nav-link i.navReports:after,
.sidebar .nav-item .nav-link i.navResources:after,
.sidebar .nav-item .nav-link i.navGraduation:after,
.sidebar .nav-item .nav-link i.navFeeds:after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Organization Icon - Org.svg */
.sidebar .nav-item .nav-link i.navOrganization:after {
    background-image: url(../Images/icons/Org.svg) !important;
}

/* Orders/Cart Icon - Cart.svg */
.sidebar .nav-item .nav-link i.navOrders:after {
    background-image: url(../Images/icons/Cart.svg) !important;
}

/* Commission Icon - Commission.svg */
.sidebar .nav-item .nav-link i.navCommissions:after {
    background-image: url(../Images/icons/Commission.svg) !important;
}

/* Reports Icon - Report.svg */
.sidebar .nav-item .nav-link i.navReports:after {
    background-image: url(../Images/icons/Report.svg) !important;
}

/* Resources Icon - Resources.svg */
.sidebar .nav-item .nav-link i.navResources:after {
    background-image: url(../Images/icons/Resources.svg) !important;
}

/* UConnect Icon - Uconnect.svg */
.sidebar .nav-item .nav-link i.navGraduation:after {
    background-image: url(../Images/icons/Uconnect.svg) !important;
}

/* Alerts/Feeds Icon - Notification.svg */
.sidebar .nav-item .nav-link i.navFeeds:after {
    background-image: url(../Images/icons/Notification.svg) !important;
}

/* Home Icon - keep Font Awesome */
.sidebar .nav-item .nav-link i.navOverview,
.sidebar .nav-item .nav-link i.fa-home {
    color: #003460 !important;
    font-size: 16px !important;
    width: 24px !important;
    min-width: 24px !important;
    margin-right: 10px !important;
}

/* Active menu item */
.sidebar .nav-item.active .nav-link {
    color: #003460 !important;
    font-weight: 600 !important;
    background-color: transparent !important; /* No gray background on active state */
}

/* Active menu item should still respond to hover */
.sidebar .nav-item.active .nav-link:hover {
    background-color: #d9edfa !important; /* Light blue on hover even when active */
}

/* Submenu/Collapse container */
.sidebar .child-sub-menu,
.sidebar .collapse {
    background-color: transparent !important; /* No background - use sidebar color */
    padding: 4px 0 !important;
    overflow: visible !important; /* Prevent text clipping during animation */
    height: auto !important; /* Allow full height for all items */
    max-height: none !important; /* Remove any max-height restrictions */
}

/* Ensure expanded collapse shows all items */
.sidebar .collapse.in,
.sidebar .child-sub-menu.in {
    height: auto !important;
    display: block !important;
}

/* Submenu items */
.sidebar .collapse-item {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important; /* Regular weight for submenu items */
    font-size: 14px !important; /* Smaller font for submenu */
    display: block !important;
    padding: 8px 10px 8px 30px !important; /* Reduced left indent */
    margin: 2px 5px !important; /* Smaller margin */
    border-radius: 8px !important; /* Rounded corners to match parent menu items */
    transition: background-color 0.2s ease, color 0.2s ease !important;
    line-height: 1.3 !important;
}

.sidebar .collapse-item .nav-link {
    padding: 0 !important; /* Remove extra padding from nav-link inside collapse-item */
    background-color: transparent !important; /* Ensure nav-link doesn't override parent */
}

.sidebar .collapse-item span,
.sidebar .collapse-item .nav-link span {
    font-size: 14px !important; /* Smaller font for submenu text */
}

.sidebar .collapse-item:hover,
.sidebar .collapse-item .nav-link:hover {
    color: #003460 !important;
    background-color: #d9edfa !important; /* Light blue hover - matches main menu */
    border-radius: 8px !important; /* Rounded corners on hover */
}

/* Active submenu item */
.sidebar .collapse-item.active,
.sidebar .collapse-item .nav-link.active {
    color: #003460 !important;
    font-weight: 500 !important;
    background-color: #d9edfa !important; /* Navy accent color background */
    border-radius: 8px !important; /* Rounded corners on active */
}

/* Sidebar divider */
.sidebar .sidebar-divider {
    border-color: #e5e5e5 !important;
}

/* ========================================
   SIDEBAR COLLAPSE ANIMATION FIX
   Prevents visual "jump" when menu expands
   ======================================== */

/* Disable the growIn animation that causes the visual flash */
.sidebar .nav-item .collapse,
.sidebar .nav-item .child-sub-menu,
.sidebar .collapse,
.sidebar .child-sub-menu {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-animation-name: none !important;
    animation-name: none !important;
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
}

/* Force styles during collapsing transition state */
.sidebar .nav-item .collapsing,
.sidebar .collapsing {
    -webkit-animation: none !important;
    animation: none !important;
    margin-left: 0 !important;
}

/* Ensure collapse-items have consistent styling immediately (no transition delay) */
.sidebar .collapse-item,
.sidebar .child-sub-menu .collapse-item,
.sidebar .collapse .collapse-item,
.sidebar .collapsing .collapse-item {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 8px 10px 8px 30px !important;
    margin: 2px 5px !important;
    border-radius: 8px !important;
    line-height: 1.3 !important;
    display: block !important;
    background-color: transparent !important;
    transition: none !important; /* Remove transition to prevent delay */
}

/* Ensure nav-links inside collapse-items are styled immediately */
.sidebar .collapse-item .nav-link,
.sidebar .collapse-item a.nav-link,
.sidebar .collapsing .collapse-item .nav-link,
.sidebar .child-sub-menu .collapse-item .nav-link {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 0 !important;
    background-color: transparent !important;
    transition: none !important;
}

/* Force span text inside collapse items to use correct styling */
.sidebar .collapse-item span,
.sidebar .collapse-item .nav-link span,
.sidebar .collapsing .collapse-item span,
.sidebar .child-sub-menu .collapse-item span {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* Hide empty Font Awesome icons in submenu items */
.sidebar .collapse-item .nav-link i.fa-,
.sidebar .collapse-item .nav-link i[class="fa fa-"],
.sidebar .collapse-item .nav-link i.navSub1 {
    display: none !important;
}

/* Re-enable hover transitions after initial load */
.sidebar .collapse.in .collapse-item,
.sidebar .child-sub-menu.in .collapse-item {
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Hover state for collapse items */
.sidebar .collapse-item:hover,
.sidebar .collapse-item:hover .nav-link,
.sidebar .collapse-item:hover span,
.sidebar .collapsing .collapse-item:hover,
.sidebar .child-sub-menu .collapse-item:hover {
    color: #003460 !important;
    background-color: #d9edfa !important;
}

/* Sidebar scrollable navigation padding fix */
.scrollable-nav {
    padding: 0 10px !important;
    overflow-y: auto !important; /* Allow vertical scrolling */
    overflow-x: hidden !important; /* Hide horizontal overflow */
}

/* Ensure scrollable nav shows all content when scrolling */
#scrollableNav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ========================================
   SIDEBAR COLLAPSE BUTTON - Custom Chevron Icons
   ======================================== */

/* Sidebar collapse button container */
.sidenav-collapse-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Base styles for chevron icons */
.sidenav-collapse-button i.fa-chevron-left,
.sidenav-collapse-button i.fa-chevron-right,
#sidenavCollapseIcon {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
}

/* Hide Font Awesome chevron content */
.sidenav-collapse-button i.fa-chevron-left:before,
.sidenav-collapse-button i.fa-chevron-right:before,
#sidenavCollapseIcon:before {
    content: '' !important;
    display: none !important;
}

/* Add custom chevron SVG via :after */
.sidenav-collapse-button i.fa-chevron-left:after,
.sidenav-collapse-button i.fa-chevron-right:after,
#sidenavCollapseIcon:after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Chevron Left Icon (expanded state) */
.sidenav-collapse-button i.fa-chevron-left:after,
#sidenavCollapseIcon.fa-chevron-left:after {
    background-image: url(../Images/icons/chevron-left.svg) !important;
}

/* Chevron Right Icon (collapsed state) */
.sidenav-collapse-button i.fa-chevron-right:after,
#sidenavCollapseIcon.fa-chevron-right:after {
    background-image: url(../Images/icons/chevron-right.svg) !important;
}

.navbar-menu a {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.navbar-menu a:hover {
    color: #003460 !important;
    text-decoration: none !important;
}

/* ========================================
   TOP NAVIGATION - Right Side Menu Items
   ======================================== */

/* Top navbar menu items - Bell, Settings, Profile */
.navbar-nav.ml-auto .nav-item .nav-link {
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    padding: 8px 12px !important;
}

/* Circular buttons (bell and settings icons) */
.navbar-nav.ml-auto .nav-item .nav-link.circular-button {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Hover state - match sidebar light blue background */
.navbar-nav.ml-auto .nav-item .nav-link:hover,
.navbar-nav.ml-auto .nav-item .nav-link:focus {
    background-color: #d9edfa !important;
    color: #003460 !important;
    text-decoration: none !important;
}

/* Hover on icons within nav links */
.navbar-nav.ml-auto .nav-item .nav-link:hover i.fa,
.navbar-nav.ml-auto .nav-item .nav-link:focus i.fa {
    color: #003460 !important;
}

/* Profile dropdown hover */
.navbar-nav.ml-auto .nav-item.dropdown .nav-link.dropdown-toggle:hover {
    background-color: #d9edfa !important;
}

/* Profile name text hover */
.navbar-nav.ml-auto .nav-item .nav-link:hover .first-last-name,
.navbar-nav.ml-auto .nav-item .nav-link:hover .rank-title {
    color: #003460 !important;
}

/* Dropdown menu items */
.navbar-nav.ml-auto .dropdown-menu .nav-link {
    padding: 8px 16px !important;
    border-radius: 4px !important;
}

.navbar-nav.ml-auto .dropdown-menu .nav-link:hover {
    background-color: #d9edfa !important;
    color: #003460 !important;
}

/* ========================================
   PROFILE IMAGES - Custom Avatar.svg Default
   Uses content property to replace default and broken images with Avatar.svg
   ======================================== */

/* Header profile image - Avatar.svg as background fallback */
.navbar-nav .img-profile,
.topbar .img-profile,
#nav-item-profile .img-profile,
.img-profile.rounded-circle {
    background-color: #e0e0e0 !important;
    background-image: url(../Images/icons/Avatar.svg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Replace default repImg.jpg with custom Avatar.svg in header */
.navbar-nav .img-profile[src*="repImg"],
.topbar .img-profile[src*="repImg"],
#nav-item-profile .img-profile[src*="repImg"],
.img-profile.rounded-circle[src*="repImg"] {
    content: url(../Images/icons/Avatar.svg) !important;
}

/* Replace PersonalImages paths (often return 404) with Avatar.svg */
.navbar-nav .img-profile[src*="PersonalImages"],
.topbar .img-profile[src*="PersonalImages"],
#nav-item-profile .img-profile[src*="PersonalImages"],
.img-profile.rounded-circle[src*="PersonalImages"] {
    content: url(../Images/icons/Avatar.svg) !important;
}

/* Profile picture in legacy header - Avatar.svg as background fallback */
#header #myProfile .profile-picture img,
.profile-picture img {
    background-color: #e0e0e0 !important;
    background-image: url(../Images/icons/Avatar.svg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Replace default repImg.jpg with custom Avatar.svg in legacy header */
#header #myProfile .profile-picture img[src*="repImg"],
.profile-picture img[src*="repImg"] {
    content: url(../Images/icons/Avatar.svg) !important;
}

/* Replace PersonalImages paths in legacy header */
#header #myProfile .profile-picture img[src*="PersonalImages"],
.profile-picture img[src*="PersonalImages"] {
    content: url(../Images/icons/Avatar.svg) !important;
}

/* ========================================
   SOCIAL NETWORKS WIDGET - X (Twitter) Icon Fix
   The WYSIWYG editor strips pixel values, so we set size via CSS
   ======================================== */

/* Make X icon SVG in Social Networks widget match other icons */
.freeTextWidget td[style*="50px"] svg,
.dashboardWidget.freeTextWidget svg {
    width: 64px !important;
    height: 64px !important;
    fill: #003460 !important;
    vertical-align: middle !important;
}

/* ========================================
   ICON STYLES - Navy Theme
   ======================================== */

.nav-icon, .menu-icon {
    stroke: #0f100f !important;
    fill: none !important;
    transition: stroke 0.2s ease !important;
}

.nav-icon:hover, .menu-icon:hover,
.nav-item:hover .nav-icon {
    stroke: #003460 !important;
}

.icon-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background-color: #f7f7f7;
}

.icon-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #0f100f !important;
    transition: stroke 0.2s ease !important;
}

.icon-btn:hover svg {
    stroke: #003460 !important;
}

/* Quick Links icons - Change from old red to navy blue */
.icon {
    color: #003460 !important;
}

/* ========================================
   HEADER ICONS - Custom SVG Replacement
   Replace Font Awesome bell and cog icons with custom SVGs
   ======================================== */

/* Base styles for header icon containers */
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-bell,
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-cog {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
}

/* Hide Font Awesome icon content */
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-bell:before,
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-cog:before {
    content: '' !important;
    display: none !important;
}

/* Add custom SVG via :after pseudo-element */
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-bell:after,
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-cog:after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Notification/Bell Icon - Notification.svg */
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-bell:after {
    background-image: url(../Images/icons/Notification.svg) !important;
}

/* Settings/Cog Icon - Settings.svg */
.navbar-nav.ml-auto .nav-item .nav-link.circular-button i.fa-cog:after {
    background-image: url(../Images/icons/Settings.svg) !important;
}

.icon:hover {
    color: #002040 !important;
}

/* Social Networks Font Awesome icons - Change from old red to navy blue */
a .fa,
a:hover .fa,
a:focus .fa,
a:active .fa {
    color: #003460 !important;
}

a:hover .fa {
    color: #002040 !important;
}

/* Rank Progress widget circle - Change from old red to navy blue */
#widgetDynamicRankQual .progress-circle .progress-circle-path {
    stroke: #003460 !important;
}

/* Back to Top button - Change from old red to navy blue */
#backToTopArrow,
.back-to-top {
    background-color: #003460 !important;
    background: #003460 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#backToTopArrow i,
#backToTopArrow .fa,
#backToTopArrow .fa-chevron-up,
.back-to-top i,
.back-to-top .fa,
.back-to-top .fa-chevron-up {
    color: #ffffff !important;
}

#backToTopArrow i::before,
#backToTopArrow .fa::before,
.back-to-top i::before,
.back-to-top .fa::before,
.back-to-top .fa-chevron-up::before {
    color: #ffffff !important;
}

#backToTopArrow:hover,
.back-to-top:hover {
    background-color: #002040 !important;
    background: #002040 !important;
}

/* Primary buttons - Change from green to brand black/navy */
.btn-primary,
.btn-primary.active,
.btn-primary:active,
.k-button.k-primary,
.open > .dropdown-toggle.btn-primary,
.t-filter-options .t-button,
.btn-mobile-primary {
    background: #0f100f !important;
    border: 1px solid #0f100f !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary[disabled]:hover,
.btn-primary:active:focus,
.k-button.k-primary:hover,
.k-button.k-primary:focus,
.btn-mobile-primary:hover,
.btn-mobile-primary:focus {
    background: #003460 !important;
    border-color: #003460 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Rank Progress carousel dots - Change from green to navy */
#widgetDynamicRankQual .owl-dot.active {
    background: #003460 !important;
}

/* Rank icons - Change from green to navy */
.rank-icon.text-secondary,
.bd-icon.rank-icon.text-secondary,
.fa.rank-icon.text-secondary {
    color: #003460 !important;
    border-color: #003460 !important;
}

/* Rank Progress active tab border - Change from green to navy */
#widgetDynamicRankQual .nav-tabs li.active > a,
#widgetDynamicRankQual .nav-tabs li.active > a:focus,
#widgetDynamicRankQual .nav-tabs li.active > a:hover {
    box-shadow: inset 0 -5px 0 0 #003460 !important;
}

/* Commission status indicators - Change from green/red to brand colors */
.CompYes {
    color: #003460 !important; /* Navy blue instead of green */
}

.CompNo {
    color: #9a3b26 !important; /* Brand error red instead of generic red */
}

/* Loyalty Program CTA Primary Button (only .cta-button, not all links) */
/* Changed from navy (#003460) to black (#0f100f) to match other dashboard buttons */
/* Higher specificity to override inline styles from LoyaltyProgram.ascx */
a.cta-button,
.cta a.cta-button,
#widgetLoyaltyProgram a.cta-button,
#widgetLoyaltyProgram .cta a.cta-button {
    display: inline-block !important;
    padding: 12px 24px !important;
    background-color: #0f100f !important; /* Black - matches other dashboard buttons */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 30px !important;
    border: 1px solid #0f100f !important; /* Black border */
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

a.cta-button:hover,
.cta a.cta-button:hover,
#widgetLoyaltyProgram a.cta-button:hover,
#widgetLoyaltyProgram .cta a.cta-button:hover {
    background-color: #003460 !important; /* Navy on hover for contrast */
    border-color: #003460 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* View Rank Requirements button - match View More button style */
#widgetDynamicRankQual .btn.btn-primary,
#widgetDynamicRankQual a.btn.btn-primary,
.rank-progress-widget .btn.btn-primary,
#dashDynamicRankQual .btn.btn-primary {
    display: inline-block !important;
    padding: 12px 24px !important;
    background-color: #0f100f !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 30px !important;
    border: 1px solid #0f100f !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

#widgetDynamicRankQual .btn.btn-primary:hover,
#widgetDynamicRankQual a.btn.btn-primary:hover,
.rank-progress-widget .btn.btn-primary:hover,
#dashDynamicRankQual .btn.btn-primary:hover {
    background-color: #003460 !important;
    border-color: #003460 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Left Menu Trigger - "View Progress" link */
#leftMenuTrigger p.cta {
    color: #003460 !important; /* Navy blue brand color */
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

#leftMenuTrigger p.cta:hover {
    color: #0f100f !important; /* Black on hover for contrast */
    text-decoration: underline !important;
}

/* Loyalty Program regular links (keep as links with hover) */
.cta a:not(.cta-button) {
    color: #003460 !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: 12px !important;
	font-size: 14px !important; /* Override parent 12px font-size */
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
}

.cta a:not(.cta-button):hover {
    color: #003460 !important; /* Navy blue on hover - brand color */
    text-decoration: underline !important;
}

/* ========================================
   SEARCH DISTRIBUTORS AND CUSTOMERS COMPONENT
   ======================================== */

/* Search widget container */
#dashGlobalSearch.dashboardWidget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#widgetGlobalSearch {
    background: transparent !important;
    padding: 0 !important;
}

/* Search component container */
#globalSearch.globalSearch.contactSearchContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.globalSearchContainer {
    position: relative !important;
}

/* Floating label - shows as placeholder when empty, moves above when focused/filled */
.globalSearchContainer label[for="contactSearch"] {
    position: absolute !important;
    left: 48px !important; /* Account for icon + padding */
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #999999 !important;
    pointer-events: none !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    padding: 0 4px !important;
    z-index: 1 !important;
}

/* Label moves up when container has focus-within or has-value class */
.globalSearchContainer:focus-within label[for="contactSearch"],
.globalSearchContainer.has-value label[for="contactSearch"] {
    top: -10px !important;
    left: 12px !important;
    transform: translateY(0) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #003460 !important;
}

/* Input group container */
.globalSearchContainer .input-group {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.globalSearchContainer .input-group:focus-within {
    border-color: #003460 !important;
    box-shadow: 0 2px 12px rgba(0, 52, 96, 0.15) !important;
}

/* Search icon container */
.globalSearchContainer .input-group-addon {
    background: transparent !important;
    border: none !important;
    padding: 0 8px 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Search icon */
.globalSearchContainer .input-group-addon i.fa-search {
    color: #003460 !important;
    font-size: 16px !important;
    opacity: 0.7 !important;
}

/* Search input field */
.globalSearchContainer input#contactSearch,
.globalSearchContainer .globalSearchInput {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 4px 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #0f100f !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Nav Tabs - Override green color with NewULife navy blue */
.nav-tabs li.active > a,
.nav-tabs li.active > a:focus,
.nav-tabs li.active > a:hover {
    box-shadow: inset 0 5px 0 0 #003460 !important;
    color: #333 !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    margin-bottom: -1px !important;
    position: relative !important;
}

/* Success/Check icons - Override green with NewULife navy blue */
.text-success {
    color: #003460 !important;
}

.fa-check.text-success {
    color: #003460 !important;
}

/* Treeview selected state - Override green with NewULife navy blue */
.t-treeview .t-state-selected,
.t-state-selected {
    background: #003460 !important;
    border-color: #003460 !important;
    color: #ffffff !important;
}

/* Secondary button - Override green with NewULife navy blue */
.btn-secondary,
.k-button.k-scheduler-cancel,
a.btn-secondary,
a.btn.btn-secondary {
    background: #ffffff !important;
    border: 1px solid #003460 !important;
    color: #003460 !important;
}

.btn-secondary:hover,
.k-button.k-scheduler-cancel:hover,
a.btn-secondary:hover,
a.btn.btn-secondary:hover {
    background: #f5f9fc !important;
    border-color: #003460 !important;
    color: #003460 !important;
}

/* Contact Card Quick Links - Override green (#79b54a) with navy */
#profileCardContactContainer .contact-card-quick-links {
    padding: 0 !important;
    margin: 15px 0 !important;
    text-align: center !important;
    list-style: none !important;
}

#profileCardContactContainer .contact-card-quick-links li {
    display: inline-block !important;
    vertical-align: middle !important;
}

#profileCardContactContainer .contact-card-quick-links li a {
    display: block !important;
    width: 45px !important;
    height: 45px !important;
    line-height: 46px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: #003460 !important;
    color: #ffffff !important;
    margin: 0 10px !important;
    font-size: 21px !important;
}

#profileCardContactContainer .contact-card-quick-links li a .fa,
#profileCardContactContainer .contact-card-quick-links li a i {
    color: #ffffff !important;
}

#profileCardContactContainer .contact-card-quick-links li a:hover {
    background: #0f100f !important;
    color: #ffffff !important;
}

/* Text Primary - Override magenta (#a91259) with navy */
.text-primary,
i.text-primary,
.icon.text-primary {
    color: #003460 !important;
}

.globalSearchContainer input#contactSearch::placeholder,
.globalSearchContainer .globalSearchInput::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.globalSearchContainer input#contactSearch:focus,
.globalSearchContainer .globalSearchInput:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Autocomplete dropdown - using jQuery autocomplete plugin */
/* Note: .ac_results is appended outside .globalSearchContainer, so we target it directly */
#dashGlobalSearch ~ .ac_results,
.ac_results {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    margin-top: 4px !important;
    font-family: 'Inter', sans-serif !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

#dashGlobalSearch ~ .ac_results ul,
.ac_results ul {
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#dashGlobalSearch ~ .ac_results li,
.ac_results li {
    display: block !important;
    padding: 10px 16px !important;
    color: #0f100f !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
    border: none !important;
}

#dashGlobalSearch ~ .ac_results li.ac_over,
#dashGlobalSearch ~ .ac_results li:hover,
.ac_results li.ac_over,
.ac_results li:hover {
    background-color: #d9edfa !important;
    color: #003460 !important;
}

#dashGlobalSearch ~ .ac_results li.ac_odd,
.ac_results li.ac_odd {
    background-color: #ffffff !important;
}

#dashGlobalSearch ~ .ac_results li.ac_odd.ac_over,
#dashGlobalSearch ~ .ac_results li.ac_odd:hover,
.ac_results li.ac_odd.ac_over,
.ac_results li.ac_odd:hover {
    background-color: #d9edfa !important;
    color: #003460 !important;
}

/* ========================================
   LEFT NAVIGATION MENU (MyProfile Page)
   ======================================== */

/* Left navigation container - only show when it has content */
#leftNavCol {
    background: #FFFFFF !important;
    padding: 20px 0 !important;
    float: left !important;
    width: 240px !important;
    margin-right: 15px !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1) !important;
    border-radius: 17px !important;
}

/* Hide leftNavCol completely when empty (no ul inside leftNav) - takes NO space */
#leftNavCol:not(:has(ul)),
#leftNav:empty ~ #leftNavCol,
#leftNav ul:empty {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Alternative: Hide when leftNav has no children */
#leftNav:empty {
    display: none !important;
}

/* Parent leftNavCol should also collapse when leftNav is empty */
#leftNavCol:has(#leftNav:empty) {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#leftNav {
    padding: 0 !important;
}

/* Remove default list styling */
#leftNav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#leftNav li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(154,155,156,0.15) !important;
}

#leftNav li:last-child {
    border-bottom: none !important;
}

/* Navigation links */
#leftNav li a {
    display: block !important;
    padding: 15px 16px !important;
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    white-space: nowrap !important;
    overflow: visible !important;
    line-height: 1.4 !important;
}

/* Ensure span text stays in single row */
#leftNav li a span {
    white-space: nowrap !important;
    display: inline !important;
}

/* Remove sidenav-specific classes that don't belong */
#leftNav li a.sidenav-link {
    /* Override sidenav styling */
    background: transparent !important;
}

/* Hover state - match sidebar light blue background */
#leftNav li a:hover {
    background-color: #d9edfa !important;
    color: #003460 !important;
    border-left-color: #003460 !important;
    text-decoration: none !important;
}

/* Active/selected state */
#leftNav li a.active,
#leftNav li.active a {
    background-color: rgba(0,52,96,0.1) !important;
    color: #003460 !important;
    border-left-color: #003460 !important;
    font-weight: 600 !important;
}

/* Hide any Font Awesome icons that shouldn't be there */
#leftNav li a i.fa {
    display: none !important;
}

/* Remove collapsed class effects */
#leftNav li a.collapsed {
    /* Keep styling consistent */
}

/* Content column adjustment - use calc to fill remaining space */
#contentCol {
    float: none !important;
    width: calc(100% - 255px) !important; /* 240px leftNav + 15px margin */
    margin-left: 255px !important;
    overflow: visible !important;
    display: block !important;
}

/* When leftNavCol is hidden, contentCol should take full width with no margin */
#leftNavCol[style*="display: none"] ~ #contentCol,
#leftNavCol[style*="width: 0"] ~ #contentCol,
#leftNavCol:not(:has(ul)) ~ #contentCol,
body:has(#leftNav:empty) #contentCol {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================
   MY PROFILE - Top Navigation Menu (NewULife Only)
   ======================================== */

/* NewULife-specific: Show top horizontal menu on ALL screen sizes */
/* JavaScript: Clients/NewULife/Content/customScripts/MyProfileCustom.js */

/* Top menu container - visible on all screen sizes */
#leftNav-top-menu-container,
.newulife-top-menu-container {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    background: #FFFFFF !important;
    border-radius: 17px !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
}

/* HKCM China site - Add top padding to contentCol for spacing below fixed header */
#main.hkcm #contentCol,
#main.hkcm .contentCol {
    padding-top: 20px !important;
}

/* HKCM China site - Remove max-width limitation on dashboard container to use full screen width */
#dashboard .container:has(#main.hkcm),
#header.hkcm .container {
    max-width: none;
}

/* HKCM China site - Remove negative margins on iFrameContent for full-width layout */
#main.hkcm #iFrameContent {
    margin-left: 0;
    margin-right: 0;
}

/* Horizontal scrolling container */
#leftNav-top-menu,
.newulife-top-menu {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

/* Hide scrollbar but keep functionality */
#leftNav-top-menu::-webkit-scrollbar,
.newulife-top-menu::-webkit-scrollbar {
    display: none;
}

#leftNav-top-menu,
.newulife-top-menu {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Top menu list */
#leftNav-top-menu ul,
.newulife-top-menu ul {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    gap: 0 !important;
}

/* Top menu items */
#leftNav-top-menu li,
.newulife-top-menu li {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(154,155,156,0.15) !important;
    min-width: auto !important;
}

#leftNav-top-menu li:last-child,
.newulife-top-menu li:last-child {
    border-right: none !important;
}

/* Top menu links - horizontal layout */
#leftNav-top-menu li a,
.newulife-top-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap !important;
    text-align: center !important;
    min-width: fit-content !important;
}

/* Top menu hover state */
#leftNav-top-menu li a:hover,
.newulife-top-menu li a:hover {
    background-color: #d9edfa !important;
    color: #003460 !important;
    border-bottom-color: #003460 !important;
    text-decoration: none !important;
}

/* Top menu active/selected state */
#leftNav-top-menu li a.active,
#leftNav-top-menu li.active a,
.newulife-top-menu li a.active,
.newulife-top-menu li.active a {
    background-color: rgba(0,52,96,0.1) !important;
    color: #003460 !important;
    border-bottom-color: #003460 !important;
    font-weight: 600 !important;
}

/* Hide any icons in top menu */
#leftNav-top-menu li a i.fa,
.newulife-top-menu li a i.fa {
    display: none !important;
}

/* Ensure span is visible */
#leftNav-top-menu li a span,
.newulife-top-menu li a span {
    white-space: nowrap !important;
    display: inline !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    /* Reduce padding on mobile for more items visible */
    #leftNav-top-menu li a,
    .newulife-top-menu li a {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MY PROFILE - Contact Info Full Width
   ======================================== */

/* Make contact info section take full width */
.profile-contact-info {
    width: 100% !important;
}

/* ========================================
   MY PROFILE - Mobile Menu JavaScript Auto-Init
   ======================================== */

/* This CSS works with auto-initialization JavaScript that:
   1. Detects if #leftNav exists and has menu items
   2. Creates #leftNav-mobile-container with cloned menu
   3. Inserts it at the top of #contentCol on mobile devices
   4. Syncs active states between desktop and mobile menus

   The JavaScript is added inline to the page for immediate execution.
*/

/* ========================================
   BUSINESS SNAPSHOT WIDGET - Typography Only
   ======================================== */

/* Widget Header - H1 should be prominent per brand guidelines */
/* Panel headers use H1 tags, so we style them appropriately for widget context */
.panelHeader h1 {
    font-size: 1.75rem !important; /* 28px - Matches H2 brand guide size for widget headers */
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Secondary title (Last Updated) */
.secondary-title,
#101-secondary-title,
.panelHeader .secondary-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important; /* 12px */
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-left: 8px !important;
    display: inline-block !important;
}

/* ========================================
   BANNER SLIDER WIDGET - Rounded Corners Top & Bottom
   ======================================== */

/* Banner slider container - Full rounded corners */
.dashboardWidget.freeTextWidget div#slider {
    border-radius: 17px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important; /* Space below slider */
    height: auto !important; /* Auto height to maintain aspect ratio */
}

/* Banner images - inherit parent rounding and maintain aspect ratio */
.dashboardWidget.freeTextWidget #slider figure {
    border-radius: 17px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.dashboardWidget.freeTextWidget #slider figure img {
    border-radius: 17px !important;
    display: block !important;
    height: auto !important; /* Auto height to prevent stretching */
    object-fit: cover !important; /* Maintain aspect ratio */
}

/* App store banner images below slider - also rounded */
.dashboardWidget.freeTextWidget img[src*="ua_banner_appleappstore"],
.dashboardWidget.freeTextWidget img[src*="ua_banner_googleappstore"] {
    border-radius: 17px !important;
    display: block !important;
    height: auto !important;
}

/* ========================================
   ALERT TYPE FILTERS - Fix Payment Error Display
   ======================================== */

/* Alert filter list items - table layout for proper alignment */
.list-group-item.alert-filter {
    display: table !important;
    width: 100% !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid #e0e0e0 !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    table-layout: fixed !important;
}

/* Alert filter hover state */
.list-group-item.alert-filter:hover {
    background-color: #d9edfa !important;
    border-color: #003460 !important;
}

/* Alert filter icon container - table cell for icon */
.list-group-item.alert-filter .inline-block:first-of-type {
    display: table-cell !important;
    width: 30px !important;
    vertical-align: middle !important;
    text-align: left !important;
    padding-right: 10px !important;
}

/* Alert filter icon styling */
.list-group-item.alert-filter .icon {
    font-size: 20px !important;
    color: #003460 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: color 0.2s ease !important;
}

/* Alert filter text container - table cell for text */
.list-group-item.alert-filter .inline-block:nth-of-type(2) {
    display: table-cell !important;
    vertical-align: middle !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0f100f !important;
    white-space: nowrap !important;
    padding-right: 10px !important;
}

/* Alert filter badge - table cell for badge */
.list-group-item.alert-filter .badge {
    display: table-cell !important;
    width: 50px !important;
    vertical-align: middle !important;
    text-align: right !important;
    background-color: #003460 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
}

/* Alert filter checkbox (hidden) */
.list-group-item.alert-filter input[type="checkbox"] {
    display: none !important;
}

/* Alert filter selected state */
.list-group-item.alert-filter:has(input[type="checkbox"]:checked),
.list-group-item.alert-filter.active {
    background-color: rgba(0, 52, 96, 0.1) !important;
    border-color: #003460 !important;
}

/* Alert filter selected state icon */
.list-group-item.alert-filter:has(input[type="checkbox"]:checked) .icon,
.list-group-item.alert-filter.active .icon {
    color: #003460 !important;
}

/* Alert filter selected state text */
.list-group-item.alert-filter:has(input[type="checkbox"]:checked) .inline-block:nth-of-type(2),
.list-group-item.alert-filter.active .inline-block:nth-of-type(2) {
    color: #003460 !important;
    font-weight: 600 !important;
}

/* Specific fix for Payment Error and other alert icons - ensure they display */
.list-group-item.alert-filter .icon-payment-error,
.list-group-item.alert-filter .icon-commissions,
.list-group-item.alert-filter .icon-customerorder,
.list-group-item.alert-filter .icon-enroll-new,
.list-group-item.alert-filter .icon-orders {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Ensure Payment Error icon shows if it's a font icon */
.icon-payment-error:before {
    content: "\f06a" !important; /* FontAwesome exclamation-circle */
    font-family: FontAwesome !important;
    display: inline-block !important;
}

/* ========================================
   ALERTS LIST - Fix Panel Padding
   ======================================== */

/* Fix padding for alert list panels to prevent header spacing issues */
#alertsList li.panel {
    padding: 0px 0px 10px !important;
}

/* ========================================
   ALERTS PAGE - Left Menu Width Fix
   ======================================== */

/* Increase left menu width to accommodate longer text */
#leftMenu {
    width: 350px !important;
}

/* Adjust content margin when alerts menu is open */
.alerts-menu-open {
    margin-left: 350px !important;
    transition: margin-left .4s !important;
}

/* ========================================
   MOBILE MENU STYLING - Match Desktop Sidebar
   ======================================== */

/* Mobile breadcrumbs - back button for submenus */
#ml-menu .menu__breadcrumbs {
    background: #f8f9fa !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
}

#ml-menu .menu__breadcrumbs a {
    color: #003460 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-left: 0 !important; /* Fix negative margin affecting mobile menu breadcrumbs */
}

/* Removed ::before pseudo-element as it was creating duplicate arrows */
/* The breadcrumb arrows are handled by the menu JavaScript */

#ml-menu .menu__breadcrumbs a:hover {
    color: #003460 !important;
    background-color: transparent !important;
}

/* Mobile menu top padding for better spacing */
#ml-menu .menu__wrap {
    padding-top: 0 !important;
}

/* Mobile menu items - match desktop styling */
#ml-menu .menu__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
}

/* Mobile menu links - match desktop */
#ml-menu .menu__link {
    color: #333 !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

/* Mobile menu link hover - match desktop */
#ml-menu .menu__link:hover,
#ml-menu .menu__link:focus {
    color: #003460 !important;
    background-color: #d9edfa !important;
    text-decoration: none !important;
}

/* Mobile menu icons */
#ml-menu .menu__link i.fa {
    width: 24px !important;
    margin-right: 12px !important;
    font-size: 16px !important;
    text-align: center !important;
    opacity: 0.8 !important;
}

/* Add icons to mobile menu items */
#mobileMenu > li:nth-child(1) > a::before { /* Home */
    content: '\f015';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(2) > a::before { /* Organization */
    content: '\f0b1';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(3) > a::before { /* Orders */
    content: '\f07a';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(4) > a::before { /* Commissions */
    content: '\f0d6';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(5) > a::before { /* Reports */
    content: '\f080';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(6) > a::before { /* UConnect */
    content: '\f19d';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(7) > a::before { /* Alerts */
    content: '\f0f3';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(8) > a::before { /* Resources */
    content: '\f0c3';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(9) > a::before { /* Getting Started */
    content: '\f19d';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

#mobileMenu > li:nth-child(10) > a::before { /* AI */
    content: '\f0c3';
    font-family: FontAwesome;
    width: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    display: inline-block;
}

/* Mobile submenu styling */
#ml-menu .menu__level[data-menu^="submenu"] {
    background: rgba(0, 0, 0, 0.03) !important;
}

#ml-menu .menu__level[data-menu^="submenu"] .menu__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#ml-menu .menu__level[data-menu^="submenu"] .menu__link {
    padding-left: 56px !important;
    font-size: 13px !important;
}

/* Chevron for items with submenus */
#ml-menu .menu__link[data-submenu]::after {
    content: '\f105';
    font-family: FontAwesome;
    margin-left: auto;
    opacity: 0.6;
    font-size: 14px;
}

/* ========================================
   ALERTS PAGE - RESPONSIVE TOP FILTER REDESIGN
   ======================================== */

/* Reposition left menu to top of page */
#leftMenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hide close button and overlay */
#openLeftMenu,
#closeLeftMenu,
#leftMenuOverlay {
    display: none !important;
}

/* Remove alerts-specific container class adjustments */
.alerts-container .content {
    margin-left: 0 !important;
}

.alerts-menu-open,
.alerts-menu-closed {
    margin-left: 0 !important;
}

/* Hide the collapsable header */
#leftMenu .collapsable-header {
    display: none !important;
}

/* Make alert type filters section always visible */
#alertTypeFilters {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 20px !important;
}

/* Style the navCalendarsContainer as horizontal chip container */
#alertTypeFilters .navCalendarsContainer {
    width: 100% !important;
}

/* Make the alert types list horizontal */
#alertTypesPlaceholder {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove scrollbar styling - using wrap instead of scroll */

/* Create new top filter container */
.alerts-top-filter-container {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

/* Filter header with title and count */
.alerts-filter-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

.alerts-filter-title {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #003460 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.alerts-filter-title i {
    font-size: 20px !important;
    color: #003460 !important;
}

.alerts-total-count {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #666 !important;
    background: #f0f0f0 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
}

/* Horizontal scrollable filter chips container */
.alerts-filter-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #003460 #f0f0f0 !important;
}

/* Hide scrollbar on webkit browsers but keep functionality */
.alerts-filter-chips::-webkit-scrollbar {
    height: 6px !important;
}

.alerts-filter-chips::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
    border-radius: 3px !important;
}

.alerts-filter-chips::-webkit-scrollbar-thumb {
    background: #003460 !important;
    border-radius: 3px !important;
}

.alerts-filter-chips::-webkit-scrollbar-thumb:hover {
    background: #0f100f !important;
}

/* Individual filter chip styling */
.list-group-item.alert-filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    white-space: nowrap !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 !important;
    position: relative !important;
    width: auto !important;
    max-width: fit-content !important;
    min-width: auto !important;
}

/* Filter chip icon */
.list-group-item.alert-filter i {
    font-size: 18px !important;
    color: #003460 !important;
    transition: color 0.25s ease !important;
}

/* Filter chip text wrapper - remove table-cell display */
.list-group-item.alert-filter .inline-block {
    display: inline !important;
    vertical-align: middle !important;
}

/* Filter chip badge (count) */
.list-group-item.alert-filter .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #003460 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    min-width: 24px !important;
    height: 20px !important;
}

/* Filter chip hover state */
.list-group-item.alert-filter:hover {
    border-color: #003460 !important;
    background-color: #f8fbfd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 52, 96, 0.15) !important;
}

/* Filter chip selected/active state */
.list-group-item.alert-filter:has(input[type="checkbox"]:checked),
.list-group-item.alert-filter.active {
    background-color: #003460 !important;
    border-color: #003460 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 52, 96, 0.3) !important;
}

.list-group-item.alert-filter:has(input[type="checkbox"]:checked) i,
.list-group-item.alert-filter.active i {
    color: #ffffff !important;
}

.list-group-item.alert-filter:has(input[type="checkbox"]:checked) .inline-block,
.list-group-item.alert-filter.active .inline-block {
    color: #ffffff !important;
}

/* Fix text color for all inline-block elements in selected state */
.list-group-item.alert-filter:has(input[type="checkbox"]:checked) .inline-block:nth-of-type(1),
.list-group-item.alert-filter:has(input[type="checkbox"]:checked) .inline-block:nth-of-type(2),
.list-group-item.alert-filter.active .inline-block:nth-of-type(1),
.list-group-item.alert-filter.active .inline-block:nth-of-type(2) {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.list-group-item.alert-filter:has(input[type="checkbox"]:checked) .badge,
.list-group-item.alert-filter.active .badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Hide checkbox input */
.list-group-item.alert-filter input[type="checkbox"] {
    display: none !important;
}

/* Narrow By / Active Filters Section - in leftMenu */
#leftMenu > div:first-of-type {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
}

/* Hide narrow by section when it has 'hidden' class */
#leftMenu > div:first-of-type:has(.hidden),
#leftMenu > div:first-of-type .m-b-10.hidden,
#narrowByPlaceholder.hidden {
    display: none !important;
}

/* Show entire first div only when narrowByPlaceholder is NOT hidden */
#leftMenu > div:first-of-type:has(#narrowByPlaceholder:not(.hidden)) {
    display: block !important;
}

/* Hide the entire first div if narrowByPlaceholder has hidden class */
#leftMenu > div:first-of-type:has(#narrowByPlaceholder.hidden) {
    display: none !important;
}

/* Show narrow by text when filters are active */
#leftMenu > div:first-of-type .m-b-10:not(.hidden) {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Narrow By Container */
#narrowByContainer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

#narrowByContainer h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin: 0 0 12px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#narrowByPlaceholder {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* When narrowByPlaceholder has hidden class, hide it */
#narrowByPlaceholder.hidden {
    display: none !important;
}

#narrowByPlaceholder li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #003460 !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 2px solid #003460 !important;
    cursor: default !important;
}

#narrowByPlaceholder li i {
    color: #ffffff !important;
    font-size: 16px !important;
}

.remove-filter {
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

.remove-filter:hover {
    opacity: 1 !important;
}

/* Alerts list - full width now */
#alertsList {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    /* Left menu on mobile */
    #leftMenu {
        padding: 0 16px !important;
    }

    #alertTypeFilters {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    #leftMenu > div:first-of-type {
        padding: 12px 16px !important;
        border-radius: 8px !important;
    }

    .alerts-top-filter-container {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 8px !important;
    }

    .alerts-filter-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .alerts-filter-title {
        font-size: 16px !important;
    }

    .alerts-total-count {
        font-size: 13px !important;
        align-self: stretch !important;
        text-align: center !important;
    }

    /* Ensure wrapping on mobile */
    #alertTypesPlaceholder {
        flex-wrap: wrap !important;
    }

    .list-group-item.alert-filter {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .list-group-item.alert-filter i {
        font-size: 16px !important;
    }

    .list-group-item.alert-filter .badge {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .alerts-top-filter-container {
        padding: 18px !important;
    }

    .alerts-filter-chips {
        gap: 10px !important;
    }
}

/* Large desktop - wrap filters into multiple rows if enough space */
@media (min-width: 1400px) {
    .alerts-filter-chips {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
}

/* Accessibility improvements */
.list-group-item.alert-filter:focus {
    outline: 2px solid #003460 !important;
    outline-offset: 2px !important;
}

.list-group-item.alert-filter:focus:not(:focus-visible) {
    outline: none !important;
}

/* Smooth scroll behavior for filter chips */
.alerts-filter-chips {
    scroll-behavior: smooth !important;
}

/* Loading state for filters */
.alerts-filter-chips.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Empty state */
.alerts-filter-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #666 !important;
    font-family: 'Inter', sans-serif !important;
}

/* ========================================
   HIDE DUPLICATE MENU ITEMS
   ======================================== */

/* Hide the duplicate "Resources" submenu item under Resources parent */
/* The first collapse-item with navResources icon is redundant */
.sidebar .nav-item:has(.navResources) > .child-sub-menu > .collapse-item:first-child:has(.navResources) {
    display: none !important;
}

/* Fallback: Hide first Resources submenu item by targeting the icon */
.sidebar .child-sub-menu .collapse-item .navResources {
    display: none !important;
}

.sidebar .child-sub-menu .collapse-item:has(.navResources) {
    display: none !important;
}

/* ========================================
   HIDE HOME MENU ITEM - Logo already links to home
   ======================================== */

/* Hide the Home menu item from sidebar navigation - the logo already links to Dashboard */
.sidebar .nav-item .nav-link i.navOverview {
    /* Target parent nav-item to hide entire menu item */
}

/* Hide the nav-item that contains navOverview (Home) */
.sidebar .nav-item:has(.navOverview) {
    display: none !important;
}

/* Fallback for browsers without :has() support - hide via the icon */
@supports not selector(:has(*)) {
    .sidebar .nav-item .nav-link .navOverview,
    .sidebar .nav-item .nav-link i.fa-home {
        display: none !important;
    }
}

/* Also hide from mobile menu */
.menu__item:has(.navOverview),
#mobileMenu .menu__item:has(a[href*="Dashboard"]:first-child) {
    display: none !important;
}

/* ========================================
   ALERT CARDS - Light Gray Theme (Dashboard Alerts Widget)
   ======================================== */

/* Alert list container - white background for gaps to show */
#alertsList,
.alerts-list {
    background-color: #ffffff !important;
    padding: 0 16px !important; /* Left and right padding for gap */
    list-style: none !important;
    margin: 0 !important;
}

/* Alert card container - light gray background with spacing */
#alertsList li.panel,
#alertsList .panel,
#dashAlerts .panel,
#dashAlerts li.panel,
.alerts-list .panel,
.alerts-list li.panel {
    background-color: #eeeeee !important;
    border: none !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important; /* Gap between cards */
    overflow: hidden !important;
}

/* Remove margin from last card */
#alertsList li.panel:last-child,
.alerts-list li.panel:last-child {
    margin-bottom: 0 !important;
}

/* Alert card header - same light gray background as card, not navy */
#alertsList li.panel > .panelHeader,
#alertsList .panel > .panelHeader,
#dashAlerts .panel .panelHeader,
#dashAlerts li.panel .panelHeader,
.alerts-list .panel .panelHeader,
.alerts-list li.panel .panelHeader {
    background: #eeeeee !important;
    background-color: #eeeeee !important;
    color: #0f100f !important; /* Dark text like body */
    padding: 16px 20px !important; /* Padding on top and bottom */
    border-radius: 12px 12px 0 0 !important;
    border-bottom: none !important;
}

/* Alert header text - same color as body copy */
#alertsList li.panel .panelHeader h1,
#alertsList li.panel .panelHeader h2,
#alertsList li.panel .panelHeader h3,
#alertsList li.panel .panelHeader h4,
#alertsList li.panel .panelHeader h5,
#alertsList li.panel .panelHeader h6,
#alertsList li.panel .panelHeader p,
#alertsList li.panel .panelHeader span,
#alertsList li.panel .panelHeader div,
#alertsList li.panel .panelHeader strong,
#dashAlerts .panel .panelHeader h1,
#dashAlerts .panel .panelHeader h2,
#dashAlerts .panel .panelHeader h3,
#dashAlerts .panel .panelHeader h4,
#dashAlerts .panel .panelHeader h5,
#dashAlerts .panel .panelHeader h6,
#dashAlerts .panel .panelHeader p,
#dashAlerts .panel .panelHeader span,
#dashAlerts .panel .panelHeader div,
#dashAlerts .panel .panelHeader strong,
.alerts-list .panel .panelHeader p,
.alerts-list .panel .panelHeader span,
.alerts-list .panel .panelHeader div,
.alerts-list .panel .panelHeader strong {
    color: #0f100f !important; /* Dark text - same as body */
    font-family: 'Inter', sans-serif !important;
}

/* Alert header title (subject line) */
#alertsList li.panel .panelHeader p strong,
#dashAlerts .panel .panelHeader p strong,
.alerts-list .panel .panelHeader p strong {
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Alert header date/time */
#alertsList li.panel .panelHeader p:last-child,
#dashAlerts .panel .panelHeader p:last-child,
.alerts-list .panel .panelHeader p:last-child {
    font-size: 12px !important;
    color: #656667 !important; /* Slightly lighter for date */
    margin-top: 4px !important;
}

/* Alert icon in header */
#alertsList li.panel .panelHeader .alert-icon,
#dashAlerts .panel .panelHeader .alert-icon,
.alerts-list .panel .panelHeader .alert-icon {
    color: #003460 !important; /* Navy icon */
}

#alertsList li.panel .panelHeader .alert-icon i,
#dashAlerts .panel .panelHeader .alert-icon i,
.alerts-list .panel .panelHeader .alert-icon i {
    color: #003460 !important;
}

/* Alert body/content */
#alertsList li.panel .panelContent,
#dashAlerts .panel .panelContent,
.alerts-list .panel .panelContent {
    background-color: #eeeeee !important;
    padding: 0 20px 16px 20px !important;
    color: #0f100f !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Alert footer with context buttons */
#alertsList li.panel .btn-container,
#dashAlerts .panel .btn-container,
.alerts-list .panel .btn-container {
    background-color: #eeeeee !important;
    padding: 12px 20px !important;
    border-top: 1px solid #d9d9d9 !important;
}

/* Action footer in alerts */
#alertsList li.panel .action-footer,
#dashAlerts .panel .action-footer,
.alerts-list .panel .action-footer {
    background-color: transparent !important;
}

/* Profile image circle in alerts */
#alertsList li.panel .action-footer .img-circle,
#dashAlerts .panel .action-footer .img-circle,
.alerts-list .panel .action-footer .img-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* ========================================
   RESOURCES WIDGET - Hover State Consistency
   Blue text on white should have light blue hover like sidebar
   ======================================== */

/* Resources list items - match sidebar hover */
.rsc-widget-resources-list a,
.resources-list a,
.widget-resources a,
#dashResources a {
    display: block !important;
    padding: 10px 16px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    color: #003460 !important;
    text-decoration: none !important;
}

.rsc-widget-resources-list a:hover,
.resources-list a:hover,
.widget-resources a:hover,
#dashResources a:hover {
    background-color: #d9edfa !important; /* Light blue - same as sidebar hover */
    color: #003460 !important;
    text-decoration: none !important;
}

/* Collapsable section links (like Resources dropdown items) */
.collapsable-section a,
.collapse a:not(.btn):not(.cta-button) {
    display: block !important;
    padding: 10px 16px !important;
    margin: 2px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    color: #003460 !important;
}

.collapsable-section a:hover,
.collapse a:not(.btn):not(.cta-button):hover {
    background-color: #d9edfa !important; /* Light blue hover */
    color: #003460 !important;
    text-decoration: none !important;
}

/* ========================================
   ALERTS PAGE - WHITE CARDS ON GRAY BACKGROUND
   On the Alerts page (/Feeds), background is already gray,
   so cards should be white for contrast.
   Uses .alerts-menu-open class which is unique to Alerts page.
   ======================================== */

/* Alerts page container - add top margin for gap from title */
.content.alerts-menu-open #alertsList,
.alerts-menu-open #alertsList {
    padding-top: 16px !important;
    background-color: transparent !important;
}

/* Alerts page - white card backgrounds */
.content.alerts-menu-open #alertsList > li.panel,
.alerts-menu-open #alertsList > li.panel {
    background-color: #ffffff !important;
}

/* Alerts page - white header backgrounds */
.content.alerts-menu-open #alertsList > li.panel > .panelHeader,
.alerts-menu-open #alertsList > li.panel > .panelHeader {
    background-color: #ffffff !important;
}

/* Alerts page - white content backgrounds */
.content.alerts-menu-open #alertsList > li.panel > .panelContent,
.alerts-menu-open #alertsList > li.panel > .panelContent {
    background-color: #ffffff !important;
}

/* Alerts page - white footer backgrounds */
.content.alerts-menu-open #alertsList > li.panel > .btn-container,
.alerts-menu-open #alertsList > li.panel > .btn-container {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
}

/* ========================================
   REPORTS PAGE - Search & Pagination Styling
   ======================================== */

/* Hide the duplicate caret in the category dropdown button */
.search-category-wrapper button#category-select .caret,
.input-group.search-category-wrapper #category-select > .caret,
#categories button#category-select span.caret,
button#category-select span.caret {
    display: none !important;
    visibility: hidden !important;
}

/* Add gap between dropdown button and search input */
.search-category-wrapper .input-group-btn,
.input-group.search-category-wrapper #categories,
#categories.input-group-btn {
    padding-right: 8px !important;
}

/* Alternative: add margin to the button itself */
.search-category-wrapper button#category-select,
#categories button#category-select,
button#category-select.btn.dropdown-toggle {
    margin-right: 8px !important;
}

/* Search row - vertical alignment for all elements */
.col-sm-7 > .inline-block-bottom {
    vertical-align: middle !important;
}

/* Dropdown button - center vertically with input */
#categories button#category-select,
button#category-select.btn.dropdown-toggle {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Filter link parent container - remove bottom margin and align */
.col-sm-7 > .inline-block-bottom.m-b-10 {
    margin-bottom: 0 !important;
    vertical-align: bottom !important;
}

/* Filter link container - vertical alignment */
.inline-block-bottom.m-b-10 .hidden-xs,
div.inline-block-bottom.m-b-10 > div.hidden-xs {
    display: inline-flex !important;
    align-items: flex-end !important;
    height: 58px !important;
    padding-bottom: 12px !important;
}

/* Filter link - larger text size */
a#advanced-filter,
a#advanced-filter.m-l-10,
.hidden-xs a#advanced-filter {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Search by label - larger text */
.col-sm-7 > .inline-block-bottom > label,
label[for="typeahead-input"],
.search-category-wrapper + label,
.inline-block-bottom > label {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Search dropdown button - larger text */
#category-select,
button#category-select,
#categories button#category-select {
    font-size: 16px !important;
}

/* Search dropdown menu items - larger text */
#category-options li a,
.search-category-wrapper .dropdown-menu li a,
#categories .dropdown-menu li a {
    font-size: 16px !important;
    padding: 10px 16px !important;
    color: #0f100f !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Search dropdown menu items - hover state */
#category-options li a:hover,
#category-options li:hover a,
.search-category-wrapper .dropdown-menu li a:hover,
.search-category-wrapper .dropdown-menu li:hover a,
#categories .dropdown-menu li a:hover,
#categories .dropdown-menu li:hover a {
    background-color: #d9edfa !important;
    color: #003460 !important;
    text-decoration: none !important;
}

/* Search input - larger text */
#typeahead-input,
.search-category-wrapper input.form-control {
    font-size: 16px !important;
}

/* Grid/Report card title - reduce vertical padding */
.t-grid .t-toolbar,
.t-grid-toolbar,
.panel-heading.bg-primary,
.bg-primary.panel-heading {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Export dropdown on grid header - make text readable (not white on white) */
.t-grid .t-toolbar select,
.t-grid-toolbar select,
.bg-primary select,
.panel-heading.bg-primary select {
    color: #0f100f !important;
    background-color: #ffffff !important;
}

/* Export dropdown button styling */
.t-grid .t-toolbar .btn,
.t-grid-toolbar .btn,
.bg-primary .dropdown-toggle,
.panel-heading.bg-primary .dropdown-toggle {
    color: #0f100f !important;
    background-color: #ffffff !important;
}

/* Panel header - allow dropdown to overflow */
.panelHeader,
.panelOverflowY .panelHeader,
#report-export,
#report-export .pull-right {
    overflow: visible !important;
}

/* Export menu - ensure dropdown is visible */
.t-menu .t-animation-container,
#ExportMenuExportCustomerManagementReport .t-animation-container {
    overflow: visible !important;
    z-index: 9999 !important;
}

/* ========================================
   EXPORT DROPDOWN MENU - Telerik Menu Styling
   ======================================== */

/* Export menu container - proper width and display */
#report-export .t-menu,
.t-menu[id*="ExportMenu"] {
    background: transparent !important;
    border: none !important;
}

/* Export menu top-level item - remove background/border from wrapper */
#report-export .t-menu > .t-item,
.t-menu[id*="ExportMenu"] > .t-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Export menu trigger button - outline/secondary style */
#report-export .t-menu > .t-item > .t-link,
.t-menu[id*="ExportMenu"] > .t-item > .t-link {
    background-color: #ffffff !important;
    color: #003460 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #003460 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Export button hover state - subtle light blue background */
#report-export .t-menu > .t-item > .t-link:hover,
.t-menu[id*="ExportMenu"] > .t-item > .t-link:hover,
#report-export .t-menu > .t-item.t-state-hover > .t-link,
.t-menu[id*="ExportMenu"] > .t-item.t-state-hover > .t-link {
    background-color: #d9edfa !important;
    border-color: #003460 !important;
    color: #003460 !important;
    text-decoration: none !important;
}

/* Export dropdown arrow icon - navy always */
#report-export .t-menu .t-arrow-down,
.t-menu[id*="ExportMenu"] .t-arrow-down {
    border-top-color: #003460 !important;
    margin-left: 8px !important;
}

/* Export dropdown panel - wider and styled */
#report-export .t-menu .t-group,
.t-menu[id*="ExportMenu"] .t-group {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    min-width: 160px !important;
    padding: 8px 0 !important;
    margin-top: 4px !important;
}

/* Export dropdown items */
#report-export .t-menu .t-group .t-item,
.t-menu[id*="ExportMenu"] .t-group .t-item {
    background: transparent !important;
    border: none !important;
}

/* Export dropdown item links */
#report-export .t-menu .t-group .t-item .t-link,
.t-menu[id*="ExportMenu"] .t-group .t-item .t-link {
    color: #0f100f !important;
    padding: 10px 16px !important;
    display: block !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Export dropdown item hover */
#report-export .t-menu .t-group .t-item .t-link:hover,
.t-menu[id*="ExportMenu"] .t-group .t-item .t-link:hover,
#report-export .t-menu .t-group .t-item.t-state-hover .t-link,
.t-menu[id*="ExportMenu"] .t-group .t-item.t-state-hover .t-link {
    background-color: #d9edfa !important;
    color: #003460 !important;
    text-decoration: none !important;
}

/* ========================================
   LEGACY PROFILE PAGE - Collapsible Boxes
   ======================================== */

/* Collapsible panels container - add horizontal margin to align with text */
.my-profile-container .collapsable-panels-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Collapsible panels container - add bottom spacing */
.collapsable-panels-container {
    margin-bottom: 30px !important;
    padding-bottom: 10px !important;
}

/* Collapsible header - rounded corners when collapsed */
.collapsable-panels-container .collapsable-header {
    background-color: #003460 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
    cursor: pointer !important;
    border-radius: 25px !important;
    transition: border-radius 0.2s ease !important;
}

/* Collapsible header - top rounded, bottom square when expanded */
.collapsable-panels-container .collapsable-header:not(.collapsed) {
    border-radius: 25px 25px 0 0 !important;
    margin-bottom: 0 !important;
}

/* Collapsible content section - target both classes */
.collapsable-panels-container .collapsable-section,
.collapsable-panels-container .collapse {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: none !important;
    padding: 15px 20px !important;
    border-radius: 0 0 25px 25px !important;
}

/* Hide padding when collapsed */
.collapsable-panels-container .collapse:not(.in) {
    padding: 0 !important;
    border: none !important;
}

/* First collapsible header - no top margin */
.collapsable-panels-container .collapsable-header:first-child {
    margin-top: 0 !important;
}

/* Activity Timeline - add margin on sides to align with text */
.activity-timeline-table {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.activity-timeline-table .panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================
   CONTACT CARD - Collapsible Boxes
   ======================================== */

/* Remove white background from contact card container */
#contactCard,
#contactCard #contactCardDetails,
#contactCard .col-md-12 {
    background-color: transparent !important;
}

/* Contact card collapsible header - rounded when collapsed */
#contactCard .collapsable-header,
#contactCardDetails .collapsable-header {
    background-color: #003460 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    margin-bottom: 0 !important;
    margin-top: 10px !important;
    cursor: pointer !important;
    border-radius: 25px !important;
    transition: border-radius 0.2s ease !important;
}

/* Contact card collapsible header - top rounded when expanded */
#contactCard .collapsable-header:not(.collapsed),
#contactCardDetails .collapsable-header:not(.collapsed) {
    border-radius: 25px 25px 0 0 !important;
}

/* Contact card collapsible content - white background when expanded */
#contactCard .collapsable-section,
#contactCard .collapse,
#contactCardDetails .collapsable-section,
#contactCardDetails .collapse {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: none !important;
    padding: 15px 20px !important;
    border-radius: 0 0 25px 25px !important;
}

/* Hide padding/border when collapsed */
#contactCard .collapse:not(.in),
#contactCardDetails .collapse:not(.in) {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* Contact Card - Featured Report / Business Snapshot styling */
/* Match the home page Business Snapshot style */
#contactCard .featured-report.tile-container,
#contactCard .tile-container {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

/* Remove gray boxes from list items in contact card */
#contactCard .featured-report .list .list-item,
#contactCard .tile-container .list .list-item,
#contactCard .featured-report .list .list-content,
#contactCard .tile-container .list .list-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

/* List layout - two columns like Business Snapshot */
#contactCard .featured-report .list,
#contactCard .tile-container .list {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#contactCard .featured-report .list .list-item,
#contactCard .tile-container .list .list-item {
    width: 50% !important;
    padding: 10px 15px 10px 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* List titles - match Business Snapshot */
#contactCard .featured-report .list-title,
#contactCard .tile-container .list-title,
#contactCard .featured-report .list .list-content p.list-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4d4f53 !important;
    margin-bottom: 4px !important;
}

/* List values - match Business Snapshot */
#contactCard .featured-report .list .list-content p:not(.list-title),
#contactCard .tile-container .list .list-content p:not(.list-title) {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #0f100f !important;
    margin: 0 !important;
}

/* Contact Card close button - plain X without circle container */
.profileCardClose {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    padding: 5px !important;
}

.profileCardClose .fa-times {
    color: #666666 !important;
    font-size: 20px !important;
}

.profileCardClose:hover .fa-times {
    color: #333333 !important;
}

/* Modal - extend content to full width */
.modal .modal-body {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.modal .modal-content {
    width: 100% !important;
}

/* Modal header - plain white background with dark text */
.modal .modal-header {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding-right: 15px !important;
}

.modal .modal-header .modal-title {
    color: #333333 !important;
    font-weight: bold !important;
}

/* Modal close button - plain X without circle, positioned right */
.modal .modal-header .close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    position: static !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

/* Style the fa-times-circle icon to look like plain X */
.modal .modal-header .close .fa,
.modal .modal-header .close .fa-times-circle {
    color: #333333 !important;
    font-size: 20px !important;
}

/* Change the icon from circle-x to plain x */
.modal .modal-header .close .fa-times-circle::before {
    content: "\f00d" !important;
}

.modal .modal-header .close:hover .fa,
.modal .modal-header .close:hover .fa-times-circle {
    color: #666666 !important;
}

/* Modal collapsible sections - match Quick Links style */
.modal .panel-group .panel {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
}

.modal .panel-group .panel-heading,
.modal .panel-heading {
    background-color: #003460 !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 10px 15px !important;
    border: none !important;
    min-height: auto !important;
}

.modal .panel-group .panel-title,
.modal .panel-title {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal .panel-group .panel-heading a,
.modal .panel-heading a,
.modal .panel-group .panel-title a,
.modal .panel-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.modal .panel-group .panel-heading a:hover,
.modal .panel-heading a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hide the original circle icon completely */
.modal .panel-heading .fa,
.modal .panel-heading .glyphicon,
.modal .panel-heading i.fa {
    display: none !important;
}

/* Add chevron using ::before on the link */
.modal .panel-heading .panel-title a::before,
.modal .bd-accordian .panel-title a::before,
#advancedFilter .panel-title a::before {
    font-family: FontAwesome !important;
    content: "\f078" !important;  /* fa-chevron-down */
    color: #ffffff !important;
    font-size: 12px !important;
    padding-right: 15px !important;
    display: inline-block !important;
}

/* Show chevron-up when expanded */
.modal .panel:has(.panel-collapse.in) .panel-title a::before,
.modal .bd-accordian .panel:has(.panel-collapse.in) .panel-title a::before,
#advancedFilter .panel:has(.panel-collapse.in) .panel-title a::before {
    content: "\f077" !important;  /* fa-chevron-up */
}

/* When expanded - top rounded, bottom square */
.modal .panel-heading.expanded,
.modal .panel-group .panel:has(.panel-collapse.in) .panel-heading {
    border-radius: 25px 25px 0 0 !important;
}

.modal .panel-group .panel-collapse .panel-body,
.modal .panel-collapse .panel-body {
    border: 1px solid #e5e5e5 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 15px !important;
}

/* ========================================
   TELERIK GRID PAGINATION - Consistent styling
   ======================================== */

/* Pagination container */
.t-grid-pager {
    display: flex !important;
    align-items: center !important;
    padding: 10px !important;
    background-color: #ffffff !important;
}

/* Pager buttons container */
.t-pager {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Numeric page buttons container */
.t-pager .t-numeric {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* All pagination links and buttons */
.t-pager .t-link,
.t-pager .t-numeric a,
.t-pager .t-numeric span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

/* Hover state for pagination buttons - light blue like sidebar menu */
.t-pager .t-link:hover:not(.t-state-disabled),
.t-pager .t-numeric a:hover {
    background-color: #d9edfa !important;
    border-color: #d9edfa !important;
    color: #003460 !important;
}

/* Active/current page */
.t-pager .t-numeric .t-state-active,
.t-pager .t-numeric span.t-state-active {
    background-color: #003460 !important;
    border-color: #003460 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Disabled state */
.t-pager .t-link.t-state-disabled {
    background-color: #f9f9f9 !important;
    border-color: #e0e0e0 !important;
    color: #cccccc !important;
    cursor: not-allowed !important;
}

/* Arrow icons in pagination */
.t-pager .t-icon {
    font-size: 12px !important;
}

/* Refresh button */
.t-grid-pager .t-status .t-refresh {
    color: #003460 !important;
}

.t-grid-pager .t-status .t-refresh:hover {
    color: #005a9e !important;
}

/* Status text */
.t-grid-pager .t-status-text {
    color: #666666 !important;
    font-size: 13px !important;
    margin-left: auto !important;
}

/* ========================================
   END OF NEWULIFE CUSTOM STYLES
   ======================================== */

.diagnosticContainer {
	margin-top: 10px;
	padding: 15px;
	border: 1px solid #6077A8;
	background: #fafafa;
	color: #111111;
    position: absolute;
}
.diagnosticHeader {
	padding: 10px;
	font-size: 18px;
	background: #6077A8;
	color: #fafafa;
	margin-bottom: .5em;
}

.diagnosticSections {
	margin-bottom: 1em;
	font-size: 12px;
	line-height: 1.6em;
}

.diagnosticSection {
	font-size: 16px;
	color: #31436b;
	margin: 1.5em 0 .25em;
	border-bottom: 2px solid #333;
}

.toggleDiagnostic {
	font-size: 12px;
}

.viewMoreHiddenData {
	position: relative;
	overflow: hidden;
}

.viewMoreHiddenData div { border-bottom: 1px solid #222222; padding: 5px 10px; }
.diagnosticKey {
	padding-right: 10px;
}

.diagnosticValue {
	color: #ff0000;
}

@media screen and (min-width: 1024px) {
	.diagnosticContainer {
		max-width: calc(100% - 30rem);
		margin: 0 3rem 0 33.75rem;
	}
}
.gcButton { margin-left: 110px; }
.gcLinkLoc { margin-left: 50px; }
.gcInfo { clear: both; margin-top: 20px; }
	.gcInfo p { margin-bottom: 1em; }
	.gcInfo a { color: #2275B1; }
	.gcInfohr { width:500px; text-align:left; }
.gcInfoTitle {
	color: #999999;
	display: block;
	float: left;
	text-align: left;
	width: 120px;
	margin-right: 10px;
	margin-left: 10px;
}
.gcInfoDesc { float: left; text-align: left; width: 50%; position: relative; }
.gcInfoDesc2 { float: left; text-align: left; width: 70%; position: relative; }
.gcDropDownLocation {
	float: left;
	width:120px;
	margin: 0 10px 0 0;
	position: relative;
}

/* Unused gift certificate reports grid styling and responsiveness*/
.gift-certificates-reports-container {
	max-width: 100%;
}

@media only screen and (min-width: 1200px) {
	.gift-certificates-reports-container {
		max-width: 100%;
	}
}

@media only screen and (min-width: 1400px) {
	.gift-certificates-reports-container {
		max-width: 90%;
	}
}

@media only screen and (min-width: 1600px) {
	.gift-certificates-reports-container {
		max-width: 75%;
	}
}

@media screen and (max-width: 768px) {

	#unusedGiftCertificates .responsive-table table {
		display: grid;
	}

	#unusedGiftCertificates .responsive-table thead {
		display: none;
	}

	#unusedGiftCertificates .responsive-table td[title]:before {
		display: initial;
		padding-right: 8px;
	}

	#unusedGiftCertificates .responsive-table td {
		padding: 0 !important;
	}

	#unusedGiftCertificates .responsive-table tr {
		padding: 5px 8px;
	}

	#unusedGiftCertificates .responsive-table .responsive-hidden {
		display: none;
	}

	#unusedGiftCertificates .responsive-table .k-hierarchy-cell {
		display: inline-block !important;
		position: absolute;
		right: 10px;
		width: auto;
		height: auto;
		line-height: 0;
	}

		#unusedGiftCertificates .responsive-table .k-hierarchy-cell:before {
			margin: 0;
		}

		#unusedGiftCertificates .responsive-table .k-hierarchy-cell .k-icon {
			outline: 0;
			box-shadow: none;
			width: 25px;
			height: 25px;
		}

			#unusedGiftCertificates .responsive-table .k-hierarchy-cell .k-icon:before {
				font-family: FontAwesome;
				font-size: 20px;
				color: #666;
				position: absolute;
				right: 8px;
				top: 3px;
			}

		#unusedGiftCertificates .responsive-table .k-hierarchy-cell .k-i-expand:before {
			content: "\f0d7";
		}

		#unusedGiftCertificates .responsive-table .k-hierarchy-cell .k-i-collapse:before {
			content: "\f0d8";
		}

	#unusedGiftCertificates .responsive-table .k-picker-wrap .k-icon.k-i-calendar,
	.form-group .t-picker-wrap .t-icon.t-icon-calendar {
		font-family: 'FontAwesome' !important;
		font-size: 16px;
		background-image: none;
		color: #666;
		position: absolute;
		right: 6px;
		top: 5px;
		text-indent: 0;
		line-height: normal;
	}

	#unusedGiftCertificates .responsive-table .detail-row-item {
		margin-left: 15px;
	}
}


/* Hiding grid rows' expansion details button in desktop view*/
#unusedGiftCertificates .k-hierarchy-col, #unusedGiftCertificates .k-hierarchy-cell {
	display: none !important;
}

#unusedGiftCertificates .k-grid-header {
	padding-right: 0 !important;
}

#unusedGiftCertificates .k-grid .k-grid-header th.k-header, #unusedGiftCertificates .k-grid tr td {
	padding: 5px !important;
}

/* Gift Certificate Details page*/
.giftCertificateDetailsContainer {
	border: 1px solid #ddd;
	max-width: 40%;
	margin: 25px 10px;
	padding: 5px 25px 20px;
	border-radius: 5px;
}

.giftCertificateDetailsContainer button {
	margin-left: 10px;
}

.giftCertificateDetailsContainer h3 {
	margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
	.giftCertificateDetailsContainer {
		max-width: 100%;
	}

	.giftCertificateDetailsContainer button {
		margin-top: 10px;
		margin-left: 0;
	}
}

@media screen and (min-width: 768px) {
	/* Override for specific rows to be shown */
	.k-grid #unusedGiftCertificatesCustomerReport.k-detail-row,
	.k-grid #projectedautoshipreport .k-detail-row {
		display: block !important;
	}
}

@media screen and (max-width: 1200px) {
	#unusedGiftCertificates .k-master-row .k-hierarchy-col, #unusedGiftCertificates .k-master-row .k-hierarchy-cell {
		display: inline-block !important;
	}

	#unusedGiftCertificatesCustomerReport.responsive-table button {
		font-family: Arial,Helvetica,sans-serif!important;
		width: 100%;
		display: block;
		padding: 15px;
		color: #fff;
		background-color: #286090!important;
		border: 1px solid #204d74!important;
	}

	#unusedGiftCertificatesCustomerReport.k-grid tr td {
		padding: 5px 25px 5px 5px;
		white-space: initial;
	}

	#unusedGiftCertificatesCustomerReport.k-grid tr td.k-hierarchy-cell {
		padding: 5px;
	}

	#unusedGiftCertificatesCustomerReport .k-grid-content td.inline-label[data-title]:before {
		content: attr(data-title) ": ";
		display: inline;
	}

	#unusedGiftCertificatesCustomerReport .customer-management-header-container .export-dropdown .k-menu:before {
		top: 8px;
	}

	/* Detail grid */
	#unusedGiftCertificatesCustomerReport .k-detail-row {
		background: #f2f2f2 !important;
	}

	#unusedGiftCertificatesCustomerReport .k-detail-row .detail-row-wrapper .address-block {
		margin-bottom: 10px;
	}

	#unusedGiftCertificatesCustomerReport .k-detail-row .detail-row-wrapper .address-block span {
		display: block;
	}

	#unusedGiftCertificatesCustomerReport .k-master-row {
		position: relative;
		padding: 0 !important;
	}

	/* Detail grid - hierarchy arrow */
	#unusedGiftCertificatesCustomerReport .k-hierarchy-cell {
		display: inline-block !important;
		position: absolute;
		right: 0;
		width: auto;
		top: 0;
		height: auto;
		line-height: 0;
		border: none;
	}

	#unusedGiftCertificatesCustomerReport .k-hierarchy-cell:before {
		margin: 0;
	}

	#unusedGiftCertificatesCustomerReport .k-hierarchy-cell .k-icon {
		outline: 0;
		box-shadow: none;
	}

	#unusedGiftCertificatesCustomerReport .k-hierarchy-cell .k-icon:before {
		font-family: FontAwesome;
		font-size: 14px;
		color: #666;
		position: absolute;
		right: 8px;
		top: 3px;
	}

	#unusedGiftCertificatesCustomerReport .k-hierarchy-cell .k-i-expand:before {
		content: "\f0d7";
	}

	#unusedGiftCertificatesCustomerReport .k-hierarchy-cell .k-i-collapse:before {
		content: "\f0d8";
	}

	/* Detail grid - inputs */
	#unusedGiftCertificatesCustomerReport .k-detail-row .detail-row-wrapper select {
		margin-bottom: 5px;
	}

	#unusedGiftCertificatesCustomerReport .k-grid-content td .k-datepicker {
		max-width: 100%;
		width: 100%;
		margin-bottom: 5px;
	}

	#unusedGiftCertificatesCustomerReport .k-detail-row .detail-row-wrapper .k-datepicker input {
		max-width: 100%;
		border: 0 !important;
	}

	#unusedGiftCertificatesCustomerReport .k-picker-wrap .k-input {
		line-height: 24px;
	}

	#unusedGiftCertificatesCustomerReport.k-grid .k-grid-header {
		display: none;
	}

	#unusedGiftCertificatesCustomerReport.k-grid.responsive-table .k-grid-pager {
		text-align: left;
		box-sizing: border-box;
	}

	#unusedGiftCertificatesCustomerReport.k-grid.responsive-table .k-pager-info,
	#unusedGiftCertificatesCustomerReport.k-grid.responsive-table .k-pager-sizes {
		padding: 0;
		text-align: left;
		box-sizing: border-box;
	}

	#unusedGiftCertificatesCustomerReport.k-grid.responsive-table .k-pager-wrap .k-widget {
		margin-left: 0;
	}

	#unusedGiftCertificatesCustomerReport.k-grid.responsive-table .k-grid-content table {
		display: grid;
	}

	#unusedGiftCertificatesCustomerReport.responsive-table td[data-title]:before {
		content: attr(data-title);
		font-weight: 700;
		width: 100%;
		display: block;
		margin-top: 4px;
		margin-bottom: 0;
		line-height: 16px;
		color: #3b3f4f;
	}

	#unusedGiftCertificatesCustomerReport.responsive-table td {
		display: block;
	}

	#unusedGiftCertificatesCustomerReport.k-grid.responsive-table tr {
		display: block;
	}

	#unusedGiftCertificatesCustomerReport .k-detail-row td.k-detail-cell {
		display: block;
	}

	#unusedGiftCertificates .k-hierarchy-cell {
		display: inline-block !important;
	}
}
.contactSearchContainer {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.globalSearch {
    position: relative;
    background: #eeeeee;
    padding: 10px;
    margin-bottom: 15px !important;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.globalSearchContainer .input-group {
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 4px;
    background: #fff;
}

.globalSearchContainer .input-group .input-group-addon {
    background: #fff;
    box-shadow: none;
    border: 0;
}

.globalSearchContainer .input-group input[type="text"] {
    box-shadow: none;
    color: #333;
    z-index: 1;
    margin-bottom: 0;
    line-height: 35px;
    height: 35px;
    padding: 5px 5px 5px 0;
    border: 0;
}

.globalSearchContainer .clearable {
    border: 0 !important;
    padding: 3px 0px 3px 0px;
    border-radius: 3px;
    transition: background 0.04s;
    filter: hue-rotate(180deg) saturate(0%);
    outline-width: 0px;
    width: calc(100% - 5px);
}

.clearable {
    background: #fff url(../Images/Icons/iconClose.png) no-repeat right -50px center;
}

.clearable.ac_loading {
    background: #fff url(../Images/indicator.gif) right center no-repeat;
}

.globalSearchContainer .clearable.x {
    background-position: right 5px center;
}

.globalSearchContainer .clearable.onX {
    cursor: pointer;
}

.globalSearchContainer .clearable::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

.ac_results {
    border-color: #cccccc !important;
    border-radius: 3px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}

.ac_results > ul > li {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    padding: 5px;
    color: #333333;
}

.ac_results > ul > li.ac_odd {
    background-color: #ffffff;
}

.ac_results > ul > li.ac_even.ac_over,
.ac_results > ul > li.ac_odd.ac_over {
    background-color: #f3f3f3;
    color: #333333;
}

@media screen and (max-width: 991px) {
    .ac_results {
        padding: 0 !important;
    }

    .ac_results > ul {
        border: 1px solid #cccccc;
    }
}



@media screen and (max-width: 768px) {
    #orderDraftDiv .responsive-table table {
        display: grid;
    }

    #orderDraftDiv .responsive-table thead {
        display: none;
    }

    #orderDraftDiv .responsive-table td[title]:before {
        display: block;
        padding-right: 8px;
    }

    .responsive-table td {
        padding: 0 !important;
    }

    #orderDraftDiv .responsive-table tr {
        padding: 5px 8px;
    }

    #orderDraftDiv .responsive-table .responsive-hidden {
        display: none;
    }

    #orderDraftDiv .responsive-table .k-hierarchy-cell {
        display: inline-block !important;
        position: absolute;
        right: 10px;
        width: auto;
        height: auto;
        line-height: 0;
    }

    #orderDraftDiv .responsive-table .k-hierarchy-cell:before {
        margin: 0;
    }

    #orderDraftDiv .responsive-table .k-hierarchy-cell .k-icon {
        outline: 0;
        box-shadow: none;
        width: 25px;
        height: 25px;
    }

    #orderDraftDiv .responsive-table .k-hierarchy-cell .k-icon:before {
        font-family: FontAwesome;
        font-size: 20px;
        color: #666;
        position: absolute;
        right: 8px;
        top: 3px;
    }

    #orderDraftDiv .responsive-table .k-hierarchy-cell .k-i-expand:before {
        content: "\f0d7";
    }

    #orderDraftDiv .responsive-table .k-hierarchy-cell .k-i-collapse:before {
        content: "\f0d8";
    }

    #orderDraftDiv .responsive-table .k-picker-wrap .k-icon.k-i-calendar,
    .form-group .t-picker-wrap .t-icon.t-icon-calendar {
        font-family: 'FontAwesome' !important;
        font-size: 16px;
        background-image: none;
        color: #666;
        position: absolute;
        right: 6px;
        top: 5px;
        text-indent: 0;
        line-height: normal;
    }

    #orderDrafts .responsive-table .detail-row-item {
        margin-left: 15px;
    }

    #orderDrafts .send-message-button {
        width: auto !important;
        padding: 8px 15px !important;
        margin-top: 8px;
    }
}


/* Hiding grid rows' expansion details button in desktop view*/
#orderDrafts .k-hierarchy-col, #orderDrafts .k-hierarchy-cell {
    display: none !important;
}

#orderDrafts .k-grid-header {
    padding-right: 0 !important;
}

/* Center the buttons in the cell */
.kendoCellButtonWrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Order Drafts Details page*/
.orderDraftDetailsContainer {
    border: 1px solid #ddd;
    max-width: 40%;
    margin: 25px 10px;
    padding: 5px 25px 20px;
    border-radius: 5px;
}

.orderDraftDetailsContainer button {
    margin-left: 10px;
}

.orderDraftDetailsContainer h3 {
    margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
    .orderDraftDetailsContainer {
        max-width: 100%;
    }

    .orderDraftDetailsContainer button {
        margin-top: 10px;
        margin-left: 0;
    }

    .k-header.k-grid-toolbar.k-grid-top {
        display: flex;
        justify-content: center;
    }
}

@media screen and (min-width: 769px) {
    #orderDrafts .hidden-md {
        display: none;
    }
}

/* ajax */
#indicator 
{
    font-weight: bold;
    display:none;
    padding-left: 20px;
    background-image: url(/Content/images/indicator.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.indicator 
{
    font-weight: bold;
    display:block;
    padding-left: 20px;
    background-image: url(/Content/images/indicator.gif);
    background-repeat: no-repeat;
    background-position: center;
}

/* update message to user */
.userMessage {
    border-top: solid 1px #CCC; 
    border-bottom: solid 1px #CCC;
    line-height:30px;
    text-align:center; 
    background-color:#fff5c2;
}

.system-clock {
    padding: 15px 0 0;
    font-size: 13px;
}

@media screen and (max-width: 1073px ) {
    .system-clock {
        display: none;
    }
}

/* notonapp doesn't show on app, onapp doesn't show on web */
.onapp {
    display: none;
    visibility: hidden;
}

/* Footer and version label is in layout.css */