:root {
    --maincolor: #00245B;
    --secondcolor: #832459;
    --yellowcolor: #90801B;
    --lightgray: #CCC;
    --lighter: #F1f1f1;
    --graycolor: #999;
    --maingray: #535353;
    --errorbg: #F6F4E7;
    --errortext: #BA2424;
    --greencolor: #4AAA47;
}

header.site-header {
    background: white;
}

.content-signup,
.content-login {
    min-height: 400px;
}

.btn .fa {
    font-size: xx-large;
}

.rounded-right-top {
    border-radius: 0.4rem;
}

.box-card-item {
    border-radius: 0.4rem;
    border: 1px solid var(--lightgray);
    box-shadow: 0 1px 2px 0 #FFF, 0 1px 5px 0 #FFF;
}

.box-card-item:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

.btn-third {
    background: var(--maincolor);
    color: #FFF;
    border-radius: 10rem;
    position: relative;
    display: block;
}

.btn-third-disabled {
    background: var(--lightgray);
    color: #535353;
    border-radius: 10rem;
    margin-top: 1rem;
    position: relative;
    display: block;
}

.btn-third span {
    display: block;
    position: absolute;
    top: 10%;
}

.box-card-title a {
    color: var(--maincolor);
}

.box-card-desc {
    margin-bottom: 1rem;
    color: var(--graycolor);
}

.box-card-label {
    color: var(--maincolor);
}

.box-card-value {
    color: var(--maingray);
}

.box-card-file {
    color: var(--secondcolor);
}

.portfolio-card-title {
    font-size: 1.5rem;
}

.box-card-file a {
    color: var(--yellowcolor);
    text-decoration: underline;
}

.account-card-title a {
    font-weight: lighter;
    font-size: 1.7rem;
}

.account-card-desc {
    font-size: 1.2rem;
}

.account-card-label {
    font-weight: lighter;
    font-size: 0.9rem;
}

.account-card-value {
    font-size: 1.1rem;
    font-weight: bolder;
}

.sidebar-title {
    color: var(--maincolor);
    font-weight: normal;
    font-size: 1.3rem;
}

.sidebar-list-item {
    color: var(--graycolor);
    text-decoration: underline;
}

.sidebar-list li.active a {
    color: var(--secondcolor);
}

h3.content-title {
    color: var(--maincolor);
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.form-item {
    font-size: 1.1rem;
    color: var(--maingray);
    padding: 0 0 1.3rem;
}

.form-item span {
    display: block;
    color: var(--lightgray);
    font-size: 0.99rem;
}

.invalid-feedback:empty {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.invalid-feedback {
    background: var(--errorbg);
    color: var(--errortext);
    padding: 0.5rem 0 0.5rem 1rem;
    border-radius: 0.5rem;
    display: block;
}

.summary {
    color: var(--maingray);
    margin-bottom: 1rem;
}

.report-card-title {
    font-size: 1.3rem;
    font-weight: normal;
}

.fund-card-title {
    font-size: 1.5rem;
    font-weight: normal;
    margin-top: 0.5rem;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--maincolor);
    border-color: var(--maincolor);
}

.titles h4 {
    font-weight: lighter;
    color: var(--secondcolor);
    margin-bottom: 0;
}

.titles h2 {
    color: var(--maincolor);
    margin-top: 0;
    margin-bottom: 1rem;
}

.titles h3 {
    color: var(--maincolor);
    margin-top: 0;
    margin-bottom: 1rem;
}

.titles hr {
    display: block;
    margin-bottom: 2rem;
}

.btn-dropdown {
    background: none;
    border: none;
    font-size: 1.3rem;
    border: 1px solid var(--lightgray);
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

.dropdown-content {
    font-size: 0.8rem !important;
    font-weight: normal !important;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
    position: relative;
    display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #F1F1F1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border: 1px solid var(--lightgray);
    border-radius: 5px;
}


/* Links inside the dropdown */

.dropdown-content a {
    color: var(--maincolor);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover,
.dropdown-content a.selected {
    background-color: var(--yellowcolor);
    color: #FFF;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
    display: block;
}

.fund-card-item {
    padding-bottom: 0 !important;
}

.box-card-margin {
    margin-bottom: 1rem;
}

.box-card-highlight {
    background: var(--lighter);
    padding: 0.7rem 0;
}

.box-card-highlight th {
    font-weight: lighter;
    font-size: 0.8rem;
}

td.fund-up,
td.fund-down {
    color: var(--maincolor);
}

td.fund-up i {
    color: var(--greencolor);
}

td.fund-down i {
    color: var(--secondcolor);
}

.fund-label {
    font-size: 0.8rem;
    color: var(--lightgray);
}

.fund-value {
    color: var(--maincolor);
}

.section-title {
    color: var(--secondcolor);
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    font-weight: lighter;
}

table.fund {
    margin-bottom: 1rem;
}

table.fund th {
    border-bottom: 1px solid var(--lighter);
    padding: 1rem 0;
}

table.fund td {
    padding: 0.5rem 0;
}

select.custom-select {
    line-height: inherit;
}

#calculator-result {
    border-top: 1px solid var(--lighter);
    border-bottom: 1px solid var(--lighter);
}

.form-error {
    border-top: 1px solid var(--secondcolor);
}

.form-error .text-error {
    color: var(--secondcolor);
    font-size: 0.8rem;
    display: block !important;
}

.prepend {
    position: relative;
}

.prepend span {
    color: var(--lightgray);
    position: absolute;
    top: 30%;
    font-size: 0.9rem;
}

.portfolio-card-bottom .box-card-label {
    margin-bottom: 0;
}

.portfolio-status-4,
.portfolio-status-2 {
    opacity: 0.5;
}

.btn-bordered {
    border-radius: 20px;
    border: 1px solid var(--maincolor);
    color: var(--maincolor);
}

.btn-bordered:hover {
    background: var(--lighter);
    border: 1px solid var(--secondcolor);
}

.portfolio-create-item h4 {
    font-size: 1.3rem;
    color: var(--maincolor);
}

.form-control::-webkit-input-placeholder {
    /* Edge */
    color: #cdd0d2;
}

.form-control:-ms-input-placeholder {
    /* Internet Explorer */
    color: #cdd0d2;
}

.form-control::placeholder {
    color: #cdd0d2;
}

.terms-conditions {
    border: 1px solid var(--lighter);
    padding: 1.3rem;
    overflow: auto;
    height: 30rem;
    border-radius: 0.5rem;
}

p#camera-guides {
    background-color: var(--maincolor);
    opacity: 50%;
    color: #FFF;
    padding: 7px 0;
    font-weight: 400;
}

.box-group h5 {
    color: var(--maincolor);
}

.status-icon i {
    font-size: 7rem !important;
    margin-bottom: 1rem;
}

.status-title {
    color: var(--maincolor);
}

.status-desc {
    color: var(--maingray);
}

.success {
    color: var(--greencolor);
}

.failed {
    color: var(--secondcolor);
}

.warning i {
    color: var(--yellowcolor);
}

.status-title {
    font-weight: lighter;
}

.portfolio-transaction-name {
    font-weight: bold;
    font-size: 1.3rem;
    color: var(--maincolor);
}

.portfolio-amount {
    font-size: 1.2rem;
}

.portfolio-amount-deposit {
    color: var(--greencolor);
}

.portfolio-amount-withdraw {
    color: var(--secondcolor);
}

.available-cash h3 {
    font-size: 1.3rem;
    color: var(--maincolor);
    font-weight: lighter;
}

.available-cash ul {
    margin: 0;
    padding: 0;
}

.available-cash li {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.box-bordered {
    border: 1px solid var(--secondcolor);
    margin-bottom: 1.5rem;
    padding: 1rem 0 1.75rem;
    border-radius: 0.5rem;
}

.box-bordered:hover {
    background-color: var(--lighter);
    border: 1px solid var(--yellowcolor);
}

.box-bordered-leading {
    padding-top: 0.8rem;
}

.box-bordered-trailing {
    padding-top: 0.8rem;
}

.box-bordered-trailing-center {
    padding-top: 1.3rem;
    text-align: center;
}

.box-title {
    font-size: 1.4rem;
    margin: 0 !important;
    /* line-height: 0.5rem; */
    font-weight: normal;
    color: var(--maincolor);
}

.box-desc {
    font-size: 1.1rem;
    margin: 0;
    color: var(--maingray);
}

.text-90 {
    font-size: 90%;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    color: var(--secondcolor);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' 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='currentColor' stroke='none'/%3e%3c/svg%3e");
    background-size: 1.2rem 1.2rem;
}

.nav-tabgroup span.icon-capture {
    font-size: 3.1rem;
    cursor: pointer;
}

.nav-link.active {
    color: #832459;
}

div.custom-alert {
    border-radius: 0px;
    background-color: var(--secondcolor);
    color: #FFF;
    border-color: var(--secondcolor);
    padding: 0.65rem;
}

button.pos-abs-tr {
    top: 23px;
    right: 20px;
}
.hidden {
    display: none;
}
.form-control.error, .custom-file-input.error {
    border-color: #f71e3f;
    padding-right: calc(1.88em + 1.5rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23f71e3f' 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='%23f71e3f' stroke='none'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.47em + 0.375rem) center;
    background-size: calc(0.94em + 0.75rem) calc(0.94em + 0.75rem);
}
.detail-data, .detail-data p {
    font-size: smaller;
    margin-bottom: 0;
}
.additional-data, .additional-data p {
    margin-bottom: 0;
}
.card-body.detail-data {
    margin: 2px;
}
.parent.collapse.show {
    border-top: 2px solid rgb(131, 36, 89);
    border-bottom: 2px solid rgb(131, 36, 89);
}
h5 .sub-title {
    font-weight: 200;
}