.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } [data-bs-theme="dark"] { color-scheme: dark; --bs-body-bg: #1a1d20; --bs-dark-bg-subtle: #14171C; --bs-btn-bg: #0A6CC4 !important; --bs-body-color: #C5CCD6; --bs-pagination-color: #5BB0FF !important; --link: #E6C06A; --link-hover: #F4D793; --action-text: #1A1D20; --action-active: #CDA348; --ajax-track: #14171C; --ajax-accent: #0083ff; } [data-load="ajax-processor"] { display: none; } a, span[data-role='ajax-nav'] { color: #5BB0FF; text-decoration: none; } a:hover, span[data-role='ajax-nav']:hover { text-decoration: underline; } body { font-size: 16px; font-family: proxima-nova; background-color: var(--bs-body-bg); } button:disabled { cursor: not-allowed; } .initial-load { animation: body-build 1s ease-in-out; transition: all 1s ease-in-out; background-color: var(--bs-body-bg); } h1, h2, h3, h4, h5, h6 { font-family: myriad-pro; } .duckyeah-land * { display: inline-block; } .duckyeah-land h1 { font-family: "ccbiffbamboom", sans-serif; font-size: 64px; -webkit-text-stroke: 3px black; color: #FFF71C; margin: 42px 0 15px 25%; } .duckin-duck { float: right; margin: 15px 20px 15px 20px; width: 170px; height: 201px; } .duckyeah-tln { font-family: "ccbiffbamboom", sans-serif !important; -webkit-text-stroke: 1px black; color: #FFF71C; font-size: 18px !important; } .duckyeah-description { font-size: 14px; } .splunkbase-inline-logo { height: 19px; cursor: pointer !important; } h3 { font-size: 20px; font-weight: bold; } html { position: relative; } pre { font-family: source-code-pro; } [data-role='ajax-nav'], [data-role='rote-nav'] { cursor: pointer; } [data-load='ajax'] { position: relative; min-height: 100px; min-width: 25%; } @keyframes ajax-bar { 0% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 90%, var(--ajax-accent) 100%, var(--ajax-track) 110%, var(--ajax-track)); } 2% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 86%, var(--ajax-accent) 96%, var(--ajax-track) 106%, var(--ajax-track)); } 4% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 82%, var(--ajax-accent) 92%, var(--ajax-track) 102%, var(--ajax-track)); } 6% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 78%, var(--ajax-accent) 88%, var(--ajax-track) 98%, var(--ajax-track)); } 8% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 74%, var(--ajax-accent) 84%, var(--ajax-track) 94%, var(--ajax-track)); } 10% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 70%, var(--ajax-accent) 80%, var(--ajax-track) 90%, var(--ajax-track)); } 12% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 66%, var(--ajax-accent) 76%, var(--ajax-track) 86%, var(--ajax-track)); } 14% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 62%, var(--ajax-accent) 72%, var(--ajax-track) 82%, var(--ajax-track)); } 16% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 58%, var(--ajax-accent) 68%, var(--ajax-track) 78%, var(--ajax-track)); } 18% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 54%, var(--ajax-accent) 64%, var(--ajax-track) 74%, var(--ajax-track)); } 20% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 50%, var(--ajax-accent) 60%, var(--ajax-track) 70%, var(--ajax-track)); } 22% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 46%, var(--ajax-accent) 56%, var(--ajax-track) 66%, var(--ajax-track)); } 24% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 42%, var(--ajax-accent) 52%, var(--ajax-track) 62%, var(--ajax-track)); } 26% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 38%, var(--ajax-accent) 48%, var(--ajax-track) 58%, var(--ajax-track)); } 28% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 34%, var(--ajax-accent) 44%, var(--ajax-track) 54%, var(--ajax-track)); } 30% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 30%, var(--ajax-accent) 40%, var(--ajax-track) 50%, var(--ajax-track)); } 32% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 26%, var(--ajax-accent) 36%, var(--ajax-track) 46%, var(--ajax-track)); } 34% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 22%, var(--ajax-accent) 32%, var(--ajax-track) 42%, var(--ajax-track)); } 36% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 18%, var(--ajax-accent) 28%, var(--ajax-track) 38%, var(--ajax-track)); } 38% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 14%, var(--ajax-accent) 24%, var(--ajax-track) 34%, var(--ajax-track)); } 40% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 10%, var(--ajax-accent) 20%, var(--ajax-track) 30%, var(--ajax-track)); } 42% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 6%, var(--ajax-accent) 16%, var(--ajax-track) 26%, var(--ajax-track)); } 44% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 2%, var(--ajax-accent) 12%, var(--ajax-track) 22%, var(--ajax-track)); } 46% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) -2%, var(--ajax-accent) 8%, var(--ajax-track) 18%, var(--ajax-track)); } 48% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) -6%, var(--ajax-accent) 4%, var(--ajax-track) 14%, var(--ajax-track)); } 50% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) -10%, var(--ajax-accent) 0%, var(--ajax-track) 10%, var(--ajax-track)); } 52% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) -6%, var(--ajax-accent) 4%, var(--ajax-track) 14%, var(--ajax-track)); } 54% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) -2%, var(--ajax-accent) 8%, var(--ajax-track) 18%, var(--ajax-track)); } 56% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 2%, var(--ajax-accent) 12%, var(--ajax-track) 22%, var(--ajax-track)); } 58% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 6%, var(--ajax-accent) 16%, var(--ajax-track) 26%, var(--ajax-track)); } 60% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 10%, var(--ajax-accent) 20%, var(--ajax-track) 30%, var(--ajax-track)); } 62% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 14%, var(--ajax-accent) 24%, var(--ajax-track) 34%, var(--ajax-track)); } 64% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 18%, var(--ajax-accent) 28%, var(--ajax-track) 38%, var(--ajax-track)); } 66% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 22%, var(--ajax-accent) 32%, var(--ajax-track) 42%, var(--ajax-track)); } 68% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 26%, var(--ajax-accent) 36%, var(--ajax-track) 46%, var(--ajax-track)); } 70% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 30%, var(--ajax-accent) 40%, var(--ajax-track) 50%, var(--ajax-track)); } 72% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 34%, var(--ajax-accent) 44%, var(--ajax-track) 54%, var(--ajax-track)); } 74% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 38%, var(--ajax-accent) 48%, var(--ajax-track) 58%, var(--ajax-track)); } 76% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 42%, var(--ajax-accent) 52%, var(--ajax-track) 62%, var(--ajax-track)); } 78% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 46%, var(--ajax-accent) 56%, var(--ajax-track) 66%, var(--ajax-track)); } 80% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 50%, var(--ajax-accent) 60%, var(--ajax-track) 70%, var(--ajax-track)); } 82% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 54%, var(--ajax-accent) 64%, var(--ajax-track) 74%, var(--ajax-track)); } 84% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 58%, var(--ajax-accent) 68%, var(--ajax-track) 78%, var(--ajax-track)); } 86% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 62%, var(--ajax-accent) 72%, var(--ajax-track) 82%, var(--ajax-track)); } 88% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 66%, var(--ajax-accent) 76%, var(--ajax-track) 86%, var(--ajax-track)); } 90% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 70%, var(--ajax-accent) 80%, var(--ajax-track) 90%, var(--ajax-track)); } 92% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 74%, var(--ajax-accent) 84%, var(--ajax-track) 94%, var(--ajax-track)); } 94% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 78%, var(--ajax-accent) 88%, var(--ajax-track) 98%, var(--ajax-track)); } 96% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 82%, var(--ajax-accent) 92%, var(--ajax-track) 102%, var(--ajax-track)); } 98% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 86%, var(--ajax-accent) 96%, var(--ajax-track) 106%, var(--ajax-track)); } 100% { background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 90%, var(--ajax-accent) 100%, var(--ajax-track) 110%, var(--ajax-track)); } } @keyframes ajax-bar-vertical { 0% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 90%, var(--ajax-accent) 100%, var(--ajax-track) 110%, var(--ajax-track)); } 2% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 86%, var(--ajax-accent) 96%, var(--ajax-track) 106%, var(--ajax-track)); } 4% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 82%, var(--ajax-accent) 92%, var(--ajax-track) 102%, var(--ajax-track)); } 6% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 78%, var(--ajax-accent) 88%, var(--ajax-track) 98%, var(--ajax-track)); } 8% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 74%, var(--ajax-accent) 84%, var(--ajax-track) 94%, var(--ajax-track)); } 10% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 70%, var(--ajax-accent) 80%, var(--ajax-track) 90%, var(--ajax-track)); } 12% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 66%, var(--ajax-accent) 76%, var(--ajax-track) 86%, var(--ajax-track)); } 14% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 62%, var(--ajax-accent) 72%, var(--ajax-track) 82%, var(--ajax-track)); } 16% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 58%, var(--ajax-accent) 68%, var(--ajax-track) 78%, var(--ajax-track)); } 18% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 54%, var(--ajax-accent) 64%, var(--ajax-track) 74%, var(--ajax-track)); } 20% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 50%, var(--ajax-accent) 60%, var(--ajax-track) 70%, var(--ajax-track)); } 22% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 46%, var(--ajax-accent) 56%, var(--ajax-track) 66%, var(--ajax-track)); } 24% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 42%, var(--ajax-accent) 52%, var(--ajax-track) 62%, var(--ajax-track)); } 26% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 38%, var(--ajax-accent) 48%, var(--ajax-track) 58%, var(--ajax-track)); } 28% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 34%, var(--ajax-accent) 44%, var(--ajax-track) 54%, var(--ajax-track)); } 30% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 30%, var(--ajax-accent) 40%, var(--ajax-track) 50%, var(--ajax-track)); } 32% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 26%, var(--ajax-accent) 36%, var(--ajax-track) 46%, var(--ajax-track)); } 34% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 22%, var(--ajax-accent) 32%, var(--ajax-track) 42%, var(--ajax-track)); } 36% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 18%, var(--ajax-accent) 28%, var(--ajax-track) 38%, var(--ajax-track)); } 38% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 14%, var(--ajax-accent) 24%, var(--ajax-track) 34%, var(--ajax-track)); } 40% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 10%, var(--ajax-accent) 20%, var(--ajax-track) 30%, var(--ajax-track)); } 42% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 6%, var(--ajax-accent) 16%, var(--ajax-track) 26%, var(--ajax-track)); } 44% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 2%, var(--ajax-accent) 12%, var(--ajax-track) 22%, var(--ajax-track)); } 46% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) -2%, var(--ajax-accent) 8%, var(--ajax-track) 18%, var(--ajax-track)); } 48% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) -6%, var(--ajax-accent) 4%, var(--ajax-track) 14%, var(--ajax-track)); } 50% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) -10%, var(--ajax-accent) 0%, var(--ajax-track) 10%, var(--ajax-track)); } 52% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) -6%, var(--ajax-accent) 4%, var(--ajax-track) 14%, var(--ajax-track)); } 54% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) -2%, var(--ajax-accent) 8%, var(--ajax-track) 18%, var(--ajax-track)); } 56% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 2%, var(--ajax-accent) 12%, var(--ajax-track) 22%, var(--ajax-track)); } 58% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 6%, var(--ajax-accent) 16%, var(--ajax-track) 26%, var(--ajax-track)); } 60% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 10%, var(--ajax-accent) 20%, var(--ajax-track) 30%, var(--ajax-track)); } 62% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 14%, var(--ajax-accent) 24%, var(--ajax-track) 34%, var(--ajax-track)); } 64% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 18%, var(--ajax-accent) 28%, var(--ajax-track) 38%, var(--ajax-track)); } 66% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 22%, var(--ajax-accent) 32%, var(--ajax-track) 42%, var(--ajax-track)); } 68% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 26%, var(--ajax-accent) 36%, var(--ajax-track) 46%, var(--ajax-track)); } 70% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 30%, var(--ajax-accent) 40%, var(--ajax-track) 50%, var(--ajax-track)); } 72% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 34%, var(--ajax-accent) 44%, var(--ajax-track) 54%, var(--ajax-track)); } 74% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 38%, var(--ajax-accent) 48%, var(--ajax-track) 58%, var(--ajax-track)); } 76% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 42%, var(--ajax-accent) 52%, var(--ajax-track) 62%, var(--ajax-track)); } 78% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 46%, var(--ajax-accent) 56%, var(--ajax-track) 66%, var(--ajax-track)); } 80% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 50%, var(--ajax-accent) 60%, var(--ajax-track) 70%, var(--ajax-track)); } 82% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 54%, var(--ajax-accent) 64%, var(--ajax-track) 74%, var(--ajax-track)); } 84% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 58%, var(--ajax-accent) 68%, var(--ajax-track) 78%, var(--ajax-track)); } 86% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 62%, var(--ajax-accent) 72%, var(--ajax-track) 82%, var(--ajax-track)); } 88% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 66%, var(--ajax-accent) 76%, var(--ajax-track) 86%, var(--ajax-track)); } 90% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 70%, var(--ajax-accent) 80%, var(--ajax-track) 90%, var(--ajax-track)); } 92% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 74%, var(--ajax-accent) 84%, var(--ajax-track) 94%, var(--ajax-track)); } 94% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 78%, var(--ajax-accent) 88%, var(--ajax-track) 98%, var(--ajax-track)); } 96% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 82%, var(--ajax-accent) 92%, var(--ajax-track) 102%, var(--ajax-track)); } 98% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 86%, var(--ajax-accent) 96%, var(--ajax-track) 106%, var(--ajax-track)); } 100% { background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 90%, var(--ajax-accent) 100%, var(--ajax-track) 110%, var(--ajax-track)); } } @keyframes body-build { from: { background-color: #010204; } to { background-color: var(--bs-body-bg); } } @keyframes breathe-anim { 0% {mask-position: top 0 left -35px;} 100% {mask-position: top 0 left 882px;} } @keyframes glow { from { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e8431f, 0 0 20px #e8431f, 0 0 25px #e8431f, 0 0 30px #e8431f, 0 0 35px #e8431f; } to { box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #e8431f, 0 0 50px #e8431f, 0 0 60px #e8431f, 0 0 70px #e8431f; } } /* TOOD: Move */ .breathe { mask-image: linear-gradient(90deg, rgba(0,0,0,0.25) 15px 5px, rgba(0,0,0,1.0) 35px 15px, rgba(0,0,0,0.25) 65px 26px); animation: breathe-anim 2s infinite ease-in-out; mask-position: top 0 left -35px; } ::placeholder { color: #9ccdff !important; font-weight: 400; opacity: 1; /* Firefox */ font-style: italic; } #account_info, #account_username { line-height: 60px; font-size: 20px; font-family: myriad-pro; font-weight: bold; float: right; } #account_form { position: relative; } #account_info { cursor: pointer; margin-right: 25px; } #account_context { display: inline-block; float: right; line-height: 60px; margin-right: 25px; } #account_context .select2 { margin: 14px 0px; } #account_context .select2-selection--single { border: 0; } #account_context .select2-selection__rendered { text-align: right; font-family: myriad-pro; font-weight: bold; line-height: 32px; font-size: 18px; padding-right: 24px; } #account_context .select2-selection__arrow { line-height: 32px; margin-top: 3px; } #account_nav { position: absolute; top: 60; right: 0; margin: 0; padding: 0; } #account_nav li { padding: 0px 25px; height: 40px; line-height: 40px; list-style-type: none; font-weight: bold; border-bottom: solid 1px var(--bs-border-color); background-color: var(--bs-body-bg); } #account_nav li:hover { background-color: var(--bs-border-color); } #account_nav_register { pointer-events: auto !important; margin-right: 10px; } #account_search { width: 250px; float: right; } #account_search input { margin: 14px 0px; } #api_login_box { width: 500px; height: 300px; background: #000000; } #api_login_box p { font-size: 12px; } #apphome_base { font-family: source-code-pro; font-size: 12px; } #build_cancel { display: block; position: absolute; bottom: 0; right: 15px; font-family: ccmeanwhile; transition: all .15s ease-in-out; background: rgba(0,0,0,0.25); padding: 4px 10px; border-radius: 5px; } #build_cancel:hover { text-shadow: 0 0 2px #FFF71C, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0ec78, 0 0 20px #f0ec78; color: #fff; text-decoration: none; } #build_params { text-align: right; margin-top: 25px; } #build_params div { display: inline-block; margin: 0px 25px; } #build_params div p { font-size: 48px; line-height: 64px; text-align: center; margin-bottom: 0px; } #build_params div span.label { font-family: "ccmeanwhile", sans-serif; color: #e0a92b; cursor: default; display: block; margin-bottom: 5px; font-size: 10px; text-align: right; } #build_params h2 { font-family: "ccbiffbamboom", sans-serif; font-size: 36px !important; -webkit-text-stroke: 2px black; color: #2f7fd1; text-align: center; line-height: 84px; } #calendar_lightbox { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(1,2,4,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); text-align: center; justify-content: center; align-items: center; flex-direction: column; } #diag_upload_container { margin-top: 27px; position: relative; } #diag_upload_progress { margin-top: 5px; display: block; width: 100%; text-align: right; } #diag_upload_progress strong { display: inline-block; width: 100px; } #dy_web_build_form label { font-family: "ccmeanwhile", sans-serif; padding-bottom: 7px; padding-top: 25px; color: #e0a92b; cursor: default; display: block; margin-bottom: 5px; } #dy_credits { display: inline-block; height: 32px; width: 32px; text-align: center; margin: 1px 0 11px 22px; border: solid 2px #FFF71C; border-radius: 17px; line-height: 29px; font-size: 15px; color: #FFF71C; } #cache_reload_btn { display: block; float: right; } #image_preload { display: none; } #it_frame_messages { position: absolute; top: 0; left: 0; width: 100%; background: rgba(1,2,4,0.5); box-shadow: 0px 7px 14px 0px rgba(1,2,4,0.5); padding-bottom: 20px; } #it_frame_nav { height: 60px; /* box-shadow: 0px 0px 10px #eaf0f8; */ position: relative; } #it_frame_content { width: 1000px; margin: 35px auto 95px auto; box-shadow: 3px 3px 5px var(--bs-secondary-bg-subtle); background: var(--bs-dark-bg-subtle); min-height: 400px; padding: 30px 42px; position: relative; border-radius: 5px; } #it_frame_footer { text-align: right; height: 45px; position: absolute; width: 100%; left: 0; bottom: 0; } #it_frame_footer .select2 { margin-right: 25px; } #it_module_nav { display: inline-block; padding: 0; margin: 0; } #it_module_nav li { list-style-type: none; height: 60px; line-height: 60px; display: inline-block; padding: 0 10px; font-weight: bold; font-family: "myriad-pro", sans-serif;; font-size: 20px; } #it_module_nav li:hover { transform: scale(1.1); } #lightbox { width: 100%; position: fixed; height: 100%; background: rgba(1,2,4,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); top: 0; left: 0; z-index: 999; } #lightbox_content { top: 50%; transform: translate(-50%, -50%); left: 50%; position: absolute; } #login_button { height: 32px; padding: 4px 24px; } #login_button :disabled { font-weight: bold; } #logout_button { display: block; margin: 10px auto; padding: 4px 12px; } #module_inner_content { min-height: 200px; } #module_wrapper { clear: both; position: relative; } #module_wrapper .ajax-loading-bar { position: relative !important; } #module_wrapper .ajax-dummy-bar { position: relative !important; } #package_results { text-align: center; margin-top: 36px; } #register_check_company { margin: 20px 0px 5px; } #relative_upload_progress { font-family: "ccbiffbamboom", sans-serif; -webkit-text-stroke: 1px black; color: #F6F7F9; font-size: 20px; line-height: 20px; } #start_build { background: #e23b3b; border-right: solid 5px #6e2228; border-bottom: solid 5px #6e2228; border-top: solid 5px #f0a0a0; border-left: solid 5px #f0a0a0; -webkit-text-stroke: 3px #4e1a1f; width: 200px; height: 200px; text-align: center; margin: 0px auto; border-radius: 100px; font-family: "ccbiffbamboom", sans-serif; font-size: 48px; color: #F6F7F9; display: block; animation: glow 1s ease-in-out infinite alternate; transition: all .15s ease-in-out } #start_build:hover { background-color: #e8888f; -webkit-text-stroke: 0; text-shadow: 0 0 1px #e23b3b, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e8888f, 0 0 20px #e8888f, 0 0 25px #e8888f, 0 0 30px #e8888f, 0 0 35px #e8888f; } #ticket_summary_container { position: relative; } #ticket_update_form { width: 750px; margin: 45px 0 0 auto; position: relative; } #ticket_upload_diag { margin-right: 15px; } #ticket_ai { margin-left: 15px; } #account_form label, #ticket_update_form label { display: block; text-align: right; text-transform: uppercase; color: #5bb0ff; font-size: 14px; font-weight: normal; margin-top: 5px; } #toggle_debug { margin-right: 25px; } #usage_chart { height: 00px; } .account-icon { width: 38px; height: 38px; border: 0; border-radius: 19px; margin: 12px 0px 11px 15px; display: inline-block; background: url('https://static.visicoretech.com/img/vct-default-content-g.png') top left no-repeat; background-size: 38px 38px; } .account-contact-image { width: 80px; height: 80px; border-radius: 40px; background: url('https://static.visicoretech.com/img/vct-default-content-p.png') top left no-repeat; background-size: 80px 80px; } .account-contact-name { font-size: 20px; font-family: myriad-pro; margin-top: 10px; } .account-contact-title { margin-bottom: 15px; } .account-process-registration { margin-top: 35px !important; } .add-contact-fields div { width: 30%; margin-right: 4.5%; display: inline-block; text-align: right; } .add-contact-fields div:last-child { margin-right: 0px; } .account-contact-select { width: 100%; text-align: right; } .account-contact-select .btn-primary { margin: 10px 0 30px; } .account-contact-select .select2-container { display: block; text-align: right; } .account-contact-select label, .add-contact-fields label { font-weight: bold; font-family: myriad-pro; font-size: 14px; margin-top: 3px; } .ajax-loading { background: #1a1f27 !important; box-shadow: 1px 1px 3px var(--bs-secondary-bg-subtle) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .ajax-loading .content-element { opacity: 0.5; } .ajax-loading-bar, .ajax-panel-bar, .module-loading-bar { height: 5px; width: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to left, var(--ajax-track), var(--ajax-track) 90%, var(--ajax-accent) 100%, var(--ajax-track) 110%, var(--ajax-track)); background-position: 0% 50%; animation: ajax-bar 1s ease infinite; border-radius: 5px; } .ajax-loading-bar-vertical { width: 5px; height: 100%; animation: ajax-bar-vertical 1s ease infinite; right: 0; top: 0; margin-right: -5px; position: absolute; background: linear-gradient(0deg, var(--ajax-track), var(--ajax-track) 90%, var(--ajax-accent) 100%, var(--ajax-track) 110%, var(--ajax-track)); background-position: 50% 0%; border-radius: 5px; } .ajax-dummy-bar { height: 5px; width: 100%; position: absolute; top: 0; left: 0; } .api-token-list { width: 100%; } .api-token-list code { font-size: 12px; display: block; padding: 5px 100px 5px 10px; margin: 15px; position: relative; } .copyable .copy { display: none; } @keyframes copy-fade { 0% { background-color: #235018; }, 100% { background-color: #222a35; } } .copyable.copied { animation: copy-fade 1.5s ease-out; } .copyable:hover .copy { display: block; } .delete-button-wrapper { text-align: right; padding-right: 15px; } .api-token-list code .reveal { position: absolute; top: 8px; right: 5px; font-style: normal; opacity: 0.6; cursor: pointer; } .api-token-list code .reveal:hover { opacity: 1; } .api-token-list code .copy { position: absolute; top: 8px; right: 25px; font-style: normal; opacity: 0.6; cursor: pointer; } .api-token-list code .copy:hover { opacity: 1; } .api-token-list tbody:after { content: ''; display: block; height: 25px; } .api-token-list tbody:before { content: ''; display: block; height: 15px; } .api-token-list tbody tr:first-child { border-top: solid 5px rgb(44, 51, 63); } .api-token-list tbody:nth-child(2) tr td { background: var(--bs-body-bg); } .api-token-list tbody tr td { padding-top: 15px; } .api-token-list .api-icon { width: 20px; margin: 0px 3px 0px 10px; } .api-token-list .contact-icon { width: 30px; margin: 0px 15px; border-radius: 15px } .api-token-list .token-label { display: inline-block; width: 150px; } .attach-deleting { opacity: 0.5; } .attach-file-close { font-style: normal; margin-left: 6px; cursor: pointer; color: #5bb0ff; } .attach-file-container { text-align: right; } .attach-file-file { padding: 2px 8px; font-size: 12px; font-family: myriad-pro; border: solid 1px #5bb0ff; background: #0b2540; color: #5bb0ff; border-radius: 4px; margin: 15px 10px; font-weight: bold; display: inline-block; } .attachment-lightbox-wrapper { position: relative; padding: 50px 75px; } .attachment-lightbox-backdrop { min-width: 500px; min-height: 200px; max-width: 1200px; max-height: 900px; background: rgb(15, 18, 22); border: solid 1px rgba(192, 193, 196, 0.1); border-radius: 5px; margin: 50px 75px; padding: 15px 25px; display: flex; align-items: center; justify-content: center; } .attachment-lightbox-backdrop img { max-width: 1150px; max-height: 870px; } .auth-danger { color: #c0414b; } .auth-disabled { opacity: 0.25; cursor: not-allowed; } .auth-icon { width: 18px; } .blame { text-align: center; font-size: 32px; margin: 35px auto; font-style: italic; } .btn-danger { --bs-btn-bg: #c0414b; --bs-btn-border-color: #c0414b; --bs-btn-hover-bg: #9e343c; --bs-btn-hover-border-color: #9e343c; } .btn-dy-settings { text-align: right; margin-left: auto; display: block; margin-top: 25px; } .btn-premium { width: 139px; height: 40px; border: solid 1px #F6f7f9; border-radius: 7px; background: #1a1f27; font-size: 16px; font-weight: bold; color: #f6f7f9; margin: 35px 25px; } .btn-premium:hover { border-color: #c5ccd6; color: #c5ccd6; background-color: #2a323d; } .btn-premium-wrapper { text-align: center; } .btn-success { --bs-btn-bg: #2fa84f; --bs-btn-border-color: #2fa84f; --bs-btn-hover-bg: #268a41; --bs-btn-hover-border-color: #268a41; } .btn-outline-danger { --bs-btn-color: #c0414b; --bs-btn-border-color: #c0414b; --bs-btn-hover-color: var(--bs-dark-bg-subtle); --bs-btn-hover-bg: #c0414b; --bs-btn-hover-border-color: #c0414b; } .btn-outline-success { --bs-btn-color: #2fa84f; --bs-btn-border-color: #2fa84f; --bs-btn-hover-color: var(--bs-dark-bg-subtle); --bs-btn-hover-bg: #2fa84f; --bs-btn-hover-border-color: #2fa84f; } .btn-outline-warning { --bs-btn-color: #d99a2b; --bs-btn-border-color: #d99a2b; --bs-btn-hover-color: var(--bs-dark-bg-subtle); --bs-btn-hover-bg: #d99a2b; --bs-btn-hover-border-color: #d99a2b; } .btn-primary { background-color: #0A6CC4; border-color: #0083FF; color: #EAF4FF; font-weight: bold; } .btn-ai { background-color: #004789; border-color: #0083ff; color: #aed8ff; font-weight: bold; } .btn-primary:hover { background-color: #0083FF; border-color: #5BB0FF; color: #FFFFFF; } .btn-primary:active { background-color: #004789 !important; border-color: #073B6E !important; } .btn-build { width: 200px; height: 100px; border: solid 2px #6c757d; border-radius: 10px; margin: 0px 25px; transition: all .15s ease-in-out } .btn-ticket-item { margin: 25px; } .btn-cribl-connect, .btn-ticket-type { font-size: 20px; font-family: myriad-pro, sans-serif, serif; font-weight: bold; } .btn-cribl-connect img { width: 140px; margin-bottom: 7px } .btn-cribl-connect label { font-size: 14px; } .btn-cribl-connect:hover label { color: var(--bs-body-bg); } .btn-ticket-subtype { margin: 25px; } .btn-build:hover { border-color: #565e64; background-color: #5c636a; } .btn-splunk { background: url('https://static.visicoretech.com/img/btn-splunk.png') 50% 50% no-repeat; } .btn-cribl { background: url('https://static.visicoretech.com/img/btn-cribl.png') 50% 50% no-repeat; } .btn-splunk:hover { background-image: url('https://static.visicoretech.com/img/btn-splunk-hover.png'); } .btn-cribl:hover { background-image: url('https://static.visicoretech.com/img/btn-cribl-hover.png'); font-size: 22px; margin: 35px auto; font-style: italic; } .btn-schedule { font-weight: bold; margin-left: 15px; } .btn-overview-schedule { font-weight: bold; } .btn-package-download { display: inline-block; border: solid 2px #6c757d; padding: 12px 36px 12px 118px; background-position: 24px 50%; background-size: 72px; background-repeat: no-repeat; text-align: left; border-radius: 8px; cursor: pointer; } .btn-service-nav { margin-left: 15px; font-weight: bold; } .appinspect-valid { border-color: #20a83c !important; color: #2fd14a !important; } .appinspect-valid:hover { background-color: #5e6b5d !important; } .appinspect-valid h4 { color: #20a83c !important; } .appinspect-warn { border-color: #be8a1e !important; color: #d99a2b !important; } .appinspect-warn:hover { background-color: #5b6675 !important; } .appinspect-warn h4 { color: #be8a1e !important; } .appinspect-fail { border-color: #9e343c !important; color: #c0414b !important; } .appinspect-fail:hover { background-color: #5b6675 !important; } .appinspect-fail h4 { color: #9e343c !important; } .back-button-wrapper { text-align: right; } .btn-package-download:hover { border-color: #565e64; background-color: #5c636a; color: #F6F7F9; } .btn-package-download h4 { font-family: "source-code-pro", sans-serif; font-size: 14px; margin-bottom: 2px; } .btn-package-download h4:hover, .btn-package-download h5:hover { color: #F6F7F9; } .btn-package-download h5 { font-size: 14px; line-height: 36px; height: 24px; margin-bottom: 0px; } .btn-package-download h5 i { display: inline-block; width: 36px; height: 36px; float: left; background-size: contain; background-image: url("https://static.inversetachyon.com/img/loading.gif"); font-style: normal; text-align: center; font-size: 20px; font-family: ccmeanwhile; } .btn-package-download h5 span { display: inline-block; line-height: 36px; margin-left: 8px; } .btn-package-download:hover { text-decoration: none; } .btn-variable-session { border-right: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-right: 4px; } .btn-variable-session-select { border-left: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; padding-left: 4px; } .calendly-close, .lightbox-close { cursor: pointer; position: absolute; top: 0; right: 0; font-weight: bold; font-size: 22px; color: #c0414b; font-family: myriad-pro; } .calendly-wrapper, .calendly-inline-widget { min-width: 1200px; min-height: 900px; /* border: solid 3px #F6F7F9; */ /* background: rgba(1,2,4,0.6); */ border-radius: 25px; align-items: center; justify-content: center; display: flex; /* box-shadow: 0px 0px 12px #F6F7F9; */ position: relative; } .calendly-wrapper iframe, .calendly-inline-widget iframe { all: initial; box-sizing: content-box; border: 0px; border-radius: 15px; width: 1px; height: 1px; } .calendly-show iframe { min-width: 1200px !important; min-height: 900px !important; display: block; } code, .code { font-size: 14px; font-family: source-code-pro; background: #222a35; padding: 1px 4px; border-radius: 5px; color: #7590BF; } .code-post-auth { text-align: center; margin: 45px 0; } .clear { clear: both; } .contact-sales { display: flex; width: 100%; height: 174px; justify-content: center; align-items: center; flex-direction: column; } .content-element { margin-bottom: 16px; } [data-load="ajax"] { margin-bottom: 64px !important; } .content-element-nomargin { margin-bottom: 0px; } .content-service-image { width: 125px; margin: 10px 25px; } .container-404 { width: 100%; height: 100%; } .container-404:after { content: "404"; position: absolute; top: 0; right: 0; font-size: 250px; opacity: 0.25; font-family: myriad-pro; } .debug-code { text-align: left; } .duck-loading, .duck-error, .duck-duck-go { position: absolute; top: 0; left: 0; text-align: center; width: 100%; height: 100%; background: rgba(20,23,28,0.9); z-index: 999; display: flex; justify-content: center; align-items: center; } .duck-error div { display: inline-block; padding: 24px 48px; border-radius: 10px; background: rgba(0,0,0,0.5); } .duck-text { font-family: "ccmeanwhile", sans-serif; font-style: italic; color: #2f7fd1; margin-top: 50px; text-align: center; font-size: 22px } .dy-build-halt { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: #e8431f; outline: 0; box-shadow: 0 0 0 .25rem rgba(251,59,14,.25); } .dy-build-pod { display: inline-block; width: 30%; margin-right: 3%; } .dy-immutable-field { font-size: 20px; font-family: source-code-pro, sans-serif; height: 36px; line-height: 36px; } /* .generic-select ::placeholder { text-align: right; color: #9ccdff !important; font-weight: normal; } */ .footer-tll { line-height: 45px; margin-right: 25px; font-size: 14px; font-weight: bold; font-family: myriad-pro; } .footer-version { float: left; line-height: 45px; margin-left: 25px; } .form-description { margin-bottom: 45px; } .form-error { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: rgb(253,13,13); outline: 0; box-shadow: 0 0 5px .25rem rgba(253,13,13,.25); } .hide { display: none !important; } .home-welcome { text-align: right; } h4.home-welcome span { font-size: 16px; margin-right: 8px; text-transform: uppercase; font-family: proxima-nova; color: #7590BF; font-weight: normal; } .elip-anim { margin-left: 2px !important; line-height: inherit; } .error-container { display: flex; } .i18n { margin-right: 25px; } .image-preload { display: none; } .input-row { margin-bottom: 1.25em; } .input-row label { font-size: 14px; font-weight: bold; margin-bottom: 0.25em; } .it-message { width: 1000px; margin: 15px auto 0; text-align: center; border-radius: 6px; padding: 5px 10px; font-weight: bold; position: relative; } .it-message button { position: absolute; top: 5px; right: 5px; background: none; border: none; font-weight: bold; font-size: 14px; font-family: myriad-pro; } .it-message p { margin: 0px !important; padding: 0px !important; width: 900px; display: inline-block; } .it-message.error { background: #400000; border: solid 1px #9e343c; } .itportal-logo { line-height: 60px; font-size: 20px; font-family: myriad-pro; font-weight: bold; margin: 0 30px 0 25px; display: inline-block; font-family: "myriad-pro", sans-serif;; font-size: 20px; } .itportal-logo span:hover { transform: scale(1.1); } .lightbox-button-row { display: block; text-align: right; margin-top: 25px; } .lightbox-button-row button { margin-left: 10px; } .lightbox-content { width: 800px; min-height: 600px; padding: 35px 50px; box-shadow: 3px 3px 5px var(--bs-secondary-bg-subtle); background: var(--bs-dark-bg-subtle); position: relative; } .lightbox-content .lightbox-close { top: 35px !important; right: 50px !important; } .lightbox-message { width: 500px; background: rgba(1, 2, 4, 0.8); border: solid 2px #2c333f; border-radius: 5px; padding: 20px 30px; } .load-error { display: grid; position: relative; } .load-error .error-code { font-size: 100px; font-family: myriad-pro; text-transform: uppercase; text-align: right; vertical-align: middle; color: rgba(192,193,196,0.25); } .load-error .error-text { position: absolute; top: 0; left: 0; padding-top: 100px; text-align: right; font-size: 20px; width: 100%; padding-right: 100px; } .load-error .btn-reload { position: absolute; top: 0; right: 0; } .loading-spinner-inline-header { width: 40px; height: 40px; border: 0px } .loading-flying-duck { width: 150px; height: 163px; border: 0px } .loading-spinner-large { width: 200px; height: 200px; border: 0px } .login-box { width: 500px; border: solid 1px #010204; border-radius: 4px; height: 535px; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; box-shadow: 3px 3px 5px var(--bs-secondary-bg-subtle); background: var(--bs-dark-bg-subtle); } .login-header { font-family: "ccbiffbamboom", sans-serif; font-size: 3.25rem; -webkit-text-stroke: 3px black; color: #FFF71C; line-height: 75px; margin: 20px 0 0; } .login-identity { width: 200px; /* font-family: "unibody-8-new", sans-serif; */ font-size: 14px; font-weight: bold; } .login-item-wrapper { margin-right: 30px; text-align: left; display: inline-block; } .login-label { text-align: right; margin-top: 6px; padding-right: 10px; display: block; font-size: 11px; font-family: source-code-pro; color: #7e8896; } .login-logo { width: 300px; display: block; margin: 45px auto 15px; padding-left: 30px; } .login-tagline { text-align: center; font-size: 2rem; } .logout-logo { position: absolute; bottom: 35px; right: 40px; width: 150px; } .login-logo-wrapper { position: absolute; top: 10px; right: 25px; } .login-provider { width: 200px; } .login-local-wrapper { display: flex; justify-content: center; flex-direction: column; align-items: center; margin-top: 10px; } .login-local-wrapper img { width: 200px; } .login-local-wrapper input { width: 320px; margin-top: 15px; } .login-local-wrapper label { width: 320px; } .login-local-wrapper p { margin-top: 45px; } .login-select-wrapper { display: flex; justify-content: center; width: 500px; margin-top: 60px; } .logo-icon { border-radius: 45px; height: 90px; margin-left: 28px; } .logout-select-wrapper { padding-right: 25px; width: 500px; text-align: center; padding: 0; margin-top: 105px; } .login-sep { text-align: center; font-size: 20px; color: #2f7fd1; font-style: italic; font-family: "ccmeanwhile", sans-serif; position: relative; top: 120px; } .logout-text { display: inline-block; font-size: 40px; margin-bottom: 23px; } .inner-lightbox { margin-top: 5px; } .module-lightbox, .page-lightbox, .login-local-lightbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1,2,4,0.25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 5px; display: flex; align-items: center; justify-content: center; z-index: 9999; box-shadow: inset 0px 0px 7px 7px #0f1216; } .page-lightbox { flex-direction: column; } .page-lightbox.ajax-crash { background: rgba(1,2,4,0.65); } .page-lightbox.ajax-crash .btn-outline-danger { display: block; --bs-btn-bg: #010204; font-weight: bold; border-width: 2px; } .module-lightbox img { height: 25%; border: 0; } .page-lightbox img { width: 25%; border: 0; } .module-nav { padding: 0px; text-align: center; margin-top: 15px; font-family: "ccmeanwhile", sans-serif; } .module-nav li.module-link { display: inline-block; line-height: 22px; padding: 0px 8px; cursor: pointer; transition: all .15s ease-in-out } .module-nav li.module-text { display: block; text-align: center; font-family: proxima-nova; margin-top: 5px; font-size: 14px; line-height: 22px; } .module-nav li.module-link:hover { text-shadow: 0 0 2px #FFF71C, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0ec78, 0 0 20px #f0ec78; color: #fff; } .nav-icon-inline { width: 40px; display: inline-block; height: 40px; border-radius: 20px; } .no-notes { text-align: center; margin: 50px 0 0; } .note-billable { font-size: 13px; color: #2fa84f; font-weight: bold; margin-top: 15px; } .note-billable i { font-style: normal; display: inline-block; padding: 2px 6px; border: solid 2px #2fa84f; color: #2fa84f; text-align: center; border-radius: 5px; } .note-content { padding-right: 25px !important; } .note-content h1, .chat-message h1 { font-size: 24px; font-weight: bold; } .note-content h2, .chat-message h2 { font-size: 20px; font-weight: bold; } .note-content h3, .chat-message h3 { font-size: 16px; font-weight: bold; } .note-content h4, .chat-message h4 { font-size: 16px; font-weight: normal; } .note-content h5, .chat-message h5 { font-size: 16px; font-style: italic; font-weight: normal; } .oauth-connector-label { text-align: center; margin: 60px auto; } .oauth-connector-initiate { text-align: center; margin: 75px auto 0px; } .overview-stats-container { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; } .overview-stats-single { text-align: center; width: 200px; } .overview-stats-single span { display: block; } .overview-stats-stat { font-family: myriad-pro; font-size: 56px; } .page-link { color: #5bb0ff; text-decoration: none; } .page-link:hover { color: #5bb0ff; text-decoration: underline; } .active>.page-link, .page-link.active { background: #5bb0ff; color: #010204; border: var(--bs-pagination-border-color); } .pagination { margin-bottom: 0; margin-left: 25px; float: right; } .pagination-container { margin: 25px 0px; display: inline-block; text-align: right; width: 100%; } .pagination-nav-container { display: inline-block; } .pagination-perpage { display: inline-block; margin-left: 25px; } .pagination-showhide { display: inline-block; margin-bottom: 0; line-height: 32px; } .pagination-showhide .form-check-input { margin-top: 8px; } .pagination-wrapper { clear: both; height: 32px; margin-bottom: 16px; text-align: right; } .policy h4 { font-size: 16px; font-weight: bold; } .policy ul { margin-bottom: 16px; } .profile-image-container { width: 130px; float: left; } .profile-image-container a { display: inline-block; width: 80px; text-align: center; font-size: 14px; } .profile-image { width: 80px; height: 80px; border: 0; border-radius: 40px; margin: 0px 30px 5px 0px; display: inline-block; background: url('https://static.visicoretech.com/img/vct-default-content-g.png') top left no-repeat; background-size: 80px 80px; } .profile-image-update.updating { opacity: 33%; } .profile-name-container { width: 780px; float: left; } .profile-name-container input, .profile-name-container label { width: 45%; display: inline-block; } .profile-name-container label, .profile-field-container label { margin-top: 3px; margin-bottom: 15px; text-align: right; font-size: 14px; font-weight: bold; font-family: myriad-pro; } .profile-field-container label { width: 100%; } .profile-phone-container input:first-child, .profile-phone-container label:first-child { width: 60%; margin-right: 9%; display: inline-block; } .profile-phone-container input:last-child, .profile-phone-container label:last-child { width: 30%; display: inline-block; } .profile-field-container { margin-left: 130px; } .profile-name-container input:nth-child(1), .profile-name-container label:nth-child(1) { margin-right: 9%; } .register-conflict { height: 31px; position: absolute; bottom: 71px; right: 75px; color: #c0414b; } .register-conflict button { margin-left: 20px; } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-container--default .select2-results__option--selected, .select2-search, .select2-search input, .select2-selection, .select2-results { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--bs-body-color); text-align: left; } .select2-container--default .select2-selection--single .select2-selection__rendered .auth-icon { width: 14px; margin-right: 5px; margin-top: -3px; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #5b6675; } .select2-container--default.select2-container--disabled .select2-selection--single, .select2-container--default.select2-container--disabled .select2-selection--multiple { background: var(--bs-secondary-bg); border-color: var(--bs-secondary-border-subtle); } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #2c333f; } .select2-dropdown { border-color: #2c333f; } .select2-search.select2-search--inline { font-size: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { font-weight: bold; /* background-color: #0b3a66; */ background-color: #0b2540; border-color: #8a95a5; color: #5bb0ff; font-size: 12px; line-height: 18px; font-family: myriad-pro; font-weight: bold; } .select2-container--default .select2-search--inline .select2-search__field { font-weight: bold; color: #9ccdff; font-size: 12px; line-height: 18px; font-family: myriad-pro; font-weight: bold; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background-color: #9ccdff; color: #0b3a66; } .select2-container .select2-selection--single { height: 32px; } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { line-height: 32px; } .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { padding-left: 15px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { padding-left: 5px; border-right: 0px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding-right: 7px; } /* * Hack to try and hide selected options. This made things worse. .select2-results__option[aria-selected=true] { display: none; } */ .service-address { display: inline-block; list-style-type: none; padding: 0px; } .service-input { margin-bottom: 25px; } .service-input label { font-weight: bold; margin-bottom: 5px; } .service-input .select2-container { display: block; } .service-items-container { text-align: right; margin-bottom: 35px; } .ticket-author-type { height: 5px; } .ticket-author-type.author-member { background: #0d3962; } .ticket-author-type.author-contact { background: #4a8fd0; } .ticket-config-details { min-height: 270px; } .ticket-author-type.author-unknown { background: #59616d; } .ticket-config-details ul { list-style-type: none; padding-left: 15px; } .ticket-config-details ul li { font-size: 20px; } .ticket-config-details ul li span { display: block; text-transform: uppercase; font-size: 13px; font-family: myriad-pro; font-weight: normal; color: #5bb0ff; line-height: 19.5px; margin-top: 10.5px; } .ticket-return-container { text-align: right; margin-top: 25px; } .ticket-return-container button { margin-right: 0px; } .ticket-summary-list .service-address li { margin-bottom: 7.5px; } .token-delete-curl { text-align: left; font-size: 12px; padding-bottom: 12px; } .translation-failed { font-style: italic; font-size: 0.75em; } .translation-failed pre { font-style: normal; display: inline; margin-bottom: 0px; margin: 0px; font-size: 0.85em; } .service-address-container span { vertical-align: top; } .service-button-wrapper { text-align: center; margin-bottom: 55px; } .single-value { text-align: right; font-weight: 100; font-size: 72px; font-family: myriad-pro; line-height: 96px; } .ticket-created { text-align: right; font-size: 28px; font-family: proxima-nova; font-weight: 100; position: relative; } .ticket-attach-container { margin: 25px 0px; padding-top: 4px; text-align: right; border-top: solid 1px #3a414c; } .ticket-attach-container a { margin: 2px 10px; display: inline-block; } .ticket-attach-progress { width: 750px; height: 38px; border: solid 1px rgb(73, 80, 87); border-radius: 6px; background-color: var(--bs-body-bg); background: repeating-linear-gradient(-45deg,var(--bs-body-bg) 0 12px,#7590BF 0 20px) left/200% 100%; animation: l3 5s infinite reverse linear; } .diag-upload-progress { width: 916px; height: 38px; border: solid 1px rgb(73, 80, 87); border-radius: 6px; background-color: var(--bs-body-bg); } .diag-upload-progress p { text-align: center; margin: 0; line-height: 38px; font-weight: bold; color: #010204; } .ticket-attach-progress-full { width: 916px; } .new-ticket-attach-progress { width: 916px; } @keyframes l3 { 100% {background-position:right} } .ticket-created span { font-size: 18px; text-transform: uppercase; color: #7590BF; font-weight: normal; } .ticket-interaction-image { position: absolute; top: 0; left: -144px; width: 80px; height: 80px; border-radius: 40px; background: url('https://static.visicoretech.com/img/vct-default-content-p.png') top left no-repeat; background-size: 80px 80px; } .ticket-interaction-name { display: block; position: absolute; top: 90px; left: -187px; text-align: center; width: 166px; font-weight: bold; } .ticket-note .note-member { border-top: solid 4px #1274BB; } .ticket-note td { padding: 15px 0 55px; vertical-align: top; } .ticket-note td.metadata { width: 166px; text-align: center; } .ticket-note td.metadata span { display: block; margin-left: -40px } .ticket-note td.metadata span.note-author { font-weight: bold; font-size: 18px; } .ticket-note td.metadata span.note-posted { font-size: 13px; } .ticket-note td.metadata img { width: 60px; height: 60px; border-radius: 30px; margin: 0 0 15px -40px; background: url('https://static.visicoretech.com/img/vct-default-content-p.png') top left no-repeat; background-size: 60px 60px; } .ticket-note-list { width: 100%; } .ticket-priority { float: right; margin: 0 0 10px 20px; border-width: 2px; font-size: 18px; font-weight: bold; cursor: default; } .ticket-summary { font-size: 38px; /* margin-top: 45px; */ font-family: proxima-nova; font-weight: 100; } .ticket-summary span { display: block; font-size: 16px; line-height: 28px; margin-top: -28px; text-transform: uppercase; color: #7590BF; } .ticket-summary-back { display: block; text-align: right; margin-top: 15px; } .ticket-summary-list { list-style-type: none; margin: 0; padding: 0; } .ticket-summary-list li { margin-bottom: 15px; font-size: 20px; } .ticket-summary-list li a { line-height: 30px; } .ticket-summary-list span { width: 125px; display: inline-block; text-transform: uppercase; font-size: 13px; font-family: myriad-pro; font-weight: normal; color: #5bb0ff; line-height: 19.5px; margin-top: 10.5px; } .ticket-summary-profile-image { width: 30px; height: 30px; border-radius: 15px; margin-right: 15px; background: url('https://static.visicoretech.com/img/vct-default-content-p.png') top left no-repeat; background-size: 30px 30px; } .ticket-summary-title { text-align: right; font-size: 72px; font-weight: 100; } .ticket-summary-title span, .ticket-summary-label { font-size: 22px; margin-right: 15px; text-transform: uppercase; font-family: proxima-nova; color: #7590BF; font-weight: normal; } .profile-update-cell, .ticket-update-cell { display: inline-block; margin-left: 25px; } .ticket-update-cell.single { margin-left: 0; } .profile-update-cell:first, .ticket-update-cell:first { margin-left: 0; } .profile-update-row, .ticket-update-row { text-align: right; margin-top: 15px; } .ticket-updated { text-align: right; font-size: 16px; font-family: proxima-nova; font-weight: 100; } .ticket-updated span { font-size: 13px; text-transform: uppercase; color: #5bb0ff; font-weight: normal; } .tickets-list { width: 100%; } .tickets-list tbody tr.ticket-closed td { text-decoration: line-through; color: #5b6675; } .tickets-list tbody tr.ticket-closed:hover td { color: #8a95a5; text-decoration: underline; } .tickets-list tbody tr:hover td { color: var(--bs-gray-200); text-decoration: underline; background: var(--bs-gray-800); } .tickets-list tbody tr:not(.hide):nth-child(even) { background: var(--bs-body-bg); } tbody tr.ticket-note:not(.hide):nth-child(4n) { background: var(--bs-body-bg); } .tickets-list thead td { padding: 2px 4px; font-weight: bold; font-family: myriad-pro; font-size: 18px; } .tickets-list tr { height: 40px; } .ui-tabs-nav { padding-left: 0; font-size: 22px; font-family: myriad-pro; } .ui-tabs-tab { display: inline-block; padding: 5px 20px 5px 0; } .uom { font-size: 20px; line-height: 20px; } .upload-progress { width: 100%; height: 35px; border: solid 1px #0a4a86; border-radius: 6px; margin-top: 25px; text-align: center; padding: 5px 0px; background-color: #0b2540; } .vct-slack-cribl, .vct-webex-cribl { height: 90px; } .webex-check { margin-bottom: 25px; } /* MDE shit. This may be a giant detour. */ .mde-container { width: 100%; height: 250px; border: solid 1px #2c333f; border-radius: 4px; overflow-y: scroll; } .mde-container * { width: 100%; outline: none; } .mde-container p { margin-bottom: 0px; padding-bottom: 0.625em; } .mde-container h1, .mde-container h2, .mde-container h3, .mde-container h4, .mde-container h5, .mde-container h6 { margin-bottom: 0px; padding-bottom: 0.2em; } .mde-controls { margin: 5px 0px; padding: 0px; } .mde-controls li { line-height: 18px; min-width: 32px; display: inline-block; text-align: center; margin-right: 5px; } .mde-focus { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: #86B7FE; outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); } .mde-i-b { font-weight: bold; } .mde-i-i { font-style: italic; } .mde-i-u { text-decoration: underline; } .mde-i-s { text-decoration: line-through; } /* AI Chat shit */ #conversation_history { max-height: 600px; overflow-y: auto; padding: 25px; border-radius: 25px; box-shadow: 3px 3px 5px var(--bs-secondary-bg-subtle); background: var(--bs-body-bg); margin-bottom: 50px; } #goat_whisper_message { border-radius: 25px; box-shadow: 3px 3px 5px var(--bs-secondary-bg-subtle); background: var(--bs-body-bg); width: 100%; border: 0px; width: 800px; padding: 10px 20px 0px; } #goat_whisper_message:disabled { background-color: var(--bs-secondary-bg-subtle); } #goat_whisper { margin-bottom: 50px; margin-left: 25px; } .chat-message { padding: 10px 20px 0px 20px; margin-top: 25px; position: relative; } .user-message { margin-left: 100px; } .user-message .message-text { margin-right: 30px; } .user-message .message-icon { right: 0; } .user-message .message-time { text-align: right; margin-right: 30px; } .agent-response { margin-right: 100px; } .agent-response .message-text { margin-left: 30px; } .agent-response .message-icon { left: 0; } .agent-response .message-time { text-align: left; margin-left: 30px; } .message-text { background-color: var(--bs-secondary-bg-subtle); border-radius: 10px; min-height: 30px; padding: 10px 20px; } .message-icon { position: absolute; bottom: 30px; width: 40px; height: 40px; border-radius: 20px; } .message-icon-pending { bottom: 0px !important; } .message-time { font-size: 12px; margin-top: 10px; } .message-text table { width: 100%; margin-bottom: 25px; } .message-text thead { background: #0054a3; color: #F6F7F9; } .message-text th { padding: 2px 5px; } .message-text td { padding: 2px 5px; } .message-list tbody:nth-child(2) tr td { background: var(--bs-body-bg); } .ellipsis::after { content: ''; animation: ellipsis 1.4s infinite; } @keyframes ellipsis { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } .message-author { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); margin-bottom: 3px; } /* ================================================================= MODERNIZATION LAYER · spacing / borders / radius / depth Appended after the existing rules so it overrides by source order. Colors are inherited from the palette above; this layer only reshapes geometry, depth, and motion. ================================================================= */ :root { --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --hairline: color-mix(in srgb, var(--bs-body-color) 14%, transparent); --hairline-strong: color-mix(in srgb, var(--bs-body-color) 24%, transparent); --shadow-sm: 0 1px 2px rgba(2, 6, 13, .40); --shadow: 0 8px 24px -8px rgba(2, 6, 13, .55), 0 2px 6px rgba(2, 6, 13, .35); --shadow-lg: 0 24px 60px -16px rgba(2, 6, 13, .65), 0 6px 16px rgba(2, 6, 13, .40); --ring: 0 0 0 3px color-mix(in srgb, #0083ff 38%, transparent); --ease: cubic-bezier(.4, 0, .2, 1); } /* Smooth interaction states everywhere they matter */ a, button, .btn, #it_module_nav li, #account_nav li, .tickets-list tbody tr, .footer-tll, input, select, textarea { transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } /* Visible keyboard focus */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); } /* Distinct link hue — warm amber/gold (dark) / deep gold (light), via token */ a, span[data-role='ajax-nav'] { color: var(--link); } a:hover, span[data-role='ajax-nav']:hover { color: var(--link-hover); } /* ---------- App shell ---------- */ #it_frame_nav { height: 64px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--bs-dark-bg-subtle) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #it_frame_content { padding: 40px 48px; border-radius: var(--radius); box-shadow: var(--shadow); } body { min-height: 100vh; display: flex; flex-direction: column; } #it_frame_footer { position: static; margin-top: auto; flex-shrink: 0; height: 65px; display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 0 25px; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--bs-dark-bg-subtle) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #it_frame_footer .footer-version { float: none; line-height: normal; margin: 0 auto 0 0; } #it_frame_footer .footer-tll { line-height: normal; margin-right: 0; } #it_frame_footer .i18n, #it_frame_footer .select2 { margin-right: 0; } .footer-tll:hover { color: var(--bs-body-color); } #it_module_nav li { padding: 0 16px; border-radius: var(--radius-sm); line-height: 40px; height: 40px; margin: 12px 2px; } #it_module_nav li:hover { transform: translateY(-1px); color: #5BB0FF; background: color-mix(in srgb, #0083ff 12%, transparent); } .itportal-logo span:hover { transform: none; color: #5BB0FF; } #account_nav { margin-top: 8px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); } #account_nav li { border-bottom: 1px solid var(--hairline); } #account_nav li:last-child { border-bottom: 0; } #account_info:hover .account-icon { box-shadow: 0 0 0 2px #0083ff; } /* ---------- Content cards ---------- */ .content-element { border-radius: var(--radius-sm); } /* ---------- Login / Logout: de-stodgify ---------- */ .login-box { width: min(460px, calc(100vw - 32px)); height: auto; min-height: 336px; padding: 40px 40px 44px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--bs-dark-bg-subtle); box-shadow: var(--shadow-lg); overflow: hidden; } .login-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, #0a6cc4, transparent); opacity: .5; } .login-logo { width: 230px; margin: 6px auto 16px; padding-left: 0; } .login-tagline { font-size: 1.5rem; letter-spacing: .2px; margin: 0 0 4px; color: var(--bs-body-color); } .login-select-wrapper { width: 100%; margin-top: 34px; gap: 16px; justify-content: center; align-items: flex-start; } .login-identity { width: 240px; } .login-item-wrapper { margin-right: 0; width: 240px; } .login-local-wrapper { margin-top: 22px; gap: 8px; } .login-local-wrapper input { width: 100%; max-width: 320px; border-radius: var(--radius-sm); } .login-local-wrapper p { margin-top: 26px; color: var(--bs-secondary-color); } #login_button, #logout_button { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 24px; line-height: 1; border-radius: var(--radius-sm); } #logout_button { margin: 10px auto; } .logout-select-wrapper { width: 100%; margin-top: 20px; padding: 8px 0 0; } .logout-text { font-size: 1.75rem; font-weight: 600; letter-spacing: .2px; display: block; margin-bottom: 22px; } .logout-logo { position: static; display: block; width: 140px; margin: 30px auto 0; opacity: .85; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--radius-sm); } .btn-primary:hover, .btn-ai:hover, .btn-success:hover, .btn-danger:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-primary:active { transform: translateY(0); } .btn-build { border-radius: var(--radius); } .btn-premium { border-radius: var(--radius-sm); } /* ---------- Inputs / select2 ---------- */ input, textarea, select, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-radius: var(--radius-sm) !important; } /* Login provider stays square so the select2 dropdown aligns flush */ .login-select-wrapper select, .login-select, .login-select-wrapper .select2-container--default .select2-selection--single, .login-select-wrapper .select2-container--default .select2-selection--multiple { border-radius: 0 !important; } input:focus, textarea:focus { box-shadow: var(--ring); border-color: #0083ff; } /* ---------- Tickets table ---------- */ .tickets-list { border-collapse: separate; border-spacing: 0; } .tickets-list thead td { padding: 10px 12px; border-bottom: 1px solid var(--hairline-strong); } .tickets-list tbody td { padding: 13px 12px; border-bottom: 1px solid var(--hairline); } .tickets-list tbody tr:hover td { background: color-mix(in srgb, #0083ff 8%, transparent); } /* ---------- Messages / lightboxes ---------- */ .it-message { border-radius: var(--radius-sm); padding: 10px 16px; } #lightbox_content, .page-lightbox, .module-lightbox { border-radius: var(--radius); } /* ---------- Vizzy chat ---------- */ #conversation_history { border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; } #goat_whisper_message { border-radius: var(--radius-lg); box-shadow: var(--shadow); } .message-text { border-radius: 16px; padding: 12px 18px; } .user-message .message-text { border-bottom-right-radius: 4px; } .agent-response .message-text { border-bottom-left-radius: 4px; } .message-icon { border-radius: var(--radius-pill); } .message-author { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); margin-bottom: 4px; } /* ---------- Rendered markdown: Vizzy chat + ticket notes ---------- */ /* shared scope: chat bubbles and the note body cell (not the metadata column) */ .message-text table, .ticket-note td:not(.metadata) table { width: 100%; margin: 8px 0 16px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; font-size: 14px; line-height: 1.45; } .message-text thead, .ticket-note td:not(.metadata) thead { background: color-mix(in srgb, #0083ff 16%, var(--bs-secondary-bg)); color: var(--bs-emphasis-color); } .message-text th, .ticket-note td:not(.metadata) th { padding: 9px 14px; text-align: left; font-family: "myriad-pro", sans-serif; font-weight: 700; border-bottom: 1px solid var(--hairline-strong); } .message-text td, .ticket-note td:not(.metadata) td { padding: 9px 14px; vertical-align: top; border-bottom: 1px solid var(--hairline); } .message-text tbody tr:last-child td, .ticket-note td:not(.metadata) tbody tr:last-child td { border-bottom: 0; } .message-text tbody tr:nth-child(even), .ticket-note td:not(.metadata) tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bs-body-color) 4%, transparent); } /* paragraphs / lists / spacing */ .message-text p, .ticket-note td:not(.metadata) p { margin: 0 0 10px; } .message-text > :last-child, .ticket-note td:not(.metadata) > :last-child { margin-bottom: 0; } .message-text ul, .message-text ol, .ticket-note td:not(.metadata) ul, .ticket-note td:not(.metadata) ol { margin: 0 0 12px; padding-left: 22px; } .message-text li, .ticket-note td:not(.metadata) li { margin: 3px 0; } /* inline code + code blocks */ .message-text code, .ticket-note td:not(.metadata) code { font-family: "source-code-pro", monospace; font-size: .88em; background: color-mix(in srgb, var(--bs-body-color) 10%, transparent); padding: 1px 6px; border-radius: 5px; } .message-text pre, .ticket-note td:not(.metadata) pre { margin: 8px 0 14px; padding: 12px 14px; background: var(--bs-body-bg); border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow-x: auto; } .message-text pre code, .ticket-note td:not(.metadata) pre code { background: none; padding: 0; font-size: .85em; } /* blockquotes + headings */ .message-text blockquote, .ticket-note td:not(.metadata) blockquote { margin: 8px 0; padding: 4px 14px; border-left: 3px solid color-mix(in srgb, #0083ff 55%, transparent); color: var(--bs-secondary-color); } .message-text h1, .message-text h2, .message-text h3, .message-text h4, .message-text h5, .message-text h6, .ticket-note td:not(.metadata) h1, .ticket-note td:not(.metadata) h2, .ticket-note td:not(.metadata) h3, .ticket-note td:not(.metadata) h4, .ticket-note td:not(.metadata) h5, .ticket-note td:not(.metadata) h6 { margin: 14px 0 6px; line-height: 1.25; } /* ---------- Respect motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* ================================================================= THEME: LIGHT MODE Dark remains the default (set on ). Surfaces, text, hairlines and striping already flow through Bootstrap vars + color-mix(var(--bs-body-color)...), so they flip automatically; below we set the light palette and override the few backgrounds that were hardcoded dark. ================================================================= */ [data-bs-theme="light"] { color-scheme: light; /* surfaces + text */ --bs-body-bg: #E9EDF2; /* page */ --bs-dark-bg-subtle: #FFFFFF; /* cards: login box, content frame, nav, footer */ --bs-secondary-bg-subtle: #EAEEF3; --bs-secondary-bg: #DEE4EC; --bs-secondary-color: #5A6473; --bs-emphasis-color: #0B1220; --bs-border-color: #CDD5DF; --bs-body-color: #1F2733; /* brand controls */ --bs-btn-bg: #0A6CC4 !important; --bs-pagination-color: #0A6CC4 !important; /* tokens */ --link: #8A6512; --link-hover: #6E5210; --action-text: #FFF7E6; --action-active: #5C440D; --ajax-track: #E3E8EF; --ajax-accent: #0A6CC4; /* lighter shadows for a light surface */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .12); --shadow: 0 8px 24px -8px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .10); --shadow-lg: 0 24px 60px -16px rgba(15, 23, 42, .22), 0 6px 16px rgba(15, 23, 42, .12); } /* Overrides for backgrounds that were hardcoded for dark */ [data-bs-theme="light"] .ajax-loading { background: var(--bs-secondary-bg-subtle) !important; } [data-bs-theme="light"] .duck-loading, [data-bs-theme="light"] .duck-error, [data-bs-theme="light"] .duck-duck-go { background: rgba(244, 246, 249, 0.9); } [data-bs-theme="light"] .it-message.error { background: #FDE7E9; border-color: #C0414B; } [data-bs-theme="light"] .ticket-updated span { color: #0A6CC4; } /* ================================================================= THEME TOGGLE (nav button) ================================================================= */ .theme-toggle { float: right; height: 36px; width: 36px; margin: 12px 25px 12px 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: transparent; color: var(--bs-body-color); font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease); } .theme-toggle:hover { background: color-mix(in srgb, #0083ff 12%, transparent); } .theme-toggle .icon-light { display: none; } .theme-toggle .icon-dark { display: inline; } [data-bs-theme="light"] .theme-toggle .icon-dark { display: none; } [data-bs-theme="light"] .theme-toggle .icon-light { display: inline; } /* Login/logout use the white X10 logo, so keep the auth card dark in light mode (logo + content stay legible); border kept, just made visible on dark. */ [data-bs-theme="light"] .login-box { background: #14171C; color: #C5CCD6; border-color: rgba(255, 255, 255, 0.12); box-shadow: var(--shadow-lg); } [data-bs-theme="light"] .login-tagline { color: #C5CCD6; } [data-bs-theme="light"] .login-label, [data-bs-theme="light"] .login-local-wrapper p { color: #8B95A3; } /* Light-mode contrast fixes */ /* Chat bubbles: lift to white + hairline so they read against the panel */ [data-bs-theme="light"] .message-text { background: #FFFFFF; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); } /* Ticket row hover: base sets a light gray text color that is illegible on the light hover background — use dark text instead. */ [data-bs-theme="light"] .tickets-list tbody tr:hover td { color: var(--bs-emphasis-color); } [data-bs-theme="light"] .tickets-list tbody tr.ticket-closed:hover td { color: var(--bs-secondary-color); } .message-history-label { text-align: center; font-style: italic; font-size: 12px; } /* ================================================================= VIZZY COMPOSER — finish the message input (theme-aware) ================================================================= */ .message-history-label { color: var(--bs-secondary-color); margin-bottom: 14px; } /* tighten the gap so the composer reads as part of the chat */ #conversation_history { margin-bottom: 22px; } /* input: full width, hairline + focus ring like the rest of the site (border-radius comes from the global textarea rule = --radius-sm) */ #goat_whisper_message { width: 100%; min-height: 64px; max-height: 220px; padding: 14px 18px; border: 1px solid var(--hairline); background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: none; resize: vertical; font-family: "proxima-nova", sans-serif; font-size: 15px; line-height: 1.5; } #goat_whisper_message:focus { outline: none; border-color: #0083ff; box-shadow: var(--ring); } #goat_whisper_message:disabled { background-color: var(--bs-secondary-bg-subtle); } /* Send: right-aligned beneath the input, content-width */ #goat_whisper { display: block; width: fit-content; margin: 14px 0 40px auto; padding: 9px 28px; } /* ================================================================= VIZZY HEADER + SUGGESTED PROMPTS (above the chat history) ================================================================= */ #it_frame_inner_content h3 { margin-bottom: 4px; } .vizzy-subhead { margin: 2px 0 22px; max-width: 720px; color: var(--bs-secondary-color); font-size: 14px; line-height: 1.5; } .vizzy-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .vizzy-chip { padding: 7px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--bs-body-bg); color: var(--bs-body-color); font-family: "proxima-nova", sans-serif; font-size: 13px; cursor: pointer; transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); } .vizzy-chip:hover { border-color: #0083ff; background: color-mix(in srgb, #0083ff 12%, transparent); color: var(--bs-emphasis-color); } /* ================================================================= VIZZY SUGGESTION CARDS (richer alternative to the chips, fills the header band above the chat history) ================================================================= */ .vizzy-eyebrow { margin: 0 0 10px; font-family: "myriad-pro", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--bs-secondary-color); } .vizzy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 26px; } .vizzy-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer; transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .vizzy-card:hover { border-color: #0083ff; background: color-mix(in srgb, #0083ff 10%, transparent); transform: translateY(-1px); } .vizzy-card-title { font-weight: 600; font-size: 14px; } .vizzy-card-hint { font-size: 12px; color: var(--bs-secondary-color); } /* ================================================================= RESPONSIVE · mobile / tablet / desktop Layout only (sizes, flex/grid, display). No colors here, so this behaves identically in light and dark — both ride the tokens. Breakpoints: desktop > 1024 (unchanged) · tablet <= 1024 · mobile <= 767 ================================================================= */ /* ---------- Tablet and below: make fixed-width shells fluid ---------- */ @media (max-width: 1024px) { #it_frame_content { width: auto; margin: 28px 24px 96px; padding: 32px 30px; } .it-message { width: auto; max-width: 1000px; margin: 15px 24px 0; } .it-message p { width: auto; } #goat_whisper_message { width: 100%; } } /* ---------- Mobile ---------- */ @media (max-width: 767px) { /* content shell */ #it_frame_content { margin: 14px 10px 84px; padding: 20px 16px; border-radius: var(--radius-sm); } /* nav: icon-only logo, hide username, tighten everything */ #it_frame_nav { height: 56px; } .itportal-logo { margin: 0 10px; font-size: 16px; } .itportal-logo span { display: none; /* keep the X10 icon, drop the wordmark */ } #it_module_nav li { font-size: 15px; padding: 0 8px; height: 36px; line-height: 36px; margin: 10px 1px; } #account_username { display: none; } #account_info { margin-right: 12px; } .account-icon { margin: 9px 0 9px 8px; } .theme-toggle { height: 32px; width: 32px; margin: 12px 10px 12px 0; font-size: 14px; } #account_search, #account_context { float: none; width: auto; } /* headings */ .home-welcome { font-size: 22px; } .ui-tabs-nav { font-size: 18px; } /* Vizzy header */ .vizzy-subhead { max-width: 100%; } /* chat: hide the avatars on mobile (they collided with the bubble text) and reclaim the gutter they used to occupy */ #conversation_history { padding: 16px; } .chat-message { padding: 8px 0 0; } .message-icon { display: none; } .user-message { margin-left: 28px; } .agent-response { margin-right: 28px; } .user-message .message-text, .user-message .message-time { margin-right: 0; } .agent-response .message-text, .agent-response .message-time { margin-left: 0; } .message-text { padding: 10px 14px; } /* composer: full-width send for an easy tap target */ #goat_whisper_message { padding: 12px 14px; } #goat_whisper { width: 100%; margin: 14px 0 36px; } /* tables: shrink type/padding so 4 columns fit */ .tickets-list, .message-text table, .ticket-note td:not(.metadata) table { font-size: 13px; } .tickets-list thead td { font-size: 12px; } .tickets-list tbody td, .tickets-list thead td { padding: 10px 8px; } /* ticket notes: tighten the author column, drop the negative offsets */ .ticket-note td { padding: 12px 0 28px; } .ticket-note td.metadata { width: 84px; } .ticket-note td.metadata span, .ticket-note td.metadata img { margin-left: 0; } /* multi-column forms stack */ .dy-build-pod, .add-contact-fields div { width: 100%; margin-right: 0; display: block; } .add-contact-fields div { text-align: left; } /* service-nav buttons */ .btn-build { margin: 0 0 12px; } /* login / logout: stack the provider row, full-width actions */ .login-box { padding: 28px 22px 32px; } .login-logo { width: 200px; } .login-select-wrapper { flex-direction: column; align-items: stretch; gap: 12px; } .login-identity, .login-item-wrapper { width: 100%; } /* select fills the column so the (now right-aligned) label lines up with it */ .login-provider, .login-select-wrapper select, .login-select-wrapper .select2-container { width: 100% !important; } .login-label { padding-right: 0; } #login_button, #logout_button { width: 100%; } /* footer: wrap to its own height, center the rows */ #it_frame_footer { height: auto; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 12px 16px; } .footer-version { width: 100%; margin: 0; text-align: center; } .footer-tll { margin: 0; } } /* ---------- Small phones ---------- */ @media (max-width: 420px) { #it_frame_content { padding: 16px 12px; } #it_module_nav li { font-size: 14px; padding: 0 6px; } .vizzy-cards { grid-template-columns: 1fr; } /* one card per row */ .home-welcome { font-size: 20px; } } /* ================================================================= SYNC + RESPONSIVE for the floated Vizzy page-header image (.vizzy-page-header floats right at 200px; #conversation_history clears it. These rules adapt that for tablet/mobile.) ================================================================= */ .vizzy-page-header { display: block; float: right; height: 200px; } #conversation_history { clear: both; margin-top: 75px; } /* keep the eyebrow + cards below the icon instead of colliding with it */ .vizzy-eyebrow { clear: right; } @media (max-width: 1024px) { .vizzy-page-header { height: 160px; } } @media (max-width: 767px) { /* stop the tall icon from squeezing the intro into a sliver: drop the float, shrink it, center it above the text */ .vizzy-page-header { float: none; height: 104px; margin: 0 auto 12px; } .vizzy-eyebrow { clear: none; } #conversation_history { margin-top: 28px; } } @media (max-width: 420px) { .vizzy-page-header { height: 88px; } } /* ================================================================= Vizzy chat links -> same amber link token as the footer (covers :visited and any Bootstrap link color in the chat subtree) ================================================================= */ .message-text a, .message-text a:link, .message-text a:visited, #conversation_history a, #conversation_history a:visited { color: var(--link); } .message-text a:hover, #conversation_history a:hover { color: var(--link-hover); } /* ================================================================= RESPONSIVE — ticket summary / single-ticket page ================================================================= */ @media (max-width: 1024px) { /* the fixed 750px update form is the main thing that blows out the layout below desktop — let it go fluid */ #ticket_update_form { width: auto; max-width: 750px; margin: 32px 0 0; } } @media (max-width: 767px) { #ticket_update_form { margin-top: 22px; } /* oversized display type */ .ticket-summary { font-size: 26px; } .ticket-summary span { font-size: 13px; line-height: 20px; margin-top: -16px; } .ticket-summary-title { font-size: 32px; text-align: left; } .ticket-summary-title span, .ticket-summary-label { font-size: 15px; margin-right: 8px; } /* right-aligned blocks read better left-aligned on a phone */ .ticket-summary-back, .ticket-updated, .ticket-update-row, .profile-update-row { text-align: left; } /* the priority badge was absolutely pinned (top:185/right:0) and collided with the stacked content — put it back in flow */ .ticket-priority { position: static; float: none; display: inline-block; margin: 0 0 12px; } /* summary list: label above value instead of a 125px inline column */ .ticket-summary-list span { width: auto; display: block; margin-top: 0; } .ticket-summary-list li { font-size: 16px; margin-bottom: 12px; } .ticket-config-details { min-height: 0; } .ticket-config-details ul li { font-size: 16px; } /* stacked update fields */ .profile-update-cell, .ticket-update-cell { display: block; margin-left: 0; margin-bottom: 12px; text-align: left; } /* form labels are id-scoped to right-align on desktop — flip them on mobile */ #ticket_update_form label, #account_form label { text-align: left; } } /* ================================================================= .btn-action — gold action button (same behavior as .btn-primary, built on the link-gold token). For: upload diag, update ticket, summary contact buttons, Vizzy Send. Theme-aware via tokens. ================================================================= */ .btn-action { background-color: var(--link); border-color: var(--link); color: var(--action-text); font-weight: bold; } .btn-action:hover { background-color: var(--link-hover); border-color: var(--link-hover); color: var(--action-text); } .btn-action:active { background-color: var(--action-active) !important; border-color: var(--action-active) !important; color: var(--action-text) !important; } .btn-action:disabled, .btn-action.disabled { background-color: var(--link); border-color: var(--link); color: var(--action-text); opacity: .55; } .vizzy-add-slack { display: block; margin-top: 35px; } .slack-auth-icon { font-size: 48px; display: inline-block; text-align: center; border: solid 2px #2FA84F; width: 75px; height: 75px; border-radius: 37.5px; color: #2FA84F; margin: 25px auto; } .slack-auth-complete { text-align: center; } .slack-auth-back { display: block; } .btn-chat-schedule { display: block; margin: 0px auto 10px; }