/*
    Styles loaded after FC's styles
*/


/* Get rid of the background color put in by the browser's
    password manager autofill. Because the color is white,
    it looks really odd with floating labels. 
    Googling different tricks to do but settled on 
 */
/*https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ */
/*https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete */
.login-box .user-box input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-white) !important;
    -webkit-background-clip: text;
    
    /* incase above doesn't disable with this transition */
    /*transition: background-color 9999s ease-in-out 0s;*/
}

.login-box .user-box input:invalid ~ label {
    top: -20px;
    left: 0;
    color: var(--color-login-input);
    font-size: 16px;
}

.login-page-validation-error span {
    margin-top: -30px;
    margin-bottom: 10px;
    display: block;
    color: var(--color-red);
}

/** landing page **/
.cta-icon-landing {
    font-size: 64px !important;
    margin-top: 12px;
    margin-left: 2em;
}

.addclients-icon-landing {
    color: var(--color-add-clients);
    cursor: pointer;
}


.viewclients-icon-landing {
    color: var(--color-view-clients);
    cursor: pointer;
}

.dashboard-icon-landing {
    color: var(--color-dashboard);
    cursor: pointer;
}


.addclients-icon-landing:active,
.viewclients-icon-landing:active,
.dashboard-icon-landing:active {
    color: var(--color-border);
    cursor: pointer;
}

.addclients-icon-landing:hover,
.viewclients-icon-landing:hover,
.dashboard-icon-landing:hover {
    color: var(--color-landing);
    cursor: pointer;
}

::placeholder {
    color: var(--color-gray-500) !important;
}

.formframe-header-text {
    font-size: 24px;
}

/* Make table headers bold */
.k-column-title {
    font-weight: 900;
}

/* Override the huge margins in the original CSS file */
.client-section-input-label {
    margin-top: 8px;
    margin-bottom: 2px;
}

/* Reduce whitespace */
.client-section-intake {
    padding-bottom: 25px;
}
.client-section-break {
    height: 25px;
}
.basic-upload-information {
    margin-top: 20px;
    padding-bottom: unset;
}

/* Make the sidebar stick with the page */
#sidebar-container {
    position: sticky;
    top: 0; /* Adjust this value to determine when the sidebar should stick */
    height: 100vh; /* Use viewport height units to fill the height of the viewport */
    overflow-y: auto; /* Allows the sidebar to have its own scroll if needed */
}

.card-body {
    background-color: var(--color-frame);
}

.footer {
    position: inherit;
}

.datatable-body {
    margin-bottom: 20px;
}

body.bg-light .client-section-input,
body.bg-light .client-section-intake-short-dark,
body.bg-light .client-section-input-mini {
    background-color: whitesmoke;
    color: unset;
}

body.bg-dark .client-section-input:focus,
body.bg-dark .client-section-intake-short-dark:focus,
body.bg-dark .client-section-input-mini:focus {
    background-color: var(--color-slate-blue);
    color: white;
    box-shadow: unset;
    border: 1px solid white;
}

select {
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.65rem;
}

/* On dark background make select boxes have down arrow that is whtie */
body.bg-dark select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ffffff" d="M2 0L0 2h4L2 0zm0 5L0 3h4l-2 2z"/></svg>');

}

/* On light background make select boxes have down arrow that is black */
body.bg-light select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23000000" d="M2 0L0 2h4L2 0zm0 5L0 3h4l-2 2z"/></svg>');
}