/* 
  Copyright 2018-2023 Epic Systems Corporation
  
  Cosmos Portal Style Overrides for the ECLink Instance
  
  Note the development team creates a starting point for this override.css configuration.
  If customizing on the production web server, please include comments in the Revision History
  and next to the modifications, so that if merging in an update from the development team
  the additional customizations can be considered.

  Revision History (Development Team):
    *DRB 04/18 R32692 created
    *DRB 03/19 R36685 fix sizing for err.asp theming, fix 2FA title wrap, & avoid border on top in Chrome.
    *DRB 06/19 R37222 dashboard updates
    *dis 07/19 R37762 Standardize Catalog Menu and Prevent Timeout when in the Catalog
    *dis 02/20 R40385 Update Cosmos Logos and Icons
    *dis 03/20 R40469 Shrink Cosmos Logo on 2FA screen
    *dis 07/20 R41364 Add Feedback Button to Cosmos Host menu
    *msb 07/21 R43330 Add custom tutorial styling.
    *ajj 07/21 R43586 Remove background from SlicerDicer pDIV
    *TB  02/22 R44728 Adding Data Science Menu Button
    *TB  03/23 R46602 Fixing Portal Reset Button Display Placement
    *RSH 05/24 R49431 Adding User Management Activity
    *JKOM 01/25 R51265 Added Diagnosis Advisor Activity
	*RSH 01/25 R49422 Added drop down menu css
  Revision History (Custom Configuration):
    
 */

/* ECLink Background Images. Note body.mainBody isn't enough.
   For the login page and the background on the DUA page use this background. */
body#EpicLogin, div#Login2FA-Ambience, body#Secure_Screen_Body
{
  background-image: url("Images/cosmosLoginBackground.png");
  background-size: cover;
}
/* The login background is dark. Need to lighten the login copyright text to be readable and right align it. */
div.epicLoginCopyright#copyright
{
    color: LemonChiffon;
    right: 0px;
    left: auto;
}
div.epicLoginCopyright > div#copyrightContent
{
    text-align: right;
}

/*Formatting login buttons to be the same*/
#toolbar1button1{
    white-space: nowrap;
    width: 100px;
}

/*Formatting login buttons to be the same*/
#toolbar1button2 {
    white-space: nowrap;
    width: 100px;
}

/*Formatting buttons to appear in the middle of the circle*/
#toolbar1innerTable {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Hiding the spacer as it causes buttons to be misaligned*/
td.toolbarSpacer {
    display: none;
}

/* Make the Cosmos login be on top of a white circle (see UXD screens).*/
/* Yes need the more specific div.loginContent#epicLoginContent for the main login page.
   Otherwise, the div#epicLoginContent covers body#Secure_Screen_Body div#epicLoginContent and the use by the time out screen. */
div#epicLoginContent, div.loginContent#epicLoginContent {
    width: 500px;
    height: 500px;
    padding-top: 100px;
    background-image: url("Images/login_circle.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-color: transparent;
    box-shadow: none;
    padding-left: 0px;
    padding-right: 0px;
}

/* For err.asp don't use the circle background due to overflowing text.
   Rather, have a central white partially transparent pane.
   Note can make it take the whole screen by using max-width and max-height of none, 
   but it has weird behavior with refreshing in IE.
   err.asp uses a .wideContent#epicLoginContent selector.
   Can make like a pane with 100% width/height, 0 padding and top 0 but decided against for logo placement.
 */
div#epicContentWrap div.wideContent#epicLoginContent
{
    background-color: rgba(255,255,255,0.8);
    background-image: none;
}
div.wideContent#epicLoginContent > div.description
{
    color: black;
    padding: 50px;
}

/* 2FA Screens... */
/* 2FA Screens - Style the FrameWrapper page divs we added around the 2FA iFrame to be the big circle. 
   Enrollment needs to be 700px big to have enough room for the 2FA sign up screens to fit in the circle. */
div#Login2FA-Enrollment
{
    display: block;
    height: 700px;
    width: 700px;
    background-color: transparent;
    background-image: url("Images/circle2FA.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -350px 0 0 -350px;
}
/* On the Auth screen the circle is a little smaller. */
div#Login2FA-Auth
{
    display: block;
    height: 600px;
    width: 600px;
    background-color: transparent;
    background-image: url("Images/circle2FA.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -300px;
}

/* 2FA Screens - Increase margin-top on the 2FA iframe to make space for Cosmos logo. 
   Also since we're putting it in a big circle, hide the shadow. */
iframe#Login2FA-IFrame
{
    margin-top: 60px;
    box-shadow: none;
    background-color: transparent;
}
/* 2FA Screens - Make the 2FA box background white so in some workflows we don't have the edges of the box extend past the circle. */
body#Auth2FABody
{
    background-color: transparent;
}
/* 2FA Screens - Position the Cosmos Logo in the custom logo div we added to the Login2FA. */
div#Login2FA-CustomLogo
{
    height: 102px;
    position: relative;
    top: 60px;
    margin-left: auto;
    margin-right: auto;
    background: url("Images/cosmosLogo.png") no-repeat center;
    background-size: 370px;
}
/* 2FA Screens - Center the titles since the circle makes left aligned titles and the paragraph look odd. */
div.Enroll2FA-Title, div.Enroll2FA-Subtitle
{
    text-align: center;
    margin-bottom: 0px;
    width: 100%;
}
div.Enroll2FA-HorizontalLine
{
    border-top: none;
    padding-bottom: 10px;
}
div.Enroll2FA-Paragraph
{
    text-align: center;
}
input#TFA_SecurityCode
{
    margin-top: 15px;
    margin-bottom: 20px;
}


/* Background elsewhere. */
/* The old selectors used accidentally applied the background to places like password reset
   where it doesn't look good. The old selectors were body.standaloneBody.mainBody, body.mainBody, body#MsgPageBody, div.pageDIV#pageDIV*/
body.mainBody.standaloneBody, body#standalonePageBody, div.home-container
{
  background-image: url("Images/cosmosBackdrop.jpg");
  background-size: cover;
}
/* TODO - We could have a watermark image that matches our backgrounds. The default one doesn't look good. */
div.fillerWatermark
{
    background-image: none;
}
/* Background on Settings Screen */
div.watermark {
    background-image: url("Images/cosmosBackdrop.jpg");
}
div.watermark tr.ZNormal {
    background-color: white;
}
/* Don't bother loading up Hubble_Background.png and not using it. Also make the copyright @ bottom look better.*/
body.mainBody
{
    background-image: none;
}
/* Background within Terms window. 
 The background image used to be url("Images/cosmosLightBackground.png") but we decided to stop using this image. 
form[name="frmTerms"] {
    background-image: url("Images/cosmosLightBackground.png");
    background-size: cover;
} */
/* Using the cosmosBackdrop on the home activity means the Chevrons on the news feed need lightened to be easily visible. */
div.home-icon-chevronRight
{
    background-image: url("Images/Light_ChevronRight.png");
}
div.home-icon-chevronLeft
{
    background-image: url("Images/Light_ChevronLeft.png");
}
div.home-container div.logo-col {display:none;}
body.copyright {
    background-color: white;
}

/* Begin ECLink Menu Tab CSS */
.raised#zDataScience .bannerImage, .lowered.BannerTabWithMenu#zDataScience
.bannerImage, .lowered#zDataScience .bannerImage {
    background-image: url("Images/icon_datascience.png");
}
.raised#zDashboardTab .bannerImage, .lowered#zDashboardTab .bannerImage, .hovered#zDashboardTab .bannerImage
{ 
  background-image: url("Images/icon_dashboard2.png"); 
}
.raised#zExplorationTab .bannerImage, .BannerTabWithMenu.lowered#zExplorationTab .bannerImage, .lowered#zExplorationTab .bannerImage {
  background-image: url("Images/icon_slicerdicer.png");
}
.raised#zCatalogTab .bannerImage, .BannerTabWithMenu.lowered#zCatalogTab .bannerImage, .lowered#zCatalogTab .bannerImage {
  background-image: url("Images/icon_dictionary.png");
}
.raised#zCombinedDataDictionaryTab .bannerImage, .BannerTabWithMenu.lowered#zCombinedDataDictionaryTab .bannerImage, .lowered#zCombinedDataDictionaryTab .bannerImage{
  background-image: url("Images/icon_catalog.png");
}
.raised#zUserManagementTab .bannerImage, .BannerTabWithMenu.lowered#zUserManagementTab .bannerImage, .lowered#zUserManagementTab .bannerImage{
  background-image: url("Images/UserList.png");
}
.raised#zHelpTab .bannerImage, .BannerTabWithMenu.lowered#zHelpTab .bannerImage, .lowered#zHelpTab .bannerImage {
  background-image: url("Images/icon_help.png");
  background-position: center 3px;
  background-size: 26px 26px;
}
.raised#zFeedBackButton .bannerImage, .BannerTabWithMenu.lowered#zFeedBackButton .bannerImage, .lowered#zFeedBackButton .bannerImage {
  background-image: url("Images/icon_feedback.png");
  background-position: center 3px;
  background-size: 26px 26px;
}

.raised#zPublicationChecklist .bannerImage, .BannerTabWithMenu.lowered#zPublicationChecklist .bannerImage, .lowered#zPublicationChecklist .bannerImage {
  background-image: url("Images/icon_checklist.png");
}

.raised#zWorkspacesTab .bannerImage, .BannerTabWithMenu.lowered#zWorkspacesTab .bannerImage, .lowered#zWorkspacesTab .bannerImage {
  background-image: url("Images/icon_research.png");
}
.raised#zCollaborationTab .bannerImage, .BannerTabWithMenu.lowered#zCollaborationTab .bannerImage, .lowered#zCollaborationTab .bannerImage {
  background-image: url("../en-us/img/tabReferralsLight.png");
}
/* icons for hard-coded tabs */ 
.raised#homeTab .bannerImage, .lowered.BannerTabWithMenu#homeTab .bannerImage, .lowered#homeTab .bannerImage { 
  background-image: url("../en-us/img/tabHomeLight.png"); 
}
.raised#megaMenuTab .bannerImage, .lowered#megaMenuTab .bannerImage, .hovered#megaMenuTab .bannerImage
{ 
  background-image: url("../en-us/img/tabMegaMenuLight.png"); 
}
div#LogoutID div.bannerImage { 
  background-image: url("../en-us/img/logout.png"); 
} 
/* End ECLink Menu Tab CSS */

/* ECLink Menu Text Color */
div.bannerTabText {
    color: white;
}

/* The transparency overrides were buggy and decided we'd rather SlicerDicer has its own background,
   so I removed most of them. However, a few targeted ones remain. */

/* This transparency change avoids the solid color on the margins outside the selected activities,
   which was seen mostly to the left and right of the activity, as stylistically we prefer it
   falling to the background image instead.
   Replace background-color for #innerAppWrap from epic_main.css */
#innerAppWrap {
  background-color: rgba(255,255,255,0);
} 

#pageBanner > h1 > span
{
  display: none;
}

/* The Epic logo is in the Cosmos Logo, so hide powered by Epic on login.*/
div#poweredBy
{
    display: none;
}
/* Also hide the extra Epic logo when screen has secured from inactivity. */
div#epicLoginContent > img.epic-logo {
    display: none;
}
/* Keep the normal Epic logo in the banner since the Epic in the Cosmos logo is tiny in the banner.
#logo-right.epic-logo {display: none;} */
/* Let the Cosmos Banner Logo be a little wider than the 120 px by 40 px default. */
img#logo-left.banner-logo {
    width: 153px;
    height: 40px;
}

div#menuWrap {
  background-image: none; 
  display: none;
}

/* Set background-image for body.bannerBody from banner_menu.css */
/* Once logged in, make toolbar header background color fully transparent so it doesn't darken the backdrop. */
body.bannerBody, div#header.contentContainer, div#header.standaloneBanner {
    background-image: url("Images/cosmosBannerBG7.png");
    background-color: transparent;
    border-bottom-color: rgb(86,76,164);
    border-bottom-style: solid;
}
/* Avoid border on top in Chrome. */
body#BannerBody {
    border: none;
}

/* For the DUA, hide the banner from terms.asp. */
div#header.standaloneBanner {
    display:none;
    background-image: none;  /* If changing to show this div, at least make it look good. */
}
/* Background for generic message page such as if declining terms. */
body#MsgPageBody div#pageDIV {
    background-image: url("Images/cosmosBackdrop.jpg");
}

/* Improve look of banner by hiding the color we'd see on the sides. */
div#menu.contentContainer {
  background-color: rgba(255,255,255,0);
}

/* Allow the activity container to take the whole screen width (well except for margins) */
div#innerAppWrap, div#menuWrap {
  max-width: none;
}

/* Allow the menu to take the whole screen width too by
   overriding the max-width set on the sHeaderFrame by epic_main.asp. */
iframe#sHeaderFrame {
    max-width: 99%;
}
/* And by letting the contentContainer take up more of the screen. */ 
div.contentContainer#content
{
  left: 0px;
  right: 0px;
  top: 0px;
}
/* Instead of the 64px normally to have 10px padding. */
div.contentContainer#applicationWrap
{
  top: 53px;  
}
div.contentContainer#copyright
{
  left: 0px;
  right: 0px;
}

/* Don't show the expand activity tooling that's around the activity.
   Rather we use the entire screen width, show the main menu, and reclaim this space by
   Hide .FrameHeaderDiv from epicweb_ie.css */
.FrameHeaderDiv {
   display: none; 
}
/* Since we're hiding FrameHeaderDiv, need to let the pageDIV take all the space instead of calculating with 44px leftover.*/
div#pageDIV.pageDIV {
  height: calc(100%) !important;
  border: none;
}

/* Don't show the thin line! Override border for pageDIV from activity.css */
div.pageDIV {
  border: none;
}

/* Hide the Request New Account on the login page since we aren't provisioning users this way. */
div#accountReqDiv {
    display: none;
}

/* Override colors for Cosmos theme. */
input#LoginButton, div.acceptButton, input.acceptButton
{
    background-color: rgb(175,40,87);
}
input#LoginButton:hover, div.acceptButton:hover, input.acceptButton:hover, input.cancelButton:hover
{
    background-color: rgb(86,76,164);
}
div.login a.login-links, div.Enroll2FA-Title
{
    color: rgb(175,40,87);
}
input#Account_ID, input#Account_Password
{
    color: rgb(86,76,164);
    border-bottom: 1px solid rgba(175, 40, 87, .8)
}
/* Let the News Tile on the Home Page take up more space (default max is 450px height). */
div.news-tile
{
    max-height: 550px;
}

/* Make it more obviious the SlicerDicer Steering news card is clickable. */
div#steerToSlicerDicer:hover
{
    background-color: black;
    background-image: url("Images/cosmosBackdrop.jpg");
}

/* Let the images in the upper section of the cards stretch on wide screens, else looks funny. */
div.news-image-section {
    max-width: none;
}

/* Hide the Quick Buttons on the Home Page. We don't have so much happening within the portal that they're useful. */
div.quick-button-row
{
    display: none;
}

.cos-tutorial-lightbox>.ui-dialog-titlebar {
    display: none;
}

.cos-tutorial-lightbox {
    background-color: transparent;
    border: 0px !important;
    box-sizing: border-box;
}

.cos-tutorial-lightbox >#divActivityLB { 
    background-color: transparent;
}

div#hoverMenu2{
    z-index: 10001;
    position: absolute;
    background-color: #ffffff;
    background-size: cover;
    padding: 25px;
    padding-top: 10px;
    color: #ffffff;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 13px;
    border-left: 1px solid rgba(0, 166, 211, 0.5);
    border-right: 1px solid rgba(0, 166, 211, 0.5);
    border-bottom: 1px solid rgba(0, 166, 211, 0.5);
}