.modal {
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.modal-backdrop.show {
    opacity: 0.4;
    width: 100%;
    z-index: 0;
}

.amount-detail {
    font-weight: bold;
    font-size: 25px !important;
    margin-left: 6px !important;
    margin-top: 15px;
}

div#wrapper_center {
    background: #000 !important;
    width: 5px;
}

#wrapper_2 {
    flex: 1;
    margin-left: 10px !important;
}

#reportrange {
    background: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #ccc;
    width: 100%
}

button {
    background-color: #000 !important;
    color: #ed1b24 !important;
    font-weight: bolder !important;
    font-size: 18px !important;
    border: 1px solid #ed1b24;
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: #ed1b24;
}

input[type=submit] {
    background-color: #000 !important;
    color: #ed1b24 !important;
    font-weight: bolder !important;
    font-size: 18px !important;
    font-weight: bolder !important;
    border: 1px solid #ed1b24;
}

.page-item.active .page-link {
    z-index: 3;
    color: #ed1b24;
    border: 1px solid #ed1b24;
    background-color: #000;
    border-color: #000;
}

button.btn-close {
    opacity: 1;
    background-color: white !important;
}

.page-link {
    color: #ed1b24 !important;
    border: 1px solid #ed1b24;
}

h5.card-heading {
    font-size: 22px;
    font-weight: bolder;
    background: #ed1b24;
    color: #fff;
}

h3.card-body-data {
    text-align: center !important;
    color: #ed1b24;
}

h3#debit {
    color: #0F88E7 !important;
}

h3#credit {
    color: #F15B06 !important;
}

h3#balance {
    color: #3D197B !important;
}

h5#debit {
    color: #0F88E7 !important;
}

h5#credit {
    color: #F15B06 !important;
}

h5#balance {
    color: #3D197B !important;
}

i.bx.bx-image {
    color: #000 !important;
}

.eye-icon:hover {
    cursor: pointer;
    color: red !important;
}

.eye-icon {
    cursor: pointer;
    color: red !important;
}

.eye-icon-page:hover {
    cursor: pointer;
    color: #000 !important;
}

.eye-icon-page i {
    cursor: pointer;
    color: #000 !important;
    font-size: 20px !important;
}

.card-heading-page {
    font-size: 20px;
    font-weight: bolder;
    color: #000;
}


/* Absolute Center Spinner */

.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


/* Transparent Overlay */

.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
    background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
}


/* :not(:required) hides these rules from IE9 and below */

.loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}


/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.graph {
    max-width: 97%;
}

canvas#myChart {
    height: 500px !important;
}

.image-container {
    position: relative;
    display: inline-block;
    /* To make the container only as wide as its content */
}

.cross-sign {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #000000;
    /* You can change the background color */
    color: white;
    /* You can change the text color */
    padding: 2px;
    border-radius: 50%;
    /* To make it circular */
    cursor: pointer;
}

img.lastOrNewUploaded {
    width: 100%;
    height: auto;
}