@font-face {
    font-family: Gadugi;
    src: url(../fonts/gadugi.ttf);
}

* {
    font-family: Gadugi, 'Roboto Condensed', sans-serif;
}

.card-body a {
    text-decoration: none !important;
    color: inherit !important;
}

body {   
    padding-bottom: 20px;
}

h1, h2, h3, h4, h5 {
    display: inline-block;
    font-family: 'Verdana, Geneva, sans-serif';
}

label {
    font-size: 12px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

table.compressed-table {
    font-size: 12px;
}

    table.compressed-table td {
        padding: 0;
        padding-right: 2px;
        padding-left: 2px;
    }

    table.compressed-table th {
        padding: 0.1rem;
    }

.balance-col {
    width: 10%;
}

.debit {
    background-color: rgba(255,0,0,0.4);
}

.credit {
    background-color: rgba(0,255,0,0.4);
}

.debittext {
    color: rgba(255,0,0,0.9);
}

.credittext {
    color: rgba(6,212,6,0.9);
}

.box {
    padding: 5px;
    border: solid black 1px;
    border-radius: 3px;
    background-color: white;
    z-index: 1000;
    box-shadow: 0 0 5px;
}

.centertext {
    text-align: center;
}

.centercelltext td {
    text-align: center;
}

.centercelltext tr {
    text-align: center;
}

.center {
    width: 50%;
    margin: 0 auto;
}

.assign-category-warning {
    font-weight: bold;
    color: black;
}

.selected {
    background-color: slategrey !important;
}

.transaction-row:hover {
    background-color: rgba(128, 128, 128, 0.5) !important;
}

.hover-greybold:hover {
    font-weight: bold;
    background-color: rgba(128, 128, 128, 0.5) !important;
    cursor: pointer;
}

.severity-low {
    font-weight: bold;
    color: rgb(215, 217, 1)
}

.severity-medium {
    font-weight: bold;
    color: darkorange;
}

.severity-high {
    font-weight: bold;
    color: orangered;
}

.severity-critical {
    font-weight: bolder;
    background-color: red;
}

.bg-severity-critical {
    font-weight: bolder;
    background-color: red;
}

.bg-severity-low {
    font-weight: 100;
}

.bg-severity-medium {
    font-weight: 100;
    color: darkorange;
}

.bg-severity-high {
    font-weight: bold;
    color: orangered;
}

.title-text {
    font-size: larger;
    font-weight: bold;
}

.grey-tablebg {
    background-color: lightgrey
}

.grey-tablehover tr:hover {
    background-color: lightgrey;
    cursor: pointer;
}

.warningPanel {
    position: fixed;
    bottom: -2px;
    left: -2px;
    z-index: 1000;
    font-size: small;
}

.notificationPanel {
    position: fixed;
    bottom: -2px;
    right: -2px;
    z-index: 1000;
    font-size: small;
}

#notificationButton {
    z-index: 1000;
}

.dismissNotification, .dismissWarning {
    color: red;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: -10px;
}

.category-row,
.transaction-row,
.cursor-pointer {
    cursor: pointer;
}

#warningList li, #notificationList li {
    border-bottom: 1px solid lightgrey;
}

.color-tester-box {
    margin-top: 5px;
    width: 100px;
    height: 30px;
}

.inputError {
    border: dashed red 2px;
}

.desc-col {
    text-align: left !important;
}

.wrap-headers th {
    white-space: normal;
}

.header-text {
    font-size: 30px
}

.navbar-nav .nav-link {
    white-space: nowrap;
}

.filterIcon {
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

    .filterIcon.inactive {
        background-image: url(../images/TableControls/filter_inactive.png);
    }

    .filterIcon.active {
        background-image: url(../images/TableControls/filter_active.png);
    }

.iconSorting {
    margin-left: 10px;
    padding-left: 6px;
    padding-right: 6px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

    .iconSorting.unsorted {
        background-image: url(../images/TableControls/unsorted.png);
    }

    .iconSorting.ascending {
        background-image: url(../images/TableControls/sortup.png);
    }

    .iconSorting.descending {
        background-image: url(../images/TableControls/sortdown.png);
    }

.alignRight {
    float: right;
}

.showAllRecords {
    cursor: pointer;
    color: #17AE26;
}

.btn,
.form-control {
    font-size: small;
}

.field-validation-valid {
    font-size: small;
    font-weight: bold;
}

.dismiss-cross {
    font-size: 18px;
    font-weight: bold;
}

.tooltip-button {
    background-color: white;
    border: 2px solid grey;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    margin-left: 0.25em;
    margin-bottom: 0.25em;
}

    .tooltip-button.sticky {
        background-color: lightgrey;
        font-weight: bolder;
    }

    .tooltip-button:hover {
        background-color: darkgrey;
        font-weight: bolder;
    }

    .tooltip-button:focus {
        outline: none;
    }

.tooltip-text, .tooltip-text:hover {
    position: absolute;
    font-weight: normal;
    border: 1px grey solid;
    background-color: white;
    border-radius: 0.5em;
    padding: 0.5em;
    z-index: 99998;
    width: 100%;
    max-width: 25em;
    white-space: normal;
}

.disposable-balance-link:hover {
    font-weight: bolder;
}

.hyperlink-row, .clearBtn {
    cursor: pointer;
}

.clearBtn {
    position: absolute;
    top: 2px;
    right: 8px;
}

.smallTableText, .smallTableText label {
    font-size: 11px;
}

#amountPercentagePreview {
    font-size: small;
}

.btn-outline-danger, .btn-outline-info {
    background-color: white !important;
}

.bank-account-box {
    background: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px black solid;
    height: 5rem;
    margin-bottom: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 0 0 5px;
}

.text-size-xsm {
    font-size:10px;
}

.text-size-sm {
    font-size: 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    margin-bottom: 5px !important;
}

.nav-item {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.navbar {
    background-color: rgb(234, 234, 234);
}

.banner {
    position: relative;
    z-index: 100;
    background-color: rgba(164, 194, 158, 0.8);
    height: 5em;
    width: 100%;
}

.background {
    opacity: 0.4;
    position: relative;
    margin-top: -5em;
    height: 25em;
    width: 100%;
    background-image: url(../images/background.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    z-index: -1000;
    margin-bottom: 10px;
}

.bys-title {
    height: 100px;
    color: rgb(87, 87, 87);
    font-size: 40px;
    line-height: 100px;
    white-space: nowrap;
    letter-spacing: 10px;
}

.vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.search-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 14px;
}

.wrapper {
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    display: flex;
    min-width: 100px;
}

.search {
    border: 1px solid grey;
    border-radius: 5px;
    width: 100%;
    padding: 2px 20px 2px 25px;
    outline: 0;
    background-color: aliceblue;
}

.field-validation-error {
    font-weight: bold;
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.6;
    }
}

.category-circle {
    border-radius: 100%;
    width: 10px;
    height: 10px;
    margin-top: 3px;
    display: inline-block
}

.bys-btn-primary {
    background-color: rgb(164, 194, 158);
    border-color: rgb(164, 194, 158);
    color: #fff;
}

.inline-dropdown {
    display: inline-block !important;
    padding: 0 !important;
    height:auto !important;
    font-size:12px !important;
    min-width: 6rem;
    max-width: 8rem;
    margin: 0 auto;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align:center;
}

.text-alert {
    color: darkorange;
}

.card:hover {
    transform: scale(1.03);
    transition: transform .2s;
}