:root {
  --primary-dark: #2B8EA600; /* Mittleres Türkisblau */
  --primary-light: #39D2F900; /* Leuchtendes Himmelblau */
  --secondary-light: #1D355700; /* Dunkles Marineblau */
  --alertColor: #457B9D00; /* Gedämpftes Blaugrün für subtile Kontraste */
  --alertColor-trans-50: #457B9D00; /* 50% Transparenz für Alerts */
  --secondary-light-trans-80: #1D355700; /* 80% Transparenz Dunkelblau */
  --secondary-light-trans-30: #1D355700; /* 30% Transparenz Dunkelblau */
  --secondary-light-trans-90: #1D355700; /* 90% Transparenz Dunkelblau */
  --secondary-light-trans-50: #1D355700; /* 50% Transparenz Dunkelblau */
  --light-white: #E6FCFF00; /* Sanftes, bläuliches Weiß */
  --light-grey: #DCEFF500; /* Sehr helles Grau mit Blaustich */
  --dark-grey: #7C9AA300; /* Gedämpftes, kühles Grau */
  --white: #FFFFFF00; /* Reines Weiß */
  --primary-button-text: #FFFFFF00; /* Weißer Text für Buttons */
}

*{
    color: var(--primary-dark);
    font-family: Tahoma, sans-serif;
}
h1{
  font-size:16px;
}
h2{
  font-size:14px;
}
html, body{
    max-width:100%;
    background-color: var(--light-white);
    overscroll-behavior: none; 
    font-size:16px;
    overflow-x:hidden !important;
}
#AppBackButton{
  position:absolute;
  float:right;
  padding: 10px 15px 10px 10px;
  left:1%;
  margin-top:10px;
  background-color: var(--secondary-light-trans-80);
  border-radius:50%;
}
#AppBackButton .fa{
  color: #c4c4c4;
}
#logo_vertical{
  border-left:1px solid #FFF;
  height:38px;
  display:block;
  width:10px;
  position:absolute;
  float:left;
  left:15%;
  top:10px;
}
#logo{
    background-image: url("img/logo_kassenbuch.png");
    width:50px;
    height: 50px;
    background-size: cover;
    display:block;
    float:left;
    position:absolute;
    left:17%;
}
#mainTitle{
  color:var(--white);
  position:fixed;
  top:8px;
  left:70px;
  font-size:120%;
}
#subTitle{
    color:var(--white);
    position:fixed;
    top:35px;
    left:70px;
    font-size:70%;
  }
#gully{
    margin-top:10px;
    margin-right:10%;
    float:right;
}
#gully .fa{
    color: #FFF;
    font-size:30px;
}


#header{
    width:100%;
    display:block;
    position:fixed;
    top:0px;
    left:0px;
    height:52px;
    padding:3px;
    border-bottom:1px solid var(--primary-light);
    z-Index:1000;
    background-color: var(--primary-light);
}
.headerShadow{
  box-shadow: -5px 0px 10px var(--primary-dark);
}
#content{
    padding-top:60px;
    padding-left:5px;
    overflow-x: hidden;    
}
#homeBooks{
    position:absolute;
    top:15%;
    left:5%;
}
#homeBooks a, #homeStatistic a, #homeRedo a{
    display:block;
    padding:30px;
    border-radius:5px;
    border: 2px solid var(--primary-light);
    color:var(--primary-dark);
    text-decoration: none;
    width:80px;
}
#homeStatistic{
    position:absolute;
    top:15%;
    right:5%;
}
#homeRedo{
    position:absolute;
    top:30%;
    left:5%;
}
#bottomSheet{
    height:300px;
    position:fixed;
    z-Index:900;
    top:93%;
    width:99.9%;
    left:0px;
}
#bsHeader{
    height:50px;
    background-color: var(--primary-dark);
    border-radius:10px 10px 0px 0px;
}
#bsHeaderClick{
    position:absolute;
    float:right;
    padding: 10px;
    right:5%;
    margin-top:3px;
    background-color: var(--secondary-light-trans-80);
    border-radius:50%;
}
#bsHeaderClick .fa{
    color: #c4c4c4;
}

#bsHeaderClickPageInfo{
  position: absolute;
  float: right;
  padding: 5 6;
  left: 5%;
  margin-top: 7px;
  background-color: var(--secondary-light-trans-80);
  border-radius: 50%;
}
#bsHeaderClickPageInfo .fa{
  color: #c4c4c4;
}



.grey{
  color:var(--dark-grey);
}
.btnGrey{
  color:var(--dark-grey) !important;
  border:2px solid var(--dark-grey) !important;
}

#bsHeaderRow{
    margin-left:35%;
    background: #c4c4c4;
    height:5px;
    width:30%;
    position:absolute;
    margin-top:20px;
    border-radius:10px;
}
#bsContent{
    background:#FFF;
    height:151%;
    display:block;
    padding:10px;
    overflow-y: scroll;
}
#overlayBackground{
    background:#0b464460;
    width:100%;
    height:100%;
    position:fixed;
    z-Index:800;
    display:block;
    top:35px;
    left:0px;
    display:none;
}
#overlayBackgroundFullScreen{
  background:#0b464460;
  width:100%;
  height:100%;
  position:fixed;
  z-Index:1800;
  display:block;
  top:0px;
  left:0px;
  display:none;
}
.invisible{
    display:none;
}
.inputfield{
    border-bottom:2px solid var(--primary-light);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px 0px 5px 5px;
    padding:10px;
}
.inputfield:focus{
    border-bottom:2px solid var(--secondary-light);
     border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px 0px 5px 5px;
    padding:10px;
    outline-width: 0;
    outline: none;
}
.inputfield:disabled, #userId{
    color:var(--dark-grey) !important;
}
.inputfield{
    background: var(--white) !important;
}

.splitbook{
  background: var(--light-white) !important;
  width:60px;
  text-align: center;
  padding-right:15px;
}
.splitbook:focus{
  background: var(--light-white) !important;
}

.inputLabel{
    margin-top:-8px;
    margin-left:10px;
    color: var(--primary-dark);
    background: #FFF;
    font-weight:bold;
}

#btn_setUserName{
    padding:5px;
}
#btn_setUserName .fa{
    font-size:16px;
}

#toastWrapper{
    position: fixed;
    top:70%;
    z-index: 1001;
    display:block;
    text-align: center;
    border-radius: 10px;
    background: var(--secondary-light-trans-90);
    border: 1px solid var(--secondary-light);
    padding:10px 5px 10px 5px;
    width:90%;
    display:none;
    opacity: 0;
}

#addBelegSelector_hint, #addBookSelector_hint{
  position: fixed;
  z-Index: 900;
  top: 82%;
  right: 77px;
  background: var(--secondary-light-trans-90);
  border: 1px solid var(--secondary-light);
  padding: 5px;
  border-radius: 25px;
}
#addBook1_hint{
  position: fixed;
  z-Index: 900;
  top: 72%;
  right: 77px;
  background: var(--secondary-light-trans-90);
  border: 1px solid var(--secondary-light);
  padding: 5px;
  border-radius: 25px;
  display:none;
}
#addBook2_hint{
  position: fixed;
  z-Index: 900;
  top: 62%;
  right: 77px;
  background: var(--secondary-light-trans-90);
  border: 1px solid var(--secondary-light);
  padding: 5px;
  border-radius: 25px;
  display:none;
}

#addBookSelector, #addBelegSelector{
    position:fixed;
    top:80%;
    left:80%;
    background: var(--secondary-light-trans-80);
    border: 1px solid var(--secondary-light);
    color: var(--primary-button-text);
    border-radius:100%;
    padding:10px 14px 10px 14px;
    display:block;
    cursor:pointer;
    z-Index:900;
}

#addBookSelector .fa, #addBelegSelector .fa{
    font-size:30px;
    color: var(--primary-button-text);
}

#addBook{
  position:fixed;
  top:80%;
  left:80%;
  background: var(--secondary-light-trans-80);
  border: 1px solid var(--secondary-light);
  color: var(--primary-button-text);
  border-radius:100%;
  padding:10px 14px 10px 14px;
  display:none;
  cursor:pointer;
  z-Index:900;
}

#addBook .fa{
  font-size:30px;
  color: var(--primary-button-text);
}

#addBookBook{
  position:fixed;
  top:70%;
  left:80%;
  background: var(--secondary-light-trans-80);
  border: 1px solid var(--secondary-light);
  color: var(--primary-button-text);
  border-radius:100%;
  padding:10 12 10 12;
  display:none;
  cursor:pointer;
  z-Index:900;
}

#addBookBook .fa{
  font-size:30px;
  color: var(--primary-button-text);
}

#addBookByQR{
  position:fixed;
  top:60%;
  left:80%;
  background: var(--secondary-light-trans-80);
  border: 1px solid var(--secondary-light);
  color: var(--primary-button-text);
  border-radius:100%;
  padding:11 15 11 15;
  display:none;
  cursor:pointer;
  z-Index:900;
}

#addBookByQR .fa{
  font-size:30px;
  color: var(--primary-button-text);
}

#addBelegBook{
  position:fixed;
  top:70%;
  left:80%;
  background: var(--secondary-light-trans-80);
  border: 1px solid var(--secondary-light);
  color: var(--primary-button-text);
  border-radius:100%;
  padding: 10 10;
  display:none;
  cursor:pointer;
  z-Index:900;
}

#addBelegBook .fa{
  font-size:30px;
  color: var(--primary-button-text);
}

#addBelegManual{
  position:fixed;
  top:60%;
  left:80%;
  background: var(--secondary-light-trans-80);
  border: 1px solid var(--secondary-light);
  color: var(--primary-button-text);
  border-radius:100%;
  padding:10 12 10 12;
  display:none;
  cursor:pointer;
  z-Index:900;
}

#addBelegManual .fa{
  font-size:30px;
  color: var(--primary-button-text);
}

#addBookEntry{
  position:fixed;
  top:70%;
  left:80%;
  background: var(--secondary-light-trans-80);
  border: 1px solid var(--secondary-light);
  border-radius:100%;
  padding:10px 11px 10px 11px;
  display:block;
  cursor:pointer;
  z-Index:200;
}

#addBookEntry .fa{
  font-size:30px;
  color: var(--primary-button-text);
}

.fa-toggle-off, .fa-toggle-on{
    font-size:30px;
    color: var(--secondary-light);
}
.note{
  font-size:70%;
  padding-left:10px;
  display:block;
  position:absolute;
}
.noteNoLeftSpace{
  font-size:70%;
  display:block;
}
.noteNoLeftSpace span{
  font-size:100%;
}
.btn_big, #html5-qrcode-button-camera-permission, #html5-qrcode-select-camera, #html5-qrcode-button-camera-stop, #html5-qrcode-button-camera-start {
    padding:10px 5px 10px 5px;
    text-decoration: none;
    border: 1px solid var(--primary-light);
    background: var(--secondary-light);
    width:95%;
    border-radius: 5px;
    display:block;
    text-align: center;
    color: var(--light-white);
}
#html5-qrcode-button-camera-permission, #html5-qrcode-select-camera{
  margin-left:10%;
  width:80%;
  margin-top:10px;
}
#html5-qrcode-button-camera-stop, #html5-qrcode-button-camera-start{
  width: 40%;
  margin-top: 10px;
}
#html5-qrcode-button-camera-start{
  position:absolute;
  left:30%;
  width:40%;
}

#html5-qrcode-anchor-scan-type-change, #html5-qrcode-anchor-scan-type-change{
  display:none;
  font-size:0px;
}



table{
    border-collapse: collapse;
}
.bookRow{
    height:30px;
}
.bookRow TD {
    width:90%;
    padding: 10 1 10 1;
}
.bookRow TD a{
    text-decoration: none;
    display:block;
    padding:5px;
}
.bookRow TD .fa{
    border: 1px solid var(--primary-dark);
    padding:10px;
    border-radius: 10px;
    color: var(--secondary-light)
}
.bookRow TD .detailArrowRight .fa{
  position:absolute;
  margin-top: 8px;
  margin-left: -40px;
  border:none;
  color: var(--secondary-light-trans-50);
}

.SliderRowbookOverview{
  border-bottom: 1px solid var(--light-grey);
  box-shadow: 1px 5px 10px -12px var(--dark-grey);
}

.bottomSheetRow{
  height:30px;
  cursor:pointer;
}

.bottomSheetRow TD {
  width:90%;
  border-bottom: 1px solid var(--light-grey);
  padding-bottom: 5px;
  padding-top: 5px;  
}
.bottomSheetRow TD a{
  text-decoration: none;
  display:block;
  padding:5px;
}
.bottomSheetRow TD .fa{
  border: 1px solid var(--primary-dark);
  padding:10px;
  border-radius: 10px;
  color: var(--secondary-light)
}
#bookContentList{
    border-collapse: separate;
}
.bookContentListRow{
  font-size:100% !important;
  padding:5px;
  text-decoration:none;
  background-color: var(--white);
}
.noUnderline{
  text-decoration:none;
}

.newSeenBeleg{
  background-color: var(--alertColor-trans-50);
  border:1px solid var(--primary-light);
  border-radius:50px;
  margin-top:7px;
  margin-left:-5px;
  padding:3px;
}
.alreadySeenBeleg{
  background-color: var(--secondary-light-trans-50);
  border:1px solid var(--primary-light);  
  border-radius:50px;
  margin-top:7px;
  margin-left:-5px;
  padding:3px;
}

.exactFilter .fa{
  border: 1px solid var(--primary-light);
  color: var(--secondary-light);
  border-radius:5px;
  position: absolute;
  right: 2%;
  padding: 6px;  
}
.btnMakeFoto{
    border: 1px solid var(--primary-dark);
    padding: 20px;
    border-radius:50px;
    background-color: var(--secondary-light);
    position: absolute;
    margin-left: 37%;
    bottom: -60%;
}
.btnMakeFoto .fa{
    font-size:30px;
}
.btnUploadFoto{
    border: 1px solid var(--primary-dark);
    padding: 10px;
    border-radius:50px;
    background-color: var(--secondary-light);
    position: absolute;
    margin-left: 73%;
    bottom:-60%;
}
.btnUploadFoto.fa{
    font-size:20px;
}
.btnManuelEntry{
  border: 1px solid var(--primary-dark);
  padding: 10px 11px;
  border-radius:50px;
  background-color: var(--secondary-light);
  position: absolute;
  margin-left: 85%;
  bottom:-60%;
}
.btnManuelEntry.fa{
  font-size:20px;
}

.fullscreenFotoClosed{
  border: 1px solid var(--primary-dark);
  padding: 10px;
  border-radius:50px;
  background-color: var(--secondary-light);
  position: absolute;
  margin-left: 83%;
  margin-top: 10px;
  z-Index:1002;
}
.fullscreenFotoOpen{
  border: 1px solid var(--primary-dark);
  padding: 10px;
  border-radius:50px;
  background-color: var(--secondary-light);
  position: absolute;
  margin-left: 80%;
  margin-top: -120px;
  z-Index:1002;
}
.videoFullScreen{
  position: fixed;
  top: 0px;
  left: 0px;
  min-width: 250% !important;
  width: auto;
  min-height: 250%;
  z-Index: 1001;
  margin-top: -100px;
}
.videoCaptureFullScreen{
  position:fixed;
  z-Index:1002;
  bottom:5%;

}
.noteTextVideo{
  position: absolute;
  width: 99%;
  bottom: -74%;
  background: #FFF;
  padding: 5px;
  left: 0px;
  font-size: 90%;
}
#loadingSpinner{
  z-Index: 1002;
  position: absolute;
  
}
.typeOfDocumentText{
    padding-bottom:5px;
}
#typeOfDocument{
    padding:5px;
    border: 1px solid var(--primary-light);
    width: 95%;
    background: #FFF;
    color: var(--primary-light);
    border-radius: 5px;
}
.bookItemInput{
  border:0px;
  font-size:70%;
  background-color: var(--light-white);
}
.bookItemInputDetail{
    border:0px;
    font-size:70%;
    background-color: var(--white);
  }
  .detailArrowRight{
    position: absolute;
    top: 30%;
    right: 0%;
  }
.detailArrowRight .fa{
    color: var(--secondary-light-trans-50);
  }
    
#entryComment, .entryComment{
  border:1px solid var(--primary-light);
  background-color: var(--light-white);
  border-radius:5px;
  background-color: #FFF;
  height: 30px;
}
.medium{
  width:100px !important;
}
.small{
  width:40px !important;
  text-align: right;
}
.verysmall{
  width:20px !important;
}
#sumValue{
  width:70px !important;
}
.selectBookIdFromBook{
  min-width:130px;
  min-height:30px;
  border: 1px solid var(--primary-light);
  background-color: var(--light-white);
  border-radius:5px;
}
.bgWhite{
  background-color: var(--white);
}

.bookDetailClosed{
  display:none;
  height:0px;
  width:150%;

}
.bookDetailOpen{
  display:block;
  min-height:50px;
  width:150%;
  float:left;
  overflow:hidden;
}
.bookDetailOpen table, .bookDetailOpen table TR TD{
    background-color: var(--white);
}
.boldText td input{
  font-weight: bold;
}
.headlineRowHighlighted TR TD{
    color:var(--secondary-light);
}
#deleteBeleg{
    padding: 10px 20px 10px 12px;
    border: 1px solid var(--alertColor);
    border-radius: 5px;
    width: 10px !important;
    margin-top:10px;
    margin-left:10px;
}
#deleteBeleg .fa{
    color: var(--alertColor);
    font-size: 130%;
}
#deleteBelegDisabled{
    padding: 10px 20px 10px 12px;
    border: 1px solid var(--light-grey);
    border-radius: 5px;
    margin-top: 10px;
    width: 10px !important;
    margin-left:10px;
}
#deleteBelegDisabled .fa{
    color: var(--light-grey);
    font-size: 130%;
}
#rebookBeleg{
  padding: 10px 20px 10px 12px;;
  border: 1px solid var(--secondary-light);
  border-radius: 5px;
  margin-top: 10px;
  width: 10px !important;
  margin-left:14px;
}
#rebookBeleg .fa{
  color: var(--secondary-light);
  font-size: 130%;
}
.downloadDocument{
  padding: 12px 20px 10px 12px;
  border: 1px solid var(--secondary-light);
  border-radius: 5px;
  margin-top: 10px;
  width: 10px !important;
  position: absolute;
  margin-top: -17px;
  margin-left:10px;
}
.downloadDocument .fa{
  color: var(--secondary-light);
  font-size: 130%;
}
.actionText{
  font-size:60%;
}

.qrCodeHolder{
  width:400px;
  margin-left:15%;
}
#QRCodeReader{
  width:95%;
  min-height: 250px;
}
#shareBookUrl{
  width:90%;
  background:none;
  height:80px;
  border:0px;
}

#startDate, #endDate{
  width:50px;
  font-size:70%;
}
#startDate{
  margin-top:-10px;
}
.statisticImage{
  width:98%;
  height:300px;
  float:left;
  border: 1px dotted var(--dark-grey);
  margin-top:10px;
}
.highcharts-legend{
  font-size: 10px !important;
}

.noborder{
  border:0px !important;
  font-size:70%;
}

#mySplitAmount{
  padding:5px;
  border:1px solid var(--primary-light);
  border-radius: 5px;
}
#splitMessage{
  font-weight:normal;
  border-bottom:1px solid var(--dark-grey);
  padding-bottom:15px;
  display:none;
  font-size:100%;
}
#splitMessage .fa{
  color: var(--secondary-light);
}
.splitReceiverNote{
  color: var(--secondary-light);
}
#manualEntry .fa, #uploadFoto .fa, #fullscreenFoto .fa, #capture .fa{
  color: var(--primary-button-text);
}

#closeManualEntry{
  position:absolute;
  right:15%;
  background-color: var(--alertColor-trans-50);
  padding:10px 12px;
  border: 1px solid var(--alertColor);
  border-radius: 50px;
  margin-top:-30px;
}
#closeManualEntry .fa{
  color: 1px solid var(--alertColor);
}
#saveManualEntry{
  position:absolute;
  right:2%;
  background-color: var(--secondary-light-trans-80);
  padding:10px;
  border: 1px solid var(--primary-light);
  border-radius: 50px;
  margin-top:-30px;
}
#saveManualEntry .fa{
  color: 1px solid var(--secondary-light);
}
.unseenNotification{
  position: absolute;
  z-Index: 101;
  border: 1px solid var(--primary-light);
  border-radius: 4px;
  background-color: var(--secondary-light-trans-30);
  padding: 2px 3px 2px 4px;
  font-size: 60%;
  font-weight: bold;
  margin-left: 79%;
  min-width: 15px;
  display:none;
}

.books_bookCount{
  position: absolute;
  z-Index: 101;
  border: 1px solid var(--dark-grey);
  border-radius: 4px;
  background-color: var(--light-grey);
  padding: 2px 3px 2px 4px;
  font-size: 60%;
  font-weight: bold;
  right: 15%;
  min-width: 25px;
  float: right;
}
.sumOfBook{
  position:absolute;
  margin-top: 8px;
  margin-left: -40px;
}
.noteBookOverview{
  max-width:200px;
}

#budgetWrapper{
  width:98%;
  border: 1px solid var(--primary-light);
  height:15px;
  padding:1px;
}
#budgetValueUsed{
  background-color: var(--secondary-light);
  height:15px;
  display:block;
  float:left;
}
.budgetValueUsedWarn{
  background-color: var(--alertColor-trans-50) !important;
}
.budgetValueUsedRed{
  background-color: var(--alertColor) !important;
}
#budgetWrapper{
  background-color: var(--grey);
  height:15px;
  display:block;
  float:left;
  width:125px;
  border-radius:3px;
  right:3%;
  position:absolute;
  margin-top:-10px;
  text-align:center;
  font-size:70%;
}
.horSpacer{
  height:10px;
  display:block;
  width:100%;
}
.horSpacer-5{
  height:5px;
  display:block;
  width:100%;
}
.editBelegEntryBeforeSave {
  border: 1px solid var(--primary-dark);
  padding: 10px 11px;
  border-radius: 50px;
  background-color: var(--secondary-light-trans-50);
  position: fixed;
  z-Index:1001;
  margin-left: 40%;
  margin-top: -10px;
}
#newEntryDateNote{
  position: absolute;
  width: 175;
  display: block;
  margin-top: -25px;
  margin-left: 110px;
  border-radius:5px;
}
.dateNoteInfo{
  background-color: var(--alertColor-trans-50);
}
.dateNoteWarn{
  background-color: var(--alertColor);
}

.royalslider{
 width:320px !important;
}
.rsSlide {
  min-height:50px;
}

.bookItemInputEdit{
  display:none;
  padding-left:5px;
  margin-top: -12px;
  height: 65px;
}
.bookItemInputEditField{
  padding:5px;
  border: 1px solid var(--primary-dark);
  border-radius:5px;
}



/* INfo Modal Kram */
#infoModalWrapper{
  position:fixed;
  height:90%;
  width:90%;
  background-color: var(--white);
  border:1px solid var(--primary-light);
  box-shadow: -1px -1px 10px grey;
  border-radius:10px;
  display:block;
  top:25px;
  left:20px;
  z-Index:20000;
  display:none;
}
#headerInfoWrapper{
  border-bottom:1px solid var(--secondary-light-trans-80);
  height:30px;
  font-size:18px;
  padding:10px;
}
#btnCloseInfoWrapper{
  padding: 5 7 5 7;
  background-color: var(--white);
  border: 1px solid var(--secondary-light-trans-80);
  background-color: var(--secondary-light-trans-90);
  border-radius: 50%;
  position: fixed;
  right: 6%;
  margin-top: -45px;
}
#btnCloseInstallWrapper{
  padding: 5 7 5 7;
  background-color: var(--white);
  border: 1px solid var(--secondary-light-trans-80);
  background-color: var(--secondary-light-trans-90);
  border-radius: 50%;
  position: fixed;
  right: 6%;
  margin-top: -5px;
}
#wrapperNeverShowAgain{
  border-top:1px solid var(--secondary-light-trans-80);
  height:30px;
  font-size:16px;
  padding:10px;
  position:absolute;
  width:87%;
  left:10px;
}
.royalSliderInfoModal{
  height:80%;
  padding-left: 10px;
  padding-top:10px;
}
#infoModalSlideCounter{
  text-align: center;
  width:100%;
  height:20px;
  position:absolute;
  margin-top:-35px;
}
.slideCounter{
  text-align: center;
}
.slideCounter li{
  float:left;
  list-style: none;
  margin-left:5px;
}
.dotInactive{
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: var(--dark-grey);
}
.dotActive{
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: var(--secondary-light-trans-80) !important;
}
/* Ende Info Modal Kram */


.rsc .bookSetting .fa{
  border: 1px solid var(--primary-dark);
  padding:10 12 10 12 ;
  border-radius: 10px;
  color: var(--secondary-light)
}
.rsc .bookSetting .fa-eraser{
  border: 1px solid var(--primary-dark);
  padding:11px;
  border-radius: 10px;
  color: var(--secondary-light)
}
.rsCButtons table TD{
  text-align:center;
}
.rsCButtons TD.disabled .fa{
  color: var(--light-grey);
}





/* Etry Comment Suggest */

#entryCommentSuggest{
  background: var(--white);
  position: absolute;
  border: 1px solid var(--primary-light);
  margin-top: 0px;
  z-Index: 0;
  width: 88%;  
  max-height:150px;
  overflow-y:scroll;
  display:none;
  border-radius: 5px;
}
#suggestUl{
  list-style: none;
  margin-left: px;
  padding: 5px;
  margin-top: 5px;  
}
.suggestItem{
  padding: 5px;
  border-bottom: 1px solid var(--dark-grey);
  padding-top: 10;
  text-align: left;
  cursor: pointer;
}
#suggestUl .suggestItem:hover{
  background-color: var(--secondary-light-trans-80);
}
/* Ende Entry Comment Suggest */



/* Book search */

#bookSearch .fa{
  position: absolute;
  margin-left: -35px;
}
#bookSearch #inputBookSearch{
  position: absolute;
  margin-left: -240px;
  margin-top: -3px;
  border: 1px solid var(--primary-dark);
  border-radius: 5px;
  padding: 10px;
  width:200px;
  display: none;
}
/* End Book search */


#cameraZoomSlider{
  position: absolute;
  bottom: -55%;
  z-Index: 2000;
  width: 100px;
  accent-color: var(--secondary-light);
}



/* Calendar Statistic */
#calendar-body td{
  vertical-align: bottom;
}
.pzWrapper{
  width: 10px;
  display: block;
  float: right;
  margin-left: 5px;
  height:30px;
  position:relative;
}
.pz{
  position: absolute;
  bottom:0px;
  width:10px;
}
.test-widthDate{
  vertical-align: bottom;
  border:1px solid grey;
}
/* End Calendar Statistic */


/* App INstall Screen */
#appInstallWrapper{
  position:fixed;
  top:20%;
  left:5%;
  height:50%;
  width: 85%;
  background-color: var(--white);
  border: 1px solid var(--secondary-light);
  padding:10px;
  z-Index:1801;
  border-radius:5px;
  box-shadow: 1px 5px 10px grey;
  display:none;
}
/*Ende App install Screen */
.bookColor{
  float:left;
  margin-left:5px;
  width:25px;
  height:25px;
  border-radius:1px;
  border: 1px solid grey;
  display:block;
}


/* Rebook wrapper */
#rebookWrapper{
  position:fixed;
  top:15%;
  left:5%;
  height:70%;
  width: 85%;
  background-color: var(--white);
  border: 1px solid var(--secondary-light);
  padding:10px;
  z-Index:1801;
  border-radius:5px;
  box-shadow: 1px 5px 10px grey;
  display:none;
}
#btnCloseRebookWrapper{
  padding: 5 7 5 7;
  background-color: var(--white);
  border: 1px solid var(--secondary-light-trans-80);
  background-color: var(--secondary-light-trans-90);
  border-radius: 50%;
  position: fixed;
  right: 6%;
}
#rebookContent{
  overflow-y: scroll;
  height: 390px;
}
#selectNewBookForRebook{
  padding: 10px;
  width: 99%;
  border: 1px solid var(--secondary-light);
  border-radius: 5px;
}

/*Bookstatus*/

.bookStatusSelect{
  border:1px solid var(--dark-grey);
  padding:2px;
  text-align: center;
  font-size:80%;
  cursor: pointer;
}
.bookSelectionOn{
  background-color: var(--secondary-light);
  color:var(--light-white);
}

.bookArchived{
  background-color:var(--secondary-light);
  color: var(--light-white) !important;
}
.bookArchivedRow TD a, .bookArchivedRow TD span {
  color: var(--dark-grey);
}





.shareUrl{
  font-size:150%; 
  padding:5px; 
  border: 1px solid var(--primary-dark);
  color:var(--secondary-light);
  border-radius:5px;
  transform: rotate(270deg);
}








/* Skelton Definitions */
.skeleton, .skeleton-secondary  {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.skeleton-text {
  width: 100%;
  height: 20px;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}
/* End Skeleton */


/*3DotMenu*/
#menu3Dot{
  width:20px;
  display:block;
  position: fixed;
  top:15px;
  margin-left: 40px;  
}
#menu3Dot .fa{
  font-size:170%;
}
#menu3dotWrapper{
  position:fixed;
  display:none;
  min-height:100%;
  width:100%;
  z-Index:1002;
  top:0px;
  right:1%;
  border:0px solid red;
}
#menu3dotHighlighted{
  position:fixed;
  display:block;
  min-height:60px;
  width:20px;
  z-Index:1001;
  background: var(--white);
  top:8px;
  right:8px;
  border:0px solid grey;
  border-radius: 5px;
}
#menu3dotHighlighted .fa{
  color:var(--primary-dark);
  font-size:190%;
  margin-left:7px;
  margin-top:5px;
}
#menu3dotContent{
  background-color: var(--white);
  display: block;
  position: fixed;
  min-height: 200px;
  width: 95%;
  top: 58px;
  margin-left: 13px;
  border-bottom: 1px solid grey;
  border-radius: 5px;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
#menu3dotContent ul li{
  list-style: none;
  margin-left:-24px;
  border-bottom:1px solid var(--light-grey);
  padding-bottom:10px;
  padding-top:10px;
}
#menu3dotContent ul li a{
  text-decoration: none;
}
#menu3dotContent ul li .fa{
  padding-right:10px;
  font-size:120%;
}
/*Ende 3DotMenu */


/* Loading Spinner */
.lds-roller {
    /* change color here */
    position:absolute;
    margin-top:-200px;
    margin-left:37%;
  }
  .lds-roller,
  .lds-roller div,
  .lds-roller div:after {
    box-sizing: border-box;
  }
  .lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
    color: var(--secondary-light) !important;

  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: currentColor;
    margin: -3.6px 0 0 -3.6px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 62.62742px;
    left: 62.62742px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 67.71281px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 70.90963px;
    left: 48.28221px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 70.90963px;
    left: 31.71779px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 67.71281px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 62.62742px;
    left: 17.37258px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12.28719px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }