@font-face{
  font-family: "Roboto-Regular";
  src: url("../public/Roboto-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Roboto-Bold";
  src: url("../public/Roboto-Bold.ttf") format("truetype");
}

body {
   padding                    : 0px;
   margin                     : 0px;
   font-family                : Roboto-Regular;
   font-size                  : 12pt;
   background-color           : #F3F4F6;
}

table {
   border-collapse            : collapse;
}

#leftmenu {
   background-color           : #262E44;
   height                     : 100%;
   width                      : 250px;
   position                   : absolute;
   left                       : 0px;
   top                        : 0px;
   color                      : #FFFFFF;
}

#topmenu {
   height                     : 30px;
   width                      : calc(100% - 255px);
   background-color           : #E8E8E8;
   position                   : absolute;
   left                       : 250px;
   top                        : 0px;   
   padding-left               : 5px;
   padding-top                : 10px;
}

#maincontent {
   min-height                 : 100px;
   width                      : calc(100% - 265px);
   position                   : absolute;
   left                       : 260px;
   top                        : 55px;
   background-color           : #FFFFFF;
}

#logintable {
   width                      : 850px;
   font-family                : Roboto-Regular;
   font-size                  : 15pt;
   border                     : 1px #252E43 solid;
   border-collapse            : collapse;
   border-spacing             : 0px;
}

.logininput {
   font-family                : Roboto-Regular;
   font-size                  : 15pt;
   height                     : 30px;
   width                      : 200px;
   border                     : 1px #000000 solid;
}

.LoginPageLink {
   font-family                : Roboto-Regular;
   font-size                  : 10pt;
   text-decoration            : none;
   color                      : #252E43;
}

#logindiv {
   width                      : 850px;
   height                     : 280px;
   position                   : absolute;
   left                       : 50%;
   top                        : 50%;
   margin-left                : -425px;
   margin-top                 : -140px;
   padding                    : 0px;
} 

.tabbingtable {
   width                      : 90%;
   margin-top                 : 15px;
   margin-left                : 5px;
   margin-bottom              : 30px;
}

.tabbingtableth {
   border-left                : 2px #FFFFFF solid;
   border-bottom              : 2px #FFFFFF solid;
   border-right               : 2px #FFFFFF solid;
   border-top                 : 2px #FFFFFF solid;
   padding-top                : 3px;
   padding-bottom             : 3px;
}

.tabbingtablethselected {
   border-left                : 2px #FFFFFF solid;
   border-bottom              : 2px #359AB9 solid;
   border-right               : 2px #FFFFFF solid;
   border-top                 : 2px #359AB9 solid;
   padding-top                : 3px;
   padding-bottom             : 3px;
}

.tabbingtablelink {
   font-size                  : 12pt;
   color                      : #000000;
   text-decoration            : none;
}

.tabbingtablelinkselected {
   font-size                  : 12pt;
   color                      : #359AB9;
   text-decoration            : none;
}

.menubutton {
   font-size                  : 12pt;
   background-color           : #272E45;
   color                      : #FFFFFF;
   height                     : 30px;
   padding-left               : 5px;
}


.inputsubmit {
	box-shadow:inset 0px 0px 15px 3px #23395e;
	background:linear-gradient(to bottom, #262e44 5%, #415989 100%);
	background-color:#262e44;
	border-radius:17px;
	border:1px solid #1f2f47;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:8px 20px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.inputsubmit:hover {
	background:linear-gradient(to bottom, #415989 5%, #262e44 100%);
	background-color:#415989;
}
.inputsubmit:active {
	position:relative;
	top:1px;
}

.inputsubmitdisabled {
	box-shadow                 : inset 0px 0px 15px 3px #C0C0C0;
	background                 : linear-gradient(to bottom, #C0C0C0 5%, #415989 100%);
	background-color           : #C0C0C0;
	border-radius              : 17px;
	border                     : 1px solid #1f2f47;
	display                    : inline-block;
	cursor                     : not-allowed;
	color                      : #ffffff;
	font-family                : Roboto-Regular;
	font-size                  : 15px;
	padding                    : 8px 20px;
	text-decoration            : none;
	text-shadow                : 0px 1px 0px #263666;
}


.inputtext { 
   border                     : 1px #000000 solid;
   padding-left               : 2px;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   height                     : 30px;
}

.inputtexterror { 
   border                     : 2px #FF0000 solid;
   padding-left               : 2px;
   font-size                  : 12pt;
   font-family                : Roboto-Regular;
   height                     : 30px;
}

.inputtextsmall { 
   border                     : 1px #000000 solid;
   padding-left               : 2px;
   font-size                  : 9pt;
   font-family                : Roboto-Regular;
   height                     : 24px;
}

.inputtextsmallerror { 
   border                     : 2px #FF0000 solid;
   padding-left               : 2px;
   font-size                  : 9pt;
   font-family                : Roboto-Regular;
   height                     : 24px;
}

#StatusPopUpSuccess {
   width                      : 600px;
   text-align                 : center;
   font-family                : Roboto-Regular;
   font-size                  : 14pt;
   min-height                 : 40px;
   padding-top                : 20px;
   padding-bottom             : 20px;
   background-color           : #E1FFE1;
   border                     : 1px #000000 solid;
   box-shadow                 : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -webkit-box-shadow         : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -moz-box-shadow            : 2px 2px 5px 0px rgba(0,0,0,0.72);
   border-radius              : 0px 0px 10px 10px;
   position                   : fixed;
   top                        : 0px;
   left                       : 50%;
   margin-left                : -300px;
   -webkit-animation          : signup-response 0.5s 1;
   animation                  : signup-response 0.5s 1;
   -webkit-animation-delay    : 2s; /* Safari and Chrome */
   animation-delay            : 3s;
   -webkit-animation-fill-mode: forwards;   
   animation-fill-mode        : forwards;
}

#StatusPopUpFailed {
   width                      : 600px;
   text-align                 : center;
   font-family                : Roboto-Regular;
   font-size                  : 14pt;
   min-height                 : 40px;
   padding-top                : 20px;
   padding-bottom             : 20px;
   background-color           : #FFE8E1;
   border                     : 1px #000000 solid;
   box-shadow                 : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -webkit-box-shadow         : 2px 2px 5px 0px rgba(0,0,0,0.72);
   -moz-box-shadow            : 2px 2px 5px 0px rgba(0,0,0,0.72);
   border-radius              : 0px 0px 10px 10px;
   position                   : fixed;
   top                        : 0px;
   left                       : 50%;
   margin-left                : -300px;
   -webkit-animation:signup-response 0.5s 1;
   animation:signup-response 0.5s 1;
   -webkit-animation-delay:2s; /* Safari and Chrome */
   animation-delay:3s;
   -webkit-animation-fill-mode: forwards;   
   animation-fill-mode: forwards;
}

@keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

.tablelistingtr:hover {
  background-color         : #EBEBEB;   
}

.listinglink {
   color                   : #000000;
   font-size               : 11pt;
   text-decoration         : underline dotted;
}

.leftmenuitem {
   background-color        : #262E44;
   background-repeat       : no-repeat;
   background-position     : 5px 50%;
   background-size         : 33px;
   width                   : 100%;
   height                  : 35px;
   margin                  : 0% 5px 0% 5px;
   padding                 : 10px 0 0 50px;
}

.leftmenuitemlink {
   font-size               : 14pt;
   color                   : #FFFFFF;
   text-decoration         : none;
}
   
@keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes signup-response{
    from {opacity :1;}
    to {opacity :0;}
}

.PageButton {
   border                     : 0px;
   background-color           : #8ACCC8;
   border-radius              : 5px;
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   height                     : 30px;
   text-align                 : center;
   color                      : #FFFFFF;
}



.PageButtonRed {
   border                     : 0px;
   background-color           : #CD898E;
   border-radius              : 5px;
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   height                     : 30px;
   text-align                 : center;
   color                      : #FFFFFF;
}

.newstable {
  border-collapse          : collapse;
  border-radius            : 10px;
  border-style             : hidden; /* hide standard table (collapsed) border */
  box-shadow               : 0 0 0 1px #E6E7E9; /* this draws the table border  */ 
  overflow: hidden
}

.newstable th {
  font-family              : Roboto-Bold;
  font-size                : 12pt;
  color                    : #76A591;
  background-color         : #F9FAFB;
}

.newstable td {
  border                   : 1px solid #ccc;
  background-color         : #FFFFFF;
  font-family              : Roboto-Regular;
  font-size                : 11pt;  
  color                    : #000000;  
  padding                  : 5px;
}

.forumgroup {
  border-collapse          : collapse;
  border-radius            : 10px;
  border-style             : hidden; /* hide standard table (collapsed) border */
  box-shadow               : 0 0 0 1px #E6E7E9; /* this draws the table border  */ 
  overflow                 : hidden;
  width                    : 98%;
}

.forumgroup th {
  font-family              : Roboto-Bold;
  font-size                : 12pt;
  color                    : #76A591;
  background               : linear-gradient(0deg, rgba(246,249,253,1) 35%, rgba(238,245,251,1) 69%);
}

.forumgroup td {
  border                   : 1px solid #ccc;
  background-color         : #FFFFFF;
  font-family              : Roboto-Regular;
  font-size                : 11pt;  
  color                    : #000000;  
  padding                  : 5px;
}

h1 {
  color                    : #272E45;
  font-size                : 16pt;
  font-family              : Roboto-Bold;
  margin                   : 15px;
}

h2 {
  color                    : #272E45;
  font-size                : 14pt;
  font-family              : Roboto-Bold;
  margin                   : 8px;
}

.popupmenulink {
   font-family             : Roboto-Regular;
   font-size               : 12pt;
   text-decoration         : none;
   color                   : #272E45;
}
   
  .checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 25px;
  }

  @-moz-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @-webkit-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-webkit-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-moz-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  .checkbox-wrapper-19 input[type=checkbox] {
    display: none;
  }

  .checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #000;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
  }
  .checkbox-wrapper-19 .check-box::before,
  .checkbox-wrapper-19 .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: #34b93d;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    -webkit-transition: opacity ease 0.5;
    -moz-transition: opacity ease 0.5;
    transition: opacity ease 0.5;
  }
  .checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .05);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
  .checkbox-wrapper-19 .check-box.checked {
    border-color: #34b93d;
  }
  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
  .checkbox-wrapper-19 .check-box.checked::after {
    height: calc(var(--checkbox-height) / 2);
    -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    animation: dothabottomcheck-19 0.2s ease 0s forwards;
  }
  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
  .checkbox-wrapper-19 .check-box.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
    animation: dothatopcheck-19 0.4s ease 0s forwards;
  }
  




.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}   

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}


.greenbutton {
   background-color                 : #eaf9f7;
   font-size                        : 12pt;
   padding                          : 0.5rem 1rem;
   border-radius                    : 0.375rem;
   border-width                     : 1px;
   border-color                     : transparent;
   font-weight                      : 500;
   color                            : #009991;
   padding-left                     : 10px;
   padding-right                    : 10px;
   align-items                      : center;
   justify-content                  : center;
}

.forumthreadlink {
   font-family                      : Roboto-Bold;
   font-size                        : 13pt;
   color                            : #000000;
}

.timeblock {
   margin-left                      : 10px;
   margin-bottom                    : 3px;
   width                            : 210px;
   float                            : left;
   border                           : 1px #E8E8E8 solid;
   border-radius                    : 10rem;
   background-color                 : #F3F6FC;
}

.timecheckin {
   font-family                      : Roboto-Bold;
   font-size                        : 9pt;
   border-radius                    : 10rem;
   color                            : #FFFFFF;
   display                          : inline-block;
   width                            : 50px;
   background-color                 : #34bfa3;
   padding-top                      : 5px;
   padding-left                     : 5px;
   padding-bottom                   : 5px;
   margin                           : 3px;
   float                            : left;
}

.timecheckout {
   font-family                      : Roboto-Bold;
   font-size                        : 9pt;
   border-radius                    : 10rem;
   color                            : #FFFFFF;
   display                          : inline-block;
   width                            : 50px;
   background-color                 : #ff518a;
   padding-top                      : 5px;
   padding-left                     : 5px;
   padding-bottom                   : 5px;
   margin                           : 3px;
   float                            : left;
}

.timeamount {
   font-family                      : Roboto-Bold;
   font-size                        : 9pt;
   border-radius                    : 10rem;
   color                            : #FFFFFF;
   display                          : inline-block;
   width                            : 50px;
   background-color                 : #02A40B;
   padding-top                      : 5px;
   padding-left                     : 5px;
   padding-bottom                   : 5px;
   margin                           : 3px;
   float                            : left;
}

.invoicestatuspaid {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #000000;
   background-color           : #00AA55;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;
}

.invoicestatuscanceled {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #FFFFFF;
   background-color           : #000000;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;
}

.invoicestatusactive {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #000000;
   background-color           : #2291FF;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;
}

.invoicestatusreminder1 {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #000000;
   background-color           : #FFFF80;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;

}

.invoicestatusreminder2 {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #000000;
   background-color           : #FF8040;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;

}

.invoicestatusreminder3 {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #000000;
   background-color           : #FF8080;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;

}

.invoicestatuscollection {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #FFFFFF;
   background-color           : #FF0000;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;

}

.invoicestatusdraft {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #000000;
   background-color           : #C0C0C0;
   padding                    : 3px 5px 3px 5px;
   border-radius              : 5px;
}

.documenttypeinvoice {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #FFFFFF;
   background-color           : #B00004;
   padding                    : 3px 5px 3px 5px;
}

.documenttypecreditnote {
   font-family                : Roboto-Regular;
   font-size                  : 11pt;
   color                      : #FFFFFF;
   background-color           : #2001AF;
   padding                    : 3px 5px 3px 5px;
}

.NewPopUpLabel {
   font-family                : Roboto-Bold;
   font-size                  : 11pt;
   color                      : #8F8F8F;
}

.myRedButton {
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
	background-color:#fe1a00;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}
.myRedButton:hover {
	background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
	background-color:#ce0100;
}
.myRedButton:active {
	position:relative;
	top:1px;
}

.MessageDivInformation {
   margin                   : 15px 5px;
   line-height              : 1.4;
   background-color         : #42C1F1;
   color                    : #FFFFFF;
   font-family              : Roboto-Regular;
   font-size                : 11pt;
   width                    : 100%;
   padding                  : 8px 10px 8px 44px;
   background-image         : url('../img/support.png');
   background-repeat        : no-repeat;
   background-position      : 10px center;
   background-size          : clamp(24px, 40%, 32px);
   border                   : 1px solid #0C759C;
   border-left-width        : 2px;
}

.MessageDivError {
   margin                   : 15px 5px;
   line-height              : 1.4;
   background-color         : #F2405A;
   color                    : #FFFFFF;
   font-family              : Roboto-Regular;
   font-size                : 11pt;
   width                    : 90%;
   padding                  : 8px 10px 8px 50px;
   background-image         : url('../img/alert.png');
   background-repeat        : no-repeat;
   background-position      : 10px center;
   background-size          : clamp(24px, 40%, 32px);
   border                   : 1px solid #990B20;
   border-left-width        : 2px;
   min-height               : 26px;
}   

.menuiconlist {
   background-color         : #262E44;
   padding                  : 5px;
   float                    : right;
   margin-right             : 10px;
}

.menuiconlist img {
   border                   : 1px #42C1F1 solid;
   margin                   : 2px;
   height                   : 20px;
}

.clearfix::after {
    content                 : "";
    display                 : block;
    clear                   : both;
}

:root{
  --blue:#2f78a8;
  --blue2:#3f8fbe;
  --border:#1f5f86;
  --accent:#f0a000;
  --accent2:#ffb21a;
  --text:#fff;
  --inputBorder:#cfd6dd;
  --radius:0; /* Screenshot wirkt eher eckig */
}

.toolbar{
  display:flex;
  align-items:stretch;
  gap:0;
  font-family: Arial, sans-serif;
}

.search{
  display:flex;
  align-items:stretch;
}

.search input{
  height:34px;
  width:260px;
  padding:0 12px;
  border:1px solid var(--inputBorder);
  border-right:0;
  outline:none;
  font-size:14px;
}

.btnbar{
  display:flex;
  align-items:stretch;
}

.btn, .search .btn{
  height:34px;
  min-width:36px;
  padding:0 10px;
  border:1px solid var(--border);
  background:var(--blue2);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.btn:hover{ filter:brightness(1.05); }
.btn:active{ filter:brightness(0.95); }

.btn + .btn{ border-left:0; }               /* Buttons “kleben” */
.btnbar > * + *{ margin-left:0; }           /* keine Lücken */

/* Clear-Button  */
.btn-clear{
  border:1px solid var(--border);
  background:var(--blue2);
  font-size:18px;
  line-height:1;
}

/* Orange Add-Button */
.btn-accent{
  background:var(--accent2);
  border-color:#c98500;
  color:#fff;
  font-weight:bold;
}
.btn-accent:hover{ filter:brightness(1.03); }


.split{
  display:flex;
  align-items:stretch;
}
.split .btn{ border-left:0; } /* weil der Split-Block selbst in der Gruppe sitzt */
.split .btn:first-child{
  border-left:1px solid var(--border); /* erster im Split bekommt wieder Rand */
}
.btn-caret{
  min-width:26px;
  padding:0 6px;
  font-size:11px;
}


.toolbar .search input{ border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius); }
.toolbar .btnbar > :last-child .btn:last-child{ border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius); }


.ico{ font-size:14px; line-height:1; }


.popupheader {
   font-family             : Roboto-Bold;
   font-size               : 12pt;
   text-decoration         : underline;
   margin-top              : 5px;
   margin-bottom           : 10px;
}

#EditInvoiceHeaderDiv {
   width                   : 1200px;
   background-color        : #FFFFFF;
   border-radius           : 10px;
   -webkit-box-shadow      : 2px 2px 5px 0px rgba(0, 0, 0, 0.72);
   -moz-box-shadow         : 2px 2px 5px 0px rgba(0, 0, 0, 0.72);
   border                  : 1px #000000 solid;
   padding                 : 10px;
}

.EditInvoiceH1 {
   font-family              : Roboto-Bold;
   font-size                : 18pt;
   color                    : #616161;
}

.EditInvoiceH2 {
   font-family              : Roboto-Bold;
   font-size                : 12pt;
   color                    : #A39483;
}

.readonlyvalue {
   display: inline-block;
   min-width: 100px;
   padding: 4px 2px;
   color: #333;
}


#InvoiceUploadFileDiv.collapse {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 260ms ease, opacity 200ms ease, transform 260ms ease;
  pointer-events: none; /* damit es im geschlossenen Zustand nicht “klickbar” ist */
}


#InvoiceUploadFileDiv.collapse.is-open {
  max-height: 220px;   /* genug groß wählen, damit der Inhalt reinpasst */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.Layout90Header {
   background-color              : #F3F3F3;
   color                         : #525E6C;
   font-family                   : Roboto-Bold;
   font-size                     : 11pt;
   padding-left                  : 5px;
}

.Layout90Table {
   border                        : 1px #262E44 solid;
}

.Layout90Cell {
   padding                       : 10px;
}

.country-select {
    position: relative;
    width: 250px;
    font-family: Arial;
}

.country-selected {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.country-selected img {
    width: 20px;
    margin-right: 8px;
}

.country-list {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    background: white;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.country-option {
    padding: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.country-option img {
    width: 20px;
    margin-right: 8px;
}

.country-option:hover {
    background: #f0f0f0;
}   











.listlayout {
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* Linke Spalte (BREITE ANPASSBAR) */
.listsidebar {
    width: 250px; /* 👉 HIER anpassen */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Boxen links */
.listbox {
    position: relative;
    border: 2px solid black;
    border-radius:5px;
    min-height: 150px;
    padding: 15px;
    background: #f5f5f5;
}

/* Edit Icon oben rechts */
.listedit-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Inhalt */
.listbox .listcontent {
    margin-top: 10px;
}

/* Rechte Seite */
.listmain {
    flex: 1; 
    border: 3px solid black;
    min-height: 400px;
    padding: 20px;
    background: #fafafa;
}






/* Grundlayout */
.layout {
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* Linke Spalte (BREITE ANPASSBAR) */
.sidebar {
    width: 325px; /* 👉 HIER anpassen */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Boxen links */
.box {
    position: relative;
    border: 1px solid black;
    min-height: 150px;
    padding: 15px;
    background: #f5f5f5;
}

/* Edit Icon oben rechts */
.edit-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Inhalt */
.box .content {
    margin-top: 10px;
}

/* Rechte Seite */
.main {
    flex: 1; 
    border: 3px solid black;
    min-height: 400px;
    padding: 20px;
    background: #fafafa;
}