html { font-size: 62.5%; }
body {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.4rem; /* 16px */
    font-weight: 400;
    color: #000000;
    line-height: 2.0rem;
    margin:0;
}

/* HEADER & MENU */

header {
    position: relative;
    height: 150px;
}

header .top {background:#D0D3D4;}
header .middle {background:#ffffff;}
header .bottom {background:#003057;border: 1px solid #003057;}

header .top .timecard-toggle {font-size: 1.4rem; line-height: 1.4rem; padding:5px;}
header .top .timecard-toggle a {text-decoration: none;color:#000000;}
header .top .translate {
    position: absolute;
    right: 0;
    top: -1px;
}

header .login {
    position: absolute;
    right: 10px;
    top: 35px;
    width: 200px;
    max-height: 75px;
}

header .login img {float: right; border-radius: 5px;}

header .greeting-text {
    margin-right: 50px;
    text-align: right;
    margin-top: 0;
    font-size: 1.4rem;
    line-height: 1.4rem;
}

header .status {
    text-align: right;
    margin-top: 0;
    font-size: 1.4rem;
    line-height: 1.4rem;
}

header .login .dropdown {
    background: #FFF;
    display: none;
    font-size: 1.4rem;
    padding: 5px;
    position: absolute;
    right: 5px;
    text-align: right;
    top: 55%;
    border: solid 1px #003057;
}
header .login .dropdown a { color: #003057; font-size: 1.4rem; }
header .login .logout-trigger:hover .dropdown { display: block; }

header a {text-decoration: none;}

#logo {
    display: block;
    padding: 15px 15px 0 15px;
    width: 10%;
    margin:auto;
}

#logo img {
    width: 100%;
}

.nav {margin:auto;}

header .search {position: absolute;top: 120px;right: 0;}

/* FOOTER */

footer {
    background: #003057;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 400;
}

footer a {color:#ffffff;}

footer .copyright-legal {
    text-align: center;
}

/* GENERAL */

.container-fluid{
    padding: 0 !important;
}

i {color:#ffffff;}

#create-request i, #project-details i {color:red;}

#project-details i.fa-solid, #create-request i.fa-solid {color:#003057;}

#clearSearch i {color:#003057;}

.btn-default, button.btn-default, .acf-button {
    background: #003057 !important;
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    box-shadow: none;
    border:none;
    border-radius: 5px;
}

.btn-border {border:2px #ffffff solid; padding:10px 25px;}

.btn-default:hover, .acf-button:hover {
    background: #407EC9;
    cursor: pointer;
}

.btn-danger, .btn-danger:hover {background: #EED484 !important;}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.flex-container > div {
    border: #ccc solid 2px;
    width: 10%;
    margin: 10px;
    text-align: center;
    position: relative;
}

.flex-item {
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.flex-image {
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
}

.flex-image img {

}

.flex-item p {
    padding: 5px 0 0;
}

.text-right { text-align: right !important; }
.alignright { float: right; }
img.alignright { margin: 0 0 20px 20px; }
.text-center { text-align: center !important; }
.aligncenter { display: block; margin: auto; text-align: center; }
img.aligncenter { margin: 0 auto 20px; text-align: center; }
.text-left { text-align: left !important; }
.alignleft { float: left; }
img.alignleft { margin: 0 20px 20px 0; }

.navy-blue {color: #003057;}
.light-blue {color: #407EC9;}
.gold {color:#EED484;}
.grey {color:#D0D3D4;}


a {
    color: #666666;
    text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
    margin: 15px 0 !important;
}
h1 {
    font-size: 3.0rem;
    line-height: 4.0rem;
    font-weight: 600;
}

h2 {
    font-size: 2.75rem;
    line-height: 3.0rem;
    font-weight: 900;
}
h3 {
    font-size: 2.0rem;
    line-height: 2.5rem;/*2.1*/
    font-weight: 600;
}

h1 a, h2 a, h3 a {
    text-decoration: none;
}

hr {
    margin: 20px 0;
    height: 0;
    border: none;
    border-top: 1px solid #ccc;
}

img {
    max-width: 100%;
    height: auto;
}

img.circle {
    border-radius: 50%;
}

.hide {
    display: none !important;
}

.show {
    display: block;
}

div.clear {
    clear: both;
}

section + section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px; /* 1px width, 1000px height */
}

.horizontal-form {
    display: flex;
    align-items: center;
}

.horizontal-form input[type="text"],
.horizontal-form button,
.horizontal-form a {
    margin-right: 10px;
}

/* PROJECTS */

.project-scroll {
    height: 1030px;
    overflow-y: scroll;
    width: 100%;
}

.project-scroll-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}


.employee-scroll {
    height: 1030px;
    overflow-y: scroll;
}

.employee-filter {margin: 10px;}

.parking-lot {clear: both; margin:50px 25px 10px 10px !important;}

#project-assignment-000001 {min-height: 95px;}

.project-row, .project-row-parking {border:1px #000000 solid; margin: 10px;position: relative;}

.project-flex {display: flex;width:23%;flex-direction: column;flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;}

.project-name, .project-name-parking {background:#cccccc; line-height: 3.0rem; font-size: 2.0rem; border-bottom: 1px #000000 solid;padding: 5px;}

.project-row-day .project-name {font-size: 1.5rem;}

.project-name-flex {line-height: 2.0rem; font-size: 1.6rem;min-height: 117px;}

.project-cell__metabar {
    border-bottom: 1px solid #e1e1e1;
    font-size: 0;
    line-height: 20px;
    width: 100%;
}
.project-cell__metabar-cell {
    border-right: 1px solid #e1e1e1;
    color: #363d43;
    display: inline-block;
    font-size: 12px;
    padding-left: 15px;
    padding-right: 15px;
    vertical-align: top;
}

.project-cell__metabar-cell-flex {
    font-size: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.project-assignment-area-open {
    max-height: 3000px;
    min-height: 50px;
}

.job-actions {float: right;font-size: 1.4rem;}
.job_actions a {padding-right:5px;}
.project-flex .job-actions-flex {font-size: 1.1rem;float: none;}

.project-flex .sp-replacer-flex {padding:1px !important;}
.project-flex .sp-dd-flex {display: none  !important;}
.project-flex .sp-preview-flex {margin-right:0  !important;width: 20px !important;}

.ui-sortable-handle {display: inline; border: none;}
.ui-sortable-handle:hover {cursor:grab;}

.job-actions .dropdown::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    top: 50%;
    margin-top: -15px;
    right: 0px;
    opacity: 1;
    z-index: 100;
    transition: 0.5s all cubic-bezier(1, 0, 0, 1);
}

#project-details.modal, #create-request.modal, #update-request.modal, #add-multiple-assign.modal {
    width:45%;
    max-width: none;
}

.person-row, .person-row-emp {border:1px #000000 solid; margin: 10px;display: flex;z-index: 2;}
.person-row p, .person-row-emp p {
    line-height: 1.4rem;
    padding: 2px;
    font-size: 1.2rem;
}

.person-row-photo {
    float: left;
    min-height: 50px;
    min-width: 50px;
    background: #407EC9;
    text-transform: uppercase;
    margin: 5px;
    position: relative;
}

.person-row-photo-photo {
    float: left;
    height: 50px;
    width: 50px;
    background: #407EC9;
    text-transform: uppercase;
    margin: 5px;
    position: relative;
}

.foreman {border: 2px solid #407EC9;}
.journeyman {border: 2px solid #000000;}
.apprentice {border: 2px solid  #d12a06;}
.taper {border: 2px solid #dbff33;}
.pre-apprentice {border: 2px solid  #0fa413 ;}
.retired {border: 2px solid #616461;}

.single-assignment.foreman {border: 2px solid #407EC9;}
.single-assignment.journeyman {border: 2px solid #000000;}
.single-assignment.apprentice {border: 2px solid  #d12a06;}
.single-assignment.taper {border: 2px solid #dbff33;}
.single-assignment.pre-apprentice {border: 2px solid  #0fa413 ;}
.single-assignment.retired {border: 2px solid #616461;}

.single-assignment.foreman {border: 2px solid #407EC9;}
.single-assignment.journeyman {border: 2px solid #000000;}
.single-assignment.apprentice {border: 2px solid  #d12a06;}
.single-assignment.taper {border: 2px solid #dbff33;}
.single-assignment.pre-apprentice {border: 2px solid  #0fa413 ;}
.single-assignment.retired {border: 2px solid #616461;}

.dashed.foreman {border: 2px dashed #407EC9;}
.dashed.journeyman {border: 2px dashed #000000;}
.dashed.apprentice {border: 2px dashed  #d12a06;}
.dashed.taper {border: 2px dashed #dbff33;}
.dashed.pre-apprentice {border: 2px dashed  #0fa413 ;}
.dashed.retired {border: 2px dashed #616461;}

.red, .red i.fa-solid {color: #CC0000 !important;}
.input-error {
    border: 2px solid #CC0000;
}
#hospital_information {width:100%;}

.imported {font-size: 1.1rem; font-style: italic;}

.filled {background:#003057;}
.unfilled {background: #D0D3D4;}
.tentative {background: #D3D3D3;}
.confirmed {background: #407EC9;}
.ending {background: #ff0000;}
.vacation {background: #EED484;}
.pending {background: #ffffff;}

.position-hide {display: none;}
.available-hide {display:none;}
.job-hide {display: none;}

.est-dates {font-size: 1.2rem;}
.est-dates-flex {display: block;}

.assignment-row-info {
    display: block;
    width: 75%;
}

.initials {width: 50% !important; font-weight: bold; color:#ffffff;font-size: 1.2rem;border: none !important;}
.initials-in-job {
    width: 50% !important;
    font-weight: bold;
    color: #ffffff;
    font-size: 1.2rem;
    border: none !important;
    position: absolute !important;
    bottom: -10px;
    right: -10px;
}
.person-row-info {float:left;}

.single-assignment {
    width: auto;
    display: inline-table;
    font-size: 1.0rem;
    margin: 5px;
    padding: 5px;
    position: relative;
    line-height: 1.2rem;
}

.confirmed .single-assignment-info p {color:#ffffff;}

.single-assignment-flex {margin:5px;}

.parking-lot-spot {
    width: auto;
    display: inline-table;
    font-size: 1.0rem;
    margin: 10px;
    padding: 5px;
    position: relative;
    line-height: 1.2rem;
    z-index: 1;
}

.single-assignment p {padding:0;line-height: .5rem;}

.single-assignment-photo {float:left;padding:5px; margin-right: 10px;z-index: 1;}
.single-assignment-info {float:left;}

.highlighted-drop-zone {
    border: 2px solid #003057; /* Add your desired highlighting styles here */
    background-color: #D0D3D4;
}

.profile-edit-photo {position: relative; width: 150px;height: auto;}

span.unassign-front, span.remove-profile-photo {
    position:absolute;
    top: -6.5px;
    right: -6.5px;
    display: block;
    width: 20px;
    height: 20px;
    text-indent:-9999px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}

span.unassign-front:hover, span.remove-profile-photo:hover {cursor: pointer;}

#create-request label {
    display: inline-block;
    width:50%;
}

#create-request .row {padding-bottom: 5px;}

#create-request .workingdays label {display: inline;}

#create-request textarea {width: 100%;}

#assignedTo {padding-top:5px;}

#employee-info.modal {max-width:700px;}
.modal {font-size: 1.4rem;}

input:read-only,textarea:read-only {
    background-color: #cccccc;
}

#working_days_emp {text-transform: capitalize;}

.modal label {font-weight: bold;}

.login-area {
    position: relative;
    text-align: center;
    padding: 25px;
}

.login-area input[type="text"], .login-area input[type="password"] {
    margin:10px 0;
    padding:5px;
}

.sortable-placeholder {
    background-color: #f0f0f0; /* Placeholder background color */
    border: 1px dashed #ccc; /* Placeholder border */
    height: 50px; /* Placeholder height */
    width: 25%; /* Placeholder width */
    box-sizing: border-box; /* Ensure placeholder width includes border */
    margin-bottom: 10px; /* Adjust margin as needed */
}

.tt-menu, .tt-dropdown-menu {
    width: 100%;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    margin: 0 5px;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;

}

.display-none {
    display: none !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.8);
    z-index: 999;
    opacity: 1;
    transition: all 0.5s;
}


.lds-dual-ring {
    display: inline-block;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 25% auto;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#dateRangeForm {position: absolute; right:30px;}

.employee-filter ul {
    list-style: none;
    padding: 5px 0;
    margin: 10px 0;
}

.employee-filter li {
    display: inline;
    margin: 0;
    background: #cccccc;
    border: 1px solid #666666;
    padding: 5px 10px;
}

.employee-filter li.active, .employee-filter li.active a  {
    color: #ffffff;
    background: #003057;
}

#calendar-container {
    margin-bottom: 20px;
}

#prev-month, #next-month {
    cursor: pointer;
    font-weight: bold;
    margin-right: 10px;
}

/* DAY DRIVEN */

.calendar-controls {margin-top: 10px;}

.project-row-day .project-name {font-size: 1.5rem;}
.project-row-day {border: 1px solid #000000; margin-bottom:5px;width:285px;}
.project-row-day .job-actions {float: left;}
.project-row-day .job-actions i {color: #cccccc;}
.day .slot {min-height:45px; border: 1px solid #666666;margin-bottom:5px; position: relative;}

#create-request.modal.day-driven label {width:35%;}

.slot .job-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slot .job-info-wrapper {
    width:65%;
    margin-left: 5px;
}

.slot .job-info-wrapper-subs {
    width:100%%;
    margin-left: 5px;
}

.slot .job-title, .slot .job-number {font-size:1.2rem; text-align:left;}

.slot .job-phase, .slot .job-position {font-size:1.1rem; text-align:left;}

.slot .day-assign {height:50px;width:50px; background: #cccccc;
    position: relative;
    margin: 5px;}

.day-assign .initials-in-job {bottom: 0px;
    right: 0px;}

.slot a {text-decoration: none;}

span.draggrab {
    position: absolute;
    top: -1.5px;
    right: -8.5px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 2rem;
    color: #000000;
}

span.draggrab i {color: #000000;}

    /*People*/

.person-row-photo-nophoto-people {
    width: 132px;
    height: 132px;
    background: #407EC9;
    text-transform: uppercase;
    margin: auto;
    position: relative;
}

.person-row-photo-nophoto-people .initials {width: 50% !important; font-weight: bold; color:#ffffff;font-size: 3.0rem;border: none;}

.person-row-photo-photo-people {
    text-transform: uppercase;
    position: relative;
    width: 100%;
    height: auto;
}

.person-row-info-people {font-size: 1.2rem;}

.people-search {margin-top:15px !important;}

.user-editing-space {margin: 15px 0 !important;}


/*Assignments*/
.general {margin: 10px;}

#prev-month {
    float: left;
    margin-left: 10px;
    width: fit-content;
}

#next-month {
    float: right;
    margin-right: 10;
    width: fit-content;
}

/* Gantt chart container */
#gantt-chart, #gantt-chart-people {
    width: 100%;
    margin-top: 15px;
    height: 1030px;
    overflow-y: scroll;
}

/* Gantt chart header row & chart background */
#gantt-header-row {
    position: relative;
    top: 15px;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 1000; /* adjust z-index as needed */
    padding-right: 25px;
}

.gantt-header {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
}

.gantt-header-background {
    display: flex;
    position: absolute;
    height: inherit;
    width: 98%;
}

.gantt-header-cell {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    border-right: 1px solid #ddd;
}

.gantt-header-background .gantt-header-cell {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    border-right: 1px solid #ddd;
}

#gantt-grid-header {
    display: flex;
    flex-direction: row;
}

.gantt-grid-header-cell {
    border: 1px solid #ddd; /* Border style */
    padding: 8px; /* Padding */
    text-align: center; /* Center text */
    font-size: 12px; /* Font size */
    flex-grow: 1; /* Fill remaining space */
}

/* Job Header Row */

.job-header, .person-header {
    height: 20px; /* Adjust height as needed */
    background-color: #cccccc; /* Adjust color as needed */
    border-radius: 3px;
    border: 1px solid #000000; /* Adjust border color */
    margin-bottom: 15px;
    font-weight: bold;
    position: relative;
}

/* Gantt chart tasks container */
.gantt-tasks {
    position: relative;
    overflow-x: hidden;
}

/* Highlight current day */
.current-day {
    background-color: #ffffcc; /* Adjust color as needed */
}

/* Background color for weekends */
.weekend {
    background-color: #f2f2f2; /* Adjust color as needed */
}



/* Gantt chart task bar */
.gantt-task {
    position: absolute;
    top: 10px; /* Adjust vertical position */
    height: 20px; /* Adjust height as needed */
    background-color: #cccccc; /* Adjust color as needed */
    border-radius: 3px;
    border: 1px solid #0056b3; /* Adjust border color */
}

.gantt-task.Foreman {background-color: #003057; border: #CCCCCC;}
.gantt-task.Journeyman {background-color: #000000; border: #CCCCCC;}
.gantt-task.Apprentice {background-color: #d12a06; border: #CCCCCC;}
.gantt-task.Taper {background-color: #dbff33; border: #CCCCCC;color:#000000;}
.gantt-task.Pre-Apprentice {background-color: #0fa413; border: #CCCCCC;}
.gantt-task.Retired {background-color: #616461; border: #CCCCCC;}


/* Gantt chart task label */
.gantt-task-label {
    padding: 3px;
    color: #fff; /* Adjust text color */
    font-size: 12px; /* Adjust font size as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 15px;
}

.gantt-task-label.Taper {color:#000000;}

#comments textarea {width: 100%;}

/*Edit Profiles*/
.field .btn-danger {
    background: #CC0000;
    border: #CC0000;
}

.acf-field {
    margin: 15px 0;
    clear: both;
}

.acf-field, .acf-field .acf-label, .acf-field .acf-input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 5px;
}

.acf-field .acf-label label {
    display: block;
    font-weight: 500;
    margin: 0 0 3px;
    padding: 0;
}

.acf-field .acf-input {
    vertical-align: top;
}

.acf-field input[type="text"], .acf-field input[type="password"], .acf-field input[type="date"], .acf-field input[type="datetime"], .acf-field input[type="datetime-local"], .acf-field input[type="email"], .acf-field input[type="month"], .acf-field input[type="number"], .acf-field input[type="search"], .acf-field input[type="tel"], .acf-field input[type="time"], .acf-field input[type="url"], .acf-field input[type="week"], .acf-field textarea, .acf-field select {
    width: 100%;
    padding: 4px 8px;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
}

/*Day Driven Calendar*/
#calendar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.week {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.day {
    width: calc(100% / 7);
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
}
.header {
    font-weight: bold;
}
#navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
#currentMonth {
    margin: 0 10px;
    font-weight: bold;
}
button {
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
}

.typeahead-highlight {color: #ff0000;}

/*Subs*/
.subs-controls {padding:15px;}
.modal.subs {max-width: 65%;}

/*Scrollable Table*/
#month-calendar {
    max-height: 600px; /* or any desired height */
    overflow-y: auto;
    position: relative;
    border: 1px solid #ccc;
}

#month-calendar .week.header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 2px solid #000;
}

/* Optional: style day boxes for visual structure */
#month-calendar .week {
    display: flex;
}

#month-calendar .day {
    flex: 1;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
}


/*Form Styles*/
.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="password"],
select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.linked_start_date input[type="text"], .linked_end_date input[type="text"] {width: 90%;}

.login input[type="text"], .login input[type="password"] {
    width: auto;
}

/* Ensure Select Matches Input Styling */
/* Style all select elements */
select {
    -webkit-appearance: none; /* Remove default styles in Safari/Chrome */
    -moz-appearance: none; /* Remove default styles in Firefox */
    appearance: none;
    background-color: white;
    padding-right: 30px; /* Leave space for custom arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5H7z" fill="%23666"/></svg>'); /* Custom down arrow */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position the arrow */
    background-size: 16px;
}

textarea {
    width: 95%;
    height: 50px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}

textarea:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
    outline: none;
}

.twitter-typeahead {width:100%;}

.tt-menu,
.gist {
    text-align: left;
}

.typeahead,
.tt-query,
.tt-hint {
    width: 100%;
    height: 30px;
    padding: 8px 12px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.typeahead {
    background-color: #fff;
}

.typeahead:focus {
    border: 2px solid #0097cf;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-menu, .tt-dropdown-menu {
    width: 422px;
    margin: 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

.blocker {
    z-index: 11 !important;
}

.day.weekend {
    background-color: #f9f9f9;
}

span.linked_assigment {
    position: absolute;
    bottom: 15px;
    right: 5.5px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 2rem;
}

span.linked_assigment i {
    color: #ccc;;
}

/*RESPONSIVE*/

.modal .row {padding:3px 0;}

@media (max-width: 412px) {
}
@media only screen and (min-width: 413px) and (max-width: 767px) {
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (min-width: 901px) and (max-width: 1023px) {
}
@media only screen and (min-width: 1024px) and (max-width: 1279px){
}
@media (min-width: 1280px) and (max-width: 1920px){
    .project-name, .project-name-parking {
        font-size: 1.75rem;
    }
}
@media (min-width: 1921px) and (max-width: 2560px){
}
@media (min-width: 2561px){
}

#filter_role {
}