/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    background-color: var(--beige-alpa);
}

.container {
    height: 100vh;
}

@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 100%;
    }
}

@media (min-width: 1440px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100%;
    }
}

/* h1 {
    font-weight: normal;
    font-size: 100px;
    line-height: 100px;
}

h2 {
    font-weight: normal;
    font-size: 54px;
    line-height: 54px;
}

h3 {
    font-weight: bold;
    font-size: 48px;
    line-height: 58px;
}

h4 {
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
}

h5 {
    font-weight: normal;
    font-size: 32px;
    line-height: 32px;
}

h6 {
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
} */

.card {
    box-shadow: 0 2px 2px 0 rgba(50, 44, 58, 0.1);
}

.card.card-notification .card-header a h2 {
    color: var(--violet-alpa);
}

.card.card-notification .card-text {
    color: var(--violet-alpa);
    font-weight: 500;
}

.card.card-notification:hover {
    background-color: var(--violet-alpa);
    color: var(--beige-alpa);
}

.card.card-notification:hover .card-header a h2 {
    color: var(--beige-alpa);
}

.card.card-notification:hover .card-text {
    color: var(--beige-alpa);
}

.header-navbar .navbar-container {
    background-color: var(--beige-alpa);
}
.semi-dark-layout .main-menu {
    background-color: var(--beige-alpa);
}
.semi-dark-layout .main-menu.menu-dark .navigation {
    background-color: var(--beige-alpa);
}
.semi-dark-layout .main-menu-content .navigation-main .menu-content {
    background-color: var(--violet-alpa);
}
.main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a {
    background-color: var(--rouge-alpa);
}
/* cadre menu */
.semi-dark-layout .vertical-layout .main-menu .shadow-bottom {
    /* background: var(--beige-alpa); */
    background: transparent;
}

.semi-dark-layout .main-menu-content .navigation-main .navigation-header {
    color: var(--rouge-alpa) !important;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item a,
.semi-dark-layout .main-menu-content .navigation-main .nav-item a:after {
    color: var(--violet-alpa) !important;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item:hover a,
.semi-dark-layout .main-menu-content .navigation-main .nav-item:hover a:after {
    color: var(--beige-alpa) !important;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item:hover a svg,
.semi-dark-layout .main-menu-content .navigation-main .nav-item:hover a:after {
    stroke: var(--beige-alpa);
}

.semi-dark-layout .main-menu-content .navigation-main .menu-content,
.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content {
    background-color: var(--beige-alpa);
}

.semi-dark-layout .main-menu-content .navigation-main .menu-content,
.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content,
.semi-dark-layout
    .main-menu-content
    .navigation-main
    .nav-item
    .menu-content
    li:not(.active)
    a {
    color: var(--violet-alpa);
}

.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li ul .active {
    background: var(--violet-alpa);
    color: var(--beige-alpa) !important;
    border-radius:var(--button-raidus-admin);
    box-shadow: none;
}

.main-menu.menu-dark .navigation > li:hover > a {
    background: var(--violet-alpa);
    border-radius:var(--button-raidus-admin);
    box-shadow: none;
}

.main-menu.menu-dark .navigation .nav-item.has-sub {
    background: var(--beige-alpa);
    border-radius:var(--button-raidus-admin);
    box-shadow: none;
}

.main-menu.menu-dark .navigation > li:hover > a svg {
    stroke: var(--beige-alpa);
}

.main-menu.menu-dark .navigation li a {
    color: var(--violet-alpa);
    padding: 10px 15px;
    line-height: 1.45;
    border-radius:var(--button-raidus-admin);
}

.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a svg {
    stroke: var(--violet-alpa);
}

.vertical-layout.vertical-menu-modern
    .main-menu
    .navigation
    > li:hover
    > a
    svg
    #alpa_activities,
.vertical-layout.vertical-menu-modern
    .main-menu
    .navigation
    > li:hover
    > a
    svg
    #offers {
    fill: var(--beige-alpa);
}

.vertical-layout.vertical-menu-modern
    .main-menu
    .navigation
    > li.active
    > a
    svg
    #alpa_activities,
.vertical-layout.vertical-menu-modern
    .main-menu
    .navigation
    > li.active
    > a
    svg
    #offers {
    fill: var(--beige-alpa);
}

.vertical-layout.vertical-menu-modern
    .main-menu
    .navigation
    > li.active
    > a
    svg {
    stroke: var(--beige-alpa);
}

.content .content-wrapper .content-header-title {
    color: var(--violet-alpa) !important;
    border-right: 2px solid var(--rose-alpa) !important;
}

.content-header .breadcrumb-wrapper .breadcrumb-item a {
    color: var(--rouge-alpa);
}

.content-header .breadcrumb-wrapper .breadcrumb-item.active {
    color: var(--violet-alpa);
    font-weight: 500;
}

body .card {
    background-color: var(--beige-alpa);
    color: var(--violet-alpa);
}

body .card .card-img-top {
    background-color: var(--rouge-alpa);
}

.navbar-light,
.navbar-light.navbar-horizontal {
    background: var(--violet-alpa);
}

body .card .profile-title {
    margin-bottom: 2rem;
}

body .card .profile-title h2,
body .card .profile-title p {
    color: var(--beige-alpa);
}

body .card h1,
body .card h2,
body .card h3,
body .card h4,
body .card h5,
body .card h6 {
    color: var(--violet-alpa);
}

/* Tables */

.table.table-services {
    border-collapse: separate;
    border-spacing: 0px;
}

.card .table.table-services {
    border-collapse: separate;
    border-spacing: 20px 0;
    left: -20px;
    position: relative;
}

.table.table-services:not(.table-dark):not(.table-light)
    tfoot:not(.table-dark)
    th,
.table.table-services:not(.table-dark):not(.table-light)
    thead:not(.table-dark)
    th {
    background-color: var(--rouge-alpa);
    border-radius: 10px;
    color: var(--beige-alpa);
    font-weight: normal;
}

.card .table {
    border-spacing: 0px;
    border-collapse: separate;
    color: var(--violet-alpa);
}

.card .table tbody tr:last-child > * {
    border-bottom-width: 1px;
}

.card .table,
.card .table thead tr:first-child th:first-child {
    border-top-left-radius: 1rem;
}

.card .table,
.card .table thead tr:first-child th:last-child {
    border-top-right-radius: 1rem;
}

.card .table,
.card .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 1rem;
}
.card .table,
.card .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 1rem;
}

.table:not(.table-dark):not(.table-light) tfoot:not(.table-dark) th,
.table:not(.table-dark):not(.table-light) thead:not(.table-dark) th {
    background-color: var(--rose-alpa);
}

.card .table thead th {
    border: none;
    font-weight: 500;
}

.card .table tbody td {
    border: none;
    border: 1px solid var(--rose-alpa);
}

.table-title-row {
    border: 0 solid transparent;
}

td.table-title-data {
    color: var(--rouge-alpa);
    font-size: 24px;
    padding-left: 0;
}

.semi-dark-layout
    .semi-dark-layout
    .main-menu-content
    .navigation-main
    .navigation-header {
    color: var(--beige-alpa);
}

.semi-dark-layout
    .main-menu.menu-dark
    .navigation
    > li.open:not(.menu-item-closing)
    > a,
.main-menu.menu-dark .navigation > li.sidebar-group-active > a {
    background: var(--violet-alpa);
    border-radius:var(--button-raidus-admin);
}

.main-menu.menu-dark .navigation li.open a > * {
    /* -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease; */
    color: var(--beige-alpa);
}

.main-menu.menu-dark .navigation li.open a svg {
    /* -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease; */
    stroke: var(--beige-alpa);
}

.semi-dark-layout
    .main-menu-content
    .navigation-main
    .nav-item
    .menu-content
    li:not(.active)
    a {
    background-color: var(--beige-alpa);
}

.semi-dark-layout
    .main-menu-content
    .navigation-main
    .nav-item
    .menu-content
    li:not(.active)
    a
    span {
    color: var(--violet-alpa);
}

.semi-dark-layout
    .main-menu-content
    .navigation-main
    .nav-item
    .menu-content
    li:not(.active)
    a
    svg {
    stroke: var(--violet-alpa);
}

.nav-item.has-sub.sidebar-group-active span {
    color: var(--beige-alpa);
}

.nav-item.has-sub.sidebar-group-active a svg {
    /* stroke: var(--beige-alpa) !important; */
}

.semi-dark-layout .bg-primary {
    background-color: rgba(232, 66, 60, var(--bs-bg-opacity)) !important;
}

.header-navbar .navbar-container ul.navbar-nav li > a.nav-link {
    color: var(--violet-alpa);
}

.semi-dark-layout
    .main-menu:not(.expanded)
    .navigation
    .sidebar-group-active
    > a {
    background-color: var(--violet-alpa) !important;
}

.header-navbar
    .navbar-container
    ul.navbar-nav
    li
    > .dropdown-menu
    .dropdown-item {
    color: var(--violet-alpa);
}

.navigation li {
    margin-bottom: 1px;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.65rem 1.28rem;
    clear: both;
    font-weight: 400;
    color: #6e6b7b;
    text-align: inherit;
    background-color: transparent;
    border: 0;
}

.dropdown.dropdown-notification a svg {
    stroke: var(--violet-alpa);
}

.dropdown.dropdown-notification:hover a svg {
    stroke: var(--rouge-alpa);
}

.nav-pills .nav-link {
    border: none;
    color: var(--beige-alpa);
    font-size: 1.15rem;
    font-weight: 400 !important;
    line-height: 1.15rem;
    padding: 0.786rem 1.5rem;
}

.nav-pills .nav-link:hover {
    background-color: var(--rose-alpa);
    border: none;
    border-radius:var(--button-raidus-admin);
    color: var(--violet-alpa);
    font-size: 1.15rem;
    font-weight: 400 !important;
    line-height: 1.15rem;
    padding: 0.786rem 1.5rem;
}

.nav-pills .nav-link.active {
    background-color: var(--rose-alpa);
    border-radius:var(--button-raidus-admin);
    border: none;
    box-shadow: none;
    color: var(--violet-alpa);
    font-weight: 400 !important;
}

.nav-pills .nav-link.active:hover {
    background-color: var(--rose-alpa);
    border-radius:var(--button-raidus-admin);
    border: none;
    box-shadow: none;
    color: var(--violet-alpa);
    font-weight: 400 !important;
}

.nav-pills.user-infos .nav-link {
    border: none;
    color: var(--violet-alpa);
    margin-left: 5px;
}

.nav-pills.user-infos .nav-link:hover {
    background-color: var(--rose-alpa);
    border: none;
    color: var(--violet-alpa);
}

.nav-pills.right-menu .btn-success {
    background-color: var(--violet-alpa) !important;
    border: none;
    box-shadow: none;
    color: var(--violet-alpa);
    font-weight: 400 !important;
    color: var(--rose-alpa) !important;
}

.nav-pills.right-menu .btn-primary {
    background-color: var(--violet-alpa) !important;
    border: none;
    box-shadow: none;
    color: var(--violet-alpa);
    font-weight: 400 !important;
    color: var(--rouge-alpa) !important;
}

.nav-pills.right-menu .nav-item a .btn-success:hover {
    border: none;
    font-weight: 400 !important;
    background-color: var(--violet-alpa) !important;
    color: var(--rose-alpa) !important;
}

.nav-pills.right-menu .nav-item a .btn-primary:hover {
    border: none;
    font-weight: 400 !important;
    background-color: var(--violet-alpa) !important;
    color: var(--rouge-alpa) !important;
}

.nav-pills .nav-item:focus-visible,
.nav-pills .nav-item a:focus-visible,
.nav-pills .nav-item a span:focus-visible {
    outline: none;
}

.nav-pills .nav-item .btn-sm {
    padding: 2px;
    padding-top: 1rem;
}

.nav-pills .nav-item.menu_button a.waves-effect {
    position: static !important;
}

.btn-success:hover:not(.disabled):not(:disabled) {
    box-shadow: none;
}

.overlay-congratulation {
    background-color: var(--beige-alpa);
    position: absolute;
    width: 100%;
    height: 100.1%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    clip-path: polygon(100% 40%, 65% 100%, 100% 100%);
}

.card.card-congratulations {
    /* background: -webkit-linear-gradient(332deg, var(--rouge-alpa), #e8423cb3); */
    background: var(--rouge-alpa);
    /* background: linear-gradient(118deg, var(--rouge-alpa), #e8423cb3); */
    background: var(--rouge-alpa);
    color: var(--beige-alpa);
}

.card.card-congratulations .loginMessage {
    color: var(--beige-alpa);
    font-weight: 300;
    width: 55%;
    margin: 0 auto;
}

.error-page-message {
    color: var(--rouge-alpa);
    font-size: 14px;
}

.semi-dark-layout .bg-primary {
    background-color: var(--rose-alpa) !important;
}

.ecommerce-application .ecommerce-header-items .result-toggler .search-results {
    color: var(--violet-alpa);
}

.input-group
    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
        .valid-feedback
    ):not(.invalid-tooltip):not(.invalid-feedback) {
    background: var(--rose-alpa);
}

.input-group-merge .form-control:not(:last-child) {
    padding-right: 0;
    border-right: 2px solid var(--beige-alpa);
}

.input-group-text .feather-search {
    stroke: var(--violet-alpa);
}

label {
    /* color: var(--violet-alpa); */
}

/* Form */

.form-control,
.form-control:focus {
    color: var(--violet-alp);
    background-color: var(--rose-alpa);
    font-weight: 500;
}

.form-control,
.form-select {
    border: 1px solid var(--rose-alpa);
}

.form-control:focus {
    border-color: var(--rose-alpa);
    outline: 0;
}

.form-control::placeholder {
    color: var(--violet-alpa);
    letter-spacing: 1px;
}

.ecommerce-searchbar .form-control {
    color: var(--violet-alpa);
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
    /* -webkit-box-shadow: 0 0 0 1000px var(--rose-alpa) inset !important; */
    -webkit-box-shadow: 0 0 0 1000px var(--beige-alpa) inset !important;
    /* -webkit-text-fill-color: var(--violet-alpa) !important; */
}

.card-developer-meetup .text-muted {
    color: var(--violet-alpa) !important;
    color: var(--violet-alpa);
}

.form-check-input,
.form-select {
    background-color: var(--rose-alpa);
}
.row .select2-container--default .select2-selection--single{
    background-color:var(--rose-alpa) !important ;
}
.row .select2-container--default .select2-selection--single {
    border: 1px solid var(--rose-alpa);
}
.row .select2-container--default.select2-container--open .select2-selection--single {
    border-color:var(--rose-alpa) !important ;
}
body .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color:var(--rose-alpa) !important ;
}


.form-control-plaintext,
.form-select {
    color: var(--violet-alpa);
}

/* Badges */

.badge.badge-glow {
    box-shadow: none;
}

.valid-badge {
    background-color: var(--rose-alpa);
    border-radius: 15px;
    color: var(--rouge-alpa);
    padding: 5px 15px;
    width: auto;
}

.refused-badge {
    background-color: var(--rouge-alpa);
    border-radius: 15px;
    color: var(--beige-alpa);
    padding: 5px 15px;
    width: auto;
}

.registred-badge {
    background-color: var(--violet-alpa);
    border-radius: 15px;
    color: var(--beige-alpa);
    padding: 5px 15px;
    width: auto;
}

.follow-up-badge {
    background-color: var(--noir-alpa);
    border-radius: 15px;
    color: #fff;
    padding: 5px 15px;
    width: auto;
}

.active-badge {
    background-color: var(--rose-alpa);
    border-radius: 15px;
    color: var(--violet-alpa);
    padding: 5px 15px;
    width: auto;
}

.no-active-badge {
    background-color: var(--violet-alpa);
    border-radius: 15px;
    color: var(--rose-alpa);
    padding: 5px 15px;
    width: auto;
}

/* Buttons */

.btn {
    border-radius:var(--button-raidus-admin);
}

/* .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: var(--beige-alpa);
    background-color: var(--rouge-alpa) !important;
} */

.rouge-button {
    background-color: var(--rouge-alpa) !important;
    border: 2px solid transparent;
    color: var(--beige-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.rouge-button:hover {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--rouge-alpa) !important;
    color: var(--rouge-alpa) !important;
}

.rouge-button-download {
    background-color: var(--rouge-alpa) !important;
    border: 2px solid transparent;
    color: var(--beige-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.rouge-button-download:hover {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--rouge-alpa) !important;
    color: var(--rouge-alpa) !important;
}

.rouge-button-register {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--rouge-alpa) !important;
    color: var(--rouge-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.rouge-button-register:hover {
    background-color: var(--rouge-alpa) !important;
    border: 2px solid transparent !important;
    color: var(--beige-alpa) !important;
}

.violet-button {
    background-color: var(--violet-alpa) !important;
    border: 2px solid transparent;
    color: var(--beige-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.violet-button:hover {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--violet-alpa) !important;
    color: var(--violet-alpa) !important;
}

.violet-button-create {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--violet-alpa) !important;
    color: var(--violet-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.violet-button-create:hover {
    background-color: var(--violet-alpa) !important;
    border: 2px solid transparent !important;
    color: var(--beige-alpa) !important;
}

.black-button {
    background-color: var(--noir-alpa) !important;
    border: 2px solid transparent;
    color: #fff !important;
    padding: 5px 15px;
    width: auto;
}

.black-button:hover {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--noir-alpa) !important;
    color: var(--noir-alpa) !important;
}

.rose-button {
    background-color: var(--rose-alpa) !important;
    border: 2px solid transparent;
    color: var(--noir-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.rose-button:hover {
    background-color: var(--beige-alpa) !important;
    border: 2px solid var(--rose-alpa) !important;
    color: var(--violet-alpa) !important;
}

.rose-button-more {
    background-color: var(--rose-alpa) !important;
    border: 2px solid transparent;
    color: var(--violet-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.rose-button-more:hover {
    background-color: var(--rose-alpa) !important;
    border: 2px solid var(--rouge-alpa) !important;
    color: var(--rouge-alpa) !important;
}

.rose-button-modify {
    background-color: var(--rose-alpa) !important;
    border: 2px solid transparent;
    color: var(--rouge-alpa) !important;
    padding: 5px 15px;
    width: auto;
}

.rose-button-modify:hover {
    background-color: var(--rose-alpa) !important;
    border: 2px solid var(--violet-alpa) !important;
    color: var(--violet-alpa) !important;
}

/* Icons */
.edit-icon {
    stroke: var(--violet-alpa);
}

.rouge-button:hover .edit-icon {
    stroke: var(--rouge-alpa);
}

.more-icon {
    stroke: var(--violet-alpa);
}

.rose-button-more:hover .more-icon {
    stroke: var(--rouge-alpa);
}

.rose-button-modify:hover .edit-icon {
    stroke: var(--rouge-alpa);
}

.upload-icon {
    stroke: var(--beige-alpa);
}

.violet-button:hover .upload-icon {
    stroke: var(--violet-alpa);
}

.printer-icon {
    stroke: var(--beige-alpa);
}

.rouge-button:hover .printer-icon {
    stroke: var(--rouge-alpa);
}

/* Alerts */

.info-alert-message {
    background: none !important;
    color: var(--rouge-alpa) !important;
}

/* Images */
.profile-img-container .profile-img img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

#user-profile .profile-header .profile-img-container .profile-img {
    border: 0.357rem solid var(--beige-alpa);
    background-color: var(--beige-alpa);
    box-shadow: 0 2px 2px 0 rgba(50, 44, 58, 0.1);
}

/* Modals */
.modal,
.modal .form-label {
    color: var(--violet-alpa);
}

/* Dropdown */
.header-navbar .dropdown-item.active,
.dropdown-item:active {
    color: var(--violet-alpa);
    background-color: var(--rose-alpa);
}

.header-navbar .dropdown-item:focus,
.dropdown-item:hover {
    color: var(--violet-alpa);
    background-color: var(--beige-alpa);
}

/* Responsive */
/* small */
@media screen and (max-width: 767px) {
    .overlay-congratulation {
        clip-path: polygon(100% 60%, 75% 100%, 100% 100%);
    }

    .card.card-congratulations .loginMessage {
        width: 75%;
    }

    td.table-title-data {
        font-size: 20px;
    }
}

/* extra-small */
@media screen and (max-width: 575px) {
    .overlay-congratulation {
        clip-path: polygon(100% 75%, 65% 100%, 100% 100%);
    }

    .card.card-congratulations .loginMessage {
        width: 80%;
    }

    td.table-title-data {
        font-size: 16px;
    }
}

#needsAccordion .bg-need-without-monitoring{
    background-color: #6610F2;
    color: white;
}
#needsAccordion .bg-need-with-monitoring{
    background-color: #FF9F43;
    color: white;
}

#needsAccordion .bg-need-completed{
    background-color: #28C76F;
    color: white;
}