@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    /* Primary */
    --Primary-0: #DDF1FF;
    --Primary-50: #C7E4F7;
    --Primary-100: #B1D6F0;
    --Primary-200: #85BBE1;
    --Primary-300: #58A1D2;
    --Primary-400: #2C86C3;
    --Primary-500: #006BB4;
    --Primary-600: #005690;
    --Primary-700: #00406C;
    --Primary-800: #002B48;
    --Primary-900: #001524;
    /* Secondary */
    --Secondary-25: #F5F6F8;
    --Secondary-50: #E3E5E8;
    --Secondary-100: #D1D4D8;
    --Secondary-200: #ADB2B9;
    --Secondary-300: #8A8F99;
    --Secondary-400: #666D7A;
    --Secondary-500: #424B5A;
    --Secondary-600: #353C48;
    --Secondary-700: #282D36;
    --Secondary-800: #1A1E24;
    --Secondary-900: #0D0F12;
    /* Success */
    --success-25: #E3F7F3;
    --Success-50: #D1EFE9;
    --Success-100: #BEE7DF;
    --Success-200: #9AD6CA;
    --Success-300: #75C6B6;
    --Success-400: #51B5A1;
    --Success-500: #2CA58D;
    --Success-600: #238471;
    --Success-700: #1A6355;
    --Success-800: #124238;
    --Success-900: #09211C;
    /* Gray */
    --gray-25: #FCFCFD;
    --Gray-50: #F9FAFB;
    --Gray-100: #F2F4F7;
    --Gray-200: #EAECF0;
    --Gray-300: #D0D5DD;
    --Gray-400: #98A2B3;
    --Gray-500: #667085;
    --Gray-600: #475467;
    --Gray-700: #344054;
    --Gray-800: #1D2939;
    --Gray-900: #101828;
}

html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-family: 'Open Sans';
    background-color: var(--Primary-800,#002B48);
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.gridpage-container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gridpage-head {
    flex: 0;
}

.gridpage-body {
    flex: 1;
    overflow-y: auto;
}

.gridpage-tail {
    flex: 0;
}

/* Show three dots for long texts cut in grid cells */
.custom-ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.faicon-centered {
    display: inline-flex !important;
    align-items: center;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    padding: 5px 0 0 10px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    /*left: 0;*/
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    /*width: 100%;*/
    z-index: 1000;
    width:50%;
    right:0px !important;
    left:auto;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/*to add some padding for table data controls*/
td {
    text-align: left;
    padding: 10px;
    border-width: 1px;
}
/*to show the proper header and horizontal line*/
.infoheader {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #4384B0;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

    /*to show the header and horizontal line for any group*/
    .infoheader span {
        background: #fff;
        padding: 0 10px;
        font-size: 13px;
    }



/*styling for the button of Send Invoice Form*/
.bottombutton {
    float: right;
    padding-top: 5px;
    padding-bottom: 0px;
}
/*applied styling for the labels controls of Send Invoice Form */
.lblcontrols {
    margin: auto;
}
/*styling of the box with oval border*/
.statusbox {
    height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 14px;
    padding-bottom: 3px;
    width: auto;
    white-space: nowrap;
    padding: 2px 10px;
}

/*styling of the navigation icon "back" in the title of the admin ui.*/
.nav-back {
    color: #0068b1 !important;
}

    .nav-back:hover {
        color: #02317f !important;
        cursor: pointer;
    }

.grid-btn-right {
    margin-left: auto;
}

.docpdf-review-custom-modal {
    height: calc(100vh - 10px);
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding: 5px !important;
}

.btnAction {
    border: 2px solid;
    border-radius: 20px;
    opacity: 1;
    margin-right: 0px;
    font-weight: bold;
    /*font-size: 0.85rem !important;*/
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: fit-content;
}

    .btnAction:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .btnAction:disabled {
        color: white !important;
        background-color: #b6b5b5 !important;
        border: 2px solid #b6b5b5 !important;
        pointer-events: none;
    }

.btn-action-filled-blue {
    color: #fff !important;
    background-color: #006bb4 !important;
    border-color: #006bb4 !important;
}

    .btn-action-filled-blue:hover {
        color: #fff !important;
        background-color: #045a95 !important;
        border: 2px solid #045a95 !important;
    }

.btn-action-stroke-black {
    color: black;
    border-color: #707070;
    background-color: white;
}

    .btn-action-stroke-black:hover {
        color: white;
        border-color: #707070;
        background-color: #707070;
    }

.btn-action-stroke-blue {
    color: #006bb4;
    border-color: #006bb4;
    background-color: white;
}

    .btn-action-stroke-blue:hover {
        color: #045a95;
        border-color: #045a95;
        background-color: white;
    }

.btn-action-stroke-red {
    color: red;
    border-color: red;
    background-color: white;
}

    .btn-action-stroke-red:hover {
        color: white;
        border-color: red;
        background-color: red;
    }

.mt10 {
    margin-top: 10px;
}

.bm-header {
    padding: 0 0 .75rem 0 !important;
}

/* Base button style */
.login-with-google-btn {
    /* Smooth transition for background color and shadow */
    transition: background-color .3s, box-shadow .3s;
    /* Padding to accommodate the icon on the left */
    padding: 8px 16px 8px 42px;
    border: none;
    border-radius: 3px;
    /* Default box shadow */
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    /* Google icon image encoded in base64 */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGgGlsbD0iIzAwYTRlZiIvPjxyZWN0IHg9IjExIiB5PSIxIiB3aWR0aD05IiBoZWlnaHQ9IjkiIGZpbGw9IiM3ZmJhMDAiLz48cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiNmZmI5MDAiLz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    /* Positioning the Google icon inside the left padding */
    background-position: 10px 50%; /* Vertical position adjusted to 50% for better visual centering */
}

    /* Hover effect on mouseover */
    .login-with-google-btn:hover {
        /* Slightly more pronounced shadow on hover */
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }

    /* Active (on click) effect */
    .login-with-google-btn:active {
        /* Darker background color when pressed */
        background-color: #eeeeee;
    }

    /* Focus effect (when button is selected via keyboard/tab) */
    .login-with-google-btn:focus {
        outline: none;
        /* Custom focus shadow including a blue border effect */
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }

    /* Disabled state styling */
    .login-with-google-btn:disabled {
        /* Grayscale filter to indicate disabled state */
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }

/* Base style for the Microsoft login button */
.login-with-microsoft-btn {
    transition: background-color .3s, box-shadow .3s;
    padding: 8px 16px 8px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    /* Microsoft icon encoded in base64 */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj48dGl0bGU+TVMtU3ltYm9sTG9ja3VwPC90aXRsZT48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD05IiBoZWlnaHQ9IjkiIGZpbGw9IiNmMjUwMjIiLz48cmVjdCB4PSIxIiB5PSIxMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iIzAwYTRlZiIvPjxyZWN0IHg9IjExIiB5PSIxIiB3aWR0aD05IiBoZWlnaHQ9IjkiIGZpbGw9IiM3ZmJhMDAiLz48cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiNmZmI5MDAiLz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    /* Positioning the icon: 10px from the left, centered vertically */
    background-position: 10px 50%;
}

    /* Hover effect */
    .login-with-microsoft-btn:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }

    /* Active (on click) effect */
    .login-with-microsoft-btn:active {
        background-color: #eeeeee;
    }

    /* Focus effect (when tabbed to) */
    .login-with-microsoft-btn:focus {
        outline: none;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }

    /* Disabled state styling */
    .login-with-microsoft-btn:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }

.sign-in-form__divider {
    display: flex;
    align-items: center;
}

.divider-line {
    flex-grow: 1;
    border-top: 1px solid grey; /* Adjust color as needed */
}

.sign-in-form__divider-text {
    margin: 0 2px !important; /* Adjust space between text and lines */
}

.copy-tooltip {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    z-index: 12000;
    font-size: 80%;
    position: absolute;
    background: #f5f5f5; /* Lightest grey background */
    color: #424242;
    padding: .5rem 1rem;
    border-radius: 4px;
    bottom: -40px; /* Position below the button */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    font-weight: bolder;
    border: 1px solid #dcdcdc; /* Light grey border */
}

.copy-tooltip-textbox {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    z-index: 12000;
    font-size: 80%;
    position: absolute;
    background: #f5f5f5; /* Lightest grey background */
    color: #424242;
    padding: .5rem 1rem;
    border-radius: 4px;
    bottom: -40px; /* Position below the button */
    left: 95%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    font-weight: bolder;
    border: 1px solid #dcdcdc; /* Light grey border */
}

    .copy-tooltip.active {
        opacity: 1;
    }

.copy-tooltip-textbox.active {
    opacity: 1;
}

.label-container {
    display: flex;
    align-items: center;
    float: left;
}

    .label-container .requiredField {
        margin-right: 5px; /* Adjust space between the asterisk and the text as needed */
    }

.fa-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Set asterisk color to red */
.requiredField.lblcontrols, .required-mark {
    color: red;
}

.disputed-status-style-def {
    color: white !important;
    background-color: #999999 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style-def:hover {
        background-color: #8c8c8c !important;
        color: #f0f0f0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.disputed-status-style0 {
    color: #fff3cd !important;
    background-color: #9e0142 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style0:hover {
        background-color: #8c003a !important;
        color: #fae6b2 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

.disputed-status-style1 {
    color: #fff3cd !important;
    background-color: #d53e4f !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style1:hover {
        background-color: #cc3041 !important;
        color: #fae6b2 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }

.disputed-status-style2 {
    color: #fff3cd !important;
    background-color: #f46d43 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style2:hover {
        background-color: #ed5f36 !important;
        color: #fce2a8 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.disputed-status-style3 {
    color: #721c24 !important;
    background-color: #fdae61 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style3:hover {
        background-color: #fca151 !important;
        color: #61171e !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

.disputed-status-style4 {
    color: #721c24 !important;
    background-color: #fee08b !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style4:hover {
        background-color: #f7d67b !important;
        color: #61171e !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

.disputed-status-style5 {
    color: #3c763d !important;
    background-color: #e6f598 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style5:hover {
        background-color: #daed88 !important;
        color: #2e622f !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.disputed-status-style6 {
    color: #3c763d !important;
    background-color: #d2f2d2 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style6:hover {
        background-color: #c1e7c1 !important;
        color: #2e622f !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.disputed-status-span-relative {
    position: relative;
    padding-right: 25px;
    display: inline-block;
}

.validation-status-style-def,
.reception-status-style-def {
    color: white !important;
    background-color: #999999 !important;
    border-color: #ffeeba !important;
}

.reception-status-stylePending {
    color: #004085 !important;
    background-color: #cce5ff !important;
    border-color: #b8daff !important;
}

.reception-status-styleTaskDone {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

.reception-status-styleCompleted {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

.reception-status-styleCancelled {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}

.container-fluid-responsive {
    width: 100%; /* take full width by default */
}

.noshadow { /* fix chrome blue shadow focus*/
    box-shadow: none !important;
    outline: none !important;
}

@media (max-width: 1400px) {
    .container-fluid-responsive {
        width: fit-content !important;
    }
}


:root {
    --platform-name: "Compleo Invoice Platform";
}

.loading-progress-text {
    position: absolute;
    left: 50%;
    top: 55%;
    text-align: center;
    font-weight: bold;
    color: white;
    transform: translate(-50%, 50%);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


.loading {
    left: 50%;
    top: 50%;
    font-size: 50px;
    font-family: 'Open Sans';
    font-weight: 700;
    position: absolute;
    transform: translate(-50%, -60%);
    white-space: nowrap;
}

    .loading::before {
        color: var(--Gray-500);
        content: var(--platform-name);
    }

    .loading::after {
        top: 0;
        left: 0;
        opacity: 1;
        color: white;
        overflow: hidden;
        position: absolute;
        content: var(--platform-name);
        width: var(--blazor-load-percentage);
    }

.loading-border-spacer {
    position: absolute;
    left: 50%;
    top: 55%;
    border: 1px white solid;
    width: 456px;
    transform: translate(-50%, 50%);
}

:root {
    --cip-checkbox-gray-light: #797f85; /*#d3d3d3;*/
    --cip-checkbox-blue: #006bb4;
    --cip-checkbox-blue-hover: #045a95;
    --cip-checkbox-blue-disabled: #b3d4fc;
}

/* Try : fix firefox and prefilled values which give a bad yellow bkg and bold text once prefill value from browser items list*/

/*input:-moz-autofill,
input:-moz-autofill-preview {
    background-color: transparent !important;
    color: inherit !important;
    font-weight: normal !important;*/
    /* Tu peux aussi réinitialiser d'autres styles si besoin */
    /*box-shadow: 0 0 0 1000px white inset !important;*/ /* Optionnel : pour forcer la couleur de fond */
/*}*/
/*@keyframes unset-autofill {
    to {
        background-color: transparent;
        color: inherit;
        font-weight: normal;
    }
}

input:-moz-autofill {
    animation-name: unset-autofill;
    animation-fill-mode: both;
    animation-duration: 0s;
    animation-delay: 0.1ms;*/ /* déclenche immédiatement après autofill */
/*}*/
/* Optionnel : cibler spécifiquement ton champ */

/*#userNameInput:-moz-autofill {
    animation-name: unset-autofill;
    animation-fill-mode: both;
    animation-duration: 0s;
    animation-delay: 0.1ms;
}*/
/*#userNameInput:-moz-autofill {
    box-shadow: 0 0 0 1000px white inset !important;*/ /* cache le fond jaune */
    /*color: #000 !important;*/ /* force la couleur */
    /*font-weight: normal !important;
    transition: background-color 0s 50000s;*/ /* empêche le changement de fond */
/*}*/
/*
#userNameInput:-moz-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
    font-weight: normal !important;
}

#userNameInput {
    font-weight: normal !important;
}*/

/*input:-moz-autofill {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-color: transparent !important;
    color: inherit !important;
    font-weight: normal !important;
}

input {
    transition: background-color 5000s ease-in-out 0s;
}

    input:-moz-autofill {
        transition: background-color 5000s ease-in-out 0s;
    }
*/
/* Solution de contournement avec box-shadow pour masquer le background */
/*#userNameInput:-moz-autofill,
#userNameInput:-moz-autofill-preview {
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #333333 !important;
    color: #333333 !important;
    font-weight: normal !important;
}*/

/* Forcer les styles avec la plus haute spécificité possible */
/*html body div.form-group input#userNameInput.form-control {
    background-color: white !important;
    color: #333333 !important;
    font-weight: normal !important;
}*/
/* ==================== */