body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #fff;
  font-weight: 300; }

p {
  color: #b3b3b3;
  font-weight: 300; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a, a:hover {
    text-decoration: none !important; }

.content {
  padding: 7rem 0; }

h2 {
  font-size: 20px; }

.custom-table-responsive {
  background-color: #efefef;
  padding: 20px;
  border-radius: 4px; }

.custom-table {
  min-width: 900px; }
  .custom-table thead tr, .custom-table thead th {
    border-top: none;
    border-bottom: none !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1rem; }
  .custom-table tbody th, .custom-table tbody td {
    color: #777;
    font-weight: 400;
    padding-bottom: 20px;
    padding-top: 20px;
    font-weight: 300; }
    .custom-table tbody th small, .custom-table tbody td small {
      color: #b3b3b3;
      font-weight: 300; }
  .custom-table tbody tr:not(.spacer) {
    border-radius: 7px;
    overflow: hidden;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    .custom-table tbody tr:not(.spacer):hover {
      -webkit-box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.1); }
  .custom-table tbody tr th, .custom-table tbody tr td {
    background: #fff;
    border: none; }
    .custom-table tbody tr th:first-child, .custom-table tbody tr td:first-child {
      border-top-left-radius: 7px;
      border-bottom-left-radius: 7px; }
    .custom-table tbody tr th:last-child, .custom-table tbody tr td:last-child {
      border-top-right-radius: 7px;
      border-bottom-right-radius: 7px; }
  .custom-table tbody tr.spacer td {
    padding: 0 !important;
    height: 10px;
    border-radius: 0 !important;
    background: transparent !important; }
  .custom-table tbody tr.active {
    opacity: .4; }

/* Custom Checkbox */
.control {
  display: block;
  position: relative;
  margin-bottom: 25px;
  cursor: pointer;
  font-size: 18px; }

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0; }

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  border: 2px solid #ccc;
  background: transparent; }

.control--radio .control__indicator {
  border-radius: 50%; }

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  border: 2px solid #007bff; }

.control input:checked ~ .control__indicator {
  border: 2px solid #007bff;
  background: #007bff; }

.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
  border: 2px solid #ccc; }

.control__indicator:after {
  font-family: 'icomoon';
  content: '\e5ca';
  position: absolute;
  display: none; }

.control input:checked ~ .control__indicator:after {
  display: block;
  color: #fff; }

.control--checkbox .control__indicator:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -52%);
  -ms-transform: translate(-50%, -52%);
  transform: translate(-50%, -52%); }

.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b; }

.control--checkbox input:disabled:checked ~ .control__indicator {
  background-color: #007bff;
  opacity: .2;
  border: 2px solid #007bff; }
.container{
  font-family: serif;
  font-size: 20px;
  background-color:  #e4e0e0;
}
.heading{
  font-family: serif;
  font-size: 20px;
  width: 100%;
}
.form-select{
  font-family: serif;
  font-size: 16px;
}
.button{
  text-align: center;
  margin-bottom: 2px;
}

.custom-button {
  width: 250px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 20px;
  margin-top: 1px;
  margin-right: 20px;
}

.form_container{
  width:100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #007bff;
}
.show-full-content {
  white-space: normal;
  overflow: visible;
}

.show-more-button {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.main_heading {
  font-size: 25px;
  color: white;
  font-weight: bolder;
  text-align: center; 
  padding: 0px 0; 
}
.sub_heading {
  font-size: 14px;
  color: white;
  font-weight: bolder;
  text-align: left; 
  padding: 4px 12px; 
}
.counts{
  padding-top:15px;
  font-weight: bold;
}
.page_size{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 10px 0 0 20px;
}
.form-control{
  border:1px solid #007bff;
  background-color: #fff;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border: 1px solid #007bff;
  margin-bottom: 5px;
}

.child {
  flex: 0 0 calc(25% - 10px);
  background-color: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
  text-align: center;
  font-size: 35px;
  font-weight: bolder;
  margin: 9px;
  padding: 1px;
}

@media (max-width: 768px) {
  .col-lg-3,
  .col-md-4,
  .col-sm-6,
  .col-md-12 {
    width: 100%;
    margin-bottom: 0px;
  }
  .parent {
    flex-direction: column;
    align-items: center;
  }
  .child {
    flex: 0 0 calc(50% - 10px);
  }
  .form_container {
    height: auto;
  }
  .container {
    width: 100%;
    margin-right: 0;
  }
  .main_heading {
    font-size: 20px;
    padding: 10px 0; 
  }
  .form-group {
    padding: 10px;
    margin-right: 10px; 
  }
}
.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
  display: none; 
}

.custom-header {
  background-color: #bdd6f1;
  color: white;
  border: 1px solid #007bff;
}

.custom-header mat-icon {
  color: red;
}
.form-group {
  padding: 10px;
}
@media (max-width: 480px) {
  .form_container {
    width: 100%;
    margin-left: 0;
  }
  .form-group {
    padding: 10px;
  }

}
.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
  width: 200px !important;
}
.mat-expansion-panel-body {
  padding: 0px !important;
}
.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
  padding-right: 0;
  width: 95%;
}
.equal-width-table {
    table-layout: fixed;
    width: 100%;
}

.equal-width-table th, .equal-width-table td {
    width: calc(100% / 16); /* Divide by the number of columns (16 in this case) */
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}