/* CSGoldWeb.css main style sheet that should be used by ALL of CSGoldWeb this should only contain common styles used accross all web products application specific stylesheets should be loaded after this one HOW TO CUSTOMIZE STYLES: 1. create a new CSS file in the css directory (do NOT edit this one) hint: name your new CSS file starting with "local_" to ensure it will not get overwritten 2. add a reference to the new CSS file in CSGoldWeb.conf by adding it to the list of global CSS css = "CSGoldWeb,local_customstyles" note the CSS files will be loaded in the specified order, and the .css extension is not required 3. copy the styles you wish to modify to your custom CSS file and change the desired properties each set of header templates has a different class in the tag use this to make different custom styles for WebCard Center and AdminWeb body.CsgCardCenter = WebCard Center body.CsgAdminWeb = AdminWeb the menus primarily use the div.menu and .flyoutLink styles for the menu item appearance. additionally, the td.MenuBackground and table.menuBorder styles can be used to customize the entire menu appearance. */ /* @import url("font_awesome.css"); */ body { margin: 0; font-family: Arial, sans-serif; font-size: 13px; } :root { --headerHeight: 85px; --footerHeight: 25px; --logoHeight: 48px; --accordionColor: #0878C8; --bannerEndColor : white; --bannerStartColor: white; --bannerLeftTextColor: black; --bannerRightTextColor: black; --bannerFooterTextColor: black; } /* https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/nunito.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/nunito.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* table styles */ table { border-collapse: collapse; } .menuContainer { border-collapse: collapse; display: flex; max-height: calc(100vh - var(--headerHeight) - var(--footerHeight)) !important; } tr.heading { background-color: #7291CF; font-weight: 700; } tr.heading2 { background-color: #B5C6E8; font-weight: 700; } tr.title { font-weight: 700; background-color: #3B4990; font-size: medium ; color: #FFFFFF; } /* tr.row1, tr.row1 > td { background-color: #D9E1F2; } tr.row2, tr.row2 > td { background-color: #B5C6E8; } */ td.buttons, td.buttons2 { text-align: right; } td.buttons { padding-top: 20px; } td.buttons2 { padding-top: 5px; } td.alert1 { background-color:#F3D8E3; font-weight: 700; } td.alert2 { background-color:#EAB3CA; font-weight: 700; } td.warning1 { background-color:#E3F3D8; font-weight: 700; } td.warning2 { background-color:#CAEAB3; font-weight: 700; } td.disabled { background-color:#CCCCCC; font-weight: 700; } td.title{ font-weight: 700; background-color: #3B4990 !important; font-size: 12px ; color: #FFFFFF; } /* help icon */ #helpbutton { position: relative; width: 30px; height: 30px; vertical-align: middle; } span#helpbutton { display: inline-block; margin-left: 5px; line-height: 28px; } a#helpbutton { text-decoration: none; } a#helpbutton.mobileButton, a#helpbutton.mobileButton:hover { color: black; } #helpbutton.mobileButton { width: 40px; height: 40px; padding: 0; box-sizing: border-box; } span#helpbutton a, #helpbutton b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5); border: 2px solid black; border-radius: 50%; box-sizing: border-box; text-align: center; font-size: 20px; font-weight: 700; font-family: Arial, sans-serif; color: inherit; text-decoration: none; } span#helpbutton a:hover { color: inherit; background: rgba(255,255,255,0.6); } #helpbutton.mobileButton b { left: 4px; top: 4px; width: 30px; height: 30px; background: none; line-height: 28px; } /* field list styles */ table.fieldlist tr, table.fieldlist2 tr { background-color: #D9E1F2; } table.fieldlist2 { font-size: smaller; } td.fieldname, td.fieldname_left, td.fieldname_flat { padding-right: 5px; font-weight: bold; } td.fieldname, td.fieldname_left { background-color: #B5C6E8; } td.fieldname, td.fieldname_flat { text-align: right; } td.fieldname_left { text-align: left; } /* div styles */ div.boxFrame { display: inline-block; border: 1px solid #CCCCCC; padding: 10px; margin: 5px; } /* text styles */ .bold { font-weight: 700; } .highlight { background-color: yellow } .errmsg { font-size: 36px; color: #FF3333; } .emergency-text-wrapper{ text-align: center; } .emergency-text-wrapper { text-align: center; } .emergency { text-align: center; font-size: 36px; color: #FF3333; font-weight: bold; display: inline-block; animation: bulgePulse 17s ease-in-out infinite; } @keyframes bulgePulse { 0% { transform: scale(1); text-shadow: none; } 5% { transform: scale(1.07); text-shadow: 0 0 3px #992e2e, 0 0 6px #cc2c2c; } 10% { transform: scale(1); text-shadow: 0 0 2px #8b2d2d, 0 0 4px #b82323; } 12% { transform: scale(1); text-shadow: none; } 100% { transform: scale(1); text-shadow: none; } } .invalid, .red-text { color: hsl( 0, 90%, 48% ); } .readonly, [locked="1"] { color: #777777; } /* heading size - apparently heading3 was used for titles on a lot of pages */ .heading-title, h1.heading, h2.heading, h3.heading, h4.heading, h5.heading, h1.heading3, h2.heading3, h3.heading3, h4.heading3, h5.heading3 { margin: 15px 0; font-size: 21pt; font-weight: 700; } h1.heading2, h2.heading2, h3.heading2, h4.heading2, h5.heading2 { margin: 15px 0; font-size: 12pt; font-weight: 700; } h1.heading4, h2.heading4, h3.heading4, h4.heading4, h5.heading4 { font-size: 15pt; } /* menu heading */ h1.menu, h2.menu, h3.menu, h4.menu, h5.menu { font-size: 10pt; font-weight: 700; } /* ensure all tags inside of headings does not make it extra-bold or any other nonsense */ .heading-title b, .heading b, .heading2 b, .heading3 b, .heading4 b { font-weight: 700 !important; } .center { text-align: center; } /* input styles */ input.readonly { background-color: #EEEEEE; border: 1px solid #777777; padding: 2px 1px; } input.enabledtxt { background-color: white; } input.disabledtxt { background-color: #EBEBE4; color: #777777; } /* framework styles */ .gradientForward { background-color: #4A74CA; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4A74CA', endColorStr='#FFFFFF', gradientType='1'); background: -webkit-linear-gradient( left, #4A74CA, #FFFFFF ); background: -moz-linear-gradient( left, #4A74CA, #FFFFFF ); background: -o-linear-gradient( left, #4A74CA, #FFFFFF ); background: linear-gradient( to right, #4A74CA, #FFFFFF ); } .pageHeader { border-bottom: 1px solid lightgray; box-sizing: border-box; height: inherit; align-content: center; } .pageFooter { position: fixed; z-index: 9999; width: 100%; height: var(--footerHeight); bottom: 0; border-top: 1px solid lightgray; box-sizing: border-box; background-color: white; text-align: center; color: black; } .pageHeader, .pageFooter { background: linear-gradient(to left, var(--bannerEndColor), var(--bannerStartColor)); } .pageFooter { color: var(--bannerFooterTextColor) !important; a { color: var(--bannerFooterTextColor) !important; } } #divContent > table > tbody > tr > td { padding: 0; } #header { position: relative; height: var(--headerHeight); } #header img { vertical-align: middle; display: inline-block; height: var(--logoHeight); } #header .left { font-family: "Century Gothic", Arial; color: var(--bannerLeftTextColor); line-height: 35px; display: inline-block; margin-right: 20px; vertical-align: middle; font-size: 12pt; } #header td.right { padding-right: 8px; text-align: right; white-space: nowrap; } #header td.right form { display: inline; } #mainMenu .menuTitle { margin: 8px 0 0 0; font-weight: 700; padding-right: 6px; text-align: right; } #mainMenu .splitter { margin: 8px 0; height: 1px; background-color: darkgray; } #header button { min-width: auto; } div[align=center] table, center table { text-align: left; } /* anchor styles */ a { text-decoration: underline } a img { border: 0; } a:hover { color: #FF0000; } /* red */ a:active { color: #FF7700; } /* orange */ a.footer:link { color: black; } a.footer:visited { color: black; } a.command:link, a.command:visited { color: #0037AA; } /* dark blue */ a.command:hover, a.command:active { color: #6B0076; } /* purple */ tr.heading a, tr.heading2 a { color: black; width: 100%; display: block; } tr.heading a:hover, tr.heading a:active { color: #F2C9BB; } /* pink */ tr.heading2 a:hover, tr.heading2 a:active { color: #A95564; } /* maroon */ #mainMenu { margin-right: 5px; overflow: hidden; transition: width 0.25s ease-out; } #menuCloser { position: absolute; top: 10px; right: -7px; z-index: 10; border: 1px solid gray; cursor: pointer; } #menuCloser.closed ~ #mainMenu { width: 0 !important; transition-timing-function: ease-in; } #menuContainer { position: relative; display: inline-block; padding-left: 8px; min-height: inherit !important; } table.menu { width: 100%; } table.menu a { white-space: nowrap; display: block; text-align: left; font-size: 12pt; line-height: 1; font-family: Nunito, Arial, sans-serif; } .dragging { background-color: #f0f0f0; opacity: 0.6; border: 2px dashed #999; transform: scale(1.02); transition: all 0.2s ease; z-index: 1000; position: relative; } @keyframes flash-outline { 0% { outline-color: #4caf50; background-color: rgba(76, 175, 80, 0.1); } 100% { outline-color: transparent; background-color: transparent; } } @keyframes highlight { 0% { outline: 2px solid #4CAF50; outline-offset: 0; } 100% { outline: 2px solid transparent; outline-offset: 10px; } } .highlighted { animation: highlight 0.5s ease-out; } .flyoutLink { display: flex; align-items: center; padding: 6px 0; margin-right: -2px; border-radius: 6px; background-color: transparent; /* Ensure no background color for the container */ justify-content: space-between; cursor: pointer; i { visibility: hidden; width: 20px; height: 20px; background-color: transparent; /* Ensure background is transparent */ border: none; /* Remove any border */ margin-right: 5px; display: inline-block; /* Ensure it's inline with the text */ background-size: 16px 16px; background-repeat: no-repeat; background-position: center; &:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); background-color: rgba(255, 223, 0, 0.1); border-radius: 4px; outline: 1px solid black; } } a, span { cursor: pointer; position: relative; padding-left: 4px; border-radius: 4px; color: black; text-decoration: none !important; white-space: nowrap; } span { margin-right: auto; } &:hover { background-color:hsl(from var(--accordionColor) h s calc(l + 39) / 0.7); color: black; text-decoration: none; transition: background-color 0.25s; outline: solid 2px hsl(from var(--accordionColor) h s calc(l + 30)); a, span { color: var(--accordionColor); text-decoration: none; } i { background-image: url('../images/nav/fav_disabled.png'); cursor: pointer; visibility: visible; } } &:active { color: black; text-decoration: none; background-color: hsl(from var(--accordionColor) h s calc(l + 35) / 0.7); } &:visited { color: black; text-decoration: none; } &.isMenuFav i { background-image: url('../images/nav/fav.png'); /* Path to yellow star image */ } &.menuOther { width: 100% !important; } } /* Optional: Custom scrollbar styling for WebKit browsers */ .side-menu-container::-webkit-scrollbar { width: 8px; } .side-menu-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; } .menu:not(#menuFavoriteContainer) .flyoutLink.isMenuFav i { visibility: visible; } /* special styles for the tab construct */ .invis, .innerframe { display:none; } #tabhead { width: 100%; margin: 0px 0px -5px -1px; } #tabhead td { padding-bottom: 5px; white-space: nowrap; } #outerframe { text-align: left; padding: 4px 4px 4px 4px; } .innerframe, .subwnd { background-color: #EBF0FA; } .innerframe { margin-top: 5px; } .tab { padding: 0px 3px 3px 3px; } .tab.selected { border-bottom-width: 5px; } .tabcontent { margin: 5px 5px 5px 5px; } .subwnd { border: 3px groove black; position: absolute; z-index: 3; } /* special styles for the popupmenu construct */ div.popupmenu { /* outer frame around the whole control */ display: inline-block; vertical-align: middle; position: relative; border: 1px solid #7291cf; line-height: normal; white-space: nowrap; } div.popupdisabled, div.popupdisabled input { background-color: #EBEBE4; } .popupbutton { /* dropdown button icon */ position: absolute; right: 5px; top: 2px; border: 1px solid white; width: 20px; height: 18px; z-index: 100; float: none; } .popupbutton:not([popupdisabled="1"]) { cursor: pointer; } .popupbutton { background-image: url(../images/dropdown-arrow.png); } .popupbutton[popupstate="0"]:not([popupdisabled="1"]):hover { background-image: url(../images/dropdown-arrow.png); } .popupbutton[popupstate="1"] { background-image: url(../images/dropdown-arrow.png); } .popupbutton[popupdisabled="1"] { background-image: url(../images/dropdown-arrow.png); } .popupmenu input { position: relative; top: 1px; min-height: 18px; border-width: 0; padding-left: 1px; margin: 0; /* background-color: cyan;*/ } .popupmenu .popupbutton ~ input { padding-right: 20px; } div.popuplist { /* the actual dropdown menu */ display: none; float: none; position: absolute; padding: 2px; background-color: white; border: 1px solid #7291cf; margin-top: -1px; white-space: nowrap; overflow-x: auto; z-index: 101; } .popuplist table { width: 100%; padding: 0; /* border: 1px solid green;*/ } .popuplist a { width: 100%; text-decoration: none; font-size: 14px; /* border: 1px solid red;*/ } .popuplist a:link, .popuplist a:hover, .popuplist a:active, .popuplist a:visited { color: navy; } .popuplist tr { height: 20px; } .popuplist td { white-space: nowrap; } td.popupicon { width: 20px; } td.popupicon div { width: 20px; height: 18px; text-align: center; /* border: 1px solid orange;*/ line-height: 16px; } div.popupicon { /* menu item icon */ position:absolute; z-index: 2; text-align: center; /* background-color: orange;*/ /* border: 1px solid magenta;*/ } div.popupicon img { margin-top: 2px; margin-left: 2px; border-width: 0px; } div.popupicon ~ input { padding-left: 22px; } .popuplist .selected, .popuplist .selected a:hover { background: navy; color: white; } .popuplist .selected a { color: white; } .popuplist .saved a { text-decoration: underline; } .popupDivider td{ cursor: default; } .popupDivider hr{ cursor: default; } /* ******************************************************************************** ManageMyID styles ******************************************************************************** */ #contentNarrow { width : 561px; background-color : white; border : 11px solid #BEAC7A; border-bottom-width: 0; padding : 0 8px 0 8px; margin : 0 0 0 4px; height : 340px; min-height : 340px; text-align: left; } /* workaround non-standard IE6 behavior */ html>body #contentNarrow { height: auto; } #menu { width : 148px; min-height : 344px; font-family: Nunito, Arial, sans-serif; font-size : 8pt; font-weight : bold; padding : 7px 7px 0 7px; white-space : nowrap; background-color : #A69774; margin-left : 5px; overflow : hidden; } /* MSIE version of min-height */ #menu { height: expression(this.offsetHeight<344 ?'344px':'auto'); } #pageHeaderNarrow { width: 561px; } #pageHeaderNarrow h2 { background: transparent url(../images/title-bg-narrow.gif) no-repeat top left; margin-top: 10px; height: 26px; float: center; } #pageHeaderNarrow h2 span { color : white; padding-left : 10px; font-weight : bold; line-height : 25px; text-align : left; } /* table styles */ tr.logo { height: 82px; background-color: white; } tr.logo img { display: block; } td.formLabel { text-align: left; vertical-align: middle; padding: 0 0 0 21px; } td.formLabelRight { text-align: right; vertical-align: middle; padding: 0 0 0 0; } td.formField { text-align: left; vertical-align: middle; padding: 0 0 0 21px; } td.formField2{ text-align: left; vertical-align: middle; padding: 0 0 2px 5px; } /* table data */ table.Data { margin: 0; border-top: thin solid #BEAC7A; border-bottom: thin solid #BEAC7A; /* clear: both;*/ background: white; width: 561px; font-size : 9pt; } table.Data th { font-weight: 700; text-align: left; padding: 0.2em 0.3em 0.2em 0.3em; background: #BEAC7A; color: #333300; } table.Data td { padding: 0.1em 0.5em 0.1em 0.5em; } /* text styles */ .Important { padding: 0 0 20px 20px; color: #000000; } .password-form-container{ padding: 0 0 0px 0px; color: #000000; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; /* width : 550px;*/ } .subText2{ padding: 0 0 0px 20px; color: #000000; /* width : 550px;*/ } .Aside { font: 8pt; padding-left: 10px; } /* framework styles */ .ImageButton, .ImageButtonW { height: 21px; font-family: sans-serif; font-weight: 700; font-size: 8pt; border: none; padding-bottom: 2px; color: #333300; vertical-align: middle; background-color: lightgrey; margin: 7px 5px 0 0; } .ImageButton { width: 75px; background-image:url(../images/button_bg.gif); } .ImageButtonW { width: 125px; background-image:url(../images/button_bg_wide.gif); } .formSubmit { margin: 15px 10px 20px 0; } /* anchor styles */ #menu a { display: block; text-align: left; } /** * Styles for upgraded search control */ .search.upgraded { background: white; border: none; position: relative; top: 0; display: inline-block; font-size: 13px; text-align: left; } .search.upgraded .expand { position: absolute; right: 4px; top: 5px; font-size: 1.2em; padding: 2px 4px; cursor: pointer; background: white; } .search.upgraded .searchIcon, .search.upgraded .loadingIcon { color: #555; position: absolute; z-index: 5; top: 7px; left: 8px; font-size: inherit; } .search.upgraded .loadingIcon, .search.upgraded.loading .searchIcon { display: none; } .search.upgraded.loading .loadingIcon { display: block; font-size: 1.5em; left: 6px; top: 5px; } .search.upgraded input { width: 100%; padding: 4px; padding-left: 24px; position: relative; top: 0; margin: 0; background: transparent; min-width: 180px; font-size: inherit; } .search.upgraded input:focus { outline: none; } .search.upgraded div.popupmenu { padding: 2px; box-shadow: inset 1px 4px 9px -6px rgb(170, 170, 170); background: white; font-size: 1em; border: 1px solid gray; height: auto; width: 100% !important; } .search.upgraded div.popuplist { padding: 4px 0 0; margin-top: -1px; border: 1px solid gray; border-top: none; font-size: 1em; color: black; width: 100% !important; } .search.upgraded .popuplist a { font-size: 1em; } .search.upgraded .popuplist a:link, .search.upgraded .popuplist a:hover, .search.upgraded .popuplist .selected a:hover { color: inherit; background: transparent; } .search.upgraded .popuplist td { padding: 4px 6px; cursor: pointer; } .search.upgraded .popuplist .selected { background: #eee; color: inherit; } .search.upgraded .popuplist .saved { background: #7291cf; color: white; } .search.upgraded .popuplist .saved a { text-decoration: none; } /* screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* menu filter input box */ .mainMenuFilter { position: relative; margin: 2px 2px 2px 0; text-align: left; box-sizing: content-box; height: 35px; } .mainMenuFilter *, .mainMenuFilter *::before ,.mainMenuFilter *::after { box-sizing: inherit; } .mainMenuFilter input { width: 100% !important; margin: 0; padding: 5px 28px; border: 2px solid #999; border-radius: 8px; outline: none; font-size: 14px; box-sizing: border-box; } /* hide the native reset button */ .mainMenuFilter input::-ms-clear { position: absolute; z-index: 0; width: 0; height: 0; } /* magnifying glass icon */ .mainMenuFilter i { position: absolute; top: 10px; left: 8px; width: 7px; height: 7px; border: 2px solid black; border-radius: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mainMenuFilter i::before { content: ""; position: absolute; top: 3px; left: 9px; width: 6px; height: 2px; background: black; } /* reset button */ .mainMenuFilter b { position: absolute; top: 8px; right: 8px; width: 19px; height: 19px; border-radius: 50%; cursor: pointer; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mainMenuFilter b:hover { background: indianred; } .mainMenuFilter b:hover::before, .mainMenuFilter b:hover::after { background: white; } .mainMenuFilter b::before, .mainMenuFilter b::after { content: ""; position: absolute; z-index: 2; background: gray; } .mainMenuFilter b::before { top: 4px; left: 9px; width: 1px; height: 11px; } .mainMenuFilter b::after { top: 9px; left: 4px; width: 11px; height: 1px; } .mainMenuFilter input:placeholder-shown + b { display: none; } .menuContainer .menu { width: 97%; } .menuContainer .menu a { width: 100%; white-space: nowrap; font-size: 12pt; line-height: 1; font-family: Nunito, Arial, Helvetica, sans-serif; } #menuSection { border-right: 1px solid darkGray; position: relative; background-color: var(--menuBackGroundColor); scrollbar-color: rgba(0, 0, 0, 0.3) var(--menuBackGroundColor); } .menu > div > div { padding: 1px; } #menuFavoriteContainer:empty::before { content: "No favorites"; display: block; color: #999; font-style: italic; text-align: center; padding: 2px; } /* menu accordion collapse functionality. --This is also where customers would change the color of the menu headers, as well as the hover color below, and the active page highlight is in the menuItemHighlight class border-- */ .menuAccordion { display: flex; position: relative; align-items: center; text-align: left; width: calc(100% - 2px); margin: 2px 0; padding: 5px 5px 5px 10px; border: none; border-radius: 6px; background-color: var(--accordionColor); justify-content: space-between; cursor: pointer; transition: background-color 0.25s; color: white; min-height: 34px; outline: none !important; font-family: Nunito, Arial, sans-serif; font-size: 14pt; } .menuAccordion b { margin-left: 10px; } .menuAccordion:hover { background-color: hsl(from var(--accordionColor) h s calc(l - 10)); } .menuAccordion:before { content: "\25BC"; color: #fff; font-size: 12px; font-weight: 900; position: absolute; left: 2px; margin-top: 3px; line-height: 16px; } .menuAccordion.collapsed:before { content: "\25BA"; /* Unicode character for arrow right */ content: "\25BA"; /* Unicode character for arrow right */ } .menuAccordion + div { position: relative; left: -2px; padding: 2px 4px; overflow: hidden; transition: max-height 0.25s ease-in-out; } .menuAccordion b + i { display: inline-block; width: 32px; height: 26px; background-size: contain; background-repeat: no-repeat; background-position-x: right; } .menuAccordion .favorites_icon { background-image: url(/images/nav/fav.png); } .menuAccordion.collapsed + div { max-height: 0 !important; transition-timing-function: ease-in; } .menuAccordion.empty, .menuAccordion.empty + div { display: none; } #mainMenu.loading .menuAccordion + div { /* do not collapse until after the menu has finished loading */ max-height: none !important; } /* highlight the menu item for the current page */ .menuItemHighlight { outline: 2px solid hsl(from var(--accordionColor) h s calc(l + 40)); } .menuItemHighlight a { font-weight: 700; color: var(--accordionColor) !important; } .menuItemHighlight a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: inherit; } /* Body background color */ .header-container { display: flex; align-items: center; align-content: center; } .login-help-container{ display: flex; align-items: center; align-content: center; position: absolute; float: right; right: 10px; & span { white-space: nowrap !important; margin-right: .5rem !important; color: var(--bannerRightTextColor); } .logout-btn { margin-left: 20px; } .form-control { width: auto; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 2rem 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; &:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); } } .btn { display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-light:hover { background-color: #f1f1f1; border-color: #dae0e5; color: #212529; text-decoration: none; } .btn:not(:disabled), button:not(:disabled), [type=button]:not(:disabled), [type=submit]:not(:disabled), [type=reset]:not(:disabled) { cursor: pointer; } } .iug-display{ margin-top: 5px; } .log-in-out-btn{ padding: 0 15px; margin-top: 5px; } .help-button { margin: auto; } .content-section{ width: 100%; overflow-y: auto; padding-bottom: 50px; } .hide-element { display:none !important; } .gap-xs-s { gap: 0.2em; } .gap-xs { gap: 0.5em; } .gap-sm { gap: 1em; } .gap-md { gap: 1.5em; } .btn-light { background-color:#E2E2E2 !important; } .btn-light:hover{ background-color:#F1F1F1 !important; } .disabled-decrease-opacity:disabled { opacity: 0.60; cursor: not-allowed !important; } .primary-outlined-btn { background: #ffffff !important; color: #0878C8 !important; border-color: #0878C8 !important; } .primary-outlined-btn:hover { background: #0878C8 !important; color: #ffffff !important; } .success-btn-outlined-color { color: #37863D !important; border-color: #37863D !important; } .success-btn-outlined-color:hover { background: #37863D !important; color: #fff !important; } .revert-btn:hover .refresh-img { filter: brightness(0) invert(1) !important; } #ACTIVE:disabled:checked { background-color: #007bff; border-color: #007bff; cursor: not-allowed; opacity: 0.7; appearance: none; -webkit-appearance: none; } #ACTIVE:disabled:checked::after { content: '\2714'; /* Unicode checkmark */ color: white; /* Color of the checkmark */ font-size: 14px; /* Size of the checkmark */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Center the checkmark */ } .toast-container { margin-right: 10px; height: 33px; display:none !important; display: flex; align-items: center; color: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); opacity: 1; transform: translateX(0); z-index: 9999999; } .show-toast { opacity: 1; transform: translateX(0); display:flex !important; } .success-toast-bg { background-color: #78be20; } .error-toast-bg { background-color: #f65275; } .toast-container-top { position: fixed; top: 20px; display: flex; align-items: center; color: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); opacity: 0; z-index: 9999999; } .show-toast-top { opacity: 1; transform: translateX(0); } .circle-check-solid { background-image: url(../svg/circle-check-solid.svg); width: 17px; height: 17px; margin-top: -0.2em; } .svg_help_icon { background-image: url(../svg/help.svg); } .svg_account_filled_icon { background-image: url(../svg/account-filled.svg); margin-right: -2px; } .svg_monitor_icon { background-image: url(../svg/monitor_icon.svg); margin-right: 2px; } .svg_settings_fill_icon { background-image: url(../svg/settings-fill.svg); } .svg_save_filled_icon { background-image: url(../svg/save-filled.svg); } .svg_access_icon { background-image: url(../svg/access_icon.svg); } .svg_admin_icon { background-image: url(../svg/admin_icon.svg); } .log_icon { background-image: url(../svg/log_icon.svg); } .svg_access_icon { background-image: url(../svg/access_icon.svg); } .svg_house_icon { background-image: url(../svg/house_icon.svg); filter: invert(100%); } .svg_address_card_icon { background-image: url(../svg/address_card_icon.svg); filter: invert(100%); margin-right: 2px; } .svg_activity_icon { background-image: url(../svg/activity_icon.svg); filter: invert(100%); } .svg_my_access_icon { background-image: url(../svg/person_walking_icon.svg); filter: invert(100%); margin-right: 2px; } .document-icon { background-image: url(../svg/document_icon.svg); } .copy-icon-28 { background-image: url(../svg/copy-icon-28.svg); } .add-icon-28 { background-image: url(../svg/add-icon-28.svg); } .calendar-days { background-image: url(../svg/calendar-days.svg); } .cash-register { background-image: url(../svg/cash-register.svg); } /*side menu scrollbar*/ .side-menu-container { height: calc(100vh - var(--headerHeight) - var(--footerHeight) - 38px ) !important; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-bottom: 10px; } .side-menu-container::-webkit-scrollbar { width: 8px; } .side-menu-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; } /*side menu scrollbar*/ /* scroll to top button */ .scroll-top-main { position: absolute; bottom: 40px; right: 35px; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 18px; font-weight: bold; line-height: 32px; text-align: center; color: white; background-color: var(--accordionColor); outline: 2px solid white !important; border: none; border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background-color 0.3s ease; z-index: 9999; } .scroll-top-main i { pointer-events: none; } .scroll-top-main.menu-zone { right: 15px; bottom: 25px; } .scroll-top-main:hover, .scroll-top-main:focus { background-color: hsl(from var(--accordionColor) h s calc(l - 10)); } .show-scroll-btn .scroll-top-main { opacity: 1; pointer-events: auto; } .scroll-top-main i { position: absolute; display: block; top: 8px; left: 14px; height: 18px; width: 4px; background-color: white; } .scroll-top-main i::after { content: ""; position: absolute; display: block; top: 0; left: -5px; height: 14px; width: 14px; box-sizing: border-box; border-width: 4px; border-color: white; border-style: solid none none solid; transform: rotate(45deg); } /* menu toggle button */ .menu-toggle-btn { width: 21px !important; min-width: 21px !important; height: 22px !important; min-height: 22px !important; padding: 4px !important; border: none !important; border-radius: 50% !important; background-color: var(--accordionColor); cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transform: translateX(5px); } .menu-toggle-btn:hover { background-color: hsl(from var(--accordionColor) h s calc(l - 10)); transform: translateX(5px) scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); } .menu-toggle-btn:focus, .menu-toggle-btn:active { outline: none; border: none; } .menu-toggle-btn i { position: absolute; display: block; top: 6px; left: 6px; height: 10px; width: 10px; box-sizing: border-box; border-width: 4px; border-color: white; border-style: none none solid solid; transform: rotate(45deg); } .menu-toggle-btn.closed i { left: 3px; border-style: solid solid none none; } /* End of styles */