.cis-demo {
	--demo-red: #c32c2c;
	--demo-nav-offset: 0px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 8px 72px;
	color: #17191a;
}

.cis-demo *, .cis-demo *::before, .cis-demo *::after { box-sizing: border-box; }
.cis-demo button { font: inherit; }
.cis-demo.is-ended .demo-guide button,
.cis-demo.is-ended #incoming-call-controls button { opacity: .5; cursor: not-allowed; }

.cis-demo__intro {
	max-width: 760px;
	margin: 0 0 38px;
}

.cis-demo__eyebrow {
	margin-bottom: 10px;
	color: var(--demo-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cis-demo__intro h1 {
	margin: 0 0 16px;
	font: 800 clamp(36px, 5.4vw, 62px)/1 Arial, Helvetica, sans-serif;
	letter-spacing: -.04em;
	text-shadow: none;
}

.cis-demo__intro p {
	max-width: 700px;
	margin: 0;
	color: #555b5d;
	font-size: 18px;
	line-height: 1.55;
}

.demo-chooser {
	display: grid;
	grid-template-columns: minmax(340px, 1.2fr) minmax(300px, 1fr);
	gap: 18px;
	margin: 0 0 26px;
	padding: 18px;
	border: 1px solid #d5d8d9;
	border-radius: 10px;
	background: #f5f6f6;
}

.demo-chooser__label {
	display: block;
	margin-bottom: 9px;
	color: #656b6d;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.demo-chooser__options, .demo-feature-options { display: flex; gap: 7px; }
.demo-choice, .demo-feature { border: 1px solid #c7cbcc; color: #353a3c; background: #fff; }
.demo-choice { flex: 1 1 0; padding: 10px 12px; border-radius: 7px; text-align: left; }
.demo-choice strong, .demo-choice small { display: block; }
.demo-choice strong { margin-bottom: 2px; font-size: 13px; }
.demo-choice small { color: #757b7d; font-size: 10px; }
.demo-feature { padding: 9px 11px; border-radius: 6px; font-size: 11px; font-weight: 750; }
.demo-feature code { color: inherit; font-size: 10px; }
.demo-choice:hover, .demo-choice:focus, .demo-feature:hover, .demo-feature:focus { border-color: #7b8183; background: #eceeee; }
.demo-choice.is-selected, .demo-feature.is-selected { border-color: #2e3233; color: #fff; background: #2e3233; }
.demo-choice.is-selected small { color: #d7d9da; }
.demo-choice.is-selected:focus, .demo-feature.is-selected:focus { outline: 3px solid rgb(195 44 44 / .2); }

.cis-demo__workspace {
	display: grid;
	grid-template-columns: 245px minmax(0, 910px);
	gap: 22px;
	align-items: start;
}

.demo-guide {
	position: sticky;
	top: calc(var(--demo-nav-offset) + 20px);
	padding: 21px;
	border: 1px solid #d5d8d9;
	border-radius: 10px;
	background: #fff;
	box-shadow: 4px 6px 14px rgb(0 0 0 / .09);
}

.demo-guide__topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-guide__step { color: var(--demo-red); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-guide__reset { padding: 0; border: 0; border-bottom: 1px solid currentColor; color: #727779; background: transparent; font-size: 11px; }
.demo-guide__reset:hover, .demo-guide__reset:focus { color: var(--demo-red); }
.demo-guide__progress { height: 4px; margin: 14px 0 19px; overflow: hidden; border-radius: 9px; background: #e5e7e8; }
.demo-guide__progress span { display: block; width: 25%; height: 100%; background: var(--demo-red); transition: width .3s ease; }
.demo-guide h2 { margin: 0 0 9px; font-size: 22px; font-weight: 800; line-height: 1.15; }
.demo-guide > p { min-height: 84px; margin: 0; color: #63696b; font-size: 13px; line-height: 1.5; }

.demo-guide__checklist {
	display: grid;
	gap: 12px;
	margin: 20px 0;
	padding: 18px 0;
	border-top: 1px solid #e4e6e7;
	border-bottom: 1px solid #e4e6e7;
	list-style: none;
}

.demo-guide__checklist li { display: flex; align-items: center; gap: 9px; color: #8a8f91; font-size: 12px; font-weight: 650; }
.demo-guide__checklist li span { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border: 1px solid #cdd0d1; border-radius: 50%; font-size: 10px; }
.demo-guide__checklist li.is-current { color: #17191a; }
.demo-guide__checklist li.is-current span { color: #fff; border-color: var(--demo-red); background: var(--demo-red); }
.demo-guide__checklist li.is-done { color: #08763f; }
.demo-guide__checklist li.is-done span { border-color: #9ac9b2; background: #e2f3eb; font-size: 0; }
.demo-guide__checklist li.is-done span::after { content: "\2713"; font-size: 11px; font-weight: 900; }
.demo-guide__tip { display: flex; gap: 8px; color: #626769; font-size: 11px; line-height: 1.45; }
.demo-guide__tip > span { color: #08763f; }

.demo-guide__incoming { margin-top: 17px; padding-top: 16px; border-top: 1px solid #e4e6e7; }
.demo-guide__incoming[hidden] { display: none; }
.demo-guide__incoming button { width: 100%; padding: 9px 10px; border: 1px solid #555b5d; border-radius: 5px; color: #fff; background: #555b5d; font-size: 11px; font-weight: 750; }
.demo-guide__incoming button:hover, .demo-guide__incoming button:focus { color: #111; background: #e2e4e4; }
.demo-guide__incoming small { display: block; margin-top: 6px; color: #73787a; font-size: 10px; text-align: center; }

.demo-stage { min-width: 0; }
cis-console-demo { display: block; width: 100%; max-width: 910px; overflow: visible; border: 1px solid #bbb; background: #fff; box-shadow: 6px 6px 12px #888; }
.cisconsole-replica { width: 100%; max-width: 910px; border: 1px solid #bbb; background: #fff; box-shadow: 6px 6px 12px #888; }

/* Faithful, scoped copies of the production console header rules. */
.replica-console-head { display: flex; flex-direction: column; align-items: center; width: 100%; background: #000; }
.replica-console-top-row { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; }
.replica-console-logo { width: 400px; height: 50px; margin-left: 5px; background: url('/images/t1/logo-400x50-clearbg.jpg') no-repeat left center; background-size: contain; }
.replica-console-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.replica-connection-status { margin-right: 6px; padding: 1px 8px 2px 6px; border-radius: 5px; color: #111; background: #dadada; font: 10px Verdana, Arial, sans-serif; }
.replica-connection-status b { margin-right: 4px; color: #016700; font-size: 18px; line-height: 10px; vertical-align: -2px; }
.replica-status-wrap { width: 100%; min-height: 22px; padding-bottom: 4px; background: #666; }
.replica-status-inner { display: flex; justify-content: space-between; width: 100%; padding: 2px 5px 0; color: #fff; font: 700 13px Verdana, Arial, sans-serif; }

.replica-content { width: 100%; min-height: 470px; padding: 28px 8px 16px; color: #151515; font: 13px Verdana, Arial, sans-serif; }
.replica-call-status { margin: 4px 4px 30px; font-weight: 700; }

/* Faithful, scoped copies of hostcenter/css/call_list-6.css. */
.replica-call-list .list_container table { width: 100%; margin-bottom: 30px; overflow: hidden; border: 2px solid #696969; border-right-width: 1px; border-left-width: 1px; border-radius: 0 15px 15px 15px; border-spacing: 0; }
.replica-call-list .list_container[hidden] { display: none; }
.replica-call-list .roomlabel { position: relative; z-index: 1; display: flex; width: fit-content; border-radius: 0 15px 0 0; color: #fff; background: #696969; font-weight: 700; text-align: center; }
.replica-call-list .roomlabelw { display: flex; width: 300px; }
.replica-call-list .scrollfrom_self { padding: 4px; }
.replica-call-list .scrollfrom_up, .replica-call-list .scrollfrom_down { flex-grow: 1; }
.replica-call-list tr.title { height: 2px; background: #fff; }
.replica-call-list tr.title td { padding: 0; }
.replica-call-list tr.call:nth-of-type(n+3) td { border-top: 1px solid #696969; }
.replica-call-list td { padding: 3px; }
.replica-call-list .number { width: 14px; }
.replica-call-list .from { width: 225px; }
.replica-call-list .type { width: 74px; }
.replica-call-list .duration { width: 117px; }
.replica-call-list .actions { width: 270px; padding-right: 0; padding-left: 0; text-align: right; white-space: nowrap; }
.replica-call-list .loading { position: relative; width: 30px; min-width: 30px; padding-right: 0; padding-left: 0; }
.replica-call-list .from, .replica-call-list .number { font-size: 16px; }
.replica-call-list tr.self { background: #c99; }
.replica-call-list tr.superuser { background: #eee8aa; }
.replica-call-list tr.active { background: #cf9; }
.replica-call-list tr.even { background: #f5f5f5; }
.replica-call-list tr.odd { background: #fff; }
.replica-call-list tr.guided-call { box-shadow: inset 5px 0 0 #e49f03; }
.replica-call-list tr.note td { padding: 2px 3px 8px; border-bottom: 0; }
.replica-call-list .note_text { min-width: 0; padding-left: 10px; font-size: 16px; text-align: left; }
.replica-call-list tr.lookuprow td { padding: 2px 3px 5px 13px; border-bottom: 0; }
.replica-call-list .lookup_text { color: #636363; font-size: 12px; text-align: left; }
.replica-call-list .duration_onair { color: #bf0000; font-size: 10pt; font-weight: bold; white-space: nowrap; cursor: pointer; }
.replica-call-list .note_text textarea { width: min(550px, calc(100% - 8px)); height: 100px; padding: 4px; font: 16px Verdana, Arial, sans-serif; }
.replica-call-list .editnote_instructions { margin: 4px 0 0 10px; color: #555; font-size: 10px; }
.replica-call-list .type_sm, .replica-call-list .duration_sm { display: none; }

.replica-call-list .actions button:not(.new_note), .replica-call-list .actions a {
	display: inline-block;
	margin: 0;
	padding: 5px;
	border-radius: 5px;
	color: #fff;
	font: 13px/30px Verdana, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
}

.replica-call-list .talk_link { border: 1px solid #006790; background: #006700; }
.replica-call-list .talk_link:hover, .replica-call-list .talk_link:focus { color: #000; background: #4fca4f; }
.replica-call-list .mute_link { border: 1px solid #e49f03; background: #e49f03; }
.replica-call-list .mute_link:hover, .replica-call-list .mute_link:focus { color: #000; background: #ffeaba; }
.replica-call-list .queue_link { border: 1px solid #a06800; background: #a06800; }
.replica-call-list .queue_link:hover, .replica-call-list .queue_link:focus { color: #000; background: #efdab7; }
.replica-call-list .screen_link, .replica-call-list .screener_hostqueue_link, .replica-call-list .screener_callqueue_link { border: 1px solid #0046c5; background: #0046c5; }
.replica-call-list .screen_link:hover, .replica-call-list .screen_link:focus, .replica-call-list .screener_hostqueue_link:hover, .replica-call-list .screener_hostqueue_link:focus, .replica-call-list .screener_callqueue_link:hover, .replica-call-list .screener_callqueue_link:focus { color: #000; background: #d4e3ff; }
.replica-call-list .dropbtn { border: 1px solid #bf0000; background: #bf0000; }
.replica-call-list .dropbtn:hover, .replica-call-list .dropbtn:focus { color: #000; background: #ffbdbd; }
.replica-call-list button:disabled { cursor: default; opacity: 1; }

.replica-call-list .dropdown { position: relative; display: inline-block; }
.replica-call-list .dropdown-content { position: absolute; top: 0; right: -1px; z-index: 5; display: none; width: 0; border-radius: 5px; background: transparent; box-shadow: 5px 5px 8px #888; white-space: nowrap; }
.replica-call-list .dropdown-content.dropdown-show { display: block; width: auto !important; }
.replica-call-list .dropdown-content a { display: inline-block; padding: 5px 6px; border: 1px solid #bf0000; border-radius: 0; color: #fff; background: #bf0000; text-align: center; }
.replica-call-list .dropdown-content a:hover, .replica-call-list .dropdown-content a:focus { color: #000; background: #ffbdbd; }
.replica-call-list .dropdown-content a:first-child { border-radius: 5px 0 0 5px; }
.replica-call-list .dropdown-content a:last-child { border-radius: 0 5px 5px 0; }
.replica-call-list .dropdown-content a:first-child:last-child { border-radius: 5px; }

.replica-call-list .new_note {
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: url('/hostcenter/img/notepad-icon.png') no-repeat center;
}

.replica-call-list .new_note:hover, .replica-call-list .new_note:focus { border-radius: 3px; outline: 1px solid #777; background-color: rgb(0 0 0 / .12); }
.replica-call-list .threedots { width: 20px; height: 24px; padding: 0; border: 0; color: #111; background: transparent; font-size: 20px; line-height: 20px; }
.demo-target { animation: target-pulse 1.8s ease-in-out infinite; }
@keyframes target-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(0 103 0 / 0); } 45% { box-shadow: 0 0 0 5px rgb(0 103 0 / .25); } }
.replica-call-list tr.incoming-call { animation: incoming-call .8s ease both; }
@keyframes incoming-call { 0% { background: #fff29b; box-shadow: inset 8px 0 0 #e49f03; transform: translateX(-5px); } 55% { background: #cf9; box-shadow: inset 8px 0 0 #006700; } 100% { box-shadow: inset 0 0 0 transparent; transform: translateX(0); } }
.replica-call-list .call-room-empty { padding: 18px; color: #777; font-size: 12px; text-align: center; }
.replica-bottom-buttons { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; padding: 5px; background: #111; }
.replica-bottom-buttons span { padding: 5px 8px; border: 1px solid #000; color: #dadada; background: #717171; font: 11px Verdana, Arial, sans-serif; }
.replica-bottom-chat::after { content: none; }
.demo-stage__caption { margin: 12px 2px 0; color: #757a7c; font-size: 11px; }

.cis-demo__cta { display: none; align-items: center; justify-content: space-between; gap: 24px; margin: 30px 0 0 267px; padding: 28px 32px; border-radius: 10px; color: #fff; background: #17191a; }
.cis-demo__cta.is-visible { display: flex; animation: cta-arrive .45s ease both; }
@keyframes cta-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cis-demo__cta span { color: #ef7c84; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cis-demo__cta h2 { margin: 4px 0; font-size: 24px; font-weight: 800; }
.cis-demo__cta p { margin: 0; color: #bfc3c4; font-size: 13px; }
.cis-demo__cta-button { flex: 0 0 auto; padding: 12px 17px; border-radius: 7px; color: #fff; background: var(--demo-red); font-size: 13px; font-weight: 800; text-decoration: none; }
.cis-demo__cta-button:hover, .cis-demo__cta-button:focus { color: #fff; background: #a81f28; text-decoration: none; }

.demo-live-alert[hidden] { display: none; }
.demo-live-alert { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; }
.demo-live-alert__backdrop { position: absolute; inset: 0; background: rgb(9 11 12 / .72); backdrop-filter: blur(3px); }
.demo-live-alert__dialog { position: relative; z-index: 1; width: min(560px, 100%); padding: 30px; border: 4px solid #e49f03; border-radius: 8px; background: #fff; box-shadow: 0 28px 80px rgb(0 0 0 / .45); }
.demo-live-alert__eyebrow { display: block; margin-bottom: 7px; color: #bf0000; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-live-alert__dialog h2 { margin: 0 0 14px; font-size: 29px; font-weight: 850; line-height: 1.05; }
.demo-live-alert__dialog p { color: #4e5456; font-size: 15px; line-height: 1.5; }
.caller-action-alert__copy { display: grid; gap: 9px; margin: 15px 0; }
.caller-action-alert__item { padding: 12px 14px; border-left: 5px solid #bf0000; border-radius: 3px; color: #4e5456; background: #f4f4f4; font-size: 14px; line-height: 1.45; }
.caller-action-alert__item strong { display: block; margin-bottom: 2px; color: #111; }
.caller-action-alert__item.is-selected { border-left-color: #e49f03; background: #fff4d7; }
.caller-action-alert__result { margin-bottom: 8px; font-weight: 700; }
.demo-live-alert__dialog button { width: 100%; margin-top: 5px; padding: 11px 15px; border: 1px solid #006700; border-radius: 5px; color: #fff; background: #006700; font-size: 14px; font-weight: 800; }
.demo-live-alert__dialog button:hover, .demo-live-alert__dialog button:focus { color: #000; background: #4fca4f; }
.demo-live-alert__dialog .demo-live-alert__secondary { border-color: #696969; color: #222; background: #ddd; }
.demo-live-alert__dialog .demo-live-alert__secondary:hover, .demo-live-alert__dialog .demo-live-alert__secondary:focus { background: #f1f1f1; }
.demo-live-alert--hint { display: block; pointer-events: none; padding: 0; }
.demo-live-alert--hint .demo-live-alert__backdrop { display: none; }
.demo-live-alert--hint .demo-live-alert__dialog { position: absolute; width: min(430px, calc(100vw - 24px)); padding: 22px 24px; pointer-events: auto; }
.demo-live-alert--hint .demo-live-alert__dialog h2 { padding-right: 28px; font-size: 23px; }
.demo-live-alert__dialog .demo-live-alert__close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; margin: 0; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; color: #555; font-size: 25px; font-weight: 400; line-height: 24px; }
.demo-live-alert__dialog .demo-live-alert__close:hover, .demo-live-alert__dialog .demo-live-alert__close:focus { background: #eee; color: #000; }

.demo-toast { position: fixed; right: 22px; bottom: 22px; z-index: 10001; display: flex; align-items: start; gap: 10px; max-width: min(380px, calc(100vw - 44px)); padding: 12px 12px 12px 16px; border-radius: 6px; color: #fff; background: #202425; box-shadow: 0 12px 35px rgb(0 0 0 / .25); font-size: 13px; font-weight: 650; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.demo-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#demo-toast-copy { flex: 1; }
#demo-toast-close { flex: 0 0 auto; width: 22px; height: 22px; margin: -3px -3px 0 0; padding: 0; border: 0; border-radius: 50%; color: #fff; background: transparent; font-size: 21px; font-weight: 400; line-height: 20px; cursor: pointer; }
#demo-toast-close:hover, #demo-toast-close:focus { color: #202425; background: #fff; }
.footerbtns a.is-disabled { pointer-events: none; opacity: .5; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 991px) {
	.demo-chooser { grid-template-columns: 1fr; }
	.cis-demo__workspace { grid-template-columns: 1fr; }
	.demo-guide { position: static; }
	.demo-guide > p { min-height: 0; }
	.cis-demo__cta { margin-left: 0; }
}

@media (max-width: 620px) {
	.cis-demo { padding-right: 0; padding-left: 0; }
	.cis-demo__intro { padding: 0 6px; }
	.demo-guide { margin: 0 4px; }
	.demo-chooser { margin-right: 4px; margin-left: 4px; padding: 14px; }
	.demo-chooser__options, .demo-feature-options { flex-wrap: wrap; }
	.demo-choice { min-width: 145px; }
	.replica-console-logo { width: min(400px, 68vw); }
	.replica-status-right { display: none; }
	.replica-content { padding-right: 3px; padding-left: 3px; }
	.replica-call-list .roomlabel { width: 100%; border-radius: 0; }
	.replica-call-list .roomlabelw { width: 100%; }
	.replica-call-list .type, .replica-call-list .duration { display: none; }
	.replica-call-list .type_sm, .replica-call-list .duration_sm { display: inline; font-size: 11px; }
	.replica-call-list .number { width: 7%; }
	.replica-call-list .from { width: 36%; font-size: 13px; }
	.replica-call-list .actions { width: 51%; white-space: normal; }
	.replica-call-list .loading { width: 6%; }
	.replica-call-list .actions button:not(.new_note), .replica-call-list .actions a { margin-bottom: 2px; padding: 4px; font-size: 11px; line-height: 18px; }
	.replica-call-list .note_text { font-size: 14px; }
	.cis-demo__cta, .cis-demo__cta.is-visible { align-items: flex-start; flex-direction: column; margin-right: 4px; margin-left: 4px; padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.cis-demo *, .cis-demo *::before, .cis-demo *::after, .demo-toast { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}