/*   Definitionen   */
:root {
    --dgray-color: #808080;
    --gray-color: #f5f5f5;
    --cst-color: #026873; /*#008F8C;#16878C;#1E3A8A;*/
    --ocean-color: #013440;
    --agua-color: #0CABA8;
    --teal-color: #023535;
    --purple-color: #593954;

    /*northern lights*/
    /*--cst-color: #026873;*/
    /*--ocean-color: #024059;*/
    /*--agua-color: #03A64A;*/
    /*--teal-color: #025940;*/
}

.form-control:read-only, .form-control:read-only:focus {
    background-color: #e9ecef;
    opacity: 1;
    border: 1px solid #ced4da;
    box-shadow: none;
}

/*   Klassen   */
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.bodyZeEr {
    font-family: Arial, sans-serif;
}

.border-bottom-simple {
    border-bottom: 1px solid var(--dgray-color);
}

.inPuTe{
    width: 250px;
}

.text-bold{
    font-weight: bold;
}

.text-red{
    color: #dc3545;
}

.time-log {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}


#timelog-table td {
    vertical-align: middle;
}
.mb-n1 {
    margin-bottom: -.25rem !important;
}

.task-control input[type="text"] {
    margin-right: 10px;
}

.task-control .btn {
    margin-right: 5px;
}

.zeer-header{
    background-color: #333333;
    color: white;
}

.btn-cst {
    color: #fff!important;
    background-color: var(--cst-color) !important;
    border-color: var(--cst-color) !important;
}

.btn-ocean {
    color: #fff!important;
    background-color: var(--ocean-color) !important;
    border-color: var(--ocean-color) !important;
}

.btn-agua {
    color: #fff!important;
    background-color: var(--agua-color) !important;
    border-color: var(--agua-color) !important;
}

.btn-teal {
    color: #fff!important;
    background-color: var(--teal-color) !important;
    border-color: var(--teal-color) !important;
}

.btn-purple {
    color: #fff!important;
    background-color: var(--purple-color) !important;
    border-color: var(--purple-color) !important;
}

.uppercase {
    text-transform: uppercase;
}

.visibility-hidden {
    visibility: hidden;
}

@media only screen and (max-width: 768px) {
    #startDateLabel, #endDateLabel {
        font-size: 10px;
    }
    .tv-table tbody .ticket-name {
        font-size: .75rem;
    }
    #ticket-list-section .accordion-body {
        padding-left: 0;
        padding-right: 0;
    }
}

.legend-label {
    font-size: 1rem;
}

.tv-table tbody tr:last-child td {
    border-bottom: none;
}

/*admin vacation calender*/

.month-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.calender-nav-name {
    font-weight: bold;
    margin: 0 20px;
    font-size: 1.2em;
}

.nav-button {
    text-decoration: none;
    font-size: 1.5em;
    color: #007bff;
}

.nav-button:hover {
    text-decoration: underline;
}

.calendar {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
}

.calendar th, .calendar td, .legend li span.day{
    border: 1px solid #ccc;
    text-align: center;
    width: 30px;
    height: 30px;
}

.calendar th, .calendar td {
    padding: 5px;
}

.employee-name {
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
}

.day {
    background-color: #f9f9f9;
}

.day.vacation {
    background-color: #4caf50;
    color: white;
}

.day.vacation_half_days {
    position: relative; /* Required for positioning the pseudo-element */
    color: white; /* Ensure the text remains visible */
    background-color: darkseagreen; /* Default background */
}

.day.vacation_half_days::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4caf50;
    clip-path: polygon(0 0, 100% 0, 0 100%); /* Creates a triangle */
    z-index: 1; /* Ensures it appears below the text */
}

.day.vacation_half_days span {
    position: relative; /* This ensures the text stays above the pseudo-element */
    z-index: 2; /* Bring the text to the foreground */
    display: inline-block; /* Ensures the text behaves properly inside the cell */
    color: white; /* Ensures contrast for the text */
}

.day.sick-leave {
    background-color: grey;
    color: white;
}

.day.sick-leave_kind {
    position: relative; /* Required for positioning the pseudo-element */
    color: white; /* Ensure the text remains visible */
    background-color: #E0E0F1; /* Default background */
}

.day.sick-leave_kind::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
    clip-path: polygon(0 0, 100% 0, 0 100%); /* Creates a triangle */
    z-index: 1; /* Ensures it appears below the text */
}

.day.sick-leave_kind span {
    position: relative; /* This ensures the text stays above the pseudo-element */
    z-index: 2; /* Bring the text to the foreground */
    display: inline-block; /* Ensures the text behaves properly inside the cell */
    color: white; /* Ensures contrast for the text */
}

.day.holiday {
    background-color: #ff9800;
    color: white;
}

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

.weekend {
    background-color: #d3d3d3; /* Light grey for weekends */
}

.calendar-container .legend ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* This makes the list items appear next to each other */
    flex-wrap: wrap; /* Optional: allows wrapping to the next line if items overflow */
}

.calendar-container .legend ul li{
    margin-right: 1rem; /* Adds space between the items */
    display: flex;
    align-items: center; /* Aligns the icon and text vertically */
}

.calendar-container .legend ul span.day {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-right: 0.5rem; /* Space between the icon and text */
    border: 1px solid #ccc;
}

.timeline-td-name {
    text-align: left;
    padding: 5px;
    border: 1px solid #ccc;
}

.timeline-td-tasks {
    position: relative;
    height: 40px;
    border: 1px solid #ccc;
}

.timeline-td-tasks div{
    position: relative;
    width: 100%;
    height: 100%;
}

.timeline-td-tasks .ticket-name {
    position: absolute;
    height: 80%;
    background-color: lightblue;
    border: 1px solid #007BFF;
    text-align: center;
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
}