.Arrival-card {
    background-color: #98ff98;
    color: #000;
}

.Sailing-card {
    background-color: #eee8aa;
    ;
    color: #000;
}

.Other-card {
    background-color: #ffb6c1;
    ;
    color: #000;
}

.MovingMovement-card {
    background-color: rgba(255, 255, 0, 0.829);
}


.Arrival {
    color: #98ff98 !important;
    .mdc-button__label {
       
        /* background-color: #98ff98; */
        color: #98ff98;
      }
   
}

.Sailing {
    color: #eee8aa !important;
    .mdc-button__label {
       
        /* background-color: #eee8aa; */
    color: #eee8aa;
      }
    
}
.Other {
    color: #ffb6c1 !important;
    .mdc-button__label {
       
        /* background-color: #ffb6c1; */
        color: #ffb6c1;
      }
   
}
.messageRepliedCSS {
    background-color: #eee8aa;
    color: #000;
}



.MovingMovement {
    border: 2px solid yellow;
    
    /* background-color: rgba(255, 255, 0, 0.829); */
    border-bottom: 2px solid yellow !important;
}
.HistoryMovement {
    border: 2px solid #4B0082;
    
    /* background-color: rgba(255, 255, 0, 0.829); */
    border-bottom: 2px solid #4B0082 !important;
}

.ToBeConfirmed {
    /* background-color: #000 !important;
    color: #000 !important; */
}

.ToBeConfirmed a {
    /* color: #fff; */
}

.FishingToBeConfirmed {
     background-color: #000 !important;
    color: #000 !important;
}
.FishingToBeConfirmed {
      color: #fff;
}
.No_Risk {
    background-color: #ffffff;
}

.Low_Risk {
    background-color: #f0f0f0;
}

.Medium_Risk {
    background-color: #fda5a5;
}

.Medium_to_High_Risk {
    background-color: #fb7c7c;
}

.High_Risk {
    background-color: #fb4545;
}

.Very_High_Risk {
    background-color: #ff0000;
}

.Red-dml {
    color: #D35468 !important;
}

.Black-dml {
    color: #00000 !important;;
}

.Green-dml {
    color: #26AB5E !important;;
}

.Blue-dml {
    color: #7BD0FF !important;;
}

.LightYellow-dml {
    color: #ffff44 !important;; 
}

.BlackListedVessel {
    background-color: #000000 !important;;
    color: #fffff;
}

.BlackListedVessel a {
    color: #fffff !important;;
}

.table-responsive {
    display: block;
    width: 100%;
    height: 92vh !important;
    overflow-y: auto;
    overflow-x: auto;
}

mat-table {
  border-collapse: separate; 
    width: 90vw;
    max-width: 100vw;
    max-height: 80vw;
    margin-bottom: 1rem;
    display: table;
    /* border-collapse: collapse;  */
    margin: 0px;
    border-spacing: 0 8px !important;
}
.mat-column-Estimated_Movement_Time {
    flex: 0 0 100px !important;
    width: 100px !important;
}
.mat-column-ETM {
    flex: 0 0 100px !important;
    width: 100px !important;
}
.mat-column-Vessel_Name {
    flex: 0 0 150px !important;
    width: 150px !important;
}
.mat-column-Ship_Type_Description {
    flex: 0 0 150px !important;
    width: 150px !important;
}
.mat-column-movement_type_icon {
    flex: 0 0 70px !important;
    width: 70px !important;
}
.mat-column-Gross_Tonnage {
    flex: 0 0 80px !important;
    width: 80px !important;
}
.mat-column-Deepest_Draft {
    flex: 0 0 90px !important;
    width: 90px !important;
}
.mat-column-DWT {
    flex: 0 0 50px !important;
    width: 50px !important;
}
.mat-column-NO_OF_PILOTS {
    flex: 0 0 50px !important;
    width: 50px !important;
}
.mat-column-No_OF_TUGS {
    flex: 0 0 50px !important;
    width: 50px !important;
}
.mat-column-From {
    flex: 0 0 150px !important;
    width: 150px !important;
}
.mat-column-To {
    flex: 0 0 150px !important;
    width: 150px !important;
}

.mat-column-PilotRequiredTime {
    flex: 0 0 100px !important;
    width: 100px !important;
}
.mat-column-Visit_ID{
    flex: 0 0 80px !important;
    width: 80px !important;
}
.mat-column-icons {
    display: flex !important;
    align-items: center !important; /* This aligns vertically */
    justify-content: center; /* Optional: aligns horizontally */
    word-wrap: break-word !important;
    white-space: unset !important;
    flex: 0 0 130px !important;
    width: 130px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.mat-column-Cargo{
    flex: 0 0 130px !important;
    width: 130px !important;
}
.mat-column-Length{
    flex: 0 0 60px !important;
    width: 60px !important;
}
.mat-column-IMO_No_{
    flex: 0 0 80px !important;
    width: 80px !important;
}

.mat-column-pilot{
    flex: 0 0 120px !important;
    width: 120px !important;
}
.mat-column-PEC{
    flex: 0 0 120px !important;
    width: 120px !important;
}
.mat-column-Movement_Comments{
    flex: 0 0 250px !important;
    width: 250px !important;
}
.mat-column-Agent{
    flex: 0 0 150px !important;
    width: 150px !important;
}
.no-background {
    background-color: transparent;
  }
  
  .green-background {
    background-color: green !important;
    color: white !important;
  }
  
  .amber-background {
    background-color: yellowgreen !important;
    color: black !important;
  }
  
  .red-background {
    background-color: red !important;
    color: white !important;
  }

  .filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
  border: 1px solid #666;
  background: transparent;
  color: #eee;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.filter-btn.active {
  background: #1976d2;    /* your accent color */
  border-color: #1565c0;
  color: white;
}
.filter-btn mat-icon {
  margin-right: 0.4em;
}


.table-toolbar {
  width: 100%;
  padding: 0px;
}

.search-field {
  width: 100%;
}

/* Make the search box look a bit more "slick" */
.search-field .mat-mdc-text-field-wrapper {
  border-radius: 14px;
}

.search-field .mat-mdc-form-field-flex {
  align-items: center;
}