html, body {
    font-size: 14px !important;
    font-family: 'Roboto', sans-serif;
}

.hidden {
    display: none !important;
}

localelangmenu {
    width: 100%;
}

.topbar #localeLangSelect {
    border: 0;
    border-radius: 5px;
    padding: 0 12px !important;
    margin-top: 12px;
}

.topbar .form-group {
    margin: 0 !important;
}

/**
*** form wrapper with response
 */
.form-wrapper:not(.has-response) .form-container {
    display: block;
}

.form-wrapper:not(.has-response) .response-container {
    display: none;
}

.form-wrapper.has-response .form-container {
    display: none;
}

.form-wrapper.has-response .response-container {
    display: block;
}

form .alert.hidden {
    display: none;
}

.form-group {
    margin-bottom: 1rem;
}

.was-validated .form-control:valid {
    background-image: none;
    padding-right: 1rem;
}

.was-validated .is-invalid {
    border-color: #F64E60 !important;
    padding-right: initial;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F64E60' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F64E60' stroke='none'/%3e%3c/svg%3e") !important;
}

.was-validated .form-control:valid:not(.is-invalid) {
    border-color: #E4E6EF !important;
}

.form-group .is-valid {
    background-image: none !important;
}

.form-group.required label:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f069";
    font-size: 50%;
    color: #a94442;
    margin-right: 2px;
    vertical-align: super;
    float: left;
}

.form-group .pwstrength_viewport_progress {
    padding-top: 3px;
}

.pwstrength_viewport_progress .progress {
    min-height: 1.75rem !important;
}

.select2-container {
    width: 100% !important;
}

.select2-selection__rendered {
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
}

textarea.autosize {
    box-sizing: border-box;
    min-height: 64px;
    overflow-y: hidden;
    overflow-x: hidden; /* for Firefox (issue #5) */
}

.response-container {
    display: none;
}

input.full-account-number {
    text-transform: uppercase;
}

.font-weight-semi-bold {
    font-weight: 600;
}

.btn-popover {
    height: auto !important;
    text-align: inherit !important;
    padding: 0 !important;
}

.gauge-wrapper {
    min-width: 320px;
}

.account-summary .card {
    min-height: 220px;
    position: relative;
}

.account-summary .card .action-row {
    position: absolute;
    bottom: 10px;
}

.alert.alert-white {
    background-color: white;
}

table.transaction-table {
    width: 100%;
    color: inherit;
}

table.transaction-table td {
    padding: 3px 0;
}

table.transaction-table td.transaction-amount {
    text-align: right;
}

.text-small {
    font-size: small;
    font-weight: 100;
}

h3.development {
    text-align: center;
    color: #3d94fb;
}

h3.development:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f7d9";
    color: #3d94fb;
    margin-right: 2px;
}


/**
*** Payment styles
 */

.budget-payment-not-due {
    font-size: larger;
    color: #3d94fb;
}

.budget-payment-due {
    font-size: larger;
    color: #1dc9b7;
}

/**
*** Default Card settings
 */
.card.card-custom > .card-header .card-title, .card.card-custom > .card-header .card-title .card-label {
    color: #3d94fb;
}

.modal .modal-header .modal-title {
    color: #3d94fb;
}

/**
*** Vertical steps
 */

/* Steps */
.step {
    position: relative;
    min-height: 1em;
    color: gray;
}

.step + .step {
    margin-top: 1.5em
}

.step > div:first-child {
    position: static;
    height: 0;
}

.step > div:not(:first-child) {
    margin-left: 1.5em;
    padding-left: 1em;
}

.step.step-active .title {
    color: #3d94fb
}

.step.step-active .circle {
    background-color: #3d94fb;
}

.step.step-success .title {
    color: rgba(29, 201, 184, 1);
}

.step.step-success .circle {
    background-color: rgba(29, 201, 184, 1);
}

.step.step-error .title {
    color: #f32013;
}

.step.step-error .circle {
    background-color: #f32013;
}

.step:not(.step-active) .step-content-wrapper {
    display: none;
}

.step-content-wrapper {
    display: block;
}

/* Circle */
.step .circle {
    background: gray;
    position: relative;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 100%;
    text-align: center;
    box-shadow: 0 0 0 3px #fff;
}

.step .circle i {
    color: #fff;
}

.step .title {
    color: grey;
}

/* Vertical Line */
.stepper .step:before {
    content: ' ';
    position: absolute;
    display: block;
    top: 2em;
    left: 1.5em;
    height: 100%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.5);
}

.stepper .step:last-child:before {
    display: none;
}

/* Stepper Titles */
.step .title {
    font-size: 1rem;
    line-height: 3em;
    font-weight: bold;
    padding-left: 1em;
}

.step .caption {
    font-size: 0.8em;
}

.step .step-actions {
    margin-top: 2rem;
}

.form-control-disabled {
    background-color: #f7f8fa;
}

.alert-wrapper.alert-hidden {
    display: none;
}

.alert-wrapper {
    display: block;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    margin: 0;
}

.tooltip {
    opacity: 1 !important;
}

.tool-tip-img {
    width: 100%;
    height: auto;
}

.tooltip .tooltip-inner {
    max-width: 280px;
}

.modal-img {
    width: 100%;
}

.auth-sign-in-promo-text {
    color: #595d6e;
}

.modal .modal-content .modal-header .bootbox-close-button.close:before {
    content: '' !important;
}

legend {
    font-size: 1.25rem;
}

.img-inline {
    max-height: 1.25rem;
    width: auto;
    padding: 0 3px;
}

table.table-sm .btn-icon-sm, table.table-sm .btn-icon-sm i.fa {
    font-size: 12px;
    padding: 2px 4px;
}

/**
*** Custom Link effects
 */
a.middle {
    position: relative;
}

a.middle:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #3699FF;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.1s ease-in-out;
}

a.middle:hover:before {
    visibility: visible;
    transform: scaleX(1);
}

a.left {
    position: relative;
}

a.left:before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #3699FF;
    visibility: hidden;
    transition: all 0.1s ease-in-out;
}

a.left:hover:before {
    visibility: visible;
    width: 100%;
}

a.right {
    position: relative;
}

a.right:before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    right: 0;
    background-color: #3699FF;
    visibility: hidden;
    transition: all 0.1s ease-in-out;
}

a.right:hover:before {
    visibility: visible;
    width: 100%;
}

a.bottom {
    position: relative;
}

a.bottom:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    background-color: #3699FF;
    visibility: hidden;
    transition: all 0.1s ease-in-out;
}

a.bottom:hover:before {
    visibility: visible;
    height: 2px;
}

/*
** fix for datatable search input on mobile with added clear button
 */
div.dataTables_wrapper div.dataTables_filter input {
    width: 50%;
}

@media screen and (max-width: 767px) {
    .nav-tabs.flip-tabs > li {
        width: 100%;
    }
}

.dataTable td.control {
    width: 0;
}

.dataTable td.long-date {
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .dataTable td.long-date .time {
        display: none;
    }
}