/* custom.css */
:root {
    --dark-blue: #293042;
    --pink: #AD519E;
    --pink-darker: #8f4282;
    --light-gray: #e9edf2;
}

.sidebar-brand svg {
    fill: #ad519e;
    height: 30px;
    margin-right: .15rem;
    width: 200px;
}

/* input field height */
.custom-height {
    height: calc(3.2rem + 2px) !important;
}

.custom-card-header-height{
    padding-top: 8px;
    padding-bottom: 8px;
}

.form-floating>.form-select {
    padding-bottom: 0;
}

/* Overriding input field focus width */
.form-control:focus {
    box-shadow: 0 0 0 .1rem rgba(13,110,253,.25)
}

.custom-checkbox-color .form-check-input:checked {
    background-color: #4bbf73;
    border-color: #4bbf73;
}

.custom-bg-pink {
    background-color: var(--pink);
    border-color: var(--pink);
}

.custom-bg-light-gray {
    background-color: var(--light-gray);
}

.btn-custom-pink {
    background-color: var(--pink);
    border-color:var(--pink);
}

.btn-custom-pink:hover {
    background-color: var(--pink-darker);
    border-color: var(--pink-darker);
}

.card-header .fa-chevron-down {
    transition: .2s transform ease-in-out;
    transform: rotate(180deg); /* Default position: down */
}
.card-header .collapsed .fa-chevron-down {
    transform: rotate(0deg); /* When collapsed: up */
}

.custom-dropdown-spacing::after {
    margin-left: 20px; /* Adjust the value for desired spacing */
}



/* solution for bootstrap 5 bug when floating label overlaps with content in textarea */
.custom-form-floating {
    position: relative;
}

.custom-form-floating:before {
    content: '';
    position: absolute;
    top: 1px; /* border-width (default by BS) */
    left: 1px; /* border-width (default by BS) */
    width: calc(100% - 20px); /* to show scrollbar */
    height: 24px;
    background-color: #ffffff;
}

/* Change background if the textarea is disabled */
.custom-form-floating:has(textarea:disabled):before {
    background-color: #e2e8ee; /* Bootstrap's disabled input background color */
}

.custom-form-floating textarea.form-control {
    padding-top: 32px; /* height of pseudo element */
    min-height: 80px; /* not relevant */
}