/*Custom color scheme for my project */
/*:root {
    --main-bg: #f8f9fa;
    --main-primary: #3a6ea5;
    --main-secondary: #6c757d;
    --main-accent: #e9ecef;
    --main-text: #212529;
}*/

/* Custom color scheme 2 for my project */
:root {
    --main-bg: #FFF2E0;
    --main-primary: #898AC4;
    --main-secondary: #A2AADB;
    --main-accent: #C0C9EE;
    --main-text: #212529;
}

/* Force all navbar links and dropdown items to use the same dark color */
.navbar .nav-link,
.navbar .dropdown-item {
    color: #212529 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--main-primary) !important;
    background-color: transparent;
}



html {
    font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

/*body {
    margin-bottom: 60px;*/
    /*Custom color scheme for my project*/
    /*background-color: var(--main-bg);
    color: var(--main-text);
}*/
body {
    margin-bottom: 60px;
    background: linear-gradient(135deg, var(--main-bg) 0%, var(--main-accent) 50%, var(--main-primary) 100%);
    color: var(--main-text);
}

.carousel-cell {
    width: 70%;
    margin-right: 10px;
    background: linear-gradient(135deg, var(--main-bg) 0%, var(--main-accent) 50%, var(--main-primary) 100%);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}


/* Bootstrap color overrides */
.bg-primary {
    background-color: var(--main-primary) !important;
}

.bg-secondary {
    background-color: var(--main-secondary) !important;
}

.text-primary {
    color: var(--main-primary) !important;
}

.text-secondary {
    color: var(--main-secondary) !important;
}

.card {
    border-radius: 0.5rem;
    border: 1px solid var(--main-accent);
}

/*.card-header {
    font-weight: 600;
    letter-spacing: 0.5px;
}*/

.card-header {
    background: linear-gradient(90deg, var(--main-accent), var(--main-secondary));
    font-weight: 600;
    letter-spacing: 0.5px;
}


/* Custom button color */
/*.btn-primary {
    background-color: var(--main-primary);
    border-color: var(--main-primary);
}*/
.btn-primary {
    background: linear-gradient(90deg, var(--main-primary) 60%, var(--main-secondary) 100%);
    border-color: var(--main-primary);
}

.btn-gradient {
    background: linear-gradient(90deg, var(--main-primary), var(--main-secondary));
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 8px rgba(137,138,196,0.10);
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-gradient:hover, .btn-gradient:focus {
    background: linear-gradient(90deg, var(--main-secondary), var(--main-primary));
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(137,138,196,0.18);
}



.btn-primary:hover, .btn-primary:focus {
    background-color: #29527a;
    border-color: #29527a;
}

.btn-secondary {
    background-color: var(--main-secondary);
    border-color: var(--main-secondary);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #565e64;
    border-color: #565e64;
}

.e-btn {
    color: white;
}

/* Custom style for Syncfusion Toast in Loans */
#loanToast .e-toast-message {
    background-color: lightblue;
    color: #fff;
}

#loanToast .e-toast {
    border-left: 5px solid #218838;
}

/* custom style for Divisor in the loans index between the table and the calender */
.separator-text {
    font-weight: 600;
    color: #007bff;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* Custom style for the carousel images */
.carousel-img {
    max-height: 160px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    display: block;
}