html, body{
    width: 99%;
    height: 99%;
    margin: 0px;
    font-family: Arial;
    /*font-size: 1vw;*/
}

.headerDiv{
    /*background-color:rgb(42 ,81, 151);*/
    background-color:#0068a4;/*#001C40; /*#122b57;*/
    position: fixed;
    height: 130px;
    width: 100%;
    z-index: 6;
    top: 0;
}
.RequestDivContainer{
    font-family: arial;
    position:absolute; 
    top:55px; 
    width: 90%; 
    height:80%; 
    background:rgb(255,255,255); 
    border: 1px solid rgb(255,255,255); 
    /*border-radius:10px;*/
    margin-left:50%; 
    transform: translateX(-50%);
    overflow-y:scroll;
}
.ButtonsDivRequest
{
    position:absolute; 
    top: calc(55px + 80%); 
    background:rgba(255,0,0,0); 
    border: 1px solid rgba(255,0,0,0); 
    border-radius:10px;
    margin-left:50%; 
    transform: translateX(-50%);
    text-align:center;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#listFilter
{
    width: 100%;
    font-size: 20px;
    text-align: center;
    border: 1px solid lightgray;
    margin: 2px;
    padding: 2px;
    color: darkslategray;
    background: lightgray;
}
.vrEditbtn,.vrSendbtn, .vrcancelbtn,.vrDeletebtn
{
    cursor: pointer; 
    margin: 5px 10px 5px 5px;
    outline: none; 
    background: white; 
    border: none; 
    padding: 5px; 
    /*border-radius: 5px; */
    font-size: 20px;
    width:150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#requests, #SaveRequests
{
    outline: none; 
    border: 1px solid lightgray; 
    /*border-radius: 5px; */
    /*position: absolute; 
    top: 50%; 
    left: 0px; */
    /*transform: translate3d(-50%, -50%, 0px); */
    cursor: pointer; 
    padding: 5px; 
    /*width: 80%; */
    /*font-size: 20px;*/
    /*margin-left: 50%;*/
    display: inline-block
}
#requests{margin-right: 5px;}
#SaveRequests:hover
{
    /*animation: makebigger 0.5s ease;
    transform: scale(1.2);*/
}
@keyframes makebigger {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.11);
    }
    20% {
        transform: scale(1.12);
    }
    30% {
        transform: scale(1.13);
    }
    40% {
        transform: scale(1.14);
    }
    50% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(1.16);
    }
    70% {
        transform: scale(1.17);
    }
    80% {
        transform: scale(1.18);
    }
    90% {
        transform: scale(1.19);
    }
    100% {
        transform: scale(1.2);
    }
}
.vrInfo3
{
    text-align: center;
    font-size: 40px;
    color: gray;
}
/*.vrDeletebtn
{
    cursor: pointer; 
    margin: 5px 5px 5px 10px; 
    outline: none; 
    background: white; 
    border: none; 
    padding: 5px; 
    border-radius: 5px; 
    font-size: 20px;
    width:150px;
}*/
.tableHeader{
    border-spacing: 0px;
    width: 100%;
    table-layout: fixed;
}
.tableHeader td{
    width: 100%;
}
table.tableHeader tr:nth-child(1) td:nth-child(1),
table.tableHeader tr:nth-child(1) td:nth-child(3)
{
    width: 33%;
}
table.tableHeader tr:nth-child(1) td:nth-child(3)
{
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
}
.tableHeader td h1 {
    color:white;
}
.headerTitle{
    display: block;
}
.logoText{
    display: block;
    color: white;
    position: relative;
    height: 60px;
    text-align: center;
    width: 100%;
}
.logoText div:nth-child(1){
    display: inline-block;
    position: absolute;
    left: calc(50% - 200px);
}
.logoText div:nth-child(1) sup{
    position: absolute; 
    right: 20px;  
    top:10px; 
}
.logoText div:nth-child(2){
    font-size: 30px;
    position: absolute;
    height: 60px;
    left: 50%;
    line-height: 2;
}

.headeDivIcon{
    display: inline-block;
    color: white;
    width: 48px;
    height: 48px;
    margin: 2px;
}
/*login area*/
.login-container{
    position: absolute;
    top: 150px;    
    left: 50%;
    transform: translate(-50%, 0);
}
#loginform{
    height: 100%;
}
.formDiv{
    position:relative;
    /*left:-50%;*/
    border: 1px solid gray;
    /*margin: 5px;*/
    border-radius: 5px;
    /*width: min-content;*/
    /*padding: 5px;*/
    height: 100%;
    margin:0 auto;
    white-space: nowrap;
}
.form_errs{
    background: #E8F0FE;
    min-height: 5vw;
    padding: 5px 0px 5px 0px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid lightgrey;
    width: calc(100% - 20px);
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}
.form-data{
    height:80%;
    padding: 0px 2% 0px 2%;
}
.formDiv h3, h4{
    margin-left:5px;
}
.formDiv h5{
    margin:5px;
}
.formDiv  input[type="text"],
.formDiv input[type="password"]{
    width: calc(100% - 20px);
    height: 30px;
    padding: 4px;
    border-width: 0px;
    border: 1px solid lightgray;
    margin: 5px ;
    background:#E8F0FE;
    -webkit-appearance: none;
    -webkit-border-radius: 0p;
}
.formDiv input[type="submit"]
{
    width: calc(100% - 8px);
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    height: 38px;
    border-radius: 2px;
    border: 1px solid gray;
    margin: 5px;
    /*font-size: 1vw;*/
}
.vInfo2, #vInfo2_forms2{text-align: center; /*padding-left:10px;*/}
.selectionInfoC { text-align: center;font-size: 18px;}
.vrclsBtn{position:absolute; right:5px; top:0; height:50px; width:50px; cursor:pointer;}
.vInfo {/*margin: 50% 0px 0px 0px;*/text-align: center};
.DataTableSub + div p.vinfo{
    margin-top: 0;
}

@media only screen
{
    .formDiv input[type="submit"]:hover{
    color: white;
    background: rgb(24, 95, 226);
    border-color: white;
    cursor: pointer;
    }
}
.formDiv p{
    padding: 0px;
    margin: 0px;
}
/*home page*/
.tableHeader{
    color:white
}
.tableHeader td{
    position: relative;
}
.tableHeader td:nth-child(3) ,
.tableHeader td:nth-child(4) ,
.tableHeader td:nth-child(1) ,
.tableHeader td:nth-child(5) {
    /*position: absolute;
    top: 5px;
    display: block;*/
    width: 24px;
    height: 24px;
    vertical-align: top;
}
.headeDivIcon img,
.headeDivIcon input[type="image"]
{
    width: 100%;
    height: 100%;
}
.ModuleName{
    width: 100%;
    /*position: relative;*/
    /*position: fixed;
    left: 0;
    top: 0;*/
}
.logocontainer
{
    /*width: 267px;
    margin-left: 50%;
    transform: translateX(-50%);  
    /*background: #3c79c4;  */
}
.name{
    font-size: 25px;
    /*font-weight: bold;*/
    /*width: 267px;
    margin-left: 50%;
    transform: translateX(-50%);
    /*background-color: cornflowerblue;*/
}
.ModuleName sup{
    position: absolute;
    top: 10px;
    /*left: calc(50% + 70px);*/
    transform: translateX(-40px);
}
.menuSlid{
    width: 300px;
    height: calc(100% - 150px);
    padding-bottom: 50px;
    position: fixed;
    top: 130px;
    right: 0;
    background: rgb(238, 236, 236);
    z-index: 7;
    overflow: scroll;
}
.menuSlid a{
    width: calc(100% - 14px);
    display: inline-block;
    margin: 5px;
    text-decoration: none;
    color: rgb(59, 58, 58)	;
    line-height: 1.5;
    font-size: 15px;
    padding: 2px;
    background: rgb(235, 230, 230);
    border-radius: 5px;
}
@media only screen
{
    .menuSlid a:hover{
    background: rgb(24, 95, 226);
    color: white;
    border-radius: 5px;
    }
}

.infoHeader{
    width: 100%;
    height: 40px;
    background-color: #0068a4;/*#001C40;/*#1a304d; /*rgb(32, 121, 223);*/
    position: fixed;
    top: 130px;
    color: white;
    padding-left: 3px;
    z-index: 100;
}
.FormTools{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    line-height: 2.5;
    box-sizing: border-box;
    padding-right: 5px;
}
.FormTools input[type="image"]
{
    vertical-align: middle;
}
.FormTools select{
    height: 25px;
    /*font-size: 20px;*/
}
.dataContainer{
    position: absolute;
    top: 170px;
    z-index: 3;
    width: 99%;
    margin-left:0.5%;
    height: calc(100% - 190px);
    /*padding-top: 10px;
    padding-left: 10px;*/
    padding-bottom: 10px;
    margin:10px 0px 10px 0px;
    overflow-y: hidden;
    padding-top: 20px;
    height: calc(100% - 180px);
    box-sizing: border-box;
}
.dataContainer-withot-scroll{
    position: absolute;
    top: 170px;
    z-index: 3;
    width: 99%;
    margin-left:0.5%;
    height: calc(100% - 190px);
    /*padding-top: 10px;
    padding-left: 10px;*/
    padding-bottom: 10px;
    margin:10px 0px 10px 0px;
    padding-top: 20px;
    height: calc(100% - 180px);
    box-sizing: border-box;
}
.menu-element{
    display: inline-block;
    border:1px solid rgb(184, 181, 181);
    border-radius: 5px;
    text-align: center;
    width: 120px;
    height: 120px;
    margin: 10px;
    background: #eeedf3;/*linear-gradient(#eeedf3, #dbd6d6, #eae9f8);*/
    padding-top: 10px;
    font-size: 12px;
}
.menu-element a {
    text-decoration: none;
    color: gray;
}
@media only screen
{
    .menu-element:hover{
    background: #0078d7; /*rgb(46, 85, 255);*/
    border-color: white;
    }
    .menu-element a:hover{
        color: white;
    }
}


.footer{
    width: 100%;
    background: #001C40; /*rgb(19, 84, 204);*/
    color: white;
    font-size: 12px;
    position: fixed;
    text-align: center;
    bottom: 0;
    z-index: 7;
    left: 0;
}
.DataTableContainer{
    margin: 0 auto;
    width: 97%;
    /*padding-bottom: 10px;*/
    overflow: overlay;
    height: 97%;
    /*padding-right: 15px;*/
    position: relative;
    /*border-bottom: 1px solid gray;*/
    box-sizing: border-box;
    font-size: 0.9em;
    /*scrollbar-width: none; /* Firefox */
    /*-ms-overflow-style: none;  /* Internet Explorer 10+ */
    -webkit-overflow-scrolling: touch;
    /*border: 1px solid rgb(220,220,220);*/
}
/*.DataTableContainer::-webkit-scrollbar { /* WebKit */
    /*width: 0;
    height: 0;
}*/
.DataTable{
    border-spacing: 0px;
    margin: 0 auto;
    /*width:90%;*/
    table-layout: fixed;
    box-sizing: border-box;
}
#WorkingHoursAccount{
    width: 50%;
}
/*.DataTable tr:nth-child(1) td,th{
    border-top: 1px solid gray;
}
.DataTable tr td:nth-child(1), th:nth-child(1)
{
    border-left: 1px solid gray;
}*/
table.DataTable td{
    /*border-bottom: 1px solid gray;
    border-right: 1px solid gray;*/
    padding-left:2px;
    padding-right: 2px;
    padding: 5px;/*10px;*/
    word-break: keep-all;
    box-sizing: border-box;
    /*border : 1px solid  rgb(220,220,220);*/
    border-right: 1px solid rgb(220,220,220);
    border-top: 1px solid rgb(220,220,220);
}
table.DataTable th{
    background: white;
    border-bottom: 1px solid rgb(220,220,220);
    border-right: 1px solid rgb(220,220,220);
    border-top: 1px solid rgb(220,220,220);
    padding-left:2px;
    padding-right: 2px;
    padding: 5px;/*10px;*/
    word-break: keep-all;
    box-sizing: border-box;
}
table.DataTable tr:last-child td{
    border-bottom: 1px solid rgb(220,220,220);
}
table.DataTable tr:first-child td{
    border-top: none;
}
table.DataTable tr td:first-child, table.DataTable tr th:first-child{
    border-left:  1px solid rgb(220,220,220);
}
/*.DataTable tr:nth-child(odd) td {
    background-color: #EFF2F6;
}
.DataTable tr:nth-child(even) td {
    background-color: white;
}*/
@media only screen
{
    .DataTable tr:hover /*:not(:first-child)*/ {
    /*background-color: rgb(189, 198, 245);*/
    }
}
/*loader*/
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position:absolute;
    top: 50%;
    left: calc(50% - 120px);
    transform: translate(-50%, -50%);
    opacity: 0.8;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/*********************************************************************/
/*planning                                                           */
/*********************************************************************/
.pmgPlanning {
	/*border:1px solid darkgray;*/
	/*border-collapse: collapse;*/
	opacity : 1;
	font-family:arial;
	font-size: 0.9em;
	/*font-size:0.6vw;*/
	/*background-color: #f9f9f9;*/
	/*width:2000px;*/
    width: 100%;
	margin:0px auto;
	/*margin-top:10px;*/
	color:#4b4b4b;
    /*margin-bottom:50px;*/
    table-layout: auto;
	font-family: arial;
	/*height: 1000px;*/
    position: absolute;
    top: 20px;
    left: 0;
    /*table-layout: fixed;*/
    border-collapse: separate;
    border-spacing: 0px;
    box-sizing: border-box;
}
.plannungheaderbuttons{
    width: auto;
    table-layout: fixed;
    margin-left: 50%;
    transform: translateX(-50%);
}
table.showAll{
	opacity:1;
}
.TODO{opacity:0;}
.modalo{
	visibility: visible;
}
/*.TODO.showAll{
	opacity:0.8;
}*/
.pmgPlanning td {
	/*border:1px solid darkgray;*/
    border-bottom:1px solid rgb(220,220,220);
    border-right:1px solid rgb(220,220,220);
	padding: 2px;
	overflow: hidden;
	/*padding-left:5px;*/
	vertical-align:middle;
	/*width:1%;*/
	font-family: arial;
	position: relative;
	cursor: pointer;
    /*font-size: 17px;*/
    word-wrap: unset;
    box-sizing: border-box;

    /*stop selecting the text*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}
.pmgPlanning tr:nth-child(odd) td:nth-child(1)
{
    /*border-left:1px solid darkgray;*/
}
.pmgPlanning td:nth-child(1)
{
	/*width: 10%;*/
	position: relative;
	/*width: 6%;*/
}
.pmgPlanning td:nth-child(1) > div
{
	position: absolute;
	width: auto;
	top: 0;
}
.pmgPlanning tr td:first-child, .pmgPlanning tr th:first-child{padding-left: 5px;} 
.pmgPlanning th {
    border-right:1px solid rgb(220,220,220);
    border-bottom:1px solid rgb(220,220,220);
	padding: 2px;
	overflow: hidden;
	vertical-align:middle;
	/*width:1%;*/
	font-family: arial;
	border-spacing:0px;
	/*font-size: 20px;*/
	color: #4b4b4b ;
	height: 10px;
    box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.pmgPlanning  tr.borderTop th:first-child {
    border-left: 1px solid rgb(220,220,220) ;
}
.pmgPlanning  tr td:first-child {
    border-left: 1px solid rgb(220,220,220) ;
}
.pmgPlanning tr:nth-child(1) th, 
.pmgPlanning tr:nth-child(2) th{
    /*background: #eff0f1 ;*/
}
.pmgPlanning tr:nth-child(1) th:nth-child(1)
{
    border-left: 1px solid rgb(220,220,220);
}

.pmgPlanning tr:nth-child(1) th:nth-child(8)
{
    width: 20px;
}
.pmgPlanning tr:nth-child(1) th:nth-child(1)
{
    width: 120px;
}
.pmgPlanning tr:nth-child(1) th:nth-child(2)
,.pmgPlanning tr:nth-child(1) th:nth-child(3)
,.pmgPlanning tr:nth-child(1) th:nth-child(4)
,.pmgPlanning tr:nth-child(1) th:nth-child(5)
,.pmgPlanning tr:nth-child(1) th:nth-child(6)
,.pmgPlanning tr:nth-child(1) th:nth-child(7)
{
    width: 70px;
}

.pmgPlanning tr:nth-child(1) th:nth-child(9)
{
   width: 1850px;
}

.pmgPlanning td#bcalender {
	/*font-weight: bold;*/
	vertical-align:middle;
	/*background-color:#eff0f1;*/
    /*width:100px;*/
}
/*.pmgPlanning td['title']:hover{background:red;content: attr(title);}*/
.pmgPlanning td#bcalend { /*font-weight: bold;*/ vertical-align:middle; }
.pmgPlanning td#b{/*background-color:#eff0f1;*//*font-weight:bold;*/}


.pmgPlanning tr { border:1px solid rgb(220,220,220); padding: 1px; }


.rowvalue{background:#EFF0F1; /*font-style:italic;*/}
.planName{width:150px;margin-right:10px;}
.pmgPlanning td.selected{vertical-align:middle;font-size:12px;text-align:center;}
.pmgPlanning tr td:not(:first-child){
    text-align: center;
}

/*.Stable{
	width:110%;height:100%;border-collapse: collapse;margin-left:-5px;margin-top:-1px;margin-bottom:-5px;margin-right:-1px; height:30; border:0;table-layout:absolute;  
}
.Stable tr{
	border-collapse: collapse;
}
.Stable td{
	margin-right:10px;
	border-right: 0px solid #d3d3d3;
	padding-right:5px;
	/*height:20px;
}*/

.Stableplanning{
    width: 100%;
    height: 100%;
    /*margin-top: -10px;*/
    /*padding-top: 5px;*/
    /*margin-left: -9px;*/
    /*margin-bottom: -9px;*/
	border-collapse:collapse;
    position: absolute;
    top: 0;
    left: 0;
    table-layout: fixed;
	/*position: absolute;
	top: 0;*/
}
table.Stableplanning tr td{
	border:1px solid darkgray;
	/*padding: 3% 2% 2% 2% ;
	width: 6%;*/
    /*background-color: red;*/
    width: 6%;
}
.pmgPlannin{
	/*border:1px solid black;*/
}

.pmgPlannin tr td:first-child {font-weight:normal;}

	/*loading animation*/
	.progressBar{
		display:block;
		margin:0 auto;
		position: absolute;
		left: 0 ;
		width:100%;
		text-align: center;
		height:auto;
	}
.main{
    position: fixed;
    width: 100%;
    z-index: 7;
    /*background-color: #405570; /*rgb(84, 154, 235);*/
    text-align: center;
    height: 50px;
    top: 170px;
    left: 0;
    box-sizing: border-box;
    background: white;
}
.main div{
    /*display: inline;*/
    text-align: left;
    
}
.main div:hover{cursor: pointer;}
.main div.bedo2{
    position: relative;
    height: 100%;
}
.main div:nth-child(2) div#bton,
.main div:nth-child(2) div#bton1 {
    /*line-height: 3;*/
    width: 200px;
    display: inline-block;
    margin-top: 5px;
}
.main div:nth-child(2) div img{
    vertical-align:sub;
}
.div1{
    border: 1px solid lightgray;
    width: 200px;
    display: block;
    margin-left: 50%;
    transform: translateX(-50%);
}
.bton, .bton1{
    width: 100%;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.pmgPlanDemandTr td:not(:first-child){border-top: 1px solid rgb(220,220,220);}
/*********************************************************************/
/*exportTable                                              */
/*********************************************************************/
.ExportTable{
	font-family:arial;
	/*font-size: 0.7vw;*/
	/*background-color: #f9f9f9;*/
	margin:0px auto;
	color:#4b4b4b;
    table-layout: auto;
	font-family: arial;
    border-collapse: separate;
    border-spacing: 0px;
    box-sizing: border-box;
    border:none;
    width  : 100%;  
}
.ExportTable tr th, .ExportTable tr td{
    border-bottom: 1px solid rgb(220,220,220);
    border-right: 1px solid rgb(220,220,220);
    /*font-size: 20px;*/
    position: relative;
}
.ExportTable tr:first-child th, .ExportTable tr:first-child  td{
    border-top: 1px solid rgb(220,220,220);
}
.ExportTable tr > td{
    
}
.borderTop th{
    border-top: 1px solid rgb(220,220,220);
}
.ExportTable tr:nth-child(1) th:first-child, 
.ExportTable tr:nth-child(2) th:first-child,
.ExportTable tr td:first-child{
    /*background: #eff0f1 ;*/
    padding-left:5px;
    border-left: 1px solid rgb(220,220,220);
}
.ExportTable tr:nth-child(1) th
{
    border-top: 1px solid rgb(220,220,220);
}


/*********************************************************************/
/*Actual and debit plan                                              */
/*********************************************************************/

.PlanMonthGruop, .PlanMonthGruopService{
	font-family:arial;
	/*font-size: 0.7em;*/
	/*background-color: #f9f9f9;*/
    width: 100% impr !important;
	margin:0px auto;
	color:#4b4b4b;
    table-layout: auto;
	font-family: arial;
    position: absolute;
    top: 0px;
    left: 0;
    border-collapse: separate;
    border-spacing: 0px;
    box-sizing: border-box;
    border:none;
}
.PlanMonthGruop tr th, .PlanMonthGruop tr td, 
.PlanMonthGruopService tr th, .PlanMonthGruopService tr td
{
    border-bottom: 1px solid rgb(220,220,220);
    border-right: 1px solid rgb(220,220,220);
    /*font-size: 20px;*/
    position: relative;
}
.PlanMonthGruop tr > td,
.PlanMonthGruopService tr > td
{
    padding: 5px;
    min-width: 50px;
    min-height: 50px;
    height:20px;
}
.borderTop th{
    border-top: 1px solid rgb(220,220,220);
}
.PlanMonthGruop tr:nth-child(1) th:first-child, 
.PlanMonthGruop tr:nth-child(2) th:first-child,
.PlanMonthGruop tr td:first-child,
.PlanMonthGruopService tr:nth-child(1) th:first-child, 
.PlanMonthGruopService tr:nth-child(2) th:first-child,
.PlanMonthGruopService tr td:first-child
{
    /*background: #eff0f1 ;*/
    padding-left:5px;
    border-left: 1px solid rgb(220,220,220);
}
.PlanMonthGruop tr:nth-child(1) th,
.PlanMonthGruopService tr:nth-child(1) th
{
    border-top: 1px solid rgb(220,220,220);
}

.PlanMonthGruop tr:nth-child(1) th:nth-child(8),
.PlanMonthGruopService tr:nth-child(1) th:nth-child(8)
{
    width: 20px;
}
.PlanMonthGruop tr:nth-child(1) th:nth-child(1),
.PlanMonthGruopService tr:nth-child(1) th:nth-child(1)
{
    width: 120px;
}
.PlanMonthGruop tr:nth-child(1) th:nth-child(2)
,.PlanMonthGruop tr:nth-child(1) th:nth-child(3)
,.PlanMonthGruop tr:nth-child(1) th:nth-child(4)
,.PlanMonthGruop tr:nth-child(1) th:nth-child(5)
,.PlanMonthGruop tr:nth-child(1) th:nth-child(6)
,.PlanMonthGruop tr:nth-child(1) th:nth-child(7)
,.PlanMonthGruopService tr:nth-child(1) th:nth-child(2)
,.PlanMonthGruopService tr:nth-child(1) th:nth-child(3)
,.PlanMonthGruopService tr:nth-child(1) th:nth-child(4)
,.PlanMonthGruopService tr:nth-child(1) th:nth-child(5)
,.PlanMonthGruopService tr:nth-child(1) th:nth-child(6)
,.PlanMonthGruopService tr:nth-child(1) th:nth-child(7)
{
    width: 70px;
}

.PlanMonthGruop tr:nth-child(1) th:nth-child(9),
.PlanMonthGruopService tr:nth-child(1) th:nth-child(9)
{
   width: 1850px;
}

.PlanMonthGruop td#bcalender,
.PlanMonthGruopService td#bcalender
 {
	/*font-weight: bold;*/
	vertical-align:middle;
	/*background-color:#eff0f1;*/
    /*width:100px;*/
}

.PlanMonthGruop td font, .PlanMonthGruop td font div, .PlanMonthGruop td font div form,
.PlanMonthGruopService td font, .PlanMonthGruopService td font div, .PlanMonthGruopService td font div form,
.pmgPlanning td font, .pmgPlanning td font div, .pmgPlanning td font div form
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.PlanMonthGruop td font,
.PlanMonthGruopService td font,
.pmgPlanning td font
{
    /*line-height: 1.5;*/
    text-align: center;
}
.PlanMonthGruop td font div form input[type="submit"],
.PlanMonthGruopService td font div form input[type="submit"],
.pmgPlanning td font div form input[type="submit"]
{
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    outline: none;
    border-radius: 5px;
    border: none;
    -webkit-appearance: none;
    -webkit-border-radius: 5p;
    /*background-color: rgba(255,255,255,0);*/
    /*height: 80%;*/
    cursor: pointer;
    transition: width 0.1s, height 0.1s, left 0.1s, top 0.1s, font-size 0.1s;
}
@media only screen
{
    .PlanMonthGruop td font div form input[type="submit"]:hover,
    .PlanMonthGruopService td font div form input[type="submit"]:hover,
    .pmgPlanning td font div form input[type="submit"]:hover
    {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        font-size: 1vw;
    }
}
.PlanMonthGruop td font div form input[type="Image"],
.PlanMonthGruopService td font div form input[type="Image"],
.pmgPlanning td font div form input[type="Image"]
{
    position: absolute;
    bottom: 0;
    left: 0;
}

.StableMarket, .Stable{
    position: absolute;
    left: 0;
    top: 0;
    width:  calc(100% + 1px);/*calc(100% + 1px);*/
    height: calc(100% + 0px);/* calc(100% + 1px);*/
    border-collapse: collapse;
    table-layout: fixed;
    border:none;
}
table.StableMarket tr td:not(:last-child), .Stable tr td:not(:last-child){
    border-right: 1px solid rgb(220,220,220);
    width: auto;
}

table.subTableChecks{
    border-collapse: collapse;
    border:none;
}
table.subTableChecks td{
    border:none;
    position: relative;
}
table.subTableChecks td label{
    font-size: 1em;
    font-weight: normal;
    color:black;
}

#myDemoTable td[textvertical='t'],  #myDemoTable th[textvertical='t']
{
    vertical-align: top;
}
/*********************************************************************/
/*TimeRecording                                                      */
/*********************************************************************/

.TimerContainer{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    min-height: 300px;
}
.TimerContainer table td input[type="submit"]
{
    
    top: 0;
    left: 0;
    width: calc(100% - 15px) ;
    height: 100%;
    /*border-radius: 25px;*/
    border: 1px solid gray;
    /*font-weight: bold;*/
    font-size: inherit;
    padding: 10px;
}
@media only screen
{
    .TimerContainer table td input[type="submit"]:hover
    {
        cursor: pointer;
        color: white;
        border: 1px solid lightgray;
        background: rgb(24, 95, 226);
    }
}

.TimerContainer table td input[type="text"]
{
    width: calc(100% - 20px);
    height: 30px;
    padding: 4px;
    border-width: 0px;
    border: 1px solid lightgray;
    margin: 5px;
    background: #E8F0FE;
    -webkit-appearance: none;
    -webkit-border-radius: 0p;
    text-align: center;
    font-size: 25px;
}
/*
.TimerContainer table{
    width: 100%;
    border-collapse: separate;
    
}
.TimerContainer table td{
    text-align: center;
    height: 50px;
    font-size: 30px;
    position: relative;
    padding: 10px;
}
.TimerContainer table td input[type="submit"]
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% ;
    height: 100%;
    border-radius: 25px;
    border: 1px solid gray;
    font-weight: bold;
    font-size: inherit;
}
.TimerContainer table td input[type="submit"]:hover
{
    cursor: pointer;
    color: white;
    border: 3px solid white;
    background: rgb(24, 95, 226);
}
.TimerContainer table td input[type="text"]
{
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
    width: 200px;
    height: calc(100% - 10px);
    padding: 4px;
    border-width: 0px;
    border: 1px solid lightgray;
    text-align: center;
    font-size: inherit;
}
.TimerContainer table td p{
    color: white;
    margin: 0px;
}
.PersonalPlanDayInfo{
    color: #575d61;
    height: 50px;
    text-align: center;
}
*/
#clockDisplay{
    width: 100%;
    text-align: center;
    color: #575d61;
    display: block;
    font-size: 30px;
}
#clockDisplay span, .TimerContainer table td span{
    padding: 5px ;
    border-bottom: 1px solid white;
    border-radius: 2px;
    font-weight: bold;
}
.tab td{text-align: center; position: relative;}
/* ***************************************************************** */
/*Bringschichten                                                     */
/* ***************************************************************** */
.BSRR{
	/*border:1px solid rgb(220,220,220);*/
	border-collapse: separate;
    border-spacing: 0px;
	font-family:arial;
	font-size: 0.9em;
	margin: 0px auto;
	width: 99%;
	color:#4b4b4b;
    position: absolute;
    top: 0;
    border-left: 1px solid darkgray;
}
.shiftsDivs{
    /*border-right: 1px solid gray;*/
    display: table-cell;
    position: relative;
    padding: 5px 5px 5px 3px;

}
.BSRR tr{
	border:1px darkgray solid;
	background-color: #f9f9f9;
}
@media only screen
{
    .BSRR tr:hover>td{
	background-color: rgba(6, 95, 201,0.5);
	background-clip: padding-box;
	z-index: 1;
    }
}

.BSRR td{
	/*border:1px rgb(220,220,220) solid;*/
	/*width:150px;*/
	font-family:arial;
	/*font-size:14px;*/
	padding: 2px 0px 3px 3px;
	white-space: pre;
	overflow: hidden;
	position: relative;
	background-clip: padding-box;
	cursor: pointer;
/*stop selecting the text*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    /*font-size: 20px;*/
    border-bottom: 1px solid darkgray;
    border-right: 1px solid darkgray;
}
@media only screen
{
    .BSRR tr:not(:nth-child(1)):hover{
	/*border:2px gray solid;*/
	background-clip: padding-box;
    }
    
}
.BSRR tr td:nth-child(1),
.BSRR tr td:nth-child(2)
{
	width:fit-content;
	white-space: nowrap;
	padding-left: 5px;
} 
.BSRR tr td:last-child{
	width: 20%;
}
.disable_refused{
	position: absolute;
	background: red;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	opacity: 0.3;
}
.deletedItem{
	position: absolute;
    width: 100%;
    height: 100%;
    background: red;
    top: 0;
    left: 0;
    z-index: 1;
	opacity: 0.5;
	background-image: linear-gradient(to right top,  transparent calc(50% - 1px), #1a1818 50%, transparent calc(50% + 1px)),
						linear-gradient(to right bottom,  transparent calc(50% - 1px), #1a1818, transparent calc(50% + 1px));
}
.acceptedItem{
	position: absolute;
    width: 100%;
    height: 100%;
    background: green;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.5;
}
.disable_accepted{
	position: absolute;
	background: green;
	width: 100%;
	/*for the height we give a big value because of internet explorer not acccept height 100%*/
	height: 200px;
	z-index: 1;
	top: 0;
	left: 0;
	opacity: 0.3;
}
.BSRR th{
	/*border:1px solid rgb(220,220,220);*/
    border-right:1px solid darkgray;
    border-top:1px solid darkgray;
    border-bottom: 1px solid darkgray;
	background-color: #EFF0F1;
	/*font-size: 1em;*/
}

.col1{width:80px;}
.col2{width:30px;}
.col3{width:100px;}
.col5{width:150px;}
/*.last{width:150px;}*/
.dayNameAndDate{
	position: absolute;
	/*height: 100%;*/
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.9;
	box-sizing: border-box;
	padding: 5px 5px 15px 5px;
}
.bringSchichten>input[type='checkbox']{
	display: none;
}
.bringSchichten{
	width:30px;
	/*height:30px;*/
	position: absolute;
	/*padding: 5px 30px 5px 5px;*/

	border: 1px solid gray;
	margin-right : 10px;
	/*top: calc((100% - 30px)/2);*/
    top : 2px;
    height: calc(100% - 6px);
}
.shift_label{
	margin-left: 32px;
	white-space: nowrap;
	text-align: center;
}
.bringSchichten>input[type='checkbox']:checked + span::after{
	content: "\2713";
	/*font-size: 30px;*/
	position: absolute;
	/*top:-8px;*/
    font-size: 20px;
	
}
.disableshifChoose{
	position: fixed;
	width: 100%;
	height: 100%;
	background: gray;
	top: 0;
	left: 0;
	opacity: 0.3;
	z-index: 6;
}
.disableshifChoose_modal{
  position: fixed;
  top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	border: 1px solid white;
	padding: 1%;
	text-align: center;
	background: #f2f2f2 ;
	z-index: 6;
}

.disableshifChoose_modal>div{
	/*position: absolute;*/
	bottom: 0;
	right: -1px;
	/*border-bottom: 1px solid gray ;*/
	text-align: center;
	padding-bottom: 5px;
	bottom: 20px;
}
#modal_close_button{
	background-color: lightgray;
	border: 2px solid red;
	text-align: center;
	cursor: pointer;
	padding: 2% 5% 2% 5% ;
	/*font-size: 20px;*/
	border-radius: 5px;
	background: rgb(242, 242, 242);
}
@media only screen
{
    #modal_close_button:hover{
	background: red;
	color: white;
    }
}

.state{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	/*for the height we give a big value because of internet explorer not acccept height 100%*/
	height: 200px;
	left: 0;
	bottom: 0;
	padding-top: 5px;
	font-weight: bolder;
	opacity: 0.9;
}
.takeaway{
	position: absolute;
	width: 100%;
	height: 200px;
	top: 0;
	left: 0;
	z-index: 3;
	opacity: 0.7;
	padding-bottom: 15px;
	background: #c5c6c9;
}
.animi{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: green;
	position: absolute;
	top: 5%;
	opacity: 1;
	animation: loading 1s linear 0.1s infinite alternate;
}
.shiftName{
	position: absolute;
	top: 0;
	display: inline-block;
	width: 100%;
	height: 30px;
	text-align: center;
	left: 0;
	padding-top: 5px;
	/*opacity: 0.6;*/
}
.s_label{
	margin:0px 5px 5px 5px ;
	font-weight: normal;
}
.shift_table{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 200px;
	border: 1px solid rgba(0,0,0,0);
	border-collapse: collapse;
	table-layout: fixed;
	z-index: 0;
}
.shift_td{
	border:1px solid lightgray;
	width: auto;
	position: relative;
}
.planning_CELL{
	width: 100px;
}
@keyframes loading{
	from{left:75%;}
	to{left:95%;}
}
@-webkit-keyframes loading{
	from{left:75%;}
	to{left:95%;}
}

/* ***************************************************************** */
/*WorkTimeRequest                                                    */
/* ***************************************************************** */
.WTR{
    /*border:1px solid rgb(220,220,220);*/
	border-collapse: separate;
    border-spacing: 0px;
	font-family:arial;
	/*font-size: 0.9em;*/
	margin: 0px auto;
	width: 99%;
	color:#4b4b4b;
    position: absolute;
    top: 0;
    border-left: 1px solid darkgray;
}
.WTR td, .WTR th{
    /*border:1px rgb(220,220,220) solid;*/
	/*width:150px;*/
	font-family:arial;
	font-size:14px;
	padding: 3px 3px 3px 3px;
	white-space: pre;
	overflow: hidden;
	position: relative;
	background-clip: padding-box;
	cursor: pointer;
/*stop selecting the text*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

    line-height: 2;

    /*font-size: 20px;*/
}
.WTR th {
    background-color: #ffffff;
    border-right: 1px solid darkgray;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
}
.WTR td{
    border-right: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
}
.WTR td input[type="text"]
{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 7px);
    height: calc(100% - 2px);
    border: none;
    text-align: right;
    font-size : 14px;
    padding-right: 5px;
    /*font-size: 20px;*/
}
.WTR tr td:nth-child(n + 4)
{
    text-align: right;
}
.WTR td input[type="checkbox"]
{
    display: none;
}
.WTR td span
{
    /*position: absolute;
    top: 0;
    left: 0;
    border: 1px solid blue;*/
    /*font-size: 30px;*/
    font-weight: bold;
    line-height: 0.9;
    text-align: center;
}
/*********************************************************************
    PlanYearTable
*********************************************************************/
.PLY{
	/*border:1px solid darkgray;*/
    border-left:1px solid rgb(220,220,220);
    border-top:1px solid rgb(220,220,220);
	font-family:arial;
	/*font-size: 0.7em;*/
	/*background-color: #f9f9f9;*/
    width: 100%;
	margin:0px auto;
	color:#4b4b4b;
    table-layout: auto;
	font-family: arial;
    position: absolute;
    top: 0px;
    left: 0;
    border-collapse: separate;
    border-spacing: 0px;
    box-sizing: border-box;
    /*width: 200%;*/
}
.PLY tr>th, .PLY tr > td{
    /*border: 1px solid darkgray;*/
    border-right:1px solid rgb(220,220,220);
    border-bottom: 1px solid rgb(220,220,220);
    /*font-size: 20px;*/
    position: relative;
    /*font-size: 15px;*/
    padding: 5px;
}
.PLYST
{
    position: absolute;
    top: 0;
    left: 0;
    border-collapse: collapse;
    border: 0px solid ;
    height: 100%;
    width: 100%;
    table-layout: fixed;
}
table.PLYST td{
    /*font-size: 10px;*/
}
.planyearSTable{
    position: absolute;
    top: 0px;
    left: 0;
    border-collapse: collapse;
    width: 100%;
    border: none;
    height: calc(100% + 1px);
}
.planyearSTable tr td{
    border-right: 1px solid rgb(220,220,220);
    border-left: none;
    border-top: none;
    border-bottom: none;
}
.planyearSTable tr td:last-child
{
    border:none;
}
/*************************************************************/
/******document Modeule*****************************************/
.Documentcontainer{
    background: #7E9ABC;
    height: 50px;
    width: 80%;
    margin-left: 10%;
    padding: 10px; /*10px 20px 10px;*/
    position: relative;
    box-sizing: border-box;
    margin: 5px 0px 5px 10%;
}
.DocumentButton{
    border: 1px solid white;
    padding: 5px;
    background: #9FB4CD;
    color: white;
    /*position: absolute;
    right: 120px;
    top: 0;*/
    cursor: pointer;
    display:inline-block;
    float: right;
}
.DocumentLabel{
    /*border: 1px solid white;
    position: relative;
    padding: 5px;*/
    color: white;
}
.docName{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.DocumentCloseButoon{
    position: absolute;
    width: 30px;
    height: 30px;
    right: 5px;
    box-sizing: border-box;
    /*font-size: 20px;*/
    border-radius: 15px;
    border: none;
    outline: none;
    font-weight: bold;
}
.fDownload
{
    border: 1px solid white;
    padding: 5px;
    background: #9FB4CD;
    color: white;
    display:inline-block;
    float: right;
    cursor: pointer;
    text-align:center;
    margin-right: 5px;
}
@media only screen
{
    .DocumentCloseButoon:hover{
    background: red;
    color: white;
    cursor: pointer;
    }
}

/************************************************************************************************/
/*****************************************************vacation****************************/
/*********************************************************************************************/
.hideuntilload{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 7;
    /*opacity: 0.8;*/
}
.bigTable{
    width: 100%;
    height: 100%;
}
.bigTable tr td:first-child{
    /*width: 10%;*/
}

table.bigTable tr td:nth-child(2){
    /*overflow: auto;*/
}
.info_vacation_table{
    width: auto;
    border-collapse: collapse;
    margin-left:50%;
    transform: translateX(-50%);
    border-spacing: 2px;
}
.info_vacation_table td{
    /*font-size: 20px;*/
    /*padding: 5px;*/
    /*border-right: 1px solid lightgray;  */

}
.info_vacation_table td button{
    border: 1px solid lightgray;
}
.info_vacation_table td:nth-child(odd):not(:nth-child(1))
{
    /*min-width: 20px;*/
    background-color: #f2f2f2;
    padding: 0;
    padding-right: 2px;
    text-align: right;
    border-right: 1px solid lightgray;
}
.info_vacation_table td:nth-child(even)
{
    text-align: left;
    padding: 0px 2px 0px 2px;
}
.info_vacation_table td:nth-child(2)
{
    padding-left: 3px;
}
.info_vacation_table td > select{visibility: hidden;}
.info_vacation_table td:nth-child(1){min-width: 200px;position: relative;}
.selectDiv
{
    position: absolute;
    background:#f2f2f2;
    z-index:10;
    cursor: pointer;
}
.selecedOptiontDiv
{
    /*border:1px solid black;*/
    background: #f2f2f2;
    display: flex;
    align-items: center; /* Vertically center the spans */
    justify-content: space-between; /* Optional: Controls horizontal alignment */
    border: 1px solid lightgray; /* For visualization */
    padding-left: 1px;
}
.selectOption
{
    /*border-bottom:1px solid black;
    border-right:1px solid black;
    border-left:1px solid black;*/
    background: #f2f2f2;
    display: flex;
    align-items: center; /* Vertically center the spans */
    justify-content: start; /* Optional: Controls horizontal alignment */
    /*border: 1px solid black; /* For visualization */
    padding-left: 1px;
}
.selecedOptiontDiv span, .selectOption span
{
    display: inline-block;
}
.selecedOptiontDiv span:last-child
{
    /*background-color: red;*/
}
.selectShiftName
{
    /*font-size: 1.5vh;*/
    margin-left: 3px;
}
.arrowClass
{
    text-align: center;
    border-left: 1px solid lightgray;
    display: flex;
    align-items: center; /* Vertically center the spans */
    justify-content: center; /* Optional: Controls horizontal alignment */
}
.select-dropdown-down{
    border-color: #888 transparent transparent transparent;
    border-style: solid;     
    height: 0; 
    /*left: 50%; */
    display: inline-block;    
    /*margin-left: -4px; 
    margin-top: -2px;
    position: absolute; 
    top: 50%; 
    width: 0;*/
}
.select-dropdown-up{
    border-style: solid; 
    border-color: transparent transparent #888 transparent;
    /*border-width: 0 4px 5px 4px;*/
    height: 0; 
    /*left: 50%; */
    display: inline-block;    
    /*margin-top: 50%in-top: 50%;;*/
}
.selectOption-hide
{
    display: none;
}
.selectOption-show
{
    display: flex;
    align-items: center; /* Vertically center the spans */
    justify-content: start; /* Optional: Controls horizontal alignment */
}

.selectOption
{
    border-bottom: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
}
table.Vacation_Plan_ {
    /*display: inline;*/
    border-collapse: separate;
    border-spacing: 0px;
	font-family:arial;
	background-color: #eff0f1;
	/*width:200%;*/
    height: 100%;
	color:#4b4b4b;
    margin-bottom:50px;
    /*table-layout: fixed;*/
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    table-layout: fixed;
    width: 100%;
}
.Vacation_Plan_ tr
{
    height: 80px;
}
table.Vacation_Plan_ tr td:not(.vacationCell){
    width: 40px;
    /*font-size: 0.7em;*/
	border-bottom:1px solid rgb(220,220,220);
    border-right:1px solid rgb(220,220,220);
	font-family:arial;
	/*padding-left: 5px;*/
	overflow: hidden;
	position: relative;
	background-clip: padding-box;
    /*height: 6vh;*/
    padding: 0px;
    /*font-size: 0.8vw;*/
    height: 80px;
}
.Vacation_Plan_ tr td:nth-child(n + 2)
{
    text-align: center;
}
.Vacation_Plan_ tr td:nth-child(0)
{
    /*background-color: red;*/
}
.Vacation_Plan_ td>input[type='text']
{
	display: none;
}
table.Vacation_Plan_ th{
	/*font-size: 0.7em;*/
	border-bottom:1px solid rgb(220,220,220);
    border-right:1px solid rgb(220,220,220);
    width:40px;
    font-family:arial;
    padding-left: 5px;
    overflow: hidden;
    position: relative;
    background-clip: padding-box;
    /*height: 60px;*/

}
.Vacation_Plan_ th:nth-child(1){
	background: url(),linear-gradient(to right top, transparent calc(50% - 1px), gray 50%, transparent calc(50% + 1px));
}
.dayheader{
	position: absolute;
	right: 0;
	margin-right: 10px;
}
.monthheader{
	position: absolute;
	left: 0;
	margin-left: 10px;
}
.Vacation_Plan_ td#b { font-weight: bold; }
/*.Vacation_Plan_ td{height:70px;width:70px;padding: 0px 2px 0px 2px;}*/
@media only screen
{
    .Vacation_Plan_ td:hover{
	cursor: pointer;
    }
    .vacation_check:hover{
	cursor: pointer;
    }
}

.vacation_check>input[type='checkbox']{display:none;}
.vacation_check{
	position:absolute;
	width:100%;
	height: 100%;
}

/*.vacation_check>input[type='checkbox']+span{
	
}*/
.publicHolidayy
{
	background: lightcoral ;
}
.Vacation_Plan_ td>label{
	/*position: absolute;
	top: 0;
	left: 0;
	width: 99%;
	height: 99%;*/
}

.month_v_name{
	position: absolute;
	top: 0;
    height: 30%;
	border-bottom: 1px solid orange;
	width: 100%;
	/*height: 30px;*/
	text-align: center;
	background: orange;
	left: 0;
	font-weight: bold;
    display: none;
}
.day_v_number{
	position: absolute;
	width: 100%;
    top: 30%;
    height: 30%;
	background: white;
	left: 0;
	text-align: center;
	font-weight: bold;
    display: none;
}
.day_v_name{
	position: absolute;
	left: 0;
    bottom: 0;
	top: 0;
	width: 100%;
	text-align: center;
	background: white;
    /*display: contents;*/
	/*color: orange;*/
    /*line-height: 3;*/
}
.day_v_name span{
    display: block;
    /*background-color: red;*/
}
.label_v_check>input[type='checkbox']{
    visibility: hidden;
}
/*making the form and the checkboxes*/
.label_v_check>input[type='checkbox']:checked +span{
	/*position: absolute;
	top: 0;
	left: 0;
	background: darkgreen;
	opacity: 0.5;
	width: 110%;
	height: 110%;
	z-index: 1 ;
	color: black;
	font-size: 50px;
	text-align: center;
    line-height: 1;
    font-size: 5vh;*/
}
.oldDay{
    position: absolute;
    top: 0;
    left:0;
    background-color: #c8c8c8;
    width: 150%;
    height: 150%;
    z-index: 2;
    opacity: 0.5;
}
#AcceptRequest, #rejectRequest, #printRequest{
    /*cursor: pointer;
    margin: 5px 5px 5px 10px; 
    outline: none; 
    background: white; 
    border: none; 
    padding: 5px; 
    border-radius: 5px; 
    font-size: 20px;
    width:150px;
    border: 1px solid lightgrey;*/
    border: 1px solid gray;
}
#AcceptRequest:hover, #printRequest:hover, #rejectRequest:hover{
    background-color: green;
    color: white;
}

.vacation_public_Holiday_table {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    height: 100%;
    height: 80px !important;
}
table.vacation_public_Holiday_table tr:nth-child(1){
    height: 60px !important;
}
table.vacation_public_Holiday_table tr:nth-child(2){
    height: 20px !important;
}
table.vacation_public_Holiday_table td{
    width: 40px;
    height: 3vw;
    text-align: center;
    padding: 0px;
    border-right: 1px solid rgb(220,220,220);
}
table.vacation_public_Holiday_table tr td:not(:last-child)
{
    border-right: 1px solid rgb(220,220,220);
}
/*
.vacation_public_Holiday_table{
    border-collapse: collapse;
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left:0;
    table-layout: fixed;
}
.vacation_public_Holiday_table td{
    width: 50%;
}
*/
.vacation_INFO{
	width: 95%;
	height: 100px;
	border: 1px solid gray;
	margin: 0 auto 10px;
}
/*custom select box*/
.spanoo{
	position: absolute;
	left: 5px;
	width: 1vw;
	height: 0.8vw;
	border: 1px solid lightgray;
}
.arrow{
	border-left: 2px solid black;
	border-bottom: 2px solid black;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 5px;
	transform: rotate(-45deg);
}
.father_arrow{
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 5px;
	width: 22px;
	height: calc(100% - 5px);
	border-left: 1px solid lightgray;
}
.noSelect, .selectContainer
{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


@media only screen
{
    .father_arrow:hover{
	background: rgb(221, 221, 221);
	cursor: pointer;
    }
}

#requestsList table td{ font-size: 0.35vw;}

/*table.info_vacation_table tr td{padding: 4px;}
table.info_vacation_table tr:first-child td:nth-child(2n + 3){text-align:right; border-right:1px solid rgb(220,220,220) ;padding-left: 10px;padding-right: 10px;}*/

.ModalContainer
{
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.1);
    position:fixed;
    top:0;
    left:0;
    z-index:201;
}
.AskDialog
{
    width:400px;
    height:200px;
    position:absolute;
    top:calc(50% - 100px);
    left:calc(50% - 200px);
    background:#f2f2f2;
    border:1px solid gray;
    z-index:200;
}
.ModalDialog
{
    position: absolute;
    height: 150px;
    top: 0;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    align-content: center;
}
.ModalDialogButtonCont
{
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    height:50px;
}
#Modal_YES
{
    padding: 10px;
    margin: 5px 10px;
    border: none;
    border-radius: 5px;
    width: 50px;
    cursor:pointer;
    border:2px solid green;
}
#Modal_NO
{
    padding: 10px;
    margin: 5px 10px;
    border: none;
    border-radius: 5px;
    width: 50px;
    cursor:pointer;
    border:2px solid red;
}
#loader
{
    position: absolute;
    left: 2px;
    top: 0;
    width: 40px;
    height: 40px;
    border: 5px solid gray;
    border-top-color: blue;
    border-radius: 40px;
    animation: loader 0.5s ease infinite;
    display: none;
}

.placeholder {
    position: relative;
  }

  .placeholder::before {
    content: "max 160 Zeichen"; /* The placeholder text */
    color: gray;
    font-style: italic;
    position: absolute;
    left: 10px; /* Adjust padding as needed */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Prevent interaction with the placeholder text */
  }

  .placeholder:not(:empty)::before {
    content: ""; /* Hide the placeholder if there's content */
  }

@keyframes loader
{
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg);}
    50% { transform: rotate(180deg);}
    75% { transform: rotate(270deg);}
    100% { transform: rotate(360deg);}
}

td[contenteditable=true]
{
    min-width: 200px;
    max-width: 200px;
}
/************************************************************************************************/
/**********************************************************************************************/
/*********************************************************************************************/
/*phone css*/
@media only screen and (max-device-width:600px),
screen and (max-width:600px), (max-width: 600px)/*,
screen and (max-width: 768px) and (orientation: portrait) and (hover: none)
/*only screen and (min-width: 384px) and (min-height: 824px) and (device-pixel-ratio: 3.75) and (hover: none),*/
/*only screen and (min-width: 1440px) and (max-height: 3200px) and (device-pixel-ratio: 3.75) and (orientation: portrait) and (hover: none)*/
{
    body
    {
        overflow: hidden;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;   
    }
    .headerDiv{/*height: 120px;*/height: 48px;}
    .footer{font-size: 8px;height: 12px;}
    .tableHeader td h1 {
        font-size: 14px;
        margin: 0px;
    }
    .headeDivIcon
    {
        width: unset;
    }
    .ModuleName sup{
        /*transform: translateX(-25px);*/
        top:0;
        right: -20px;
        font-size: 10px;
    }
    .plannungheaderbuttons{
        width: auto;
        table-layout: fixed;
        width: 100%;
    }
#bton div, #bton1 div
{
    line-height: 40px;
    position: absolute;
    left: 32px;
    font-size: 12px;
}
    .logoText div:nth-child(1){
        display: inline-block;
        position: absolute;
        width: 50%;
        left: 0;
    }
    .logoText div:nth-child(1) img{
        width: auto;
        height: 32px;
        position: absolute;
        right: 0;
        font-size: 40px;
    }
    .logoText div:nth-child(1) sup{
        right: 4px;
        top: 0;
    
    }
    .logoText div:nth-child(2){
        font-size: 20px;
        position: absolute;
        height: 60px;
        width: 50%;
        left: 50%;
    }
    .logoText div:nth-child(2) span{
        position: absolute;
        left: 0;
        font-size: 14px;
        top: 2px;
    }
    .infoHeader{
        top: /*119px;*/44px;
        height: /*80px*/40px;
        /*display: none;*/
    }
    .FormTools 
    {
        text-align: left;
        width: 100%;
        padding-left: 2px;
    }

    .FormTools select{
        /*font-size: 30px;*/
        /*font-size: 3vw;
        height: 100%;*/
        /*font-size: 15px;
        padding: 1px;*/
    }
    .formDiv input[type="submit"]
    {
        font-size: 20px;;
    }
/*    .FormTools select[name="year"]{
        width: 20%;
    }
    .FormTools select[name="month"]{
        width: 15%;
    }
    .FormTools select[name="personal_id"]{
        width: 25%;
    }
*/
.selectionInfoC
{
    font-size: 13px;
}
    .FormTools input[type="image"]
    {
        top: 5%;
        height: 90%;
        vertical-align: top;
        position: relative;
        padding: 0px 1%;
        display: none;
    }
    .FormTools form{height: 100%;}
    select[name='year']
    {
        width: 15%;
    }
    select[name='month']
    {
        width: 12%;
    }
    select[name="personal_id"], select[name="orgaunit_id"],
    select[name="States"]
    {
        width: 30%;
    }
    .infoHeader b{display: none;}
    .dataContainer{
        position: absolute;
        top: 80px;
        overflow-y: scroll;
        box-sizing: border-box;
        height: calc(100% - 80px);
        min-width: 50%;
        text-align: center;
        padding:2px;
        /*margin: 10px;*/
    }
    #WorkingHoursAccount tr td:nth-child(1)
    {
        text-align: left;
    }
    .bigTable
    {
        position: absolute;
        top: 0;
    }
    .dataContainer p, .dataContainer div p{font-size: 15px;}
    .menu-element{
        margin: 10px;
    }
    /*.menu-element{
        padding-top: 25px;
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        transform: translateX(50px);
    }
    .menu-element a{
        font-size: 40px;
    }
    .menu-element img{
        width: 100px;
        height: 100px;
    }*/


    .headerTitle{
        width: 100%;
    }
    .login-container{
        width: 100%;
    }
    #loginform{
        padding-top: 0px;
        height: 100%;
    }
    .formDiv{
        width: 90%;
    }
    table.tableHeader{
        border-collapse: collapse;
    }
    table.tableHeader td{
        width: auto;
        padding: 0px;
    }

    .logocontainer{height: 32px;}
    /*table.tableHeader{
        table-layout: fixed;
    }
    table.tableHeader tr:nth-child(1) td:nth-child(1),
    table.tableHeader tr:nth-child(1) td:nth-child(3)
    {
        width: 30%;
    }
    
    table.tableHeader tr:nth-child(1) td:nth-child(2)
    {
        width: 40%;
    }
    .headeDivIcon
    {
        position: absolute;
        padding: 0px;
    }
    
    table.tableHeader tr:nth-child(1) td:nth-child(1) .headeDivIcon:nth-child(1)
    {
        left: 0;
    }
    table.tableHeader tr:nth-child(1) td:nth-child(1) .headeDivIcon:nth-child(2)
    {
        left: 100px;
    }
    table.tableHeader tr:nth-child(1) td:nth-child(1) .headeDivIcon:nth-child(3)
    {
        left: 200px;
    }


    table.tableHeader tr:nth-child(1) td:nth-child(3) .headeDivIcon:nth-child(1)
    {
        left: 100px;
    }
    table.tableHeader tr:nth-child(1) td:nth-child(3) .headeDivIcon:nth-child(2)
    {
        left: 200px;
    }*/


    .headeDivIcon img,
    .headeDivIcon input[type="image"]
    {
        width: 32px;
        height: 32px;
        margin: 0px;
    }
    .name{
        font-size: 12px;
        position: absolute;
        top: 25px;
        left: 47%;
        transform: translateX(-50%);
        word-break: keep-all;
        width: 100%;
    }
    .ModuleName div img{        
        height: 32px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .menuSlid{
        width: 100%;
        font-size: 30px;
        top: 82px;
        height: calc(100% - 100px);
        z-index: 300;        
    }
    .menuSlid a{
        font-size: 20px;
        background: rgb(210 210 210);
        width: calc(100% - 70px);
        line-height: 2;
        margin-left: 30px;
        margin-top: 10px;
    }
    .menuSlid a img{
        width: 32px;
        height: 32px;
    }
    
    
    .pmgPlanning{
        /*display: none;*/
        table-layout: auto;
        /*top: /*40px*//*65px;*/
        left: 0;  
        top: 40px;      
    }
    .DataTableContainer
    {
        width: calc(100% - 10px);
        /*height: 100%;/*calc(100% - 30px);*/
        margin-left: 5px;
        overscroll-behavior-y: none;
    }
    

    .plannungheaderbuttons td{position: relative;padding:2px;}
    .PlanMonthGruop{
        /*table-layout: fixed;
        width: 600%;*/
    }
    .PlanMonthGruop td font div form input[type="Image"]{
        /*width: 100%;
        height: 100%;*/
    }
    .PlanMonthGruop td font div form input[type="submit"],
      .PlanMonthGruopService td font div form input[type="submit"]
    {font-size: 30px;}
    .pmgPlanning tr td, .pmgPlanning tr th
    {
        font-size: 12px;
        /*min-width: 110px;*/
    }
    table.subTableChecks td input[type='checkbox']{
        position: absolute;
        left: 0;
        top: 0;
        width: 80%;
        height: 80%;
    }
    .main{top:/*48px*/88px;/*font-size: 40px;*/height: 40px;text-align: left;}
    /*.main select {font-size: 40px;}*/
    .middle1{font-size: 30px;}
    .main div{position:absolute;width: 150px;display: inline-block; height: 40px;width: 100%;}
    .main div.bedo2{position: absolute;}
    .main div.bedo2 img
    {
        width: 32px;
        height: 32px;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
    }
    .bton, .bton1{background-color: rgb(19, 49, 221);color: white;}
    #bton{font-size: 25px;}
    .main div select{height: 100%;width: 100%;font-size: 12px;}
    
    .DataTable{
        border-spacing: 0px;
        margin: 0 auto;
        width:auto;
        /*table-layout: fixed;*/
        box-sizing: border-box;
    }
    #WorkingHoursAccount{
        width: 100%;
    }
    .TimerContainer{
        width: 100%;
        font-size: 4vw;
        height: calc(100% - 100px);
    }
    #ButtonCell
    {

    }
    
    #userComment, input[name="submit"]
    {
        height: 50px;
    }

    .tab{
        margin: 0 auto;
    }
    .TimerContainer table td input[type="text"], .TimerContainer table td input[type="submit"]{
        font-size: 6vw;
        padding: 4vw;
        box-sizing: border-box;
    }
    .TimerContainer table td input[type="submit"]
    {
        /*border: 5px solid;*/
        height: 50px;
        box-sizing: border-box;
        padding: unset;
        border-radius: 50px;
        /*color: white;
        background: #1b6ad2;*/
    }
    #clockDisplay{
        font-size: 6vw;
    }

    .WTR td, .WTR th, .WTR td input[type="text"],
    .BSRR td, .BSRR th,
    .DataTable td, .DataTable th,
    .PLY tr>td ,.PLY tr>th
    {   
        font-size: 15px;
    }
    .DataTable td img, .DataTable th img{
        width: 20px;height: 20px;
    }
    #BBWYTABLE tr td:nth-child(1),
    #BBWYTABLE tr th:nth-child(1)
    {
        display: none;
    }
    #BBWYTABLE td,   #BBWYTABLE th
    {
        padding: 1px 2px 2px 1px;
    }
    #BBWYTABLE tr td:nth-child(2)
    {
        text-align: left;
    }
    
    .PlanMonthGruop tr td:nth-child(2).fixed2,
    .PlanMonthGruop tr td:nth-child(3).fixed2,
    .PlanMonthGruop tr td:nth-child(4).fixed2,
    .PlanMonthGruop tr td:nth-child(5).fixed2,
    .PlanMonthGruop tr td:nth-child(6).fixed2,
    .PlanMonthGruop tr td:nth-child(7).fixed2,

    .PlanMonthGruop tr:nth-child(2) th:nth-child(2).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(3).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(4).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(5).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(6).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(7).fixed4,
    
    .pmgPlanning tr td:nth-child(2).fixed2,
    .pmgPlanning tr td:nth-child(3).fixed2,
    .pmgPlanning tr td:nth-child(4).fixed2,
    .pmgPlanning tr td:nth-child(5).fixed2,
    .pmgPlanning tr td:nth-child(6).fixed2,
    .pmgPlanning tr td:nth-child(7).fixed2,

    /*table.pmgPlanning tr:nth-child(2) th:nth-child(2),*/
    table.pmgPlanning tr:nth-child(2) th:nth-child(3),
    table.pmgPlanning tr:nth-child(2) th:nth-child(4),
    .pmgPlanning tr:nth-child(2) th:nth-child(5).fixed4,
    .pmgPlanning tr:nth-child(2) th:nth-child(6).fixed4,
    .pmgPlanning tr:nth-child(2) th:nth-child(7).fixed4{
        display: none;
    }
    #bcalender_year{display: table-cell;}
    .canHide{display: none;}
    .PlanMonthGruop tr td, .PlanMonthGruop tr th, table.subTableChecks td label,
    .PlanMonthGruopService tr td, .PlanMonthGruopService tr th, table.subTableChecks td label
    {font-size: 12px;/*height:40px;/*font-weight: bold;min-width:100px;*/}
    .pmgPlanning tr .fixed2:first-child
    {
        text-align: left;
    }
    .PlanMonthGruop tr .fixed2:first-child
    {
        text-align: left;
    }
    .main + table td
    {
        font-size: 15px;
    }
    .mobileDocLink{
        font-size: 100px;
    }
    #curAlloc, #stdAlloc{/*transform: scale(4);*/}
    /*#curAllocLabel, #stdAllocLabel{margin:20px}*/
    #selectBoxesTH{padding-bottom: 20px;}
    /*.day_v_number{display: block;z-index:1;}
    .label_v_check{z-index: 2;}*/
    #myDemoTable{
        table-layout: fixed;
        width: 600%;
    }
    #myDemoTable td,  #myDemoTable th{
        padding: 0px;
        font-size: 12px;        
    }
    #myDemoTable td{
        height: 50px;
    }
    #myDemoTable tr td:nth-child(1), #myDemoTable tr:nth-child(1) th:nth-child(1)
    {
        /*padding: 0px 2px 0px 2px;*/
        /*width: 20px;
        width: 1%;*/
        white-space: nowrap;
        /*text-overflow:  ellipsis;*/
       
    }
    #myDemoTable td[textvertical='t'],  #myDemoTable th[textvertical='t']
    {
        /*writing-mode: vertical-rl; /* Make text vertical */
        writing-mode: vertical-lr;
        /*text-orientation: upright; /* Ensure upright text direction */
        /*width: 50px; /* Set the desired width */
        /*padding: 10px; /* Adjust padding for better spacing */
        text-align: center; /* Center align the text horizontally */
        vertical-align: top; /* Align the text to the top (or middle if preferred) */
        border: 1px solid #ddd; /* Optional: Add a border for clarity */
        box-sizing: border-box;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        padding: 0px;
        min-width: 10px;
        white-space: nowrap;
        width: 50px;
    }
    #myDemoTable td[textvertical='t']
    {
        min-height: 100px;
        text-align: end;
        padding-top: 5px;
        padding-left: 5px;
        vertical-align: baseline;
    }
    #myDemoTable td[textvertical='t'] div
    {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: inherit;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
    }
    .father_arrow
    {
        height: 100%;
        width: 3vh;
    }
    .arrow
    {
        width: 1vh;
        height: 1vh;
        margin-right: 25%;
        border-width: 5px;
    }
    .spanoo
    {
        height: 1.5vh;
        width: 1.5vh;
    }
    .vInfo {
        font-size:15px;
        margin: 	0px;
        position:absolute; 
        top:50%;
        transform: translateY(-50%);
        left:50%;
        transform: translateX(-50%);
    }
    .vInfo2, #vInfo2_forms1, #vInfo2_forms2{ font-size:15px;}
    #vInfo2_forms1, #vInfo2_forms2{margin-left: 5%;font-size: 15px;}
    .vrclsBtn{font-size:20px;padding: 0;height: 40px;width:40px;/*line-height: 20px;*/text-align: center;box-sizing: border-box;border-radius: 2px;}
    .RequestDivContainer{top:45px;font-size: 35px;}
    .vrEditbtn , .vrDeletebtn, .vrSendbtn, .vrcancelbtn
    {
        width: 30%;
        font-size: 12px;
        position: absolute;
        height: 30px;
        border-radius: 30px;
    }
    button.vrSendbtn
    {
        left: 15%;
        margin-right: 5%;
    }
    button.vrcancelbtn
    {
        left: 50%;
    }
    #ConfirmEdit{left: 10px;}
    #DeleteRequest{ left: calc(30% + 15px)}
    #PrintRequest {left: calc(60% + 20px)}

    #AcceptRequest{left: 10px;}
    #rejectRequest{left: calc(30% + 15px)}
    #printRequest {left: calc(60% + 20px)}

    #RequestsDetails > div > h2 { font-size: 15px;}    
    .vrInfo3{font-size: 50px;}
    .ButtonsDivRequest{width: 100%;margin-top:10px;margin-left: 50%; transform: translateX(-50%);height: 50px;position: fixed;}
    table.DataTableSub{width:99%}
    table.DataTableSub td{font-size: 12px;padding: 1px;}
    .DataTableSub tr td:nth-child(1)
    {
        text-align: left;
    }
    #requests, #SaveRequests
    {
        /*font-size: 40px;padding: 10px 0px; */
        width: 45%;
        height: 40px;
        border-radius: 40px;
        display: inline-block;
        font-size: 12px !important;
    }
    #requestsList
    {
        width: 90% !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
    }
    #listFilter
    {
        font-size: 13px;
    }
    #RequestsDetails
    {
        position: relative;
        height: inherit;
    }
    .selectContainer{
        font-size: 30px;
    }
    .select-dropdown-down{
        border-width: 10px 8px 0 8px;
    }
    .select-dropdown-up
    {
        border-width: 0px 8px 10px 8px;
    }
    table.info_vacation_table tr td{padding: 1px; font-size: 10px;}
    /*table.info_vacation_table tr:nth-child(2n+1) td {line-height: 0.8;}*/
    /*table.info_vacation_table tr:not(:first-child) td:last-child{text-align:right;}*/
    table.info_vacation_table tr td:nth-child(2) 
    , table.info_vacation_table tr td:nth-child(4) 
    {
        text-align: right;
        font-size: 10px;
        border-color: lightgray;
    }
    table.info_vacation_table tr td:nth-child(1) 
    , table.info_vacation_table tr td:nth-child(3) 
    {
        text-align: left;
        font-size: 10px !important;
        border-color: lightgray;
        padding-left: 5px;
    }
    .info_vacation_table td > select
    {
        font-size: 10px;
    }
    #rowButtons{height: 40px;}
    .ModalContainer
    {
        font-size: 15px;        
    }
    .AskDialog
    {
        width: calc(100% - 40px);
        left: 15px;
        /*height: 400px;*/
        border-radius: 10px;
        height: 200px;
    }
.ModalDialog
{
    height: 100px;
}
#loader
{
    width: 20px;
    height: 20px;
    border-top: 5px solid blue;
    top: 10px;
}
    #Modal_YES, #Modal_NO
    {
        font-size: 15px;
        width: 30%;
        border-radius: 50px;
    }
    .ModalDialogButtonCont
    {
        height: 100px;
    }

    .info_vacation_table
    {
        width: 100%;
    }
    .backwardButton
    {

    }
    .Documentcontainer
    {
        width: calc(100% - 10px);
        margin-left: 5px;
        border-radius: 5px;
    }
    .DocumentButton, a.fDownload
    {
        font-size: 15px;
        border-radius: 2vh;
        padding: 5px 10px;
    }
    /*
    table.Vacation_Plan_
    {
        table-layout: fixed;
    }*/
    table.Vacation_Plan_
    {
        height: auto;
    }

    .Vacation_Plan_ tr 
    {
        height: unset;
    }
    /*table.Vacation_Plan_ tr:nth-child(n+3) td*/
    table.Vacation_Plan_ tr:not(:nth-child(1)):not(:nth-child(2)):not(.vacation_public_Holiday_table td)
    {
        height: 50px !important;
        /*line-height: 1px;*/
    }
    table.Vacation_Plan_ tr:not(:nth-child(1)):not(:nth-child(2)) td:not(.vacation_public_Holiday_table td) 
    {
        height: 50px;
        /*line-height: 1px;*/
        font-size: 15px;
    }
    table.Vacation_Plan_ tr:nth-child(1) td
    {
        height: 35px;
    }
    #rowButtons td
    {
        position: fixed;
        width: 100%;
        z-index: 999;
        height: 40px;
    }
    table.Vacation_Plan_ tr:nth-child(2) td
    {
        height: 15px;
        font-size: 8px;
    }
    table.vacation_public_Holiday_table
    {
        /*height: 100%;*/
        height:50px !important;     
    }        
    table.vacation_public_Holiday_table tr:nth-child(1)
    {
        height: 35px !important;
    }
    table.vacation_public_Holiday_table tr:nth-child(2)
    {
        height: 15px !important;
    }
    table.vacation_public_Holiday_table tr:nth-child(1) td
    {
        height: 35px !important;
    }
    .vacation_public_Holiday_table tr:nth-child(2) td
    {
        height: 15px;      
    }
    .backward, .forward
    {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .WTR{
        /*table-layout: fixed;*/
        width: 1000px;
    }
    .WTR tr:nth-child()
    {
        display: none;
    }
    .bringSchichten
    {
        left: 5px;
    }
    .BSRR td{
        text-align: left;
    }
    .selectDiv{
        font-size: 15px;
    }
    .menu-element a img{
        width: 48px;
    }
}
@media only screen and (orientation: landscape) and (max-device-width: 784px),
screen and  (max-height: 768px) and (orientation: landscape) and (hover: none)/*,
only screen and (min-width: 824px) and (min-height: 384px) and (device-pixel-ratio: 3.75) and (orientation: landscape) and (hover: none)*/
{
    body
    {
        overflow: hidden;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;   
    }
    .headerDiv{/*height: 120px;*/height: 48px;}
    .footer{font-size: 8px;height: 12px;}
    .tableHeader td h1 {
        font-size: 14px;
        margin: 0px;
    }
    .headeDivIcon
    {
        width: unset;        
    }
    .headeDivIcon > *
    {
        /*vertical-align: middle;*/
    }
    .ModuleName sup{
        /*transform: translateX(-25px);*/
        top:0;
        right: -20px;
        font-size: 10px;
    }
    .plannungheaderbuttons{
        width: auto;
        table-layout: fixed;
        width: 100%;
    }
    #bton div, #bton1 div
    {
        line-height: 22.5px;
        position: absolute;
        left: 32px;
        font-size: 15px;
    }
    .logoText div:nth-child(1){
        display: inline-block;
        position: absolute;
        width: 50%;
        left: 0;
    }
    .logoText div:nth-child(1) img{
        width: auto;
        height: 32px;
        position: absolute;
        right: 0;
        font-size: 40px;
    }
    .logoText div:nth-child(1) sup{
        right: 4px;
        top: 0;
    
    }
    .logoText div:nth-child(2){
        font-size: 20px;
        position: absolute;
        height: 60px;
        width: 50%;
        left: 50%;
    }
    .logoText div:nth-child(2) span{
        position: absolute;
        left: 0;
        font-size: 14px;
        top: 2px;
    }
    .infoHeader{
        top: /*119px;*/44px;
        height: /*80px*/40px;
        display: none;
    }
    .FormTools 
    {
        text-align: left;
        width: 100%;
        padding-left: 2px;        
    }

    .FormTools select{
        /*font-size: 30px;*/
        /*font-size: 3vw;
        height: 100%;*/
        /*font-size: 15px;
        padding: 1px;*/
    }
    select[name="personal_id"], select[name="orgaunit_id"],
    select[name="States"]
    {
        width: 120px;
    }
    .formDiv input[type="submit"]
    {
        font-size: 20px;;
    }
/*    .FormTools select[name="year"]{
        width: 20%;
    }
    .FormTools select[name="month"]{
        width: 15%;
    }
    .FormTools select[name="personal_id"]{
        width: 25%;
    }
*/
.selectionInfoC
{
    font-size: 13px;
}
    .FormTools input[type="image"]
    {
        top: 5%;
        height: 90%;
        vertical-align: top;
        position: relative;
        padding: 0px 1%;
        display: none;
    }
    .FormTools form{height: 100%;}

    .infoHeader b{display: none;}
    .dataContainer{
        position: absolute;
        top: 48px;
        overflow-y: scroll;
        box-sizing: border-box;
        height: calc(100% - 32px);
        min-width: 50%;
        text-align: center;
        /*margin: 10px;*/
        margin:0px;
    }
    #WorkingHoursAccount tr td:nth-child(1)
    {
        text-align: left;
    }
    .bigTable
    {
        position: absolute;
        top: 12px;
    }
    .dataContainer p, .dataContainer div p{font-size: 15px;}
    .menu-element{
        margin: 10px 20px;
    }
    /*.menu-element{
        padding-top: 25px;
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        transform: translateX(50px);
    }
    .menu-element a{
        font-size: 40px;
    }
    .menu-element img{
        width: 100px;
        height: 100px;
    }*/


    .headerTitle{
        width: 100%;
    }
    .login-container{
        /*width: 100%;*/
        top: 55px;
    }
    #loginform{
        padding-top: 0px;
        height: 100%;
    }
    .formDiv{
        width: 100%;
        zoom: 60%;
    }
    table.tableHeader{
        border-collapse: collapse;
    }
    table.tableHeader td{
        width: auto;
        padding: 0px;
    }
    .logocontainer{height: 32px;}
    .headeDivIcon img,
    .headeDivIcon input[type="image"]
    {
        width: 32px;
        height: 32px;
        margin: 0px;
    }
    .name{
        font-size: 12px;
        position: absolute;
        top: 25px;
        left: 47%;
        transform: translateX(-50%);
    }
    .ModuleName div img{        
        height: 32px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .menuSlid{
        width: 100%;
        font-size: 30px;
        top: 82px;
        height: calc(100% - 100px);
        z-index: 300;        
    }
    .menuSlid a{
        font-size: 20px;
        background: rgb(210 210 210);
        width: calc(100% - 70px);
        line-height: 2;
        margin-left: 30px;
        margin-top: 10px;
    }
    .menuSlid a img{
        width: 32px;
        height: 32px;
    }

    #myDemoTable{
        table-layout: fixed;
        width: 300%;
    }
    #myDemoTable td,  #myDemoTable th{
        padding: 0px;
        font-size: 12px;        
    }
    #myDemoTable td{
        height: 50px;
    }
    #myDemoTable tr td:nth-child(1), #myDemoTable tr:nth-child(1) th:nth-child(1)
    {
        /*padding: 0px 2px 0px 2px;*/
        /*width: 20px;
        width: 1%;*/
        white-space: nowrap;
        /*text-overflow:  ellipsis;*/
       
    }
    #myDemoTable td[textvertical='t'],  #myDemoTable th[textvertical='t']
    {
        /*writing-mode: vertical-rl; /* Make text vertical */
        writing-mode: vertical-lr;
        /*text-orientation: upright; /* Ensure upright text direction */
        /*width: 50px; /* Set the desired width */
        /*padding: 10px; /* Adjust padding for better spacing */
        text-align: center; /* Center align the text horizontally */
        vertical-align: top; /* Align the text to the top (or middle if preferred) */
        border: 1px solid #ddd; /* Optional: Add a border for clarity */
        box-sizing: border-box;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        padding: 0px;
        min-width: 10px;
        white-space: nowrap;
        width: 50px;
    }
    #myDemoTable td[textvertical='t']
    {
        min-height: 100px;
    }
    #myDemoTable td[textvertical='t'] div
    {
        transform: rotate(180deg);
        height: fit-content;
        position: absolute;
        top: 5px;
        left: 2px;
    }

    /*************************************************/
    .pmgPlanning{
        /*display: none;*/
        table-layout: auto;
        /*top: /*40px*//*65px;*/
        left: 0;    
        top: 13px; 
        /*display: none;   */
    }
    .DataTableContainer
    {
        width: calc(100% - 10px);
        height: 100%;/*calc(100% - 30px);*/
        margin-left: 5px;
    }
    

    .plannungheaderbuttons td{position: relative;padding:2px;}
    .PlanMonthGruop{
        /*table-layout: fixed;
        width: 600%;*/
    }
    .PlanMonthGruop td font div form input[type="Image"]{
        /*width: 100%;
        height: 100%;*/
    }
    .PlanMonthGruop td font div form input[type="submit"],
      .PlanMonthGruopService td font div form input[type="submit"]
    {font-size: 30px;}
    .pmgPlanning tr td, .pmgPlanning tr th
    {
        font-size: 12px;
        /*min-width: 110px;*/
    }
    table.subTableChecks td input[type='checkbox']{
        position: absolute;
        left: 0;
        top: 0;
        width: 80%;
        height: 80%;
    }
    .main
    {
        top:/*48px*/57px;
        /*font-size: 40px;*/
        height: 32px;
        text-align: left;
        background: white;
        width: 100%;
        margin-left: 50%;
        transform: translateX(-50%);
        position: fixed;
        top:48px;
    }
    /*.main select {font-size: 40px;}*/
    .middle1{font-size: 30px;}
    .main div
    {
        position:absolute;
        width: 100%;
        display: inline-block;
        height: 100%;
        width: 100%;
        top: 0;
        border: none;
    }
    .main div.bedo2
    {
        position: absolute;
        top: 0; 
        user-select: none;
        left: 0;
    }
    .main div.bedo2 img
    {
        width: 24px;
        height: 24px;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
    }
    .bton, .bton1{background-color: rgb(19, 49, 221);color: white;}
    #bton{font-size: 15px;height: 100%;}
    .main div select
    {
        /*height: 100%;*/
        width: 98%;
        font-size: 12px;
        height: 22px;
    }
    
    .DataTable{
        border-spacing: 0px;
        margin: 0 auto;
        width:200%;
        /*table-layout: fixed;*/
        box-sizing: border-box;
    }
    #WorkingHoursAccount{
        width: 100%;
    }
    .TimerContainer{
        /*width: 100%;
        font-size: 4vw;
        height: calc(100% - 100px);*/
    }
    #ButtonCell
    {

    }
    
    #userComment, input[name="submit"]
    {
        /*height: 50px;*/
    }

    .tab{
        margin: 0 auto;
    }
    .TimerContainer table td input[type="text"], .TimerContainer table td input[type="submit"]{
        /*font-size: 6vw;
        padding: 4vw;*/
        box-sizing: border-box;
    }
    .tab td
    {
        padding: 0px;
    }
    .tab td > h2 { margin:0;}
    .tab td > br:first-child{display: none;}
    .TimerContainer table td input[type="submit"]
    {
        /*border: 5px solid;*/
        height: 50px;
        box-sizing: border-box;
        padding: unset;
        border-radius: 50px;
        /*color: white;
        background: #1b6ad2;*/
    }
    #clockDisplay{
        /*font-size: 6vw;*/
    }

    .WTR td, .WTR th, .WTR td input[type="text"],
    .BSRR td, .BSRR th,
    .DataTable td, .DataTable th,
    .PLY tr>td ,.PLY tr>th
    {   
        font-size: 15px;
    }
    .DataTable td img, .DataTable th img{
        width: 20px;height: 20px;
    }
    #BBWYTABLE tr td:nth-child(1),
    #BBWYTABLE tr th:nth-child(1)
    {
        display: none;
    }
    #BBWYTABLE td,   #BBWYTABLE th
    {
        padding: 1px 2px 2px 1px;
    }
    #BBWYTABLE tr td:nth-child(2)
    {
        text-align: left;
    }
    
    .PlanMonthGruop tr td:nth-child(2).fixed2,
    .PlanMonthGruop tr td:nth-child(3).fixed2,
    .PlanMonthGruop tr td:nth-child(4).fixed2,
    .PlanMonthGruop tr td:nth-child(5).fixed2,
    .PlanMonthGruop tr td:nth-child(6).fixed2,
    .PlanMonthGruop tr td:nth-child(7).fixed2,

    .PlanMonthGruop tr:nth-child(2) th:nth-child(2).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(3).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(4).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(5).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(6).fixed4,
    .PlanMonthGruop tr:nth-child(2) th:nth-child(7).fixed4,
    
    .pmgPlanning tr td:nth-child(2).fixed2,
    .pmgPlanning tr td:nth-child(3).fixed2,
    .pmgPlanning tr td:nth-child(4).fixed2,
    .pmgPlanning tr td:nth-child(5).fixed2,
    .pmgPlanning tr td:nth-child(6).fixed2,
    .pmgPlanning tr td:nth-child(7).fixed2,

    /*table.pmgPlanning tr:nth-child(2) th:nth-child(2),*/
    table.pmgPlanning tr:nth-child(2) th:nth-child(3),
    table.pmgPlanning tr:nth-child(2) th:nth-child(4),
    .pmgPlanning tr:nth-child(2) th:nth-child(5).fixed4,
    .pmgPlanning tr:nth-child(2) th:nth-child(6).fixed4,
    .pmgPlanning tr:nth-child(2) th:nth-child(7).fixed4{
        display: none;
    }
    .canHide{display: none;}
    .PlanMonthGruop tr td, .PlanMonthGruop tr th, table.subTableChecks td label,
    .PlanMonthGruopService tr td, .PlanMonthGruopService tr th, table.subTableChecks td label
    {font-size: 12px;/*height:40px;/*font-weight: bold;min-width:100px;*/}
    #bcalender_year{display: table-cell;}
    .plannungheaderbuttons{border: none; height: 32px;width: 90%;position: absolute;top :3px; height: 29px;}
    .plannungheaderbuttons td{border:none; position: relative;}
    .pmgPlanning tr .fixed2:first-child
    {
        text-align: left;
    }
    .PlanMonthGruop tr .fixed2:first-child
    {
        text-align: left;
    }
    .main + table td
    {
        font-size: 15px;
    }
    .mobileDocLink{
        font-size: 100px;
    }
    #curAlloc, #stdAlloc{/*transform: scale(4);*/}
    /*#curAllocLabel, #stdAllocLabel{margin:20px}*/
    #selectBoxesTH{padding-bottom: 20px;}

    table.info_vacation_table tr td{padding: 1px; font-size: 15px;}
    /*table.info_vacation_table tr:nth-child(2n+1) td {line-height: 0.8;}*/
    /*table.info_vacation_table tr:not(:first-child) td:last-child{text-align:right;}*/
    table.info_vacation_table tr td:nth-child(2) 
    , table.info_vacation_table tr td:nth-child(4) 
    {
        text-align: right;
        font-size: 15px;
        border-color: lightgray;
    }
    table.info_vacation_table tr td:nth-child(1) 
    , table.info_vacation_table tr td:nth-child(3) 
    {
        text-align: left;
        font-size: 15px;
        border-color: lightgray;
        padding-left: 5px;
    }

    .ModalContainer
    {
        font-size: 15px;        
    }
    .AskDialog
    {
        width: calc(100% - 40px);
        left: 15px;
        /*height: 400px;*/
        border-radius: 10px;
        height: 200px;
    }
.ModalDialog
{
    height: 100px;
}
#loader
{
    width: 20px;
    height: 20px;
    border-top: 5px solid blue;
    top: 10px;
}
    #Modal_YES, #Modal_NO
    {
        font-size: 15px;
        width: 30%;
        border-radius: 50px;
    }
    .ModalDialogButtonCont
    {
        height: 100px;
    }
    /*td:has(> select.Vacation_list) 
    {
        visibility: hidden !important;
    }*/
    /*.info_vacation_table
    {
        width: 100%;
        zoom:70%
    }
    .selectDiv{
        zoom:70%;
        font-size: 15px;
    }
    .info_vacation_table tr td{
        font-size: 30px;
    }*/
    #listFilter
    {
        font-size: 10px !important;
    }
    .backwardButton
    {

    }
    .Documentcontainer
    {
        width: calc(100% - 10px);
        margin-left: 5px;
        border-radius: 5px;
    }
    .DocumentButton, a.fDownload
    {
        font-size: 15px;
        border-radius: 2vh;
        padding: 5px 10px;
    }
    /*
    table.Vacation_Plan_
    {
        table-layout: fixed;
    }*/
    table.Vacation_Plan_
    {
        height: 720px;
    }

    .Vacation_Plan_ tr
    {
        height: unset;
    }
    /*table.Vacation_Plan_ tr:nth-child(n+3) td*/
    table.Vacation_Plan_ tr:not(:nth-child(1)):not(:nth-child(2)):not(.vacation_public_Holiday_table td)
    {
        height: 10px;
        /*line-height: 1px;*/
    }
    table.Vacation_Plan_ tr:not(:nth-child(1)):not(:nth-child(2)) td:not(.vacation_public_Holiday_table td) 
    {
        height: 60px;
        /*line-height: 1px;*/
        font-size: 15px;
    }
    
    table.Vacation_Plan_ tr:nth-child(1) td
    {
        height: 60px;
    }
    table.Vacation_Plan_ tr:nth-child(2) td
    {
        height: 60px;
        font-size: 12px;
    }
    table.vacation_public_Holiday_table
    {
        /*height: 100%;*/
        height: 60px !important;
    }
    table.vacation_public_Holiday_table tr:nth-child(1) td
    {
        height: 35px !important;
    }
    table.vacation_public_Holiday_table tr:nth-child(1)
    {
        height: 35px !important;
    }
    table.vacation_public_Holiday_table tr:nth-child(2)
    {
        height: 15px !important;
    }
    .vacation_public_Holiday_table tr:nth-child(2) td
    {
        height: 15px !important;
        font-size: 10px;
    }
    .backward, .forward
    {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .father_arrow
    {
        height: 100%;
        width: 3vh;
    }
    .arrow
    {
        width: 1vh;
        height: 1vh;
        margin-right: 25%;
        border-width: 5px;
    }
    .spanoo
    {
        height: 1.5vh;
        width: 1.5vh;
    }
    .vInfo {
        font-size:15px;
        margin: 	0px;
        position:absolute; 
        top:50%;
        transform: translateY(-50%);
        left:50%;
        transform: translateX(-50%);
    }
    .vInfo2, #vInfo2_forms1, #vInfo2_forms2{ font-size:12px;}
    #vInfo2_forms1, #vInfo2_forms2{margin-left: 5%;font-size: 12px;margin-top: 20px;}
    .vrclsBtn{font-size:20px;padding: 10px;height: 40px;width:40px;line-height: 20px;}
    .RequestDivContainer
    {
        top:45px;
        font-size: 35px;
        height: 70%;
    }
    .vrEditbtn , .vrDeletebtn, .vrSendbtn, .vrcancelbtn
    {
        width: 30%;
        font-size: 12px;
        position: absolute;
        height: 30px;
        border-radius: 30px;
    }
    button.vrSendbtn
    {
        left: 15%;
        margin-right: 5%;
    }
    button.vrcancelbtn
    {
        left: 50%;
    }
    #ConfirmEdit{left: 10px;}
    #DeleteRequest{ left: calc(30% + 15px)}
    #PrintRequest {left: calc(60% + 20px)}

    #AcceptRequest{left: 10px;}
    #rejectRequest{left: calc(30% + 15px)}
    #printRequest {left: calc(60% + 20px)}

    #RequestsDetails > div > h2 { font-size: 15px;}    
    .vrInfo3{font-size: 50px;}
    .ButtonsDivRequest{width: 80%;margin-top:10px;margin-left: 50%; transform: translateX(-50%);height: 50px;position: fixed;top: 80%;}
    table.DataTableSub{width:99%}
    table.DataTableSub td{font-size: 12px;padding: 1px;}
    .DataTableSub tr td:nth-child(1)
    {
        text-align: left;
    }
    #requests, #SaveRequests
    {        
        /*font-size: 40px;padding: 10px 0px; */
        /*width: 40%;*/
        /*height: 40px;*/
        border-radius: 40px;
        padding: 5px;
        height: 30px;
    }
    .info_vacation_table tr:nth-child(2) td button
    {
        width: 40%;
    }
    #RequestsDetails
    {
        position: relative;
        height: inherit;
    }
    .selectContainer{
        font-size: 30px;
    }
    .select-dropdown-down{
        border-width: 10px 8px 0 8px;
    }
    .select-dropdown-up
    {
        border-width: 0px 8px 10px 8px;
    }

    .bringSchichten
    {
        left: 5px;
    }

    .BSRR td{
        text-align: left;
    }


}

/*tablet*/
@media (min-width: 768px) and (orientation: portrait){
    .headerDiv{
        height: 80px;
    }
    .infoHeader{
        top: 80px;
        height: 40px;
    }
    .headeDivIcon{
        width: 32px;
        height: 32px;
    }
    .dataContainer{
        top: 120px
    }
    .logocontainer > img{
        height: 48px;
    }
    .name{
        font-size: 15px;
    }
    .info_vacation_table
    {
        /*width: 100%;*/    
        width: 100%;
        margin-left: auto;
        transform: unset;
    }
    .info_vacation_table td{font-size: 1.3vw;}
    /*.info_vacation_table td:nth-child(odd){font-size: 1.3vw;}
    .info_vacation_table td:nth-child(even){font-size: 1.5vw;text-align: right;}
    /*table.Vacation_Plan_{width: 200%;}*/
    /*table.Vacation_Plan_ td, table.Vacation_Plan_ th {
        font-size: 20px;
    }*/
    /*.Vacation_Plan_{
        table-layout: fixed;
        font-size: 30px;
        table-layout: fixed;
        width: 100%;
    }
    .Vacation_Plan_ td {
        width: 10%;
    }
    .vacation_public_Holiday_table{
        font-size: 30px;
    }
    .info_vacation_table td{
        font-size: 1vw;
    }
    .info_vacation_table  tr:nth-child(1) td:nth-child(1){
       width: 30%;
    }
    .info_vacation_table  tr:nth-child(1) td:nth-child(even){
      padding-left:2%;
     }*/
     /*.arrow{
        width: 0.9vw;
        height: 0.9vw;
    }
    .father_arrow{
        width: 2vw;
        height: 2vw;
    }*/
}
@media print{
    /*@page {
        margin: 25mm 25mm 25mm 25mm;  
      }*/
      @page {
        /*margin: 10mm; /* Adjust to your desired page margins */
        counter-increment: page;      
      }

    html, body {
        border: 1px solid white;
        height: 99%;
        width: 100%;
        page-break-after: avoid;
        page-break-before: avoid;
        /*counter-reset: page;*/
        margin:0;
        counter-reset: page; /* Reset the counter */
     }
     /*@page {
         background-color: red;
        @bottom-right {
           content: counter(page)
           " of "
           counter(pages);
        }
     }*/

    .headerDiv, .infoHeader{
        visibility:hidden;
        display: none;
    }
    /*table {
        border-collapse: separate;
        border-spacing: 0px 0px 0px 0px;
        /*border: solid  !important;*/
        /*border-width: 1px 1px 1px 1px !important;
    }
    td {
        border: solid rgb(220,220,220) !important;
        border-width: 1px 1px 1px 1px !important;
    }*/

    .dataContainer{
        top: 0%;
        width: 100%;
        /*left: 0.5%;*/
        overflow: unset;
        padding: 10px;
        /*font-size: 1.3vw;*/
        text-align: left;
        page-break-inside: avoid;            
    }
    .DataTableContainer
    {
        width: 100%;
        overflow: unset;
        height: 90%;
        border:none;
        padding: 0px;        
    }
    .DataTable:nth-child(1), .PLY
    {
        /*border-collapse: collapse;*/
        width: 100% !important;
        /*height: 90%;*/
        table-layout: auto !important;
        /*border: none;*/
        
    }
    .DataTable:nth-child(2)
    {
        width: 100% !important;
        table-layout: auto !important;
        margin-top: 0 !important;
    }
    .DataTable thead tr:nth-child(1), .DataTable thead tr:nth-child(2), .PlanMonthGruop thead tr:nth-child(1),
    .pmgPlanning thead tr:nth-child(1), .PLY thead tr:nth-child(1)
    , .PlanMonthGruopService thead tr:nth-child(1){
        display:table-row !important;
    }
    .DataTable thead tr:nth-child(1) th:nth-child(1),
    /*.DataTable thead tr:nth-child(2) th:nth-child(1),*/
    .PlanMonthGruop thead tr:nth-child(1) th:nth-child(1),
    .pmgPlanning thead tr:nth-child(1) th:nth-child(1),
    .PLY thead tr:nth-child(1),
    .PLY thead tr:nth-child(1) th:first-child
    {
        border: none;
        background-color: none;

    }
    .DataTable thead tr th, .PlanMonthGruop tr th, .PlanMonthGruop tr td{
        /*font-size: 1.4vw;*/
        /*counter-increment: page;*/
        padding: 1px;
        min-width: unset;
    }
    .DataTable tr th , .DataTable tr td, .PlanMonthGruop tr th, .PlanMonthGruop tr td{
        padding : 0px 0px 1px 1px;
        border: 0px 1px 1px 0px;
    }
    .DataTable tr td{/*font-size: 1.4vw;*/}
    .DataTable tr{
        page-break-inside: avoid;
        
    }
    .DataTable thead {display: table-header-group;/*padding-top: 100px;margin-top: 100px;*/}
    .DataTable tfoot {display: table-footer-group;page-break-inside: avoid;}
    .footer{background:none; text-align:left;border:none;font-size:12px;color:grey;width:100%;}
    .footer i {display:none;}
    .footer{height: 2vh;bottom: 20px; /*counter-increment: Mypage;*/ }
    .footer::after 
    {    
        position: fixed;
        /*content: "Page " counter(page); /* Use the 'page' counter */        
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .footer > .userName{float: right;}


    .PlanMonthGruop, .pmgPlanning, .PlanMonthGruopService /*, .PlanMonthGruop tbody, .PlanMonthGruop thead*/ {
        /*font-family: arial;*/
        font-size: 0.6vw;
        /* background-color: #f9f9f9; */
        /*margin: 0px auto;*/
        /*color: #4b4b4b;*/
        table-layout: auto;
        font-family: arial;
        border-collapse: separate;        
        border-spacing: 0px;
        box-sizing: border-box;
        border: none;
        /*width: 90%;*/
        width: 100%;
        page-break-inside: auto; /* Allow breaks within the table */
        border-collapse: collapse;
    }
    .PlanMonthGruop tr, .pmgPlanning tr, .PlanMonthGruopService tr{
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
    }
    .PlanMonthGruop  tr td, .PlanMonthGruop tr th,
    .pmgPlanning tr td , .pmgPlanning tr th,
    .PlanMonthGruopService tr td, .PlanMonthGruopService tr th
    {
        /*padding: 0px !important;*/
        /*font-size: 0.9vw;*/
        background-color: none;
        page-break-inside: avoid;
        page-break-before: avoid;
        min-width: 10px;
        /*height: 5px;*/
        border-right: 1px solid rgb(220,220,220);
        border-bottom: 1px solid rgb(220,220,220);
        padding-left: 3px;
    }
    .PlanMonthGruopService{width: 100%; table-layout: fixed;top: 25px;}
    /*#serviceTitle{display: block !important; position: absolute !important; top: 0; left: 0; height: 20px;}*/
    .PlanMonthGruopService tr td ,
    .PlanMonthGruopService tr th
    {
        font-size: 0.45vw;
        padding: 0;        
    }
    td[textvertical] > div
    {
        word-break: break-all;
    }
    table.subTableChecks{display: none;}
    #WorkingHoursAccount{
        width: 90% !important;
        font-size: large !important;
    }
    #WorkingHoursAccount tr th{
        font-size: large !important;
    }

    /*#myDemoTable tfoot{display: none;}*/
    .PlanMonthGruopService thead tr:nth-child(1){display: block !important;}
    .PlanMonthGruopService thead tr:nth-child(1) th{border: none !important; padding-top: 20px;}
    .PlanMonthGruopService tfoot {/*visibility: visible !important;*/ display: table-footer-group;page-break-inside: avoid;}
    .PlanMonthGruopService tfoot th{border: none;}
    .ExportTable{border-collapse: collapse;}
    #DemandTable tr td, #DemandTable tr th{font-size: 1.3vw !important;padding: 0px 2px !important;}
    #MessageStyle1{display: none;}    
    .pmgPlanning tfoot th{
        border:none;
    }
    .main{display: none !important;}
}