html { --theme-color: #1493ff; --theme-color-link: #1493ff; --theme-color-dark: #1e88e5; --theme-color-accent: #008a63; --theme-color-green: #008a63; --theme-color-red: #d9534f; --theme-background-color: #282d3a; --font-bold: 'Figtree Bold'; --font-medium: 'Figtree Medium'; --font-regular: 'Figtree Regular'; --font-light: 'Figtree Light'; } .font-bold { font-family: 'Figtree Bold'; } .font-medium { font-family: 'Figtree Medium'; } .font-regular { font-family: 'Figtree Regular'; } .font-light { font-family: 'Figtree Light'; } html, body { height: 100%; } html *, body * { outline: none !important; letter-spacing: 0.25px; } .mobile-nav-open .cookieinfo { display: none; } .mobile-nav-open .msg-top { display: none; } @media (min-width: 1300px) { .container { width: 1280px; padding: 0px; } } .fd-header { width: 100%; position: sticky; top: 0; z-index: 3; } .fd-body { width: 100%; position: relative; min-height: calc(100% - 320px); } @media (min-width: 1200px) { .fd-body:before { content: " "; position: absolute; height: 100%; width: 100%; z-index: -1; background-image: url(/assets/images/backgrounds/default-background.png); background-repeat: no-repeat; background-size: cover; max-height: 900px; } } @media (min-width: 1200px) { .fd-body-overlay:before { content: " "; position: absolute; height: 100%; width: 100%; z-index: -1; background: linear-gradient(to bottom, white 200px, #ffffffe0, whitesmoke 900px, whitesmoke 100%); } } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #bdbdbd; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #bdbdbd; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #bdbdbd; } ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-thumb { min-height: 30px; padding-top: 100px; border: 1px solid transparent; background-clip: padding-box; background-color: rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb:active { -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.5); } .invisible { visibility: hidden; transition: visibility 0s !important; } .header { height: 70px; position: relative; z-index: 3; } .header .container { position: relative; height: 100%; } .header .container .header-right { float: right; height: 100%; } .header .container .header-right .cross { display: none; } .header .container .header-right .nav-phone { padding: 5px 2px; display: table-cell; vertical-align: middle; } .header .container .header-right .nav-phone a { font-family: var(--font-medium); font-size: 14px; color: #1493ff; } .header .container .header-left { float: left; height: 100%; } .header .container .header-left .section { font-family: var(--font-bold); text-transform: uppercase; display: block; padding: 1rem 0; font-size: 2rem; } .header .container .icon-bar { display: none; float: right; padding-top: 22px; } .header .container .icon-bar a { color: white; font-size: 30px; } .header .container .logo-area { float: left; width: 270px; top: 50%; transform: translateY(-50%); position: relative; margin-right: 20px; height: 100%; } .header .container .logo-area a { display: inline-block; background-image: url(/assets/images/logos-tm/sportsdataio-dark-270.png); background-repeat: no-repeat; background-position: center; background-size: contain; height: 100%; width: 100%; max-width: 250px; } @media (max-width: 1200px) { .header .container .logo-area a { background-image: url(/assets/images/logos-tm/sportsdataio-light-270.png); } } .header .container .logo-area a img { width: 100%; display: none; } @media (min-width: 1200px) { .header .container .nav-section-header { font-size: 2rem; } .header .container .nav-item-header { font-size: 1.5rem; } .header .container .nav-item-sub-header { font-size: 1rem; } } @media (max-width: 1199px) { .header .container .header-nav.nav-actions .nav-items { display: grid; grid-template-columns: auto min-content min-content min-content; grid-auto-flow: column; grid-gap: 15px; align-items: center; } .header .container .header-nav.nav-actions .nav-items .cross { display: block; } .header .container .header-nav.nav-actions .nav-items .cross a { color: #333333; font-size: 20px; } .header .container .header-nav.nav-actions .nav-items .cross a:hover { color: #1493ff; } .header .container .header-nav.nav-actions .nav-link a { text-transform: uppercase; font-family: var(--font-medium); font-size: 14px; } .header .container .header-nav .nav-item, .header .container .header-nav .nav-action { padding-left: 25px; } .header .container .header-nav .section { cursor: pointer !important; } .header .container .header-nav .section a { display: block; color: #333333 !important; } .header .container .header-nav .expandable { padding-left: 25px; position: relative; } .header .container .header-nav .expandable .expand-item { display: none; } .header .container .header-nav .expandable .expand-item > a, .header .container .header-nav .expandable .expand-item > li > a { display: block; padding: 10px 0; padding-left: 15px; } .header .container .header-nav .expandable .expand-item .desc { display: none; } .header .container .header-nav .expandable .expand:before { content: "\f067"; font-family: "Font Awesome 5 Pro"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; position: absolute; left: 0; transition: 0.3s all; cursor: pointer; } .header .container .header-nav .expandable.expanded .expand:before { content: "\f068"; } .header .container .header-nav .expandable:not(.expanded) .expand:before { content: "\f067" !important; } .header .container .header-right .nav-action { padding-left: 0; } } @media (max-width: 1199px) { body.active-transition { transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } body.active-transition.highlight { transform: translateX(-360px); -moz-transform: translateX(-360px); -webkit-transform: translateX(-360px); overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } body.active-transition.highlight > .overlay { display: block; z-index: 5; } body > .overlay { background-color: rgba(0, 0, 0, 0.7); overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; } .header .container .icon-bar { display: block; } .header .container .header-left { float: left; width: 360px; /*background-color: #fff;*/ position: fixed; top: 0; bottom: 0; right: -360px; overflow-y: scroll; overflow-x: hidden; padding-left: 20px; padding-top: 45px; padding-bottom: 15px; } .header .container .header-right { float: left; width: 360px; background-color: white; position: fixed; right: -360px; height: auto; overflow-y: hidden; overflow-x: hidden; top: 0; height: 50px; padding: 15px 20px; } .header .container .header-right .cross { display: block; } } .desktop-social, .mobile-social { float: right; padding: 5px 0; } @media (min-width: 1200px) { .desktop-social { display: block; } .mobile-social-row { display: none; } } @media (max-width: 1200px) { .desktop-social { display: none; } .mobile-social-row { display: block; } } @media (min-width: 640px) { .mobile-only { display: none; } .non-mobile-only { display: block; } } @media (max-width: 640px) { .mobile-only { display: block; } .non-mobile-only { display: none; } } @media (max-width: 640px) { .col-xxs-12 { width: 100%; } } #toast-container.toast-bottom-center > div { font-size: 12px; width: 350px; text-align: center; } input[type='number'] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } .vertical-center { top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); position: relative; } .msg-top { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-top: 1px solid white; border-bottom: 1px solid white; padding: 10px; position: relative; z-index: 1; line-height: 135%; } .msg-top-success { color: white; background-color: #47a15a; border-color: #045705; text-shadow: 2px 2px 2px #272727; } .msg-top-error { color: white; background-color: #c34744f2; border-color: #630200; text-shadow: 1px 1px 2px #1c1c1c; } .form-control-danger { border-color: #d65552 !important; } .form-control-error-msg { margin-top: 5px; color: #d65552; font-size: 13px; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row-eq-height.reverse { flex-wrap: wrap-reverse; } /*.k-button-group .k-button.k-state-active, .k-button-group .k-button:active { z-index: 1 !important; }*/ .small-caps { text-transform: none; font-variant: small-caps; } .no-wrap { white-space: nowrap; } .ex-links { display: flex; flex-flow: row wrap; gap: 2rem; justify-content: center; } .ex-links::-webkit-scrollbar { width: 11px; height: 11px; border-radius: 5px; cursor: pointer; } .ex-links::-webkit-scrollbar-thumb { border-radius: 4px; cursor: pointer; } .ex-links .ex-link { width: 160px; display: flex; transition: all 0.2s; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05); flex-flow: column; border: 1px solid #d0d0d0; background-color: white; border-radius: 4px; height: 140px; gap: 1rem; padding: 0.5rem 1rem; } .ex-links .ex-link.no-icon { height: 70px; } .ex-links .ex-link:hover { border-color: #1493ff; transform: scale(1.05); } .ex-links .ex-link:hover .ex-icon, .ex-links .ex-link:hover .ex-title { color: #1493ff !important; } .ex-links .ex-link .ex-icon { font-size: 50px; transition: all 0.2s; color: rgba(20, 147, 255, 0.8); flex: 1 0 auto; align-items: center; display: flex; justify-content: center; } .ex-links .ex-link .ex-content { margin: auto; display: flex; align-items: center; flex: 0 0 50px; } .ex-links .ex-link .ex-content .ex-title { font-family: var(--font-medium); transition: all 0.3s; color: #555555; line-height: 150%; } .ex-links .ex-link .ex-content .ex-desc { line-height: 175%; font-size: 12px; color: #555555 !important; } .ex-links .ex-case { display: inline-grid; grid-template-rows: auto min-content; transition: all 0.2s; align-items: center; } .ex-links .ex-case:hover { border-color: #1493ff; } .ex-links .ex-case:hover .ex-img { opacity: 1; } .ex-links .ex-case:hover .ex-title { color: #1493ff; } .ex-links .ex-case .ex-img { width: 100%; text-align: center; opacity: 0.8; transition: all 0.3s; } .ex-links .ex-case .ex-content { margin-top: 5px; } .ex-links .ex-case .ex-content .ex-title { font-family: var(--font-medium); margin: 3px 0 5px; transition: all 0.3s; line-height: 150%; } .sdio .content-page { padding: 20px 0; } @media (min-width: 990px) { .sdio .content-page { padding: 40px 0; } .sdio .content-page .content-container { border: 1px solid #767676; box-shadow: 2px 2px 20px 6px rgba(60, 60, 60, 0.32); } } .sdio .tab-section-container { margin: 10px 0; } @media (min-width: 990px) { .sdio .tab-section-container { margin: 40px 0; border: 1px solid #cfcfcf; box-shadow: 4px 4px 8px #e5e5e5; } } .is-hidden { visibility: hidden; height: 0px; margin: 0px !important; padding: 0px !important; } .flipbook { width: 100%; height: 100%; min-height: 400px; margin: auto; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); } .flipbook .page { width: 100%; height: 100%; background: white; display: flex; align-items: center; justify-content: center; } .flipbook canvas { max-width: 100%; max-height: 100%; } .sdio-btn { background: none; color: white; border: none; padding: 5px 15px; font-family: 'Figtree Medium'; cursor: pointer; outline: inherit; display: grid; grid-auto-columns: max-content; grid-auto-flow: column; grid-gap: 6px; align-items: center; border-radius: 4px; display: inline-block; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15); text-shadow: none !important; } .sdio-btn.sdio-btn-primary { background-color: #1493ff; border: 1px solid #1493ff; } .sdio-btn:hover, .sdio-btn:focus { background-color: white; color: #1493ff; } .sdio-btn i { font-size: 8px; width: 8.25px; transition: transform 0.3s ease; }