/*******************************************
    TMP MORTGAGES CASE MANAGER
    VERSION 2.0
    DEVELOPED 06/11/2023

    JUSTIN KERCHER / APOLLO INTERNET MEDIA
*******************************************/


:root {
    --red: #870c0f;
    --bs-link-color: var(--red);
    --bs-link-hover-color: var(--black);
    --black: #000000;
    --lt-grey: rgb(128,128,128,0.05);
    --md-grey: #6c757d;
}

/*******************************************
    CONVENIENCE
*******************************************/
html, body { display: flex; flex-direction: column; min-height: 100vh; }
html { font-size: 14px; }

h1 { margin: 3rem 0; }

a{ color: var(--red); }
    a:hover { color: var(--black); }

    body[data-bs-theme="dark"] a:hover { color: #fff; }

label small { font-size: 0.75rem; }

th { vertical-align: middle; }

/*******************************************
    CLASSES
*******************************************/
.bg-lt-grey { background-color: var(--lt-grey); }

body[data-bs-theme="dark"] .img-wrap { filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1)) brightness(500%) }

/* Preloader */
.loader { position: relative; transition: all 0.5s ease-in; height: 300px; width: 100%; }
    .loader * { opacity: 0; }
    .loader:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0,.8); }
    .loader:after { content: url('../img/ajax-loader.png'); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


/* Upload area */
.files-container { width: 100%; }
.upload { position: relative; display: block; border: 1px dashed var(--md-grey); background-color:var(--lt-grey); padding: 3em; margin: 1em auto; border-radius: 4px; }
.upload label {  }
.upload:hover { background-color: #86b7fe;}
.upload input { position: absolute; opacity: 0;top: 0; left: 0; width: 100%; height: 100%; z-index: 1; padding: 0; }

 .filenames { list-style: none; padding: 0px; margin-left:-0.5rem; margin-right: -0.5rem; margin-top: 1rem; }
    .filenames .file { margin: 0.5rem; border: solid 1px var(--md-grey); padding: 0.5rem 0.5rem 0.5rem 3rem; border-radius: 4px; position: relative; }     
    .filenames li a { text-decoration: none !important; display: block; }

    .file { padding-left: 3rem; position: relative; }
        .file:before { position: absolute;top: 50%; left: 15px; transform: translateY(-50%); content: '\f057'; color: red; font-family:var(--fa-style-family,"Font Awesome 6 Free"); -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased; margin-right:5px;
                         display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto font-weight:var(--fa-style,900);  }

     .file[data-ext="pdf" i]:before { content: "\f1c1"; color: green; }
     .file[data-ext="doc" i]:before,.filenames li[data-ext="docx" i]:before  { content: "\f1c2"; color: green; } 

.alerts { position: fixed; bottom: 3rem; right: 3rem; max-width: 600px; z-index: 1000; animation: slide-in 1s ease-in-out forwards; }
    .alerts .alert { box-shadow: 0px 0px 10px rgba(0,0,0,0.2); }
.alerts:empty { display: none; }

.uploaded-file { border: solid 1px var(--lt-grey); background-color: var(--lt-grey); }

/* Hide until in view */
tr, h1, h2, h3, h4, p  { opacity: 0; }

.come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards; opacity: 0; }
.come-in:nth-child(odd) { animation-duration: 0.6s; }

/* Stat box */
.box { border: solid 1px var(--lt-grey); background-color: var(--lt-grey); display: flex; flex-direction: row; align-items: center; text-decoration: none !important; }
    .box i { font-size: 6rem !important; margin-right: 3rem; color: var(--red); }
    .box .content { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .box .content .title { font-size: 5rem; margin: 0px; }

    .box, .box i, .box p { transition: all 0.5s ease-in-out; }
    .box:hover i { transform: scale(1.2); }
    


/*******************************************
    ELEMENTS
*******************************************/
#site-wrap { flex: 1 1 auto; }

#site-header { }
#site-header #site-logo { max-width: 150px; background-color: #fff; padding: 0.5rem; border-radius: 14px; }
#site-content {  }

#site-footer { flex-shrink: 0; }

/*******************************************
    OVERRIDES
*******************************************/
.table-responsive { overflow-y: hidden; }
.form-group { margin: 1rem 0; }
.card-title { background: var(--lt-grey); margin:-1rem; margin-bottom: 1rem; padding: 1rem 1rem; font-size: inherit; }

.btn-primary { background-color: var(--red); border-color: var(--red); }
    .btn-primary:hover { background-color: var(--black); border-color: var(--black); }

.input-validation-error { border-color: var(--red); background-color: rgba(255,0,0,0.05); color: var(--red); }

.table th { background-color: var(--md-grey); color: #fff; padding: 0.5rem; font-weight: normal; }
.table th a { position: relative; display: block; text-decoration: none !important; display: flex; align-items: center; 
              line-height: 1rem; padding: 1rem 0; color: #fff;  }
    .table th a:before { font-family:var(--fa-style-family,"Font Awesome 6 Free"); -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased; margin-right:5px;
                         display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto font-weight:var(--fa-style,900); 
                         content: "\f0dc"; font-size: 10px; font-weight: 900;  }

.pagination-container .pagination { justify-content: end; }
    .page-item.active .page-link { background-color: #5c636a; border-color: #5c636a; }

.navbar-nav .fa-solid { color: var(--red); }
.navbar a { color: inherit !important; }
    .navbar a:hover { color: var(--red) !important; }

    textarea {
        resize: none;
    }
input[readonly], textarea[readonly], select[readonly] { border: 0px none; padding-left: 0; padding-right: 0; }

.nav-pills { --bs-nav-pills-link-active-bg: var(--red); }

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


@keyframes slide-in { 
    from { 
        transform: translateY(500px);
    }
    to {
        transform: none; 
    }
}

/*************************************
	KEYFRAMES
*************************************/
/* come in from bottom */
@keyframes come-in-bottom {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* slide in hidden layers */
@keyframes come-in {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}