html,
body {
    height: 100% !important;
}

.login-content {
    text-align: center;
    margin: auto;
    background: url(/assets/img/background.jpeg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 70%;
    height: 100%;
    background-position-y: -40px;
}

.login-card {
    background: rgba(255, 255, 255, 0.75);
    padding: 20px;
}

.btn {
    padding: 7px 15px !important;
}

.btn-label {
    margin-top: 7px;
    margin-left: 8px;
}

.btn-icon {
    margin-top: 5px;
}

.table-title {
    border-bottom: 1px solid #cb0c9f;
    padding: 20px 20px 5px 20px;
    margin-bottom: 20px;
}

.dataTables_wrapper {
    padding: 20px;
}

/*.card {
    border: 1px solid rgba(0, 0, 0, 0.3);
}*/

table,
table.dataTable tbody th,
table.dataTable thead th {
    font-size: 14px !important;
    padding: 15px 10px !important;
}

table,
table.dataTable tbody td {
    font-size: 12px !important;
    padding: 15px 10px !important;
}

.put-right {
    float: right !important;
}

.put-center {
    text-align: center !important;
}

.text-right {
    text-align: right;
}

.hidden {
    display: none !important;
}

.cursor-pointer {
    cursor: pointer;
}

.link-wight {
    color: #FFF !important;
}

.hidden {
    display: none !important;
}

.mr-10 {
    margin-right: 10px;
}

.btn-icon-span {
    width: 25px;
}

.width-full {
    width: 100% !important;
}

.modal-message {
    padding: 8px;
    margin: 10px 0px;
    text-align: center;
}

.icon-in-table {
    font-size: 16px !important;
    cursor: pointer;
}

.title-block {
    color: #FFF;
    background: #cb0c9f;
    border-radius: 10px 10px 0px 0px;
    padding: 9px 15px;
    margin: 0;
}

.sub-titl-block {
    padding: 10px 15px;
    font-size: 16px !important;
    font-weight: normal;
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
}

.no-border-radius {
    border-radius: 0px;
}

.contect-detaille-title {
    background: #FFF;
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
    text-align: center;
    padding: 25px 0px 10px 0px;
    font-size: 16px;
    font-weight: 600;
    float: left;
    width: 100%;
}

.contect-detaille-content {
    background: #FFF;
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
    text-align: center;
    padding: 10px;
    font-size: 14px;
    width: 100%;
}

.show-progress {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important
}

.form-error {
    color: #fd5c70;
    margin: 5px;
    font-size: 14px;
}

.color-ko {
    color: #fd5c70;
}

.color-ok {
    color: #17ad37;
}

.icon-in-table+.icon-in-table {
    margin-left: 10px;
}

.list-component {
    background: #FFF;
    border-radius: 10px 10px 0px 0px;
    border: solid 1px rgba(0, 0, 0, 0.125);
    padding: 0px;
    margin: 0px;
    height: fit-content;
}

.list-component .list-title {
    background: #cb0c9f;
    color: #FFF;
    border-radius: 10px 10px 0px 0px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    float: left;
    width: 100%;
}

.list-component span.list-menu {
    font-weight: 600;
    padding: 0px;
    padding: 10px 20px;
    float: left;
    width: 100%;
    background: #f8f9fa;
    font-size: 13px;
}

.list-component span {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
}

.list-component span.actif {
    color: #cb0c9f;
    font-weight: 600;
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
}

.list-sub-menu {
    padding: 0px;
}

.list-sub-menu span {
    padding: 10px 30px;
    float: left;
    width: 100%;
    font-size: 13px;
}

.slot-label,
.case-name {
    background: #cb0c9f;
    color: #FFF;
    padding: 0px 8px;
    border-radius: 5px;
    font-weight: normal;
    margin: 0px;
}

.mt-5 {
    margin-top: 5px !important;
}

.update-btn-close {
    background: none;
    border: none;
}

.btn-close {
    color: #344767;
    opacity: 1;
}

.btn-close:hover {
    color: #000;
    opacity: 1;
}

.icon-shape i {
    font-size: 20px !important;
    color: #67748e !important;
}

.active i {
    color: #FFF !important;
    font-size: 12px !important;
}

.list-group-item i.btn-icon {
    font-size: 24px !important;
    color: #FFF !important;
}

.list-group-item.active {
    padding: 11px 10px !important;
}

.btn-paginate {
    float: right;
    margin-top: 30px;
}

#distributers-founded ul,
#categories-founded ul,
#sites-founded ul {
    float: left;
    padding: 0;
    list-style: none;
    margin: 10px 0px 30px 0px;
    width: 100%;
    background: #FFF;
    border: solid 1px;
    border-radius: 5px;
}

#distributers-founded ul li,
#categories-founded ul li,
#sites-founded ul li {
    float: left;
    width: 100%;
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: solid 1px;
}

.selected-distributers-item,
.selected-categories-item,
.selected-sites-item {
    float: left;
    border: solid 1px;
    border-radius: 5px;
    padding: 3px 14px;
    margin-bottom: 10px;
}

.selected-distributers-item+.selected-distributers-item,
.selected-categories-item+.selected-categories-item,
.selected-sites-item+.selected-sites-item {
    margin-left: 10px;
}

.selected-distributers-item .close,
.selected-categories-item .close,
.selected-sites-item .close,
.close-cat {
    color: #fd5c70;
    font-size: 15px;
    position: relative;
    right: -5px;
    top: 0px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 50%;
    margin: 0;
}

.group-menu {
    position: absolute;
    right: 15px;
    border: solid 1px #000;
    border-radius: 5px;
    z-index: 9999;
    top: 33px;
    background: #FFF;
    width: 150px;
    font-size: 12px;
}

.group-menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.group-menu ul li {
    padding: 5px 10px;
    margin: 0px;
    float: left;
    width: 100%;
    border-bottom: solid 1px;
}

.modal {
    z-index: 99999999;
}

.group-name-span {
    float: left;
    width: 74%;
    font-size: 13px;
}

.badge-nbr {
    color: #a3017e;
    background-color: #f883dd;
    padding: 2px 6px;
    border-radius: 3px;
}

.field-requered-star {
    color: #fd5c70;
    font-size: 10px;
}

.container-fluid .my-4 {
    min-height: 350px;
}

.dataTables_info {
    letter-spacing: -0.025rem;
    color: #666 !important;
    font-weight: 400;
    line-height: 1.6;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item.active .nav-link,
.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item.active .nav-link {
    color: #cb0c9f !important;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item.active .nav-link:before,
.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item.active .nav-link:before {
    display: none !important;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link:before,
.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link:before {
    display: none !important;
}

.table-title {
    border-bottom: 1px solid #cb0c9f;
    padding: 0px 10px;
    margin-bottom: 20px;
    background: #cb0c9f;
    border-radius: 10px 10px 0px 0px;
}

.table-title h5 {
    color: #FFF;
    margin: 15px 5px 5px 5px;
    padding: 0px !important;
}

.table-title .btn {
    margin: 5px;
}

.dataTables_length {
    padding: 0px 7px !important;
}

.dataTables_wrapper {
    padding: 0px !important;
}

.datatable-basic_wrapper {
    padding: 0px 5px !important;
}

.dataTables_info,
.dataTables_paginate {
    padding: 20px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    background-image: linear-gradient(310deg, #cb0c9f 0%, #cb0c9f 100%) !important;
    color: #FFF !important;
    font-size: var(--bs-body-font-size) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: var(--bs-body-font-size) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px 10px !important;
    border-radius: 6px !important;
    color: #666 !important;
    font-size: var(--bs-body-font-size) !important;
    border: none !important;
}

.table {
    padding: 0px !important;
    margin: 0px !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #e9ecef !important;
    border-top: solid 1px #e9ecef;
    float: left;
    margin-top: 15px !important;
}

.padding-card-content {
    padding: 0px 15px;
}

.material-icons {
    font-size: 20px !important;
}

.card-table {
    padding: 0px 10px 10px 10px !important;
}

.group-name-span:hover,
.list-group-item a:hover,
.distributer-item:hover {
    color: #cb0c9f !important;
}

.t-active,
.t-active a {
    color: #cb0c9f !important;
}

.group-name-span,
.list-group-item a,
.distributer-item {
    font-size: 14px !important;
}

.table-title h5,
.title-block {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.title-block {
    padding: 12px 10px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.qty-component-span {
    float: left;
    border-radius: 0px !important;
    border: 1px solid #d2d6da;
    padding: 8px;
    text-align: center;
    width: 100%;
    background: #d63384;
    color: #FFF;
}

.qty-component-input {
    float: left;
    width: 80%;
    border-radius: 0px !important;
    border: 1px solid #d2d6da;
    padding: 8.2px;
    text-align: center;
}

.qty-component-plus,
.qty-component-minus {
    float: left;
    padding: 8px;
    background: #eee;
    text-align: center;
    width: 10%;
    border: 1px solid #d2d6da;
}

.login-content-child {
    margin: auto;
}

.sidenav .navbar-brand {
    padding: 20px !important;
    height: 100px !important;
}

.navbar-vertical .navbar-brand>img,
.navbar-vertical .navbar-brand-img {
    width: 100%;
    height: auto !important;
    max-height: 100% !important;
}

.login-brand-img {
    width: 100%;
    padding: 20px;
}

.login-brand-img>img {
    width: 100%;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0px !important;
}

.m-10 {
    margin: 10px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.btn-search i {
    font-size: 16px !important;
}

.no-border {
    border: none !important;
}

.filter {
    border-bottom: solid 1px #e9ecef;
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
}

#export_one_file {
    padding: 4px 20px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

#export_all_files {
    padding: 4px 20px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

.table thead th {
    padding: 0.5rem 0.5rem !important;
}

.table tbody td {
    padding: 0.5rem 0.5rem !important;
}

.spn-date {
    color: #52A456;
}

.spn-marge {
    color: #cb0c9f;
}

#analyse-content .sub-titl-block,
#revenues-content .sub-titl-block,
#best-sales-qty-content .sub-titl-block,
#best-sales-value-content .sub-titl-block {
    padding: 10px 15px;
    font-size: 16px !important;
    font-weight: 500;
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
    background: #cb0c9f;
    color: #FFF;
}

#analyse-content .title-block {
    color: #cb0c9f;
    background: #FFF;
    border-radius: 10px 10px 0px 0px;
    padding: 9px 15px;
    margin: 0;
}

.btn-login {
    margin-top: 25px;
}

.link-reset {
    text-align: center;
    font-size: 13px;
    padding: 0px 5px;
    color: #2D5E94;
    font-weight: 600;
}

.link-reset a {
    color: #cb0c9f;
}

.link-reset a:hover {
    text-decoration: underline;
}

.p-small {
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-size: 12px;
    color: #A7A7A7;
    font-weight: 600;
    margin-top: -5px;
    margin-bottom: 10px;
}

.autocomplete-result {
    border: solid 1px #000;
    border-radius: 5px;
    margin-top: 5px;
    position: absolute;
    width: 297px;
    background: #FFF;
    z-index: 100;
    width: 48.8%;
}

.autocomplete_item {
    float: left; 
    width: 100%; 
    padding: 2px 5px;
}

.bordred-radius {
    border: solid 1px #d2d6da;
    border-radius: 5px;
}

.autocomplete-result {
    border: solid 1px #d2d6da;
    border-radius: 8px;
    margin-top: 5px;
    width: 48.8%;
    height: auto;
    max-height: 280px;
    overflow-y: auto;
}

.modal-dialog .autocomplete-result {
    width: 93.8%;
}

.autocomplete-result .item-result {
    float: left;
    width: 100%;
    cursor: pointer;
    border-bottom: solid 1px #d2d6da;
    padding: 15px;
}

.autocomplete-result .item-result:hover {
    background: #f3f4f6;
}

/* Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    .retinco-col-lg-12 {
        width: 100%;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
    .retinco-col-md-12 {
        width: 100%;
    }

    #group-list {
        margin-bottom: 15px;
    }

    #transaction-menu {
        margin-bottom: 15px;
    }

    .filter select,
    .filter input,
    .filter button {
        margin-bottom: 10px;
    }
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .autocomplete-result {
        width: 94%;
    }

    .login-content {
        margin: 0px;
        width: 100%
    }

    .retinco-col-sm-12 {
        width: 100%;
    }

    #group-list {
        margin-bottom: 15px;
    }

    #transaction-menu {
        margin-bottom: 15px;
    }

    .filter select,
    .filter input,
    .filter button {
        margin-bottom: 10px;
    }
}

/* Small devices (tablets, 360px and up) */
@media (max-width: 740px) {
    .login-content {
        margin: 0px;
        width: 100%
    }

    .retinco-col-sm-12 {
        width: 100%;
    }

    #group-list {
        margin-bottom: 15px;
    }

    #transaction-menu {
        margin-bottom: 15px;
    }

    .filter select,
    .filter input,
    .filter button {
        margin-bottom: 10px;
    }
}