html {
  font-size: 13px;
}

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

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

body {
  margin-bottom: 60px;
}

.font1_1 {
    font-size: 1.1rem;
}

.font1_2 {
    font-size:1.2rem;
}

.font1_3 {
    font-size: 1.3rem;
}

.font1_4 {
    font-size: 1.4rem;
}

.font1_5 {
    font-size: 1.5rem;
}

.envelopeDD {
    max-width: 18em;
}

.amountTB {
    max-width: 5em;
}

.announcement {
    background-color: greenyellow;
    width:100%;
    padding-left: 5px;
}

.announcement-danger {
    background-color: #b23b46;
    color:white;
    width: 100%;
    padding-left: 5px;
}
    .announcement-danger a {
        color: #e5ff00
    }


/* A grouping together of multiple elements (within a div) all on a row, but each div moves its elements together to the next row when page shrinks.
    This is used primarily on the Transaction page to put the Category label/dropdown on the same line as the CreditCard label/dropdown and have the pairs stay together when shrunk.
  Usage:  
    - Create an outer div with this class
    - Directly under that put divs that each contain elements that need to stay together horizontally
*/
.nColumnDivGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
}
    .nColumnDivGroup > div {
        display: grid;
        grid-auto-flow: column;
    }

.form > div {
    margin-bottom: 8px;
}

.content{
    padding: 1rem;
}

.blueOutline {
    border: 3px solid blue;
}

.form-group select {
    margin-top: .5rem;
}

/* Used for Reconciler tables, for showing a row to be deleted (or to be ignored)*/
.ignoreRow td {
    text-decoration-line: line-through;
    color: lightgray;
}

.deleteRow td {
    text-decoration-line: line-through;
    color: lightgray;
}

.highlightRow td {
    background-color: lightgray;
}

/* Used for reconciler:  For highlighting amounts that are different */
.highlightDiff {
    color: blue;
}

.highlightDiff2 {
    color: blue;
    background: pink;
}

.outLineTable table {
    border: 1px solid black;
}
    .outLineTable thead {
        background-color: #f2f2f2;
    }
    .outLineTable th, .outLineTable td {
        border: 1px solid black;
        padding:0.12rem;
    }

.selectRow {
    background-color: lightblue;
}

.spaceOutHeaders h3, .spaceOutHeaders h4, .spaceOutHeaders h5 {
    margin-top: 1.2rem;
}

.noOverlowCell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.clamp-2 {
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
}

.clamp-3 {
    line-clamp: 3 !important;
    -webkit-line-clamp: 3 !important;
}

/*TABS==========================================*/
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #ddd;
}
    /* Style the a links */
    .tab a {
        background-color: inherit;
        float: left;
        border: 1px solid #999;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab a:hover {
            background-color: #aaa;
        }

        /* Create an active/current tablink class */
        .tab a.active {
            background-color: white;
            text-decoration: none;
            color: black;
            cursor: default;
        }

/* Style the tab content */
.tabcontent {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}