/* File: grace.css */
:root {
    --primary-color: #DB291D;
    --secondary-color: #00426A;
    --loader-color: var(--primary-color);
    --leftnav-hover-color: var(--primary-color);
    --primary-button-color: var(--primary-color);
    --primary-button-hover-color: #E97F77;
    --primary-color-17-percent: #DB291D2B;
    --primary-color-17-percent-background: var(--primary-color-17-percent);
    --grey: #eeeeee;
    --grey-shadow: #05050510;
    --background-grey: var(--grey);
    --border-grey: var(--grey);
    --signal-positive-color: #33D56F;
    --signal-negative-color: #FF8F00;
    --dark-grey: #666;
    --dark-grey-1: #333740;
    --dark-grey-2: #717684;
    --black: #000;
    --background-black: var(--black);
    --white: #fff;
    --background-white: var(--white);
    --primary-text-color: #333740;
    --light-grey: #F8F6F4;
    --light-grey-background: var(--light-grey);
    --light-grey-1: #A0A5B4;
    --light-grey-1-background: var(--light-grey-1);
    --light-grey-2: #DBDDE5;
    --light-grey-2-background: var(--light-grey-2);
    --light-grey-3: #ECEDF0;
    --light-grey-3-background: var(--light-grey-3);
    --light-grey-4: #b0b0b0;
    --light-grey-4-background: var(--light-grey-4);
    --light-grey-5: #F2F2F2;
    --light-grey-5-background: var(--light-grey-5);
    --light-blue: #D4EFFC;
    --light-blue-1: #A1E0FF;
    --light-blue-text-selection: #BFE7FA;
    --warning-orange: #F69336;
    --light-orange-1: #FEF5E5;
    --error-red: #EE2439;
    --transparent: #ffffff00;
    --popup-button-color: #D4EFFC;
    --toolbar-tab-border: #FFD000;
    --light-grey-thin-border-color: #dbdde5;
    --default-font-family: Arial, sans-serif;
    --report-filter-list-background-color: #ffffff;
}

BODY {
    background-color: var(--background-white);
    MARGIN: 0px 0px 0px 0px;
    font-family: var(--default-font-family);
    line-height: 1.25;
}

A:link {
    COLOR: #000000;
    text-decoration: underline;
}

/******************** STANDARD HEADER ********************/
div.headerbg {
    background: var(--primary-color);
    height: 60px;
}
td.i4sidenav_width.header_logo {
    background: var(--primary-color);
}
td.i4sidenav_width.header_logo img {
    margin-top: 18px;
}
.i4header_userinfo {
    color: #ffffff;
    font-size: 14px;
}
#logoffBtn {
    color: #ffffff;
    font-weight: 600;
    border: solid 1px #ffffff;
}


/******************** CUSTOM HEADER ********************/
div.headerbg {
  background-color: var(--secondary-color);
  height: 50px;
}

header-title {
  font-size: 26px;
  line-height: 40px;
  font-weight: bold;
  color: #ffffff;
  margin-left: 25px;
}


/******************** PAGE BORDERS ********************/
div.navigation-toolbar-holder {
    border-top: 3px solid var(--secondary-color);
}

div.browsePageContainer {
    border-top: 3px solid var(--secondary-color);
}
#browsePageBody div#navigationMenuContainer {
    border-top: 3px solid var(--secondary-color);
}
div.toolbarOuter {
    border-top: 3px solid var(--secondary-color);
}

/******************** HAMBURBER MENU ********************/
#dashboardPageBody div.navigation-menu-toggle {
    height: 60px;
    width: 70px;
    background-color: #eaebec;
    border: none;
}
/* Add an underline interaction when hovering over menu items */
div.menu-section-header-title:hover {
    height: 42px;
    line-height: 42px;
    padding-left: 15px;
    background-color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;
}
div.menu-cell:hover{
  text-decoration: underline;
  background-color: #efefef;
}

/* CREATE option in hamburger menu */
div.menu-cell-collapsed-create-content:hover {
    background-color: var(--primary-color);
}
div.menu-cell-collapsed-create-content {
    background-color: var(--primary-color);
}
div.menu-cell-expanded-create-content {
    background-color: var(--primary-color);
}

/******************** DASHBOARDS ********************/
/**** Full Screen mode ****/
#fullscreenBtn {
    background: url(../customimages/fullscreen.svg) no-repeat center;
}

/* Dashboard - when in full screen mode */
div.fullscreenMode div.SubTabControlViewContainer #exitFullscreenBtn {
    background: url(../customimages/exit-fullscreen-native.svg) center no-repeat;
}
div.fullscreenMode div.SubTabControlViewContainer #exitFullscreenBtn:hover {
    background: url(../customimages/exit-fullscreen-selected.svg) center no-repeat;
}

/* Presentation - when in full screen mode */
div.fullscreenMode div.StoryboardSubTabControlViewContainer #exitFullscreenBtn {
    background: url(../customimages/exit-fullscreen-native.svg) center no-repeat;
}
div.fullscreenMode div.StoryboardSubTabControlViewContainer #exitFullscreenBtn:hover {
    background: url(../customimages/exit-fullscreen-selected.svg) center no-repeat;
}

/********** Top Dashboard Menu **********/
.topToolbarContainer {
    background-color: #eaebec;
}
dashboard-edit-toolbar, dashboard-active-toolbar {
    background: #eaebec;
    position: relative;
}

/* Dashboard Tab Headings */
.tabContainer .tab {
    border-bottom: 4px solid #eaebec;
    height: 56px;
    line-height: 54px;
    background-color: #eaebec;
    color: #344048;
}
.tabContainer .tab:hover {
    border-bottom: 4px solid var(--primary-color);
    height: 56px;
    line-height: 54px;
}
.tabContainer .activeTab {
    border-bottom: 4px solid var(--primary-color);
    font-weight: 800;
}
.tabContainer .activeTab:hover {
    border-bottom: 4px solid var(--primary-color);
}
.tabContainer .tab .tabButtonText {
    font-family: var(--default-font-family);
    font-size: 14px;
    line-height: 60px;
    padding-left: 0px;
    padding-right: 22px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Dashboard Tab Headings - extra names */
.dashboardDropdown, .editMoreDropdown, .previewMoreDropdown {
    margin-left: 20px;
    display: inline-block;
    font-family: var(--default-font-family);
    font-size: 14px;
    text-align: left;
    border: 1px solid #344048;
    border-radius: 6px;
    height: 34px;
    margin-top: 12px;
    margin-right: 60px;
    float: right;
    cursor: pointer;
}
.dashboardDropdownInner, .editMoreDropdownInner, .previewMoreDropdownInner {
    height: 34px;
    color: #344048;
    border-right: 1px solid #344048;
}
.dashboardPage .topToolbarContainer .selectedDropDown {
    background: url(../customimages/arrow-dropdown-grey.svg) no-repeat center;
}

/* Dashboard Dropdown Menu */
.tabContainer .tab .selectedDropDown {
    background: url(../customimages/arrow-dropdown-grey.svg) no-repeat center;
    height: 13px;
    width: 13px;
    position: absolute;
    top: 17px;
    right: 10px;
    padding: 5.5px 5.5px 8px 8px;
    background-color: transparent;
    border-radius: 0px;
}
.tabContainer .activeTab .selectedDropDown {
    background: url(../customimages/arrow-dropdown-grey.svg) no-repeat center;
    height: 13px;
    width: 13px;
    position: absolute;
    top: 17px;
    right: 10px;
    padding: 5.5px 5.5px 8px 8px;
    background-color: transparent;
    border-radius: 0px;
}


/*** Dashboard Tab Settings - ie. Broadcast, Share, etc ***/
.tabSettings .favouritedBy {
    display: none;
}
div.tabSettings div.icon {
    float: right;
    background-color: transparent;
    margin-left: 8px;
    margin-right: 7px;
    height: 30px;
    width: 29px;
    padding: 0;
    border-radius: 0px;
}
div.tabSettings div.icon:hover {
    float: right;
    background-color: transparent;
    margin-left: 8px;
    margin-right: 7px;
    height: 30px;
    width: 29px;
    padding: 0;
    border-radius: 0px;
}

/*** Dashboard Broadcast Button ***/
div.tabSettings .dashboardBroadcast {
    float: right;
    margin-left: 8px;
    margin-right: 7px;
    height: 30px;
    width: 29px;
    padding: 0;
    border-radius: 0px;
    background: url(../../customimages/broadcast.svg) no-repeat 50%;
}
div.tabSettings .dashboardBroadcast:hover {
    float: right;
    margin-left: 8px;
    margin-right: 7px;
    height: 30px;
    width: 29px;
    padding: 0;
    border-radius: 0px;
    background: url(../../customimages/broadcast.svg) no-repeat 50%;
}

/*** Dashboard Security Button ***/
.tabSettings .dashboardSecurityStatus.editable {
    border-radius: 0px;
    background: url(../../customimages/icon_open_lock_blue.svg) no-repeat 50%;
}
.tabSettings .dashboardSecurityStatus.editable:hover {
    border-radius: 0px;
    background: url(../../customimages/icon_open_lock_blue.svg) no-repeat 50%;
}

/*** Dashboard Share Button ***/
.dashboardToolbar .dashboardOptions {
    height: 56px;
    position: absolute;
    right: 0;
}
.tabSettings .dashboardShare {
    float: right;
    margin-left: 1px;
    line-height: 27px;
    height: 26px;
    width: 39px;
    color: #192133;
    font-family: var(--default-font-family);
    font-size: 14px;
    cursor: pointer;
    background: url(../../customimages/share.svg) no-repeat 50%;
}
.tabSettings .dashboardShare A:link {
    display: none;
}

/*** Dashboard - Report Action Menus ***/
.dashContentActionMenu {
    background-color: transparent;
    height: 30px;
    border-radius: 0px;
}
.dashContentContainer .dashContentActionMenu {
    background-color: transparent;
    height: 30px;
    border-radius: 0px;
}

/******************** DASHBOARDS - Edit Mode ********************/
.draftTabContainer .draftTab {
    color: var(--secondary-color);
}

/* Preview button */
.previewButton > .btn-container {
    width: 120px;
    line-height: 34px;
    background-color: transparent;
    border: 1px solid var(--secondary-color);;
    color: var(--secondary-color);
}

/* Publish button */
.publishButton {
    margin-top: 12px;
    height: 36px;
    width: 90px;
    background-color: var(--primary-color);
    margin-left: 20px;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.1), 0 1px 0 0 rgba(217,217,217,0.5);
    position: absolute;
    right: 144px;
    cursor: pointer;
}
.publishTitle {
    color: #ffffff;
}


/******************** FILTER PANEL ********************/
div.portletContentContainer {
    height: 100%;
    width: 100%;
    margin-top: 20px;
    position: relative;
    background-color: #ffffff;
    border-radius: 0px;
    border: 1px solid #ffffff;
}
.filterListHeading {
    overflow: hidden;
    padding-bottom: 10px;
    height: auto;
    background-color: #ffffff;
    color: #999999;
    position: relative;
    width: var(--filter-output-width);
    margin: 0 10px;
    border-radius: 0px;
}
.filterListHeading .filterListTitle {
    float: left;
    padding-left: 5px;
    padding-top: 20px;
    width: 181px;
    color: #333740;
    font-family: var(--default-font-family);
    font-size: 16px;
    font-weight: 800;
    line-height: 19px;
}
.filterOutputList .filterList > * {
    width: var(--filter-output-width);
    border-radius: 0px;
}
.filterList .filterOutput, .filterList .filterGroup {
    border: 1px solid #ffffff;
    margin-bottom: 10px;
}
.filterOutput .filterInformation .filterTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 19px;
    width: 187px;
    color: #344048;
    font-family: var(--default-font-family);
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
}
.filterOutput .filterOperator {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
    color: #A0A5B4;
    font-family: var(--default-font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 25px;
}
div.toggleDescription {
    float: left;
    line-height: 28px;
    margin-right: 5px;
    color: #A0A5B4;
    font-size: 12px;
}
.filterOutputList .filterOutput .styledMultiSelect select {
    padding: 0px;
    color: #344048;
    font-family: var(--default-font-family);
    font-size: 12px;
}
.filterOutputList .filterOutput .filterEntry .multiOptionList span {
    color: #344048;
    font-family: var(--default-font-family);
    font-size: 12px;
    line-height: 25px;
}

div.reportLeftFilters {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--report-filter-list-background-color);
    border-right: #e3e3e3 1px solid;
}



/******************** STORIES ********************/
div.storyReportMenuContainer {
    background-color: transparent;
}



/******************** BUTTONS ********************/
/* Back to Share button */
div.btn-medgrey {
    background: var(--light-grey-4);
    color: var(--white);
}



/******************** BROADCAST pop up box ********************/
.broadcastInputTextPlaceholder {
    color: var(--light-grey-4);
    font-family: var(--default-font-family);
}
.inputplaceholdercontainer {
    color: var(--light-grey-4);
}

/******************** ACTIVITY STREAM ********************/
.activityCommentsToggleContainer {
    background-color: #C4C4C4;
}