@import "../~@angular/material/prebuilt-themes/indigo-pink.css";

:root {
  --Main: #475467;
  --ContrastLight: white;
  --ContrastDark: black;
  --FormBG: #F5F5F5;
  --FieldsetBG: white;
  --LegendColor: #000;

  --TableHeaderColor: white;
  --TableHeaderBG: #74CCCC;
  --DarkTableHeaderBG: #42B1B1;
  --TableRow: white;
  --TableRowContent: #000;
  --TableRowZebra: #F9F9F9;
  --TableRowHover: rgba(116, 204, 204, 0.15);
  --TableRowZebraHover: rgba(116, 204, 204, 0.25);
  --TableRowSelected: rgba(116, 204, 204, 0.4);
  --TableAddButtonBG: transparant;
  --TableAddButtonContent: #013767;
  --PaginatorBG: white;

  --OverlayBG: #F7F7F7;
  --Overlaybar: #264168;
  --ActionButtonBG: #013767;
  --ActionButtonText: #F9F9F9;

  --DisabledActionButtonText: #B8B8B8;
  --DisabledActionButtonBG: #EDEDED;

  --SearchboxBG: #FFFFFF;
  --SearchboxIconColor1: #013767;
  --SearchboxIconColor2: #2C828B;
  --SearchIconColor: #002743;

  --NavButtonBG: #D5EAEA;
  --NavButtonSelectedBG: #013767;
  --NavButtonHoverBG: #C1E5E5;
  --NavButtonText: #283548;
  --NavButtonSelectedText: #F0F4FF;

  --ToggleDefaultBG: #DFDFDF;
  --ToggleText: #000000;
  --ToggleYesBG: #39B100;
  --ToggleNoBG: #E50000;
  --ToggleNoText: #FFFFFF;

  --PageTitleColor: #758895;
}

body {
  background-color: var(--FormBG);
}

.align_center {
  text-align: center;
}

.align_right {
  text-align: right;
}

.multiline {
  word-break: break-all;
  white-space: pre-line;
}

.edit_multiline {
  overflow: scroll;
  overflow-y: scroll;
  overflow-x: hidden;
}

.thin_border {
  border: 1px solid #F00;
}

.thick_border {
  border: 2px solid #F00;
}

.hidden_border {
  border-style: hidden;
}

.emboss_border {
  border: 1px solid;
}

.threed_border {
  border-style: outset;
}

.threedsunken_border {
  border-style: inset;
}

.twod_border {
  border: 2px solid;
}

.windows_border {
  border: 2px solid;
}

.tab_control {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab_button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
}

.tab_button_active {
  background-color: #ccc;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
}

.tab_button:hover {
  background-color: #ddd;
}

.tab_content {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-left: none;
  border-right: none;
  clear: both;
}

/* style for input on table*/
.InputPropsForRowEditing {
  text-decoration: none;
}

.button_image_background_size {
  background-size: 100% 100%;
}

.lable_overflow {
  overflow: hidden;
}

.table_scrollBar {
  height: 600px;
  overflow-y: scroll;
}

.container_border {
  border: #e4e4e4 1px;
  border-radius: 6px;
  min-height: 50vh;
}

.selected {
  background-color: var(--TableRowSelected) !important;
  /* border: black solid 1px !important; */
}

.table_row:hover {
  background-color: var(--TableRowHover);
}

/* remark : we decided to give the end user the normal list box without you update the behavior*/
/*for material list box control*/
/*hide the check box*/
/*mat-list-option mat-pseudo-checkbox.mat-pseudo-checkbox{*/
/*display: none;*/
/*}*/
/*!*for material list box control*!*/
/*!* for selected item that is true the style will be by following *!*/
/*mat-list-option[aria-selected = "true"]*/
/*{*/
/*background-color: blue;*/
/*}*/

* {
  font-family: Assistant;
}

/*Field set*/
fieldset {
  font-size: 1vh;
  /* border: 1px solid var(--Main); */
  border: 0;
  border-radius: 6px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 5px;
  margin-top: 1vh;
  margin-bottom: 1vh;
  background-color: var(--FieldsetBG);
  border: 1px solid red;
}

legend {
  float: none !important;
  width: auto !important;
  color: var(--LegendColor);
  margin-right: 10px !important;

  position: relative;
  top: -0.7vw;
  font-weight: bold;
  font-size: 11pt;
  border: 1px solid red;
}

.FieldsetDiv {
  font-size: 1vh;
  border: 0;
  border-radius: 6px;
  padding: 5px 0;
  margin-bottom: 0.5vh;
  background-color: var(--FieldsetBG);
}

.FieldsetDiv input,
.FieldsetDiv textarea {
  font-size: 11pt !important;
}

.HiddenOverflow {
  overflow: hidden;
}

.LegendLabel {
  float: none !important;
  width: auto !important;
  color: var(--LegendColor);
  margin-right: 10px !important;

  position: relative;
  top: 0vw;
  font-weight: bold;
  font-size: 11pt;
}

.mat-form-field-wrapper {
  padding: 0px !important;
}

.CenterDiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

.FlexDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Grid {
  display: grid;
  padding: 10px;
}

.Grid2 {
  grid-template-columns: auto auto;
}

.Grid3 {
  grid-template-columns: auto auto auto;
}

.Grid4 {
  grid-template-columns: auto auto auto auto;
}

.Grid5 {
  grid-template-columns: auto auto auto auto auto;
}

.Grid6 {
  grid-template-columns: auto auto auto auto auto auto;
}

.Grid7 {
  grid-template-columns: auto auto auto auto auto auto auto;
}

.Grid8 {
  grid-template-columns: auto auto auto auto auto auto auto auto;
}

.Grid9 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
}

.Grid10 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
}

.Grid11 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}

.Grid12 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
}

.Grid13 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.Grid14 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.Grid15 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.Grid16 {
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

/* INPUT*/
/* input{
  height: 0.8cm;
  margin: 0.1cm !important;
}
 */


mat-form-field {
  margin-right: 5px;
  color: black;
}

mat-form-field input:read-only {
  color: rgb(90, 90, 90);
}

.DisabledInputField {
  pointer-events: none;
}

.InputSize {
  font-size: 11pt !important;
}

mat-label {
  font-size: 12pt;
}

.DatePickerIcon {
  font-size: 8pt !important;
}

.InputTiny {
  width: 3vw !important;
}

.InputTinySmall {
  width: 4vw !important;
}

.InputSmall {
  width: 5vw !important;
}

.InputLargerSmall {
  width: 7vw !important;
}

.InputSmallMedium {
  width: 8vw !important;
}

.InputMedium {
  width: 10vw !important;
  /* min-width: 100px !important; */
}

.InputLarge {
  width: 12vw !important;
}

.InputLarger {
  width: 16vw !important;
}

.InputXLarger {
  width: 20.2vw !important;
}

.InputDoubleLarge {
  width: 24.2vw !important;
}


.InputXLarge {
  width: 25.5vw !important;
}

.InputHuge {
  width: 70vw !important;
}

.form-control:focus {
  border-color: var(--Main);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--Main);
}

/* .InputDate{
  display: -webkit-box !important;
  pa__dding: 0 0.8rem !important;
  height: 1cm;
  b_order-radius: 0.3rem;
  } */


/* input:focus {
  b_ackground-color: yellow !important;
  b_order: black 3px solid !important;
  b__ox-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
 */

/*CHECKBOX*/

.mat-checkbox {
  margin-right: 0.25cm;
  margin-bottom: 0.1cm;
}

.mat-checkbox .mat-checkbox-frame {
  transform: scale(1.5);
}

.mat-checkbox-checked .mat-checkbox-background {
  transform: scale(1.5);
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: var(--Overlaybar) !important;
  fon_t-size: 23pt;
}

.mat-checkbox-ripple .mat-ripple-element {
  background-color: var(--Overlaybar) !important;
}

.mat-checkbox-label {
  color: var(--LegendColor) !important;
  font-size: 11pt !important;
  margin-right: 0.1cm;
}

/* RADIO AS CHECKBOX*/
.CheckLabel {
  display: none;
  cursor: pointer;
  font-size: 21pt;
}

.CheckInput:checked+label {
  display: inline-block;
}

.CheckInput {
  display: none;
  font-size: 21pt;
  f_ont-weight: bold;
}

.CheckInput[value="2"]+label {
  color: var(--Main);
}

.CheckInput[value="0"]+label {
  color: red;
}

.CheckInput[value="1"]+label {
  color: grey;
}


/*SELECT*/

mat-option {
  background-color: var(--TableRow) !important;
  color: var(--TableRowContent);
  font-size: 11pt !important;
  height: 4vh !important;
}

mat-option:hover {
  background-color: var(--TableRowHover) !important;
  color: var(--TableRowContent) !important;

}


/* BUTTON*/
.ActionButton {
  margin: 0.1cm !important;
  height: 0.8cm !important;
  padding: 0.02cm !important;
  min-width: 2cm !important;
  width: 3cm;
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: 300;
  font-size: 20px;

  color: var(--ActionButtonText) !important;
  background-color: var(--ActionButtonBG) !important;
  border-radius: 15px;
  border: 0;
}

.ActionButton:disabled {
  color: var(--DisabledActionButtonText) !important;
  background-color: var(--DisabledActionButtonBG) !important;
}

.CancelButton {
  font-weight: 400;
  color: var(--Button) !important;
  background-color: var(--ActionButtonText) !important;
  border: 1px solid var(--ActionButtonBG);
  border-radius: 15px;
}

.SmallerActionButton {
  font-size: 14px !important;
}

/* .ActionButton:hover {
  background-color: var(--Main) !important;
  color: var(--ContrastLight) !important;
} */

.TableTitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: bold;
  padding-top: 0;
}

.TableHeaderButton {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;

  background-color: var(--TableHeaderBG) !important;
  border-radius: 33px !important;
  border: 0;
  width: 0.8cm;
  height: 0.8cm;

  font-size: 30px;
  font-weight: 200;
  color: var(--TableHeaderColor);

  margin: 0;
  transition: background ease 0.3s;
}

.TableHeaderButton:hover {
  background-color: var(--DarkTableHeaderBG) !important;
  cursor: pointer;
}

.BottomMargin {
  margin-bottom: 1vh;
}

.PaginatorwithButton {
  display: flex;
  justify-content: space-between;
  /* background-color: var(--FormBG); */
  background-color: var(--PaginatorBG);
  border-radius: 0 0 15px 15px;
  padding: 0 5px;
}

.tbl_btn {
  border-color: transparent;
  /* padding: 5px !important; */
  color: var(--Main);
  padding: 0;
  margin-right: 1vw;
}

.tbl_btn:hover {
  /* background-color: var(--Main) !important; */
  /* padding: 5px !important; */
  color: var(--TableHeaderBG);
}

.FireSVG:hover {
  fill: var(--TableHeaderBG);
}



/* TABLE*/

.ShortTable {
  border: #e4e4e4 1px;
  border-radius: 3px;
  min-height: 12vh;
}


.mat-header-row {
  background-color: var(--TableHeaderBG) !important;
  font-size: 1rem !important;
  height: 35px !important;
  min-height: 25px !important;
  color: var(--TableHeaderColor);
  border-radius: 6px 6px 0px 0px;
}

mat-header-cell {
  font-size: 1rem !important;
  background-color: var(--TableHeaderBG) !important;
  color: var(--TableHeaderColor) !important;
  height: 21px !important;
}

.mat-row {
  background-color: var(--TableRow);
  color: var(--TableRowContent);
  font-size: 1rem !important;
  height: 0.9cm !important;
  min-height: 0.9cm !important;
}

/* visibility of edit buttons on row hover */


mat-table>mat-row>mat-cell.cBtn {
  visibility: hidden;
}

mat-table>mat-row:hover>mat-cell.cBtn {
  visibility: visible;
}

mat-table>mat-row.selected>mat-cell.cBtn {
  visibility: visible;
}

/* for zebra */
mat-row:nth-child(odd) {
  background-color: var(--TableRowZebra) !important;
}

mat-row:nth-child(odd):hover {
  background-color: var(--TableRowZebraHover) !important;
}

mat-row.selected:nth-child(odd) {
  background-color: var(--TableRowSelected) !important;
}

.mat-paginator-container {
  min-height: 1cm !important;
  height: 1cm !important;
}

mat-cell {
  font-size: 1rem !important;
  color: black !important;
  height: 26px !important;
}

.MainForm {
  padding: 0.1cm;
  background-color: var(--FormBG);
}

.SearchPane {
  display: flex;
  flex-direction: row;
  width: 80%;
  padding-bottom: 0.2cm;
}

.ButtonsPane {
  display: flex;
  flex-direction: row;
  padding-top: 0.3cm;
  padding-bottom: 0.2cm;
  justify-content: center;
}

.modal-foreground {
  border-radius: 30px;


  /* border: black solid 2px; */
}

.modal-background {
  opacity: 0.1 !important;

}

.OverlayForm {
  padding-right: 0px;
  padding-left: 3px;
  padding-top: 0px;
  border: 0px solid;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  background-color: var(--OverlayBG);
}

.WarningMSG {
  box-shadow: none;
  background-color: white;

}

.OverlayBar {
  background-color: var(--Overlaybar);
  width: 100.3%;
  height: 1.3cm;
  display: flex;
  justify-content: center;
  border-radius: 10px 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  m_argin-right: 1px;
  t_ext-align: center;
  b_order-top-left-radius: 10px;
  b_order-top-right-radius: 10px;
}

/* overlay X*/
.OverlayX {
  float: left;
  font-size: 30px;
  color: white;
  margin-left: 5px;
}

.OverlayX:hover {
  color: black;
  cursor: pointer;
}

.BarTitle {
  float: right;
  color: white;
  font-weight: bold;
  vertical-align: middle;
  margin-right: 0.2cm;
  margin-top: 0.2cm;
  white-space: nowrap;
}




/*Columns width*/
.cBtn {
  margin-right: 1px;
  min-width: 3vw;
  max-width: 3vw;
}

.cTiny {
  margin-right: 5px;
  min-width: 2vw;
  max-width: 2vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cTinySmall {
  margin-right: 5px;
  min-width: 4vw;
  max-width: 4vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cSmall {
  margin-right: 5px;
  min-width: 5vw;
  max-width: 5vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cSmallMedium {
  margin-right: 5px;
  min-width: 7vw;
  max-width: 7vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cMedium {
  margin-right: 5px;
  min-width: 10vw;
  max-width: 10vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cMediumLarge {
  margin-right: 5px;
  min-width: 14vw;
  max-width: 14vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cLarge {
  margin-right: 5px;
  min-width: 18vw;
  max-width: 18vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cExtraLarge {
  margin-right: 5px;
  min-width: 25vw;
  max-width: 25vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.cHuge {
  margin-right: 5px;
  min-width: 32vw;
  max-width: 32vw;
  white-space: nowrap;
  padding-right: 2px !important;
}

.ActionsTitle {
  justify-content: center;
}

.cLTR {
  text-align: left;
  width: 100%;
  direction: ltr;
}

.RepeatedItemsTableRow {
  border-radius: 10px;
  border: #0d6efd solid 2px;
  width: 20vh;
  height: 15vh;
  padding: 5px;
  margin: 5px;
}

.RepeatedItemsSelected {
  background-color: transparent !important;
}

.RepeatedItemsTableRow:hover {
  border: black solid 2px;
}

.Lbl {
  color: #475467;
  white-space: nowrap;
  margin: 0.1cm !important;
}

.LblRequired {
  color: #475467;
  white-space: nowrap;
  margin: 0.1cm !important;

}

.LblRequired::after {
  content: "*";
}

.DataLbl {
  color: black;
  padding: 0.1cm;
  vertical-align: middle;
}

/*Lookup*/
.LookUpDiv {
  position: relative;
  display: block;
}

.LookUpSpan {
  position: absolute;
  left: 1%;
  top: 15%;
  border: none;
  background: transparent;
  color: #0d6efd;
  outline: none !important;
  cursor: pointer;
}


.LookUpSpan:hover {
  color: #eb4949;
}

/* Validation */
input.ng-touched.ng-invalid {
  border: 0;
}

mgError {
  color: red;
}

/*Date control*/


/* 
.MatFormDate{
border: 1px solid #D7D7D7 ;
border-radius: 0.3rem;
padding-left: 0.25rem;
display: inline-block;
position: relative;
text-align: left;
margin-right: 5px;
}



.mat-form-field-infix{
width: 100% !important;
padding: 0px !important;
border-top:0px !important;
}

mat-datepicker-toggle button{
border: none !important;
}

.mat-form-field-underline{
display: none;
} */
/*End of Date control*/

.Hide {
  visibility: hidden;
  display: none;
}


/* tab contrrol*/

.TabDiv {
  border-bottom: 1px solid #0d6efd;
  width: 95vw;
}

.TabBody {
  padding: 00.1cm;
  border-bottom: 1px solid #0d6efd;
  border-left: 1px solid #0d6efd;
  border-right: 1px solid #0d6efd;
  width: 95vw;
  height: 82vh;
}

.TabButtonSelected {
  font-weight: bold;
  border-bottom: 1px solid white !important;
  margin-bottom: -1px;

}

.TabButton {
  border-radius: 5px 5px 0 0;
  margin-right: 2px;
  border-bottom: transparent;
}

.TabTitle {
  color: #0d6efd;
  font-weight: bold;
  vertical-align: middle;
  margin-right: 0.2cm;
  ma_rgin-top: 0.2cm;
  white-space: nowrap;
}

/* tab contrrol*/

/* Badge*/
.Badge {
  display: inline-table;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  left: -5px;
  top: -3px;
  cursor: pointer;
  text-decoration: none;
}

.BadgeContent {
  font-size: 9pt;
  font-weight: normal;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: white;

}

.Dummy {
  width: 1px;
  height: 1px;
  border: none;
}

.SearchboxContainer {
  position: relative;
  display: flex;
  padding: 0.25cm;
  align-self: center;
}

.SearchboxContainer>svg {
  position: absolute;
  align-self: center;
  right: 0.55cm;

}

.SearchboxContainer>input {
  height: 1cm;
  width: 9cm;
  border: 0;
  border-radius: 49px;
  background-color: #F9F9F9;
  /* background-color: cyan; */
  padding-right: 1cm;

  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--SearchIconColor);

  transition: background ease 0.5s;
}

.SearchboxContainer>input:focus {
  border: 0.5px solid black;
  outline: none;
  background-color: #FFFFFF !important;
}

.SearchboxContainer>input:hover {
  background-color: #F1F1F1;
}

.SearchboxContainer>svg>circle {
  stroke: var(--SearchIconColor);
}

.SearchboxContainer>svg>line {
  fill: var(--SearchIconColor);
}

.TableSearchContainer>input {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #DADADA !important;
  width: 6cm;
  font-size: 20px;
  background-color: transparent;
}

.TableSearchContainer>input:focus {
  border: 0;
}

.TableSearchContainer>svg>circle {
  stroke: #646464 !important;
}

.TableSearchContainer>svg>line {
  fill: #646464 !important;
  stroke: #646464 !important;
}

.NextToTable {
  display: flex;
  flex-direction: column;
  margin-right: 1vw;
  margin-top: 1.5cm;
  /* justify-content: center; */
  /* align-items: center; */
}

.NextToTable>.Title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1cm;
  background-color: var(--Main);
  border-radius: 5px 5px 0 0;
  width: 15vw;
  color: var(--TableHeaderColor);
}

.NextToTable>.Title>label {
  font-weight: bold;
  font-size: 20px;
}

.NextToTable>.Content {
  background-color: var(--SearchboxBG);
  border-radius: 0 0 5px 5px;
  width: 15vw;
  height: 59vh;
  padding: 0.5cm;
}

.SmallerContent {
  height: 50vh !important;
}

.SmallerContent>textarea {
  height: 46vh !important;
}

.NextToTable>.Content>textarea {
  height: 56vh;
}

.WarningText {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-align: center;
  margin: 1cm;
}

.TableTopBar {
  display: flex;
  align-items: baseline;
  gap: 0.1cm;
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  margin: 0;
}

.TableTopBar>button {
  margin: 0.5cm auto 0.5cm 0;
}

.NavButtons {
  width: 92.8vw;
  /* display: flex;
  justify-content: center;
  gap: 0.5vw; */
}

.NavButtons>.NavButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.2cm 0.17cm;

  width: 4cm;
  height: 1cm;

  background: var(--NavButtonBG);
  border-radius: 5px;
  border: 0;
  margin: 0.5vh 0;

  color: var(--NavButtonText);
  font-weight: 400;
  font-size: 16px;

  transition: background ease 0.2s;
}

.NavButtons>.NavButton:hover {
  background-color: var(--NavButtonHoverBG);
}

.NavButtons>.SelectedButton {
  background-color: var(--NavButtonSelectedBG) !important;
  color: var(--NavButtonSelectedText) !important;
}

.DescriptionTextarea {
  height: 43vh !important;
}

.CrimeTopicContainer {
  width: 16vw;
}

.CrimeTopicTable {
  min-height: 40.5vh;
  max-height: 40.5vh
}

.LargeTable {
  min-height: 57vh;
  max-height: 57vh;
}

.InlineInput {
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid black;
}

.InlineInput:focus,
.InlineInput:active {
  border: 0;
  background-color: transparent;
}

.ToggleDefault {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;
  border-radius: 5px;
  min-width: 0.85cm;
  max-width: 0.85cm;
  height: 0.7cm;

  font-weight: 400;
  font-size: 16px;

  background-color: var(--ToggleDefaultBG);
  color: var(--ToggleText);
  margin: 0.05cm 0.05cm;
}

.ToggleDefault>* {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ToggleYes {
  background-color: var(--ToggleYesBG) !important;
}

.ToggleNo {
  background-color: var(--ToggleNoBG) !important;
  color: var(--ToggleNoText) !important;
}

.ToggleBackground {
  border: 0;
}

.PageTitle {
  font-weight: 700;
  font-size: 20px;
  text-align: right;

  color: var(--PageTitleColor);
}

.TitleHR {
  margin: 0;
  width: 100%;
}

.PersonImage {
  width: 2cm;
  padding: 0;
  margin: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  /* border: 2px solid var(--ActionButtonBG); */
  border-radius: 10px;
}

.InvolvedCardWrapper {
  border: 5px solid var(--TableHeaderBG);
  width: fit-content;
  border-radius: 15px;
  margin-top: 3vh;
}

.Splitter {
  margin: 0;
  align-self: center;
  justify-self: center;
}

.SpaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ActionTableButton {
  font-size: 14px;
  font-weight: 400;
  height: 0.8cm !important;
  width: 2.2cm !important;
  background-color: transparent !important;
  border: 2px solid var(--ActionButtonBG) !important;
  color: var(--ActionButtonBG) !important;
}

.ActionTableButton:hover {
  background-color: var(--NavButtonBG) !important;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.mat-tooltip {
  font-size: 10pt;
  font: inherit;
  max-width: unset !important;
}

.CenterAlign {
  align-self: center;
}

.FilterContainer {
  border-bottom: 1px solid var(--SearchIconColor);
  display: flex;
  align-items: center;
  font-size: 20px;
  color: var(--SearchIconColor);
}

.FilterContainer input {
  padding-right: 0.2cm;
  height: 3vh;
}

.RegularTextBox {
  margin-right: 0.1cm;
  margin-top: 0.1cm;
}

.GreenText {
  color: darkgreen;
}

.RedText {
  color: red;
}

.BackButton {
  border: 0;
  align-self: center;
  background: transparent;
  font-size: 26px;
}