/* Global */

html, body {
   height: 100%;
   overflow: auto;
}

body {
   margin-bottom: 60px;
   font-size: 16px;
   font-family: "Fredoka", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-variation-settings: "wdth" 100;
   background-image: url('/images/bg2.jpg');
   background-blend-mode: color-burn;
   background-color: #bbe3ef;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   box-shadow: inset rgb(38 104 107 / 66%) -2px -1px 20px 4px;
}

nav .dropdown-item {
   background-color: #bdecff;
}

div#dashWrapper {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 2px;
   padding-right: 2px;
}

div#dashWrapper nav {
   box-shadow: rgb(98 141 141) 20px -4px 20px 6px;
}

div#dashWrapper ul.list-group {
   -webkit-box-shadow: 2px -1px 7px 0px rgba(0,0,0,0.55);
   box-shadow: 1px -2px 16px 4px rgb(0 0 0 / 17%);
   border-top-left-radius: 7px;
   border-top-right-radius: 7px;
}

div#dashWrapper .list-group-header {
   background-color: #007ea7 !important;
   color: #d7fbff !important;
   font-weight: 400;
}
div#dashWrapper .list-group-header, div#dashWrapper .list-group-item {
   padding-top: 4px !important;
   padding-bottom: 4px !important;
}

div#dashWrapper .list-group-item {
   color: #12556b;
   background-color: #d5fbff96;
   border: none;
}

div#dashWrapper .text-bg-primary {
   color: #cffaff;
   font-weight: 100;
   background-color: #020d144a !important;
}

@media (max-width: 575px) {
   div#dashWrapper .list-group {
      font-size: 11px;
   }
}

@media (min-width: 576px) {
   div#dashWrapper .list-group {
      font-size: 12px;
   }
}

@media (min-width: 767px) {
   div#dashWrapper .list-group {
      font-size: 13px;
   }
}

@media (min-width: 991px) {
   div#dashWrapper .list-group {
      font-size: 13px;
   }
}

@media (min-width: 1199px) {
   div#dashWrapper .list-group {
      font-size: 14px;
   }
}

@media (min-width: 1399px) {
   div#dashWrapper .list-group {
      font-size: 15px;
   }
}


div {
   z-index: 0;
}

nav {
   z-index: 1;
}

li .dropdown-menu {
   border: 3px solid #007ea7;
   box-shadow: rgb(0 0 0 / 76%) 2px 0px 10px 0px;
}

.dropdown-menu, .dropdown-item {
   background-color: #bdecff;
}

.dropdown-menu .dropdown-item:hover {
   background-color: #007ea7;
   color: white !important;
}

.badge {
   font-size: 0.80em;
}

.center {
   text-align: center;
}

.f-10 {
   font-size: 10px;
}

.f-11 {
   font-size: 11px;
}

body h2 {
   color: #cffaff;
   text-shadow: 1px 0px 4px #00dfff30;
}

.border-bottom {
   border-bottom: 1px solid #007ea7 !important;
}

.bg-white {
   --bs-bg-opacity: 0;
}

nav.navbar {
   background: url(/images/rie9.jpg);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
   backdrop-filter: hue-rotate(26deg);
   background-image: linear-gradient(to right, #f1faff, #75efff6b);
}

/* Menu */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
   max-width: 1035px;
   padding-left: 5px;
   padding-right: 5px;
   font-size: 18px;
}

div.navbar-collapse .navbar-light .navbar-nav .nav-link {
   color: black;
}

.navbar-light .navbar-nav .nav-link:hover {
   color: #008cba;
}

/* Form */
.form-control,
.form-select,
div.dt-container .dt-search input {
   border: 1px solid #008cba;
}

.form-check-input:checked {
   background-color: #008cba;
   border-color: #008cba;
}

.form-select:focus,
.form-control:focus {
   border-color: none;
   box-shadow: none;
}

button,
button.btn,
buttons-print {
   width: 140px;
   border-color: #008cba;
   background-color: #ffffff;
   font-size: 14px;
   font-weight: 400;
   color: black;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
   color: #fff;
   border-color: #008cba;
   background-color: #ffffff;
   box-shadow: none;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
   box-shadow: none;
   border-color: #008cba;
}

button.btn:hover,
button:hover {
   background-color: #008cba;
   color: #ffffff;
}

.errorValidationText {
   color: #ac0f2a;
   font-size: 11px;
}

/* Links */


/* Table */
th, td {
   font-weight: 400;
}

/* Data Table */
table {
   box-shadow: rgb(0 0 0 / 2%) 0px 13px 32px, rgb(0 0 0 / 17%) 0px 10px 12px;
}

table.dataTable thead th {
   font-weight: 500;
   font-size: 18px;
   text-align: left !important;
}

table.dataTable tbody td {
   font-weight: 400;
   font-size: 15px;
   text-align: left !important;
}

table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
   padding: 0 18px;
}

thead {
   background-color: #008cba;
   color: white;
}

table.dataTable tbody {
   background-color: #f1f1f1;
   color: #000000;
}
#caregivers tbody tr:hover,
#parents tbody tr:hover,
#children tbody tr:hover {
   background-color: #79afc0;
   color: white;
}

table.dataTable th, table.dataTable td {
   height: 40px;
}
table.dataTable td {
   cursor:pointer;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
   color: #3c3838;
   box-shadow: none;
}

.btn-check:focus + .btn-primary {
   color: #fff;
}

div.dt-container .dt-search input {
   background-color: #ffffff;
}

div.dt-container .dt-paging {
   background-color: #f8f8f8;
   color: #f8f8f8;
   background: none;
   border: none;
}

div.dt-container .dt-paging .dt-paging-button {
   border: none;
   border-radius: 2px;
   background: none;
   min-width: 0;
   padding: 0 3px;
}

.pagination .page-link {
   margin-right: .1em;
   margin-left: .1em;
   border-radius: 3px;
   width: 32px;
   border: none;
   background-color: #b1d6e2;
   color: #fff;
}

.page-item.active .page-link {
   color: #fff;
   background-color: #79afc0;
   border: none;
   box-shadow: none;
}

.page-item.disabled .page-link {
   color: #ffffff;
   background-color: #b1d6e2;
   border: none;
   box-shadow: none;
}

.page-link:hover {
   background-color: #008cba;
}

.page-link:focus {
   box-shadow: none;
}

.page-item .active .page-link:hover {
   background-color: #008cba;
}


div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
   color: #fff;
   border: none;
   box-shadow: none;
}

div.dt-container .dt-paging .dt-paging-button:active {
   outline: none;
   background-color: #000000;
   background: none;
   box-shadow: none;
}

div.dt-container .dt-paging .dt-paging-button:hover {
   color: white;
   border: none;
   background-color: none;
   background: none;
}

a.nav-link .text-dark {
   color: #e05555;
}

   a .nav-link .text-dark:hover {
      color: #8aff9d;
   }

body > header > nav > div > div > ul > li a {
   color: #000000 !important;
   background-color: none !important;
}

   body > header > nav > div > div > ul > li a:hover {
      color: #008cba !important;
      background-color: none !important;
   }

.dropdown-item {
   color: #000000;
   background-color: #ffffff;
}

a.dropdown-item:hover {
   color: #000000 !important;
}

.dropdown-item:active {
   color: #fff;
   background-color: #ffffff;
}

.dropdown-item:focus {
   background-color: #ffffff;
   color: #000000 !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
   border: 1px solid #008cba;
   box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
   border: 1px solid #008cba;
   box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection--single {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.child-choose-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.child-choose-container #select2-selectchildid-container > span,
.parent-choose-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.parent-choose-container #select2-selectparentid-container > span,
.caregiver-choose-container .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.caregiver-choose-container #select2-selectcaregiverid-container > span {
   color: #ffffff;
   box-shadow: none;
}
.select2-container--bootstrap-5 .select2-selection {
   border: 1px solid #008cba;
}

/* Child Page */
.rightLinks .list-group-item {
   display: flex;
   justify-content: left;
   padding-top: 8px;
   padding-bottom: 2px;
   border: none;
   background-color: none;
}

.rightLinks .list-group .list-group-item {
   padding-top: 0;
   padding-bottom: 0;
}

.list-group-item {
   display: flex;
   justify-content: space-between;
   padding-top: 8px;
   padding-bottom: 2px;
}

#rightContainer {
   margin-top: 17px;
}

.childSave {
   width: 67px;
   text-align: center !important;
   border-color: #008cba;
}

.childSave:hover {
   background-color: #008cba;
   color: white;
}

.child-choose-container {
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 5px;
   margin-top: -5px;
}

body > div > main > div.row.child-choose-container > div.col-6.child-choose > span > span.selection > span {
   background-color: #008cba;
   color: #ffffff;
}

.child-choose {
   padding-right: 7px;
   padding-left: 0px;
}

.card-header {
   padding: 0;
}

.card-header div.card-title {
   float: left;
   padding: 6px;
   margin-left: 8px;
   padding-bottom: 0;
}

.card-header div.card-add-btn {
   float: left;
   text-align: right;
   margin-left: -19px;
}

.list-group a {
   color: #000000;
   text-decoration: none;
}

.list-group a:hover {
   color: #008cba;
   text-decoration: underline;
}

.right {
   text-align: right;
}

#childForm {
   width: auto;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

#cForm label {
   margin-left: 20px;
}

#cForm .form-floating > .form-select,
#cForm .form-floating > .form-control {
   padding-left: 20px;
}

#uploadContainer {
   width: auto;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 15px;
}

#cImage {
   height: 150px;
   margin-top: 10px;
   border: 2px solid #526a72;
}

#cForm #cImageContainer {
   height: 256px;
   width: 100%;
   border: 1px solid #008cba;
   margin-top: 1px;
   padding: 0;
   padding-bottom: 8px;
}

#parentList {
   width: auto;
   border: 1px solid #008cba;
}

#caregiverList {
   width: auto;
   border: 1px solid #008cba;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.fade-in-image {
   opacity: 0;
   animation: fadeIn .5s ease-in-out forwards;
}

@media (max-width: 576px) {

   .child-choose {
      padding-right: 0 !important;
      padding-left: 0px !important;
      width: 100%;
   }
}

@keyframes fadeInForm {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

#cForm {
   animation: fadeInForm .5s ease-in-out forwards;
}

/* Immunizations Page */

#chart th tr, #chart thead, #chart tbody {
   background-color: #007ea7;
   color: #847878 !important;
}

#chart, #chart thead, #chart thead th {
   background-color: #007ea7;
   color: #ffffff;
   border-inline-width: 0;
   font-weight: 400;
   font-size: 14px;
}

#chart, #chart thead {
   border: 2px solid #007ea7;
   font-weight: 400;
}

#chart tbody {
   vertical-align: inherit;
   border: 1px solid #d8d8d8;
}

#chart tbody td {
   background-color: #f5fbfe;
}

.formRow {
   margin-left: auto;
   margin-right: auto;
}

#imzContainer {
   margin-top: 24px;
   margin-left: auto;
   margin-right: auto;
   width: 456px;
   padding: 10px;
   background-color: #e9e9e9;
   border: 1px solid #007ea7;
}

   #imzContainer .formHeader {
      font-size: 14px;
      margin-top: -5px;
      margin-bottom: 7px;
      color: #534d4d;
   }

#imzFrm button {
   width: 87px;
}

#imzFrm {
   padding: 0;
   width: auto;
}

#imzContainer input[type=text],
#imzContainer select,
#imzContainer button {
   margin-top: 4px;
   margin-bottom: 4px;
}

.childcard {
   margin-top: 30px;
   width: 977px;
   margin-left: auto;
   margin-right: auto;
   line-height: 10px;
   color: #717171;
   padding: 5px;
   height: 52px;
   font-size: 13px;
}

.childname {
   font-weight: 600;
   font-size: 16px;
}

div.imzrow .column {
   padding: 0;
   line-height: 19px;
}

div.imzrow .column th,
div.imzrow .column td {
   text-align: right;
   padding: 4px;
}

div.imzrow .column table {
   width: 118px;
   font-size: small;
   border-spacing: 0;
   background-color: #f5fbfe;
   border: 1px solid #007ea7;
}

div.imzrow .column th, thead {
   background-color: #007ea7;
   color: white;
}

.imzrow {
   display: flex;
   max-width: 977px;
   margin-left: auto;
   margin-right: auto;
   justify-content: start;
   flex-wrap: wrap;
}

.imzrow > * {
   width: 122px;
   margin-left: 0px;
   margin-top: 10px;
   margin-bottom: 2px;
   padding: 0px;
   font-size: small;
}


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

   #imzContainer {
      width: auto;
   }

   .imzrow {
      max-width: none;
      width: auto;
   }
}

@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

@media (max-width: 992px) {
   .navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
      font-size: 14px;
   }
}

@media (max-width: 726px) {
   .navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
      font-size: 12px;
   }
}

@media (max-width: 576px) {
   .navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
      font-size: 10px;
   }
}



/* Icons */
.bi-pencil-square:hover {
   color: #008cba;
}

.bi-heart-pulse-fill:hover {
   color: red;
}

.bi-heart-pulse-fill {
   padding-left: 2px;
   padding-right: 13px;
   margin-top: -3px;
}

.bi-person-fill-dash {
   margin-top: -7px;
   margin-right: -5px;
}

.bi-camera {
   padding-right: 12px;
   margin-left: 2px;
   margin-top: -4px;
}

.bi:hover {
   color: #008cba;
   cursor: pointer;
}



/* Date Picker */
.datepicker {
   padding: 3px;
   border: 1px solid #008cba;
}

.datepicker-dropdown.datepicker-orient-top:before {
   border-top: 7px solid #008cba;
}

div.datepicker table {
   border: 0 solid #008cba;
}

div.datepicker tbody,
div.datepicker thead tr,
div.datepicker table {
   background-color: #f0f0f0;
   color: #575555;
}

.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
   background: #ffffff;
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
   background: #ffffff;
   cursor: pointer;
}

.datepicker table tr td.new,
.datepicker table tr td.old {
   color: #a5b8bcb8;
}

   .datepicker table tr td.new:hover,
   .datepicker table tr td.old:hover {
      color: #575555;
   }

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
   background-color: #b4b6c4;
   background-image: none;
}

.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
   background: #ffffff;
}

.datepicker td, .datepicker th {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0;
   border-radius: 0px;
   border: none;
}

.datepicker td, .datepicker th {
   border: none;
}

#datepicker {
   width: 180px;
}

#datepicker > span:hover {
   cursor: pointer;
}

#numpad .btn-primary {
   padding: 40px;
   width: 159px;
   height: 120px;
   width: 200px;
   margin-top: 20px;
   color: #fff;
   background-color: #1c3963;
   border-color: #11223b;
   font-size: 32px;
}

#numpad [type=button]:not(:disabled),
#numpad [type=reset]:not(:disabled),
#numpad [type=submit]:not(:disabled),
#numpad button:not(:disabled) {
   cursor: pointer;
}

#numpad .btn:focus,
#numpad .btn:active:focus,
#numpad .btn-link.nav-link:focus,
#numpad .form-control:focus,
#numpad .form-check-input:focus {
   box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #008cba;
}

#numpad primary:active,
#numpad .show > .btn-primary.dropdown-toggle,
#numpad .btn:focus,
#numpad .btn:active:focus,
#numpad .btn-link.nav-link:focus,
#numpad .form-control:focus,
#numpad .form-check-input:focus,
#numpad .btn-primary:hover {
   color: #fff;
   background-color: #1c3963;
   border-color: #11223b;
}

#numpad {
   width: 655px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

body #numpad {
   background-color: white;
   font-family: sans-serif;
}

#numpad .btn-primary {
   padding: 32px;
   width: 159px;
   height: 110px;
   width: 184px;
   margin-top: 20px;
   color: #fff;
   background-color: #1c3963;
   border-color: #11223b;
   font-size: 32px;
}

#numpad primary:active,
#numpad .show > #numpad .btn-primary.dropdown-toggle,
#numpad .btn:focus,
#numpad .btn:active:focus,
#numpad .btn-link.nav-link:focus,
#numpad .form-control:focus,
#numpad .form-check-input:focus,
#numpad .btn-primary:hover {
   color: #fff;
   background-color: #1c3963;
   border-color: #11223b;
}

#numpad .clear, #numpad .clear:hover, #numpad .clear:focus, #numpad .clear:active {
   background-color: #9b5f5f;
}

#numpad .enter, #numpad .enter:hover, #numpad .enter:focus, #numpad .enter:active {
   background: #639163;
}

#numpad #display {
   width: 656px;
   height: 110px;
   font-size: 40px;
   background-color: #70838f8f;
   color: #324663;
}

#numpad #display {
   width: 656px;
   height: 54px;
   margin-top: 10px;
   font-size: 30px;
   background-color: #cfe4f28f;
   color: #9dabc0;
}

#numpad #display::placeholder {
   color: #9dabc0;
}

#numpad img {
   height: 150px;
}

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

   #numpad #display {
      width: 402px;
      font-size: 23px;
   }

   #numpad .btn-primary {
      padding: 20px;
      height: 80px;
      width: 102px;
      font-size: 16px;
   }
   #numpad {
      width: 402px;
   }
}



#check-in > form div div .card-body {
   background-color: #eaeff1;
}

#check-in .card {
   border: 1px solid #008cba;
}

   #check-in .card .cImageContainer {
      background-repeat: no-repeat !important;
      background-position: center center !important;
      background-size: cover !important;
      height: 286px;
      margin-top: 7px;
      width: 100%;
   }

#check-in button {
   font-size: 21px;
}

#cForm .form-label {
   margin-left: 9px !important;
}

#cForm .emerg {
   margin-left: 17px !important;
}

#pForm label {
   margin-left: 17px !important;
}

   #pForm label.pin {
      margin-left: -3px !important;
   }

#parentForm #childrenList {
   width: auto;
   border: 1px solid #008cba;
}
#childrenList {
   margin-top: 0 !important;
}
#parentForm .list-group-item {
   display: flex;
   justify-content: space-between;
}
#parentForm .input-group {
   margin-top: 0 !important;
}
.card-header {
   margin-top: 0 !important;
}
#parentForm .rightLinks .list-group-item {
   display: flex;
   justify-content: left;
   padding-top: 8px;
   padding-bottom: 2px;
   border: none;
   background-color: none;
}

#parentForm .rightLinks .list-group .list-group-item {
   padding-top: 0;
   padding-bottom: 0;
}

#parentForm .card-header {
   padding: 0;
}

#parentForm .card-header div.card-title {
   float: left;
   padding: 6px;
   margin-left: 8px;
   padding-bottom: 0;
}

#parentForm .card-header div.card-add-btn {
   float: left;
   text-align: right;
   margin-left: -19px;
}

#parentForm .list-group a {
   color: black !important;
   text-decoration: none;
   margin-bottom: 5px;
}

#parentForm .list-group a:hover {
   color: #008cba !important;
   text-decoration: underline;
}

#parentForm {
   width: auto;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

#parentForm .input-group #togglePassword {
   border: 1px solid #008cba;
   border-left: none;
}

#parentForm .input-group {
   border: none;
}

#parentForm .input-group label {
   padding-left: 25px;
}

#pForm .form-floating > .form-select, #pForm .form-floating > .form-control {
   padding-left: 20px !important;
}

#parentForm .form-control, .form-select {
   padding-left: 20px !important;
}
#parentBtnCol {
   text-align: right;
}

#parentForm table {
   font-size: 14px;
}

.control {
   margin-top: 8px;
}

.parentSave {
   width: 67px;
   text-align: center !important;
   border-color: #008cba;
}

.parentSave:hover {
   background-color: #008cba;
   color: white;
}

.parent-choose-container {
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 5px;
   margin-top: -5px;
   margin-bottom: 8px;
}

.parent-choose {
   padding-right: 7px !important;
   padding-left: 0px !important;
}

@media (max-width: 576px) {
   .parent-choose {
      padding-right: 0 !important;
      padding-left: 0px !important;
      width: 100%;
   }
   .mainlogo{
      display:none;
   }
   .right {


   }
}

@keyframes fadeInForm {
   0% {
      opacity: 0; /* Start completely transparent */
}

   100% {
      opacity: 1; /* End fully opaque */
   }
}

#pForm {
   animation: fadeInForm .5s ease-in-out forwards; /* Apply the animation */
}

body > div > main > div.row.parent-choose-container > div > span > span.selection > span {
   background-color: #008cba;
   color: white;
}



/* CareGiver */

#cgForm label {
   margin-left: 17px !important;
}

#cgForm label.pin {
   margin-left: -3px !important;
}

#caregiverForm #childrenList {
   width: auto;
   border: 1px solid #008cba;
}

#caregiverForm .list-group-item {
   display: flex;
   justify-content: space-between;
}

#caregiverForm .rightLinks .list-group-item {
   display: flex;
   justify-content: left;
   padding-top: 8px;
   padding-bottom: 2px;
   border: none;
   background-color: none;
}

#caregiverForm .rightLinks .list-group .list-group-item {
   padding-top: 0;
   padding-bottom: 0;
}

#caregiverForm .card-header {
   padding: 0;
}

#caregiverForm .card-header div.card-title {
   float: left;
   padding: 6px;
   margin-left: 8px;
   padding-bottom: 0;
}

#caregiverForm .card-header div.card-add-btn {
   float: left;
   text-align: right;
   margin-left: -19px;
}

#caregiverForm .list-group a {
   color: black !important;
   text-decoration: none;
   margin-bottom: 5px;
}

#caregiverForm .list-group a:hover {
   color: #008cba !important;
   text-decoration: underline;
}

#caregiverForm {
   width: auto;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

#caregiverForm .input-group #togglePassword {
   border: 1px solid #008cba;
   border-left: none;
}

#caregiverForm .input-group {
   border: none;
}

#caregiverForm .input-group label {
   padding-left: 25px;
}

#cgForm .form-floating > .form-select, #cgForm .form-floating > .form-control {
   padding-left: 20px !important;
}

#caregiverForm .form-control, .form-select {
   padding-left: 20px !important;
}

#caregiverForm table {
   font-size: 14px;
}

.caregiverSave {
   width: 67px;
   text-align: center !important;
   border-color: #008cba;
}

.caregiverSave:hover {
   background-color: #008cba;
   color: white;
}

.caregiver-choose-container {
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 5px;
   margin-top: -5px;
   margin-bottom: 8px;
}

.caregiver-choose {
   padding-right: 7px !important;
   padding-left: 0px !important;
}

@media (max-width: 576px) {
   .caregiver-choose {
      padding-right: 0 !important;
      padding-left: 0px !important;
      width: 100%;
   }
}

@media (max-width:  767px) {

   #emergencyContactName {
      margin-top: -3px;
   }
   #emergencyContactPhone{
      margin-top: 4px;
   }
   .parentsMobile {
      width: 100%;
   }
   .saveBtnCol {
      width: 50%;
   }

}

@keyframes fadeInForm {
   0% {
      opacity: 0; /* Start completely transcaregiver */
   }

   100% {
      opacity: 1; /* End fully opaque */
   }
}

#cgForm {
   animation: fadeInForm .5s ease-in-out forwards; /* Apply the animation */
}

body > div > main > div.row.caregiver-choose-container > div > span > span.selection > span {
   background-color: #008cba;
   color: white;
}

#cImageContainerList {
   border-radius: 45px;
}

.nav-link {
   color: #5b7c87;
}

.nav-link:hover {
   color: #008cba;
}
hr {
   border: 1px solid #979090;
   width: 100%;
}
.list-group-item {
   background-color: none !important;
}