#modalNovoAgente {
	backdrop-filter: blur(5px);
}

#modalNovoAgente .modal-content {
	border: none !important;
	border-radius: 3rem;
}

#modalNovoAgente .modal-body {
	padding: 3rem;
}

#modalNovoAgente #modalProgress {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

#modalNovoAgente #modalProgress .steps {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	gap: 0px;
}

#modalNovoAgente #modalProgress .sec {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	gap: 10px;
}

#modalNovoAgente #modalProgress .sec p.section {
	font-size: 12pt;
	font-weight: 400;
	line-height: 100%;
	color: #A8B7C0;
	margin-bottom: 0px;
}

#modalNovoAgente #modalProgress .sec .dot {
	width: 6px;
	height: 6px;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background: #EEF2F3;
}

#modalNovoAgente #modalProgress .sec[data-status="ativo"] p.section {
	color: #0F172A;
}

#modalNovoAgente #modalProgress .progress_bar {
	height: 10px;
	border-radius: 10px;
	background: #EEF2F3;
	width: 100%;
}

#modalNovoAgente #modalProgress .progress_bar .bar {
	width: 18%;
	height: 10px;
	border-radius: 10px;
	background: var(--color-primary);
}

#modalNovoAgente .content {
	padding-top: 48px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-direction: column;
	gap: 90px;
}

#modalNovoAgente .content h1 {
	font-size: 18pt;
	font-weight: 600;
	line-height: 30px;
	color: var(--color-text-1);
	text-align: center;
}

#modalNovoAgente .content .agent_box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	cursor: pointer;
}

#modalNovoAgente .content .agent_box:hover img {
	scale: 1.03;
	transform-origin: 50% 100%;
}

#modalNovoAgente .content .agent_type {
	width: 150px;
	height: 150px;
	border-radius: 24px;
	background: #EEF2F3;
	position: relative;
}

#modalNovoAgente .content .agent_inbound img {
    width: 200px;
    position: absolute;
    bottom: -22.5px;
    left: -22.5px;
}

#modalNovoAgente .content .agent_outbound img {
    width: 210px;
    position: absolute;
    bottom: -17.5px;
    left: -22.5px;
}

#modalNovoAgente .content .agents {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem;
}

#modalNovoAgente .step_item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 24px;
	padding: 48px 100px 0 100px;
}

#modalNovoAgente .step_item .buttons {
	justify-content: center;
	flex-direction: row;
	margin-top: 24px;
}

#modalNovoAgente .step_item .buttons button {
	padding: 0px 20px;
}

#modalNovoAgente [data-step]:not([data-step="1"]) {
	display: none;
}

#modalNovoAgente[data-current-step="1"] [data-bar-step="1"] p.section,
#modalNovoAgente[data-current-step="2"] [data-bar-step="2"] p.section,
#modalNovoAgente[data-current-step="3"] [data-bar-step="3"] p.section,
#modalNovoAgente[data-current-step="4"] [data-bar-step="4"] p.section {
	color: #0F172A !important;
}

#modalNovoAgente[data-current-step="1"] .progress_bar .bar {
	width: 18% !important;
}

#modalNovoAgente[data-current-step="2"] .progress_bar .bar {
	width: 44% !important;
}

#modalNovoAgente[data-current-step="3"] .progress_bar .bar {
	width: 77% !important;
}

#modalNovoAgente[data-current-step="4"] .progress_bar .bar {
	width: 100% !important;
}

#modalNovoAgente .error {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 48px;
	gap: 1rem;
}

#modalNovoAgente .error:empty {
	display: none !important;
}

#modalNovoAgente .error .message_error {
	font-size: 10pt;
	font-weight: 400;
	margin-bottom: 0px;
	text-align: center;
	color: var(--color-badge-red-text);
	padding: 10px 20px;
	border-radius: 20px;
	background: var(--color-badge-red-bg);
	animation: fade-in-up 400ms ease;
}

/* == article.agent */

article.agent {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	gap: 16px;
}

article.agent .text {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	text-overflow: ellipsis;
	overflow: hidden;
	gap: 8px;
}

article.agent .text h1 {
	font-size: 18pt;
	font-weight: 600;
	line-height: 100%;
	color: var(--color-text-1);
	white-space: nowrap;
	width: 100%;
	margin-bottom: 0px;
}

article.agent .text p {
	font-size: 11pt;
	font-weight: 400;
	line-height: 18px;
	margin-bottom: 0px;
	color: #5F7D8C;
}

article.agent .infos {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	gap: 8px	;
}

article.agent .infos hr {
	margin: 0px !important;
	border-color: #E5EBEF;
	opacity: .5;
}

article.agent .infos .details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

article.agent .infos .details p {
	font-size: 11pt;
	font-weight: 500;
	margin-bottom: 0px;
	color: var(--color-text-body);
}

article.agent .infos p.last_call {
	font-size: 8pt;
	font-weight: 400;
	line-height: 16px;
	margin-bottom: 0px;
	color: var(--color-text-secondary);
}

article.agent .buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: .5rem;
}

article.agent button:not(.icon) {
	width: 100%;
}