@font-face { font-family: 'OpenSansBold'; src: url('../fonts/OpenSansBold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('../fonts/RobotoRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoBold'; src: url('../fonts/RobotoBold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoMedium'; src: url('../fonts/RobotoMedium.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoLight'; src: url('../fonts/RobotoLight.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoBlack'; src: url('../fonts/RobotoBlack.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Saira'; src: url('../fonts/SairaRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SairaBold'; src: url('../fonts/SairaBold.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { color: rgb(52, 58, 65); font-family: RobotoLight, Arial, Helvetica, sans-serif; font-size: 16px; } b { font-family: RobotoBold, Arial, Helvetica, sans-serif; font-weight: normal; } a { color: rgb(0, 126, 153); } a:hover { color: rgb(0, 189, 230); text-decoration: none; } p { line-height: 1.5; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: Saira, Arial, Helvetica, sans-serif; color: rgb(230, 107, 0); text-transform: uppercase; } button, input[type="submit"], .button, .ui-widget button { background: rgb(230, 107, 0); font-family: Saira, Arial, Helvetica, sans-serif; box-shadow: none; padding: 14px 20px 12px 20px; font-size: 18px; border: none; border-radius: 3px; } button + button, input[type="submit"] + button, .button + button, .ui-widget button + button, button + input[type="submit"], input[type="submit"] + input[type="submit"], .button + input[type="submit"], .ui-widget button + input[type="submit"], button + .button, input[type="submit"] + .button, .button + .button, .ui-widget button + .button { margin-left: 10px; } button:hover, input[type="submit"]:hover, .button:hover, .ui-widget button:hover { background-color: rgb(59, 83, 118) !important; text-shadow: none; } button.default, input[type="submit"].default, .button.default, .ui-widget button.default { background: transparent !important; border: 1px solid rgb(52, 58, 65); color: rgb(52, 58, 65); opacity: 0.3; } button.default:hover, input[type="submit"].default:hover, .button.default:hover, .ui-widget button.default:hover { opacity: 1; background-color: rgb(240, 239, 239) !important; } button i, input[type="submit"] i, .button i, .ui-widget button i { padding-right: 5px; } input:not([type="submit"]), select, textarea { padding: 10px; margin: 8px 0; display: inline-block; border: 1px solid #d8dbe6 !important; box-sizing: border-box; border-radius: 3px; color: #343a40 !important; } input:focus { background-color: #f0efef !important; border-color: #343a40 !important; box-shadow: none !important; } select:not(.ui-icon) { width: 100%; margin-bottom: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #bfbfbf; border-radius: 3px; background-image: url("../graphX/icons/chevronDownGrey.png"); background-position: right 8px center; background-repeat: no-repeat; background-size: 10px; min-width: 100px; font-size: inherit; font-family: RobotoLight, Arial, Helvetica, sans-serif; } select option { color: #7f7f7f; } select:focus { box-shadow: none !important; background-image: url("../graphX/icons/chevronDownGrey.png"); background-position: right 8px center !important; background-repeat: no-repeat; background-size: 10px !important; } input[type="text"]:not(.password), input[type="text"], input[type="tel"], input[type="email"] { width: 100%; } .accordion.ui-accordion, .userAccordion.ui-accordion { font-family: Roboto, Arial, Helvetica, sans-serif; } .accordion.ui-accordion .ui-accordion-header, .userAccordion.ui-accordion .ui-accordion-header, .accordion.ui-accordion .ui-accordion-header a, .userAccordion.ui-accordion .ui-accordion-header a { font-family: Saira, Arial, Helvetica, sans-serif; background: rgb(230, 230, 230); color: rgb(127, 127, 127); border: 1px solid #dfdfdf; margin: 5px 0 0 0; font-size: 18px; text-transform: none; } .accordion.ui-accordion .ui-accordion-header.ui-state-hover, .userAccordion.ui-accordion .ui-accordion-header.ui-state-hover, .accordion.ui-accordion .ui-accordion-header a.ui-state-hover, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-hover, .accordion.ui-accordion .ui-accordion-header.ui-state-active, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active, .accordion.ui-accordion .ui-accordion-header a.ui-state-active, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active, .accordion.ui-accordion .ui-accordion-header.ui-state-hover a, .userAccordion.ui-accordion .ui-accordion-header.ui-state-hover a, .accordion.ui-accordion .ui-accordion-header a.ui-state-hover a, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-hover a, .accordion.ui-accordion .ui-accordion-header.ui-state-active a, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active a, .accordion.ui-accordion .ui-accordion-header a.ui-state-active a, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active a { background: rgb(59, 83, 118); border-color: rgb(76, 107, 153); color: white; border-radius: 3px; } .accordion.ui-accordion .ui-accordion-header.ui-state-hover .ui-icon, .userAccordion.ui-accordion .ui-accordion-header.ui-state-hover .ui-icon, .accordion.ui-accordion .ui-accordion-header a.ui-state-hover .ui-icon, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-hover .ui-icon, .accordion.ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .accordion.ui-accordion .ui-accordion-header a.ui-state-active .ui-icon, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active .ui-icon, .accordion.ui-accordion .ui-accordion-header.ui-state-hover a .ui-icon, .userAccordion.ui-accordion .ui-accordion-header.ui-state-hover a .ui-icon, .accordion.ui-accordion .ui-accordion-header a.ui-state-hover a .ui-icon, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-hover a .ui-icon, .accordion.ui-accordion .ui-accordion-header.ui-state-active a .ui-icon, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active a .ui-icon, .accordion.ui-accordion .ui-accordion-header a.ui-state-active a .ui-icon, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active a .ui-icon { background-image: url('../graphX/icons/chevronRightWhite.png'); transition: transform 0.3s linear; } .accordion.ui-accordion .ui-accordion-header.ui-state-hover a, .userAccordion.ui-accordion .ui-accordion-header.ui-state-hover a, .accordion.ui-accordion .ui-accordion-header a.ui-state-hover a, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-hover a, .accordion.ui-accordion .ui-accordion-header.ui-state-active a, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active a, .accordion.ui-accordion .ui-accordion-header a.ui-state-active a, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active a { border-color: transparent; } .accordion.ui-accordion .ui-accordion-header.ui-state-active, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active, .accordion.ui-accordion .ui-accordion-header a.ui-state-active, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active { background-color: rgb(59, 83, 118); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion.ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .userAccordion.ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .accordion.ui-accordion .ui-accordion-header a.ui-state-active .ui-icon, .userAccordion.ui-accordion .ui-accordion-header a.ui-state-active .ui-icon { transform: rotate(90deg); } .accordion.ui-accordion .ui-accordion-header .ui-icon, .userAccordion.ui-accordion .ui-accordion-header .ui-icon, .accordion.ui-accordion .ui-accordion-header a .ui-icon, .userAccordion.ui-accordion .ui-accordion-header a .ui-icon { background-image: url('../graphX/icons/chevronRightGrey.png'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.3s linear; height: 10px; width: 10px; margin-right: 7px; } .accordion.ui-accordion .ui-accordion-header a, .userAccordion.ui-accordion .ui-accordion-header a { border-color: transparent; } .accordion.ui-accordion .ui-widget-content, .userAccordion.ui-accordion .ui-widget-content { background-color: #f5f5f5; color: rgb(52, 58, 65); border-top: none; border-color: #dfdfdf; font-family: RobotoLight, Arial, Helvetica, sans-serif; font-size: 16px; } .accordion.ui-accordion .ui-widget-content a, .userAccordion.ui-accordion .ui-widget-content a { font-family: Roboto, Arial, Helvetica, sans-serif; color: rgb(0, 126, 153); } .accordion.ui-accordion .ui-widget-content a:hover, .userAccordion.ui-accordion .ui-widget-content a:hover { color: rgb(0, 189, 230); } .accordion.ui-accordion .ui-widget-content a:before, .userAccordion.ui-accordion .ui-widget-content a:before { content: "\f101"; font-family: "Font Awesome 5 Free"; font-weight: 900; } .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header { font-family: Saira, Arial, Helvetica, sans-serif; background: #dfdfdf; color: rgb(127, 127, 127); border: 1px solid #cfcfcf; margin: 5px 0 0 0; font-size: 18px; } .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-hover, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-hover, .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active, .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active a, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active a { background: rgb(59, 83, 118); border-color: rgb(76, 107, 153); color: white; border-radius: 3px; } .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-hover .ui-icon, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-hover .ui-icon, .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active a .ui-icon, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active a .ui-icon { background-image: url('../graphX/icons/chevronRightWhite.png'); transition: transform 0.3s linear; } .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active .ui-icon, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-accordion-header.ui-state-active .ui-icon { transform: rotate(90deg); } .accordion.ui-accordion .ui-widget-content .ui-accordion .ui-widget-content, .userAccordion.ui-accordion .ui-widget-content .ui-accordion .ui-widget-content { background-color: white; } .tabSystem { margin-bottom: 50px; margin-top: 40px; font-family: RobotoLight, Arial, Helvetica, sans-serif; } .tabSystem ol { position: relative; } .tabSystem ol li { font-family: Saira, Arial, Helvetica, sans-serif; border: 1px solid #bfbfbf !important; text-align: center !important; font-weight: bold; font-size: 18px !important; background: rgb(230, 230, 230) !important; color: rgb(127, 127, 127) !important; border-bottom: none; padding: 10px !important; margin-right: 3px; } .tabSystem ol li:last-of-type { margin-right: 0 !important; } .tabSystem ol li.active, .tabSystem ol li:hover { background-color: rgb(59, 83, 118) !important; border-color: rgb(76, 107, 153) !important; color: white !important; } .tabSystem ol li.active { border-bottom: none !important; } .tabSystem ol > li { border-radius: 3px 3px 0 0 !important; } .tabSystem ol:after { position: absolute; content: ""; height: 1px; width: 100%; bottom: 0; background-color: rgb(59, 83, 118); } .tabSystem > div { background-color: #f5f5f5 !important; border: 1px solid #dfdfdf !important; padding: 0 !important; border-top: transparent !important; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } header { top: 0; font-size: 16px; background: rgb(230, 230, 230); text-align: center; height: 50px; color: rgb(127, 127, 127); font-family: Roboto, Arial, Helvetica, sans-serif; padding: 5px 0; z-index: 1; position: relative; } header a { color: rgb(230, 107, 0); text-decoration: none; } header a:hover { color: rgb(255, 133, 25) !important; text-decoration: none; } header .orangeBar { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background-color: rgb(230, 107, 0); } header #loginHtml { display: none; } header .maxWidth1400 { max-width: 1400px; width: 100%; margin: auto; text-align: left; position: relative; } header .maxWidth1400 > * { position: absolute; } header .maxWidth1400 > *.homeLink { display: inline-block; margin-top: 7px; margin-left: 15px; } header .maxWidth1400 > *.breadcrumbs { top: 12px; left: 65px; width: 100%; line-height: 1.3em; max-width: calc(100% - 600px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { header .maxWidth1400 > *.breadcrumbs { width: 100vw; max-width: none; top: 55px; left: 0; padding-left: 25px; padding-bottom: 8px; border-bottom: 1px solid lightgrey; font-size: 14px; } } header .maxWidth1400 > *.time { top: 10px; right: 400px; display: flex; align-items: center; } header .maxWidth1400 > *.time img { float: right; margin-right: 8px; height: 24px; width: auto; margin-top: -2px; } header .maxWidth1400 > *.userName { top: 6px; right: 10px; margin: 0; } header .maxWidth1400 > *.userName.loggedIn { top: 10px; max-width: 340px; text-align: right; padding-top: 3px; } header .maxWidth1400 > *.userName.loggedIn .adminDivider { display: inline-block; margin: 0 4px 0 6px; } header .maxWidth1400 > *.userName.loggedIn img[src*="user"] { float: left; margin-top: -3px; margin-right: 10px; height: 20px; width: auto; } header .maxWidth1400 > *.userName.loggedIn a[href="?logOut=1"] { margin-left: 50px; margin-top: -3px; float: right; } header .maxWidth1400 > *.userName.loggedIn a[href="?logOut=1"] img { height: 23px; width: auto; } header .maxWidth1400 > *.userName button { background: white; border-radius: 0; border: none; margin-left: 5px; box-shadow: none; text-align: left; padding: 5px 145px 5px 8px; color: inherit; } #contentWrapper { max-width: 1400px; margin-left: auto; margin-right: auto; min-height: calc(100% - 165px); padding-top: 50px; position: relative; font-size: 20px; } #contentWrapper > .content { min-height: 500px; overflow: auto; background-color: white; padding: 0 15px; } #contentWrapper > .content ul { list-style-type: disc; padding-left: 15px; } #contentWrapper > .content #breadCrumbs { position: absolute; top: 15px; left: 0; } #contentWrapper > .content .headline { text-align: center; position: relative; } @media (max-width: 1199px) { #contentWrapper > .content .headline:not(.centered) { text-align: left; } } #contentWrapper > .content .headline h1, #contentWrapper > .content .headline h2, #contentWrapper > .content .headline h3, #contentWrapper > .content .headline h4, #contentWrapper > .content .headline h5, #contentWrapper > .content .headline h6 { max-width: 750px; margin: auto; } @media (max-width: 1199px) { #contentWrapper > .content .headline h1, #contentWrapper > .content .headline h2, #contentWrapper > .content .headline h3, #contentWrapper > .content .headline h4, #contentWrapper > .content .headline h5, #contentWrapper > .content .headline h6 { max-width: 100%; } } @media (max-width: 400px) { #contentWrapper > .content .headline h1, #contentWrapper > .content .headline h2, #contentWrapper > .content .headline h3, #contentWrapper > .content .headline h4, #contentWrapper > .content .headline h5, #contentWrapper > .content .headline h6 { font-size: 25px; } } #contentWrapper > .content .headline .buttonLine { position: absolute; width: 100%; top: 0; } #contentWrapper > .content .headline .buttonLine .button { position: absolute; } #contentWrapper > .content .headline .buttonLine .button .back { top: 0; left: 0; max-width: 350px; } @media (max-width: 1199px) { #contentWrapper > .content .headline .buttonLine .button { display: none; } } #contentWrapper > .content .headline .buttonLine .button:not(.back) { top: 0; right: 0; } @media (max-width: 960px) { #contentWrapper > .content .headline .buttonLine { position: relative; margin: 15px 0; } } #contentWrapper > .content .headline .buttonLine button, #contentWrapper > .content .headline .buttonLine .button, #contentWrapper > .content .headline .buttonLine .buttonGroup { position: absolute; top: 0; left: 0; } @media (max-width: 960px) { #contentWrapper > .content .headline .buttonLine button, #contentWrapper > .content .headline .buttonLine .button, #contentWrapper > .content .headline .buttonLine .buttonGroup { width: 100%; } } footer { z-index: 1; } footer a[href="admin"] { display: none; left: -86px; position: fixed; top: 40%; transform: rotate(270deg); width: 200px !important; } div.modalLayer { background-color: rgba(52, 58, 65, 0.85); height: 100%; position: fixed; text-align: center; width: 100%; z-index: 999; overflow-x: hidden; overflow-y: auto; top: 0; left: 0; } div.modalLayer.ajaxPageLoading { background: rgba(255, 255, 255, 0.75); transition: opacity 5s ease-in; opacity: 0; } div.modalLayer.ajaxPageLoading.fadeOut { transition: opacity 0.5s ease-out; } div.modalLayer.ajaxPageLoading img { margin-top: calc(50% - 99px); filter: invert(1); } div.modalLayer .confirm img.closeButton.closeModal { height: 25px; position: absolute; right: 10px; top: 10px; cursor: pointer; opacity: 0.25; } div.modalLayer div.confirm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #f5f5f5; padding: 50px; animation: zoomIn 0.2s 1 linear; border-radius: 3px; } @media (max-width: 1200px) { div.modalLayer div.confirm { width: 80%; } } @media (max-width: 470px) { div.modalLayer div.confirm { padding: 10px; } } div.modalLayer div.confirm > div { max-height: none; overflow-y: auto; } div.modalLayer div.confirm > div form label { display: block; text-align: left; font-family: RobotoBold, Arial, Helvetica, sans-serif; opacity: 0.8; } div.modalLayer div.confirm > div form input { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid rgb(216, 219, 230); box-sizing: border-box; border-radius: 3px; color: rgb(52, 58, 65); } div.modalLayer div.confirm > div form input:focus { background-color: rgb(240, 239, 239); border-color: rgb(52, 58, 65); } div.modalLayer div.confirm > div form label + input { margin-bottom: 30px; } div.modalLayer div.confirm > div form .modalHeader { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: center; padding: 1rem 1rem; margin-bottom: 20px; color: rgb(230, 107, 0); font-family: Saira, Arial, Helvetica, sans-serif; text-transform: uppercase; } div.modalLayer div.confirm > div form .modalContent { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; } div.modalLayer div.confirm > div form .modalButtons { margin: 0 0 30px 0; display: flex; justify-content: space-between; } @media (max-width: 470px) { div.modalLayer div.confirm > div form .modalButtons { display: block; margin: 0 0 40px 0; } } div.modalLayer div.confirm > div form .modalButtons button { flex-grow: 1; margin: 0 3px !important; background-color: rgb(230, 107, 0); } @media (max-width: 470px) { div.modalLayer div.confirm > div form .modalButtons button { margin: 4px 3px !important; width: 100%; } } div.modalLayer div.confirm > div form .modalFooter { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: center; padding: 1rem; background-color: rgb(240, 239, 239); border-top: 1px solid rgb(216, 219, 230); position: absolute; left: 0; bottom: 0; border-radius: 0 0 3px 3px; } .messageContainer tbody tr td .messageBox { box-shadow: none !important; } table.invisible { visibility: visible !important; } table.invisible tr { background: none !important; } table.invisibleBackground > tbody > tr:nth-child(even) { background-color: transparent; } table:not(.invisibleBackground) > tbody > tr:nth-child(even) { background-color: transparent; } @media (max-width: 576px) { header .maxWidth1400 > .userName.loggedIn a[href="?logOut=1"] { margin-left: 5px; } header .maxWidth1400 > .time { display: none; } }