/* DOR web application standard styles. This should be included in the element of JSPs AFTER bootstrap.min.css */ @font-face{ font-family: 'Source Sans Pro'; font-weight: 400; font-style: normal; font-stretch: normal; src: url('../../fonts/source-sans-pro/WOFF2/TTF/SourceSansPro-Regular.ttf.woff2') format('woff2'), url('../../fonts/source-sans-pro/WOFF/OTF/SourceSansPro-Regular.otf.woff') format('woff'), url('../../fonts/source-sans-pro/OTF/SourceSansPro-Regular.otf') format('opentype'), url('../../fonts/source-sans-pro/TTF/SourceSansPro-Regular.ttf') format('truetype'); } a { color: #0069BF; } .fa-ul li { color: #003865; /* Minnesota Blue*/ } html { position: relative; min-height: 100%; } body { font-size: 16px; /* 12 pt */ font-size: 1rem; /* font-family: Calibri, Arial, Helvetica, sans-serif; */ font-family: "Open Sans", Calibri, Helvetica, sans-serif; margin-bottom: 86px; /* Margin bottom by footer height */ line-height: 1.42857143; } /* Slightly different font families for headings. */ h1, h2, h3, h4, h5, h6, button, btn { font-family: "Source Sans Pro", "Calibri Bold", Helvetica, sans-serif; } p { margin-bottom: 10px; padding-right: 15px; /* So not too close to edge on narrow displays. */ } body, p, span, div { color: #000000; } /* Underline hyperlinks */ a { text-decoration: underline; } h1 { font-size: 32px; /* 24 pt */ font-size: 2rem; font-weight: bold; /* Need to add left-margin since moved out of
*/ margin-left: 15px; } h2 { font-size: 24px; /* 18 pt */ font-size: 1.5rem; font-weight: bold; } h3 { font-size: 21.3333px; /* 16 pt */ font-size: 1.3333rem; font-weight: bold; } h4 { font-size: 18.6667px; /* 14 pt */ font-size: 1.1667rem; font-weight: bold; } h5, h6 { font-size: 18.6667px; /* 14 pt */ font-size: 1.1667rem; } /* Reset from 100% default. */ .container-fluid { width: auto; } .row { margin-right: 0; /* NOTE: "unset" doesn't work in IE. */ } /* Standard Department of Revenue header with link to website. */ .header-section { /* height: 132px; */ width: unset; } #banner { background-color: #003865; /* Minnesota Blue*/ background-position: left top; background-repeat: no-repeat; height: 90px; position: relative; vertical-align: middle; width: 100%; float: left; border-bottom: 6px solid #78BE21; /* Minnesota Green */ } #logo { left: 20px; position: absolute; top: 20px; width: 350px; max-width: 80%; /* For EXTREMELY narrow windows. */ } .appTitle { margin-bottom: 0; background-color: #D9D9D6; /* Light Gray */ /*font-size: 18px;*/ /* font-size: 1.125rem; */ padding-top: 5px; padding-left: 15px; padding-right: 15px; font-weight: bold; color: #003865; /* Minnesota Blue*/ width: 100%; display: inline-block; font-size: 21.3333px; /* 16 pt */ font-size: 1.3333rem; } .footer { position: absolute; bottom: 0; width: 100%; height: 86px; /* Set the fixed height of the footer here */ background-color: #333333; /* Dark gray */ color: #FFFFFF; /* White */ text-align: center; padding-top: 10px; padding-bottom: 6px; } .footer a, .footer p { color: #FFFFFF; /* White */ } .container { width: auto; padding: 0 15px; } /* Have main with class container extend full width of surroundings. */ main.container { margin-right: -15px; margin-left: unset; margin-top: 15px; padding-right: 0; width: 200%; /* Force full width for browsers that don't recognize the below (IE) */ width: -moz-available; /* Ignored by non-Mozilla-based browswers */ width: -webkit-fill-available; /* Ignored by non-webkit-based browsers */ width: fill-available; /* Newish "standard" - ignored by all browsers? */ padding-right: 0; max-width: inherit; padding-right: 0; padding-right: 0; } .btn { /* Buttons, class="btn" */ display: inline-block; -webkit-appearance: none; -webkit-border-radius: 0; color: #495057; width: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-block-end: 1em; margin-inline-start: inherit; margin-inline-end: 1em; padding-inline-start: 20px; margin-bottom: 10px; border: 1px solid #ced4da; width: auto; font-size: 16px; /* 12 pt */ font-size: 1.0rem; font-family: "Open Sans", Calibri, Helvetica, sans-serif; } .btn:focus, .btn:hover { /* Background / highlight for hover/active button. */ border-color: #9BCBEB; /* Extended Accent Sky Blue */ -webkit-box-shadow: 0px 0px 1px 3px #9BCBEB; /* Extended Accent Sky Blue */ box-shadow: 0px 0px 1px 3px #9BCBEB; /* Extended Accent Sky Blue */ } .btn.disabled, .btn[disabled] { cursor: not-allowed; filter: alpha(opacity = 65); -webkit-box-shadow: none; box-shadow: none; opacity: .65 } .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary.disabled, .btn-primary:disabled { color: #FFFFFF; /* White */ background-color: #008EAA; /* Accent Teal */ border-color: #008EAA; /* Accent Teal */ } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary.disabled, .btn-secondary:disabled { color: #003865; /* Minnesota Blue*/ background-color: #D9D9D6; /* Light Gray */ border-color: #53565A; /* Dark Gray */ } .btn-lg { padding: 0.75rem 1.5rem; margin: 0; font-size: 21.3333px; /* 16 pt */ font-size: 1.3333rem; font-weight: bold; } .btn-md { padding: 0.625rem 1.25rem; margin: 0; font-size: 18.6667px; /* 14 pt */ font-size: 1.1667rem; font-weight: bold; } .btn-sm { padding: 0.25rem 0.5rem; margin: 0; font-size: 16px; /* 12 pt */ font-size: 1.0rem; font-weight: bold; } .btn-xs { padding: 0.25rem 0.5rem; margin: 0; font-size: 13.333px; /* 10 pt */ font-size: 0.8333rem; font-weight: bold; } /* Modal Header */ .modal-header { border: 1px solid #D9D9D6; /* Light Gray */ border-radius: 4px; background-color: #003865; /* Minnesota Blue*/ color: #FFFFFF; /* White */ } /* Close button for modal dialogs */ .close span, .close span:hover { color: white; } /* Modal dialog title formatting */ h3.modal-title { font-size: 24px; /* 18 pt */ font-size: 1.5rem; } /* Modal dialog footer button hover / focus color. */ .modal-footer .btn:focus, .modal-footer .btn:hover { color: #FFFFFF; /* White */ } /* Modal dialog footer secondary button hover / focus color. */ .modal-footer .btn-secondary:focus, .modal-footer .btn-secondary:hover { color: #003865; /* Minnesota Blue*/ } /* Warning dialog header background color */ .warning-modal .modal-header { background-color: #A6192E; /* Red */ } /* Main body of modal dialog, between title and buttons. */ .modal-body { font-size: 18.6667px /* 14 pt */ font-size: 1.1667rem max-height: calc(100vh - 200px); max-width: 100vw; overflow-y: auto; } /* Dotted outline on keyboard focus. */ a:focus { outline: 2px dotted #53565A; /* Dark Gray */ outline-offset: 3px; } /* Blocks of code. */ code { color: #003865; /* Minnesota Blue*/ font-family: "Courier New", courier, monospace; } .maxwidth { /* Constrain containers with this class to a width of 1024 pixels, centered on the page. */ max-width: 1024px; margin: 0 auto; } .appTitle span { vertical-align: bottom; color: #003865; /* Minnesota Blue*/ font-family: "Source Sans Pro", "Calibri Bold", Helvetica, sans-serif; font-size: 21.3333px; /* 16 pt */ font-size: 1.3333rem; } .appTitle button { /* Tweak style for single button within appTitle div, for apps with logout button but no top navbar. */ float: right; font-size: 16px; font-size: 1rem; } .noshow { /* Apply class to items that should not be displayed. */ display: none; } .appTitle h1 { /* Placement of h1 [app title] within div. */ float: left; } .appTitle ul.nav.nav-pills { /* Placement of dropdown menu within div. */ float: right; font-family: "Source Sans Pro", "Calibri Bold", Helvetica, sans-serif; } .appTitle h1, .appTitle.h1 { /* Remove bottom margin from h1 with class "appTitle" */ margin-bottom: 0; font-weight: bold; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { /* Standard colors for drop-down items. */ color: #003865; /* Minnesota Blue*/ background-color: transparent; } .dropdown-item:focus, .dropdown-item:hover { /* Standard colors for drop-down items on hover. */ color: #003865; /* Minnesota Blue*/ background-color: #9BCBEB; /* Extended Accent Sky Blue */ } /* Branding fonts and colors for drop-down menu items from user profile icon. */ .dropdown-item, .dropdown-item.active, .dropdown-item:active { color: #003865; /* Minnesota Blue*/ border-color: #D9D9D6; /* Light Gray */ text-decoration: none; /* No underline except for hover state. */ } .link-elem-nav { font-family: "Source Sans Pro", "Calibri Bold", Helvetica, sans-serif; font-size: 24px; /* 18 pt */ font-size: 1.5rem; font-weight: bold; cursor: pointer; } .link-elem-lg { font-size: 21.3333px !important; /* 16 pt */ font-size: 1.3333rem !important; font-weight: bold; cursor: pointer; } .link-elem-md { font-size: 18.6667px !important; /* 14 pt */ font-size: 1.1667rem !important; font-weight: bold; cursor: pointer; } .link-elem-sm { font-size: 16px !important; /* 12 pt */ font-size: 1.0rem !important; font-weight: bold; cursor: pointer; } a.link-elem-lg, a.link-elem-lg:focus, a.link-elem-lg:hover, a.link-elem-md, a.link-elem-md:focus, a.link-elem-md:hover, a.link-elem-sm, a.link-elem-sm:focus, a.link-elem-sm:hover { color: #003865; /* Minnesota Blue*/ } a.link-elem { text-decoration: underline !important; color: #0069BF !important; } /* a.link-elem:visited { color: #8B3B8C !important; } */ .form-group.required label:after, .required-asterisk:after { /* Labels for required inputs and text explaining meaning of asterisk. */ content: " *"; color: #A6192E; /* Red */ } .requiredDateFieldLabel::after { /* Labels for required inputs and text explaining meaning of asterisk. */ content: " *"; color: #A6192E; /* Red */ } .emphasized { font-weight: bold; } #testRegionLabel { /* "TEST REGION" label div, displayed to right of Minnesota Department of Revenue logo in test regions. */ display: block; float: right; font-weight: bold; color: #FFFFFF; font-size: 21.3333px; /* 16 pt */ font-size: 1.3333rem; left: 390px; /* Move to right of DOR logo. */ position: absolute; top: 40px; text-align: center; margin-right: 15px; width: calc(100% - 390px); /* 100% window less space for logo to left */ } #loadingbg { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.3; filter: Alpha(Opacity = 30); background-image: url("../images/transparent_bg.png"); z-index: 2000; } #loadingblock { display: none; z-index: 2001; border-style: solid; border-width: 1px; padding: 15px; background: white; } /* Show error messages */ .help-inline { color: #A6192E; background-image: url("red-alert-button.svg"); padding-left: calc(1.5em + .75rem); background-repeat: no-repeat; background-position: left calc(.375em + .1875rem) center; background-size: 18px 18px; font-weight: bold; } .hide { display: none !important; } .show { display: block !important; } .col-form-label { font-size: 16px; /* 12 pt */ font-size: 1rem; } .mouse-pointer { cursor: pointer; } .folder-bread-crumb { font-family: "Open Sans", Calibri, Helvetica, sans-serif; font-size: 18.6667px; /* 14 pt */ font-size: 1.1667rem; font-weight: bold; } .nodecoration { text-decoration: none; } textarea.overflow100px { overflow-y: scroll; height: 100px; resize: none; } /* For labeled, uneditable plain text placed in a text input with class "displayOnly" */ input[readonly].displayOnly, textarea[readonly].displayOnly, input[readonly].displayOnly:focus, textarea[readonly].displayOnly:focus { border: none; background-color: transparent; box-shadow: none; resize: none; outline: none; /* Override Chrome default user agent */ } /* Format for displaying message text. */ .message-txt-cell-style { max-height: 40px; overflow-y: scroll; } .btn-light { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #f8f9fa */ border: 1px solid #ced4da; /*# PBI-10426;*/ } .btn-light:hover { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #e2e6ea */ border: 1px solid #ced4da; /*# PBI-10426;*/ } .btn-light.focus, .btn-light:focus { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #e2e6ea */ border: 1px solid #ced4da; /*# PBI-10426;*/ box-shadow: 0 0 0 .2rem rgba(216, 217, 219, .5) } .btn-light.disabled, .btn-light:disabled { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #f8f9fa */ border: 1px solid #ced4da; /*# PBI-10426;*/ } .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #dae0e5 */ border: 1px solid #ced4da; /*# PBI-10426; */ } .btn-outline-light:hover { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #f8f9fa */ border: 1px solid #ced4da; /*# PBI-10426; */ } .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle { color: #495057 !important; /*# PBI-10426; was #212529 */ background-color: #ffffff; /*# PBI-10426; was #f8f9fa */ border: 1px solid #ced4da; /*# PBI-10426; */ } .hiddenOther { margin-left: 10px; } .tblSpan { padding-top: 1px; } .bright-red-txt { color: #A6192E; }