﻿html {
    min-height: 100%;
    position: relative;background-color:#f8f9fa
}
body {
    margin-bottom: 60px;
    background-color: #f8f9fa;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h2 {font-size:24px;margin-bottom:5px !important}

a:link {color:#01343d}
a:visited{color:#01343d}
a:hover{color:#e8a24c;text-decoration:none}

#save-alert-holder {margin-top:-80px;position:fixed;left:50%;transform: translate(-50%, 0);z-index:20000;padding:5px 0px;font-weight:bold;text-transform:uppercase;text-align:center;}
#save-alert-holder.visible {margin-top:0px}
.saving-alert {background-color:#e8a24c;color:#fff;width:150px}
.saved-alert {background-color:#10b981;color:#fff;width:100px}
.save-error-alert {background-color:#ef4444;color:#fff;width:200px}

.datepicker table tr td.today {background-image:none !important;background-color:#fff0e0 !important;color:#000 !important}
.datepicker table tr td.active {background-image:none !important;background-color:#01343d !important}
.datepicker td {width:36px;height:26px;font-size:13px}
.datepicker td, .datepicker th {width:36px;}

.bg-dashboard:hover {background-color: #01343d;}
.bg-assignments:hover {background-color:#e8a24c}
.bg-candidates:hover {background-color: #10b981}
.bg-clients:hover {background-color: #ef4444}
.bg-settings:hover {background-color: #6c757d}

#milestone-container {position:sticky;top:70px}
#assignment-summary,.candidate-summary{position:sticky;top:0px;z-index:1000;}


#dashboard-holder {margin:0px -14px 0px -14px}

/*.milestones-acheived-0 {color:#db6094}
.milestones-acheived-1 {color:#db6094}
.milestones-acheived-2 {color:#5b9cf7}
.milestones-acheived-3 {color:#fec545}
.milestones-acheived-4 {color:#74bf78}
.milestones-acheived-5 {color:#74bf78}*/




.table {
    font-size: 14px
}

.btn {border-radius:0px;text-transform:uppercase}

input,.input-group-prepend,.input-group-text {border-radius:0px !important}
 
.input-edit {border:none;border-bottom:1px solid #01343d} 
div.input-edit {border:1px solid #f8f9fa !important;border-bottom:1px solid #01343d !important;border-radius:0px}

#sub-nav-add {float:left;margin-right:30px;margin-left:0px;margin-top:0px;}
#sub-nav-header{float:left;padding-right:50px;padding-top:10px;padding-bottom:4px;border-right:1px solid #ccc;width:200px}
#sub-nav-filter{padding-top:10px}

#sub-nav-add .btn{padding:8px 12px 7px 12px}

footer {
    bottom: 0;width: 100%;position: absolute;height: 60px;padding:20px;
    background-color:#01343d;color:#fff
}


.no-bg {   
    margin: 0px -15px 20px -15px !important;
}


.white-bg-no-margin {
    background-color:#fff;
    padding: 10px;
    margin: 0px 0px 20px 0px !important;
    border:1px solid #ccc;
}

.white-bg {
    background-color:#fff;
    padding: 10px;
    margin: 0px -15px 20px -15px !important;
    border:1px solid #ccc;
}

.white-sub-nav-bg {
    background-color:#fff;
    padding: 0px;height:52px;
    margin: 0px -15px 20px -15px !important;
    border:1px solid #e9ecef;
    border-radius: 8px;
}

.white-bg-nav {
    background-color: #fff;
    padding: 0px;
    margin: 4px -15px 20px -15px;
    border: none;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.white-bg-holder {margin-left:-15px;margin-right:-15px}

label {line-height:1px;font-size:12px;text-transform:uppercase}


.navbar {
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    line-height: 1 !important;
}


.nav-button {
    padding: 0 4px;
    text-align: center;
}

.navbar-brand {
    margin-right: 40px;
    padding: 8px 0;
}
.navbar-brand img {
    transition: opacity 0.2s ease;
}
.navbar-brand:hover img {
    opacity: 0.8;
}

.navbar-collapse {
    border: none !important;
}

.navbar-nav a {
    color: #4a5568 !important;
    font-size: 13px;
    font-weight: 500;
    text-shadow: none !important;
    padding: 10px 16px !important;
    margin: 4px 2px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none !important;
}

.navbar-nav a:hover {
    background-color: #f1f5f9 !important;
    color: #01343d !important;
}

.navbar-nav .nav-button.active a,
.navbar-nav a:focus {
    background-color: rgba(1,52,61,0.08) !important;
    color: #01343d !important;
}

/* Logout button special styling */
.navbar-nav.ml-auto a {
    color: #6c757d !important;
}
.navbar-nav.ml-auto a:hover {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
}

/* Mobile toggle */
.navbar-toggler {
    background-color: #01343d !important;
    border: none !important;
    border-radius: 6px;
    padding: 8px 12px;
}
.navbar-toggler:hover {
    background-color: #2a6d7a !important;
}

    
.btn-success {background-color:#10b981 !important;border-color:#10b981 !important;}

.button-page-number-selected {border:1px solid #01343d;background-color:#01343d;color:#fff;min-width:35px}
.button-page-number-selected:hover {border:1px solid #2a6d7a;background-color:#01343d;color:#fff}
.button-page-number {border:1px solid #f8f9fa !important;min-width:35px}
.button-page-number:hover {background-color:#e8a24c;}

.required-alert {border: 1px solid red}

.alert-default {background-color:#f8f9fa;color:#01343d;border-color:#e9ecef;border-radius:0px}
.alert-blue {background-color:#01343d;color:#fff;border-color:#01343d;border-radius:0px}
.alert-note-header {padding:5px;font-size:12px;background-color:#ebebeb}
.alert-note {font-size:13px !important}

.alert-default.alert-hover:hover {background-color:#f3f2e8;cursor:pointer}

.edit-divider {background-color:#efefef;padding:5px;font-size:14px;text-transform:uppercase}

.modal.fade.show .modal-dialog {
    -webkit-transform: translate3d(0, -400px, 0);
    transform: translate3d(0, -400px, 0);
}

.slide-panel-candidates {border-top:10px solid #10b981}
.slide-panel-assignments {border-top: 10px solid #e8a24c}

body.slide-panel-open {overflow:hidden !important}

#slide-panel {
    width: 40vw;min-height: 100vh;
    background-color: #f8f9fa;position: fixed;z-index: 5000;display:block;
    top: 0;left: 105vw;padding:20px;overflow-y:auto;bottom:0;
    -webkit-box-shadow: -8px 0px 20px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: -8px 0px 20px 2px rgba(0,0,0,0.2);
    box-shadow: -8px 0px 20px 2px rgba(0,0,0,0.2);
}

    #slide-panel.visible {
        left: 60vw;
    }

#slide-panel-content {
    overflow-y: auto;
    padding:15px;
    overflow-x: hidden;
    min-height: 80vh
}

.slide-panel-header {margin-left:-15px;font-size:24px;margin-bottom:20px;}

/* Slide Panel Section Styling */
.slide-panel-section {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,0,0,0.06);
}

.slide-panel-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #01343d;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.slide-panel-section-header i {
    color: #e8a24c;
    font-size: 18px;
}

.slide-panel-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #6c757d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slide-panel-divider:before,
.slide-panel-divider:after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
}

.slide-panel-divider i {
    color: #e8a24c;
    font-size: 16px;
}

/* Stat cards for counts */
.slide-panel-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.slide-panel-stat {
    flex: 1;
    min-width: 100px;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
}

.slide-panel-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #01343d;
    line-height: 1;
}

.slide-panel-stat-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 6px;
}

.slide-panel-stat.stat-success .slide-panel-stat-value { color: #10b981; }
.slide-panel-stat.stat-warning .slide-panel-stat-value { color: #e8a24c; }
.slide-panel-stat.stat-primary .slide-panel-stat-value { color: #01343d; }

.stagger-appear {
    opacity: 0;
    margin-top: 20px !important;
    -webkit-transition: all 500ms ease !important;
    -moz-transition: all 500ms ease !important;
    -o-transition: all 500ms ease !important;
    transition: all 500ms ease !important;
}
.stagger-appear.visible {opacity: 1;margin-top: 0px !important;}

.btn-warning {background-color:#e8a24c !important;border-color:#e8a24c !important}

.list-rejected {padding:2px 4px;background-color:#ef4444;color:#fff;font-size:10px;font-weight:bold;display:inline-block}
.list-placed {padding:4px 6px;background-color:#10b981;color:#fff;font-size:12px;font-weight:bold;display:inline-block}

.list-placed-small {display:inline-block;position:absolute}
.list-placed-small > .sup-placed {margin-top:-6px;margin-left:6px; padding:2px 4px;background-color:#e8a24c;color:#fff;font-size:9px;font-weight:normal;position:relative}


.input-default {padding: 0px !important;font-size: 14px;height:22px;border:none;border-bottom:1px solid #01343d;padding-top:3px}


.btn-red {background-color:#ef4444;
                               color:#fff;
                               transition: all .25s ease-in;}
.btn-red:hover {background-color:#dc2626;cursor:pointer;color:#fff;}


.btn-orange {background-color:#e8a24c;
                               color:#fff;
                               transition: all .25s ease-in;}
.btn-orange:hover {background-color:#d4903a;cursor:pointer;color:#fff;}



.btn-blue {background-color:#01343d;
                               color:#fff;
                               transition: all .25s ease-in;}
.btn-blue:hover {background-color:#2a6d7a;cursor:pointer;color:#fff;}


.interview-hidden-row td {padding:0px 10px !important}

