/* The text of a guide or blog article as its authors wrote it: HTML of the old site on Bootstrap 3. This is the part
   of Bootstrap 3 that text uses (grid, tables, images, buttons, icons, headings), only inside .ag-prose and in the
   design system's colours, so the stored HTML stays as it is and the page around it needs no Bootstrap. */

@font-face {
	font-family: "Glyphicons Halflings";
	src: url("/fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),
		url("/fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff") format("woff");
	font-display: swap;
}

.ag-prose { color: var(--text); font-size: 16px; line-height: 1.7; overflow-wrap: break-word; }
.ag-prose::after { content: ""; display: table; clear: both; }
.ag-prose :is(h1, h2, h3, h4, h5) { margin: 1.2em 0 0.5em; color: var(--text); font-weight: 700; line-height: 1.3; letter-spacing: -0.1px; }
.ag-prose h1 { font-size: 28px; }
.ag-prose h2 { font-size: 22px; }
.ag-prose h3 { font-size: 19px; }
.ag-prose h4 { font-size: 17px; }
.ag-prose h5 { font-size: 15px; }
.ag-prose > :first-child, .ag-prose > :first-child > :first-child { margin-top: 0; }
.ag-prose p { margin: 0 0 1em; }
.ag-prose :is(ul, ol) { margin: 0 0 1em; padding-left: 1.4em; }
.ag-prose li { margin: 0.25em 0; }
.ag-prose a { color: var(--primary-soft, var(--primary)); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.ag-prose a:hover { text-decoration-color: currentColor; }
.ag-prose hr { margin: 24px 0; border: 0; border-top: 1px solid var(--border); }
.ag-prose img { max-width: 100%; height: auto; }
.ag-prose iframe { max-width: 100%; border: 0; }
.ag-prose strong, .ag-prose b { font-weight: 700; }

/* Grid: Bootstrap 3's floats and widths at its own breakpoints (768 / 992 / 1200 px). */
.ag-prose .row { margin-left: -15px; margin-right: -15px; }
.ag-prose .row::before, .ag-prose .row::after { content: " "; display: table; }
.ag-prose .row::after { clear: both; }
.ag-prose [class*="col-xs-"], .ag-prose [class*="col-sm-"], .ag-prose [class*="col-md-"], .ag-prose [class*="col-lg-"] {
	position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; box-sizing: border-box;
}
.ag-prose .col-xs-1 { float: left; width: 8.33333%; } .ag-prose .col-xs-2 { float: left; width: 16.66667%; }
.ag-prose .col-xs-3 { float: left; width: 25%; } .ag-prose .col-xs-4 { float: left; width: 33.33333%; }
.ag-prose .col-xs-6 { float: left; width: 50%; } .ag-prose .col-xs-8 { float: left; width: 66.66667%; }
.ag-prose .col-xs-9 { float: left; width: 75%; } .ag-prose .col-xs-11 { float: left; width: 91.66667%; }
.ag-prose .col-xs-12 { float: left; width: 100%; }
@media (min-width: 768px) {
	.ag-prose .col-sm-1 { float: left; width: 8.33333%; } .ag-prose .col-sm-3 { float: left; width: 25%; }
	.ag-prose .col-sm-4 { float: left; width: 33.33333%; } .ag-prose .col-sm-6 { float: left; width: 50%; }
	.ag-prose .col-sm-8 { float: left; width: 66.66667%; } .ag-prose .col-sm-11 { float: left; width: 91.66667%; }
	.ag-prose .col-sm-12 { float: left; width: 100%; }
}
@media (min-width: 992px) {
	.ag-prose .col-md-1 { float: left; width: 8.33333%; } .ag-prose .col-md-2 { float: left; width: 16.66667%; }
	.ag-prose .col-md-3 { float: left; width: 25%; } .ag-prose .col-md-4 { float: left; width: 33.33333%; }
	.ag-prose .col-md-5 { float: left; width: 41.66667%; } .ag-prose .col-md-6 { float: left; width: 50%; }
	.ag-prose .col-md-7 { float: left; width: 58.33333%; } .ag-prose .col-md-8 { float: left; width: 66.66667%; }
	.ag-prose .col-md-9 { float: left; width: 75%; } .ag-prose .col-md-10 { float: left; width: 83.33333%; }
	.ag-prose .col-md-11 { float: left; width: 91.66667%; } .ag-prose .col-md-12 { float: left; width: 100%; }
}
@media (min-width: 1200px) {
	.ag-prose .col-lg-3 { float: left; width: 25%; } .ag-prose .col-lg-4 { float: left; width: 33.33333%; }
	.ag-prose .col-lg-6 { float: left; width: 50%; } .ag-prose .col-lg-12 { float: left; width: 100%; }
}
.ag-prose .container { width: auto; padding: 0; }

/* Text and images */
.ag-prose .text-center { text-align: center; }
.ag-prose .text-left { text-align: left; }
.ag-prose .text-right { text-align: right; }
.ag-prose .center-block { display: block; margin-left: auto; margin-right: auto; }
.ag-prose .img-responsive { display: block; max-width: 100%; height: auto; }
.ag-prose .text-center .img-responsive, .ag-prose [style*="text-align: center"] .img-responsive, .ag-prose [style*="text-align:center"] .img-responsive { margin-left: auto; margin-right: auto; }
.ag-prose .img-bordered { border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 0 6px color-mix(in srgb, var(--text) 18%, transparent); }
.ag-prose .hidden { display: none !important; }
/* The old site's section heading: small capitals with a short green line under it. */
.ag-prose .heading { position: relative; margin: 20px 0; padding-bottom: 5px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 16px; font-weight: 600; text-transform: uppercase; }
.ag-prose .heading::after { content: ""; position: absolute; bottom: -1px; display: block; width: 48px; height: 1px; background: var(--primary); }

/* Tables */
.ag-prose table { border-collapse: collapse; border-spacing: 0; }
.ag-prose .table { width: 100%; max-width: 100%; margin-bottom: 20px; }
.ag-prose .table > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding: 8px; vertical-align: top; border-top: 1px solid var(--border); line-height: 1.45; }
.ag-prose .table-bordered, .ag-prose .table-bordered > :is(thead, tbody, tfoot) > tr > :is(th, td) { border: 1px solid var(--border); }
.ag-prose .table-responsive { min-height: 0.01%; overflow-x: auto; }
/* A table wider than a phone scrolls inside the article, never the page. */
@media (max-width: 767px) { .ag-prose table { display: block; max-width: 100%; overflow-x: auto; } }

/* Buttons the text carries (Bootstrap's success = the site's green, default = the secondary button) */
.ag-prose .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.ag-prose .btn-success { background: var(--primary); color: var(--on-primary); }
.ag-prose .btn-default { border: 1px solid var(--border-strong); background: var(--surface-container); color: var(--text); }
.ag-prose .btn-block { display: flex; width: 100%; }
.ag-prose .btn-lg { padding: 12px 24px; font-size: 17px; }
.ag-prose .btn-sm { padding: 5px 10px; font-size: 13px; }

/* Bootstrap 3's icon font, the icons the text uses */
.ag-prose .glyphicon, .ag-glyph { position: relative; top: 1px; display: inline-block; font-family: "Glyphicons Halflings"; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.glyphicon-euro::before { content: "\20ac"; } .glyphicon-search::before { content: "\e003"; }
.glyphicon-star::before { content: "\e006"; } .glyphicon-star-empty::before { content: "\e007"; }
.glyphicon-signal::before { content: "\e018"; } .glyphicon-time::before { content: "\e023"; }
.glyphicon-list-alt::before { content: "\e032"; } .glyphicon-eye-open::before { content: "\e105"; }
.glyphicon-calendar::before { content: "\e109"; } .glyphicon-comment::before { content: "\e111"; }
.glyphicon-bullhorn::before { content: "\e122"; } .glyphicon-hand-right::before { content: "\e127"; }
.glyphicon-flash::before { content: "\e162"; } .glyphicon-credit-card::before { content: "\e177"; }
.glyphicon-earphone::before { content: "\e182"; } .glyphicon-king::before { content: "\e211"; }
.glyphicon-piggy-bank::before { content: "\e225"; } .glyphicon-education::before { content: "\e233"; }
.glyphicon-menu-left::before { content: "\e257"; } .glyphicon-menu-right::before { content: "\e258"; }
.glyphicon-ok::before { content: "\e013"; } .glyphicon-remove::before { content: "\e014"; }
.glyphicon-info-sign::before { content: "\e086"; } .glyphicon-download-alt::before { content: "\e025"; }

/* Justified text (the authors' inline text-align) opens wide gaps between words on a phone: left-aligned there. */
@media (max-width: 600px) { .ag-prose [style*="justify"] { text-align: left !important; } }

/* Tabs (data-toggle="tab"; behaviour: public/js/ag-prose.js) */
.ag-prose .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 0; border-bottom: 1px solid var(--border); list-style: none; }
.ag-prose .nav-tabs > li { margin: 0 0 -1px; }
.ag-prose .nav-tabs > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--shape-sm) var(--shape-sm) 0 0; color: var(--text-muted); font-weight: 600; text-decoration: none; }
.ag-prose .nav-tabs > li > a:hover { background: var(--surface-container); color: var(--text); }
.ag-prose .nav-tabs > li.active > a { border-color: var(--border); border-bottom-color: var(--bg); background: var(--bg); color: var(--text); }
.ag-prose .tab-content > .tab-pane { display: none; }
.ag-prose .tab-content > .tab-pane.active { display: block; }
.ag-prose .fade { opacity: 0; transition: opacity 0.15s linear; }
.ag-prose .fade.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ag-prose .fade { transition: none; } }

/* Accordions: panels with a heading link that opens its body (data-toggle="collapse") */
.ag-prose .collapse { display: none; }
.ag-prose .collapse.in { display: block; }
.ag-prose .panel { margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--shape-sm); background: var(--surface-container-low); }
.ag-prose .panel-heading { padding: 0; border-bottom: 1px solid transparent; }
.ag-prose .panel-title { margin: 0; font-size: 16px; }
.ag-prose .panel-title > a { display: block; padding: 12px 16px; color: var(--text); text-decoration: none; }
.ag-prose .panel-title > a::before { content: "+"; display: inline-block; width: 1.2em; color: var(--primary); font-weight: 700; }
.ag-prose .panel-title > a[aria-expanded="true"]::before { content: "–"; }
.ag-prose .panel-body { padding: 12px 16px; border-top: 1px solid var(--border); }

/* Carousels: one slide at a time, indicators and arrows (data-ride / data-slide) */
.ag-prose .carousel { position: relative; }
.ag-prose .carousel-inner { position: relative; overflow: hidden; width: 100%; }
.ag-prose .carousel-inner > .item { display: none; position: relative; }
.ag-prose .carousel-inner > .item.active { display: block; }
.ag-prose .carousel-inner > .item > img, .ag-prose .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ag-prose .carousel-indicators { display: flex; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ag-prose .carousel-indicators li { width: 12px; height: 12px; border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer; text-indent: -999px; overflow: hidden; }
.ag-prose .carousel-indicators li.active { border-color: var(--primary); background: var(--primary); }
.ag-prose .carousel-control { position: absolute; top: 0; bottom: 0; display: flex; width: 12%; align-items: center; justify-content: center; color: var(--text); opacity: 0.7; text-decoration: none; }
.ag-prose .carousel-control.left { left: 0; } .ag-prose .carousel-control.right { right: 0; }
.ag-prose .carousel-caption { padding: 8px 0 0; color: var(--text-muted); font-size: 14px; text-align: center; }

/* Form fields the text carries (calculator, newsletter) */
.ag-prose .form-group { margin: 0 0 12px; }
.ag-prose .form-control { display: block; width: 100%; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--shape-sm); background: var(--surface-container-lowest, var(--bg)); color: var(--text); font: inherit; font-size: 16px; }
.ag-prose .form-control:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.ag-prose .input-sm { padding: 5px 10px; }
.ag-prose input[type="checkbox"], .ag-prose input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); }

/* The video window (a Bootstrap modal in the text): over the page with a dark backdrop */
.ag-prose .modal, .modal.ag-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
.ag-prose .modal.in, .modal.ag-modal.in { display: flex; }
.modal.ag-modal .modal-dialog { width: min(960px, 100%); }
.modal.ag-modal .modal-content { overflow: hidden; border-radius: var(--shape-md, 12px); background: #000; }
.embed-responsive { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The guides home (/guides, /bg): its text is the old landing page (sections #parallax, #home-circles, ...). */
.ag-home .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* Each section holds its floated columns (flow-root) and keeps its padding when it is also a .container. */
.ag-home > section { display: flow-root; padding: 40px 0; }
.ag-home > section.container { padding: 40px 24px; }
.ag-home #parallax { padding: 72px 16px; background: center / cover no-repeat url("/img/home/arbitrage-guides-training-surebet-background.png"); color: #fff; text-align: center; }
.ag-home #parallax :is(h1, a, .below-heading) { color: #fff; font-weight: 800; line-height: 1.1; text-shadow: 0 0 20px #444; }
.ag-home #parallax h1 { margin: 0 0 16px; font-size: clamp(36px, 7vw, 72px); }
.ag-home #parallax .below-heading { max-width: 780px; margin: 0 auto 32px; font-size: clamp(20px, 3.4vw, 36px); }
.ag-home #parallax a { display: inline-block; padding: 6px 16px; border: 2px solid #fff; border-radius: 2px; font-size: 22px; text-decoration: none; }
.ag-home #parallax a:hover { background: #fff; color: #444; text-shadow: none; }
.ag-home #parallax .no-gambling { margin: 48px 0 0; font-size: 15px; font-weight: 400; }
.ag-home #home-circles { text-align: center; }
.ag-home #home-circles::after { content: ""; display: table; clear: both; }
.ag-home .circle-icons { display: block; width: 86px; height: 86px; margin: 0 auto 8px; border-radius: 50%; background-image: url("/img/home/home-page-icons.png"); }
.ag-home .circle-icons:hover { box-shadow: 0 0 5px var(--border-strong); }
.ag-home .circle-icons.mission { background-position: 0 0; } .ag-home .circle-icons.course { background-position: -98px 0; }
.ag-home .circle-icons.invest { background-position: -193px 0; } .ag-home .circle-icons.video { background-position: -287px 0; }
.ag-home #home-circles h4 { margin: 8px 0 4px; font-size: 18px; }
.ag-home #home-circles p { color: var(--text-muted); font-size: 14px; text-transform: uppercase; }
.ag-home :is(#learn-section, #video-introduction) { border-block: 1px solid var(--border); background: var(--surface-container-low); }
.ag-home :is(#learn-section, #why-us, #video-introduction, #booies-trust) h2 { margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; text-align: center; text-transform: uppercase; }
.ag-home :is(#learn-section, #why-us, #video-introduction, #booies-trust) hr { max-width: 480px; margin: 0 auto 24px; }
.ag-home #learn-section ul { list-style: none; padding: 0; }
.ag-home #learn-section li { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.ag-home #learn-section li .glyphicon { margin-right: 10px; color: var(--primary); font-size: 20px; }
.ag-home #why-us .glyphicon { margin: 8px 0 0 12px; color: var(--primary); font-size: 40px; }
.ag-home #why-us h4 { margin: 0 0 4px; padding-left: 10px; font-size: 16px; }
.ag-home #why-us p { padding-left: 10px; }
.ag-home #why-us .col-md-6 { padding-bottom: 20px; }
.ag-home #video-introduction img { margin: 0 auto 20px; cursor: pointer; }

/* A box the authors gave a fixed pixel width (the newsletter form: 380 px) never runs past a phone's screen; the
   calculator (375 px of fields) scrolls inside its own box when the column is narrower. */
.ag-prose [style*="width"]:not(img):not(td):not(th):not(col) { max-width: 100%; box-sizing: border-box; }
.ag-prose .surebet-calculator-container { min-width: 0; max-width: 100%; overflow-x: auto; }