* {
    margin: 0;
    padding: 0;
    outline: 0;
    text-decoration: none;
    box-sizing: border-box;
    border: none;
    scrollbar-gutter: stable;
}

:root {
    --color-black:hsl(300, 2%, 9%);
    --color-gray-dark: hsl(0, 0%, 24%);
    --color-brown:hsl(21, 48%, 24%);
    --color-gray: hsl(201, 7%, 52%);

    --color-bgnd: hsl(240, 20%, 97%);
    --color-white: hsl(0, 0%, 99%);
    --color-dark-white: hsl(0, 0%, 93%);
    --color-gray-light: hsl(200, 7%, 82%);

    --color-tr-line:  hsla(210, 90%, 75%, 0.7);

     --color-btn-hover:  hsl(210, 90%, 75%); 
    /*--color-btn-hover: hsl(169, 100%, 25%);*/

     --color-btn: hsl(210, 90%, 65%); 
    /*--color-btn: hsl(169, 100%, 31%);*/

    --color-red:hsl(0, 100%, 50%);

    --color-purple:hsl(288, 100%, 59%);

    --color-orange:hsl(35, 100%, 42%);
    --color-event-default: hsl(47, 94%, 51%);

    --color-alert: hsl(355, 100%, 73%);

    --color-sunday: hsl(355, 100%, 80%);
    --color-saturday: hsl(355, 100%, 90%);

    --color-success: hsl(120, 100%, 25%);
    --color-success-light: hsl(120, 97%, 41%);
    --color-table-border: hsl(0, 0%, 23%);

    --border-radius: 1.2rem;
    --border-radius-low: 0.8rem;
    --box-shadow: -1rem 1rem 1rem -1rem var(--color-gray-dark);
}

@font-face {
    font-family: 'Material Symbols Sharp';
    font-style: normal;
    font-weight: 100 700;
    src: url(mss.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(roboto_latin_ext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(roboto_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
.material-symbols-sharp {
    font-family: 'Material Symbols Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

.alert {
    color:var(--color-alert);
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
    position: relative;
}

.success {
    color:var(--color-success);
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
    position: relative;
}

.alert-box  {
    border-width: 1px;
    border-radius: var(--border-radius-low);
    
    display: flex;
    align-items:  center;
    padding: 10px 5px;
    font-size: 0.9rem;
    color: white;
    box-shadow: 0px 1px 5px 0 darkslategrey;
    text-align: center;
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index:5;
    transition: all 1s;
}

.alert-box.check_circle {
    background-color: var(--color-success);
  }

.alert-box.error {
    background-color: var(--color-alert);
  }

#eye {
    position: absolute;
    width: 20px;
    top: 12px;
    right: 10px;
    cursor: pointer;
}

#clearDateInput {
    position: absolute;
    width: 20px;
    top: 12px;
    right: 40px;
    cursor: pointer;
}

#fill_ecp_form_modal, 
#delete_employee_form_modal, #add_employee_form_modal, #modify_employee_form_modal, 
#generate_ecp_form_modal, #show_ratios_modal,
#add_activity_form_modal, #modify_activity_strict_form_modal, #delete_activity_form_modal, #modify_activity_form_modal,
#add_delete_worker_function, #add_delete_department, #add_delete_location, #add_delete_activity_type, #add_delete_activity_phase, #vacation_definition,
#show_art188_modal, #add_delete_marka, #add_delete_model, #add_delete_insurance, #add_car_form_modal, #survey_form_modal, #confirmModal, 
#modify_car_form_modal, #delete_car_form_modal, #upload_insurance {
    visibility: hidden;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.2s ease-in;
    display: none;
}

#move_50_hours {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(130%, 50%);
    visibility: hidden;
    z-index: -2;
    opacity: 0;
    display: none; 
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(63, 63, 63, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.mask.active {
    opacity: 1;
    visibility: visible;
}

.hide-calendar {
    pointer-events: none;
    opacity: 0.5;
}

.center_text {
    text-align: center;
}

.left_text {
    text-align: left;
    font-weight: bold;
}

.left_text_normal {
    text-align: left;
    font-weight: normal;
}

.right_text {
    text-align: right;
}

.bold_text {
    font-weight: bold;
}

.hidden_vacation_types {
    display: none;
}
.hidden_border_times {
    display: none;
}

#loader {
    position: relative;
    width: 100%;
    inset: 0;
    background: var(--color-white);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 99999;
}

iframe {
    width: 100%;
    height: 100vh;
    border: 0;
    display: none;
}

/*============================================= main page */

body {
    background-color: var(--color-dark-white);
    color: var(--color-gray-dark);
    font-family: 'Roboto', serif;
    font-size: 0.8rem; 
}

.main-container {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

nav {
    height:700px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    width: 250px;
    flex-shrink: 0;
    position: relative;
}

hr {
    border: 1px solid var(--color-btn);
}

main {
    background-color: var(--color-dark-white);
    flex-grow: 1;
    /* padding-bottom: 20px; */
    display: flex;
    justify-content: center;
}

aside {
    min-height: 800px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    width: 250px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.block_div {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 5px 10px var(--color-gray);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.block_div:hover{
    box-shadow: none;
}

a {
    color: var(--color-btn);
}

ul {
    list-style-type: none; 
}

h3 {
    font-size: 0.9rem;
    font-weight: 400;
}

h2 {
    font-size: 1rem;
    font-weight: 700;
}

/*============================================= navigation */

.navbar_top {
    display: flex;
    justify-content: center;
}

.navbar_top img {
    width: 130px;
    margin-top: 15px;
}

.user-infos {
    margin-left: 1rem;  
    margin-bottom: 0.8rem;
}

.navbar_middle {
	padding-top:0px;
}

.navbar_middle a, .navbar_bottom a {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0.4rem 0.5rem;
    gap: 1.2rem;
    height: 2rem;
    transition: all 0.3s ease;
}

.navbar_middle a:hover, .navbar_bottom a:hover {
    margin-left: 1.2rem;
    color: var(--color-btn-hover);
}

.navbar_middle a.active {
    background-color: var(--color-btn);
    color: var(--color-white);
    margin-left: 0rem;
}

.navbar_middle a.active::before {
    content:'';
    width: 6px;
    height: 100%;
    background-color: var(--color-btn-hover);
}

.navbar_bottom {
    position: relative;
    top: 15px;
}

/*============================================= form general */

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

input[type="color"] {
    width: 100px;
    height: 40px;
    padding: 7px;
    cursor: pointer;
}

 .form_container_static {
    position: absolute;
    top: 35%; 
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    width: 80%;
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}

.form_container, #confirmModal {
    position: absolute;
    top: 0px; 
    max-width: 500px;
    width: 80%;
    border-radius: var(--border-radius);
    background-color: var(--color-dark-white);
}

#confirmModal {
max-width: 300px;
top: 20%; 
}

.input_static input, .input_static textarea {
    background-color: var(--color-dark-white);
}

.input_static textarea {
    padding: 7px;
}

.form_container_title{
    margin-top: 20px;
    margin-bottom: 0px;
    text-align: center;
}

form, #confirmModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.table_head_buttons {
    margin: 0px auto 20px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.table_head_buttons form {
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.small_btn {
    padding: 8px;
    border-radius: var(--border-radius-low);
    font-size: 0.65rem;
}

.multiform_div {
    margin-top: 5px;
    width: 100%;
    border: 1px solid var(--color-black);
    border-radius: var(--border-radius-low);
    height: 200px;
}

.multichoose {
    border: none;
    padding: 0px;
    margin: 10px auto;
    height: 90%;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

.multichoose {
    scrollbar-color: var(--color-btn) var(--color-bgnd);
}

.multichoose>option {
    padding: 5px;
    margin: 2px 5px;
}

.multichoose>option:checked{
    background-color: var(--color-btn-hover);
    border-radius: var(--border-radius-low);
}

.multichoose>option:hover{
    background-color: var(--color-btn-hover);
    border-radius: var(--border-radius-low);
}

input, select, button {
    padding: 10px 20px;
    background-color: var(--color-white);
    border-radius: var(--border-radius-low);
}

input, select {
    border: 1px solid var(--color-black);
}

button {
    border: none;
}

.button_disabled {
    background-color: var(--color-gray-light);
    cursor: auto;
}

.input_no_border {
    border: none;
}

.fill_ecp_select {
    text-align: center;
    text-align-last: center;
    width: 100%; 
}

.fill_ecp_select option {
    text-align: left;
}

/* input, button {
    cursor: text;
} */

input {
    cursor: text;
}

select {
    cursor: pointer;   
    /* text-align: center; */
}

.form_button {
    background-color: var(--color-btn);
    cursor: pointer;
    color: var(--color-white);
    font-weight: bold;
}

.form_button_alert {
    background-color: var(--color-alert);
    cursor: pointer;
}

.form_button:hover {
    background-color: var(--color-btn-hover);
}

#fill_ecp_form_day {
    cursor: default;
    background-color: var(--color-dark-white);
    padding-left: 0;
}

.form_input_div, .form_button_div {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    margin: 10px 0;
}

.form_input_div input:hover, 
.form_input_div textarea:hover,
.form_input_div select:hover,
.form_input_div_dynamic input:hover, 
.form_input_div_dynamic select:hover,
.table_small_input:hover,
.table_input_search:hover,
#eventForm input:hover, 
#eventForm select:hover,
.settings_form input:hover,
.settings_form select:hover,
.aside_form select:hover
  {
    background-color: var(--color-dark-white);
}

.form_input_div_color {
   align-items: center;
}

.form_input_div_hidden {
    margin: 0px;
}

.dynamic_label {
    position: absolute;
    top: 10px;
    left: 10px;
    transition: 0.3s;
    font-size: 0.9rem;
    overflow: hidden;
    pointer-events: none;
}

.form_input_div input:focus ~ label,
.form_input_div input:valid ~ label
 {
    top: -16px;
    left: 10px;
    font-size: 0.8rem;
}

.valid_label {
    position: absolute;
    top: -16px;
    left: 10px;
    font-size: 0.8rem;
}

.append_fill_ecp_form {
    width: 80%;
}

.append_fill_ecp_form_title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 7px;
}

.form_input_div_fill_hours {
    margin-top: 7px;
    display: grid;
    grid-template-areas: "start project end"
                        ". vacation .";
    width: 100%;
    grid-gap: 5px;
    justify-content: center;
    align-items: center;
} 

.form_input_div_move_50_hours {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.form_input_div_move_50_hours input {
    width: 25%;
}

.form_input_div_dynamic:nth-child(1n) {
    grid-area: start;
}
.form_input_div_dynamic:nth-child(2n) {
    grid-area: project;
}
.form_input_div_dynamic:nth-child(3n) {
    grid-area: end;
}

.form_input_div_dynamic:nth-child(4n) {
    grid-area: vacation;
}

.dynamic_trip_types_select {
    display: flex;
    flex-direction: column;
}

.dynamic_trip_types_select input {
    text-align: center;
}

#border_time {
    margin-top: 5px;
    width: 100%;
    text-align: center;
}

.add_remove_input_icons {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.add_input_icon, .remove_input_icon {
    margin-top: 10px;
    width: 20px;
    cursor: pointer;
    color:var(--color-btn);
}

.add_input_icon.blocked, .remove_input_icon.blocked {
    color:var(--color-gray);
}

.add_input_icon.blocked:hover, .remove_input_icon.blocked:hover {
    color:var(--color-gray);
}

.add_input_icon:hover, .remove_input_icon:hover {
    color:var(--color-btn-hover);
}

.checkboxes_fill_ecp_form {
    width: 50%;
    display: flex;
    justify-content: space-around;
    margin: 10px;
}

.checkboxes_fill_ecp_form label, .checkboxes_fill_ecp_form input, .remove-icon {
    cursor: pointer;
}

.month_name_header {
    width: 170px;
    text-align: center;
    /* cursor: pointer; */
}

.browse_ecp_week_form{
    margin: 0px;
    padding: 0px;
}

.browse_ecp_week_form button {
    background-color: var(--color-btn);
    margin: 0px;
    padding: 8px;
}

.browse_ecp_week_form button:hover {
    background-color: var(--color-btn-hover);
}

/* .more_formulars {
    display: flex;
    gap: 30px;
    position: relative;
    top: 10%;
    width: 100%; 
    justify-content: center;
    
} */

.more_formulars {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 40px;
    position: relative;
    width: 80%; 
}

.more_formulars>.block_div {
    position: relative;
    width: 500px;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    background-color: var(--color-white);
}

.employees_two_inputs {
    margin-bottom: 10px;
    display: flex;
    
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}

.employees_two_inputs input, .employees_two_inputs select{
    width: 100%;
}

/*============================================= main calendar */

.kw_number_main_calendar {
position: absolute;
right: 10px;
top: 5x;
}

.center_calendar {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}

.calendar {
    color: var(--color-gray);
    background-color: var(--color-dark-white);
}

.calendar_header_form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    padding-bottom: 0px;
    color: var(--color-gray);
}

#calendar_header_form{
    cursor: pointer;
}

.calendar_navigation {
    display: flex;
    justify-content: center;
    width: 40px;
    border-radius: 20%;
    cursor: pointer;
}

.calendar_navigation:hover {
    background-color: var(--color-dark-white);
}

.calendar .fill_ecp_calendar_days {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    padding: 10px;
}

.calendar .fill_ecp_calendar_days .day_name {
    width: calc((100% / 7));
    padding: 10px;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-dark-white);
    background-color: var(--color-btn);
    border-radius: var(--border-radius-low);
    border: 2px solid var(--color-white);
}

.calendar .fill_ecp_calendar_days .calendar_day {
    position: relative;
    width: calc(100% / 7);
    padding: 5px 15px;
    font-weight: bold;
    color: var(--color-gray);
    cursor: pointer;
    min-height: 100px;
}

.calendar .fill_ecp_calendar_days .calendar_day_overview {
    cursor: default;
}

.calendar_day_header {
    font-size: 12px;
    display: flex;
    align-items: center;
}

.calendar_day_num {
    margin-right: 10px;
    font-size: 15px;
}

.calendar_day_header .activity_icon {
    font-size: 20px;
    margin-right: 5px;
}

.calendar .fill_ecp_calendar_days .calendar_day .event {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 5px;
    background-color: var(--color-event-default);
    color: #fff;
    word-wrap: break-word;
}
.calendar_day {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-dark-white);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.green {
    background-color: var(--color-success);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.blue {
    background-color: var(--color-btn);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.red {
    background-color: var(--color-alert);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.yellow {
    background-color: var(--color-event-default);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.orange {
    background-color: var(--color-orange);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.brown {
    background-color: var(--color-brown);
}

.calendar .fill_ecp_calendar_days .calendar_day .event.gray {
    background-color: var(--color-gray);
}

.calendar .fill_ecp_calendar_days .calendar_day:hover, .calendar .fill_ecp_calendar_days .calendar_day.selected:hover {
    background-color: var(--color-dark-white);
}
.calendar .fill_ecp_calendar_days .calendar_day.ignore {
    background-color:var(--color-white);
    color: var(--color-gray-light);
    cursor: inherit;
}
.calendar .fill_ecp_calendar_days .calendar_day.selected {
    background-color: var(--color-btn-hover);
    cursor: pointer;
}

.hidden_comment {
    display: none;
}

.event_bold {
    font-weight: bold;
}

.saturday {
    background-color: var(--color-saturday);
}

.sunday {
    background-color: var(--color-sunday);
}

#pop_up_calendar_months, #pop_up_calendar_years {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translate(-50%, 0);
    background-color: var(--color-bgnd);
    transition: opacity 0.3s;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius);
    color:var(--color-gray);
    font-weight: bold;
    z-index: -1;
}

#pop_up_vacation_months {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translate(-50%, 0);
    padding: 15px;
    background-color: var(--color-bgnd);
    transition: opacity 0.3s;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius);
    color:var(--color-gray);
    font-weight: bold;
    z-index: -1;
}

.vacation_month_pop_up {
    cursor: pointer;
}

#pop_up_vacation_months td {
    padding: 10px;
}

#pop_up_calendar_years>table {
    border-collapse: separate;
    border-spacing: 15px; 
} 

#pop_up_calendar_years>table td{
    cursor: pointer;
}

#pop_up_calendar_months table tr td, #pop_up_calendar_years table tr td {
    border: none;
}

#pop_up_calendar_months input {
    background-color: var(--color-bgnd);
    cursor: pointer;
    color:var(--color-gray);
    font-weight: bold;
}

input[name="month_clicked"]{
    padding: 10px;
}

#pop_up_calendar_months input:hover {
    color:var(--color-gray-dark);
}

#pop_up_calendar_years>table td:hover {
    color:var(--color-gray-dark);
}

input[name="popUpCalendarYearInput"] {
    text-align: center;
}

/*=============================================  tables */

td, th {
    padding: 7px;
}

.center_table {
    display: flex;
    align-items: center;
}

.my_project_table {
    margin-top: 30px;
    margin-bottom: 20px;
}

.my_project_table tr:last-of-type, .my_project_table td:last-of-type {
 background-color: var(--color-gray-light);
}

.my_project_table_month_td {
    width: 50px;
    font-weight: bold;
}

.my_project_table_worker_td {
    width: 250px;
}

.my_project_table_sum_td {
    text-align: right;
}

.vacation_def_listing_table {
    border-collapse: collapse;
    width: 90%;
    border-radius:var(--border-radius-low);
    overflow: hidden;
    text-align: center;
    background-color: var(--color-white); 
}

.vacation_def_listing_table td {
    padding: 8px;  
}

.vacation_def_listing {
    border-right: 1px solid var(--color-black);
}

.main_listing_table {
    border-collapse: collapse;
    width: 90%;
    /* table-layout: fixed; */
    border-radius:var(--border-radius-low);
    overflow: hidden;
    text-align: center;
    background-color: var(--color-white);
}

.main_listing_table td {
    padding: 8px;
    border-right: 1px solid var(--color-dark-white);
}

.main_listing_table tbody tr:hover td, .vacation_def_listing_table tbody tr:hover td{
    background-color:var(--color-tr-line);
}

.main_listing_table td:last-of-type{
    border-right: none;
}

.main_listing_table_head th {
    background-color: var(--color-btn);
    color: var(--color-dark-white);
    padding: 10px 5px;
}

.main_listing_table tbody tr:nth-child(even), .main_table_vacation_overview tbody tr:nth-child(odd),
.vacation_def_listing_table tbody tr:nth-child(odd){
   background-color: var(--color-dark-white);
}

.work_system_form {
    width: 95%;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    margin: 15px 15px 15px;
}

.work_system_form_main_div {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.work_system_form_input_div {
    display: flex;
    flex-flow: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.work_system_form [type=radio], .work_system_form [type=radio], label  {
    cursor: pointer;
}

.wrapper_box {
    width: 67vw;
}

.wrapper {
    position: relative;
    overflow-y: scroll;
    overflow-x: scroll;
    scrollbar-color: var(--color-btn) var(--color-bgnd);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 85vh;
} 

.sticky_head_0 {
    position: sticky; 
    top: 0px;
   /* z-index: 1;*/
}

.sticky_head_29 {
    position: sticky; 
    top: 33px;
   /* z-index: 1;*/
}

.sticky_head_49 {
    position: sticky; 
    top: 62px;
}
.vacation_overview_calendar_day {
    text-align: center;
    vertical-align: middle;
    color: #000;
    width: 50px;
    border-right: 1px solid var(--color-black);
}

.sticky_column {
    width: 150px;
    position: sticky; 
    left: 10px;
    white-space: nowrap;
    background-color: var(--color-white);
}

.sticky_column_150 {
    min-width: 150px;
    position: sticky; 
    left: 166px;
    white-space: nowrap;
    background-color: var(--color-white);
}

.sticky_column_10_pp {
    max-width: 30px;
    position: sticky; 
    left: 10px;  
    white-space: nowrap;
    background-color: var(--color-bgnd);
}

.sticky_column_pp {
    width: 180px;
    position: sticky; 
    left: 40px;
    white-space: nowrap;
    background-color: var(--color-white);
}

.sticky_column_150_pp {
    min-width: 150px;
    /* padding-right: 20px; */
    position: sticky; 
    left: 196px;
    white-space: nowrap;
    background-color: var(--color-white);
}

.main_table_vacation_overview {
    border-spacing: 0;
    margin-left: 10px;
}

.main_table_vacation_overview tr {
    height: 28px;
}

.main_table_vacation_overview tr.employee_row td {
    padding: 3px;
}

.main_table_vacation_overview tbody tr:hover td {
    border-top: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
}

.main_table_vacation_overview tbody tr:nth-child(n+5):hover td:first-child {
    text-shadow: 0 0 1px currentColor;
}

.main_table_vacation_overview tbody tr:nth-child(3) {
    background-color: var(--color-white);
    /*z-index:1;*/ 
}
.main_table_vacation_overview tbody tr:nth-child(2) {
    background-color: var(--color-white); 
}

.main_table_vacation_overview tbody tr:nth-child(1) {
    background-color: var(--color-white); 
}

.main_table_vacation_overview tbody tr:nth-child(-n + 3):hover td {
    background-color: var(--color-white);
    border-top: none;
    border-bottom: none;
}

.table_input_search {
    width: 100%;
    padding: 5px;
    text-align: center;
    border: 1px solid var(--color-gray-light);
}

.td_flex div {
    display: flex;
    gap: 2px;
    flex-direction: row;
    justify-content: center;
}
.table_small_input {
    width: 60px;
    padding: 3px;
    text-align: center;
}

.table_small_input::-webkit-inner-spin-button, 
.table_small_input::-webkit-outer-spin-button {
  display: none;
}

.settings_table_div { 
    width: 70%;
    display: flex;
    gap: 0px;
    flex-direction: column;
    justify-content: center;
}

.settings_table{
    margin-bottom: 20px;
}

.settings_middle_head {
    border-bottom: none;
}

.settings_up_head {
    border-top: none;
}

.hidden_element {
    display: none;
}

.settings_form {
    display: flex;
    flex-direction:row;
    padding-bottom: 0px;
    gap: 10px;
    margin-top: 10px;
}

.inactive_table_row {
    color:var(--color-alert);
}

/*============================================= vacation */

.vacations_types_containter {
    margin-top: 20px;
}

#vacation-calendar-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 15px;
}

.vacation_table {
    background-color: var(--color-white);
    font-size: 0.8rem;
    height: 200px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--color-dark-white);
    padding: 10px;
    box-shadow: 2px 5px var(--color-gray);
    transition: box-shadow 0.2s ease;
}

.vacation_table:hover {
    box-shadow: none;
}

.vacation_table tr td {
    padding: 4px;
    width: 30px;
    vertical-align: middle;
}

.vacation_table thead th, .main_table_vacation_overview th {
   color: var(--color-dark-white);
   border: 2px solid var(--color-white);
}

.vacation_calendar_day {
    text-align: center;
    vertical-align: middle;
    color: #000;
    cursor: pointer;
    background-color: var(--color-dark-white);
}

.vacation_calendar_day:hover {
    font-weight: bold;
}

.vacation_calendar_day_empty {
    border: none;
    background-color: var(--color-white);
    cursor: default;
}

.vacation_not_confirmed {
    border-radius: 20%;
    border: 2px solid var(--color-red);
}

.vacation_wypoczynkowy {
    background-color: var(--color-event-default);
}

.vacation_okolicznosciowy {
    background-color: var(--color-success-light);
    color: var(--color-black);
}

.vacation_na_zadanie {
    background-color: var(--color-success);
    color: var(--color-black);
}

.vacation_opiekunczy {
    background-color: var(--color-btn);
    color: var(--color-white);
}

.vacation_art188 {
    background-color: var(--color-gray);
    color: var(--color-white);
}

.vacation_ojcowski {
    background-color: var(--color-purple);
    color: var(--color-black);
}

.vacation_macierzynski {
    background-color: var(--color-orange);
    color: var(--color-black);
    padding: 0px;
}

.vacation_rodzicielski {
    background-color: var(--color-brown);
    color: var(--color-white);
}

.vacation_wychowawczy {
    background-color: var(--color-red); 
    color: var(--color-black);
}

.vacation_bezplatny {
    background-color: var(--color-btn-hover);
    color: var(--color-black);
}

.vacation_sila_wyzsza {
    background-color: var(--color-gray);
    color: var(--color-black);
}

.vacation_dodatkowy {
    background-color: var(--color-saturday);
    color: var(--color-black);
}

.aside_table_vacation {
    border-collapse: collapse;
    width: 200px; 
    margin-top: 30px;
}

.aside_table_vacation tr, .aside_table_vacation_no_border td {
    border-bottom: 1px solid  var(--color-table-border);
}

.aside_table_vacation_no_border {
    border-bottom: none;  
    width: 200px; 
    margin-top: 30px;
}

.aside_border_div, .aside_table_vacation_full_border div {
    border: 1px solid  var(--color-table-border);  
}

.aside_table_vacation_full_border {
    width: 200px; 
    margin-top: 30px;
}

.picker, .picker_acceptance, .picker_delete, .picker_x, .picker_ho, .picker_pl {
    cursor: pointer;
    position: relative; 
    padding: 0px;
    border-radius: 5px;
}

.picker:hover {
    background-color: var(--color-white);
}

.picker_clicked {
    position: relative; 
    background-color: var(--color-white);
}

.picker_div {
    position: relative;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;  
    height: 30px;
    border-radius: 5px;
}

.picker_div:hover, .picker_div_clicked {
    left: -15px;
    transition: left 0.2s ease;
} 

.no_wrap_column {
    white-space: nowrap;
}

.small_font {
    font-size: 0.65rem;
    color: var(--color-gray);
}

input[name="project_count"], input[name="all_vacations_sent"] {
  background: var(--color-white);
}

/*============================================= personal plan */

#pp_table tbody tr:nth-child(n+5):hover td:nth-child(2) {
    text-shadow: 0 0 1px currentColor;
}

#pp_table tbody tr:nth-child(n+5) td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worker_name_column {
    background-color: var(--color-btn);
}
 
#pp_table tr {
    height: 27px;
}

#pp_table tr.employee_row td {
    padding: 3px;
}

#pp_table td.vacation_overview_calendar_day {
    max-width: 25px;
}

#pp_table input[type="checkbox"] {
    vertical-align: middle;
    margin-left: 5px;
}

#pp_table .cell-active {
    font-size: 1rem;
    font-weight: bold;
}

#pp_table tr.row-bordered td {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.checkbox-cell input {
    cursor: pointer;
}

#tripCheckbox {
    cursor: pointer;
}

.pplan_fixed_column {
    min-width:150px;
}

.copy-pattern-cell {
    outline: 3px dashed #1d4ed8;
    outline-offset: -3px;
}

.paste-pattern-target {
    outline: 3px solid #dc2626;
    outline-offset: -3px;
}

#copyPatternButton.active {
    font-weight: bold;
    border: 2px solid #1d4ed8;
}

.paste-pattern-preview {
    position: relative;
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.8);
}

.paste-pattern-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(220, 38, 38, 0.18);
    pointer-events: none;
}

/*============================================= aside */

.aside_container {
    font-size: 0.8rem;
    margin-top: 50px;
    width: 200px;
}

.aside_container button, .aside_table select {
    width: 100%;
}

.aside_container>p {
    margin-top: 10px;
}

aside select {
    margin-top: 5px;
    padding: 7px 0px;
}

.button_top_margin {
    margin-top: 30px;
}

.button_top_margin_low {
    margin-top: 15px;
}

.button_bottom_margin {
    margin-bottom: 30px;
}

.button_bottom_margin_low {
    margin-bottom: 15px;
}

.form_button_small {
padding: 0px;
}

.div_title {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.aside_table {
    width: 200px; 
    border-collapse: collapse;
    overflow: hidden;
    margin-top: 30px;
}

.aside_table_head th, .main_table_vacation_overview th {
    background-color: var(--color-btn); 
    padding: 7px 5px;
    /* font-weight: normal; */
    letter-spacing: 0.1rem;
    /* border-radius: 7px; */
}

.aside_table_head:first-child {
    border-bottom: none;
}

.aside_table tr {
    border-bottom: 1px solid var(--color-black);
}

.aside_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.aside_form_row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* .aside_form button,  */
.aside_form_row button {
    cursor: pointer;
}

.aside_form input, .aside_form_row input {
    padding: 2px;
    width: 100px;
    /* border: none; */
}

.aside_form_input_border {
     border-style: solid;
    border-width: 2px;
}

.aside_form input[type=file]::file-selector-button {
    border: 1px solid var(--color-btn);
    background-color: var(--color-btn);
    border-radius: var(--border-radius-low);
    padding: 5px;
    cursor: pointer;
}

.aside_form input[type=file]::file-selector-button:hover {
    border: 1px solid var(--color-btn-hover);
    background-color: var(--color-btn-hover);
}

.aside_form input[type="file"]{
    padding: 5px;
    width: 100%;
    border: none;
    cursor: pointer;
}

.aside_button_table {
    margin-top: 20px;
}

.aside_table_row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.aside_table_row_icon {
    font-size: 20px;
}

.permission_div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.permission_form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
}

  /* =========================== car plan =========================*/
.car_insurance {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.upload_insurance_button {
    color: var(--color-btn);
    cursor: pointer;
}

input.upload_file_button::file-selector-button {
    border: 1px solid var(--color-btn);
    background-color: var(--color-btn);
    border-radius: var(--border-radius-low);
    padding: 5px;
    cursor: pointer;
    width: 50%;
}

input.upload_file_button::file-selector-button:hover {
    border: 1px solid var(--color-btn-hover);
    background-color: var(--color-btn-hover);
}

.upload_file_button {
    background-color: var(--color-dark-white);
    border: none;
    width: 100%;
}

  /* =========================== employees=========================*/
.generation_loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
}

.generation_loader.active {
    display: flex;
}

.generation_loader_content {
    width: min(90%, 380px);
    padding: 32px 40px;

    text-align: center;

    background: #ffffff;
    border-radius: 14px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.loader-spinner {
    width: 54px;
    height: 54px;

    margin: 0 auto 20px;

    border: 6px solid #e5e7eb;
    border-top-color: var(--color-btn);

    border-radius: 50%;

    animation: spin .8s linear infinite;
}

.generation_loader_title {
    margin-bottom: 8px;

    font-size: 20px;
    font-weight: 700;

    color: #111827;
}

.generation_loader_text {
    font-size: 14px;
    line-height: 1.5;

    color: #6b7280;
}
.generation_progress {
    width: 100%;
    height: 10px;
    margin-top: 20px;

    overflow: hidden;

    background: #e5e7eb;
    border-radius: 999px;
}

.generation_progress_bar {
    width: 0%;
    height: 100%;

    background: var(--color-btn);
    border-radius: inherit;

    transition: width 0.3s ease;
}

.generation_progress_percent {
    margin-top: 8px;

    font-size: 14px;
    font-weight: 600;

    color: #374151;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

  /* =========================== media =========================*/
@media (max-width: 1300px) {
    nav {
        width: 100px; 
        position: relative;
    }

    .user-infos {
        display: none;
    }

    .navbar_top img {
        width: 100px;
    }

.navbar_middle {
	margin:0px;
}

    .navbar_middle ul li {
        display: flex;
        justify-content: center;
    }

    .navbar_middle ul li h3 {
        display: none;
    }

    .navbar_middle ul li a, .navbar_bottom ul li a {
        display: flex;
        justify-content: center;
        margin-left: 0px;
        width: 50px;
        border-radius: var(--border-radius);
    }

    .navbar_middle ul li a::before {
        display: none;
    }

    .navbar_bottom {
        position: relative;
        bottom: 0rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    } 

    .navbar_bottom h3 {
        display: none;
    }

    aside {
        display: none;
    }
}

@media (max-width: 800px) {
    .material-symbols-sharp {
        font-size: 50px;
    }

    .main-container {
        position: relative;
        width: 100%;
        height: 97vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        margin: 0;
    }

    nav, main {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        border-radius: 0px;
        box-shadow: none;
    }
    
    .navbar_middle a, .navbar_middle a:hover, .navbar_middle a.active, .navbar_bottom a, .navbar_bottom a:hover {
        margin-left: 0;
        margin-top: 0px;
        margin-right: 20px;
    } 

    .navbar_bottom {
        margin: 0px;
    } 

    .navbar_middle a.active {
        height: 100%;
        width: 100%;
    }

    nav .navbar_middle ul, nav .navbar_bottom ul  {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .form_container {
        max-width:100%;
        width:100%;
    }
    
.center_calendar {
    margin: 0px;
}
    .fill_ecp_calendar_days {
        flex-direction: row;
   
    }
}