﻿.cde-main-page .cde-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cde-main-page .cde-top-bar .left {
    display: flex;
    gap: 0.625rem;
    flex-direction: column;
    align-items: flex-start;
    height: inherit;
}

.cde-main-page .cde-top-bar .right {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 1.25rem;
    height: inherit;
}

.cde-article-type {
    font-family: Gilroy-Semibold;
    font-size: 1.1rem;
}

.tag-topbar-nouvelle-commande {
    padding: 0.1875rem 0.375rem 0.1875rem 0.375rem;
    color: white;
    background-color: #23A995;
    font-size: 0.875rem !important;
    height: 1.5rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
}

.tag {
    padding: 0.1875rem 0.375rem 1px 0.375rem;
    color: white;
    font-size: 0.875rem !important;
    height: 1.5rem;
    border-radius: 0.25rem;
    display: inline-block;
}


.tag.nouvelle-commande-tag {
    background-color: var(--abs-light-purple);
}

.tag.nouvelle-commande-envoyer-tag {
    background-color: #337ab7;
}

.tag.traitement-commande-tag {
    background-color: #F7CE5B;
}

.tag.traitee-abena-commande-tag {
    background-color: #23A995;
}

.tag.annule-commande-tag {
    background-color: #d9534f;
}

.tag.envoyee-email-commande-tag {
    background-color: #5bc0de;
}

.tag .far {
    font-size: 0.75rem;
}

.default-badge {
    padding: 0.1875rem 0.375rem 1px 0.375rem;
    width: fit-content;
    border: 1px solid var(--secondary) !important;
    border-radius: 0.625rem;
    background: #EFF2FB;
    color: var(--secondary);
    font-size: 0.875rem !important;
    height: 1.5rem;
    align-content: center;
}
.default-badge.customer {
    width: 4.6875rem;
}
.default-badge.customer.ship-to {
    background: #77B36D;
    border-color: #77B36D !important;
    color: var(--white);
    text-align: center;
}

.custom-telerik-editor {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem;
    overflow-x: hidden;
    background-color: white;
}
.default-badge.customer.sold-to {
    background: #545FCC;
    border-color: #545FCC !important;
    color: var(--white);
    text-align: center;
}

.cde-edit-page {
    display: flex;
    gap: 1.25rem;
}

.cde-edit-page .left-part {
    min-width: 24.125rem;
    width: 24.125rem;
    background-color: white;
    padding: 1.25rem 1.875rem 0.5625rem;
    box-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.16);
}

.cde-edit-page .right-part {
    width: 100%;
    background-color: white;
    padding: 1.25rem 1.875rem 0.5625rem;
    border-radius: 0.625rem;
    margin-top: 1.25rem;
    margin-right: 1.25rem;
}

.cde-edit-page .cde-top-bar {
    display: flex;
    align-items: center;
}

.cde-edit-page .cde-top-bar .left {
    display: flex;
    gap: 0.625rem;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    height: inherit;
}

.cde-edit-page .cde-top-bar .right {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 1.25rem;
    height: inherit;
}


.commande-card .conditionnement {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    height: auto;
    align-items: baseline;
}

.commande-card .conditionnement .dispo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 3.75rem;
    padding: 0.1875rem 0.125rem 1px 0.375rem;
    color: white;
    background: #23A995;
    border: 1px solid #187768;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.commande-card .conditionnement .qties {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--abs-light-purple);
    gap: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.commande-card .conditionnement .qties i {
    font-size: 0.75rem;
}


.commande-drop {
    position: relative;
}

.commande-drop .commamde-drop-ok {
    background-color: #187768;
    z-index: 9;
}

.commande-drop .commamde-drop-alreadyPresent {
    background-color: red;
    z-index: 9;
}

.commande-drop .commamde-drop-child {
    position: absolute;
}


.commande-catalogue-panel {
    height: 90vh;
}


.cde-edit-grid.abs-grid .k-button-solid-base.delete-button {
    background-color: #DB504A !important;
    color: white !important;
}

.cde-edit-grid .k-grouping-row {
    background: transparent !important;
}

.cde-edit-grid .cde-calc {
    color: #4264d0;
    cursor: pointer;
    font-size: 1.5rem;
    padding-top: 0.3125rem;
}

.cde-edit-grid.abs-grid .k-button-solid-base.delete-button i {
    border: none;
    color: white;
}

.cde-edit-grid.abs-grid .k-button-solid-base.delete-button i {
    border: none;
    color: white;
}

.cde-add-article-container {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
}

.cde-add-article-container .left-part {
    display: flex;
    flex-direction: column;

}

.cde-add-article-container .left-part .article-add-designation {
    font-size: 1.125rem;
    font-weight: 600;
}

.cde-add-article-container .left-part .article-add-hierarchy {
    font-size: 0.9375rem;
    font-weight: 500;
}

.cde-add-article-container .right-part {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.cde-add-article-container .right-part .k-button {
    padding: 0.25rem 0.5rem;
}

.cde-add-article-container .cde-calc {
    color: #4264d0;
    cursor: pointer;
    font-size: 1.5rem;
    padding-top: 0.3125rem;
}

.commande-top-bar-menu {
    height: 3rem;
    background-color: transparent !important;
    border: none;
    padding: 0 !important;
}

.commande-top-bar-menu * .k-menu-expand-arrow {
    display: none;
}

.commande-top-bar-menu * .k-menu-link {
    gap: 0;
}


.calculator-tooltip .k-tooltip {
    background-color: transparent;
    box-shadow: none;
}

.calculator-tooltip .k-callout {
    display: none;
}

.calculator-tooltip .k-tooltip .k-tooltip-content {
    padding: 0.375rem;
}

.articles-tooltip .k-tooltip {
    background-color: white !important;
    color: black;
    border: none !important;
    /*padding: 1rem;*/
    box-shadow: 0 1px 0.875rem rgba(0, 0, 0, 0.12);
}

.articles-tooltip .k-tooltip .k-callout {
    display: none;
}

.articles-tooltip .picto-image {
    /*max-width: 3.75rem;*/
    width: 5rem;
    min-height: 5rem;
    max-height: 6.25rem;
}

.commande-creation-info {
    padding: 0.75rem 1.25rem;
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    border-left: 0.3125rem solid;
}

.commande-creation-info li + li {
    margin-top: 0.25rem;
}

.commande-creation-info i {
    margin-right: 1rem;
}

.orders-grid > tbody > tr:nth-child(odd), .orders-grid > tbody > tr:nth-child(odd) > td {
    background-color: var(--bgcolor) !important;
}

.orders-grid > tbody > tr:nth-child(odd) .loading-cell {
    background-color: white !important;
    border-color: white !important;
    background-image: linear-gradient(90deg, rgba(244, 244, 248, 0), rgba(244, 244, 248, 0.5), rgba(244, 244, 248, 0));
}


.order-info-bar {
    display: grid
}

.order-info-bar-vertical {
    display: none;
}

@media (min-width: 1400px) {
    .order-info-bar {
        display: none;
    }

    .order-info-bar-vertical {
        display: flex;
    }
}

.order-status-change-modal textarea {
    min-height: 10rem;
    overflow-y: auto !important;
}
.order-status-change-modal .k-textarea {
    min-height: 10rem;
}

.order-summary-footer{
    position: absolute;
    width: calc(100% - 16.5rem);
    top: 1rem;
    left: 1rem;
    white-space: break-spaces !important;
}