/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/

:root,[data-color-theme=light] {
    --body-font-size-lg: 1rem;
    --body-font-size-sm: 0.75rem;
    --body-font-size-xs: 0.625rem;
    --body-line-height-computed: calc(1375rem / 1000);
    --body-line-height-lg: 1.375;
    --body-line-height-sm: 1.8334;
    --body-line-height-xs: 2.2;
    --component-active-bg: #0c83ff;
    --component-active-bg-rgb: 12,131,255;
    --component-active-color: #fff;
    --focus-ring-box-shadow: 0 0 0 0.125rem rgba(12, 131, 255, 0.25);
    --spacer-1: 0.3125rem;
    --spacer-2: 0.625rem;
    --spacer: 1.25rem;
    --spacer-4: 1.875rem;
    --spacer-5: 3.75rem;
    --icon-font-family: Phosphor;
    --icon-font-size: 1.25rem;
    --icon-font-size-lg: 1.5rem;
    --icon-font-size-sm: 1rem;
    --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
    --transition-base-timer: 0.15s;
    --transition-collapse-timer: 0.3s;
    --gray-100: #F9FAFB;
    --gray-200: #F3F4F6;
    --gray-300: #E5E7EB;
    --gray-400: #D1D5DB;
    --gray-500: #9CA3AF;
    --gray-600: #6B7280;
    --gray-700: #4B5563;
    --gray-800: #374151;
    --gray-900: #1F2937;
    --indigo: #5C6BC0;
    --purple: #8e70c1;
    --pink: #f35c86;
    --teal: #26A69A;
    --yellow: #ffd648;
    --primary: #0c83ff;
    --secondary: #247297;
    --success: #059669;
    --info: #049aad;
    --warning: #f58646;
    --danger: #EF4444;
    --light: #F3F4F6;
    --dark: #252b36;
    --black: #000;
    --white: #fff;
    --indigo-rgb: 92,107,192;
    --purple-rgb: 142,112,193;
    --pink-rgb: 243,92,134;
    --teal-rgb: 38,166,154;
    --yellow-rgb: 255,214,72;
    --primary-rgb: 12,131,255;
    --secondary-rgb: 36,114,151;
    --success-rgb: 5,150,105;
    --info-rgb: 4,154,173;
    --warning-rgb: 245,134,70;
    --danger-rgb: 239,68,68;
    --light-rgb: 243,244,246;
    --dark-rgb: 37,43,54;
    --black-rgb: 0,0,0;
    --white-rgb: 255,255,255;
    --body-color-rgb: 31,41,55;
    --body-bg-rgb: 241,244,249;
    --font-sans-serif: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--font-sans-serif);
    --body-font-size: 0.875rem;
    --body-font-weight: 400;
    --body-line-height: 1.5715;
    --body-color: #1F2937;
    --body-bg: #f1f4f9;
    --border-width: 1px;
    --border-style: solid;
    --border-color: #D1D5DB;
    --border-color-translucent: rgba(0, 0, 0, 0.125);
    --border-radius: 0.375rem;
    --border-radius-sm: 0.25rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;
    --border-radius-2xl: 2rem;
    --border-radius-pill: 50rem;
    --link-color: #0c83ff;
    --link-hover-color: #0962bf;
    --code-color: #f35c86;
    --highlight-bg: rgba(0, 0, 0, 0.15)
}

.bg-indigo {
    --bg-opacity: 1;
    background-color: rgba(var(--indigo-rgb),var(--bg-opacity))!important
}

.bg-purple {
    --bg-opacity: 1;
    background-color: rgba(var(--purple-rgb),var(--bg-opacity))!important
}

.bg-pink {
    --bg-opacity: 1;
    background-color: rgba(var(--pink-rgb),var(--bg-opacity))!important
}

.bg-teal {
    --bg-opacity: 1;
    background-color: rgba(var(--teal-rgb),var(--bg-opacity))!important
}

.bg-yellow {
    --bg-opacity: 1;
    background-color: rgba(var(--yellow-rgb),var(--bg-opacity))!important
}

.bg-primary {
    --bg-opacity: 1;
    background-color: rgba(var(--primary-rgb),var(--bg-opacity))!important
}

.bg-secondary {
    --bg-opacity: 1;
    background-color: rgba(var(--secondary-rgb),var(--bg-opacity))!important
}

.bg-success {
    --bg-opacity: 1;
    background-color: rgba(var(--success-rgb),var(--bg-opacity))!important
}

.bg-info {
    --bg-opacity: 1;
    background-color: rgba(var(--info-rgb),var(--bg-opacity))!important
}

.bg-warning {
    --bg-opacity: 1;
    background-color: rgba(var(--warning-rgb),var(--bg-opacity))!important
}

.bg-danger {
    --bg-opacity: 1;
    background-color: rgba(var(--danger-rgb),var(--bg-opacity))!important
}

.bg-light {
    --bg-opacity: 1;
    background-color: rgba(var(--light-rgb),var(--bg-opacity))!important
}

.bg-dark {
    --bg-opacity: 1;
    background-color: rgba(var(--dark-rgb),var(--bg-opacity))!important
}

.bg-black {
    --bg-opacity: 1;
    background-color: rgba(var(--black-rgb),var(--bg-opacity))!important
}

.bg-white {
    --bg-opacity: 1;
    background-color: rgba(var(--white-rgb),var(--bg-opacity))!important
}

.bg-opacity-10 {
    --bg-opacity: 0.1
}

.bg-opacity-20 {
    --bg-opacity: 0.2
}

.bg-opacity-25 {
    --bg-opacity: 0.25
}

.bg-opacity-50 {
    --bg-opacity: 0.5
}

.bg-opacity-75 {
    --bg-opacity: 0.75
}

.bg-opacity-100 {
    --bg-opacity: 1
}

.text-indigo {
    --text-opacity: 1;
    color: rgba(var(--indigo-rgb),var(--text-opacity))!important
}

.text-purple {
    --text-opacity: 1;
    color: rgba(var(--purple-rgb),var(--text-opacity))!important
}

.text-pink {
    --text-opacity: 1;
    color: rgba(var(--pink-rgb),var(--text-opacity))!important
}

.text-teal {
    --text-opacity: 1;
    color: rgba(var(--teal-rgb),var(--text-opacity))!important
}

.text-yellow {
    --text-opacity: 1;
    color: rgba(var(--yellow-rgb),var(--text-opacity))!important
}

.text-primary {
    --text-opacity: 1;
    color: rgba(var(--primary-rgb),var(--text-opacity))!important
}

.text-secondary {
    --text-opacity: 1;
    color: rgba(var(--secondary-rgb),var(--text-opacity))!important
}

.text-success {
    --text-opacity: 1;
    color: rgba(var(--success-rgb),var(--text-opacity))!important
}

.text-info {
    --text-opacity: 1;
    color: rgba(var(--info-rgb),var(--text-opacity))!important
}

.text-warning {
    --text-opacity: 1;
    color: rgba(var(--warning-rgb),var(--text-opacity))!important
}

.text-danger {
    --text-opacity: 1;
    color: rgba(var(--danger-rgb),var(--text-opacity))!important
}

.text-light {
    --text-opacity: 1;
    color: rgba(var(--light-rgb),var(--text-opacity))!important
}

.text-dark {
    --text-opacity: 1;
    color: rgba(var(--dark-rgb),var(--text-opacity))!important
}

.text-black {
    --text-opacity: 1;
    color: rgba(var(--black-rgb),var(--text-opacity))!important
}

.text-white {
    --text-opacity: 1;
    color: rgba(var(--white-rgb),var(--text-opacity))!important
}

.text-body {
    --text-opacity: 1;
    color: rgba(var(--body-color-rgb),var(--text-opacity))!important
}

.text-muted {
    --text-opacity: 1;
    color: rgba(var(--body-color-rgb),.75)!important
}

.text-reset {
    --text-opacity: 1;
    color: inherit!important
}

.text-opacity-25 {
    --text-opacity: 0.25
}

.text-opacity-50 {
    --text-opacity: 0.5
}

.text-opacity-75 {
    --text-opacity: 0.75
}

.text-opacity-100 {
    --text-opacity: 1
}


.badge {
    --badge-padding-x: 0.4375rem;
    --badge-padding-y: 0.3125rem;
    --badge-font-size: 0.75rem;
    --badge-font-weight: 600;
    --badge-color: #fff;
    --badge-border-radius: var(--border-radius-sm);
    display: inline-block;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1;
    color: var(--badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--badge-border-radius)
}

/* ------------------------------------------------------------------------------
 *
 *  # Chat layouts
 *
 *  Conversation chat styles - layouts, chat elements, colors, options
 *
 * ---------------------------------------------------------------------------- */
 .media-chat-scrollable {
    max-height: 32.5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .media-chat {
    --chat-message-padding-y: 0.625rem;
    --chat-message-padding-x: 1rem;
    --chat-message-bg: var(--gray-300);
    --chat-message-color: var(--body-color);
  }

  @media (min-width: 576px) {
    .media-chat-item {
      width: 75%;
    }
  }

  .media-chat-message {
    position: relative;
    padding: var(--chat-message-padding-y) var(--chat-message-padding-x);
    display: inline-block;
    -ms-flex-align: start;
        align-items: flex-start;
    color: var(--chat-message-color);
    border-radius: var(--border-radius);
  }
  .media-chat-message:not([class*=bg-]) {
    background-color: var(--chat-message-bg);
  }

  .media-chat-item-reverse {
    --chat-message-bg: var(--primary);
    --chat-message-color: var(--white);
    text-align: right;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .media-chat-item-reverse .media-chat-message {
    text-align: left;
  }

  .typing-indicator {
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .typing-indicator span {
    height: 0.125rem;
    width: 0.125rem;
    margin: 0 0.0625rem;
    background-color: var(--body-color);
    display: block;
    border-radius: var(--border-radius-pill);
    opacity: 0.4;
  }
  .typing-indicator span:nth-of-type(1) {
    -webkit-animation: 1.2s blink infinite 0.2s;
            animation: 1.2s blink infinite 0.2s;
  }
  .typing-indicator span:nth-of-type(2) {
    -webkit-animation: 1.2s blink infinite 0.4s;
            animation: 1.2s blink infinite 0.4s;
  }
  .typing-indicator span:nth-of-type(3) {
    -webkit-animation: 1.2s blink infinite 0.6s;
            animation: 1.2s blink infinite 0.6s;
  }
  @-webkit-keyframes blink {
    50% {
      opacity: 1;
    }
  }
  @keyframes blink {
    50% {
      opacity: 1;
    }
  }


.h-40px {
    height: 2.5rem !important;
}
.w-40px {
    width: 2.5rem !important;
}

.status-indicator-container img {
    -webkit-mask-image: radial-gradient(circle at calc(100% - .3125rem) calc(100% - .3125rem), rgba(0, 0, 0, 0) calc(.3125rem + .125rem), #000 0);
    mask-image: radial-gradient(circle at calc(100% - .3125rem) calc(100% - .3125rem), rgba(0, 0, 0, 0) calc(.3125rem + .125rem), #000 0);
}

.toggle-accordion:before {
    content: "Tout développer";
}

.toggle-accordion.active:before {
    content: "Tout réduire";
}

.alert {
    --alert-bg: transparent;
    --alert-padding-x: var(--spacer);
    --alert-padding-y: calc(var(--spacer)* 0.8);
    --alert-dismissible-padding-r: calc(var(--spacer)* 3);
    --alert-margin-bottom: var(--spacer);
    --alert-color: inherit;
    --alert-border-width: var(--border-width);
    --alert-border-color: transparent;
    --alert-border-radius: var(--border-radius);
    position: relative;
    padding: var(--alert-padding-y) var(--alert-padding-x);
    margin-bottom: var(--alert-margin-bottom);
    color: var(--alert-color);
    background-color: var(--alert-bg);
    border: var(--alert-border-width) solid var(--alert-border-color);
    border-radius: var(--alert-border-radius);
}

.alert-primary {
    --alert-color: #085cb3;
    --alert-bg: #e7f3ff;
    --alert-border-color: #86c1ff;
    --alert-link-color: #064a8f;
    --alert-link-hover-color: #06407d;
}

.alert-warning {
    --alert-color: #ac5e31;
    --alert-bg: #fef3ed;
    --alert-border-color: #fac3a3;
    --alert-link-color: #8a4b27;
    --alert-link-hover-color: #784222;
}

.alert-success {
    --alert-color: #04694a;
    --alert-bg: #e6f5f0;
    --alert-border-color: #82cbb4;
    --alert-link-color: #03543b;
    --alert-link-hover-color: #034a34;
}

.alert-danger {
    --alert-color: #a73030;
    --alert-bg: #fdecec;
    --alert-border-color: #f7a2a2;
    --alert-link-color: #862626;
    --alert-link-hover-color: #752222;
}

/*chat*/

.avatars {
    display: flex;
    list-style-type: none;
    margin: auto;
    padding: 0;
    flex-direction: row
}

.avatars__item {
    background-color: #efefef;
    border-radius: 100%;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 100;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    transition: margin .1s ease-in-out;
    overflow: hidden;
    margin-left: -20px
}

.avatars__item:first-child {
    z-index: 5
}

.avatars__item:nth-child(2) {
    z-index: 4
}

.avatars__item:nth-child(3) {
    z-index: 3
}

.avatars__item:nth-child(4) {
    z-index: 2
}

.avatars__item:nth-child(5) {
    z-index: 1
}

.avatars__item:last-child {
    z-index: 0
}

.avatars__item img {
    width: 100%
}

.avatars:hover .avatars__item {
    margin-right: 20px
}

.chat-online {
    color: #34ce57
}

.chat-offline {
    color: #e4606d
}

.chat-messages {
    display: flex;
    flex-direction: column;
    min-height: 500px;
    max-height: 500px;
    overflow-y: auto
}

.chat-message-left,.chat-message-right {
    display: flex;
    flex-shrink: 0
}

.chat-message-left {
    margin-right: auto
}

.chat-message-right {
    flex-direction: row-reverse;
    margin-left: auto
}

.conversations-list {
    max-height: 730px;
    overflow-y: auto
}

.chat .chat-history ul {
    padding: 0
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 30px
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0
}

.chat .chat-history .message-data {
    margin-bottom: 15px
}

.chat .chat-history .message-data img {
    border-radius: 60px;
    width: 60px
}

.chat .chat-history .message-data-time {
    color: #434651;
    padding-left: 6px
}

.chat .chat-history .message {
    color: #444;
    padding: 18px 20px;
    border-radius: 7px;
    display: inline-block;
    position: relative
}

.chat .chat-history .message:after {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .other-message {
    background: #efefef
}

.chat .chat-history .other-message:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #efefef;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .my-message {
    background: #e8f1f3;
    text-align: right
}

.chat .chat-history .my-message:after {
    border-bottom-color: #e8f1f3
}

.chat .chat-message {
    padding: 20px
}

.chat-app .conversations-list a.active-conversation {
    background-color: #efefef!important
}

.list-feed {
    --feed-item-padding-y: 1.25rem;
    --feed-item-padding-x: calc(var(--spacer) + var(--feed-circle-radius));
    --feed-circle-bg: var(--white);
    --feed-circle-radius: 0.5rem;
    --feed-circle-position: calc((var(--body-line-height-computed) - var(--feed-circle-radius)) * 0.5);
    --feed-circle-border-width: calc(var(--border-width) * 2);
    --feed-circle-border-color: var(--secondary)
}

.list-feed[data-color-theme=dark],[data-color-theme=dark] .list-feed:not([data-color-theme]),html[data-color-theme=dark] .list-feed {
    color-scheme: dark;
    --feed-circle-bg: #2c2d33
}

.list-feed-item {
    position: relative;
    padding-bottom: var(--feed-item-padding-y);
    padding-left: var(--feed-item-padding-x)
}

.list-feed-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--feed-circle-position);
    background-color: var(--feed-circle-bg);
    display: inline-block;
    border: var(--feed-circle-border-width) solid var(--feed-circle-border-color);
    z-index: 3;
    width: var(--feed-circle-radius);
    height: var(--feed-circle-radius);
    border-radius: var(--border-radius-pill)
}

.list-feed-item:after {
    content: "";
    position: absolute;
    top: var(--feed-circle-position);
    left: calc(var(--feed-circle-radius) * .5 - var(--feed-circle-border-width) * .5);
    bottom: calc((var(--feed-circle-position) + var(--feed-circle-border-width)) * -1);
    width: 0;
    border-left: calc(var(--feed-circle-border-width) * .5) solid var(--feed-circle-border-color);
    border-right: calc(var(--feed-circle-border-width) * .5) solid var(--feed-circle-border-color);
    z-index: 2
}

.list-feed-item:first-child:after {
    top: var(--feed-circle-radius)
}

.list-feed-item:last-child {
    padding-bottom: 0
}

.list-feed-item:last-child:after {
    content: none
}

.list-feed-item[class*=border-]:after,.list-feed-item[class*=border-]:before {
    border-color: inherit
}

.list-feed-solid .list-feed-item:before {
    content: "";
    border-width: calc(var(--feed-circle-radius) * .5);
    width: 0;
    height: 0
}

.list-feed-square .list-feed-item:before {
    content: "";
    border-radius: 0
}

.list-feed-rhombus .list-feed-item:before {
    content: "";
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 0
}

.list-feed-time .list-feed-item {
    margin-left: calc(var(--feed-item-padding-x) * 2 - var(--feed-circle-radius) * .5)
}

.list-feed-time .list-feed-item .feed-time {
    position: absolute;
    left: calc((var(--feed-item-padding-x) * 2 - var(--feed-circle-radius) * .5) * -1);
    top: 0
}