/*---------------GLOBALS----------------*/
:root {

    --white: #FFFFFF;
    --black: #141414;
    /*
    --accent-dark: #7a639c;
    --accent: #a18bbf;
    --accent-med: #a18bbf;
    --accent-light: #c7b6db;
    --accent-lighter: #e3dceb; */



    /* --primary-dark: #ec6b20;
    --primary: #ff8c42;
    --primary-med: #fca874;
    --primary-light: #ffd2a3;
    --primary-lighter: #ffebd6;

    ff8c42
    */

    --accent-dark: #3f4b6f;
    --accent: #5c6b92;
    --accent-med: #8793b5;
    --accent-light: #b1b9d3;
    --accent-lighter: #d6dced;
    --accent-lightest: #e8f0f7;


    --primary-dark: #c97b4a;
    --primary: #e1906b;
    --primary-med: #efad91;
    --primary-light: #f6cdb5;
    --primary-lighter: #fbe3d5;
    --primary-lightest: #fff0e6;

    --color-temp: var(--danger-med);
    /*color for field required*/

    --secondary-dark: #3f4b6f;
    --secondary: #5c6b92;
    --secondary-med: #8793b5;
    --secondary-light: #b1b9d3;
    --secondary-lighter: #d6dced;
    --secondary-lightest: #e8f0f7;
    /* --secondary-dark: #5d6b78;
    --secondary: #7f909f;
    --secondary-light: #d4dae0; */

    --success-dark: #4e811c;
    --success: #74BD2D;
    --success-med: #9bd069;
    --success-light: #cceab3;
    --success-lighter: #e4f3d0;
    --success-lightest: #f0f8e4;

    --danger-dark: #87171d;
    --danger: #c21d25;
    --danger-med: #f57a76;
    --danger-light: #f7b8b5;
    --danger-lighter: #f9d7d4;
    --danger-lightest: #fde8e7;

    --warning-dark: #8e6011;
    --warning: #cc7a0f;
    --warning-med: #efc048;
    --warning-light: #f9e5a1;
    --warning-lighter: #faf0cb;
    --warning-lightest: #fdf8e4;

    --info-darker: #1a4a7c;
    --info-dark: #2b6aa2;
    --info: #42A5FC;
    --info-med: #7dc4f9;
    --info-light: #a3ccef;
    --info-lighter: #d4e8f6;
    --info-lightest: #e8f6ff;

    --grey-blue-neutral-50: #F9FAFC;
    --grey-blue-neutral-100: #EFF3F7;
    --grey-blue-neutral-150: #E6EAF0;
    --grey-blue-neutral-200: #D3DAE2;
    --grey-blue-neutral-250: #C7CFDA;
    --grey-blue-neutral-300: #BCC5D1;
    --grey-blue-neutral-350: #AAB5C4;
    --grey-blue-neutral-400: #A4AFC1;
    --grey-blue-neutral-450: #959EB2;
    --grey-blue-neutral-500: #8B94A8;
    --grey-blue-neutral-550: #7B8499;
    --grey-blue-neutral-600: #4A4F60;
    --grey-blue-neutral-650: #404555;
    --grey-blue-neutral-700: #353B4A;
    --grey-blue-neutral-750: #2C323F;
    --grey-blue-neutral-800: #222634;
    --grey-blue-neutral-850: #1A1E2A;
    --grey-blue-neutral-900: #031021;
    --grey-blue-neutral-950: #020B19;



    --box-shadow-lg: 0 12px 16px -4px rgba(9, 19, 38, 0.08);
    --box-shadow-md: 0 8px 12px -4px rgba(9, 19, 38, 0.08);
    --box-shadow-sm: 0 4px 6px -1px rgba(9, 19, 38, 0.08);
    --box-shadow-xs: 0 2px 4px -1px rgba(9, 19, 38, 0.08);

    --box-shadow-inset: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    --main-font-family: "Lexend", sans-serif;
    --title-font-family: "Lexend", sans-serif;

    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;

    --Font-size-text-xs: 12px;
    --Font-size-text-sm: 14px;
    --Font-size-text-md: 16px;
    --Font-size-text-lg: 18px;
    --Font-size-text-xl: 20px;


    --Line-height-text-sm: 20px;
    --Line-height-text-md: 24px;
    --Line-height-text-lg: 28px;
    --Line-height-text-xl: 32px;


    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;
    --border-radius-xxl: 16px;
    --border-radius-rounded: 50px;

    --border-radius-input: var(--border-radius-md);
    --border-radius-card: var(--border-radius-md);
    --border-radius-button: var(--border-radius-md);
    --border-radius-alert: var(--border-radius-md);
    --border-radius-table: var(--border-radius-md);
    --color-label: var(--grey-blue-neutral-600);

    --form-control-color: var(--grey-blue-neutral-800);
    --form-control-border-color: var(--grey-blue-neutral-500);
    --form-control-disabled: var(--grey-blue-neutral-200);
    --form-background: var(--grey-blue-neutral-100);
    --form-control-focus: var(--accent-light);
    --link-color: var(--accent);
    --link-hover-color: var(--primary);
    --main-text-color: var(--grey-blue-neutral-800);

    --table-header-background: var(--grey-blue-neutral-700);
    --table-header-color: var(--white);

    --bg-premium-trader: var(--warning-lighter);
    --bg-light-trader: var(--info-lighter);
    --bg-trader-never-connected: var(--danger-lighter);

    --background-navbar: var(--white);
    --background-color: var(--grey-blue-neutral-150);

    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
}

/*
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--grey-blue-neutral-900);
        --text-color: var(--white);
        --main-text-color: var(--white);
        --form-background: var(--grey-blue-neutral-800);
        --form-control-color: var(--grey-blue-neutral-100);
        --form-control-border-color: var(--grey-blue-neutral-600);
        --table-header-background: var(--grey-blue-neutral-600);
        --table-header-color: var(--grey-blue-neutral-100);
        --link-color: var(--accent-light);
        --link-hover-color: var(--primary-light);
        --background-navbar: var(--grey-blue-neutral-900);
    }
} */

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 200;
    src: local('Lexend light'), url('../fonts/Lexend-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    src: local('Lexend normal'), url('../fonts/Lexend-Light.woff') format('woff');
}

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 600;
    src: local('Lexend Bold'), url('../fonts/Lexend-SemiBold.woff') format('woff');
}


@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fontawesome/webfonts/fa-solid-900.woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fontawesome/webfonts/fa-regular-400.woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("../fontawesome/webfonts/fa-light-300.woff2");
}

::placeholder {
    color: var(--form-control-border-color) !important;
}

html,
body {
    box-sizing: border-box;
    font-family: var(--main-font-family);
    color: var(--main-text-color);
    background-color: var(--background-color);
    font-weight: var(--font-weight-normal);
    font-size: var(--Font-size-text-sm);
    line-height: 1.73;
    letter-spacing: 0.2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--main-font-family);
}



h1 {
    font-size: var(--Font-size-text-xl);
    color: var(--grey-blue-neutral-900);
}

h2 {
    font-size: var(--Font-size-text-lg);
    color: var(--grey-blue-neutral-800);
    line-height: 24px;
}

.ui-tabs .ui-tabs-panel h2 {
    margin-bottom: 15px;
}

h3 {
    color: var(--grey-blue-neutral-700);
    font-size: var(--Font-size-text-sm);
}

a {
    color: var(--link-color);
}

strong,
b {
    font-weight: var(--font-weight-bold);
}

.font-sm {
    font-size: var(--Font-size-text-sm);
}

.relative {
    position: relative;
}

.z-index-1 {
    z-index: 1 !important;
}

.z-index-2 {
    z-index: 2 !important;
}

.z-index-3 {
    z-index: 3 !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

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

.readonly {
    background: #F2F2F2;
}

.d-flex {
    display: flex !important;
}

.flex-direction-row {
    flex-direction: row !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-inline {
    display: inline !important;
}

.d-block {
    display: block !important;
}

.row {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.col {
    flex: 1 0 0%;
}

.col-6 {
    flex: 1 1 50%;
    /* Chaque colonne prend 50% */
    box-sizing: border-box;
    /* Pour inclure padding et border */
}

.column-custom {
    flex: 1;
    /* Les colonnes prennent une taille égale */
    min-width: calc(50% - 8px);
    /* Assure un équilibre en mode desktop */
    box-sizing: border-box;
    /* Gère correctement les bordures/marges */
}

.color-white {
    color: var(--white) !important;
}

.color-info {
    color: var(--info) !important;
}

.d-none {
    display: none !important;
}
.d-none-desktop {
    display: none ;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}


.text-white {
    color: var(--white) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.flex-wrap {
    flex-wrap: wrap;
}

.fade-out {
    /* opacity: 0 !important; */
    animation: fade-out 0.3s ease-in;

}

.fade-in {
    animation: fade-in 0.3s ease-in;
}


.collapse {
    height: 0 !important;
    transition: height 1s ease;
    overflow: hidden;
}

.p-05 {
    padding: 0.5rem;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

.p-4 {
    padding: 4rem;
}

.pr-1 {
    padding-right: 1rem !important;
}

.pr-2 {
    padding-right: 2rem;
}

.pl-1 {
    padding-left: 1rem;
}

.pl-2 {
    padding-left: 2rem;
}

.pl-3 {
    padding-left: 3rem;
}

.pl-4 {
    padding-left: 4rem;
}

.pt-0 {
    padding-top: 0rem!important;
}

.pb-0 {
    padding-bottom: 0rem!important;
}

.pt-1 {
    padding-top: 1rem;
}

.pb-1 {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 2rem !important;
}

.m-0 {
    margin: 0;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.mr-1 {
    margin-right: 1rem;
}

.mt-0 {
    margin-top: 0rem !important;
}

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

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.my-0 {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

.my-1 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}


.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}



.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.align-items-center {
    align-items: center;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.gap-4 {
    gap: 4px;
}

.gap-6 {
    gap: 6px;
}

.gap-8 {
    gap: 8px;
}
.gap-10 {
    gap: 10px;
}
.gap-20 {
    gap: 20px;
}
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-help {
    cursor: help !important;
}

.bg-white {
    background-color: var(--white);
}

img {
    border-radius: 4px;
}

.float-right {
    float: right;
}

hr {
    border-bottom: 1px solid var(--grey-blue-neutral-150);
    border-top: 0;
    border-left: 0;
    border-radius: 0;
}



div,
table,
form {
    box-sizing: border-box;
    position: relative;
}


.no-overflow {
    overflow: hidden;
}

.gap-0 {
    gap: 0;
}

.gap-6 {
    gap: 6px;
}

.gap-10 {
    gap: 10px;
}

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

.mw-100 {
    max-width: 100% !important;
}

.mb-1 {
    margin-bottom: 1rem;
}

.position-relative {
    position: relative;
}

.bold,
.b {
    font-weight: var(--font-weight-bold);
}

.text-success {
    color: var(--success) !important;
}


/*---------------KEYFRAMES----------------*/
.spinner {
    transform-origin: center;
    animation: spinner .75s infinite linear
}

.loading-icon {
    display: none;
}

/*animation rotate infini*/
.rotate-animation {
    animation: rotate 2s linear infinite;
}

.fadein {
    animation: fadein 1s;
}

.fadeOut {
    animation: fadeOut 1.5s;
}

@-webkit-keyframes shake-bottom {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes shake-bottom {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes page {

    0%,
    80% {
        transform: rotateY(0deg);
    }

    98%,
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes line1 {
    0% {
        transform: scaleX(0);
    }

    15%,
    100% {
        transform: scaleX(1);
    }
}

@keyframes line2 {

    0%,
    20% {
        transform: scaleX(0);
    }

    35%,
    100% {
        transform: scaleX(1);
    }
}

@keyframes line3 {

    0%,
    40% {
        transform: scaleX(0);
    }

    55%,
    100% {
        transform: scaleX(1);
    }
}

@keyframes line4 {

    0%,
    60% {
        transform: scaleX(0);
    }

    75%,
    100% {
        transform: scaleX(1);
    }
}

@keyframes grow {
    from {
        transform: scale(0, 0);
        opacity: 0;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes move {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(45px);
    }
}

@-webkit-keyframes spScaleAlpha {
    0% {
        opacity: 1;
    }

    33% {
        opacity: 0.25;
    }

    66% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

@keyframes spScaleAlpha {
    0% {
        opacity: 1;
    }

    33% {
        opacity: 0.25;
    }

    66% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes spScaleAlphaBefore {
    0% {
        opacity: 0.25;
    }

    33% {
        opacity: 1;
    }

    66% {
        opacity: 0.25;
    }
}

@keyframes spScaleAlphaBefore {
    0% {
        opacity: 0.25;
    }

    33% {
        opacity: 1;
    }

    66% {
        opacity: 0.25;
    }
}

@-webkit-keyframes spScaleAlphaAfter {
    33% {
        opacity: 0.25;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}

@keyframes spScaleAlphaAfter {
    33% {
        opacity: 0.25;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}


@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



@keyframes spinner {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes slide-up {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-down {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(50px);
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}