/* Write CSS Here */
/* External CSS */
/* File name: style.css */

/* .document-title-main {

} */

@font-face {
    font-family: "NunitoSans";
    src: url("assets/NunitoSans_10pt-Regular.ttf");
}

@font-face {
    font-family: "NunitoSans";
    src: url("assets/NunitoSans_7pt-Light.ttf");
}

@font-face {
    font-family: "Quicksand";
    src: url("assets/Quicksand-Medium.ttf");
}

* {
    margin: 0.1em;
    padding: 0.1em;
    box-sizing: border-box;
}

body {
    display: grid;
    /* grid-template-rows: 1fr 1fr 1fr; */
    align-items: center;
    justify-content: space-around;
    background: #5c6365;
    overflow: scroll;
    max-width: 100%;
    height: auto;
    /* background: #3fc9fb; */
    /* background: linear-gradient(180deg, #3fc9fb 0%, #fc466b 100%); */
}

/* from countdown start */
/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100hv;
    color: #fff;
    font-family: 'Arial', sans-serif;
} */

.countdown-container {
    display: flex;
    gap: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
    background-color: #222;
    font-family: 'NunitoSans';
    font-size: 1.5em;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5px;
    border-radius: 1em;
    min-width: 80px;
    transition: transform 0.3s;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: aliceblue;
}

.countdown-item:hover {
    transform: translateY(-10px);
}

/* from countdown end*/

.navigationBar {
    width: 500px;
    overflow: scroll;
}

.toggleWrapper {
    width: 300px;
    float: right;
}

.input-field {
    /* overflow: hidden; */
    display: flex;
    justify-content: center;
    margin: 10px;
    text-align: center;
}

.input-field input {
    display: flex;
    padding: 5px;
    text-align: center;
}

.output {
    display: flex;
    padding: 5px;
    text-align: center;
    font-family: "NunitoSans";
    font-size: 0.9em;
}

.content-table {
    /* ALL - Table */
    border-collapse: collapse;
    margin: 10px 0px;
    font-family: "NunitoSans";
    font-size: 0.9em;
    /* min-width: 200px; */
    border-radius: 15px 15px 0px 0px;
    overflow: hidden;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.15);
    z-index: 3;
    backdrop-filter: blur(2rem);
}

.content-table_tbody {
    background-color: #ffffffe7;
    /* border-left: 3px solid rgb(169, 209, 236);*/
    border-right: 3px solid #F0F0F1;
    border-left: 3px solid #F0F0F1;
    /* border-bottom: 3px solid rgb(169, 209, 236); */
}

.table_numeric--empty,
.table_weekday--empty,
.table_note--empty,
.table_publicholiday--empty,
.table_roster--empty,
.table_absence--empty {
    background-color: #F0F0F1;
}

.endOfMonth {
    border-bottom: 3px solid rgb(169, 209, 236);
}

.table_numeric--empty {
    /* border-bottom: 3px solid #F0F0F1; */
    border-left: 3px solid rgb(169, 209, 236);
}

.table_absence--empty :last-child {
    border-right: 3px solid #F0F0F1;
}


/* .content-table_tbody tr:nth-child(even) {
    table body - alternating white grey backgrounds
    background-color: #ffffffd3;
} */

.calendar-header {
    /* header/title - Dienstkalender 2025 - Elmar */
    border-collapse: collapse;
    border: 3px solid rgb(169, 209, 236);
    background-color: rgb(169, 209, 236);
    font-family: "Quicksand";
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

.month_header {
    /* months row - Januar, Februar, März... */
    border-collapse: collapse;
    border: 3px solid rgb(169, 209, 236);
    background-color: rgb(169, 209, 236);
    font-family: 'NunitoSans';
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

tfoot {
    background-color: #F0F0F1;
    border-left: 3px solid #F0F0F1;
    border-right: 3px solid #F0F0F1;
    border-bottom: 3px solid #F0F0F1;
}

/************ default columns ************/
.table_numeric {
    border-left: 3px solid rgb(169, 209, 236);
    padding: 2.5px 3px;
    min-width: 30px;
    text-align: left;
}

/* .table_numeric:first-child {
    border-left: none;
} */

.table_weekday {
    min-width: 30px;
    text-align: left;
}

.table_note {
    min-width: 30px;
    text-align: center;
}

.table_publicholiday {
    min-width: 50px;
    text-align: center;
}

.table-roster {
    width: 60px;
    text-align: center;
}

.table_absence {
    border-right: 3px solid rgb(169, 209, 236);
    padding: 2.5px 3px;
    min-width: 30px;
    text-align: center;
}

/************ default footer td ************/

tfoot td table {
    border-collapse: collapse;
    background-color: #dbdbdb;
    display: flex;
    margin-top: 10px;
}

.tfoot td {
    vertical-align: top;
    font-size: 0.9em;
}

.footer_numeric {
    min-width: 30px;
    text-align: left;
}

.footer_weekday {
    min-width: 20px;
    text-align: right;
}

.footer_note {
    min-width: 30px;
    text-align: center;
}

.footer_publicholiday {
    min-width: 50px;
    text-align: center;
}

.footer-roster {
    min-width: 60px;
    text-align: center;
}

.footer_absence {
    min-width: 30px;
    text-align: center;
}



/***************** roster *****************/
.table_roster tr:nth-child(even) {
    /* table body - alternating white grey backgrounds  */
    background-color: #e2e2e28c;
}

.C-case__column--roster {
    text-align: center;
    font-weight: bold;
    width: 60px;
    color: #f8ff7d;
    background-color: #e3ee0c;
    /*background-color: rgb(212, 115, 95);*/
}

.F-case__column--roster {
    text-align: center;
    font-weight: bold;
    width: 60px;
    color: rgba(255, 204, 194, 0.462);
    background-color: #F3997E;
    /*background-color: rgb(212, 115, 95);*/
}

.S-case__column--roster {
    text-align: center;
    font-weight: bold;
    width: 60px;
    color: rgba(255, 236, 191, 0.496);
    background-color: #FFD74E;
    /*background-color: rgb(241, 187, 61);*/
}

.N-case__column--roster {
    text-align: center;
    font-weight: bold;
    width: 60px;
    color: rgba(156, 200, 250, 0.519);
    background-color: #0B5394;
    /*background-color: rgb(18, 92, 177);*/
}

.OFF-case__column--roster {
    text-align: center;
    font-weight: bold;
    width: 60px;
    color: rgb(195, 219, 177);
    background-color: #DBECC3;
    /*background-color: rgb(214, 228, 199);*/
}

/***************** sundays *****************/
.SO-case__column--numeric,
.SO-case__column--weekday {
    text-align: left;
    font-weight: bolder;
    color: rgba(177, 33, 33, 0.664);
    background-color: rgb(216, 216, 216);
}

.SO-case__column--note,
.SO-case__column--publicholiday,
.SO-case__column--absence {
    text-align: center;
    font-weight: bolder;
    color: rgba(177, 33, 33, 0.664);
    background-color: rgb(216, 216, 216);
}

/************* public holidays *************/
.publicHoliday-case__column--numeric,
.publicHoliday-case__column--weekday {
    text-align: left;
    font-weight: bolder;
    color: rgba(177, 33, 33, 0.664);
    background-color: rgb(216, 216, 216);
}

.publicHoliday-case__column--note,
.publicHoliday-case__column--publicholiday,
.publicHoliday-case__column--absence {
    text-align: center;
    font-weight: bolder;
    color: rgba(177, 33, 33, 0.664);
    background-color: rgb(216, 216, 216);
}

/***************** absence *****************/
.absence-case__tracking--numeric,
.absence-case__tracking--weekday {
    text-align: left;
    font-weight: normal;
    color: #9eb383;
    /*color: rgba(144, 206, 106, 0.6);*/
    background-color: #ceeba99b;
    /*background-color: rgba(196, 232, 174, 0.75);*/
}

.absence-case__tracking--note,
.absence-case__tracking--publicholiday,
.absence-case__tracking--roster,
.absence-case__tracking--absence {
    text-align: center;
    font-weight: normal;
    color: #9eb383;
    /*color: rgba(144, 206, 106, 0.6);*/
    background-color: #ceeba99b;
    /*background-color: rgba(196, 232, 174, 0.75);*/
}

/**************************************************************************************** 
- add another tracking column for 'nu during off is none' or set nu into roster override
- add another tracking column for absence column is '.' then output 'dot'
*****************************************************************************************/


.dot-case__column--numeric,
.dot-case__column--weekday {
    text-align: left;
    font-weight: normal;
    color: #ecc3ce;
    color: rgba(206, 106, 178, 0.6);
    background-color: #392bd4;
    background-color: rgb(194, 174, 232);
}


.dot-case__column--note,
.dot-case__column--publicholiday,
.dot-case__column--roster,
.dot-case__column--absence {
    text-align: left;
    font-weight: normal;
    color: #ecc3ce;
    color: rgba(206, 106, 178, 0.6);
    background-color: #392bd4;
    background-color: rgb(194, 174, 232);
}


/******************* past *******************/
.past-case__column--numeric,
.past-case__column--weekday,
.past-case__column--note,
.past-case__column--publicholiday,
.past-case__column--roster,
.past-case__column--absence {
    color: rgba(89, 89, 89, 0.364);
    background-color: rgba(162, 172, 184, 0.319);
    font-weight: normal;
}

/*************** toggle switch ***************/
body h1 {
    text-align: center;
    color: gray;
}

body h2 {
    text-align: center;
    color: gray;
}

.inactiveMixin {
    content: "";
    position: absolute;
    display: block;
}

.beforeAnimation {
    -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
}

.afterAnimation {
    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
}

.toggleWrapper {
    margin: auto;
    /* padding: 20px; */
    width: 55px;
    /* border: 1px solid #5e6365; */
    /* margin-top: 20px; */
    border-radius: 5px;
    background: #5e6365;
}

.toggleWrapper input.mobileToggle {
    opacity: 0;
    position: absolute;
}

.toggleWrapper input.mobileToggle+label {
    position: relative;
    display: inline-block;
    user-select: none;
    -moz-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    -webkit-tap-highlight-color: transparent;
    height: 31px;
    width: 53px;
    border: 1px solid #90979a;
    border-radius: 60px;
}

.toggleWrapper input.mobileToggle+label:before {
    content: "";
    position: absolute;
    display: block;
    -moz-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    -o-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
    height: 31px;
    width: 51px;
    top: 0;
    left: 0;
    border-radius: 30px;
}

.toggleWrapper input.mobileToggle+label:after {
    content: "";
    position: absolute;
    display: block;
    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    background: whitesmoke;
    height: 28px;
    width: 28px;
    top: 1px;
    left: 0px;
    border-radius: 60px;
}

.toggleWrapper input.mobileToggle:checked+label:before {
    background: #2ecc71;
    -moz-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
    -o-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
    -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
    transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
}

.toggleWrapper input.mobileToggle:checked+label:after {
    left: 24px;
}











.testtable01 {
    background-color: #338558;
    border-collapse: collapse;
}

.testheader01 {
    background-color: #fcffd6;
}

.testbody01 {
    background-color: #cfd2f4;
}

.testfooter01 {
    background-color: #ffe0d6;
}


.wrapper {
    display: grid;
    background-color: #338558;
    grid-template-columns: repeat(6, 1fr);
    gap: 0em;
    padding: 0em;

}

.wrapperdiv01 {
    background-color: #cfd2f4;
}