/*
Demo
.btn{
    color: orangered;
}
*/
/*!
 * Bootstrap  v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root, [data-bs-theme=light] {

    --bs-black: #435971;
    --bs-gray-dark: rgba(67, 89, 113, 0.8);
    --bs-gray-25: rgba(67, 89, 113, 0.025);
    --bs-gray-50: rgba(67, 89, 113, 0.05);
    --bs-primary: #FF7043;
    --bs-info: #2E66F6;
    --bs-dark: #263238;
    --bs-gray: rgba(67, 89, 113, 0.1);
    --bs-primary-rgb: 46, 102, 246;
    --bs-info-rgb: 46, 102, 246;
    --bs-dark-rgb: 35, 52, 70;
    --bs-gray-rgb: 67, 89, 113;
    --bs-primary-text-emphasis: #2a2b66;
    --bs-info-text-emphasis: #014e5e;
    --bs-dark-text-emphasis: rgba(67, 89, 113, 0.7);
    --bs-primary-bg-subtle: #e1e2ff;
    --bs-info-bg-subtle: #cdf3fb;
    --bs-dark-bg-subtle: rgba(67, 89, 113, 0.4);
    --bs-primary-border-subtle: #c3c4ff;
    --bs-info-border-subtle: #9ae7f7;
    --bs-dark-border-subtle: rgba(67, 89, 113, 0.5);
    --bs-black-rgb: 67, 89, 113;
}

.text-primary {
    color: #ff7043 !important;
}

html:not([dir=rtl]) .border-primary, html[dir=rtl] .border-primary{
    border-color: #ff7043!important;
}
.bg-primary{
    background-color: #FF7043!important;
}

.btn-primary {
    color: #fff;
    background-color: #FF7043 !important;
    border-color: #ff7043;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 112, 67, 0.4) !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #FF7043 !important;
    border-color: #FF7043;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: #FF7043;
    border-color: #FF7043;
    background: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    background-color: #FF7043 !important;
    border-color: #FF7043;
    transform: translateY(-1px);
}

.bg-label-primary {
    background-color: rgba(240, 154, 127, 0.28) !important;
    color: #FF7043 !important;
}

.btn-info {
    color: #fff;
    background-color: #2e66f6;
    border-color: #2e66f6;
    box-shadow: 0 .125rem .25rem 0 rgb(46, 102, 246);
}


.btn-info:hover, .btn-info:active, .btn-info:focus {
    color: #2e66f6 !important;
    background-color: #ffffff !important;
    border-color: #2e66f6 !important;
    box-shadow: 0 .125rem .25rem 0 rgba(46, 102, 246, 0.4) !important;
}
.btn-info:hover ,.btn-info:active, .btn-info:focus{
    color: #2e66f6!important;
    background-color: #ffffff!important;
    border-color: #2e66f6!important;
    box-shadow: 0 .125rem .25rem 0 rgb(46, 102, 246) !important;

}

.btn-outline-info {
    color: #2E66F6 !important;
    border-color: #2E66F6 !important;
    background: rgba(0, 0, 0, 0);
}

.btn-outline-info:hover {
    color: #ffffff !important;
    background-color: #2E66F6 !important;
    border-color: #2E66F6 !important;
    background: rgba(0, 0, 0, 0);
}

.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
    color: #fff !important;
    background-color: #2E66F6;
    border-color: #2E66F6;
    box-shadow: none;
    transform: translateY(0);
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #2E66F6;
    border-color: #2E66F6;
    box-shadow: 0 2px 4px 0 rgb(46, 102, 246);
}
.btn-check:checked+.btn-outline-info, .btn-check:active+.btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
    color: #fff !important;
    background-color: #2E66F6 !important;
    border-color: #2E66F6 !important;
}

.carousel-control-prev, .carousel-control-next {
    color: #2E66F6;
}
.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus {
    color: #09329a;
    text-decoration: none;
    outline: 0;
    opacity: 1;
}

.btn-secondary  {
    color: #fff;
    background-color: #78889b;
    border-color: #78889b;
    box-shadow: 0 .125rem .25rem 0 rgba(46, 102, 246, 0.4);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    color: #78889b !important;
    background-color: #ffffff !important;
    border-color: #78889b !important;
    box-shadow: 0 .125rem .25rem 0 rgba(46, 102, 246, 0.4) !important;
}

.btn-outline-secondary {
    color: #78889b !important;
    border-color: #78889b !important;
    background: rgba(0, 0, 0, 0);
}

.btn-outline-secondary:hover {
    color: #ffffff !important;
    background-color: #78889b !important;
    border-color: #78889b !important;
    background: rgba(0, 0, 0, 0);
}

.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
    color: #fff !important;
    background-color: #78889b;
    border-color: #78889b;
    box-shadow: none;
    transform: translateY(0);
}

.btn-dark {
    color: #fff;
    background-color: #263238 !important;
    border-color: #263238;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(38, 50, 56, 0.36) !important;
}

.btn-dark:hover, .btn-dark:active, .btn-dark:focus {
    background-color: #263238 !important;
    border-color: #263238;
    transform: translateY(-1px);
}

.btn-secondary {
    color: #fff;
    background-color: #78889b !important;
    border-color: #78889b;
    box-shadow: 0 0.125rem 0.25rem 0 rgb(120, 136, 155) !important;
}

.btn-dark:hover, .btn-dark:active, .btn-dark:focus {
    background-color: #78889b !important;
    border-color: #78889b;
    transform: translateY(-1px);
}

.badge {
    font-size: 0.742em;
}

.bg-label-info {
    background-color: rgba(46, 102, 246, 0.14) !important;
    color: #2e66f6 !important;
}

.bg-label-dark {
    color: #263238 !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    color: #2E66F6;
    background-color: rgba(46, 102, 246, 0.14) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
    background: #2E66F6;
}

.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus {
    background-color: #263238 !important;
}

table, thead, tbody, th, tr, td {
    color: #263238 !important;
}

h1, h2, h3 {
    font-weight: bold;
}

h1 {
    font-size: 60pt !important;
}

h2 {
    font-size: 48pt !important;
}

h3 {
    font-size: 36pt !important;
}

h4 {
    font-size: 24pt !important;
}

h5 {
    font-size: 18pt !important;
}

h6 {
    /*font-size: 16pt!important;*/
    font-size: 14pt !important;
}

.special-family-bold {
    font-weight: 900 !important;
    font-family: system-ui;
}

.timeline {
    width: auto !important;
}

.timeline .timeline-item {
    padding-left: 1rem;
}

.timeline .timeline-item .timeline-point-wrapper {
    background-color: transparent !important;
    top: -.75rem;
}

.chat-box {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    max-height: 320px;
    overflow-y: scroll;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #FF7043 #f5f5f5; /* For Firefox */
}

.chat-message {
    margin-bottom: 15px;
    overflow: hidden;
}

.chat-message p {
    margin: 0;
}

.chat-message .from {
    font-weight: bold;
}

.chat-message .body {
    display: inline-block;
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
    white-space: pre-line;
}

.chat-message .date {
    font-size: 0.8em;
    color: gray;
}

.chat-message.sent {
    text-align: right;
}

.chat-message.sent .body {
    background-color: #DCF8C6; /* Light green for sent messages */
}

.chat-message.received .body {
    background-color: #F3F3F3; /* Light gray for received messages */
    margin: auto;
    margin-left: 0;
}

.chat-message.sent .body {
    margin: auto;
    margin-right: 0;
}

/* Styling for scroll bar */
.chat-box::-webkit-scrollbar {
    width: 8px;
}

.chat-box::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.chat-box::-webkit-scrollbar-thumb {
    background-color: #FF7043;
    border-radius: 10px;
    border: 2px solid #f5f5f5;
}

.chat-box::-webkit-scrollbar-thumb:hover {
    background-color: #FF5733;
}

.swal2-title {
    font-size: 18pt !important;
}

.light-style .app-chat .app-chat-contacts .sidebar-body .chat-contact-list li.active h6, .light-style .app-chat .app-chat-contacts .sidebar-body .chat-contact-list li.active .text-muted, .light-style .app-chat .app-chat-sidebar-left .sidebar-body .chat-contact-list li.active h6, .light-style .app-chat .app-chat-sidebar-left .sidebar-body .chat-contact-list li.active .text-muted {
    color: #FF5733 !important;
}

.light-style .app-chat .app-chat-history .chat-history-body .chat-history .chat-message.chat-message-right .chat-message-text {
    color: #566a7f;
}

/* Styles for messages sent by the current user */
.chat-message-right .chat-message-text {
    background-color: #DCF8C6 !important; /* Light green background */
    align-self: flex-end;
    color: #000; /* Text color */
}

/* Styles for messages received from other users */
.chat-message-left .chat-message-text {
    background-color: #FFFFFF !important; /* White background */
    border: 1px solid #E0E0E0; /* Border color */
    color: #000; /* Text color */
    align-self: flex-start;
}

/* Style the scrollbar for WebKit browsers (Chrome, Safari, etc.) */
textarea::-webkit-scrollbar {
    width: 8px; /* width of the scrollbar */
}

textarea::-webkit-scrollbar-track {
    background: #f1f1f1; /* color of the track */
}

textarea::-webkit-scrollbar-thumb {
    background-color: #888; /* color of the thumb */
    border-radius: 4px; /* roundness of the thumb */
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* color of the thumb on hover */
}

/* Style the scrollbar for Firefox */
textarea {
    scrollbar-width: thin; /* width of the scrollbar */
}

textarea::-webkit-scrollbar-track {
    background: #f1f1f1; /* color of the track */
}

textarea::-webkit-scrollbar-thumb {
    background-color: #888; /* color of the thumb */
    border-radius: 4px; /* roundness of the thumb */
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* color of the thumb on hover */
}

.audios {
    display: flex;
    column-gap: 10px;
    flex-wrap: wrap;
}

.audio-card {
    overflow: hidden;
}

.audio-card span {
    line-height: 18px;
}

.audio-icon {
    width: 25px;
    text-align: center;
}

.audio-download {
    width: 30px;
    text-align: center;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
}

audio::-webkit-media-controls-panel {
    background-color: #f0f0f0;
}

.nameInitials {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #290080;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    align-content: center;
    font-weight: bold;
    color: white;
}

.btnTaskTimer, .btnPlayPause {
    min-width: 30px;
    min-height: 35px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
}

.player-wrap {
    width: 100px;
}

.audios {
    display: flex;
    column-gap: 10px;
    flex-wrap: wrap;
}

.audio-card {
    overflow: hidden;
}

.audio-card span {
    line-height: 18px;
}

.audio-icon {
    width: 25px;
    text-align: center;
}

.audio-download {
    width: 30px;
    text-align: center;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
}

audio::-webkit-media-controls-panel {
    background-color: #f0f0f0;
}

.nameInitials {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #290080;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    align-content: center;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
    z-index: 1;
}

.btnTaskTimer, .btnPlayPause {
    min-width: 30px;
    min-height: 35px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
}

.player-wrap {
    width: 100px;
}

.accordion .accordion-item.active {
    box-shadow: none !important;
}

.commentContainer {
    margin-left: 30px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: white;
    /*padding: 10px 15px;*/
    position: relative;
    align-items: center;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    /*overflow: hidden;*/
    margin-bottom: 15px;
    margin-top: 15px;
}
.commentContainer::before{
    content: '';
    width: 15px;
    height: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.commentContainer .header{
    padding: 5px;
    border-bottom: 1px solid #cccccc;
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: #f6f6f6;
}
.commentContainer .header::before{
    position: absolute;
    top: 11px;
    right: 100%;
    left: calc(0.5rem* -1);
    display: block;
    width: 8px;
    height: 16px;
    pointer-events: none;
    content: " ";
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background-color: #c6c6c6b3;
}
.commentContainer .header::after{
    margin-left: 2px;
    background-color: #f6f6f6;
    position: absolute;
    top: 11px;
    right: 100%;
    left: calc(0.5rem* -1);
    display: block;
    width: 8px;
    height: 16px;
    pointer-events: none;
    content: " ";
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.commentContainer .body{
    padding: 5px;
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.commentContainer .body p:last-child{
    padding-bottom: 0!important;
    margin-bottom: 0!important;
}

.commentAvatar{
    margin-left: -15px;
    z-index: 1;
    position: absolute;
}

.activities{
    margin-left: 15px;
}

.task-activity {
    display: flex;
    column-gap: 5px;
    align-items: center;
    padding: 15px 0 15px 90px;
}

.task-activity::before{
    background-color: #c6c6c6b3;
    bottom: 0;
    content: "";
    display: block;
    left: 40px;
    position: absolute;
    top: 0;
    width: 2px;
}

.task-activity .icon {
    width: 30px;
    height: 30px;
    background: rgb(156 156 156);
    align-content: center;
    text-align: center;
    color: white;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: calc(130px / -2 + 1px);
    z-index: 1;
}

.dropdown-arrow{
    font-size: 18px!important;

}