/* 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 the local customer customizing CSS with the root element */ @import "JRNY.hostedCustomer.css"; body { margin: 0; font-family: Arial, sans-serif !important; font-size: 1rem; /*To match bootstrap.min.css. was 13px*/ background: var(--main-background-color); /* NEWVAL */ color: var(--main-text-color); /* NEWVAL */ /*min-width: 700px;*/ /* NEWVAL */ overflow: auto; /* NEWVAL */ } /* table styles */ table { border-collapse: collapse; border: none; /*!important; MIGHT BE NEEDED */ } tr.heading { background-color: var(--main-heading-background-color); /* !important; MIGHT BE NEEDED */ color: var(--main-heading-color); /* NEWVAL */ font-weight: 700; line-height: 36px; /* NEWVAL */ padding: 0px; /* NEWVAL */ } tr.heading2 { background-color: var(--main-heading-background-color); /* !important; MIGHT BE NEEDED */ color: var(--main-heading-color); /* NEWVAL */ font-weight: 700; line-height: 25px; /* NEWVAL */ } tr.heading2 a:hover, tr.heading2 a:active { background-color: var(--main-heading-background-color); color: var(--main-heading-color); } /* NEWVAL */ #wndAccess tr.heading { background-color: var(--main-heading-background-color); color: var(--main-heading-color); font-weight: 700; line-height: 18px; padding: 0px; } /* NEWVAL */ tr.title { font-weight: 700; background-color: var(--main-heading-background-color); /* !important; MIGHT BE NEEDED */ color: var(--main-heading-color); /* NEWVAL */ font-size: medium; } tr.row1, tr.row1>td { background-color: var(--main-background-color); /*!important; MIGHT BE NEEDED */ border-radius: 0px; /* !important; MIGHT BE NEEDED */ /* NEWVAL */ } tr.row2, tr.row2>td { background-color: var(--main-background-color); /* NEWVAL */ } 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: var(--main-heading-background-color); /* !important; MIGHT BE NEEDED */ color: var(--main-heading-color); /* NEWVAL */ font-size: 12px; } .heading td { padding: 0px; } /* NEWVAL */ .NoWrapTD, a.NoWrapTD.sec_label { white-space: break-spaces; max-width: 300px; /* width: calc(100% - 0px); */ overflow: hidden; text-overflow: ellipsis; /*display: block;*/ text-align: left; padding: 7px 0px; } /*NEWVAL */ /* help icon */ #helpbutton { position: relative; width: 30px; height: 30px; vertical-align: middle; } span#helpbutton { display: none; /*ORIG VAL 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.4); 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-align: center; font-size: 36px; color: #FF3333; } .invalid { color: #FF0000; } .readonly, [locked="1"] { color: #777777; } /* heading size */ h1.heading, h2.heading, h3.heading, h4.heading, h5.heading { margin: 15px 0; font-size: 14pt; font-weight: 700; } h1.heading2, h2.heading2, h3.heading2, h4.heading2, h5.heading2 { margin: 15px 0; font-size: 12pt; font-weight: 700; } /* menu heading */ h1.menu, h2.menu, h3.menu, h4.menu, h5.menu { font-size: 10pt; font-weight: 700; } /* React page title and sub-titles */ h1.heading3, h2.heading3, h3.heading3, h4.heading3, h5.heading3 { font-size: 21pt; } h1.heading4, h2.heading4, h3.heading4, h4.heading4, h5.heading4 { font-size: 15pt; } .center { text-align: center; } /* input styles */ input.readonly { background-color: var(--main-background-color); border: 1px solid #777777; padding: 2px 1px; } input.enabledtxt { background-color: var(--main-background-color); } input.disabledtxt, select:disabled { background-color: var(--main-background-color); /*!important; MIGHT BE NEEDED */ color: #777777; /*!important; MIGHT BE NEEDED */ } input.enabledtxt, input.disabledtxt { border: 1px solid #7291cf; padding: 2px 1px; } .delete input { background-color: #555; /*!important; MIGHT BE NEEDED */ } /* 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 ); ORIGVAL */ background-color: var(--menu-background-color); -webkit-box-shadow: var(--body-box-shadow); -moz-box-shadow: var(--body-box-shadow); box-shadow: var(--body-box-shadow); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#272930', endColorStr='#272930', gradientType='1'); background: -webkit-linear-gradient(right, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ background: -moz-linear-gradient(right, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ background: -o-linear-gradient(right, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ background: linear-gradient(to left, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ } /* NEWVAL */ .gradientReverse { /* background-color: #FFFFFF; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#4A74CA', gradientType='1'); background: -webkit-linear-gradient( right, #4A74CA, #FFFFFF ); background: -moz-linear-gradient( right, #4A74CA, #FFFFFF ); background: -o-linear-gradient( right, #4A74CA, #FFFFFF ); background: linear-gradient( to left, #4A74CA, #FFFFFF ); ORIGVAL */ background-color: var(--menu-background-color); /*-webkit-box-shadow: 1px 1px 5px 0px #8891A0; -moz-box-shadow:1px 1px 5px 0px #8891A0; box-shadow: 1px 1px 5px 0px #8891A0;*/ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#272930', endColorStr='#272930', gradientType='1'); background: -webkit-linear-gradient(right, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ background: -moz-linear-gradient(right, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ background: -o-linear-gradient(right, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ background: linear-gradient(to left, var(--menu-background-color), var(--menu-background-color)); /*!important; MIGHT BE NEEDED */ } /* NEWVAL */ .gradientForward img, .gradientReverse img { display: block; } .footer { width: 100%; bottom: 0; left: 0; position: static; /* NEWVAL */ margin-bottom: 20px; /*!important; MIGHT BE NEEDED */ background: none; /*!important; MIGHT BE NEEDED */ box-shadow: none; } /*NEWVAL*/ #divContent>table>tbody>tr>td { padding: 0; } #header { position: relative; } #header img { vertical-align: middle; display: inline-block; width: 170px; height: auto; /*!important; MIGHT BE NEEDED */ margin-left: 35px; /* NEWVAL */ } #header .left { font-family: "Century Gothic", Arial; background-color: transparent; color: var(--main-heading-color); /* NEWVAL */ line-height: 60px; display: inline-block; margin-right: 20px; vertical-align: middle; font-size: 1.2em; } .counters td { padding-left: 3px; /*!important; MIGHT BE NEEDED */ } #header td.right { padding-right: 8px; text-align: right; white-space: nowrap; } #header td.right form { display: inline; } #mainMenu .menuTitle { margin: 0; /* NEWVAL */ font-weight: 700; padding: 15px 20px; /* NEWVAL */ text-align: center; /* NEWVAL */ background: var(--menu-background-color); /* NEWVAL */ color: var(--menu-text-color); /* NEWVAL */ text-transform: uppercase; /* NEWVAL */ /*letter-spacing: 2px;*/ /* NEWVAL */ line-height: normal; } #mainMenu .splitter { margin: 0; /* NEWVAL */ height: 1px; background-color: darkgray; background: none; /* NEWVAL */ border-bottom: none; /* NEWVAL */ } .mnuIcon { height: 28px; vertical-align: middle; padding-right: 5px; } /* NEWVAL */ #header button { min-width: auto; } div[align=center] table, center table { text-align: center; } /* anchor styles */ a { text-decoration: none; /* NEWVAL */ /*color: #a12385; */ /* NEWVAL */ } a img { border: 0; } a:hover { color: #3f414a; /* NEWVAL */ } a:active { color: #3f414a; /* NEWVAL */ } a.footer:link { color: black; } a.footer:visited { color: black; } a.command:link, a.command:visited { color: #444a5a; /* NEWVAL */ text-decoration: none; /* NEWVAL */ } a.command:hover, a.command:active { color: #C95072; } /* purple */ tr.heading a, tr.heading2 a { /* NEWVAL */ background-color: var(--main-heading-background-color); color: var(--main-heading-color); width: 100%; display: block; } tr.heading a:hover, tr.heading a:active { /* NEWVAL */ background-color: var(--main-heading-background-color); color: var(--main-heading-color); } #mainMenu { margin-right: 5px; overflow: hidden; transition: width 0.25s ease-out; } #menuCloser { position: absolute; z-index: 999; /* NEWVAL START */ border: 1px solid darkgray; border-color: transparent !important; border-radius: 0px; width: 11px; height: unset; display: block; margin: 0px; padding: 0px; cursor: pointer; top: 8px; right: -1px; background-image: url('/images/menu_toggler.png'); background-color: transparent !important; background-repeat: no-repeat; background-position: center; background-size: contain; /* NEWVAL END */ } #menuCloser.closed~#mainMenu { width: 0 !important; transition-timing-function: ease-in; } #menuFilterInput { background-color: var(--menu-text-color); color: var(--menu-background-color); width: 100%; border: none !important; margin: 0px; padding: 0px 10px; } #menuFilterInput::placeholder { color: var(--button-background-color); } #menuContainer { position: relative; display: inline-block; padding: 0px; /* NEWVAL */ } td.MenuBackground { /*border-right: 1px solid darkGray;*/ position: relative; background: var(--menu-background-color); /* NEWVAL */ height: 87vh; /* NEWVAL */ z-index: 99; /* NEWVAL */ } table.menu { width: 100%; } table.menu a { white-space: nowrap; border: none; /* NEWVAL */ display: block; text-align: unset; /* NEWVAL */ padding: 5px 20px; /* NEWVAL */ color: var(--menu-text-color); /* NEWVAL */ } .flyoutLink a { color: var(--menu-text-color); font-size: 13px; /* NEWVAL */ text-decoration: none; padding-left: 10px; padding-right: 6px; } .flyoutLink a:visited { /* NEWVAL */ color: var(--menu-text-color); text-decoration: none; } .flyoutLink a:active { /* NEWVAL */ color: var(--main-background-color); text-decoration: none; background-color: var(--tilebox-backbround-color); } .flyoutLink a:hover { color: var(--main-background-color); /* NEWVAL */ text-decoration: none; background-color: var(--button-background-color); /* NEWVAL */ border: none; /* NEWVAL */ border-bottom: none 1px #3f414a; /* NEWVAL */ transition: background-color 0.25s; } ul.menu { /* NEWVAL */ list-style-type: none; margin: 0; padding: 0; overflow: hidden; line-height: normal; } li.flyoutLink a { /* NEWVAL */ color: var(--menu-text-color); text-decoration: none; display: block; text-align: left; padding-left: 8px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; white-space: nowrap; } li.flyoutLink a:visited { /* NEWVAL */ color: var(--menu-text-color); text-decoration: none; } li.flyoutLink a:active { /* NEWVAL */ color: var(--button-text-color); text-decoration: none; background-color: var(--button-background-color); } li.flyoutLink a:hover, li.flyoutLink a:focus { /* NEWVAL */ color: var(--button-text-color); text-decoration: none; background-color: var(--button-background-color); /*border-bottom: none 1px #3f414a;*/ border: none; outline: none; } /* special styles for the tab construct */ #tabhead { width: 100%; margin: 0px 0px; } #tabhead td { padding-bottom: 5px; white-space: nowrap; } #outerframe { text-align: left; background-color: var(--main-background-color); /* NEWVAL*/ padding: 11px 4px 4px 4px; /*NEWVAL */ min-width: 50%; } .innerframe, .tab, .subwnd { background-color: #dadce2; /* NEWVAL*/ } .innerframe { margin-top: 0px; /* NEWVAL*/ padding: 10px 0px; /* NEWVAL*/ min-width: 50%; /* NEWVAL*/ } .tab { padding: 10px; /* NEWVAL*/ border-bottom: 0px solid #dadce2; /* NEWVAL*/ } .tab.selected { border-bottom-width: 10px; /* NEWVAL*/ } .tabcontent { margin: 0px; /* NEWVAL*/ background-color: var(--main-background-color); /* NEWVAL*/ } .subwnd { border: none; /* NEWVAL*/ position: absolute; z-index: 3; -webkit-box-shadow: 1px 1px 5px 0px #8891A0; /* NEWVAL*/ -moz-box-shadow: 1px 1px 5px 0px #8891A0; /* NEWVAL*/ box-shadow: 1px 1px 5px 0px #8891A0; /* NEWVAL*/ } #divPhotoReview #divIDCard { /* NEWVAL*/ float: unset; /* !important; MIGHT BE NEEDED */ margin: 4px; /* !important; MIGHT BE NEEDED */ text-align: left; /* !important; MIGHT BE NEEDED */ } /* special styles for the popupmenu construct */ div.popupmenu { /* outer frame around the whole control */ display: inline-block; vertical-align: middle; position: relative; border: none; /* NEWVAL*/ line-height: normal; white-space: nowrap; height: 35px; /* NEWVAL*/ background: var(--main-background-color); /* NEWVAL */ } div.popupdisabled, div.popupdisabled input { background-color: #EBEBE4; } .popupbutton { /* dropdown button icon */ position: absolute; right: 0; top: 3px; /* NEWVAL */ border: 1px solid white; width: 15px; height: 18px; z-index: 100; float: none; } .popupbutton:not([popupdisabled="1"]) { cursor: pointer; } .popupbutton { background-image: url(/images/arrow-down.svg); /* NEWVAL */ border: none; /* NEWVAL */ } .popupbutton[popupstate="0"]:not([popupdisabled="1"]):hover { background-image: url(/images/arrow-down.svg); /* NEWVAL */ } .popupbutton[popupstate="1"] { background-image: url(/images/arrow-down.svg); /* NEWVAL */ } .popupbutton[popupdisabled="1"] { background-image: none; /* NEWVAL */ } .popupmenu input { position: relative; top: 0px; /* NEWVAL */ min-height: 18px; border-width: 0px; padding-left: 1px; margin: 0; height: calc(100% - 2px); /* NEWVAL */ /* background-color: cyan;*/ } .popupmenu .popupbutton~input { padding-right: 15px; /* NEWVAL */ padding-left: 15px; /* NEWVAL */ margin: 0; /* NEWVAL */ } div.popuplist { /* the actual dropdown menu */ display: none; float: none; position: absolute; padding: 0px; /* NEWVAL */ background-color: white; border: 1px solid #cccccc; /*NEWVAL*/ margin-top: -1px; white-space: nowrap; overflow-x: auto; z-index: 101; } .popuplist table { width: 100%; padding: 0px; /* 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: #444; /*NEWVAL*/ } .popuplist tr { height: 35px; /*NEWVAL*/ } .popuplist td { white-space: nowrap; padding: 0 15px; /*NEWVAL*/ cursor: pointer; /*NEWVAL*/ } td.popupicon { width: 20px; display: none; /*NEWVAL*/ } 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; margin-top: 7px; /*NEWVAL*/ padding: 1px 2px; /*NEWVAL*/ /* 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: #616D7E; /* NEWVAL */ 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: 0px; 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: Arial, Helvetica, 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; } .subText { padding: 0 0 0px 0px; color: #000000; /* width : 550px;*/ } .subText2 { padding: 0 0 0px 20px; color: #000000; /* width : 550px;*/ } .Aside { font: 8pt; } /* framework styles */ .ImageButton, .ImageButtonW { height: 21px; font-family: sans-serif; font-weight: 700; font-size: 8pt; border: none; padding-bottom: 2px; background-color: var(--main-heading-background-color); color: var(--main-heading-color); vertical-align: middle; margin: 7px 5px 0px 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; } /*START NEW SINCE 802*/ /* 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 10px 2px 10px; /*ORIG VAL 2px 2px 2px 0*/ text-align: left; box-sizing: content-box; } .mainMenuFilter *, .mainMenuFilter *::before, .mainMenuFilter *::after { box-sizing: inherit; } .mainMenuFilter input { width: 100%; 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: 8px; left: 8px; width: 7px; height: 7px; border: 2px solid black; border-radius: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .bootstrap .mainMenuFilter i { top: 9px; } .mainMenuFilter i::before { content: ""; position: absolute; top: 3px; left: 9px; width: 6px; height: 2px; background: black; } /* reset button */ .mainMenuFilter b { position: absolute; top: 6px; right: 6px; width: 19px; height: 19px; border-radius: 50%; cursor: pointer; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .bootstrap .mainMenuFilter b { top: 7px; right: 7px; } .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; } /* 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 { position: relative; width: calc(100% - 4px); margin: 2px 2px 2px 2px; padding: 5px; border: 1px solid #999; /*border-radius: 6px; ORIG VAL*/ outline: none; background-color: #b7cfff; text-align: left; cursor: pointer; transition: background-color 0.25s; box-sizing: border-box; font-weight: bolder; } .menuAccordion:hover { background-color: #7291cf; } .menuAccordion:after { content: "\25B2"; /* Unicode character for arrow up */ position: absolute; top: 5px; right: 5px; color: #4C4C4C; /*font-size: 15px;*/ font-weight: 900; } .bootstrap .menuAccordion:after { top: auto; } .menuAccordion.collapsed:after { content: "\25BC"; /* Unicode character for arrow down */ } .menuAccordion+div { position: relative; /*left: -2px; ORIG VAL*/ padding: 1px 4px; overflow: hidden; transition: max-height 0.25s ease-out; } .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 a { font-weight: 700; } /* .menuItemHighlight a::after { content: ""; position: absolute; box-shadow: 0 0 2px 2px #7291cf; top: 0; bottom: 0; left: 0; right: 0; border-radius: inherit; } ORIG VAL */ /*END NEW SINCE 802*/ /* new style - sajid */ .sa_login { width: 300px; background: var(--main-background-color); margin: 0px auto; margin-top: 50px; padding: 10px 20px 20px 20px; background-color: var(--main-background-color); -webkit-box-shadow: 1px 1px 5px 0px #8891A0; -moz-box-shadow: 1px 1px 5px 0px #8891A0; box-shadow: 1px 1px 5px 0px #8891A0; } .CsgWebMobile input[type='text'], .CsgWebMobile select, .CsgWebMobile input[type='password'], .CsgWebMobile input[type='email'], .CsgWebMobile input[type='number'], .CsgWebMobile input[type='date'], .CsgWebMobile input[type='time'], .CsgWebMobile input[type='datetime-local'] { height: 35px; /* !important; MIGHT BE NEEDED */ padding: 0 15px; color: var(--main-text-color); background-color: var(--main-background-color); box-sizing: border-box; margin: 0px 0; min-width: 50px; border: solid 1px #ccc; width: 100%; } #wndEditMediaVals input[type='text'], #wndEditMediaVals select, #wndEditPatronGrp input[type='text'], #wndEditPatronGrp select { padding: 0px 1px; min-width: 0px; } input[type='text'], input[type='password'], input[type='email'], input[type='number'], input[type='date'], input[type='time'], input[type='datetime-local'] { height: 35px; /* !important; MIGHT BE NEEDED */ padding: 0 15px; color: #555; box-sizing: border-box; margin: 0px 0; min-width: 50px; border: solid 1px #ccc; background-color: var(--main-background-color); } .smallfield input:not([type="checkbox"]), .smallselect select { background: var(--main-background-color); /* !important; MIGHT BE NEEDED */ } /* input[type='submit'] { background-color: #555 !important; border-color: transparent; color: #fff; width: auto; height: 30px; text-transform: none; } */ input[type='button']:hover, input[type='submit']:hover, input[type='button']:focus, input[type='submit']:focus, button:hover, button:focus { color: var(--button-background-color) !important; background-color: var(--button-text-color) !important; cursor: pointer; } input[type='button'], input[type='submit'] { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; border-color: var(--button-background-color) !important; border-style: solid !important; width: auto; padding: 0px 8px; Height: 30px; text-transform: none; font-size: 12px; /* !important; MIGHT BE NEEDED */ font-weight: normal; /* !important; MIGHT BE NEEDED */ margin: 1px; border-radius: 5px; /*outline:none;*/ } .mobileButton[buttoncolor=grey] { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; height: 35px !important; /*outline:none;*/ } .mobileButton[buttoncolor=green] { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; height: 35px !important; /*outline:none;*/ } .mobileButton[buttoncolor=yellow] { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; height: 35px !important; /*outline:none;*/ } .mobileButton[buttoncolor=red] { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; height: 35px !important; /*outline:none;*/ } .mobileButton[buttoncolor=blue] { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; height: 35px !important; /*outline:none;*/ } .mobileButton { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; height: 35px !important; /*outline:none;*/ } img.mobileButton { background-color: transparent !important; } img.mobileButton[buttoncolor=grey] { background-color: transparent !important; } img.mobileButton[buttoncolor=green] { background-color: transparent !important; } img.mobileButton[buttoncolor=yellow] { background-color: transparent !important; } img.mobileButton[buttoncolor=red] { background-color: transparent !important; } img.mobileButton[buttoncolor=blue] { background-color: transparent !important; } .FileButton { background-color: var(--button-background-color); color: var(--button-text-color); border-color: var(--button-background-color); border-style: solid; width: auto; padding: 8px 15px; /*height: 30px; */ text-transform: none; font-weight: normal !important; /* NEWVAL */ font-size: 12px; /*align-items: flex-start; */ /*vertical-align: top; */ cursor: pointer; border-radius: 5px; height: 35px; } .FileButton:hover { color: var(--button-background-color) !important; background-color: var(--button-text-color) !important; cursor: pointer; } select { padding: 0 8px; margin: 0px 0px; box-sizing: border-box; height: 35px; color: var(--main-text-color); background-color: var(--main-background-color); font-size: 13px; -webkit-appearance: menulist !important; border-radius: 0; border: solid 1px #ccc; } input[type='button']:hover { color: var(--button-background-color) !important; background-color: var(--button-text-color) !important; } button { background-color: var(--button-background-color) !important; color: var(--button-text-color) !important; border-color: var(--button-background-color) !important; border-style: solid !important; width: auto; /* NEWVAL */ height: 30px; /* NEWVAL */ text-transform: none; /* NEWVAL */ font-size: 12px; /* NEWVAL*/ cursor: pointer; /* NEWVAL*/ border-radius: 5px; /*outline:none;*/ } button:hover, button:focus { color: var(--button-background-color) !important; background-color: var(--button-text-color) !important; /* NEWVAL*/ color: var(--button-text-color); /* NEWVAL*/ border-color: transparent; /*outline:none;*/ } input[type='number'] { height: 35px; padding: 0 15px; color: #555; box-sizing: border-box; border: solid 1px #ccc; } input[type='email'] { height: 35px; padding: 0 15px; color: #555; box-sizing: border-box; border: solid 1px #ccc; /* NEWVAL */ } textarea { min-height: 40px; /* NEWVAL */ padding: 0px 15px; /* NEWVAL */ color: #555; box-sizing: border-box; border: solid 1px #ccc; /* NEWVAL */ overflow-x: hidden; /* NEWVAL */ overflow-y: hidden; /* NEWVAL */ width: 100%; /* NEWVAL */ } h1, h2, h3, h4, h5, h6 { font-size: x-large; color: var(--main-heading-color); background-color: var(--main-heading-background-color); text-align: center; font-family: 'Arial'; padding: 10px 0px; margin-bottom: 40px; margin-top: 0px; /* border-bottom: solid 1px #dde0ec; */ /* ALL NEWVAL */ } h2 { font-size: large; padding: 15px 0px; margin-bottom: 20px; margin-top: 0px; /* NEWVAL */ } h3, h4, h5, h6 { font-size: large; padding: 10px 0px; margin: 0px; background-color: transparent; /* NEWVAL */ } td.h1 { /* NEWVAL*/ color: var(--main-heading-color); background-color: unset; font-family: 'Arial'; font-size: 20px; padding-bottom: 20px; margin-bottom: 40px; /*border-bottom: solid 1px #dde0ec;*/ } td.h2 { /* NEWVAL*/ color: var(--main-heading-color); background-color: unset; font-family: 'Arial'; font-size: 20px; } .gradientForward img, .gradientReverse img { width: 170px; height: auto; margin-left: 17px; } .footer .footer { position: static; } #header span.left { background: var(--main-heading-color); line-height: 24px; color: var(--main-heading-background-color); padding: 0 10px; border-radius: 20px; font-size: 12px; } table.advparent, table.advparent td, table.advparent tr { background-color: #dadce2; width: 100%; border: none; padding: 0px; margin: 0px; padding-right: 2px; min-height: 32px; } #btnHideHist { float: right; } td#dlgAdvSearchBasic { padding: 2px; } fieldset legend { background-color: var(--main-heading-color) !important; color: var(--main-background-color) !important; } .fieldlist { margin: 0px; background: transparent; padding: 0px; background-color: transparent; } .fieldlist td { text-align: left; } .fieldlist td.buttons { text-align: center; } .fieldlist .heading td { text-align: center; } /* .remove_patron { margin: 40px; padding: 20px; background: var(--main-background-color) !important; } */ .popupmenu input[type='text'] { margin: 0; /*-webkit-appearance: menulist !important;*/ /*NEW VAL*/ } .popupmenu input[type='password'] { margin: 0; } #dashboard { background: var(--main-background-color); /*margin: 40px; -webkit-box-shadow: 1px 1px 10px 0px #444; box-shadow: 1px 1px 10px 0px #444; */ } /* #dashboard h1 { padding: 0; margin: 0; border: none; }*/ #divDoorCmd td input { margin: 2px; } .locdesc { font-weight: bold; margin-top: 10px; } #divMain.desktop { /*margin: 40px; padding: 20px !important;*/ background: var(--main-background-color); } .middle { margin: 40px; padding: 20px !important; background: var(--main-background-color); } hr { border: none; -webkit-margin-before: 0.5em; -webkit-margin-after: 0.5em; -webkit-margin-start: auto; -webkit-margin-end: auto; } .treeview { width: 100%; } .popupbutton:not([popupdisabled="1"]) { margin-top: 7px; margin-right: 7px; } .rpt_mgr_treenode a img { margin-right: 10px; margin-top: 5px; margin-bottom: -3px; } /* #divPhotoUpload, #divPhotoView{ margin: 40px; padding: 20px !important; background: #fff; } */ #notification_results .mobileButton:not(#ie8orless) { filter: none; margin-top: 10px; margin-right: 10px; } .subframe img { padding: 10px; box-sizing: border-box; } .tabcontent .subframe img { padding: 0px; box-sizing: border-box; } .footer .footer { position: static; } #header span.left { background: var(--main-heading-color); line-height: 24px; color: var(--main-background-color); padding: 0 10px; border-radius: 20px; font-size: large; } tr.heading input[type='button'] { height: 35px; min-width: 60px; margin: 0px; } .fieldlist2 { background: var(--main-background-color); } tr.row1, tr.row1>td { padding: 7px 2px 7px 5px; text-align: left; } tr.row2, tr.row2>td { padding: 7px 2px 7px 5px; text-align: left; } #divPhotoReview { /* margin: 40px; */ /* padding: 20px; */ /* background: #fff; */ /* overflow: hidden; */ } #tabMain { width: auto !important; /* float:left; */ } .advsearch input[type='text'], input[type='password'] { margin: 0; } #wndAssignment { margin: 40px; padding: 20px; background: var(--main-background-color); } /* #divStartup { margin: 40px; padding: 20px; background: #fff; } */ #wndDetail { margin: 40px; padding: 20px; background: var(--main-background-color); } #rpt_mgr_promptwindow input[type='button'] { margin-top: 10px !important; margin-left: 10px !important; } #wndAssignment .main_con { min-width: auto; } #frmAccessAssign .fieldlist { margin: 0px auto; } .tableHeader a { color: var(--main-background-color) !important; } .tableHeader sub { background: #191c25; padding: 3px 7px; border-radius: 180px; vertical-align: text-bottom; } /* #caldiv0{ top: 405px !important;} #caldiv1{ top: 455px !important;} #caldiv2{ top: 515px !important;} Calendar*/ .dialogContent h2 { padding-bottom: 0px !important; margin-bottom: 15px !important; border-bottom: none !important; } /* Priv Editor Overrides */ #wndPrivs tr.heading input[type='button'] { height: 22px; width: 22px; min-width: unset; } #wndPrivs tr.heading { line-height: unset; } /*#wndPrivs input[type='text'], input[type='password'] , select { margin: 7px 0px !important;}*/ /* End Priv Editor Overrides */ /* MAPPING overrides */ #legendContainer #legend { /* position: static; NEWVAL*/ } #legendContainer .main_con { margin: 0px; padding: 0px; background: var(--main-background-color); min-width: 10px; } /*#legendContainer input[type='button'] { width: 100% !important; }*/ /* End MAPPING overrides */ #divmain { width: auto !important; } .search-tool .popupbutton { margin-top: 0px; margin-right: 0px; padding-top: 10px; } /*#tEditMediaVals input[type='text'],input[type='password'] { margin:0 0 0 10px;} */ .ui-dialog { width: 786px } /* adv search */ #divAdvText { /*width: 310px !important;*/ width: 100%; display: contents; } table.advsearch select, table.advsearch input[type='text'] { /* width: 255px !important; */ margin: 0 3px 5px 0px !important; float: left !important; } .advcriteria select { margin-left: 0px !important; margin-bottom: 0px; margin-top: 0px; } table.advsearch td.fieldname { width: 90px !important; } input.advsearch2a { width: 90px !important; float: left !important; margin: 0 3px 10px 0px !important; } input.advsearch2b { width: 90px !important; float: left !important; margin: 0 3px 10px 0px !important; } #crAdvSvcPlan { float: left !important; width: 120px !important; } #mnuAdvSvcPlan { float: unset !important; } td.cmdbutton { width: 30px !important; } .cmdbutton input { width: 23px !important; height: 23px; margin-bottom: 8px; padding: 0; } #frmAccessAssign .main_con { margin: 0px; padding: 0px; } .patronGroupParam__value textarea { height: 45px; max-width: 500px; } .patronGroupParam__btnSave { margin: 0px !important; } #Report_Lifetime { width: 80px !important; } td.ARfieldname { direction: rtl; font-weight: bold; padding: 7px 0; /* NEWVAL */ font-size: larger; white-space: nowrap; text-align: right; padding-right: 30px; padding-left: 0px; } .ui-corner-all { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border-bottom-left-radius: 0px !important; -webkit-border-radius: 0px !important; border-radius: 0px !important; } .TileBox { border-radius: 0px; /* NEWVAL */ background-color: var(--tilebox-backbround-color); /*border: solid 1px #888; */ margin: 4px; padding: 0px; /*width: 300px; */ display: inline-block; font-size: 14px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); position: relative; /*Added for Reader Status Filter Tiles */ vertical-align: top; min-width: 250px; max-width: 350px; /*width: 30%;*/ align-self: stretch; } .TileBoxSingle { border-radius: 0px; /* NEWVAL */ background-color: var(--tilebox-backbround-color); border: solid 1px #888; margin: 4px; padding: 0px; width: 90%; display: inline-block; font-size: 14px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); } .TileBoxSingle img { vertical-align: top; height: 20px; } .TileHeader { color: var(--main-heading-color); background-color: var(--main-heading-background-color); /*display: flex; */ padding: 5px; font-size: larger; text-align: left; width: auto; } .TileBody { background-color: var(--main-background-color); font-size: 36px; color: var(--main-text-color); width: auto; display: block; text-align: center; } .TileBodyPart { background-color: var(--main-background-color); font-size: 20px; color: var(--main-text-color); width: calc(100% - 6px); width: -webkit-fill-available; /* was auto */ display: inline-block; text-align: center; padding: 3px; padding-right: 30px; } .TileBodyPartNoClose { background-color: var(--main-background-color); font-size: 20px; color: var(--main-text-color); width: calc(100% - 6px); width: -webkit-fill-available; /* was auto */ display: inline-block; text-align: center; padding: 3px; } .TileFooter { color: var(--main-text-color); display: flex; padding: 5px; font-size: smaller; width: auto; display: block; text-align: right; } .TileFooterCenter { color: var(--main-text-color); display: flex; padding: 5px; font-size: smaller; width: auto; display: block; text-align: center; } .TileHolder { display: block; } .RemoveTile { /*background-color: #ff000085; */ position: absolute; top: -1px; right: -1px; padding: 0px 0px; font-style: oblique; color: var(--main-background-color); } .ChartBox { border-radius: 0px; /* NEWVAL */ background-color: var(--main-background-color); border: solid 1px #888; margin: 4px; padding: 0px; /*width: 300px; */ display: inline-block; font-size: 14px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); position: relative; /*Added for Reader Status Filter Tiles */ vertical-align: top; min-width: 350px; max-width: 600px; width: calc(80% - 10px); } .rdrStatusFilter { font-size: 25px; text-align: left; padding: 3px; padding-right: 25px; } .MyAccess { position: relative; padding: 1px 5px 1px 5px; margin: 5px 0px 10px 0px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: lightblue; text-align: center; } .MyGroupAccess { position: relative; padding: 1px 5px 1px 5px; margin: 5px 0px 10px 0px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: oldlace; text-align: center; } .PatronGroup { position: relative; padding: 1px 5px 1px 5px; margin: 5px 0px 10px 0px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: oldlace; text-align: center; } .AccessDef { position: relative; width: calc(100% - 30px); max-width: 340px; display: inline-table; padding: 10px; margin: 5px 5px 10px 5px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: #d3d3d385; text-align: left; } .AccessDefNOT { position: relative; width: calc(100% - 30px); max-width: 340px; display: inline-table; padding: 10px; margin: 5px 5px 10px 5px; -webkit-box-shadow: inset 10px 10px 20px 0px #ff00002e; -moz-box-shadow: inset 10px 10px 20px 0px #ff00002e; box-shadow: inset 10px 10px 20px 0px #ff00002e; background-color: #d3d3d385; text-align: left; /*text-decoration:line-through;*/ } .AccessDef h3, .AccessDefNOT h3, .RecentTranSuccess h3, .RecentTranFail h3 { margin: 0px 0px 10px 20px; } .NotActive { background-color: #ff000085; position: absolute; top: 0px; right: 0px; padding: 7px; font-style: oblique; color: white; } .RecentTranSuccess { position: relative; width: calc(100% - 30px); max-width: 340px; display: inline-table; padding: 10px; margin: 5px 5px 10px 5px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: #8fbc8f85; text-align: left; } .RecentTranFail { position: relative; width: calc(100% - 30px); max-width: 350px; display: inline-table; padding: 10px; margin: 5px 5px 10px 5px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: #ffb6c185; text-align: left; } .RecentAccessTrans, .RecentSVCTrans { position: relative; padding: 1px 5px 1px 5px; margin: 5px 0px 10px 0px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: lightgrey; text-align: center; } .RecentSVCTransError h3 { color: red; text-align: center; } .mobile, .mobile h1, .mobile h2, .mobile h3, .mobile h4 { text-align: center; } #wndAdvSearch, #wndAdvHistory { min-height: 32px; min-width: 300px; /*width: calc(100% - 29px); max-width: 600px;*/ } #wndAdvSearch.mobile, #wndAdvHistory.mobile { text-align: left; } table.MediaEditor, table.GroupEditor { position: relative; top: 0px; } .MediaEditor tr, .GroupEditor tr, .editwnd tr { /*height: 35px;*/ /*line-height: 35px;*/ } .MediaEditor td, .GroupEditor td, .editwnd td { /* height: 35px; line-height: 35px; white-space: nowrap; /*overflow: hidden !important; text-overflow: ellipsis !important; max-width: calc(50% - 40px); width: calc(20%);*/ } span#sMediaDelete, span#sGrpDelete, span#sNoteDelete { text-align: center; /*top: 4px; */ /*position: relative;*/ } .MediaEditorDelete, .GroupEditorDelete, .NoteEditorDelete { width: 25px; text-align: center !important; } .EditorDesc { white-space: nowrap; /* width: 100%; */ max-width: 100px; overflow: hidden; text-overflow: ellipsis; } .sec_label { color: var(--main-heading-color); white-space: nowrap; line-height: unset !important; height: unset !important; } #table_NewNotificationPrefs td { vertical-align: middle; } .PatronNoteView, .PatronNoteView td, .PatronNoteView tr { padding-top: 0px; padding-bottom: 0px; padding-left: 40px; margin: 0px; } td.PatronNoteDetail { padding-left: 40px; padding-bottom: 20px; white-space: normal; height: initial; line-height: initial; } .BorderMe, .BorderMeHeader { width: calc(100% - 10px); max-width: 370px; -webkit-box-shadow: var(--main-box-tile-shadow); -moz-box-shadow: var(--main-box-tile-shadow); box-shadow: var(--main-box-tile-shadow); background-color: #00000012; margin: 2px 0px; display: inline-block; vertical-align: top; } @media only screen and (min-width: 800px) { .BorderMeHeader { max-width: 704px; } } .BorderMeApproved { width: calc(100% - 10px); /*max-width: 400px;*/ -webkit-box-shadow: 1px 1px 5px 0px #8891A0; -moz-box-shadow: 1px 1px 5px 0px #8891A0; box-shadow: 1px 1px 5px 0px #8891A0; background-color: #00800012; margin: 2px 0px; } .BorderMeDenied { width: calc(100% - 10px); /*max-width: 400px;*/ -webkit-box-shadow: 1px 1px 5px 0px #8891A0; -moz-box-shadow: 1px 1px 5px 0px #8891A0; box-shadow: 1px 1px 5px 0px #8891A0; background-color: #ff111712; margin: 2px 0px; } .BorderMe td, .BorderMeApproved td, .BorderMeDenied td { padding-left: 5px; padding-right: 5px; padding-bottom: 0px; } /* td.BorderMe, td.BorderMeApproved, td.BorderMeDenied { padding-left: 5px; padding-right: 5px; padding-bottom: 0px; } */ .SubTableDetail { /*left: 30px; position: relative;*/ width: calc(100% - 30px); white-space: nowrap; /*max-width: 100px; */ overflow: hidden; text-overflow: ellipsis; } td.SubTableDetail { padding-left: 30px; /*position: relative; width: 100px;*/ white-space: nowrap; /* max-width: 100px; */ overflow: hidden; text-overflow: ellipsis; } tr.SubTableDetail { /*background-color: #ffff0030;*/ } .SubTableDetailNotes { left: 20px; position: relative; width: calc(100% - 25px); overflow: hidden; text-overflow: ellipsis; } tr.SubTableDetailNotes { /*background-color: #ffff0030;*/ } td.SubTableDetailNotes { padding-bottom: 20px; } div#wndDigiNoteDescEdit { display: none; width: auto; position: absolute; text-align: right; border: 1px solid black; border-radius: 0px; background-color: #dadce2; padding: 10px; } #wndDigiNoteContainer>div { margin-right: 5px !important; margin-left: 0px !important; margin-top: 3px !important; margin-bottom: 3px !important; background-color: #ededed !important; max-width: 350px; padding: inherit !important; -webkit-box-shadow: 1px 1px 5px 0px #8891A0; -moz-box-shadow: 1px 1px 5px 0px #8891A0; box-shadow: 1px 1px 5px 0px #8891A0; } .CsgWebMobile .checkbox label~span.name { float: unset !important; } body.CsgWebMobile { min-width: unset; } li.popmenu:last-child input { border-radius: 0px !important; } .CsgWebMobile li.popmenu { background: aliceblue !important; } div.m_popupbutton { background-color: transparent !important; cursor: pointer; } div.m_popupinput { /*right: unset !important; */ } .CsgWebMobile .flagList .flagRow:nth-child(odd) { background-color: transparent !important; } .CsgWebMobile .flagList .flagRow:nth-child(even) { background-color: transparent !important; } .subhead td { border-top: 1px solid #888; font-weight: 400; line-height: initial; } /* Attendance Proctor Overrides */ .eventRowButton { display: inline-block; } .listTopBar { background-color: transparent; } #divAttendeeCount { margin: 0px 0 0 5% !important; display: inline-block; } #divAtttendListButtons { display: inline-block; } #divAttendViewImageOrName { margin: 0px 0 0 5%; display: inline-grid; } div.topBarItem.mobile { width: unset !important; } #divHistorySelect.mobile>span { margin: 28px 4px 0 0 !important; } .personCard[nopicture="1"] { width: 97% !important; display: inline-grid !important; max-width: 350px; } .personCard { cursor: pointer; } a#patronCardLink.cardLink { color: black; } #effectiveDate select, #expireDate select { width: 30%; min-width: 60px; Max-width: 75px; } /* END Attendance */ .login span.name { width: 35%; } input#txtUserName.login, input#txtPassword.login { width: 65%; } /* Add New Patron */ #digitalnote_container { max-width: unset !important; } #digitalnote_container>div { display: inline-block; margin-right: 5px; margin-bottom: 3px !important; text-align: left; vertical-align: top; font-size: smaller; background-color: #ededed !important; border: 1px solid black; border-radius: 0px !important; padding: 3px; } input#chooser { color: #555; font-weight: bold !important; font-size: 14px !important; text-align: left; } input[type="file"] { line-height: inherit; color: inherit; } /* END Add New Patron */ /* Location Actions Overrides */ .mobile #comcom { border: solid 1px #ccc !important; } .responseMsgStyle { color: #555 !important; text-align: left; font-size: small; } #googleMap { width: calc(100% - 5px) !important; } /*Reader Status Desktop */ table.readerStatus td { border-width: 1px; padding: 3px; border-style: inset; border-color: white; /*white-space: nowrap;*/ max-width: calc(100vw / 10); overflow: hidden; text-overflow: ellipsis; width: auto; } /* table.fieldlist tr, table.fieldlist2 tr { /* background-color: #D9E1F2; ORIGVAL */ /* background-color: transparent; */ /* NEWVAL */ /* } */ table.fieldlist2 { font-size: smaller; } td.fieldname, td.fieldname_left, td.fieldname_flat { padding-right: 5px; font-weight: bold; padding: 7px 0; /* NEWVAL */ background-color: transparent; } td.fieldname, td.fieldname_flat { text-align: left; padding-left: 30px; background-color: transparent; white-space: unset; max-width: 250px; /* overflow: hidden;*/ /* text-overflow: ellipsis;*/ } td.fieldname_left { text-align: left; } .icon-only { height: unset; } .rotate-45 { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; } .rotate--45 { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); display: inline-block; } /* Skip content styling */ .skip-link { position: absolute; top: 0px; left: 0px; background: var(--button-background-color); color: var(--button-text-color); font-weight: 900; padding: 15px; white-space: nowrap; transform: translate(-10000px); transition: transform 0.3s; width: 100%; width: -moz-available; width: -webkit-fill-available; z-index: 5000; } .skip-link:focus { transform: translate(0%); } /* Mapping */ /*div.legendElement tr { min-width: calc(100% - 50px); }*/ /* Mobile Menu */ .menuBox { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; } .menuItem { display: inline-block; width: 130px; margin: 5px 0px; } .menuItemText { height: 35px; } /* icon Buttons using SVG images */ .iconButton { display: inline-block; height: 35px; width: 35px; margin: 2px 5px 0px 0px; background-size: contain; background-repeat: no-repeat; background-origin: content-box; cursor: pointer; border: solid 3px white; border-radius: 50px; padding: 5px; background-color: var(--button-background-color); color: var(--button-text-color); } #addButtonJRNY, [id^='addButtonJRNY'] { background-image: url(/images/themes/dark/plus.svg); background-repeat: no-repeat; } #editButtonJRNY, [id^='editButtonJRNY'] { background-image: url(/images/themes/dark/pencil-alt.svg); background-repeat: no-repeat; } #defaultButtonJRNY, [id^='defaultButtonJRNY'] { background-image: url(/images/themes/dark/done-tick.svg); background-repeat: no-repeat; } #saveButtonJRNY, [id^='saveButtonJRNY'] { background-image: url(/images/themes/dark/save.svg); background-repeat: no-repeat; } #deleteButtonJRNY, [id^='deleteButtonJRNY'] { background-image: url(/images/themes/dark/times.svg); background-repeat: no-repeat; } #searchButtonJRNY { background-image: url(/images/themes/dark/search.svg); background-repeat: no-repeat; } #cancelButtonJRNY, [id^='cancelButtonJRNY'] { background-image: url(/images/themes/dark/times.svg); background-repeat: no-repeat; /*display:none;*/ } .isDefault { background-color: green; border-color: green; cursor: unset; } /* modal Dialogs */ /* .modal-header { margin: 0; padding: 0; } */ .modal-title { width: 100%; /*border-top-left-radius: .3rem;*/ /*border-top-right-radius: .3rem;*/ } /* .modal-header .close { margin: 0; position: absolute; right: 0; } */ .warn { color: var(--jrny-red); } .invis, .innerframe { display: none; } pre { white-space: normal; } *:focus, input:focus, select:focus, button:focus { outline: 3px solid var(--jrny-focus-border-color) !important; overflow: -moz-hidden-unscrollable; }