/* v GENERAL STYLE v */
:root {
    --main-blue: #2a3b54;
    /* --alt-blue: #17273e; */
    --alt-blue: #172b41;
    --alt-blue-filter: brightness(0) saturate(100%) invert(15%) sepia(39%) saturate(734%) hue-rotate(171deg) brightness(90%) contrast(97%);
    --lighter-blue: #446191;
    --highlight-blue: #2374f7;
    --highlight-blue-filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(2584%) hue-rotate(207deg) brightness(97%) contrast(98%);
    --light-highlight-blue: #0c97d6;
    --alt-light-highlight-blue: #488dfd;
    --alt-light-highlight-blue-filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(6407%) hue-rotate(200deg) brightness(102%) contrast(98%);
    --light-green: #c6edbc;
    --basic-red: #ff7d7d;
    --dark-red: #dc3546;
    --light-red: #ffc6c6;
    --red-filter: brightness(0) saturate(100%) invert(71%) sepia(38%) saturate(5493%) hue-rotate(316deg) brightness(112%) contrast(105%);
    --light-yellow: #fff0a0;
    --white-filter: brightness(0) saturate(100%) invert(97%) sepia(0%) saturate(7492%) hue-rotate(91deg) brightness(101%) contrast(105%);
    --main-grey: #6c7573;
    --main-grey-filter: brightness(0) saturate(100%) invert(46%) sepia(5%) saturate(441%) hue-rotate(116deg) brightness(95%) contrast(87%);
    --light-grey: #8e97ab;
    --light-grey-filter: brightness(0) saturate(100%) invert(69%) sepia(14%) saturate(379%) hue-rotate(183deg) brightness(85%) contrast(87%);
    --light-light-grey: #d5dae1;
    --off-white: #f5f7f9;
}

html {
    /* Font */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    color: black;
    /* Font */
}
/* ^ GENERAL STYLE ^ */


/* v MAIN CONTENT OF PAGE v */
/* #page-container {
    position: relative;
    min-height: 100vh;
}
#content-wrap {
    padding-bottom: 12rem; /* height of footer 
}
main {
    margin: 2.625rem 2rem 2rem 2rem;
} */

#page-container {
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

main {
    flex-grow: 1;

    padding: 2.625rem 2rem 2rem 2rem;
}
/* ^ MAIN CONTENT OF PAGE ^ */


/* v TITLE BAR v */
#title-bar img {
    cursor: pointer;
}
#title-bar #title-span {
    display: inline-block;
    margin: 0;
    line-height: 3rem;
    font-weight: 700;
    font-size: 1.5rem;
}
#title-bar .btn {
    font-size: 0.875rem;
}
/* ^ TITLE BAR ^ */


/* v STANDARD TABLE v */
.table-title {
    font-size: 1rem;

    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    text-align: left;
}

.standard-table {
    width: 100%; 
    text-align: left;

    border: 1px solid #d5dae1;
    border-radius: 0.375rem;
    border-collapse: separate;
    border-spacing: 0;

    font-weight: 500;
}
.standard-table th, .standard-table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
}
.standard-table thead tr th{
    color: white !important;
    background-color: #446191 !important; 
}
.standard-table thead tr:first-child th:first-child {
    border-top-left-radius: 0.375rem;
}
.standard-table thead tr:first-child th:last-child {
    border-top-right-radius: 0.375rem;
}
.standard-table tbody tr:not(.hidden):last-child td:first-child {
    border-bottom-left-radius: 0.375rem;
}
.standard-table tbody tr:not(.hidden):last-child td:last-child {
    border-bottom-right-radius: 0.375rem;
}
.standard-table tr.clickable-row {
    transition: all 0.2s ease-in-out;
}
.standard-table tr.clickable-row:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--highlight-blue);
}
.standard-input tr.hidden {
    border-width: 0;
}

/* ^ STANDARD TABLE ^ */


/* v STANDARD INPUT v */

.standard-input {
    height: 2.25rem;
    font-size: 0.875rem;
    
    border-radius: 0.375rem;
}
.standard-input::placeholder {
    font-size: 0.875rem;
    color: #999;
}

.input-addon {
    font-size: 0.875rem;
    border-color: var(--bs-border-color);
}
.input-addon img {
    filter: var(--main-grey-filter);
}

button.input-addon:hover {
    border-color: var(--light-highlight-blue);
    filter: var(--light-highlight-blue-filter);
    background-color: white;
}
button.input-addon:hover img {
    filter: var(--alt-light-highlight-blue-filter);
}

.form-label {
    font-size: 0.75rem;
    margin-bottom: 0.15rem
}

.input-group > button.btn.input-addon > img {
    height: 16px;
    width: 16px;
    vertical-align: sub;
}

/* ^ STANDARD INPUT ^ */


/* v HR SPACER v */
hr.basic-space {
    width: 100%;
}

hr.basic-line {
    width: 100%;
    border: 0.5px solid #d5dae1;
}
/* ^ HR SPACER ^ */


/* v BUTTON GROUP v */

.btn-group {
    height: 2.25rem;
}
.btn-group > .btn {
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* YES-NO BUTTON GROUP */
.btn-group.yes-no {
    width: 7.5rem;
}

/* ^ BUTTON GROUP ^ */

/* v BUTTON TOOLBAR v */

.btn-toolbar.min-max > .input-group {
    flex-basis: 45%;
}

/* ^ BUTTON TOOLBAR ^ */

/* v MIN MAX INPUT v */
.d-flex.min-max > .d-input {
    flex-basis: 45%;
}
.d-flex.min-max > .d-input:first-child {
    margin-left: 0;
    margin-right: auto;
}
.d-flex.min-max > .d-input:last-child {
    margin-left: auto;
    margin-right: 0;
}
.d-flex.min-max > img {
    flex-basis: 10%;
    flex-shrink: 1;
    width: 16px;
    height: 16px;
    margin: 5px auto;
}
/* ^ MIN MAX INPUT ^ */

.iframe-box {
    width: 100%;
    aspect-ratio: 1.3;
    
    border-radius: 0.375rem;
    border: 1px solid var(--light-light-grey);

    background-color: grey;

    overflow: hidden;
}
.iframe-box > iframe {
    width: 100%;
    height: 100%;
}

/* HIDING CLASSES */
.hidden-input {
    display: none;
}
.hidden {
    display: none !important;
}


/* Pill Styles for Different List Reasons */

.rounded-pill-violation {
    background-color: var(--dark-red);
}

.rounded-pill-taxes-owed {
    background-color: green;
}
.rounded-pill-taxes-sale {
    background-color: green;
}

.rounded-pill-foreclosure {
    background-color: orange;
}


/*****************************************/

button.line-btn {
    background-color: inherit;
    border-color: transparent;
    
    text-align: left;
    color: inherit;
    font-weight: 700;
}
button.line-btn:hover {
    background-color: inherit;
    border-color: transparent;

    color: var(--highlight-blue);
}
button.line-btn:hover > img {
    filter: var(--highlight-blue-filter);
}
button.line-btn:active {
    background-color: inherit !important;
    border-color: transparent !important;

    color: var(--highlight-blue) !important;
}
button.line-btn:active > img {
    filter: var(--highlight-blue-filter) !important;
}

/* FANCY SWITCH */
/* /////////////////////////////////////////// */
/* Fancy switch checkbox css from: https://codepen.io/AllThingsSmitty/pen/MmxxOz/ */
.switch {
    display: inline-block;
    height: 17px;
    position: relative;
    width: 30px;
}

.switch input {
    display:none;
}

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

.slider:before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 13px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 13px;
}

input:checked + .slider {
    background-color: #172b41;
}

input:checked + .slider:before {
    transform: translateX(13px);
}

.slider.round {
    border-radius: 17px;
}

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

/* End referenced code from: https://codepen.io/AllThingsSmitty/pen/MmxxOz/ 
    Halved the size of the switch and changed some colors. */