/* File: coolcareStyling.css */
/*-- File: coolcareStyling.css*/
:root {
    --coolcare-blue: #009ED7;
    --primary-color: var(--coolcare-blue);
    --primary-color-hover: color-mix(in srgb, var(--coolcare-blue) 80%, black 20%);; /*CoolCare darker blue*/
    --loader-color: #31353E; /*CoolCare Off-Black */
    --section-color: color-mix(in srgb, var(--coolcare-blue), white 50%); /*Section Color*/
    --section-color-bolder: var(--coolcare-blue); /*Bolder Section Color*/
    --section-color-light: color-mix(in srgb, var(--coolcare-blue), white 60%); /*Light Section Color*/
    --section-color-lighter: color-mix(in srgb, var(--coolcare-blue), white 70%); /*Lightest Section Color*/
    --section-color-lightest: color-mix(in srgb, var(--coolcare-blue), white 80%); /*Lightest Section Color*/
    --primary-alert-orange-color: #F08A24; /*Alert Orange*/
    --secondary-alert-orange-color: #DE770F; /*Darker Alert Orange*/
    --pale-coolcare-blue: #89D8FF; /*Pale CoolCare Blue*/
    --section-tab-grey: #E8E8E8; /*Light Grey for Tabs*/

    /*-- Main Button Colors --*/
    --primary-button-color: var(--primary-color);
    --primary-button-color-hover: var(--primary-color-hover);

    --coolcare-font-famiy: helvetica, arial, verdana, sans-serif;
}

/*----------------------------------------------------------- General Styles -------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------*/
body {
    font-family: var(--coolcare-font-famiy);
    color: var(--loader-color);
}

td.i4sidenav_width.header_logo.noBgImg{
    display: none;
}

#MIForm {
    border-bottom: 1px solid black;
}

.browseNoContent img {
    display: none;
}

.tabContainer, .tabWrapper {
    background-color: var(--coolcare-blue);
    margin-top: 5px;
}

.folderMain .ui-droppable .selected .dropped, .i4tabletitle, ul.yfDropMenu li.menuTitle,
ul.yfDropMenu li.menuTitle div.yfDropMenuTitle, td.dataPreviewGroupHeader, div.rptDataSubQueryHeading {
    background-color: var(--section-color);
    color: black;
}

/*-- For Reports --*/
.activeReport div.toolbar {
    border-top: 1px solid black;
    background-color: var(--primary-color);
}

tr td.rpthdrcol {
    background-color: var(--section-color);
}

.reportDataHeaderTitle {
    font-weight: normal;
}

/*-- Pop-up chat feature on Dashboard page --*/
.activityCommentsToggleContainer, .activityStreamCloseButton {
    background-color: var(--pale-coolcare-blue);
    padding: 2px;
}

.activityStreamOpenButton {
    background-image: url(../customimages/cc_icon.png);
    background-size: contain;
    margin: 2px 2px 0 0;
}

/*-- Main coolcare logo --*/
td.i4sidenav_width.header_logo img {
    width: auto;
    height: auto;
    margin: 0;
}

.headerbg tr {
    background-color: var(--section-tab-grey);
}

/*-- Browse Content Table Headers --*/
.browseListHeader {
    background-color: var(--section-color) !important; /*override inline style*/
}

.browseListHeader:hover {
    background-color: var(--section-color-light) !important; /*override inline style*/
}

/*-- Browse Content Main Panel --*/
.browseMain {
    border-top: 1px solid black;
    padding-top: 20px;
}

.browseMainHeader span::before {
    width: 100px;
    content: "Advanced Reporting - ";
}

/*-- Adding CoolCare Logo --*/
.modernToolbarTabSection::before {
    content: "";
    background-image: url(/../customimages/logo.svg);
    width: 150px;
    margin-top: -17px;
    margin-bottom: -10px;
    background-size: cover;
}

/*----------------------------------------------------------- Buttons -------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------*/

/*-- Browse Header buttons --*/
#modernToolbarCreateButton, .dashboardTabWarning .addButton .submitMidButton, .dashboardTabWarning .closeButton .submitMidButton {
    background-color: var(--primary-button-color);
    color: white;
    box-shadow: none;
    border-radius: 0;
}

#modernToolbarCreateButton:hover, #modernToolbarCreateButton.modernToolbarOpened,
.dashboardTabWarning .addButton .hoverMidButton, .dashboardTabWarning .closeButton .hoverMidButton {
    background-color: var(--primary-button-color-hover);
    color: white;
    box-shadow: none;
}

.dashboardTabWarning .addButton .submitMidText, .dashboardTabWarning .closeButton .submitMidText {
    color: white;
}

/*-- View Buttons --*/
div.vftoolbarMenuButton {
    margin-left: 2px;
    border-radius: 0;
}

div.vftoolbarPublishButton, div.vftoolbarDropDownArrow, div.vftoolbarTestDropdown, div.vftoolbarMoreDropdown {
    background-color: var(--primary-color);
    border-radius: 0px;
}

div.btn-blue-primary:not(.btn-noclick):hover {
    background-color: var(--section-color);
}

/*-- Report Buttons --*/
td.toolbarButton, table.rightToolbar tr {
    border: none;
}

td.toolbarButton  img, td.toolbarButtonClose img, div.vftoolbarCloseButton img, td.toolbarButtonClose img:hover, div.vftoolbarCloseButton img:hover{
    filter: brightness(0) invert(1);
}

td.toolbarButton:hover {
    background-color: var(--section-color);
}

/*-- Close icons --*/
td.toolbarButtonClose:hover, div.vftoolbarCloseButton:hover {
    background-color: transparent;
    filter: none;
}


/*------------------------------------------------------------------------ Toolbar ------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-- Main toolbar --*/
#modernToolbarContainer {
    background-color: var(--section-tab-grey);
    margin-bottom: 0;
    padding-left: 0;
    margin-left: -10px;
    border-bottom: none;
}

/*-- Admin Menu List --*/
.modernToolbarDropdownMenu {
    background-color: var(--section-tab-grey);
    padding: 0px;
    box-shadow: none;
    border-radius: 0;
}

.modernToolbarDropdownMenuItem:hover {
    background-color: var(--primary-color);
    color: white;
}

/*-- View Toolbars--*/
div.vftoolbarContainer div.tabTitle, .portlet-header {
    font-family: var(--coolcare-font-famiy);
    font-weight: bold;
}

div.vftoolbarPublishTitle {
    color: white;
}

/*-- Prevents background colours showing behind highlighted tabs --*/
div.vftoolbarPageNav, .topToolbarContainer {
    background-color: transparent;
}

/*-- Sets underline on active tab in top bar --*/
.modernToolbarTabActiveContainer::after {
    border-bottom: none;
}

/*-- Report Toolbars --*/
div.reportDataHeader {
    font-weight: bold;
}

.toolbarBottom, #rptOutputTopToolbar div.toolbarOuter {
    border: none;
    background-color: white;
}

.activeReport div .toolbarOuter .toolbar .farRightToolbar tbody {
    box-sizing: content-box;
    padding: 5px 0 0 25px;
    display: block;
}

td.toolbarButton.farRighttoolbarButton.dropdown, #publish {
    background-color: var(--primary-button-color);
    color: white;
    box-shadow: none;
    border-color: white;
    font-weight: normal;
    border-radius: 0;
}

td.toolbarButton.farRighttoolbarButton.dropdown::after {
    border-color: white;
    filter: brightness(5);
}

.browseTopNav {
    height: 0px;
}

.browseLeft {
    margin-top: 0px;
    border-right: 1px solid black;
}

.browsePage .browseLeft {
   background-color: var(--section-tab-grey);
   padding-top: 5px;
   border-bottom: 1px solid black;
}

.rightToolbar td.toolbarButton::before, .rightToolbar td.toolbarButton:last-child::after, #rptDataTopToolbar .toolbarTop  {
    display: none;
}

td.toolbarTab a {
    color: white;
    font-weight: normal;
}

#rptDataTopToolbar .toolbarTop {
    display: none;
}

/*-- Browse page toolbar --*/
.browseToolbar {
    background-color: var(--section-tab-grey);
}

.leftSideNavHandler {
    display:none;
}

/*-- Folder Select Styling --*/
.browsePage .browseLeft .browseContentTypeItem, .browseFolder .folderMain, .browseTag .hierarchyList .hierarchyDesc,
.browsePage .browseLeft .divider {
    height: auto;
}

.allDataSources, .browseDatasource .hierarchyList .hierarchyDesc, .allTags  {
    height: auto;
    line-height: 20px;
    align-items: anchor-center;
}

.browsePage .browseLeft .browseContentTypeItem {
    border-radius: 0;
}

.browseClearButton span, .browsePage .browseLeft .browseContentTypeItem.active {
    color: black;
}

.browsePage .browseLeft .browseContentTypeItem.active {
    background-color: var(--section-tab-grey);
}

.browsePage .browseLeft .browseContentTypeItem:hover {
    background-color: lightgrey;
}

.browseContentItem:hover {
    background-color: var(--section-color-lightest);
}

.browseFolder .folderMain:hover, .allTags:hover, .allDataSources:hover {
    background-color: lightgrey;
    border-radius: 0;
}

.browseDatasource .hierarchyList div .hierarchyInfo, .browseTag .hierarchyList, .subFolders .browseFolder .folderMain {
    background-color: white;
    border-radius: 0;
    margin-left: 0;
    color:black;
}

.browseDatasource .hierarchyList div .hierarchyInfo.selected, .browseTag .hierarchyList.selected,
.subFolders .browseFolder .folderMain.selected, .browseDatasource .hierarchyList div .hierarchyInfo:hover,
.browseTag .hierarchyList div:hover, .subFolders .browseFolder .folderMain:hover {
    background-color: var(--section-color-lightest);
    border-radius: 0;
    margin-left: 0;
    color:black;
}


.browsePage .subFolders .browseFolder .folderMain.selected, .browseTag > .hierarchyList > div > .hierarchyInfo.selected,
.browseDatasource > .hierarchyList > div > .hierarchyInfo.selected, div.hierarchyInfo.selected {
    background-color: var(--section-color);
    border-radius: 0;
    border-left: 5px solid var(--section-color-bolder);
    color: white;
}

.browsePage .browseFolder .folderMain.selected, .browseFolder .folderMain.dropped.selected, .allTags.selected, .allDataSources.selected {
    background-color: lightgrey;
    color: black;
    border: none;
    border-radius: 0;
}

.browseFolders > .browseFolder > .folderMain.selected .folderImage, .browseFolders > .browseFolder > .folderMain.selected .folderMenu,
.allDataSources.selected .leftCorner .dataSourceIcon, .allTags.selected .leftCorner .tagIcon {
    filter: brightness(0);
}

.hierarchyInfo {
    border-radius: 0;
    height: 40px;
}

.browseTag .hierarchyList .hierarchyDesc {
    line-height: inherit;
}

.browseFolder .folderMain > div .leftCorner {
    gap: 16px;
}

/*------------------------------------------------------------------------------------------------ General Tabs ----------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-- Dashboard Tabs --*/
.tabContainer .activeTab {
    background-color: var(--section-color);
    color: white;
}

.dashboardTabWarning {
    background-color: var(--primary-alert-orange-color);
    border-color: var(--secondary-alert-orange-color);
}

.dashboardTabWarning .addTabText {
    color: white;
    font-weight: bold;
}

.dashContentContainer .dashContentTitle {
    background: var(--coolcare-blue);
    margin: 0px;
}

.dashContentContainer .dashContentTitle .dashContentName {
    color: white;
    padding-left: 10px;
}

ul.yfDropMenu li.menuItem.menuHover, ul.yfDropMenu li.menuHover {
    background-color: var(--primary-color);
    color: white;
}

/*-- Report Toolbar Tabs --*/
td.toolbarTab > .toolbarTabInnerDiv, td.toolbarTab {
    background-color: var(--primary-color);
}

td.toolbarTab > .toolbarTabInnerDiv:hover {
    background-color: var(--section-color);
    color: white;
    font-weight: bold;
}

td.toolbarTab.toolbarTabActive {
    background-color: var(--section-color);
}

#rptDataTopToolbar td.toolbarTab.toolbarTabActive {
    background-color: var(--section-color);
    color: white;
    font-weight: bold;
}

.modernToolbarTab.modernToolbarTabActive {
    color: black;
}

.reportTable tr.reportHdr td.rpthdrcol {
    background: var(--section-color-lightest);
}

.dashboard-active-toolbar .tabContainer .activeTab {
    background-color: var(--section-color);
    color: white;
    border-bottom: 4px solid var(--section-color-bolder);
    box-sizing: border-box;
}

.div.vftoolbarTab.activeTab {
    font-weight: 800;
    color: black;
}

.dashboard-active-toolbar .tabContainer .activeTab:hover {
    background-color: var(--section-color-light);
    border-bottom: 4px solid var(--section-color);
}

td.toolbarTab:hover {
    background-color: var(--section-color);
}

.modernToolbarTabContainer:hover, .modernToolbarTab:hover, .modernToolbarTab.modernToolbarTabActive:hover {
    background-color: var(--primary-color);
    color: white;
    font-weight: normal;
 }

.modernToolbarTab {
    font-weight: normal;
    padding: 10px 16px;
}

.browsePage .browseLeft, .browseFolders .browseFolder {
    font-weight: normal;
    height: auto !important; /*override inline style*/
    max-height: 100%;

}

#rptDataTopToolbar .toolbar, #rptTopToolbar .toolbar, #rptOutputTopToolbar .toolbar, .toolbarBottom, .toolbarTop {
    background: var(--primary-color);
}

#rptDataTopToolbar .toolbarBottom, .toolbarTop {
    display: none;
}

#rptDataTopToolbar .toolbarTabActive > .toolbarTabInnerDiv, td.toolbarTab.toolbarTabActive > .toolbarTabInnerDiv,
 #rptDataTopToolbar .rightToolbar .toolbarButton:hover {
    background: var(--section-color);
}

#rptDataTopToolbar .toolbarTabActive > .toolbarTabInnerDiv a, #rptTopToolbar .toolbarTabActive > .toolbarTabInnerDiv a,
#rptOutputTopToolbar .toolbarTabActive > .toolbarTabInnerDiv a
 {
    color: white;
    font-weight: bold;
}

#rptDataTopToolbar .rightToolbar .toolbarButton {
    background: var(--coolcare-blue);
}

#rptDataTopToolbar .rightToolbar .toolbarButton img {
    filter: brightness(0) invert(1);
}

/*-- View tabs --*/
div.vftoolbarTab.activeTab {
    background-color: var(--section-color);
    color: white;
    border-bottom: none;
}

div.vftoolbarTab.activeTab:hover, div.vftoolbarTab:hover {
    height: 60px;
    border-bottom: none;
}

td.toolbarButton.farRighttoolbarButton.dropdown:hover {
    background-color: var(--primary-button-color);
}

.modernToolbarUserIcon {
    background: none;
}