/* Cm00-Common.css Purpose: CSS should be included in the of all html files in the portal project It defines common portal related styles used everywhere */ body { margin: 0px; padding: 0px; width: 100%; z-index: 0; background-image: url('../img/PortalBkgnd.png'); background-position: left top; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } /* Class to use for box shape of each item on login screen */ .portalRect { left: calc(50% - 177px); /* This centers the 355 width in any width screen*/ top: 5px; width: 355px; height: 40px; margin-bottom: 20px; } /* All of these classes need the same rect basis */ .HdrButton, .portalRect, .portalRectBasis { position: relative; border-style: solid; border-width: 2px; border-radius: 5px; border-color: rgba(102, 102, 102, 1); background-color: rgba(255, 255, 255, 1); } .LoggedInHdr { clear: both; text-align: center; } /* Used in the CombineFieldnameValue() function when combining a fieldname and value page-specific css files can add their own .fieldxx definitions that will add to what is here */ .fieldName { color: black; } .fieldValue { color: red; } /* Used on the 3 navigation buttons in the header section */ .HdrButton { width: 100px; height: 35px; color: black; border-width: 1px; display:inline-block; text-align: center; padding-top: 5px; margin-bottom: 15px; } .HdrButton + .-large { width: 150px; } /* Any common class that needs text should be in this list to get the common items */ body, .portalText { font-family: 'ArialMT', 'Arial'; font-weight: 400; font-style: normal; font-size: 14px; text-decoration: none; text-align: left; color: #999999; } /* This little gem will center any element based on the current window size, even if you don't know the width. NOTE: The position: fixed is required for this to work. So that will take your element out of the normal flow, so following items can't use it for their positioning info */ .CenterX { position:fixed; left: 50%; transform:translateX(-50%); } /* Put this on an empty div after the last floating element in a div to make it so that the parent div expands to hold anything that is floating too. */ .clearsBoth { clear: both; } .addPad { padding-bottom: 10px; } /* Used to position the icon to the left of the input area */ .IconInInput { position: relative; left: 10px; top: 2px; } .TextInput { position: relative; width: 285px; height: 30px; left: 30px; top: 5px; color: #999999; text-align: left; border: none; } /* For various statements shown by buttons */ .promptText { font-size: 24px; margin-bottom: 20px; text-align: center; width: 100%; top: 20px; color: #666666; position: relative; } /* For showing the company logo in the header*/ .companyLogo { width: auto; height: 50px; top: 20px; position: relative; display: block; margin: auto; } /* Shows the icon with 3 generic heads */ .peopleIcon { width: 57px; height: 57px; display:inline-block; /* left: 20px; */ position: relative; top: 15px; } .ShowConfigButtonCommon { background-color: #4472C4; color: #FFFFFF; padding-top: 0; } .ShowConfigLargeButton { width: 150px; } #overlay { background: rgba(0, 0, 0, 0.3); display: none; height: 100%; left: 0; position: fixed; margin: 0; padding: 0; top: 0; width: 100%; z-index: 100; } #loadingDiv { background: url(../img/Spinner.gif) no-repeat; background-position: center; display: none; height: 100%; left: 0; position: fixed; margin: 0; padding: 0; top: 0; width: 100%; z-index: 101; } .reportLinks { display: flex; flex-flow: column nowrap; justify-content: flex-start; } .ShowConfigXLargeButton { flex: 1 0 auto; align-self: center; min-width: 250px; }