/*
Darkmode color scheme:
*/
:root {
  /* Colors */
  --primary-foreground: #f8f8ff;
  --primary-background: #282828;
  --secondary-background: #1b2d4e;
  --primary-contrast: crimson;
  --secondary-contrast: #268d37;
  --tertiary-contrast: gold;
  --quaternary-contrast: #adff2f;
  /* Borders */
  --solid-white-border: 1px solid var(--primary-foreground);
  --dotted-white-border: 2px dotted var(--primary-foreground);
  --big-solid-white-border: 5px solid var(--primary-foreground);
  --big-solid-red-border: 5px solid var(--primary-contrast);
}
/************************* Algemeen *********************************/
body {
  background: var(--secondary-background);
}
.rotate90 {
  transform: rotate(-90deg);
  margin-left: -35px;
}
h1, h2, h3, h4, h5, h6, h7, .h1, .h2, .h3, .h4, .h5, .h6, .h7 {
  color: var(--primary-foreground);
}
a:hover, a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  cursor: pointer;
}
td, th  {
  color: var(--primary-foreground);
  background-color: var(--secondary-background);
}
textarea, textarea.form-control {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}

textarea:focus, .form-control:focus {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}
.form-control-NoBackGround {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}
.form-control-NoBackGround:focus {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}
textarea::placeholder, textarea.form-control::placeholder {
  color: var(--primary-foreground);
}
.table-danger, .table-danger > th, .table-danger > td {
  color: var(--primary-background);
}
.btn-success, .btn-success:hover {
  background: var(--secondary-contrast);
  border-color: var(--secondary-contrast);
  color: var(--primary-foreground);
}
textarea:focus::placeholder, .form-control:focus::placeholder {
  color: var(--primary-background);
}
.close:hover, .close:focus {
  color: var(--primary-foreground);
}
.swal-close-btn {
  color: var(--primary-contrast);
  opacity: 1;
}
.modal-content, .card {
  background-color: var(--primary-background);
  color: var(--primary-foreground);
}
.modal-dialog-small > .modal-content {
  border: var(--big-solid-white-border);
}
.bg-light {
  background-color: var(--primary-background) !important;
}
.badge-light {
  background-color: var(--primary-background);
  color: var(--primary-contrast);
}
.dropdown-menu {
  background: var(--primary-background);
  border: var(--dotted-white-border);
}
.dropdown-menu > a {
  background: var(--primary-background);
  color: var(--primary-foreground) !important;
}
.dropdown-menu > a.SND {
  background: var(--secondary-contrast);
}
a.bg-light:hover, a.bg-light:focus, button.bg-light:hover, button.bg-light:focus, .dropdown-item:hover, .dropdown-item:focus {
  background: var(--secondary-contrast) !important;
  color: var(--primary-foreground);
}
.list-group-item {
  border: var(--solid-white-border);
}
.list-group-item-action {
  background: var(--primary-background);
  color: var(--primary-foreground) !important;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  color: var(--primary-background) !important;
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link .show, .navbar-light .navbar-nav .nav-link .active {
  color: var(--primary-foreground);
}
.btn-light {
  color: var(--primary-foreground);
  background-color: var(--primary-background);
  border-color: var(--primary-foreground);
}
.btn-dark {
  color: var(--primary-background);
  background-color: var(--primary-foreground);
  border-color: var(--primary-background);
}
.btn-info {
  background: var(--quaternary-contrast);
  color: var(--primary-background) !important;
}
.btn-secondary, .btn-danger, .swal2-cancel {
  color: var(--primary-foreground);
  background-color: var(--primary-contrast);
  border-color: var(--primary-contrast);
}
#MessageBox > .modal-dialog > .modal-content, .bootbox-prompt > .modal-dialog > .modal-content {
  padding: 25px;
  background-color: var(--primary-background);
  border: var(--big-solid-red-border);
}
#MessageBox > .modal-dialog > .modal-content > .modal-header, #MessageBox > .modal-dialog > .modal-content > .modal-body-MessageBox {
  padding: 15px 0px;
  color: var(--primary-foreground);
}
.ModalReferenceOut {
  border: var(--solid-white-border);
}
.FixedSquareW800 {
  border: var(--solid-white-border);
  background: var(--secondary-background);
}
.table-success, .table-success > th, .table-success > td {
  background: var(--quaternary-contrast);
  color: var(--primary-background);
}
.table-warning, .table-warning > th, .table-warning > td {
  background-color: crimson;
}
.NOT_BOT {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #28282b 10px, #28282b 20px), linear-gradient(to bottom, crimson, #28282b);
}
.paginate_button.previous, .paginate_button.next {
  color: var(--primary-foreground);
}
pre {
  color: var(--primary-foreground);
  background-color: var(--secondary-background);
}
#ApiRequestSent > pre, #ApiResponse, #ApiResponse > pre, #ApiReceived > pre {
  color: var(--primary-foreground);
}
.TheApiSendContent > .json-mark, #ApiResponse > pre > .json-mark {
  color: var(--primary-foreground);
}
.TheApiSendContent > .json-key, #ApiResponse > pre > .json-key {
  color: orange;
}
.TheApiSendContent > .json-string, #ApiResponse > pre > .json-string {
  color: var(--tertiary-contrast);
}
.TheApiSendContent > .json-number, #ApiResponse > pre > .json-number {
  color: #00ffff;
}
.TheApiSendContent > .json-link, .TheApiSendContent > span > .json-link, #ApiResponse > pre > .json-link, #ApiResponse > pre > span > .json-link {
  color: #f29ac2;
}
.table-striped > thead > tr, .table-striped > tbody > tr {
  background-color: var(--secondary-background) !important;
}
.table-striped > tbody > .odd, .table-striped > tbody > .odd > td > .table-striped > tbody > tr {
  background-color: var(--primary-background) !important;
}
.swal2-popup, .swal-titlebar {
  background-color: var(--secondary-background);
  color: var(--primary-foreground);
  border: 1px solid var(--primary-foreground);
}
.swal2-actions > .swal2-cancel {
  background-color: var(--primary-contrast) !important;
  color: var(--primary-foreground)  !important;
}
#account-confirmed {
  color: var(--primary-foreground);
}
.swal2-select > option {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}
/* The homescreen and menus */
#WebPageMainNavbar {
  background-color: var(--primary-background) !important;
}
#nav-icon1 span {
  background: var(--primary-foreground);
}
.PageContent, .Monitoring1207MainOverview, .QEMER-stacknumber, .card-body  {
  background-color: var(--secondary-background) !important;
}
.megaLB-stacknumber, .Q1207-stacknumber {
  border: var(--solid-white-border);
}
#WebPageMainNavbar > .nav-button > .nav-button-btn, #WebPageMainNavbar > .navbar-gatebuttons > .nav-button > .nav-button-btn {
  border: 2px solid var(--primary-foreground);
  background-color: var(--primary-contrast);
  color: var(--primary-foreground);
}
.nav-button-btn > .nav-count {
  background: var(--primary-foreground);
  color: var(--primary-contrast);
  font-weight: 600;
}
#WebPageMainNavbar > .navbar-nav > .dropdown {
  background-color: var(--primary-background);
  border: var(--solid-white-border);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: var(--primary-foreground);
}
#PersonalMenuDropOptions {
  background-color: var(--primary-background);
}
#PersonalMenuDropOptions > a {
  color: var(--primary-foreground) !important;
}
.dropdown-divider {
  border-top: 1px solid var(--primary-contrast);
}
.NewNotificationCount, .NewMessages {
  color: var(--primary-contrast);
}
.license-plate-content-title {
  border-bottom: 1px solid var(--primary-foreground);
}
.license-plate-content-body {
  border: 1px solid var(--primary-foreground);
  border-top: 0;
}
/*** In menu pages ***/
/** Hamburger **/
/* Quick Search Estimate */
#ContainerNumberTxt_QSE {
  background: var(--primary-foreground);
  color: var(--primary-background);
}
.EstimateContentInQSE {
  border-radius: 5px;
}
.EstimateContentInQSE > .modal-header2, .EstimateContent > .EstimateDetail-modal-body, ul.list-group.OnlyAdmin.RightBottom  {
  background: var(--primary-background) !important;
}
.SearchEstimateResult {
  background: var(--secondary-background);
}
.EstimateContentInQSE > .modal-header2 > #EstimateDetailTitleExtraComment, .EstimateContentInQSE > .modal-header2 > #ClientOfContainerLbl, .EstimateContentInQSE > .modal-header2 > #TheIsoOfEstimate, .EstimateContentInQSE > .modal-header2 > #LocationOfEstimate, .EstimateContentInQSE > .modal-header2 > #StatusOfEstimate {
  color: var(--primary-foreground);
}
button#PostRepairPicturesBtn {
  border: none;
}
.nav-tabs .nav-link {
  color: var(--primary-foreground);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--primary-foreground);
  background-color: var(--primary-contrast);
  border-color: var(--primary-foreground);
}
.CompletedEstimate {
  background-color: var(--secondary-contrast) !important;
}
#SummaryDescription  {
  color: var(--primary-foreground);
}
.bg-warning > td {
  color: var(--primary-background);
}
button.QuickSelectAndCalcBtn {
  color: var(--primary-background);
  background-color: var(--primary-foreground);
  border-color: var(--primary-foreground);
}
#ContainerLocationStatusHistory .location-info-card-body #ContainerLocationHistoryTable thead th {
  color: var(--primary-foreground);
}
/* EDI */
.EdiMessageContent, .DepotSmartContent {
  color: var(--primary-foreground);
}
/* Search container history */
.SearchEstimateResult > .EstimatesResultList > button:hover {
  background: var(--secondary-contrast);
  color:  var(--primary-foreground) !important;
}
.item-detail {
  color: var(--tertiary-contrast);
}
/* Convert text to numbers */
.show-in-stack-title {
  color: var(--primary-background);
}
/* Tutorials */
#TutorialTable > tbody > tr > td > a, #TutorialTable > tbody > tr > td > a:not([href]):not([tabindex]) {
  color: var(--tertiary-contrast);
  text-decoration: none;
}
#TutorialTable > tbody > tr > td > a:hover, #TutorialTable > tbody > tr > td > a:not([href]):not([tabindex]):hover {
  text-decoration: underline;
  cursor: pointer;
}
/* Monitor database changes */
#MonitorDBInlineContent {
  background-color: var(--primary-background);
  color: var(--primary-foreground);
}
/** Top quick access buttons **/
/** Gates **/
/* Search references */
#SRFRefIn, #SRFRefOut {
	border: var(--dotted-white-border);
}
#SRFRefIn.SND, #SRFRefOut.SND {
	border: 1px solid var(--quaternary-contrast);
}
#RegisteredContainerNumbersTd > table > thead > tr, #RegisteredContainerNumbersTd > table > tbody > tr, #InitialContainerNumbersTd > table > thead > tr, #InitialContainerNumbersTd > table > tbody > tr {
  background: var(--secondary-background);
}
/* Add reference OUT */
.removeFromAEROBtn, .unlinkFromAEROBtn {
  background-color: var(--primary-background);
}
.popup-for-ref-out-confirm > .modal-dialog > .modal-content, .popup-for-ref-out-confirm > .modal-dialog > .modal-content > .modal-header > .modal-title, .popup-for-ref-out-confirm > .modal-dialog > .modal-content > .modal-body {
  background-color: var(--quaternary-contrast);
  color: var(--primary-background);
}
/* Lockets */
.lpr-detection-card > details > div {
  background: var(--secondary-background) !important;
  color: var(--primary-foreground);
}
/* Gate Moves */
.PrintEIR_Content {
  background: var(--primary-background);
}
.PrintEIR_Content > .container > .row > div {
  color: var(--primary-foreground);
}
/* Gate tasks */
#PendingTasksModal > table > thead > tr > td {
  color: var(--primary-foreground);
}
#PendingTasksModal > table > tbody > tr:not(.gate-tasks-DiffertentStatusThenRefOut) > td:not(.SND) {
  color: var(--primary-foreground);
}
.gate-tasks-DiffertentStatusThenRefOut {
  color: var(--primary-foreground);
}
#ReferenceDetail > .modal-dialog > .modal-content {
  background: var(--secondary-background);
}
.ReferenceDetail-modal-body table td, th, #SummaryDescription {
  color: var(--primary-foreground);
}
.ReferenceDetail-modal-body > div > table > tbody > .PSU > td, .ReferenceDetail-modal-body > div > table > tbody > .NOC > td, .ReferenceDetail-modal-body > div > table > tbody > .CWNOC > td, .ReferenceDetail-modal-body > div > table > tbody > .NOR > td, .ReferenceDetail-modal-body > div > table > tbody > .ONH > td, .ReferenceDetail-modal-body > div > table > tbody > .NWS > td, .ReferenceDetail-modal-body > div > table > tbody > .SND > td, .ReferenceDetail-modal-body > div > table > tbody > .CWSD > td, .ReferenceDetail-modal-body > div > table > tbody > .SOH > td, .ReferenceDetail-modal-body > div > table > tbody > .AQB > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAQB > td, .ReferenceDetail-modal-body > div > table > tbody > .AQBS > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAQBS > td, .ReferenceDetail-modal-body > div > table > tbody > .AQBF > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAQBF > td, .ReferenceDetail-modal-body > div > table > tbody > .AQC > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAQC > td, .ReferenceDetail-modal-body > div > table > tbody > .AQCS > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAQCS > td, .ReferenceDetail-modal-body > div > table > tbody > .DIML > td, .ReferenceDetail-modal-body > div > table > tbody > .CWIML > td, .ReferenceDetail-modal-body > div > table > tbody > .DIM > td, .ReferenceDetail-modal-body > div > table > tbody > .CWIM > td, .ReferenceDetail-modal-body > div > table > tbody > .DIMS > td, .ReferenceDetail-modal-body > div > table > tbody > .CWIMS > td, .ReferenceDetail-modal-body > div > table > tbody > .DIMF > td, .ReferenceDetail-modal-body > div > table > tbody > .CWIMF > td, .ReferenceDetail-modal-body > div > table > tbody > .HLD > td, .ReferenceDetail-modal-body > div > table > tbody > .DAUS > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAUS > td, .ReferenceDetail-modal-body > div > table > tbody > .DAUL > td, .ReferenceDetail-modal-body > div > table > tbody > .CWAUL > td {
  color: var(--primary-background);
}
.VPTI > * {
  color: #ffff00;
}
.extra-info-rightsidemenu {
  color: var(--primary-foreground);
}
.ContainerPossibleToGiveToTruck {
  background-color: var(--secondary-contrast);
}
/* Booked VS Stock */
#ClientBookedVSStock > option, #WhichLocation > option {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}
/* Open Barge Requests */
div#ABRMModal-modal-content{
  background: var(--secondary-background);
}
/* Flag license plate */
.OverWriteFlagModal-modal-body > .CommentBtn {
  background: var(--tertiary-contrast);
  color: var(--primary-background);
}
/** Stats **/
/* Containers Repaired At */
/** Color Codes **/
#StatusTable > tbody > tr > td {
  background-color: inherit;
}
/** Right dropdown **/
/*** Overviews ***/
.EucoreOverview {
  -webkit-box-shadow: 0px 0px 11px 15px rgba(31,31,31,0.62);
  box-shadow: 0px 0px 11px 15px rgba(31,31,31,0.62);
}
.Mega1Overview , .Mega2Overview, .Mega3Overview, .MegaBOverview, .MegaWOverview, .MegaGOverview, .MegaAOverview, .MegaCOverview, .MegaDOverview, .MegaEOverview, .MegaFOverview, .MegaHOverview, .MegaIOverview, .MegaJOverview, .MegaKOverview, .MegaLOverview, .MegaTOverview, .MegaSOverview, .MegaMOverview {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.SubPlanContent {
  margin-top:  25px;
}
.SubPlanContent div {
  color: var(--primary-foreground);
}
.RbLocationActive::before {
  background: var(--primary-foreground);
}
div[class^='EU'], div[class^='MR'], div[class^='MB'] {
  border: var(--solid-white-border) !important;
}
.glowing-border {
  -webkit-animation: glowingwhite 1500ms infinite;
  -moz-animation: glowingwhite 1500ms infinite;
  -o-animation: glowingwhite 1500ms infinite;
  animation: glowingwhite 1500ms infinite;
}
@-webkit-keyframes glowingwhite {
  0% {-webkit-box-shadow: 0 0 3px #42f5e9; }
  50% {-webkit-box-shadow: 0 0 15px #FF0000; }
  100% {-webkit-box-shadow: 0 0 3px #42f5e9; }
}
@-moz-keyframes glowingwhite {
  0% {-moz-box-shadow: 0 0 3px #42f5e9; }
  50% {-moz-box-shadow: 0 0 15px #FF0000; }
  100% {-moz-box-shadow: 0 0 3px #42f5e9; }
}
@-o-keyframes glowingwhite {
  0% {box-shadow: 0 0 3px #42f5e9; }
  50% {box-shadow: 0 0 15px #FF0000; }
  100% {box-shadow: 0 0 3px #42f5e9; }
}
@keyframes glowingwhite {
  0% {box-shadow: 0 0 3px #42f5e9; }
  50% {box-shadow: 0 0 15px #FFffff; }
  100% {box-shadow: 0 0 3px #42f5e9; }
}
/*** Workshop ***/
.vakken > div {
  color: var(--primary-foreground);
}
/* Hours Personnel */
#HoursPersonel > div {
  background: var(--secondary-background);
}
/*-----------------Estimate Detail------------------------*/

.EstimateContentInQSE>.EstimateDetail-modal-body center:empty {
    display: none;
}
/*Estimate Info OR*/
#BoxEstimateORTable td{
 vertical-align: middle;
}
#BoxEstimateORTable button {
  color: GhostWhite;
  background-color: #dc3545;
  margin: 0px 5px;
}
#BoxEstimateORTable button:hover {
  color: Gold;
}
.DropButton{
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center,center;
  display: inline-block;
  padding: 0;
}
.Est_drop {
  transform: rotate(180deg);
  padding: 3px 5px;
  margin-top: -1px;
}
.originalValue {
  color: #dc3545;
}
@keyframes gradient2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*Estimate Info RE*/
div#RevisedEstimate0, div#RevisedEstimate1, div#RevisedEstimate2, div#RevisedEstimate3, div#RevisedEstimate4, div#RevisedEstimate5, div#RevisedEstimate6, div#RevisedEstimate7, div#RevisedEstimate8, div#RevisedEstimate9, div#RevisedEstimate10, div#RevisedEstimate11 {
  background-color: #d57500 !important;
}
/*Add Box Item*/
#QuickAddLinesHeader, .EstimateOverLay-modal-body {
  background: var(--primary-background);
}
/** Shortcuts in add box item **/
/* Upadate Box Info */
.BoxInfoModalContent {
  background: var(--secondary-background);
  border: 1px solid var(--primary-foreground);
}
.BoxInfoModalContent > .EditBoxInfo-modal-body {
  color: var(--primary-foreground);
}
/* Quick review estimate */
div > #EstQuickReviewModalContent {
  background-color: #8d6f8e;
}
/* Set Box Estimate As Completed */
.swal-boxestimate-completed-title {
  color: var(--primary-foreground)! important;
}
.swal-boxestimate-completed > div > div > p {
  color: var(--primary-foreground) !important;
}
/* Quick Add Lines */
#QuickAddEstimateLineModalContent {
  border: 1px solid var(--primary-foreground);
  background: var(--secondary-background);
}
#QuickAddLinesHeader {
  border-radius: 0px;
}
#QuickAddLinesHeader > button {
  border: 1px solid var(--primary-foreground);
}
.CW_ESTIMATE_ONLY > #QuickAddEstimateLineModalTitle {
  color: var(--primary-background);
}
/* Add Box Item */
.modal-dialog > .ModalInModalEstimate {
  background: var(--secondary-background);
}
/*Add Unit Item*/
#EstimateOverLay > div > div > .modal-header {
  background: var(--secondary-background);
  color: var(--primary-foreground);
}
#EstimateOverLayTitle {
  color: var(--primary-foreground);
}
.CW_ESTIMATE_ONLY > #EstimateOverLayTitle  {
  color: var(--primary-background);
}
/**** Right side menu ****/
.rightmenu-extratext {
  color: var(--primary-foreground);
}
/**** Settings ****/
#TitleSettingsActive{
  margin-left: 1.25rem !important;
  color: ghostwhite !important;
}
#SettingsContentBody {
  background: var(--secondary-background);
}
@media screen and (max-width: 1200px) {
  .BackBtn, .BackBtnSubPlanContent, .BackBtnSubPlanContentLittleMoreLeft, .BackBtnSubPlanContentBottom {
    width: 4vh;
    height: 4vh;
    padding-top: 8px;
  }
}
/**** Print Workorder - exclude from darkmode ****/
#CompleteWorkOrder,
#CompleteWorkOrder * {
  background-color: white !important;
  color: #000000 !important;
}
#CompleteWorkOrder h1,
#CompleteWorkOrder h2,
#CompleteWorkOrder h3,
#CompleteWorkOrder h4,
#CompleteWorkOrder h5,
#CompleteWorkOrder h6,
#CompleteWorkOrder .h1,
#CompleteWorkOrder .h2,
#CompleteWorkOrder .h3,
#CompleteWorkOrder .h4,
#CompleteWorkOrder .h5,
#CompleteWorkOrder .h6 {
  color: #000000 !important;
}
#CompleteWorkOrder td,
#CompleteWorkOrder th {
  color: #000000 !important;
  background-color: white !important;
}
#CompleteWorkOrder .table-striped > tbody > tr,
#CompleteWorkOrder .table-striped > thead > tr {
  background-color: white !important;
}
#CompleteWorkOrder .table-striped > tbody > .odd {
  background-color: #f2f2f2 !important;
}
#CompleteWorkOrder label,
#CompleteWorkOrder .lead {
  color: #000000 !important;
}

/* ===== WbMessaging Dark Mode ===== */
/* Left Side - Contact List */
body.darkmode .LeftSideMessaging {
  background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%);
  border-right: 1px solid #2a2a2a;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}
body.darkmode .LeftSideMessaging::-webkit-scrollbar-track {
  background: #1a1a1a;
}
body.darkmode .LeftSideMessaging::-webkit-scrollbar-thumb {
  background: #444;
}
body.darkmode .LeftSideMessaging::-webkit-scrollbar-thumb:hover {
  background: #555;
}
body.darkmode .searchContact {
  background-color: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}
body.darkmode #SearchContact {
  background-color: #2d2d2d;
  border: 2px solid #3a3a3a;
  color: #e0e0e0;
}
body.darkmode #SearchContact::placeholder {
  color: #888;
}
body.darkmode #SearchContact:focus {
  border-color: #25d366;
  background-color: #2d2d2d;
}
body.darkmode .MessageContacts,
body.darkmode .MessagesContactsFound > .MessageContacts,
body.darkmode button.MessageContacts,
body.darkmode .btn-light.MessageContacts {
  background-color: #2d2d2d;
  color: #e0e0e0;
}
body.darkmode .MessagesContactsFound > .MessageContacts:hover,
body.darkmode button.MessageContacts:hover,
body.darkmode .btn-light.MessageContacts:hover {
  background-color: #3a3a3a;
}
body.darkmode .MessagesContactsFound > .MessageContacts > .badge {
  background-color: #4a4a4a;
  color: #e0e0e0;
}
body.darkmode .btn-light:not(:disabled):not(.disabled).MessageContacts.active,
body.darkmode .btn-light:not(:disabled):not(.disabled).MessageContacts.Active,
body.darkmode .MessageContacts.active,
body.darkmode .MessageContacts.Active {
  background: linear-gradient(135deg, #25d366 0%, #20bd5a 100%);
  color: white;
}
/* Right Side - Message Area */
body.darkmode .RightSideMessaging {
  background-color: #111111;
}
body.darkmode .RightSideMessaging.Disabled .MessageContentField::after {
  color: #8696a0;
}
body.darkmode .MessageContentField {
  background-color: #0d1418;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px);
}
body.darkmode .MessageContentField::-webkit-scrollbar-track {
  background: #0d1418;
}
body.darkmode .MessageContentField::-webkit-scrollbar-thumb {
  background: #333;
}
body.darkmode .MessageContentField::-webkit-scrollbar-thumb:hover {
  background: #444;
}
/* Message Bubbles */
body.darkmode .MessageContainer > .MessageSent {
  background-color: #005c4b;
  color: #e9edef;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: none !important;
}
body.darkmode .MessageContainer > .MessageSent::before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #005c4b;
  border-left-color: transparent;
}
body.darkmode .MessageContainer > .MessageReceived {
  background-color: #202c33;
  color: #e9edef;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: none !important;
}
body.darkmode .MessageContainer > .MessageReceived::before {
  border-top-color: transparent;
  border-right-color: #202c33;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
body.darkmode .talktext p {
  color: #e9edef;
}
body.darkmode .talktext > u {
  color: rgba(255, 255, 255, 0.6);
}
body.darkmode .MessageSentAt p {
  color: rgba(255, 255, 255, 0.6);
}
/* Unread Message Highlights (keep visible in dark mode) */
body.darkmode .UnreadMessages {
  background-color: #3d3400;
  border-left-color: #ffc107;
}
body.darkmode .MessageSent.unreadMessagesInRightMessage {
  background-color: #006d5c;
}
body.darkmode .MessageSent.unreadMessagesInRightMessage::before {
  border-color: transparent transparent #006d5c transparent;
}
body.darkmode .MessageReceived.unreadMessagesInRightMessage {
  background-color: #3d3d00;
}
body.darkmode .MessageReceived.unreadMessagesInRightMessage::before {
  border-color: transparent #3d3d00 transparent transparent;
}
/* Message Input Area */
body.darkmode .MessageInputArea {
  background-color: #202c33;
}
body.darkmode .TypeMessageField,
body.darkmode textarea.TypeMessageField {
  background-color: #2a3942;
  border: 2px solid #3a4a54;
  color: #e9edef;
}
body.darkmode .TypeMessageField::placeholder,
body.darkmode textarea.TypeMessageField::placeholder {
  color: #8696a0;
}
body.darkmode .TypeMessageField:focus,
body.darkmode textarea.TypeMessageField:focus {
  border-color: #25d366;
  background-color: #2a3942;
}
/* Buttons */
body.darkmode .AttachmentButton {
  color: #8696a0;
}
body.darkmode .AttachmentButton:hover {
  background-color: #3a4a54;
  color: #25d366;
}
body.darkmode .MessageActionBtn {
  color: #8696a0;
}
body.darkmode .MessageActionBtn:hover {
  color: #25d366;
  background-color: rgba(37, 211, 102, 0.15);
}
/* Attachment Menu */
body.darkmode .AttachmentMenu {
  background-color: #233138;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
body.darkmode .AttachmentMenuItem:hover {
  background-color: #2a3942;
}
body.darkmode .AttachmentMenuItem span {
  color: #e9edef;
}
body.darkmode .AttachmentSubMenu {
  background-color: #233138;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
body.darkmode .AttachmentSubMenuItem:hover {
  background-color: #2a3942;
}
body.darkmode .AttachmentSubMenuItem i {
  color: #8696a0;
}
body.darkmode .AttachmentSubMenuItem span {
  color: #e9edef;
}
body.darkmode .AttachmentMenuArrow {
  color: #8696a0;
}
/* Add More Media Menu */
body.darkmode .AddMoreMediaMenu {
  background-color: #233138;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
body.darkmode .AddMoreMenuItem:hover {
  background-color: #2a3942;
}
body.darkmode .AddMoreMenuItem i {
  color: #8696a0;
}
body.darkmode .AddMoreMenuItem span {
  color: #e9edef;
}
/* Media Preview Container */
body.darkmode .MediaPreviewContainer {
  background-color: #202c33;
  border-top: 1px solid #3a4a54;
}
body.darkmode .AddMoreMediaBtn {
  border-color: #8696a0;
}
body.darkmode .AddMoreMediaBtn:hover {
  border-color: #25d366;
  background-color: rgba(37, 211, 102, 0.15);
}
body.darkmode .AddMoreMediaBtn i,
body.darkmode .AddMoreMediaBtn span {
  color: #8696a0;
}
body.darkmode .AddMoreMediaBtn:hover i,
body.darkmode .AddMoreMediaBtn:hover span {
  color: #25d366;
}
/* Document Preview */
body.darkmode .DocumentPreview {
  background-color: #2a3942;
}
body.darkmode .DocumentName {
  color: #e9edef;
}
body.darkmode .MessageDocument {
  background-color: rgba(255, 255, 255, 0.05);
}
body.darkmode .MessageDocument:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
body.darkmode .MessageDocumentName {
  color: #e9edef;
}
body.darkmode .MessageDocumentType {
  color: #8696a0;
}
/* Forward Modal */
body.darkmode .ForwardModalContent {
  background-color: #233138;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
body.darkmode .ForwardModalHeader {
  border-bottom: 1px solid #3a4a54;
}
body.darkmode .ForwardModalHeader h5 {
  color: #e9edef;
}
body.darkmode .ForwardModalClose {
  color: #8696a0;
}
body.darkmode .ForwardModalClose:hover {
  color: #dc3545;
}
body.darkmode .ForwardModalSearch {
  border-bottom: 1px solid #3a4a54;
}
body.darkmode .ForwardModalSearch input {
  background-color: #2a3942;
  border: 1px solid #3a4a54;
  color: #e9edef;
}
body.darkmode .ForwardModalSearch input::placeholder {
  color: #8696a0;
}
body.darkmode .ForwardModalSearch input:focus {
  border-color: #25d366;
}
body.darkmode .ForwardContactItem:hover {
  background-color: #2a3942;
}
body.darkmode .ForwardContactItem .ContactName {
  color: #e9edef;
}
body.darkmode .ForwardContactItem .ContactCheckbox {
  border: 2px solid #3a4a54;
}
body.darkmode .ForwardContactItem.selected {
  background-color: rgba(37, 211, 102, 0.15);
}
body.darkmode .ForwardModalFooter {
  border-top: 1px solid #3a4a54;
}
body.darkmode .ForwardCancelBtn {
  background-color: #2a3942;
  color: #e9edef;
}
body.darkmode .ForwardCancelBtn:hover {
  background-color: #3a4a54;
}
/* Voice Recording */
body.darkmode .MessageInputArea .VoiceRecordBtn {
  color: #8696a0;
}
body.darkmode .MessageInputArea .VoiceRecordBtn:hover {
  background-color: #3a4a54;
  color: #25d366;
}
body.darkmode .MessageInputArea .VoiceRecordingOverlay {
  background-color: #202c33;
}
body.darkmode .VoiceRecordingOverlay .RecordingText {
  color: #e9edef;
}
body.darkmode .VoiceRecordingOverlay .RecordingTimer {
  color: #8696a0;
}
/* Voice Preview */
body.darkmode .MediaPreviewContent .VoicePreviewItem {
  background-color: #2a3942;
}
body.darkmode .VoicePreviewItem .VoicePreviewDuration {
  color: #8696a0;
}
/* Voice Message Player in Chat */
body.darkmode .MessageSent .VoiceMessagePlayer .VoiceWaveform .WaveformBar {
  background-color: rgba(255, 255, 255, 0.3);
}
body.darkmode .MessageReceived .VoiceMessagePlayer .VoiceWaveform .WaveformBar {
  background-color: rgba(255, 255, 255, 0.35);
}
body.darkmode .VoiceMessagePlayer .VoiceProgress {
  background-color: rgba(37, 211, 102, 0.2);
}
body.darkmode .VoiceMessagePlayer .VoiceDuration {
  color: rgba(255, 255, 255, 0.6);
}
body.darkmode .MessageSent .VoiceMessagePlayer .VoiceDuration {
  color: rgba(255, 255, 255, 0.6);
}
body.darkmode .MessageReceived .VoiceMessagePlayer .VoiceDuration {
  color: rgba(255, 255, 255, 0.6);
}
/* Mobile Back Button */
body.darkmode .MobileBackButton {
  background-color: #202c33;
  border-bottom: 1px solid #3a4a54;
}
body.darkmode .MobileBackButton:hover {
  background-color: #2a3942;
}
body.darkmode .MobileBackButton span {
  color: #e9edef;
}
/* Favorite Icon */
body.darkmode li.FavMessage {
  color: #4a4a4a;
}
body.darkmode li.FavMessage:hover {
  color: #F4B30A;
}
body.darkmode .highlight.FavMessage, body.darkmode .selected.FavMessage {
  color: #F4B30A;
}
/* Forwarded Label */
body.darkmode .ForwardedMessageLabel {
  color: #53bdeb;
}