.container p,
.container>p,
li {
  max-width: 100% !important;
}

p {
  display: block !important;
}

.hover-iop-drk-blue:hover {
  background: #2E5E83 !important;
}

.font-45 {
  font-size: 45px !important;
  line-height: 45px !important;
}

.pt-15 {
  padding-top: 15px;
}

.lrg input[type="radio"],
.lrg input[type="checkbox"] {
  height: 20px;
  width: 20px;
}

/* i {
  color: #3C7AA9;
  margin-left: 5px;
} */
.font-orange {
  color: #D96733;
}

.ds-floating-label.text-area {
  left: 15px;
  right: 0;
  top: 15%;
  font-size: .875rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: #2c2c2c;
  z-index: 2;
}

.text-area-container textarea {
  padding-top: 20px!important;
}

.textarea:hover,
.textarea:focus {
  outline: none;
  background: #fff;
  border-bottom-color: rgba(0, 0, 0, .87);
}

@media screen and (max-width: 768px) {

  .select-container {
    margin-bottom: 35px;
  }

  .even-cols>* {
    flex-basis: unset;
  }
}

@media screen and (max-width: 425px) {
  .flex.mobile {
    display: block;
  }

  .flex.mobile button:nth-child(2) {
    margin-top: 20px;
  }

  .font-45 {
    font-size: 35px !important;
  }

  .name {
    display: block;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.pull-right {
  float: none !important;
}

.close {
  right: 15px;
  top: 15px;
}


/*** Beginning of Toggle Styling ***/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--blue-800) !important;
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--blue-800) !important;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*** End of Toggle Styling ***/


/*** Beginning of Spinning Loader ***/

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #700017 !important;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*** End of Spinning Loader ***/

/** Start: button->div conversion**/
div.border-blue,
a.div.border-blue {
  border-color: var(--blue-800) !important;
}

div.secondary,
.div.secondary {
  border: 2px;
  border-style: solid;
  background: transparent;
}

/** End: button->div conversion**/

/** Beginning of Adjustment to Remove and Down Arrow Keys on Input Type Number**/
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;

}

/**End of Adjustmentt to Remove and Down Arrow Keys on Input Type Number**/

/***** Start: Css for survey components inherited from old ohio style sheet ****/

.ohio-button {

  display: flex;
  justify-content: center;
  min-width: max-content;
  font-size: 16px;
  transition: all .2s ease-in-out !important;
  color: white !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: max-content;
  padding: 0 20px;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  background: transparent;
  border-radius: 100px !important;
  background: #000 !important;
  margin-bottom: 10px !important;
}


table.table {
  border: 1px solid #D8D8D8;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table.table td,
table.table th {
  border: 1px solid #D8D8D8;
  padding: 8px;
}

table.table tbody td {
  font-size: 15px;
  color: #000000;
}

table.table tr:nth-child(even) {
  background: #F2F2F2;
}

table.table thead {
  background: #F2F2F2;
  border-bottom: 1px solid #D8D8D8;
}

table.table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: left;
  border-left: 1px solid #D8D8D8;

}

table.table thead th:first-child {
  border-left: none;
}

table.table tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  border-top: 4px solid #333333;
}

table.table tfoot td {
  font-size: 16px;
}

table.table tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, .100);
}

.close-slider {
  display: none;
}

.ngx-pagination .current {
  padding: 0.1875rem 0.625rem;
  background: black !important;
  color: #fefefe;
  cursor: default;
}

.pagination-container {
  color: black !important;
  padding-top: 10px;
}

.ngx-pagination .disabled {
  padding: 0.1875rem 0.625rem;
  color: black;
  cursor: default;
}

section,
.content-band,
div {
  display: block;
}

.ohio-button.x-small.sections-btn {
  padding: 0 20px !important;
}

button.compliant {
  font-size: 14px !important;
  background-color: none !important;
  border-color: black !important;
  border: 0px solid #000 !important;
  margin-right: 0px !important;
}

button.not-started {
  font-size: 14px !important;
  background-color: none !important;
  border-color: black !important;
  border: 0px solid #000 !important;
  margin-right: 0px !important;
}

button.pages.not-started span.page-number-text {
  border: 0px solid #000 !important;
  margin-right: 0px !important;
}

.required-question {
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  top: 7px !important;
  left: 7px !important;
}

.survey-sections li.top {
  background: transparent !important;
}

.question-text {
  display: inline !important;
}

.ohio-select-label {
  /*display:flex!important;*/
  margin: 0 !important;
}

.ohio-field-input,
.validation-container {
  margin-bottom: 5px !important;
}

.top-title-container .title-container.top {
  /*border:0px!important;*/
  display: none;
}

.title-container {
  margin-left: 10px;
  margin-right: 10px;
}

.status-player-section {
  display: none !important;
}

.ohio-field-input {

  align-self: flex-end !important;
  width: inherit !important;
  height: 100% !important;
  padding: 20px 20px 0px !important;
  font-size: 1rem !important;
  text-decoration: inherit !important;
  text-transform: inherit !important;
  border-radius: 4px 4px 0 0 !important;
  border: none !important;
  border-bottom: 1px solid !important;
  box-sizing: border-box !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: white !important;
  appearance: none !important;
  margin-top: 5px !important;



}

.ohio-textarea-field.survey {
  position: relative !important;
  width: 100% !important;
  padding: 20px !important;
  text-align: left !important;
  border: 0 !important;
  outline: none !important;
  border-bottom: 1px solid #000 !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  font-size: 16px !important;
  font-family: Source Sans Pro, sans-serif !important;
  /*background: #fff!important;*/
  transition: all .2s ease-in-out !important;
  /*z-index: 1!important;*/
  margin-top: 5px !important;
}

.character-count-badge {
  background-color: var(--blue-800) !important;
}

.survey-sections li.top-section {
  background: var(--blue-300) !important;

}

.survey-sections li.top-section.active a span .survey-sections li.top-section:hover a .survey-sections li.top-section.active .survey-sections li.top-section:active,
.survey-sections li.top-section:hover {
  background: var(--blue-800) !important;
}

.icon-container-span-completed-icon-question {
  background-color: #238728 !important;
  border: none !important;
  color: white !important;
}

.icon-holder-question {
  display: inline-block !important;
  padding: 3px 4px 3px 3px !important;
}

.ode-section {
  margin-top: 10px !important;
}

.button.pages.not-started span.page-number-text {
  margin-right: 0px !important;
}

.action-step-message {
  padding: 20px !important;
  border: none !important;
  background-color: white !important;
}

br {
  height: 0px !important;
  width: 0px !important;
}

.sections-btn {
  font-size: 16px !important;
}

.ohio-card {
  border: 0px !important;
}

.title-container {
  border: none !important;
}

.dollar-icon {
  padding: 15px 8px 0 !important;
  color: black !important;
  background-color: transparent !important;
  height: 35px !important;
  border-radius: 4px 0 0 4px !important;
  position: absolute !important;
}

.completed-icon {
  background: var(--blue-300) !important;
}

.question-shell {
  background-color: white !important;
  border: none !important;
  padding: 10px !important;
}

.row {
  padding: 10px !important;
}

.spacer_height_15 {
  height: 15px !important;
}

.pages-container {
  background-color: white !important;
  border: none !important;
  padding: 10px !important;
}

/***** End: Css for survey components inherited from old ohio style sheet ****/

/*****ds-form.css margin bottom override******/

.ds-text-field {
  margin-bottom: 0px !important;
  z-index: 2 !important;
}

/******ds-form.css margin bottom override****/

/**** Start: smart search dropdown*****/

.dropdown-menu {
  padding: 10px 20px !important;
  background-color: #67615E !important;
  height: 100px !important;
  width: auto !important;

}


.dropdown {
  background-color: #67615E !important;
  border-radius: 0px 0px 10px 10px;
}

.dropdown-menu a {
  color: white !important;
  font-weight: normal !important;
  font-family: 'Source Sans Pro', sans-serif !important;

}

.dropdown ul>li {
  font-size: 16px !important;
  font-family: 'Source Sans Pro', sans-serif !important;
  padding: 0 0 !important;
  color: white !important;
}

.dropdown-menu ul>li {
  font-size: 16px !important;
  font-family: 'Source Sans Pro', sans-serif !important;

}

.dropdown ul>li a {
  font-size: 16px !important;
  font-family: 'Source Sans Pro', sans-serif !important;
}

.dropdown-menu ul>li a {
  font-size: 16px !important;
  font-family: 'Source Sans Pro', sans-serif !important;
}

/****End: smart search dropdown*****/

/***Start: giving survey paragraph in Assurance a bit spacing between***/

.survey-input-group-container {
  margin-top: 5px;
  margin-bottom: 5px;
}

/***End: giving survey paragraph in Assurance a bit spacing between***/

/****Start: add margin to the top of radio buttom in Assurance****/

.question-answer.radio-spacer {

  margin-top: 10px !important;

}

/****End: add margin to the top of radio buttom in Assurance****/

/***Start:correcting the text entry position of survey dollor entry***/
.dollar-input {
  padding: 10px 20px 0px !important;
}

/***End:correcting the text entry position of survey dollor entry***/

/***Start:overriding the tab z-index to avoid overlapping with the main navigation bar***/
div.tabs-solid>[role="tablist"]>[role="tab"] {
  z-index: 0 !important;
}

/***End:overriding the tab z-index to avoid overlapping with the main navigation bar***/

/*** Start: budget grid parent budget code row collapse color***/

.collapsed_background {
  background-color: white !important;
}

/*** End: budget grid parent budget code row collapse color***/

/***** Start: fix survey chevron missing issue *****/

.ohio-select-select select {
  appearance: auto;
  -webkit-appearence: auto;
  -moz-appearance: auto;
}

/***** End: fix survey chevron missing issue *****/

/*** Start: Set input field background for light grey #F2F2F2**/

/**text input**/
.card .ds-text-field__input {
  background-color: #F2F2F2 !important;
}

.card .white>.ds-text-field__input:focus {
  outline: none !important;
  background: var(--gray-200) !important;
}

.card .ds-text-field__input:focus {
  outline: none !important;
  background: #dcdcdc !important;
}

.card .ds-text-field__input:hover {
  background: #ebebeb !important;
  transition: all 100ms ease-in-out !important;
}

.card .ds-text-field__input~.ds-floating-label {
  left: 0 !important;
  right: 0 !important;
  top: 30% !important;
  width: inherit !important;
  font-size: .875rem !important;
  padding: 0 20px !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--gray-800) !important;
}

.card .ds-text-field__input:focus~.ds-floating-label,
.card .ds-text-field__input:valid~.ds-floating-label {
  left: 0 !important;
  right: 0 !important;
  top: 30% !important;
  font-size: .875rem !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--gray-700) !important;
}

.card .ds-text-field__input:focus~.ds-floating-label.blue-label,
.card .ds-text-field__input:valid~.ds-floating-label.blue-label {
  left: 0 !important;
  right: initial !important;
  top: 30% !important;
  font-size: .875rem !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.card .ds-text-field.drk {
  background: var(--gray-100) !important;
}

/**dropdown**/
.card .ds-select-field {
  background-color: #F2F2F2 !important;
}

.card select:focus.ds-select-field {
  background: #dfdfdf !important;
}

.card select:focus.ds-select-field:hover {
  background: #dfdfdf !important;
}

.card select::-ms-expand {
  display: none !important;
}

.card .ds-select-field.drk {
  background: var(--gray-100) !important;
}

.card .ds-select-field:hover.drk {
  background: #ebebeb !important;
  transition: all 100ms ease-in-out !important;
}

.card .ds-select-field:hover {
  background: #ebebeb !important;
  transition: all 100ms ease-in-out !important;
}

.card select.ds-select-field .option {
  background: var(--gray-200) !important;
}

/*** End: Set input field background for light grey #F2F2F2**/

/*** Start: change survey input to grey background ***/
.survey-input input {
  background-color: #F2F2F2 !important;
}

.survey-input-group-container input {
  background-color: #F2F2F2 !important;
}

.ohio-textarea textarea {
  background-color: #F2F2F2 !important;
}

/*** End: change survey input to grey background ***/

/**** Start: Checkbox styling ****/

input[type="checkbox"] {
  margin-right: 10px;
  height: 20px;
  width: 20px;
  margin-left: 10px;
  display: inline-block;
  padding: 3px;
  background-color: transparent;
  padding-bottom: 0;

}

/**** End: Checkbox styling ****/

/***Start: add horizontal scroll bar to all white background***/

.card {
  overflow-x: auto !important;
}

/*** End: add horizontal scroll bar to all white background***/

/***** Start: Remove red flash on tabs with switching tabs ****/

[role="tab"]:focus::after {
  bottom: -30px !important;
  opacity: 1 !important;
}

/***** End: Remove red flash on tabs with switching tabs ****/


/**** Start: Survey Help Text Icon Correction *****/

.help-text {
  position: relative !important;
  right: -120px !important;
  top: -30px !important;
}

/**** End: Survey Help Text Icon Correction *****/

/**** Start: Typeahead Input Styling ****/

.typeahead-label {
  padding-left: 35px !important;
}

.typeahead-input {
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.search-icon {
  float: left;
  margin-right: 6px;
  margin-top: -20px;
  position: absolute;
  z-index: 4;
  left: 10px;
  top: 48px;
  color: var(--gray-600);

}

.clearinput-icon {
  float: right;
  margin-right: 6px;
  margin-top: -20px;
  position: absolute;
  z-index: 4;
  right: 10px;
  top: 48px;
  color: var(--gray-600);
}

/**** End: Typeahead Input Styling ****/

/***** Start: Make Currency Input Field Label Stay Small to Avoid Overlap *****/

.currency-input-label {
  font-size: 0.875rem !important;
  left: 0 !important;
  right: 0 !important;
  top: 30% !important;
}

.card .ds-text-field__input~.currency-input-label {
  font-size: 0.875rem !important;
  left: 0 !important;
  right: 0 !important;
  top: 30% !important;

}

/***** End: Make Currency Input Field Label Stay Small to Avoid Overlap *****/

/****** Start: Fix Stepper Height ******/

.stepper-height {
  height: 150px;
}

/****** End: Fix Stepper Height ******/


/***** Start: Smaller version of Dropdown *****/

.select-container.chevron-small::before {
  content: '\f078';
  position: absolute;
  top: 15px;
  right: 20px;
  font-family: 'font awesome 5 pro';
  font-weight: 800;
  pointer-events: none;
  z-index: 1;
}

.select-container.chevron-small::before>select:active {
  content: '\f078';
  position: absolute;
  top: 15px;
  right: 20px;
  font-family: 'font awesome 5 pro';
  transform: rotate(180deg);
  pointer-events: none;
}

.select-container-small {

  height: 36px !important;
  width: 30% !important;
  font-size: 10px !important;

}

.ds-select-field-small {
  height: 35px !important;
  font-size: 10px !important;

}

.ds-floating-label-small {
  font-size: 10px !important;
}

/***** End: Smaller version of Dropdown *****/



/****** Start: Nested Table Reformat Css ******/

.table-ode-sub {
  border: 0, 0, 0, 0 !important;

}



table.table-ode-sub tr:nth-child(even) {
  background: #FFFFFF !important;
}

table.table-ode-sub tr:nth-child(even):hover {
  background: rgba(0, 0, 0, .100) !important;
}

/*

table.table-ode-sub tbody tr:hover {
  background: #FFFFFF !important;
}

table.table-ode-sub thead tr:hover {
  background: #FFF!important;
}
*/

table.table-ode-sub {
  border: 0px solid #FFF !important;
  width: 100% !important;
  text-align: left !important;
  border-collapse: collapse !important;
}

table.table-ode-sub td,
table.table-ode-sub th {
  border: 0px solid #FFF !important;
  padding: 1px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border-bottom: 1px solid #D8D8D8 !important;
}

table.table-ode-sub thead {
  background: #FFF !important;
  border-bottom: 0px solid #FFF !important;
  height: 45px !important;

}

table.table-ode-proj td,
table.table-ode-proj th {
  border: 0px solid #D8D8D8 !important;
  padding: 8px !important;

  .table-ode-sub td,
  .table-ode-sub th {
    border-bottom: 1px solid #D8D8D8 !important;
  }
}

table.table-ode-proj {
  border: 0px solid #D8D8D8 !important;
}

table.table-ode-sub {
  width: 95% !important;
  margin-right: 0px !important;
  margin-left: auto !important;
}

.grey-project-row {
  background-color: #F2F2F2 !important;
}

.white-project-row {
  background-color: #FFFFFF !important;
}

/****** End: Nested Table Reformat Css ******/


/******* Start: In Table Text Field *******/

.ds-text-field__input-small {
  padding: 2px 5px 0px !important;
}

.ds-text-field-small {
  margin-top: 10px !important;

  height: 20px !important;
}

/******* End: In Table Text Field *******/

/******* Start: In Table Dropdown *******/



/***** Smaller version of Dropdown *****/

.select-container.chevron-in-table::before {
  content: '\f078';
  position: absolute;
  top: 3px;
  right: 5px;
  font-family: 'font awesome 5 pro';
  font-weight: 800;
  pointer-events: none;
  /*z-index: 100;*/
  z-index: 1;
}


.select-container.chevron-in-table::before>select:active {
  content: '\f078';
  position: absolute;
  top: 3px;
  right: 5px;
  font-family: 'font awesome 5 pro';
  transform: rotate(180deg);
  pointer-events: none;
}

.select-container-in-table {
  margin-top: 10px !important;
  height: 21px !important;
  width: 200px !important;
}

.ds-select-field-in-table {
  width: 100% !important;
  height: 20px !important;
  padding: 2px !important;
  padding-bottom: 0 !important;
}

/***** Smaller version of Dropdown *****/

/******* End: In Table Dropdown *******/

/******* Start: In table alternating color for  currency input *******/
.card table.table-ode tr:nth-child(even) .ds-text-field__input {
  background-color: white !important;
}

.Width70Pct {
  width: 70% !important;
}

/******* End: In table alternating color for  currency input *******/

/**** Start: increase z-index for selected input fields ****/

.ds-text-field.z-index-increase {
  z-index: 3 !important;
}

.ds-text-field.mb-20 {
  margin-bottom: 20px !important;

}

.width100pct {
  width: 100% !important;
}

/**** End: increase z-index for selected input fields ****/

/**** Start: In Table Error Message below input ****/

.error-message {
  color:#c00004 !important;
  font-size: 13px !important;
  min-width: 150px !important;
}

/**** End: In Table Error Message below input ****/


/**** Start: Text Field Error Message below input ****/

.ds-text-field .input-error::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red-800);
}

.ds-text-field .input-error::before {
  content: '';
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  bottom: 22px;
  right: 15px;
  height: 30px;
  width: 30px;
  padding: 0 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--red-800);
  z-index: 100;
  pointer-events: none;
}

.ds-text-field::after>.ng-invalid {
  content: 'f06a' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--red-800) !important;
  z-index: 20 !important;
  background: var(--red-100) !important;
}

.ds-text-field>.ds-text-field__input.ng-invalid~.field-line-ripple {
  background: var(--red-800) !important;
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.ds-text-field.ng-invalid~.ds-text-field__input {
  opacity: 1 !important;
  transform: scaleX(1) !important;
  background: var(--red-800) !important;
}


.ds-text-field>div.input-error {
  position: absolute !important;
  bottom: -13px !important;
  left: 15px !important;
  height: 10px !important;
  width: calc(100% - 15px) !important;
  padding: 0 0 0 0 !important;
  font-size: 13px !important;
  color: var(--red-800) !important;
  transition: all .2s ease-in-out !important;
}

.ds-text-field>div.input-error::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: none !important;
  /*background: var(--red-800)!important;*/
}

.ds-text-field>div.input-error>app-error-message>ul>li {
  padding: 0 0 0 0 !important;
  text-align: left !important;
}

.ds-text-field>div.input-error>app-error-message>ul {
  margin-left: 0 !important;
  text-align: left !important;
}

.ds-text-field__input.ng-invalid~label.ds-floating-label {
  color: var(--red-800) !important;
}

.ds-text-field>div.input-error {
  display: none !important;
}

.ds-text-field__input.ng-invalid~div.input-error {
  display: block !important;
}

.ds-text-field::after>.ng-invalid {
  content: 'f06a' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--red-800) !important;
  z-index: 20 !important;
  background: var(--red-100) !important;

}

.validation-container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}


/**** End: Text Field Error Message below input ****/


/**** Start: Validation Container - Text Field Error Message below input ****/


.validation-container>div.input-error {
  display: none !important;
}

.validation-container .ds-text-field:has(input.ng-invalid)~.input-error {
  display: block !important;
}


.validation-container>div.input-error>app-error-message>ul>li {
  padding: 0 0 0 0 !important;
  color:#c00004;
  font-size: 13px;
  text-align: left !important;
  line-height: 15px !important;
}

.validation-container>div.input-error>app-error-message>ul {
  margin-left: 10px !important;
}


.validation-container>div.ds-text-field:has(input.ng-invalid)::before {
  content: '';
  font-family: "Font Awesome 5 Pro";
  position: absolute !important;
  bottom: 7px;
  right: 15px;
  height: 30px;
  width: 30px;
  padding: 0 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--red-800);
  z-index: 100;
  pointer-events: none;
}


/**** End: Validation Container - Text Field Error Message below input ****/

/******Start: when in table, the validation message icon no show *****/
.validation-container>div.ds-text-field-small:has(input.ng-invalid)::before {
  content: '';
  font-family: "Font Awesome 5 Pro";
  position: absolute !important;
  bottom: 7px;
  right: 15px;
  height: 30px;
  width: 30px;
  padding: 0 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--red-800);
  z-index: 100;
  pointer-events: none;
  display: none !important;
}

/******End: when in table, the validation message icon no show *****/

/****Start: Add error message variation for textarea*****/

.validation-container .ds-text-field:has(textarea.ng-invalid)~.input-error {
  display: block !important;
}

/****End: Add error message variation for textarea*****/


/****Start: Add error message variation for checkbox*****/

.validation-container .checkbox_validation:has(input.ng-invalid)~.input-error {
  display: block !important;
}

/****End: Add error message variation for checkbox*****/


/*** Start:Style code just for demo-ing how error message works in style guide, can be removed after project development is done ***/
.ds-text-field>div.input-error>app-error-message-test>ul>li {
  padding: 0 0 0 0 !important;
  text-align: left !important;
}

.ds-text-field>div.input-error>app-error-message-test>ul {
  margin-left: 0 !important;
  text-align: left !important;
}

.validation-container>div.input-error>app-error-message-test>ul>li {
  padding: 0 0 0 0 !important;
  color:#c00004 !important;
  font-size: 13px !important;
  text-align: left !important;
  line-height: 15px !important;
}

.validation-container>div.input-error>app-error-message-test>ul {
  margin-left: 10px !important;
}


/*** End:Style code just for demo-ing how error message works in style guide, can be removed after project development is done ***/

/******** Start: Make no background icon's background always transparent*******/

button.disabled.bg-transparent,
.button.disabled.bg-transparent {
  background: transparent !important;
}

button:disabled.secondary,
.button.secondary.disabled {
  border: 0px;
  background: var(--gray-400) !important;
}

button.bg-trasparent:disabled,
.button.bg-trasparent[disabled] {
  background: transparent !important;
}

button.bg-transparent:disabled .icon-black,
button.bg-transparent[disabled] .icon-black {
  fill: gray !important;
  color: gray !important;
}

button.bg-transparent:disabled .icon-red,
button.bg-transparent[disabled] .icon-red {
  fill: gray !important;
  color: gray !important;
}

/******** End: Make no background icon's background always transparent*******/



/*******Start: Hide Subproject Table Info ********/

#sub-projects-table_info {
  display: none !important;
}

/*******End: Hide Subproject Table Info ********/

/*****Start: Subproject table pagination smaller *****/

.sub-projects-table_paginate {
  font-size: 11px !important;
}

/*****End: Subproject table pagination smaller *****/

/***** Start: minwidth for text display *****/

.min-width-200 {
  min-width: 200px !important;
}

/***** End: minwidth for text display *****/


/***** Start: Reposition the calendar icon in text input field *****/
input[type=datetime-local] {
  padding-right: 40px !important;
}

/***** End: Reposition the calendar icon in text input field *****/

/***** Start: correct the position of number input label *****/

input[type=number]~.ds-floating-label {
  top: 30% !important;
  font-size: 1rem !important;
}

/***** End: correct the position of number input label *****/


/**** Start: Validation Container - Checkbox Error Message below input ****/

.validation-container .check-confirm:has(input.ng-invalid)~.input-error {
  display: block !important;
}

/**** End: Validation Container - Checkbox Error Message below input ****/

/**** Start: Validation Container - Dropdown Error Message below input ****/

.validation-container .select-container:has(select.ng-invalid)~.input-error {
  display: block !important;
}

.ds-select-field.ng-invalid~label.ds-floating-label {
  color: var(--red-800) !important;
}

/**** End: Validation Container - Dropdown Error Message below input ****/


/***** Start: Data Table Style Correction *****/

.mat-sort-header-content {
  font-family: 'Source Sans Pro', sans-serif !important;

}

.mat-mdc-cell {
  font-family: 'Source Sans Pro', sans-serif !important;

}

.mat-sort-header {
  color: blue !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #000000 !important;
  text-align: left !important;
  border-left: 1px solid #D8D8D8 !important;
}

.conditional-row {
  background-color: white !important;
}

.mat-mdc-table {
  border: 1px solid #D8D8D8 !important;
  /*width: 100%!important;*/
  text-align: left !important;
  border-collapse: collapse !important;
  background-color: white !important;
  margin-top: 10px !important;

}

.project-row {
  width: 98% !important;
  min-width: 60% !important;
  margin: 8px !important;

}

.mat-mdc-paginator-container {
  background-color: white !important;

}

.mdc-notched-outline {
  top: 7px !important;
  height: 70% !important;

}

.mat-mdc-row {
  height: unset !important;
}

table.mat-mdc-table td,
table.mat-mdc-table th {
  padding: 0px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;

}

/***** End: Data Table Style Correction *****/

/***** Start:  dropdown text color *****/
.dropdown-item {
  color: white !important;
}

/***** End:  dropdown text color *****/

/***** Start: Key Value Pair Table Alternative *****/

.key-value-table-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 1rem;
}

.key-value-table-like-container {
  /*margin-top: 10px;*/
}

.key-value-table-wrapper {
  display: grid;
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  border-bottom: 0px;
}

.key-value-header-row{
  background-color: #FFF;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  text-align: left;
  padding: 16px;
}

.key-value-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #ccc;
}

.key-value-row.header-row {
  background-color: #f1f1f1;
  font-weight: bold;
}

.key-value-cell {
  padding: 16px;
  text-align: left;
  border-right: 1px solid #ccc;
  line-height: 1;
}

.key-value-cell:last-child {
  border-right: none;
}

.key-value-table-like .key-value-row:nth-child(even) {
  background-color: #f0f0f0;
}

.key-value-table-like .key-value-row:nth-child(odd) {
  background-color: #ffffff;
}

.key-value-table-like .key-value-row:hover {
  background-color: #dcdcdc;
}

/***** End: Key Value Pair Table Alternative *****/


/****** Start: fixing tab structure change causing css not applied correctly ****/

div.tabs-solid>[role="tablist"]>span>span>[role="tab"] {
  border-radius: 0;
  border: 0px solid transparent;
  border-top: 0;
  border-bottom: 0;
  margin: 0 5px 0 0;
  background: var(--gray-300);
  overflow: visible;
  z-index: 9;
}

div.tabs-solid>[role="tablist"]>span>span>[role="tab"][aria-selected="true"] {
  border: 0px solid var(--gray-200);
  border-top: 0;
  border-bottom: 0;
  background: var(--gray-100);
  background: white;
}

div.tabs-solid>[role="tablist"]>span>span>[role="tab"]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 0;
  background: var(--green-800);
  opacity: 0;
  transition: all .2s ease-in-out;
}

div.tabs-solid>[role="tablist"]>span>span>[role="tab"]:focus::after {
  bottom: -30px !important;
  opacity: 1 !important;
}

/****** End: fixing tab structure change causing css not applied correctly ****/


/****** Start: Survey Assurance Approval Alignment Update ******/

div.ohio-select-label {
  display: inline-block !important;
}

/****** End: Survey Assurance Approval Alignment Update ******/

/****** Start: Survey Checkbox text alignment ******/
.checkbox-text-alignment>p {
  margin: 0px !important;
}

/****** End: Survey Checkbox text alignment ******/

/******* Start: Modal override *******/

.modal-wrapper {
  /*position: absolute;*/
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255 255 255 / .75);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease-in-out;
  height: 100%;
  width: 100%;
}

.modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  width: 100%;
  margin: 0 20px;
  background: white;
  box-shadow: 0 0 85px -3px rgb(0 0 0 / 20%);
  transition: opacity 0.25s ease-in-out;
  z-index: 1000;
}

.rounded-20 {
  border-radius: 20px !important;
}

.modal-title {

  line-height: 36px;
  font-size: 36px;
  padding: 0 50px;

}

.page-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Source Sans Pro', sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.modal-content p {
  margin-bottom: 0;
  padding: 0 50px;
}

.m-auto {
  margin: auto;
}

.gray-300 {
  background: #dadada !important
}

.modal-button-container {

  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin-top: 20px;

}

.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: start!important;
  padding: 50px 0;
}

#modal-1 .modal-body, #modal-2 .modal-body, #modal-3 .modal-body {
    max-height: 75vh;
    overflow: auto;
    justify-content: start;
}

.modal-title {

  line-height: 36px;
  font-size: 30px;
  padding: 0 50px;

}



.font-gray-600 {
  color: #8c8c8c;
}

/* .card:focus {
  
  outline: 3px solid var(--red-700);
  
  }
  
  
  
  .card.fluid {
  
  max-width: 100% !important;
  
  }
  
  .shadow {
  
  box-shadow: 0px 0 32px -10px rgba(0, 0, 0, 0.2) !important;
  
  } */

.width-full {
  width: 100%;
}

.p-5 {
  padding: 5px;
}

.text-center {
  text-align: center;
}

.bold {
  font-weight: bold;
}

/* .gap-20 {
  
  gap: 20px;
  
  } */

button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: max-content;
  padding: 0 20px;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s ease-in-out !important;
}



button.secondary {
  border: 2px;
  border-style: solid;
  background: transparent;
}

.rounded-4 {
  border-radius: 4px !important;
}

button .btn-txt {
  transition: all 0.2s ease-in-out !important;
}

button .btn-txt {
  display: flex;
  justify-content: center;
  min-width: max-content;
  font-size: 16px;
}

button:hover.hover-red {
  background:#c00004 !important;
  color: white !important;
}

button.border-red {
  border-color:#c00004;
}

:hover.hover-font-white>* {
  color: white !important;
}

.font-red {
  color:#c00004 !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.display-inline-block {
  display: inline-block !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.black {
  background: #000 !important;
}

.font-white {
  color: white !important;
}

.hover-blue-800:hover {
  background: #3d7aa9 !important;
}


@media screen and (max-width: 512px) {}

/******* End: Modal override *******/



/***** Start: Disabled Delete Button Trash Bin Icon should be Deep Grey *****/

/* disabled */
button.disabled,
.button.disabled,
button[disabled] {
  position: relative;
  pointer-events: none;
  background: var(--gray-400) !important;
  border-color: var(--gray-500) !important;
  z-index: 0;
}

button.disabled>.btn-txt,
.button.disabled>.btn-txt,
.button[disabled]>.btn-txt {
  color: var(--gray-600) !important;
}

button.disabled>.icon,
button[disabled]>.icon {
  fill: gray !important;
  color: gray !important;
}

/***** End: Disabled Delete Button Trash Bin Icon should be Deep Grey *****/


/****** Start: Fixing Modal below Text Input Fields Issue *****/
.modal-wrapper {

  z-index: 3;
}

/****** End: Fixing Modal below Text Input Fields Issue *****/

/****** Start: Show Sections Restyling *****/
.show-hide {
  text-align: left !important;
  width: 100% !important;
  margin-left: 10px !important;
  margin-top: 4px !important;
  font-size: 20px !important;
}


/****** End: Show Sections Restyling *****/

/****** Start: Blue border button override *****/
button.border-blue {
  border-color: var(--blue-800) !important;
}

/****** End: Blue border button override *****/

/****** Start: Small explanation text below input fields ******/
.input_explanation_small {
  font-size: 13px;
}

/****** End: Small explanation text below input fields ******/

/****** Start: multi select dropdown ******/
.ngx-dropdown-container {
  border-radius: 4px 4px 0 0;
  margin: 0;
  padding-top: 7px;
  padding-left: 7px;
  border: 0;
  outline: none !important;
  cursor: pointer;
  box-sizing: border-box;
  background: white !important;
  transition: all .2sease-in-out;
  font-size: 16px;

}

.ngx-dropdown-container .ngx-dropdown-button {
  border: none !important;
}

/****** End: multi select dropdown ******/

/****** Start: Hide Close Button Document Upload ******/

.hide_close_button_wrapper {
  position: relative;
}

.hide_close_button_overlay {
  position: absolute;
  background-color: #F2F2F2;
  height: 50px;
  width: 50px;
  top: 0;
  right: 0;
  z-index: 100;
}

/****** Start: Hide Close Button Document Upload ******/

/****** Start: Checkbox Label *********/

.checkbox_label{
  font-size: .875rem!important;
  color:var(--gray-700)!important;
  font-family: 'Source Sans Pro', sans-serif;
  position:relative;
  top:-4px;
}

/****** End: Checkbox Label *********/

/****** Start: Add validation error icon to dropdowns *****/

.validation-container >div.select-container:has(select.ng-invalid)::after {
  content: '';
  font-family: "Font Awesome 5 Pro";
  position: absolute!important;
  bottom: 7px;
  right: 50px;
  height: 30px;
  width: 30px;
  padding: 0 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--red-800);
  z-index: 100;
  pointer-events: none;
}


/****** End: Add validation error icon to dropdowns *****/

/***** Start: Fix calendar icon and error icon overlapping *****/
input[type=date]{
  padding-right:40px!important;
}
/***** End: Fix calendar icon and error icon overlapping *****/

/***** Start: convert button to have same style as <a> tag *****/
.buttontoa {
  text-decoration: none!important;
  color: var(--blue-800)!important;
  font-weight: bold!important;
}

.buttontoa_cancel {
  text-decoration: none!important;
  color: var(--red-800)!important;
  font-weight: bold!important;
}
/***** End: convert button to have same style as <a> tag *****/

/***Start:Fix input field background inside a table but in a form***/
.card table.table-ode tr:nth-child(even) .card__content .ds-text-field__input{
  background-color:#F2F2F2 !important;
}
/***End:Fix input field background inside a table but in a form***/

/***** Start: Required orange font ******/

.font-required, .font-orange {
  color: #D96733;
}

/***** End: Required orange font ******/

/***** Start: Disabled Field Label Correction *****/
.ds-text-field__input:focus ~ .ds-floating-label, 
.ds-text-field__input:disabled ~ .ds-floating-label {
  left: 0!important;
  right: 0!important;
  top: 30%!important;
  font-size: .875rem!important;
  transform: translateY(-50%)!important;
  pointer-events: none!important;
  color: var(--gray-700)!important;
}
/***** End: Disabled Field Label Correction *****/


/***** Start: Make in labels not changing font size when in focus *****/
.ds-text-field__input ~ .ds-floating-label
 {
    font-size: 0.875rem !important;
    left: 0 !important;
    right: 0 !important;
    top: 30% !important;
}

/***** Start: Make in labels not changing font size when in focus *****/

/****** Start: commonly used css classes ******/
.red-text{
    color:#c00004!important;
}

.margin-bottom-15px{
    margin-bottom: 15px!important;
}

.width100pct{
    width: 100%!important;
}

.margin-bottom-10px{
    margin-bottom: 10px!important;
}

.height-40px{
    height: 40px!important; 
}

.width-85px{
    width: 85px!important;
}

.padding-0-7px{
    padding: 0 7px!important;
}

.width-75px{
    width: 75px!important;
}

.height-35px{
    height:35px!important;
}

.font-size-10px{
    font-size: 10px!important;
}

.margin-auto-auto{
 margin: auto auto!important;
}

.height-39px{
    height: 39px!important;
}

.width-100px{
    width: 100px!important;
}

.height-10px{
    height:10px!important;
}

.width-35px{
    width: 35px!important;
}

.width-230px{
    width:230px!important;
}

.maxwidth-100pct{
    max-width: 100%!important;
}

/****** End: commonly used css classes ******/

/******* Start: In key-value pair alternating color for  currency input *******/
.card dl div.key-value-row:nth-child(even) .ds-text-field__input {
    background-color: white !important;
}

/******* End: In key-value pair alternating color for  currency input *******/


/******* Start: History Component Outer Frame *********/
.history-frame {
  border: 5px solid #f2f2f2;
  background-color: #f2f2f2;
  padding-left:10px;
  padding-bottom:10px;
}
/******* End: History Component Outer Frame *********/

/******* Start: Allow Breadcrumb to be longer up to 100% *********/
.ohio-breadcrumbs{
  max-width:100%!important;
}
/******* End: Allow Breadcrumb to be longer up to 100% *********/



/******* Start: Accessbility Adjustment ********/

:root{
--red-800: #c00004 !important;
--blue-800: #006aa2 !important;
}

/******* End: Accessbility Adjustment ********/