@font-face {
	font-family: 'SanofiSans';
	font-style: normal;
	src:
		url('../font/SanofiSans-Regular.otf'),
		url('../font/SanofiSans-Bold.otf'),
		url('../font/SanofiSans-BoldItalic.otf'),
		url('../font/SanofiSans-Italic.otf'),
		url('../font/SanofiSans-Light.otf'),
		url('../font/SanofiSans-LightItalic.otf');
}

* {
	padding: 0;
	margin: 0;
}

::selection {
	background-color: rgb(0, 89, 73);
	color: #fff;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
	background: rgb(0, 89, 73); 
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgb(0, 89, 73); 
}

body,
html {
	width: 100%;
	min-height: 100%;
}

body {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-family: 'SanofiSans';
	font-size: 14px;
	color: #444;
	background: #fff;
}

@media screen and (orientation: landscape) {
	body.login {
		/*background-image: url('../img/logo_medley_grande.png'), linear-gradient(90deg, rgba(0, 89, 73, 0) 60%, #E9ECEF 60%), url('../img/bg_login.jpg');*/
		background-image: url('../img/logo_medley_grande.png'), linear-gradient(90deg, rgba(0, 89, 73, 0) 60%, #E9ECEF 60%), linear-gradient(90deg, rgb(0, 180, 170), rgb(0, 180, 170));
		background-position: calc(26% - (5vw / 2)) 50%, 0, center;
		background-repeat: no-repeat;
		background-size: 20vw, 100%, cover;
	}

	body.login #login-content {
		width: 25vw;
		height: fit-content;
		position: absolute;
		right: 7.5vw;
		top:0;
		bottom: 0;
		margin: auto;
		background: #FCFCFC;
		box-shadow: 0px 1px 4px rgba(0, 0, 20, 0.1);
		border-radius: 10px;
	}

	@media screen and (max-width: 1092px) and (orientation: landscape) {
		body.login #login-content {
			width: 45vw;
		}
	}

	@media screen and (max-width: 870px) and (orientation: landscape) {
		body.login {
			background-position: calc(20% - (5vw / 2)) 50%, 0;
			background-size: 25vw, 100%, cover;
		}
	}
}

@media screen and (orientation: portrait) {
	body.login {
		/*background-image: url('../img/logo_medley_grande.png'), linear-gradient(180deg, rgba(0, 89, 73, 0) 70%, #E9ECEF 70%), url('../img/bg_login.jpg');*/
		background-image: url('../img/logo_medley_grande.png'), linear-gradient(180deg, rgba(0, 89, 73, 0) 70%, #E9ECEF 70%), linear-gradient(180deg, rgb(0, 180, 170), rgb(0, 180, 170));
		background-position: 50% calc((70vh / 2) - 5vh), 0, center;
		background-repeat: no-repeat;
		background-size: 20vw, 100%, cover;
	}

	body.login #login-content {
		width: 40vw;
		height: fit-content;
		position: absolute;
		right: 0;
		left: 0;
		top:0;
		bottom: -40vh;
		margin: auto;
		background: #FCFCFC;
		box-shadow: 0px 1px 4px rgba(0, 0, 20, 0.1);
		border-radius: 10px;
	}

	@media screen and (max-width: 900px) and (orientation: portrait) {
		body.login {
			background-size: 35vw, 100%, cover;
		}
	}

	@media screen and (max-width: 690px) and (orientation: portrait) {
		body.login {
			background-size: 40vw, 100%, cover;
		}

		body.login #login-content {
			width: 60vw;
		}
	}

	@media screen and (max-width: 470px) and (orientation: portrait) {
		body.login {
			background-size: 50vw, 100%, cover;
		}

		body.login #login-content {
			width: 75vw;
		}
	}

	@media screen and (max-height: 650px) and (orientation: portrait) {
		body.login {
			background-position: 50% calc((60vh / 2) - 5vh), 0, center;
		}
	}
}


body.login form[name='login'] .btn {
	display: block;
	width: 100%;
}

body.login .btn.btn-acessar {
	text-align: left;
}

body.login .btn.btn-acessar::after {
	content: "\f285";
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 60px;
}

a {
	color: rgb(0, 89, 73);
	text-decoration: none;
}

p.opaque {
	color: #ADB5BD;
}

h1.no-mb,
h2.no-mb,
h3.no-mb,
h4.no-mb,
h5.no-mb,
h6.no-mb {
	margin-bottom: 0px !important;
}

ul {
	list-style: none;
}

.accordion {
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-button:focus,
.accordion-button:not(.collapsed) {
	border-color: transparent !important;
	background-color: transparent !important;
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	color: rgb(0, 89, 73);
}

.spinnerSanofi {
	width: 50px;
    height: 50px;
    border-width: 5px;
    color: rgb(0, 89, 73);
}

.spinnerSanofi.small {
	width: 10px;
    height: 10px;
    border-width: 1px;
}

.text-purple {
	color: rgb(0, 89, 73);
}

.btn {
	font-size: 15px;
}

.btn:disabled {
	pointer-events: initial;
    cursor: not-allowed !important;
}

.btn.btn-square {
	width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
}

.btn.btn-square i {
	line-height: 32px;
}

.btn.btn-sm.btn-square {
	width: 23px;
    height: 23px;
    line-height: 23px;
}

.btn.btn-sm.btn-square i {
	line-height: 26px;
	font-size: 13px;
}

.btn.flex-fill-width {
	width: 100% !important;
}

.btn.chevron-right::after {
	content: "\f285";
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 60px;
}

.btn.btn-default {
	background-color: #fff;
	color: #333;
	border-color: #ccc;
}

.btn.btn-purple {
	background-color: rgb(0, 89, 73);
	color: #fff;
	border: rgb(0, 89, 73) 1px solid;
}

.btn.btn-outline-warning {
	color: #ED952D;
	border-color: #ED952D;
}

.btn.btn-info,
.btn.btn-warning,
.btn.btn-outline-warning:hover {
	color: #fff;
}

.btn.btn-outline-purple {
	background-color: none;
	border: rgb(0, 89, 73) 1px solid;
	color: rgb(0, 89, 73);
}

.btn.btn-outline-purple:hover {
	background-color: rgb(0, 89, 73);
	color: #fff;
}

.btn.btn-purple-text,
.badge.badge-purple-text {
	color: rgb(0, 89, 73);
}

.badge.badge-purple {
	background-color: rgb(0, 89, 73);
	color: #fff;
}

.badge.badge-purple {
	background-color: rgb(0, 89, 73);
	color: #fff;
}

.badge[class*=badge-outline] {
	font-weight: normal;
}

.badge.badge-outline-purple {
	background-color: rgba(0, 89, 73, .3);
	border: #005949 1px solid;
	color: #AAA;
}

.badge.badge-outline-warning {
	background-color: #FFE3BB66;
	border: #ED952D 1px solid;
	color: #ED952D;
}

.badge.badge-outline-danger {
	background-color: #FDD;
	border: #DE2424 1px solid;
	color: #DE2424;
}

.badge.badge-outline-success {
	background-color: #DFD;
	border: #2ECF94 1px solid;
	color: #2ECF94;
}

.badge.badge-outline-secondary {
	background-color: #EEE;
	border: #AAA 1px solid;
	color: #AAA;
}

.badge.badge-outline-info {
	background-color: #adf;
	border: #0af 1px solid;
	color: #0af;
}

.dropdown.dropdown-purple button.btn {
	background-color: rgb(0, 89, 73);
	color: #fff;
}

.dropdown.dropdown-purple .dropdown-menu li a.dropdown-item {
	color: rgb(0, 89, 73);
}

.dropdown-menu li.disabled,
.dropdown-menu li.disabled a {
    cursor: not-allowed;
    background-color: #efefef;
}

.table.table-striped td {
    text-align: left;
}

.sanofi-tooltip {
	--bs-tooltip-bg: rgb(0, 89, 73);
	--bs-tooltip-color: #fff;
}

.sanofi-popover {
	--bs-popover-header-bg: rgb(0, 89, 73);
	--bs-popover-header-color: #FFF;
	--bs-popover-border-color: rgb(0, 89, 73);
}

.btn-group.btn-group-as-pill button:first-child {
	border-radius: 15px 0 0 15px !important;
}

.btn-group.btn-group-as-pill button:last-child {
	border-radius: 0 15px 15px 0 !important;
}

input.form-control {
	font-size: 15px !important;
}

input.form-control.danger,
select.form-select.danger,
textarea.form-control.danger,
.input-group.danger span.input-group-text,
.input-group.danger input.form-control,
.error {
	background-color: var(--bs-danger-bg-subtle);
	--bs-border-color: var(--bs-danger-border-subtle);
	color: var(--bs-danger-text);
}

.input-group.photoInputButton label {
	width: 70%;
}
.input-group.photoInputButton button {
	width: 30%;
}
.input-group.photoInputButton.acordos label {
    width: 50%;
}
.input-group.photoInputButton.acordos button {
    width: 25%;
}

@keyframes loadingAnimation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.btn.loader {
	color: #fff0 !important;
	height: 40px;
}

.btn.loader::after {
	animation: loadingAnimation 1.5s linear infinite;
	content: "\f130" !important;
	font-family: bootstrap-icons !important;
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	padding: 0 !important;
	position: relative !important;
	display: block;
	top: -21px !important;
	right: 2px !important;
}

.sanofiProgress {
	height: 30px;
	border-radius: 15px;
	background-color: #343a40;
}

.sanofiProgress .progress-bar {
	font-size: 14px;
    font-weight: bold;
    color: #111;
}

.modal.modalSanofi.darkMode .modal-content {
	background-color: #212529;
}

.modal.modalSanofi .modal-header {
	border-bottom: none;
	font-weight: bold;
	font-size: 16px;
}

.modal.modalSanofi.darkMode .modal-header {
	color: #8AF1CB;
}

.modal.modalSanofi .modal-body {
	text-align: justify;
}

.modal.modalSanofi.darkMode .modal-body {
	color: #ccc;
}

.modal.modalSanofi .modal-footer {
	border-top: none;
}

.modal-backdrop {
	--bs-backdrop-opacity: none !important;
	background-color: rgba(0, 89, 73, 0.5) !important;
	backdrop-filter: blur(6px) !important;
}

.modal-backdrop.menu-backdrop {
    z-index: 2 !important;
    display: none;
    transition: 300ms all ease;
}

.toast.text-bg-warning,
.toast.text-bg-info {
	color: #fff !important;
}

.btn.cancel::after {
	content: "\f2E6";
	font-family: bootstrap-icons !important;
	position: relative;
	top: 2px;
	right: -10px;
	padding-right: 10px;
}

.btn.refresh::after {
	content: "\f130";
	font-family: bootstrap-icons !important;
	position: relative;
	top: 2px;
	right: -10px;
	padding-right: 10px;
}

.btn .badge-on-button {
	position: absolute;
	padding: 2px;
	font-size: 15px;
	color: #fff;
	border-radius: 50%;
	margin-top: -30px;
    margin-left: 5px;
}

.btn .badge-on-button.exclamation {
	background-color: #DE2424;
}

.btn .badge-on-button.exclamation::after {
	content: "\f63c";
	font-family: bootstrap-icons !important;
	position: relative;
	display: block;
}

.btn .badge-on-button.checked {
	background-color: #198754;
}

.btn .badge-on-button.checked::after {
	content: "\F26E";
	font-family: bootstrap-icons !important;
	position: relative;
	display: block;
}

body {
	background: #E9ECEF;
	height: 100vh;
}

body header {
	width: 100vw;
	height: 120px;
	background-image: url('../img/logo_medley.png'), linear-gradient(90deg, rgb(0, 180, 170) -10%, rgb(0, 89, 73) 160%);
	background-repeat: no-repeat;
	background-position: 25px 20px, 0;
	background-size: 110px, 100%;
	border-radius: 0 0 35px 0;
}

body header #menu-button {
	display: none;
    width: 50px;
    height: 50px;
    line-height: 1;
    border-radius: 8px;
    position: absolute;
    z-index: 3;
    top: calc(120px * 0.5 - 25px);/*50% da altura do header menos 50% da altura do button*/
    left: 30px;
    font-size: 22px;
    transition: 300ms all ease;
}

body header .link-manual {
	position: absolute;
	height: fit-content;
	z-index: 2;
}

body header .link-manual .badge {
	font-weight: normal;
	padding: 7px 10px;
}

body header .link-manual {
	top: 45px;
	left: 200px;
}

body header .avatar-content .btn.rounded-circle {
    width: 40px;
    height: 40px;
    line-height: 1;
}

body header .avatar-content .avatar-data p {
	color: #fff;
	margin: 0 10px 0 15px;
	font-size: 12px;
}

body header .avatar-content .avatar-data p.headline {
	font-size: 14px;
}

body header .avatar-content .avatar-data p#unidade_negocio_usuario {
	text-transform: uppercase;
}

body header .avatar-content {
	width: 450px;
	height: 120px;
	top: 0px;
	right: 20px;
}

body header .avatar-content div:nth-child(1) {
	max-width: 210px;
}

body #dadosLojaHolder {
	display: none;
	position: absolute;
	text-align: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 15px;
	color: #fff;
	font-size: 12px;
}

body .contentFlexHolder {
	display: flex;
	flex-direction: row;
	height: calc(100% - 120px);
	min-width: 100%;
}

body .contentFlexHolder .menu_principal {
	height: 100%;
	background: #FCFCFC;
	border-left: 2px solid #DEE2E6;
	flex-basis: 250px;
	overflow-x: hidden;
    overflow-y: auto;
	z-index: 4;
	transition: 300ms all ease;
}

body .contentFlexHolder.offline .menu_principal {
	background: #08040B;
	border-left-color: #08040B;
}

body .contentFlexHolder .menu_principal #switchOnOffLine .btn-group {
	width: 100%;
}

body .contentFlexHolder .menu_principal ul,
body .contentFlexHolder .menu_secundario ul {
	width: 90%;
	padding: 0;
	margin: auto;
	height: fit-content;
}

body .contentFlexHolder .menu_principal ul li,
body .contentFlexHolder .menu_secundario ul li {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin: 10px auto;
	border-radius: 12px;
	padding: 0 15px;
	background: #FCFCFC;
	color: #444;
	transition: 400ms all ease;
	cursor: pointer;
	position: relative;/*Hack pra funcionar o position absolute do :after no fim do elemento*/
}

body .contentFlexHolder.offline .menu_principal ul li,
body .contentFlexHolder.offline .menu_secundario ul li {
	color: #FCFCFC;
	background: #08040B;
}

body .contentFlexHolder.offline .menu_principal ul li.com_checkin {
	display: none;
}

body .contentFlexHolder.offline .menu_principal ul li i.bi,
body .contentFlexHolder.offline .menu_secundario ul li i.bi {
	transition: 300ms all ease;
}

body .contentFlexHolder .menu_principal ul li.sublink::after {
	content: "\f285";
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 10px;
	transition: 300ms all ease;
}

body .contentFlexHolder .menu_principal.opened ul li.sublink::after {
	left: 200px !important;
}

body .contentFlexHolder .menu_principal.closed ul li.sublink::after {
	left: -40px !important;
}

body .contentFlexHolder .menu_principal ul li:hover,
body .contentFlexHolder .menu_secundario ul li:hover {
	background: #DEE2E6;
}

body .contentFlexHolder.offline .menu_principal ul li:hover,
body .contentFlexHolder.offline .menu_secundario ul li:hover {
	background: rgb(0, 89, 73);
	color: #FCFCFC;
}

body .contentFlexHolder.offline .menu_principal ul li:hover i.bi,
body .contentFlexHolder.offline .menu_secundario ul li:hover i.bi {
	color: #FCFCFC;
}

body .contentFlexHolder .menu_principal ul li.active,
body .contentFlexHolder .menu_secundario ul li.active {
	background: rgb(0, 89, 73);
	color: #fff;
}

body .contentFlexHolder .menu_principal ul li.active:hover {
	background: rgb(0, 89, 73);
}

body .contentFlexHolder .menu_principal ul li i {
	margin-right: 10px;
	color: rgb(0, 89, 73);
}

body .contentFlexHolder .menu_principal ul li.active i {
	color: #fff;
}

body .contentFlexHolder .menu_principal .logout-content {
	background: #F8F9FA;
	width: 90%;
	display: block;
    margin: 50px auto 0;
    padding: 20px;
    border-radius: 15px;
}

body .contentFlexHolder.offline .menu_principal .logout-content {
	background: #212529;
}

body .contentFlexHolder .menu_principal .logout-content .btn-sincronizar .btn.rounded-circle {
    width: 40px;
    height: 40px;
    line-height: 2;
}

body .contentFlexHolder .menu_principal .logout-content .btn-sincronizar p {
	height: 40px;
	line-height: 40px;
	margin: 0;
	color: #FCFCFC;
}

body .contentFlexHolder .menu_principal .btn.btn-logout {
	background: #FCFCFC;
	border: 1px solid #E9ECEF;
	width: 100%;
	display: block;
	margin: auto;
	border-radius: 10px;
}

body .contentFlexHolder.offline .menu_principal .btn.btn-logout {
	background: #08040B;
	border-color: #343A40;
	color:#FCFCFC;
}

body .contentFlexHolder .menu_principal .btn.btn-logout:hover {
	border-color: rgb(0, 89, 73);
}

body .contentFlexHolder .menu_principal .btn.btn-logout i {
	margin-right: 10px;
    font-size: 20px;
}

body .contentFlexHolder .menu_secundario {
	height: calc(100% - 120px);
	background: #FCFCFCAA;
	backdrop-filter: blur(6px) !important;
	width: 290px;
	overflow: auto;
	position: absolute;
	left: -40px;
	top: 120px;
	transition: 300ms all ease;
	z-index: 3;
}

body .contentFlexHolder .menu_secundario.active {
	left: 252px;
}

body .contentFlexHolder .menu_secundario ul {
	display: none;
}

body main {
	height: 100%;
	flex-basis: calc(100% - 250px);
	overflow-y: auto;
	z-index: 1;
	transition: 300ms all ease;
}

body main .main-inner-content {
	width: 80%;
	min-height: calc(100% - 200px);/*100vw - footer height*/
	margin: auto;
}

body main .main-inner-content .breadcrumb {
	padding-top: 30px;
	margin: 0 auto 30px;
	line-height: 20px;
}

.box-content {
	width: 100%;
	padding: 20px;
	margin-bottom: 30px;
	background: #FCFCFC;
	border-radius: 15px;
	border: 2px solid #DEE2E6;
}

.box-content.bg-gray {
	background: #f9f9f9;
}

.box-content.without-border {
	border: none;
}

body main footer {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	width: 80%;
	height: 100px;
	margin: 50px auto;
	padding-top: 50px;
	border-top: 2px solid #DEE2E6;
	color: #6c6c6c;
}

@media screen and (max-width: 1200px) {
	body header {
		background-position: 50% 15px, 0;
		border-radius: 0 0 35px 35px;
	}

	body header #menu-button {
		display: block;
	}

	body header .link-manual {
		top: 105px;
		left: calc(50% - 125px);
	}

	body header .avatar-content {
    	width: 300px;
	}

	body header .avatar-content div:nth-child(2) .avatar-data {
    	display: none;
	}

	body .contentFlexHolder .menu_principal,
	body .contentFlexHolder .menu_secundario {
		position: absolute;
		top: 0;
	}
	
	body .contentFlexHolder .menu_principal {
		left: -250px;
		flex-basis: 250px;
		width: 250px;
	}

	body .contentFlexHolder .menu_principal.opened {
		left: 0px;
	}

	body .contentFlexHolder .menu_secundario {
		left: -290px;
		height: 100%;
	}

	body .contentFlexHolder .menu_secundario.active {
		left: 250px;
	}

	body main {
		height: 100%;
		flex-basis: 100%;
		overflow: auto;
		z-index: 1;
	}

	body main .main-inner-content,
	body main footer {
		width: 90%;
	}
}


@media screen and (max-width: 690px) {
	body header .avatar-content {
    	width: 120px;
	}

	body header .avatar-content div .avatar-data {
    	display: none;
	}

	body .contentFlexHolder .menu_principal.opened.submenu {
		left: -250px;
	}

	body .contentFlexHolder .menu_secundario.active.submenu {
		left: 0px;
	}

	body main footer {
		flex-direction: column;
		text-align: center;
	}
}

@media screen and ((max-height: 500px) or (max-width: 450px)) {
	body header {
		height: 75px;
		background-position: 80px 10px, 0;
		background-size: 110px, 100%;
	}

	body header .link-manual {
		display: none;
	}

	body header #menu-button {
		width: 35px;
    	height: 35px;
    	top: calc(90px * 0.5 - 20px);
    	font-size: 17px;
    	padding: 0;
	}

	body header .avatar-content {
		height: 75px;
		padding-top: 10px;
	}

	body .contentFlexHolder {
		height: calc(100% - 60px);
	}
}

ul.tab-custom {
	padding: 0;
	margin: 20px auto;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

ul.tab-custom li {
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	padding: 0 50px;
	transition: 300ms all ease;
	border-radius: 10px 10px 0 0;
}

ul.tab-custom li:hover {
	background: rgb(0, 89, 73);
	color: #fff;
}

ul.tab-custom li.active {
	border-bottom: rgb(0, 89, 73) 3px solid;
}

.tab-custom-content > div {
	display: none;
}

.rebase-box-content {
	margin-bottom: -35px !important;
}

div[class^=col-] {
	margin-bottom: 15px;
}

ul.colored-bullet-list.popover {
	padding-left: 0;
	position: relative;
	line-height: 20px;
}

ul.colored-bullet-list.popover li {
	line-height: 20px;
	padding-left: 10px;
	text-align: justify;
}

ul.colored-bullet-list {
	padding-left: 0;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	height: 20px;
	line-height: 20px;
}

ul.colored-bullet-list li {
	height: 20px;
	line-height: 20px;
	display: inline-block;
	padding-left: 10px;
	margin-right: 15px;
	white-space: nowrap;
	text-align: justify;
}

ul.colored-bullet-list li:before {
	content: "";
	position: relative;
	left: -10px;
	top: 3px;
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #6C757D;
	border-color: #6C757D;
	border: solid 1px;
}

ul.colored-bullet-list li.danger:before {
	background-color: #dc3545;
	border-color: #dc3545;
}

ul.colored-bullet-list li.danger-opaque:before {
	color: #b02a37;
	background-color: #f8d7da;
	border-color: #f1aeb5;
}

ul.colored-bullet-list li.warning:before {
	background-color: #ffc107;
	border-color: #ffc107;
}

ul.colored-bullet-list li.warning-opaque:before {
	color: #997404;
	background-color: #fff3cd;
	border-color: #ffe69c;
}

ul.colored-bullet-list li.success:before {
	background-color: #198754;
	border-color: #198754;
}

ul.colored-bullet-list li.success-opaque:before {
	color: #146c43;
	background-color: #d1e7dd;
	border-color: #a3cfbb;
}

.lojas-selecionadas {
	border-radius: 20px;
	min-height: 300px;
}

.lojas-selecionadas.inactive {
	border: 2px dashed #DEE2E6;
}

.lojas-selecionadas.inactive p.opaque {
	margin-top: 150px;
	margin-bottom: 150px;
}

ul.list-group-horizontal.list-group-as-pill {
    justify-content: center;
}

ul.list-group-horizontal.list-group-as-pill li {
	padding: 0px !important;
    line-height: 30px;
    height: 30px;
    width: 30px;
    text-align: center;
}

ul.list-group-horizontal.list-group-as-pill li:first-child {
	border-radius: 15px 0 0 15px !important;
}

ul.list-group-horizontal.list-group-as-pill li:last-child {
	border-radius: 0 15px 15px 0 !important;
}

ul.list-group-horizontal.list-group-as-pill.extended-pill-md li:first-child,
ul.list-group-horizontal.list-group-as-pill.extended-pill-md li:last-child {
	width: 50px !important;
}

ul.list-group-horizontal.list-group-as-pill.extended-pill-lg li:first-child,
ul.list-group-horizontal.list-group-as-pill.extended-pill-lg li:last-child {
	width: 70px !important;
}

ul.list-group-horizontal.list-group-as-pill.extended-pill-xlg li:first-child,
ul.list-group-horizontal.list-group-as-pill.extended-pill-xlg li:last-child {
	width: 100px !important;
}

ul.list-group-horizontal.list-group-as-pill li.list-group-item-primary.active {
	color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

ul.list-group-horizontal.list-group-as-pill li.list-group-item-success.active {
	color: #fff;
    background-color: #198754;
    border-color: #198754;
}

ul.list-group-horizontal.list-group-as-pill li.list-group-item-warning.active {
	color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
}

ul.list-group-horizontal.list-group-as-pill li.list-group-item-danger.active {
	color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

ul.list-group-horizontal.list-group-as-pill li.list-group-item-info.active {
	color: #fff;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

ul.list-group-horizontal.list-group-as-pill li.list-group-item-second.active {
	color: #fff;
    background-color: #6C757D;
    border-color: #6C757D;
}

table.table.table-without-border,
table.table.table-without-border th,
table.table.table-without-border td {
	border: none;
}

table.table.table-rounded-body,
table.table.table-without-border {
	white-space: nowrap;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

table.table.table-without-border thead tr th,
table.table.table-rounded-body thead tr th {
	border-bottom: none;
}

table.table.table-rounded-body tr td {
	border-bottom: 1px solid #DEE2E6;
	border-right: 1px solid #DEE2E6;
	vertical-align: middle;
}

table.table.table-rounded-body.without-grid-column tr td {
	border-right: none;
}

table.table.table-rounded-body.without-grid-column tr td:last-child {
	border-right: 1px solid #DEE2E6 !important;
}

table.table.table-rounded-body tr:first-child td {
	border-top: 1px solid #DEE2E6;
}

table.table.table-rounded-body tr td:first-child {
	border-left: 1px solid #DEE2E6;
}

table.table.table-rounded-body tr:first-child td:first-child {
	border-top-left-radius: 15px;
}

table.table.table-rounded-body tr:first-child td:last-child {
	border-top-right-radius: 15px;
}

table.table.table-rounded-body tr:last-child td:first-child {
	border-bottom-left-radius: 15px;
}

table.table.table-rounded-body tr:last-child td:last-child {
	border-bottom-right-radius: 15px;
}

table.table.table-rounded-body tr th .form-check,
table.table.table-rounded-body tr td .form-check {
	margin-bottom: 0;
}

ul.pagination li {
	min-width: 33px;
	text-align: center;
}

ul.pagination li a.page-link {
	background-color: #F8F9FA;
	color: inherit;
	padding: var(--bs-pagination-padding-y) 0;
}

ul.pagination li.active a.page-link,
ul.pagination li a.page-link:hover {
	background-color: rgb(0, 89, 73);
	border-color: rgb(0, 89, 73);
	color: #fff;
}

div.cardSanofi .title {
	height: 50px;
}

div.cardSanofi h1 {
	color: rgb(0, 89, 73);
	margin: 0;
}

.step-by-step {
	display: flex !important;
	justify-content: space-around !important;
	background-image: linear-gradient(90deg, rgb(0, 89, 73), rgb(0, 89, 73)), linear-gradient(90deg, #DEDEDE, #DEDEDE);
    background-size: 100% 3px;
    background-size: 0px 3px, calc(100% - (100% / 3)) 3px;
    background-position: calc((100% / 6) - 8px) 18px, calc((100% / 2) - 8px) 18px;
    background-repeat: no-repeat;
    transition: 300ms all ease;
}

.step-by-step.step-2 {
	background-size: calc((100% - (100% / 3)) / 2) 3px, calc(100% - (100% / 3)) 3px;
	background-position: calc((100% / 4) - 8px) 18px, calc((100% / 2) - 8px) 18px;
}

.step-by-step.step-3 {
	background-size: calc(100% - (100% / 3)) 3px;
	background-position: calc((100% / 2) - 8px) 18px;
}

.step-by-step .item .circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid;
	margin: 0 auto 20px;
	border-color: #DEDEDE;
	background-color: #f9f9f9;
}

.step-by-step .item.active .circle {
	border-color: rgb(0, 89, 73);
	background-color: #f9f9f9;
	position: relative;
}

.step-by-step .item.active .circle::after {
	content: "\f519";
	font-family: bootstrap-icons !important;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 36px;
	width: 36px;
	text-align: center;
	font-size: 20px;
    font-weight: bold;
    color: rgb(0, 89, 73);
}

.step-by-step .item.concluded .circle {
	border-color: rgb(0, 89, 73);
	background-color: rgb(0, 89, 73);
	position: relative;
}

.step-by-step .item.concluded .circle::after {
	content: "\f272";
	font-family: bootstrap-icons !important;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 36px;
	width: 36px;
	text-align: center;
	font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.step-by-step .item .label {
	font-size: 14px;
    font-weight: bold;
    color: #444;
}

.step-by-step .item.active .label {
	color: rgb(0, 89, 73);
}
.link{
	color: rgb(0, 89, 73);
	cursor: pointer;
}