/* ===== InsurePay Brand Variables ===== */
:root {
    --ip-primary: #1E88E5;
    --ip-primary-hover: #1565C0;
    --ip-dark-teal: #001D37;
    --ip-green: #6FDA44;
    --ip-light-gray: #EDEDED;
    --ip-white: #FFFFFF;
    --ip-info: #0288D1;
    --ip-info-light: #E1F5FE;
}

html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ip-primary);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: var(--ip-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--ip-primary);
    border-color: var(--ip-primary);
}

.btn-primary:hover {
    background-color: var(--ip-primary-hover);
    border-color: var(--ip-primary-hover);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--ip-primary);
    border-color: var(--ip-primary);
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* ===== Footer ===== */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    background-color: var(--ip-light-gray);
    color: var(--ip-dark-teal);
    font-size: 0.875rem;
}

.footer a {
    color: var(--ip-primary);
}

/* ===== Navbar Brand ===== */
.navbar-brand-insurepay img {
    height: 36px;
    width: auto;
}

/* ===== Admin Dark Teal Navbar ===== */
.bg-teal {
    background-color: var(--ip-dark-teal) !important;
}

/* ===== QuickLogin Powered-By ===== */
.powered-by-insurepay {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.powered-by-insurepay img {
    height: 28px;
    width: auto;
}

/* Custom CSS, the above came "out of the box" */

#insurepay-logo, #carrier-logo {
    height:40px;
}

#insurepay-logo-container {
}

.dataTable {
    width: 100%;
}

.dataTable th {
    text-align: left !important;
}

.icon-action-container {
    width: 40px;
    text-align:center;
}

.icon-action-container a {
    width: 24px;
    display: block;
    margin:0 auto;
}

table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
    flex-direction: row !important;
}

.onboarding-container {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 24px;
    width: 1140px;
    height: 575px;
}

    .onboarding-container h1,
    .onboarding-container h2,
    .onboarding-container h3,
    .onboarding-container h4,
    .onboarding-container h5{
        text-align: center;
    }

    .onboarding-container h3,
    .onboarding-container h4,
    .onboarding-container h5 {
        color: var(--text-secondary, rgba(0, 0, 0, .6));
    }

.card-selection-container {
    width: 804px;
    margin: 0 auto;
}

.card-selection-container .card {
    width: 145px;
    height: 145px;
    display: inline-block;
    margin: 6px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

    .card-selection-container .card img {
        width: 100%;
        max-width: 100px;
        height: 70px;
        object-fit: contain;
    }
    .card-selection-container .card .card-body {
        display: grid;
        place-items: center;
        height:100%;
        width: 100%;
    }

    .card-selection-container .card.selected {
        border: 2px solid var(--ip-primary);
    }