:root {
    --brand: #042B0B;
    /* Cor base clara de contraste */
    --brand-light: #E7EAE7;
    /* Variações automáticas da paleta */
    --brand-90: color-mix(in srgb, var(--brand) 90%, var(--brand-light) 10%);
    --brand-80: color-mix(in srgb, var(--brand) 80%, var(--brand-light) 20%);
    --brand-70: color-mix(in srgb, var(--brand) 70%, var(--brand-light) 30%);
    --brand-60: color-mix(in srgb, var(--brand) 60%, var(--brand-light) 40%);
    --brand-50: color-mix(in srgb, var(--brand) 50%, var(--brand-light) 50%);
    --brand-40: color-mix(in srgb, var(--brand) 40%, var(--brand-light) 60%);
    --brand-30: color-mix(in srgb, var(--brand) 30%, var(--brand-light) 70%);
    --brand-20: color-mix(in srgb, var(--brand) 20%, var(--brand-light) 80%);
    --brand-10: color-mix(in srgb, var(--brand) 10%, var(--brand-light) 90%);
    /* para fundos claros */
    --brand-warm-light: #F7EFE6;
}

@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;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
}

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;
}

body.login {
    background-color: var(--brand-warm-light);
}

body.login #login-form-container {
    width: 40%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    z-index: 2;
}

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

body.login #login-form form[name=login] {
    /*display: none;*/
}

body.login #login-form form[name=login-setor] {
    display: none;
}

body.login #login-logo-container {
    width: 60%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    z-index: 0;
}

body.login #login-logo-container #logo {
    width: 100%;
    height: 100%;
    background-image: url('../img/logo.svg'), linear-gradient(transparent, transparent), url('../img/bg_login_opella.png');
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-size: 20vw, 100%, cover;
}

body.login form[name='login'] .btn,
body.login form[name='login-setor'] .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: var(--brand);
    text-decoration: none;
}

p.opaque {
    color: #ADB5BD;
}

small,
.small {
    font-size: 12px;
}

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;
}

ul.default {
    list-style: initial;
}

.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: var(--brand);
}

.spinnerSanofi {
    width: 50px;
    height: 50px;
    border-width: 5px;
    color: var(--brand);
}

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

.text-purple {
    color: var(--brand-90);
}

.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-outline-secondary {
    border-color: #dee2e6;
    color: #212529;
}

.btn.btn-outline-secondary:hover{
    background-color: #ebeaea;
}

.btn.btn-purple {
    background-color: var(--brand-90);
    color: #fff;
    border: var(--brand-90) 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: inherit;
    border: var(--brand-90) 1px solid;
    color: var(--brand-90);
}

.btn.btn-outline-purple:hover,
.btn.btn-outline-purple.loader {
    background-color: var(--brand-90);
    color: #fff;
}

.btn.btn-purple-text {
    color: var(--brand-90);
}

.badge.badge-purple-text {
    color: var(--brand);
}

.badge.badge-purple {
    background-color: var(--brand);
    color: #fff;
}

.badge.badge-purple {
    background-color: var(--brand);
    color: #fff;
}

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

.badge.badge-outline-purple {
    background-color: var(--brand-50);
    border: var(--brand) 1px solid;
    color: #FFFFFF;
    padding-top: 5px;
}

.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 button.without-arrow:after {
    display: none !important;
}

.dropdown.dropdown-purple button.btn {
    background-color: var(--brand-90);
    color: #fff;
}

.dropdown.dropdown-purple .dropdown-menu li a.dropdown-item {
    color: var(--brand);
}

.dropdown-menu li {
    cursor: pointer;
}

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

.alert.alert-purple {
    color: var(--brand);
    background-color: var(--brand-20);
    border-color:var(--brand);
}

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

.sanofi-tooltip {
    --bs-tooltip-bg: var(--brand);
    --bs-tooltip-color: #fff;
}

.sanofi-popover {
    --bs-popover-header-bg: var(--brand);
    --bs-popover-header-color: #FFF;
    --bs-popover-border-color: var(--brand);
}

.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;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: none !important;
    border-width: 2px;
}

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%;
}

@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: 0.7 !important;
    background-color: var(--brand) !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.svg'), linear-gradient(90deg, #7A00E6 -10%, #C997F5 160%);
    background-repeat: no-repeat;
    background-position: 20px 15px, 0;
    background-size: 145px, 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: 1;
    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 .avatar-content .btn.rounded-circle {
    width: 40px;
    height: 40px;
    line-height: 1;
    padding-left: 10px;
    background-color: #fff5;
    border: none;
    color: #fff;
}

body header .avatar-content .avatar-data {
    /*margin-left: -7px;*/
    width: 75%;
}

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: 250px;
    height: 120px;
    top: 0px;
    right: 20px;
}

body header .avatar-content div:nth-child(1) {
    max-width: 210px;
    border: #fff5 1px solid !important;
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
}

body header .avatar-content .dropdown-toggle::after {
    color: #fff;
}

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: #7A00E6;
    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: #7A00E6;
    color: #fff;
}

body .contentFlexHolder .menu_principal ul li.active:hover {
    background: #7A00E6;
}

body .contentFlexHolder .menu_principal ul li i {
    margin-right: 10px;
    color: #7A00E6;
}

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: var(--brand-90);
}

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: 87%;
    min-height: calc(100% - 230px);/*100vh - footer height*/
    margin: auto;
}

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

body main .main-inner-content #pageContentHolder {
    margin-top: 30px;
}

.box-content {
    width: 100%;
    padding: 20px;
    margin-bottom: 30px;
    background: #FCFCFC;
    border-radius: 10px;
    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: 87%;
    height: 100px;
    margin: 50px auto;
    padding-top: 50px;
    border-top: 2px solid #DEE2E6;
    color: #6c6c6c;
    font-size: 12px;
}

body main .main-inner-content .menu_auxiliar {
    width: 100%;
    padding: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    background: #FCFCFC;
    border-radius: 10px;
    border: 2px solid #DEE2E6;
    overflow: auto;
}

body main .main-inner-content .menu_auxiliar {

}

body main .main-inner-content .menu_auxiliar ul {
    height: 40px;
    width: auto;
    min-width: max-content;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

body main .main-inner-content .menu_auxiliar ul li {
    padding: 0 15px;
    margin: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    transition: 300ms all ease;
}
body main .main-inner-content .menu_auxiliar ul li.active {
    border-bottom: 2px solid #7A00E6;
}

body main .main-inner-content .menu_auxiliar ul li:hover {
    background: #7A00E6;
    color: #fff;
}

/********************************************************************************/
/* Tab Navigator Style like Simple Tabs */
/********************************************************************************/
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: #7A00E6;
    color: #fff;
}

ul.tab-custom li.active {
    border-bottom: #7A00E6 3px solid;
}

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

/********************************************************************************/


/********************************************************************************/
/* Tab Navigator Style like Group Buttons */
/********************************************************************************/
ul.nav-tab-button-purple {
    height: 40px;
    line-height: 40px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    margin: 0;
    padding: 0;
}

ul.nav-tab-button-purple li {
    padding: 5px 10px;
    margin: 0px;
    height: 40px;
    line-height: 29px;
    width: fit-content;
    background: #fff;
    border: #7A00E6 1px solid;
    color: #7A00E6;
    cursor: pointer;
    float: left;
    transition: 300ms all ease;
}

ul.nav-tab-button-purple li.active,
ul.nav-tab-button-purple li:hover {
    background: #7A00E6;
    color: #fff;
}

ul.nav-tab-button-purple li:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

ul.nav-tab-button-purple li:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
/********************************************************************************/

.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-rounded-body,
table.table.table-without-border {
    white-space: nowrap;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

table.table.table-rounded-body.no-nowrap {
    white-space: initial;
}

table.table.table-rounded-body tr th.no-nowrap,
table.table.table-rounded-body tr td.no-nowrap {
    white-space: initial;
    display: flex;
}

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 > tbody > 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;
}

table.table.table-without-border,
table.table.table-without-border tr,
table.table.table-without-border tr th,
table.table.table-without-border tr td,
table.table.table-without-border tr td:last-child,
table.table.table-without-border tr td:first-child {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

table.table.table-rounded-header thead tr th {
    border-right: 1px solid #DEE2E6;
    border-top: 1px solid #DEE2E6;
}

table.table.table-rounded-header thead tr th:first-child {
    border-left: 1px solid #DEE2E6;
}

table.table.table-rounded-header thead tr:first-child th:first-child {
    border-top-left-radius: 15px;
}

table.table.table-rounded-header thead tr:first-child th:last-child {
    border-top-right-radius: 15px;
}

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

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

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: var(--brand-70);
    border-color: var(--brand);
    color: #fff;
}

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

div.cardSanofi h1 {
    color: #7A00E6;
    margin: 0;
}

.step-by-step {
    display: flex !important;
    justify-content: space-around !important;
    background-image: linear-gradient(90deg, #7A00E6, #7A00E6), linear-gradient(90deg, #DEDEDE, #DEDEDE);
    background-size: 100% 3px;
    background-size: 0px 3px, calc(100% - (100% / 4)) 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% / 4) 3px, calc(100% - (100% / 4)) 3px;
    background-position: calc((100% / 4) - (100% / 8)) 18px, calc((100% / 2) - 8px) 18px;
}

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

.step-by-step.step-4 {
    background-size: calc(100% - (100% / 4)) 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: #7A00E6;
    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: #7A00E6;
}

.step-by-step .item.concluded .circle {
    border-color: #7A00E6;
    background-color: #7A00E6;
    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: #7A00E6;
}

.select2-container--default .select2-selection--single {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: 0.375rem 2.5rem 1.75rem 0.25rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select2-selection__arrow {
    display:none;
}
.select2-selection__rendered {
    line-height: inherit !important;
}

/***********************************************************/
/*ui-multiselect Cutom CSS*/
/***********************************************************/
button.ui-multiselect {
    width: 100% !important;
    background-image: none !important;
    background-color: #fff !important;
    cursor: auto !important;
    color: inherit !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    font-family: inherit !important;
}

button.ui-multiselect.ui-state-hover,
button.ui-multiselect:hover {
    border: 1px solid #d3d3d3;
}

button.ui-multiselect.ui-state-active,
.ui-widget-content {
    border-color: #7A00E6 !important;
}

button.ui-multiselect.ui-state-active {
    border-width: 2px;
}

button.ui-multiselect span.ui-icon.ui-icon-triangle-1-s {
    width: 50px;
    margin-top: -5px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.ui-widget-header {
    border:none;
    background-image: none !important;
    background-color: #fff !important;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
}

.ui-multiselect-filter input {
    width: 95% !important;
    font-size: 11px !important;
    border: 2px solid #d3d3d3;
}

ul.ui-helper-reset li {
    font-family: inherit !important;
    font-weight: normal !important;
}

ul.ui-helper-reset li a.ui-multiselect-all,
ul.ui-helper-reset li a.ui-multiselect-none {
    font-size: 11px;
}
ul.ui-helper-reset li a.ui-multiselect-all i,
ul.ui-helper-reset li a.ui-multiselect-none i {
    font-size: 15px;
}

ul.ui-helper-reset li.ui-multiselect-close {
    display: none;
}

.form-floating button.ui-multiselect {
    height: 58px;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.725rem;
}

ul.ui-multiselect-checkboxes li label.ui-state-hover {
    background-color: #7A00E6 !important;
    color: #fff !important;
    border: #7A00E6 1px solid !important;
    background-image: none !important;
}
/***********************************************************/
@media screen and (max-width: 1295px) {
    body.login #login-form {
        width: 35vw;
    }
}

@media screen and (max-width: 768px) {
    body.login #login-logo-container {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 0;
    }

    body.login #login-logo-container #logo {
        width: 100%;
        height: 100%;
        background-image: url('../img/logo.svg'), linear-gradient(transparent, transparent), url('../img/bg_login_opella.png');
        background-position: center 10%, center, center;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 50vw, 100%, cover;
    }

    body.login #login-form-container {
        width: 90%;
        height: 40%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    body.login #login-form {
        width: 100%;
        left: 0;
        transform: none;
        margin: 0 auto;
    }
}